@font-face {
  font-family: 'Breathing';
  src: url("../fonts/Breathing Regular.ttf") format('truetype');
  font-weight: normal; 
  font-style: normal;
}

/** See php-fonts.php for other fonts **/

* {
    --primary: #0aa1d8;
    --white: #ffffff;
    --text-color: #2C2E2F;
    --font-breathing: 'Breathing', serif;
    --font-lato: 'Lato', sans-serif;
    --font-poppins: 'Poppins', sans-serif;
    --font-playfair-display: "Playfair Display", serif;
    --color-pink: #f6caca; 
    --color-pink-lighter: #fdf4f4;
    --color-darktan: #9b8f74;      
    --color-lighttan: #e4d9c5;
    --color-lighttan-lighter: #f7f4ee;
    --color-lighttan-lightest: #ece4d6;
    --color-darkgreen: #3f4c37;
    --color-lightgreen: #b3b39d;
    --color-lightgreen-lighter: #ecf1e9;  
    --color-lightgreen-lightest: #f3f6f1;
    --color-slategray: #3B4147;
    --color-forestgray: #59675a;
    --color-logo-blue: #0aa1d8;
    --color-greengray: #70848d;
    --banner-h: 40px;
}

body {  /** default **/
    font-family: var(--font-lato);
    font-size: 1.50rem;
    line-height: 2.35rem;
    color: var(--color-darkgreen);
}

h1 {
    font-size: 3.00rem !important;
    line-height: 4.50rem !important;    /** for good readability, line-height should be about 1.5 times font size **/
}

h2 {
    font-size: 2.55rem !important;
    line-height: 3.83rem !important;
}

h3 {
    font-size: 2.17rem !important;
    line-height: 3.26rem !important;
}

h4 {
    font-size: 1.84rem !important;
    line-height: 2.76rem !important;
}

/** Reduce font size when viewport height is short so h1's and h2's don't bump into the header **/
@media screen and (max-height: 900px) {
    h1 {
        font-size: 2.25rem !important;
        line-height: 3.35rem !important;
    }
    
    h2 {
        font-size: 1.95rem !important;
        line-height: 2.95rem !important;
    }
}

/** Reduce font size even more for shorter viewport heights **/
@media screen and (max-height: 700px) {
    h1 {
        font-size: 1.85rem !important;
        line-height: 2.75rem !important;
    }
    
    h2 {
        font-size: 1.65rem !important;
        line-height: 2.45rem !important;
    }
}

/** And make fonts much smaller for really small screens - the "," means "or" **/
@media screen and (max-width: 399px), screen and (max-height: 700px) {
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.5 !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
        line-height: 1.5 !important;
    }
}

@media screen and (min-width: 400px) {
    .homepage-subhead {
        font-size: 2.0rem !important;
    }
}

@media (min-width: 768px) and (max-width: 980px) {       /** sdb added 11/22/2024 - make headings smaller on smaller screens **/
    h1 {
        font-size: 2.55rem !important;
        line-height: 3.83rem !important;
    }
    h2 {
        font-size: 2.17rem !important;
        line-height: 3.26rem !important;
    }
    h3 {
        font-size: 1.85rem !important;
        line-height: 2.77rem !important;
    }
    h4 {
        font-size: 1.56rem !important;
        line-height: 2.35rem !important;
    }
    .homepage-subhead {
        font-size: 2.0rem !important;
    }
}

@media (min-width: 400px) and (max-width: 767px) {      /** sdb added 11/22/2024 - make headings smaller on smaller screens **/
    h1 {
        font-size: 1.85rem !important;
        line-height: 2.78rem !important;
    }
    h2 {
        font-size: 1.59rem !important;
        line-height: 2.37rem !important;
    }
    h3 {
        font-size: 1.34rem !important;
        line-height: 2.01rem !important;
    }
    h4 {
        font-size: 1.14rem !important;
        line-height: 1.71rem !important;
    }
    .homepage-subhead {
        font-size: 1.30rem !important;
    }
}


p, li {
    font-family: var(--font-lato);
    font-size: 1.35rem; 
    line-height: 2.125rem; 
}

@media (min-width:681px) and (max-width:991px) {  /** was 767 **/
    .top-banner {
        font-size: 0.85rem !important;
    }
}
@media (max-width:680px) {
    .top-banner {
        font-size: 0.70rem !important;
    }
}

.color-darktan {
    color: var(--color-darktan);
}

.color-darkgreen {
    color: var(--color-darkgreen);
}

.color-slategray {
    color: var(--color-slategray);
}

.color-greengray {
    color: var(--color-greengray);
}


.ff-breathing {
	font-family: var(--font-breathing);
}

.ff-lato {
	font-family: var(--font-lato);
}

.ff-poppins {
    font-family: var(--font-poppins);
}

.ff-playfair-display {
    font-family: var(--font-playfair-display);
}

.top-header {
    background: #cbd5d7;
    color: #fbf9f7;
    /* height: 40px; */            /* remove fixed height */
    /* line-height: 40px; */        /* remove fixed line-height */
    min-height: var(--banner-h);    /* keep at least the banner height */
    display: flex;                  /* enable vertical centering */
    align-items: center;            /* vertically center the content */
    justify-content: center;        /* center the combo horizontally */
    padding-block: 4px;             /* small breathing room when wrapping */
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700 !important;
}

@media (max-width:767px) {
    .top-header {
        font-size: 65% !important;
        font-weight: 700 !important;
    }   
}

.mainmenuitems {
    z-index: 1000;
    width: 100%;
    position: relative;
}

.mainmenuitems nav.navbar {
    position: fixed;
}

/* Remove pseudo-icon to prevent missing glyphs if an icon font isn't loaded */
.mainmenuitems .dropdown-item::before {
    content: none;
}

.mainmenuitems .dropdown-menu {
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.mainmenuitems .dropdown-item {
    border-bottom: 1px solid #e6e6e6;
}

.mainmenuitems .dropdown-item:hover span {
    color: white;
}

.mainmenuitems .dropdown-item:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.mainmenuitems .dropdown-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mainmenuitems .nav-dropdown .link {
    padding: 0 0.3em !important;
    margin: 0.667em 1em !important;
}

.mainmenuitems .nav-dropdown .link.dropdown-toggle::after {
    margin-left: 0.5rem;
    margin-top: 0.2rem;
}

.mainmenuitems .nav-link {
    position: relative;
}

.mainmenuitems .container {
    display: flex;
    margin: auto;
}


/**
    Scott Kludge...

    Problem: Between 1,227px and 1,469px (with the nav items and font family and size as is) the left side nav was wrapping to 2 lines before the right side nav wrapped, and it looked stupid 
  
    Solution: Add a bunch of &nbsp; characters, via a <span>, to the end of the last right side nav item.  By default, hide them via "display:none".  In the "problem" width range, show them.
              Since they're just spaces, nothing will show up.  But since they do take up space, they force the last nav item on the right to wrap to the next line.
   
    Note: If the words in the navigation, the font family, or the font size change, the breakpoints and number of &nbsp; characters used will probably have to change.
    Is this a very non-elegant, kludgey solution? Yup, absolutely!
**/

.sdbkludge {
    display: none;
}

@media (min-width: 1227px) and (max-width: 1469px) {
    .sdbkludge {
        display: block !important;
        color: transparent !important;
        /** shouldn't need for &nbsp; characters but force to transparent just in case **/
    }
}

/** Adjust hamburger appearance **/
/** Below 1220px, show the hamburger and hide the normal nav items **/
@media (max-width: 1219.98px) {
    .navbar-expand-lg {
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-collapse {
        display: none;
    }
    .navbar-nav-left,
    .navbar-nav-right {
        display: none;
    }
    .navbar-expand-lg .navbar-toggler {
        display: block;
    }
}
/** At and above 1220px, hide the hamburger and show the normal nav items **/
@media (min-width: 1220px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
}

@media (min-width: 992px) {
    .mainmenuitems .container {
        flex-wrap: nowrap;
    }
}



/**
@media (min-width: 992px) and (max-width: 1199px) {
    .opened li {
        outline:2px dotted yellow !important;
        display: block !important;
    }
}
**/

.mainmenuitems .dropdown-menu,
.mainmenuitems .navbar.opened {
    background: #fafaf6 !important;
}

.mainmenuitems .nav-item:focus,
.mainmenuitems .nav-link:focus {
    outline: none;
}

.mainmenuitems .dropdown .dropdown-menu .dropdown-item {
    width: auto;
    transition: all 0.25s ease-in-out;
}

.mainmenuitems .dropdown .dropdown-menu .dropdown-item::after {
    right: 0.5rem;
}

.mainmenuitems .dropdown .dropdown-menu .dropdown-item .mbr-iconfont {
    margin-right: 0.5rem;
    vertical-align: sub;
}

.mainmenuitems .dropdown .dropdown-menu .dropdown-item .mbr-iconfont:before {
    display: inline-block;
    transform: scale(1, 1);
    transition: all 0.25s ease-in-out;
}

.mainmenuitems .collapsed .dropdown-menu .dropdown-item:before {
    display: none;
}

.mainmenuitems .collapsed .dropdown .dropdown-menu .dropdown-item {
    padding: 0.235em 1.5em 0.235em 1.5em !important;
    transition: none;
    margin: 0 !important;
}

.mainmenuitems .navbar {
    transition: all 0.3s;
    background: transparent;
    border-radius: 0 !important;
    top: 30px;
    padding: 25px 0px !important;
}

.mainmenuitems .navbar.opened {
    transition: all 0.3s;
}

.mainmenuitems .navbar .dropdown-item {
    padding: 0.5rem 1.8rem;
}

.mainmenuitems .navbar .navbar-collapse {
    justify-content: flex-end;
    z-index: 1;
}

.mainmenuitems .navbar.collapsed {
    justify-content: center;
}

.mainmenuitems .navbar.collapsed .nav-item .nav-link::before {
    display: none;
}

.mainmenuitems .navbar.collapsed.opened .dropdown-menu {
    top: 0;
}

.mainmenuitems .navbar.collapsed .dropdown-menu .dropdown-submenu {
    left: 0 !important;
}

.mainmenuitems .navbar.collapsed .dropdown-menu .dropdown-item:after {
    right: auto;
}

.mainmenuitems .navbar.collapsed .dropdown-menu .dropdown-toggle[data-toggle="dropdown-submenu"]:after {
    margin-left: 0.5rem;
    margin-top: 0.2rem;
    border-top: 0.35em solid;
    border-right: 0.35em solid transparent;
    border-left: 0.35em solid transparent;
    border-bottom: 0;
    top: 41%;
}

.mainmenuitems .navbar.collapsed ul.navbar-nav li {
    margin: auto;
}

.mainmenuitems .navbar.collapsed .dropdown-menu .dropdown-item {
    padding: 0.25rem 1.5rem;
    text-align: center;
}

/** @media (max-width: 991px) { **/
@media (max-width: 1219px) {
    .mainmenuitems .navbar .nav-item .nav-link::before {
        display: none;
    }

    .mainmenuitems .navbar.opened .dropdown-menu {
        top: 0;
    }

    .mainmenuitems .navbar .dropdown-menu .dropdown-submenu {
        left: 0 !important;
    }

    .mainmenuitems .navbar .dropdown-menu .dropdown-item:after {
        right: auto;
    }

    .mainmenuitems .navbar .dropdown-menu .dropdown-toggle[data-toggle="dropdown-submenu"]:after {
        margin-left: 0.5rem;
        margin-top: 0.2rem;
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        border-bottom: 0;
        top: 40%;
    }

    .mainmenuitems .navbar ul.navbar-nav li {
        margin: auto;
    }

    .mainmenuitems .navbar .dropdown-menu .dropdown-item {
        padding: 0.25rem 1.5rem !important;
        text-align: center;
    }

    .mainmenuitems .navbar .navbar-brand {
        flex-shrink: initial;
        flex-basis: auto;
        word-break: break-word;
    }

    .mainmenuitems .navbar .navbar-toggler {
        flex-basis: auto;
    }
}

.mainmenuitems .navbar.navbar-short {
    min-height: 70px;
    top: 0px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.mainmenuitems .navbar.navbar-short .navbar-brand {
    min-height: 70px;
    padding: 0;
}

.mainmenuitems .navbar-brand {
    min-height: 70px;
    flex-shrink: 0;
    align-items: center;
    transition: all 0.3s;
    z-index: 1;
    margin: 0 auto auto auto;
    padding: 0 15px;
}

.mainmenuitems .navbar-brand .navbar-caption {
    line-height: inherit !important;
}

.mainmenuitems .dropdown-item.active,
.mainmenuitems .dropdown-item:active {
    background-color: transparent;
}

.mainmenuitems .navbar-expand-lg .navbar-nav .nav-link {
    padding: 0;
}

.mainmenuitems .nav-dropdown .link.dropdown-toggle {
    margin-right: 1.667em;
}

.mainmenuitems .nav-dropdown .link.dropdown-toggle[aria-expanded="true"] {
    margin-right: 0;
    padding: 0.667em 1.667em;
}

.mainmenuitems .navbar.navbar-expand-lg .dropdown .dropdown-menu {
    background: #fafaf6;
}

.mainmenuitems .navbar.navbar-expand-lg .dropdown .dropdown-menu .dropdown-submenu {
    margin: 0;
    left: 100%;
}

.mainmenuitems .dropdown-menu {
    background: #fafaf6 !important;
    min-width: 14rem !important;
}

.mainmenuitems .navbar-nav-main .nav-item ul.dropdown-menu li a.nav-link {
    text-align: left !important;
    padding: 3px 25px !important;
    display: block;
    align-items: normal;
    justify-content: left;
}

/* Right-facing chevron for second-level dropdown items (no external icon font needed) */
.mainmenuitems .navbar-nav-main .nav-item ul.dropdown-menu li a.nav-link {
    position: relative;
    padding-left: 1rem !important; /* normalized now that chevron is removed */
}
.mainmenuitems .navbar-nav-main .nav-item ul.dropdown-menu li a.nav-link::before {
    content: none !important;
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9em;
    line-height: 1;
    color: currentColor;
    opacity: 0.75;
}

/* Mirror the chevron treatment inside the mobile sidebar dropdown list */
@media (max-width: 1219px) {
    .mainmenuitems .sidbar-nav .dropdown-menu .nav-item > .nav-link {
        position: relative;
        padding-left: 1.75rem !important;
    }
    .mainmenuitems .sidbar-nav .dropdown-menu .nav-item > .nav-link::before {
    content: none !important;
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.95em;
        line-height: 1;
        color: currentColor;
        opacity: 0.8;
    }
}

.mainmenuitems .navbar .navbar-collapse .dropdown .dropdown-menu .dropdown-submenu {
    margin: 0;
    left: 100%;
}

.mainmenuitems .navbar .dropdown.open>.dropdown-menu {
    display: block;
}

.mainmenuitems ul.navbar-nav {
    flex-wrap: wrap;
}

.mainmenuitems button.navbar-toggler {
    outline: none;
    width: 26px;
    height: 18px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    align-self: center;
    margin-left: auto;
    margin-right: 12px;
}

.mainmenuitems button.navbar-toggler .hamburger span {
    position: absolute;
    right: 0;
    width: 25px;
    height: 2px;
    border-right: 5px;
    background-color: #ffffff;
}

.mainmenuitems button.navbar-toggler .hamburger span:nth-child(1) {
    top: 0;
    transition: all 0.2s;
}

.mainmenuitems button.navbar-toggler .hamburger span:nth-child(2) {
    top: 8px;
    transition: all 0.15s;
}

.mainmenuitems button.navbar-toggler .hamburger span:nth-child(3) {
    top: 8px;
    transition: all 0.15s;
}

.mainmenuitems button.navbar-toggler .hamburger span:nth-child(4) {
    top: 16px;
    transition: all 0.2s;
}

.mainmenuitems button.navbar-toggler .hamburger-bg {    /** hamburger background color **/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #70848e;
    transition: all 0.2s;
}

.mainmenuitems .navbar-toggler-close {
    position: fixed;
    right: 20px;
    top: 20px;
    margin-right: 0 !important;
}

.mainmenuitems .navbar-toggler-close .hamburger span:nth-child(1) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all 0.2s;
}

.mainmenuitems .navbar-toggler-close .hamburger span:nth-child(2) {
    transform: rotate(45deg);
    transition: all 0.25s;
}

.mainmenuitems .navbar-toggler-close .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
    transition: all 0.25s;
}

.mainmenuitems .navbar-toggler-close .hamburger span:nth-child(4) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all 0.2s;
}

.mainmenuitems .navbar-toggler-close .hamburger-bg {
    opacity: 0;
}

.mainmenuitems .navbar-dropdown {
    padding: 0 1rem;
    position: fixed;
}

.mainmenuitems a.nav-link {
    display: flex;
    align-items: center;
}

.mainmenuitems a.nav-link:hover {
    /** Scott added 8/8/2023 **/
    text-decoration: underline;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .mainmenuitems .navbar {
        height: 70px;
    }

    .mainmenuitems .navbar.opened {
        height: auto;
    }

    .mainmenuitems .nav-item .nav-link:hover::before {
        width: 175%;
        max-width: calc(100% + 2rem);
        left: -1rem;
    }
}

.mainmenuitems .navbar-nav-main {   /** sdb updated 11/22/2024 **/
    width: 36%;     /** was 40% **/
    margin: 55px 0 0 0;     /** was 0 0 0 0 **/
}

.mainmenuitems .navbar-nav-main .nav-item {
    margin: 0 !important;
}

.mainmenuitems .navbar-nav-main .nav-item .nav-link {
    padding: 15px 15px !important;
    margin: 0 !important;
}

@media (min-width:1220px) and (max-width:1550px) {
    .mainmenuitems .navbar-nav-main .nav-item .nav-link {
        padding: 15px 8px !important;  /** sdb added 11/22/2024 - need smaller left/right padding so nav items don't wrap to second line **/
    }
}

.mainmenuitems .navbar-nav-left {
    /** Scott added 8/8/2023 so left-side nav items float right to bump into logo **/
    justify-content: flex-end;
}

.mainmenuitems .navbar-toggler-open {
    position: relative;
    z-index: 10 !important;
}

.mainmenuitems .navbar-toggler {
    position: relative;
    z-index: 12;
}

.mainmenuitems .navbar-collapse {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch !important;
    position: fixed;
    background-color: #2b2b2b;
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    max-height: 100vh !important;
    overflow: auto;
    transition: .3s !important;
}

.mainmenuitems .sidbar-nav .nav-item .nav-link {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0;
}

/** @media (max-width: 991px) { **/
@media (max-width: 1219px) {
    .mainmenuitems .dropdown-menu {
        background: transparent !important;
        min-width: auto !important;
        margin-top: 15px !important;
    }

    .mainmenuitems .sidbar-nav li .dropdown-menu li.nav-item {
        margin: 0px !important;
    }

    .mainmenuitems {
        min-height: 0;
        height: 0;
    }

    .mainmenuitems .container,
    .mainmenuitems .container-fluid {
        flex-wrap: nowrap;
        top: 50px;
        max-width: 100% !important;
    }

    .mainmenuitems .navbar-brand-main {
        display: block !important;
        margin: 0;
        padding: 0;
    }

    .mainmenuitems .navbar-nav-main {
        display: none !important;
    }

    .mainmenuitems .sidbar-nav {
        width: 100%;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    
    .mainmenuitems .sidbar-nav .nav-item {
        width: calc(100% - 100px);
        margin: 0 50px 15px 50px !important;
        padding: 5px 0 !important;
        display: block;
    }
    
    .mainmenuitems .sidbar-nav .nav-item .nav-link {
        justify-content: flex-start;
        text-align: left;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0;
        display: block;
    }

    .mainmenuitems .sidbar-nav .nav-item .nav-link:hover {
        color: #5f6ad4 !important;
    }

    .mainmenuitems .navbar-collapse {
        display: flex !important;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: stretch !important;
        position: fixed;
        background-color: #2b2b2b;
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        max-height: 100vh !important;
        overflow: auto;
        transition: .3s !important;
    }

    .mainmenuitems .navbar-collapse.show {
        padding: 48px 40px 38px;
        position: fixed;
        background-color: #2b2b2b;
        width: 420px;
        height: 100%;
        top: 0;
        right: 0;
        max-height: 100vh !important;
        overflow: auto;
    }

    .mainmenuitems .navbar.collapsed .dropdown-menu .dropdown-item {
        text-align: left;
    }
}

@media (max-width: 575px) {
    .mainmenuitems .navbar-collapse.show {
        width: 100% !important;
    }
}

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

@media (max-width: 1219px) {
    .header1 h1 {
        margin-top:10rem !important; /** add extra space above heading so on smaller screens we don't bump into the header **/
    }
}

.display-1 {
    font-size: 4.25rem;
    line-height: 90px;
    font-weight: 500;
    margin-bottom: 30px;
}

.more-spacing {
    word-spacing: 4px!important;
}

.height-75 {
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    align-items: center;
    padding-top: 10rem;
    padding-bottom: 4rem;
    height: 75vh !important;
    min-height: 75vh !important;
    max-height: 75vh !important;
}

@media (max-width: 768px) {
    .height-75 {
        padding-top: 10rem;
        padding-bottom: 4rem;
    }
}

.height-35 {
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 2rem;
    height: 35vh !important;
    min-height: 35vh !important;
    max-height: 35vh !important;
}

@media (max-width: 768px) {
    .height-35 {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }
}

.mbr-fullscreen {
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    align-items: center;
    min-height: 100vh;
    padding-top: 10rem;
    padding-bottom: 4rem;
}

.main-banner {
    background-image: url("../images/seagrass.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    /** min-height: 600px;  -- remove to make image full height **/
}

.main-banner .container,
.main-banner .container-fluid {
    position: relative;
}

.main-banner .row {
    justify-content: left;
}

.painpointbox {
    position: relative;
    background-color: rgba(250, 248, 244, 1); /* Solid background to prevent content transparency */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    max-width: 95% !important;
    z-index: 1;
}

.painpointbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/beach-6.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15; 
    z-index: -1; /* Keep the image behind the box content */
}

.painpointbox p {
    padding: 30px 30px 0 30px;
}

.whatifsection {
    position: relative;
    overflow: hidden;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.whatifsection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/beach-swing.png') no-repeat center center / cover;
    opacity: 0.15; 
    z-index: -1;
}

.tape {
    position: absolute;
    top: -30px;
    left: -70px;
    width: auto;
    height: auto;
    z-index: 2; /* Ensure the tape stays above both the box content and the background image */
    transform: rotate(-45deg) scale(0.75);
}

.overlaid-boxes-top {
    background-color: #ecf1e9;
    padding: 75px 0;
    width: 75%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.overlaid-boxes-bottom {
    background-image: linear-gradient(rgba(236, 228, 214, 0.7), rgba(236, 228, 214, 0.7)), url("../images/ocean-1.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 200px 5% 100px 5%;
    margin-top: -10%;   /** was -100px **/
    position: relative;
    z-index: 5;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.overlaid-boxes-top h1,
.overlaid-boxes-bottom h2 {
    font-weight: 700;
}

@media (max-width: 767px) {
    .overlaid-boxes-bottom h1 {
        margin: 1rem 0.7rem !important;
    }
}

@media (min-width: 2000px) {
    .overlaid-boxes-bottom h1 {
        padding-top: 3.00rem !important;
    }
}

.overlaid-boxes-top p,
.overlaid-boxes-bottom p {
    margin: 1.2rem 0.5rem;    /** was margin: 30px 100px **/
}

.overlaid-boxes-bottom h1 {
    font-weight: 500;
    margin-top: 2.0rem !important;
}

@media (max-width: 768px) {
    .overlaid-boxes-top {
        width: 90%;
    }

    .overlaid-boxes-top, .overlaid-boxes-bottom {
        padding: 60px 0;
    }

    .overlaid-boxes-top h1,
    .overlaid-boxes-bottom h1 {
        font-size: 1.75rem;
    }

    .overlaid-boxes-top p,
    .overlaid-boxes-bottom p {
        font-size: 1.2rem;
    }
}

.full-width-img-bg-1 {
    background-image: linear-gradient(rgba(236, 228, 214, 0.7), rgba(236, 228, 214, 0.7)), 
                      url("../images/beach-8.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 50px 5% 50px 5%;
    position: relative;
    z-index: 5;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.full-width-img-bg-2 {
    background-image: linear-gradient(rgba(236, 228, 214, 0.7), rgba(236, 228, 214, 0.7)), 
                      url("../images/beach-4.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 50px 5% 50px 5%;
    position: relative;
    z-index: 5;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.step-number {
	font-size: 1.5rem;
	text-align: center;
}

.step-title {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 1rem;
}

.step-description {
	font-size: 1rem;
	text-align: center;
	margin: 0 auto;
	max-width: 300px;
}


/** Section Background Colors **/

.bg-lighttan-lighter {
    background: var(--color-lighttan-lighter);
}

.bg-lighttan-lightest {
    background: var(--color-lighttan-lightest);
}

.bg-lightgreen-lightest {
    background: var(--color-lightgreen-lightest);
}

.bg-medium-green {
    background: #cbd5d7;
}

.bg-steel-green {
    background: #70848d;
}

.bg-pink-lighter {
    background: var(--color-pink-lighter);
}

.bg-medium-tan {
    background: #e4cebf;
}

.polaroid {
	background-color: white;
	padding: 10px 10px 20px 10px;
	border: 1px solid #BFBFBF;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
	margin-bottom: 25px;
	width: fit-content;
	transform: rotate(-5deg); /* Tilt left */
	transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.polaroid > img {
	margin-bottom: 5px;
	border: 1px solid #BFBFBF;
}

@media (max-width: 767px) {
    .polaroid {
        width: 70%;
        margin: 0 auto;
        display: block;
    }
}

@media (min-width:2400px) {
    .pola-push {
        margin-left:10rem !important;
    }
}

.caption {
	font-size: 1rem;
	color: #333;
}

.insurance-logo {
	margin-right: 20px;
}
            
.photo {
	width: 100%;
	max-width: 400px;
	float: left;
}

@media (min-width:992px) and (max-width:1199px) {
	.photo {
		float: none;
		margin-right: 20px;
		margin-bottom: 20px;
	}
}

.specialties {
    font-size: 1.6rem !important;
}

.testimonial {
	text-align: center;
	padding: 20px;
}

.testimonial p {
	font-style: italic;
    font-size: 1.5rem;
}

@media (max-width:575px) {
    .testimonial p {
        padding: 30px !important;
    }
}

@media (min-width:768px) {
    .testimonial p {
        padding: 30px !important;
    }
}

.h-85 {
    height: 85% !important;
}

.w-85 {
    width: 85% !important;
}
                        
.carousel-control-prev,
.carousel-control-next {
	width: 50px;
}

/**
@media (min-width: 768px) and (max-width: 1199px) {
    .carousel-control-prev {
        left: -50px;
    }
    
    .carousel-control-next {
        right: -50px;
    }
}
**/

.carousel-control-prev-icon,
.carousel-control-next-icon {
	background-image: none; /* Removes the default arrows */
}

.carousel-control-prev-icon:after,
.carousel-control-next-icon:after {
	content: ''; 
	display: inline-block;
	width: 20px; /* Arrow width */
	height: 20px; /* Arrow height */
	background: transparent no-repeat center center; /* Arrow background */
	background-size: 100% 100%;
}

.carousel-control-prev-icon:after {
	content: '\2039'; /* Unicode character for the left-pointing arrow */
	color: #3f4c37;
	font-size: 50px;
}

.carousel-control-next-icon:after {
	content: '\203a'; /* Unicode character for the right-pointing arrow */
	color: #3f4c37;
	font-size: 50px; 
}


.pain-points,
.get-started,
.about-us,
.outcomes,
.team,
.testimonials {
    padding: 30px 0;
}

/* === Team Section (moved from about-our-practice-aug-2025.php) ===
   Scoped to .team-section to avoid global bleed; colors aligned to existing design tokens. */
.team-section {                     /* section wrapper */
  background: var(--color-greengray); /* was #71848e */
  padding: 60px 0;
}

.team-section .team-grid {          /* two-column grid on desktop */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  padding: 20px 0;
}

@media (max-width: 991.98px) {
  .team-section .team-grid {
    grid-template-columns: 1fr;
  }
}

.team-section .counselor-card {     /* profile card */
  display: flex;
  align-items: center;
  gap: 30px;
  background: #aab8c0;              /* subtle card tint on colored bg */
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.team-section .counselor-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.team-section .counselor-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.team-section .counselor-info { flex: 1; }

.team-section .counselor-name {
  font-size: 2rem;
  font-weight: 700;
  color: #4e646f;
  margin-bottom: 8px;
  font-family: var(--font-playfair-display);
}

.team-section .counselor-title,
.team-section .counselor-specialties {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 5px;
  line-height: 1.4;
}

.team-section .counselor-title {
  color: #4e646f;
}

/* CTA button, scoped so it doesn't affect global buttons */
.team-section .meet-button {
  background: #ede4d6;
  color: var(--color-darktan);
  border: 2px solid var(--color-darktan);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.team-section .meet-button:hover {
  background: var(--color-darktan);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(155, 143, 116, 0.4);
  text-decoration: none;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .team-section { padding: 40px 0; }
  .team-section .team-grid { grid-template-columns: 1fr; gap: 30px; padding: 10px 0; }
  .team-section .counselor-card { flex-direction: column; text-align: center; gap: 20px; padding: 25px 20px; }
  .team-section .counselor-image { width: 100px; height: 100px; }
  .team-section .counselor-name { font-size: 1.6rem; }
  .team-section .counselor-title,
  .team-section .counselor-specialties { font-size: 1rem; }
  .team-section .meet-button { padding: 10px 20px; font-size: 0.9rem; }
}

@media (max-width: 480px) {
  .team-section .counselor-card { padding: 20px 15px; }
  .team-section .counselor-name { font-size: 1.4rem; }
  .team-section .counselor-title,
  .team-section .counselor-specialties { font-size: 0.95rem; }
}

.line-height-3 {
    line-height: 3rem !important;
}


.telehealthlink {
    margin: 10px 0;
    font-size: 1.4rem !important;
}

.telehealthlink a {
    color: #3f4c37;
    text-decoration: none !important;
}

.telehealthlink a:hover {
    color: #9b8f74;
    text-decoration: underline !important;
}

footer h4 {
    font-family: var(--font-lato) !important;
    font-size: 1.9rem;
}

@media (max-width: 575px) {	/** xs **/
	.footer-heading {
		font-size: 1.2rem !important;
	}
}

@media (min-width: 576px) and (max-width: 767px) {	/** s **/
	.footer-heading {
		font-size: 1.25rem !important;
	}
}

@media (min-width: 768px) and (max-width: 991px) {	/** md **/
	.footer-heading {
		font-size: 1.3rem !important;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {	/** l **/
	.footer-heading {
		font-size: 1.4rem !important;
	}
}

@media (min-width: 1200px) {	/** xl **/
	.footer-heading {
		font-size: 1.5rem !important;
	}
}

.copyright-section {
	border-top: 1px solid rgba(0,0,0,0.1);
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-top: 2rem;
	text-align: center;
	color: #70848e;
	font-size: 0.875rem;
}

/**
@media (min-width: 1200px) and (max-width: 1374px) {
    .footer-heading {
        font-size: 1.2rem !important;
        line-height: 1.8rem !important;
    }
}
**/

footer p,
footer li {
    font-family: var(--font-lato) !important;
    font-size: 1.1rem;
}

.teambox {
    background: #cbd5d7;
    box-shadow: 0 0 20px 5px rgba(0,0,0,0.1);
}

.flex-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
}

.bgbox {
    flex: 0 1 100%; /* Default for smaller screens: take 100% width */
    margin: 0 0 60px 0; /* increased bottom margin for stacked boxes */
    background-color: #f7f4ee;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid #9b8f74;
    border-radius: 0px;
    padding: 10px;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* This will push the button to the bottom */
    /*height: 100%; /* Ensure each box takes full height */
    min-height: 400px; /* Ensure each box takes full height */
}

/*** @media (min-width: 768px) and (max-width: 991px) { ***/
/***     .bgbox { ***/
/***         flex: 0 1 calc(50% - 60px); ***/
/***         margin: 0 30px 60px 30px; ***/
/***     } ***/
/***  ***/
/***     /* Centering the third column */
/***     .flex-box .bgbox:nth-child(3) { ***/
/***         margin-left: auto; ***/
/***         margin-right: auto; ***/
/***         width: calc(50% - 60px); /* Ensures the box keeps the same width as its siblings */
/***     } ***/
/*** } ***/



/* Media query for larger screens (between 992px and 1199px) */
/*** @media (min-width: 992px) and (max-width: 1199px) {
/***     .bgbox {
/***         flex: 0 1 calc(33.33% - 40px); /* Adjusting the width to be a bit larger by reducing the subtracted margin space */
/***         margin: 0 20px 60px 20px; /* Reducing the left and right margins to 20px each, which reduces the whitespace between columns */
/***    }
/*** }

/* Media query for larger screens (beyond 1200px) */
@media (min-width: 1220px) {
    .bgbox {
        flex: 0 1 calc(33.33% - 100px); /* take up 1/3 of the container with wider margins */
        margin: 0 50px 60px 50px; /* maintain the 45px bottom margin for larger screens */
    }
}

.navbar-dropdown {
    left: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.45s ease;
    z-index: 1030;
    background: #282828;
}

.navbar-dropdown .navbar-caption {
    font-weight: 700;
    white-space: normal;
    vertical-align: -4px;
    line-height: 3.125rem !important;
}

.navbar-dropdown .navbar-caption,
.navbar-dropdown .navbar-caption:hover {
    color: inherit;
    text-decoration: none;
}

.navbar-dropdown .mbr-iconfont+.navbar-caption {
    vertical-align: -1px;
}

.navbar-dropdown.navbar-fixed-top {
    position: fixed;
}

.navbar-dropdown .navbar-brand span {
    vertical-align: -4px;
}

.navbar-dropdown.bg-color.transparent {
    background: none;
}

.navbar-dropdown.navbar-short .navbar-brand {
    padding: 0.625rem 0;
}

.navbar-dropdown.navbar-short .navbar-brand span {
    vertical-align: -1px;
}

.navbar-dropdown.navbar-short .navbar-caption {
    line-height: 2.375rem !important;
    vertical-align: -2px;
}

.dropdown-menu .dropdown-toggle[data-toggle="dropdown-submenu"]::after {
    border-bottom: 0.35em solid transparent;
    border-left: 0.35em solid;
    border-right: 0;
    border-top: 0.35em solid transparent;
    margin-left: 0.3rem;
}

.dropdown-menu .dropdown-item:focus {
    outline: 0;
}

.nav-dropdown {
    font-size: 0.75rem;
    font-weight: 500;
    height: auto !important;
}

.nav-dropdown .link {
    margin: .667em 1.667em;
    font-weight: 500;
    padding: 0;
    transition: color .2s ease-in-out;
}

.nav-dropdown .link.dropdown-toggle {
    margin-right: 2.583em;
}

.nav-dropdown .link.dropdown-toggle:hover {
    text-decoration: none;
}
.nav-dropdown .link.dropdown-toggle::after {
    margin-left: .25rem;
    border-top: 0.35em solid;
    border-right: 0.35em solid transparent;
    border-left: 0.35em solid transparent;
    border-bottom: 0;
}

.nav-dropdown .link.dropdown-toggle[aria-expanded="true"] {
    margin: 0;
    padding: 0.667em 3.263em 0.667em 1.667em;
}

.nav-dropdown .link::after,
.nav-dropdown .dropdown-item::after {
    color: inherit;
}

.nav-dropdown .btn {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.nav-dropdown .dropdown-menu {
    border-radius: 0;
    border: 0;
    left: 0;
    margin: 0;
    padding: 0;
    position: relative;
}

.nav-dropdown .dropdown-submenu {
    margin-left: 0.125rem;
    top: 0;
}

.nav-dropdown .dropdown-item {
    font-weight: 500;
    line-height: 2;
    padding: 0.3846em 4.615em 0.3846em 1.5385em;
    position: relative;
    transition: color .2s ease-in-out, background-color .2s ease-in-out;
}

.nav-dropdown .dropdown-item::after {
    margin-top: -0.3077em;
    position: absolute;
    right: 1.1538em;
    top: 50%;
}

.nav-dropdown .dropdown-item:focus,
.nav-dropdown .dropdown-item:hover {
    background: none;
}

.is-builder .nav-dropdown.collapsing {
    transition: none !important;
}

.display-7 {
    font-size: 1.20rem;    
    line-height: 1.3;
}

@media (min-width:1220px) and (max-width:1550px) {
    .display-7 {
        font-weight: 900 !important;
        font-size: 1.0rem;     /** sdb added 11/22/2024 - need to reduce font size so nav items don't wrap to second line **/
    }
}

.display-7>.mbr-iconfont {
    font-size: 1.5625rem;
}

@media (max-width: 768px) {
    .display-7 {
        font-size: 1rem;
        font-size: calc(1.0875rem + (1.25 - 1.0875) * ((100vw - 20rem) / (48 - 20)));
        line-height: calc(1.2 * (1.0875rem + (1.25 - 1.0875) * ((100vw - 20rem) / (48 - 20))));
    }
}


.underline-green-1 {
    background: url("../images/underline-green-1.png") bottom left no-repeat;
    background-size: 100% 10px;
    padding-bottom: 5px;
}

.underline-green-1-short {    /** This version, with the 120% background-size, is used for single words or short phrases where the normal version (above) would cause the image to shrink and get pixelated **/
    background: url("../images/underline-green-1.png") bottom left no-repeat;
    background-size: 120% 10px;
    padding-bottom: 5px;
}


/* Buttons */
.btn {
    padding: 1.3rem 2.2rem;
    border-radius: 0;
}

.cta-button-2 {
    background-color: #b3b39d;
    color: #ecf1e9;
    font-weight: 500;
    font-size: 1.2rem;
}

.cta-button-2:hover {
    background-color: #ecf1e9;
    color: #3f4c37;
    font-weight: 500;
}

.cta-button-2trans {
    background-color: #b3b39d;
    color: #ecf1e9;
    font-weight: 500;
    font-size: 1.2rem;
}

.cta-button-2trans:hover {
    background-color: #ece4d6;
    color: #70848e;
    border: 1px solid #70848e;
    font-weight: 700;
}

.accordion h3 {
    font-family: var(--font-breathing);
    font-size: 150% !important;
    letter-spacing: -0.10rem !important;    
    text-align: center;
}

.accordion-button {
	font-family: var(--font-poppins) !important;
	font-size: 1.6rem !important;
}

.accordion-button span {
    padding-right: 25px !important;
    line-height: 2.0rem !important;
}

.accordion-button:focus {
    /**
    outline: 2px solid #ff0000; 
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25); 
    **/
    outline: none;
    box-shadow: none;
}

.accordion-item {
	/**border-top: 1px solid #ddd;**/ 
    border: none !important;
    margin: 15px 0;
}

.accordion-item:last-child {
	border-bottom: 1px solid #ddd;
}

.accordion-button {
    position: relative;
    width: 100%;
    padding-right: 50px !important; /* Ensure space for the toggle icon */
}

.accordion-button::after {
    position: absolute !important;
    right: 20px !important; /* Adjust this value as needed */
    margin-left: 0 !important;
    float: none !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("../images/triangle-down.png");
    margin-left: 25px;
}

.accordion-button.collapsed::after {
    background-image: url("../images/triangle-down.png");
    margin-left: 25px;
}

.accordion-button,
.accordion-item,
.accordion-button:not(.collapsed) {
	background-color: rgba(255, 255, 255, 0.3);
    color: var(--color-forestgray);
    line-height: 2.0rem !important;
    font-weight: 100 !important;
}

.accordion-body,
.accordion-body p {
    background: #fcfaf7 !important;
    color: var(--color-forestgray);
    font-family: var(--font-poppins) !important;
    font-size: 1.5rem !important;
    line-height: 2.25rem !important;
    font-weight: 400 !important;
}

.text-white {
    color: #fafafa !important;
}

.text-primary-blue {
    color: #6f848d !important;
}

a.text-white:hover,
a.text-white:focus,
a.text-white.active {
    color: #c7c7c7 !important;
}

a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption) {
    position: relative;
    background-image: transparent;
    background-size: 10000px 2px;
    background-repeat: no-repeat;
    background-position: 0px 1.2em;
    background-position: -10000px 1.2em;
}

a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption):hover {
    transition: background-position 2s ease-in-out;
    background-image: linear-gradient(currentColor 50%, currentColor 50%);
    background-position: 0px 1.2em;
}

a,
a:hover {
    color: #5f6ad4;
}

/* Scroll to top button*/

.form-control {
    font-family: 'Anybody', sans-serif;
    font-size: 1.55rem;
    line-height: 1.3;
    font-weight: 400;
}

.form-control>.mbr-iconfont {
    font-size: 1.9375rem;
}

.form-control:hover,
.form-control:focus {
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.07) 0px 1px 3px 0px, rgba(0, 0, 0, 0.03) 0px 0px 0px 1px;
    border-color: #5f6ad4 !important;
}

.form-control:-webkit-input-placeholder {
    font-family: 'Anybody', sans-serif;
    font-size: 1.55rem;
    line-height: 1.3;
    font-weight: 400;
}

.form-control:-webkit-input-placeholder>.mbr-iconfont {
    font-size: 1.9375rem;
}

blockquote {
    border-color: #5f6ad4;
}

/* Forms */

body {
    overflow-x: hidden;
}

a {
    transition: color 0.6s;
}

a:hover {
    background-image: none !important;
}

.container {
    max-width: 1600px;
    /** Scott updated 8/8/2023 - was 1200px **/
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 991px) {
    .container {
        max-width: 660px;
    }
}

@media (max-width: 639px) {
    .container {
        max-width: 500px;
    }
}

.row {
    margin-left: -20px;
    margin-right: -20px;
    justify-content: center;
}

.row>[class*="col"] {
    padding-left: 20px;
    padding-right: 20px;
}

@media only screen and (max-width: 395px) {
    .navbar-caption-wrap img {
        width: 140px;
        height: auto;
    }

    .mainmenuitems .navbar.navbar-short {
        min-height: 60px;
        top: 0px;
        background: #fff;
        padding: 15px 0px !important;
    }

    .mainmenuitems .navbar.navbar-short .navbar-brand {
        min-height: 60px;
        padding: 0;
    }
}

.about-us-banner {
    position: relative;
    overflow: hidden;
}

.about-us-banner::before { 
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../images/beach.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5; 
    z-index: -1;
}

.high-achievers-banner {
    position: relative;
    overflow: hidden;
}

.high-achievers-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../images/dunegrass.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5; 
    z-index: -1;    
    /** min-height: 600px;  -- remove to make image full height **/   
}

.thanks-banner {
    position: relative;
    overflow: hidden;
}

.thanks-banner::before { 
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../images/beach-thanks.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5; 
    z-index: -1;
}

.start-now-banner {
    position: relative;
    overflow: hidden;
}

.start-now-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../images/footsteps-4.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.2; 
    z-index: -1;    
    /** min-height: 600px;  -- remove to make image full height **/   
}

.faqs-banner {
    position: relative;
    overflow: hidden;
}

.faqs-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../images/beach-3.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5; 
    z-index: -1;    
    /** min-height: 600px;  -- remove to make image full height **/   
}

.contact-us-banner {
    position: relative;
    overflow: hidden;
}

.contact-us-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../images/beach-4.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5; 
    z-index: -1;    
    /** min-height: 600px;  -- remove to make image full height **/   
}

.blog-banner {
    position: relative;
    overflow: hidden;
    height: 35vh;
}

.blog-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../images/beach-2.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5; 
    z-index: -1;    
}

/* Base container styles */
.blog-banner .container {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(35vh * 0.55);
    z-index: 1;
}

.blog-banner h1 {
    text-align: center;
    width: 100%;
    margin: 0;
}

footer {
	/**background-color: var(--color-lighttan);**/
    background-color: #ECE4D6;
	color: var(--color-darkgreen);
	padding: 50px 0 20px 0;
}

.footer-logo {
	max-width: 100%;
    background-color: transparent !important;
    /** margin: -25px 0 0 0 !important; **/
    padding: 0 !important;
}

footer h4,
footer h5,
footer h6 {
    color: var(--color-darkgreen);
}

footer ul {
	list-style-type: none;
	padding: 0;
}

footer ul li {
	margin: 5px 0;
}

footer ul li a {
    color: var(--color-darkgreen);
	text-decoration: none;
}

footer ul li a:hover {
    color: var(--color-darkgreen);
	text-decoration: underline;
}



@media (max-width: 1219px) {
  /* Make mobile submenu stack and tighten left indent */
  .mainmenuitems .sidbar-nav .dropdown-menu {
    position: static;
    padding-left: 8px !important;   /* was 15px */
  }

  /* Show a right-facing chevron before each 2nd-level link */
  .mainmenuitems .sidbar-nav .dropdown-menu .nav-item > .nav-link {
    position: relative;
    padding-left: 0.75rem !important;  /* tighter left inset now that chevron is removed */
    color: #3f4c37 !important;         /* force text color on mobile links */
  }
  .mainmenuitems .sidbar-nav .dropdown-menu .nav-item > .nav-link::before {
    content: none !important;
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95em;
    line-height: 1;
    color: currentColor;
    opacity: 0.85;
  }
}

/* Mobile menu background and link color */
.mainmenuitems .navbar-collapse {
  background-color: #cbd5d7;   /* updated background */
}
.mainmenuitems .navbar-collapse.show {
  background-color: #cbd5d7;   /* updated background */
}

@media (max-width: 1219px) {
  .mainmenuitems .sidbar-nav .nav-link {
    color: #3f4c37 !important; /* updated text color */
  }
}

/* Normalize wide-card layout at non-desktop widths */
.counselor-card-wide { 
    display: block; /* outer behaves like normal block container */
}
.counselor-card-wide .counselor-card-inner {
    display: flex;            /* keep image left, text right */
    align-items: center;
    gap: 30px;                /* match standard card spacing */
    width: 100%;
}

/* Match mobile stack behavior with other cards */
@media (max-width: 768px) {
    .counselor-card-wide .counselor-card-inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (min-width: 992px) {
    /* Keep every other card in 2 columns */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Samm’s card spans both columns */
    .counselor-card-wide {
        grid-column: span 2;
        display: flex;               /* create a centering context */
        justify-content: center;     /* center the inner block within the wide card */
    }

    /* The “middle column”: content stays left-aligned inside a centered max-width, nudged right */
    .counselor-card-wide .counselor-card-inner {
        display: flex;               /* preserve side-by-side image + text */
        align-items: center;
        gap: 30px;                   /* match your normal card spacing */
        max-width: 960px;            /* stable middle-column width */
        width: 100%;
        margin-left: 15%;            /* increase nudge to the right */
    }
}

/* Top header responsive banner */
.top-header .top-banner-line {
    display: flex;
    flex-wrap: wrap;              /* lets items wrap when too narrow */
    justify-content: center;      /* centers the combo as a group */
    align-items: center;
    gap: 24px;                    /* ~20–25px spacing target */
    text-align: center;           /* ensures centered text when items go full width */
    min-height: 32px;
}

.top-header .top-banner-line .top-banner-item {
    font-size: clamp(12px, 1.1vw + 10px, 16px); /* scales down as viewport shrinks */
    line-height: 1.3;
    white-space: nowrap;          /* keep each phrase to one line while it fits */
}

.top-header .top-banner-line a.top-banner-item {
    text-decoration: underline;   
    color: #f7f4ee;
}

.top-header .top-banner-line a.top-banner-item:hover {
    color: #ece4d6;
}

/* When very narrow, split into two centered lines; only SIGN UP link gets extra gap below */
@media (max-width: 680px) {
    .top-header .top-banner-line .top-banner-item {
        flex: 1 1 100%;
        white-space: normal;
        margin-bottom: 0;              /* default: no extra gap */
    }
    /* Give the SIGN UP link a bit of breathing room when it wraps to its own line */
    .top-header .top-banner-line a.top-banner-item {
        margin-bottom: 8px;            /* 5–8px space below */
    }
}

/* When banner wraps between 681px–786px, also add space under SIGN UP */
@media (min-width: 681px) and (max-width: 786px) {
    .top-header .top-banner-line .top-banner-item {
        flex: 1 1 100%;
        white-space: normal;
        margin-bottom: 0;              /* default: no extra gap */
    }
    .top-header .top-banner-line a.top-banner-item {
        margin-bottom: 8px;            /* 5–8px space below the SIGN UP line */
        display: inline-block;         /* ensure margin is respected */
    }
}

/* Keep navbar from overlapping under the banner by syncing offsets */
.mainmenuitems .navbar { top: var(--banner-h); }
.mainmenuitems .navbar.navbar-short { top: 0; } /* keep short state flush */

/* Narrow screens: banner becomes two lines, a bit taller, and navbar nudged lower for breathing room */
@media (max-width: 786px) {
    :root { --banner-h: 64px; }        /* slightly taller banner when wrapped */
    .top-header { padding-block: 2px; }
    .top-header .top-banner-line { gap: 12px; }
    .top-header .top-banner-line .top-banner-item { line-height: 1.2; }

    /* Add a bit more space between banner and fixed navbar brand/hamburger */
    .mainmenuitems .navbar { top: calc(var(--banner-h) + 8px); }

    /* Mobile nav container often uses a separate top offset; align it and give a hair more space below the banner */
    .mainmenuitems .container,
    .mainmenuitems .container-fluid {
        top: calc(var(--banner-h) + 12px);
    }
}

/* Ultra narrow: even tighter */
@media (max-width: 480px) {
    :root { --banner-h: 52px; }
    .top-header .top-banner-line { gap: 8px; }
}