/*
 Theme Name:   Cytohub Child Theme
 Theme URI:    https://example.com/cytohub/
 Description:  A child theme of Cytohub (Underscores-based)
 Author:       44 Pixels
 Author URI:   https://example.com
 Template:     cytohub
 Version:      1.0.0
 Text Domain:  cytohub-child
*/

/* Import parent styles */
@import url("../cytohub/style.css");


/*--------------------------------------------------------------
# Base Variables
--------------------------------------------------------------*/

:root {

    --min-screen-width: 375px;
    --max-screen-width: 1440px;

    --font-family-heading: "Figtree", sans-serif;
    --font-family-text: "Figtree", sans-serif;

    /* WIDTHS */
    --container-small: 994px;
    --container: 1200px;
    --container-wide: 1440px;

    /* FONT WEIGHT */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* COLORS */
    --brand-primary: #72a65e;
    --brand-secondary: #170e3e;

    --text-header: #212121;
    --text-body: #212121;
    --text-link: #007BFF;

    --border-primary: #B6B9C4;
    --border-secondary: #dddddd;

    /* NEUTRALS */
    --black: #000000;
    --white: #ffffff;

    --gray: #4F4F4F;
    --medium-gray: #8b869f;
    --gray-blue: #EDEDF0;

    --purple: #8287C1;
    --dark-gray: #777;
    --light-gray: #B6B9C4;

    --beige: #F4F2E7;

    --light-blue: #3772B8;
    --navy-blue: #192B6D;

    --light-smoke: #F8F8F8;
    --light-purple: #8286C1;

    --neutral-darker: #222;
    --neutral-dark: #444;

    --neutral-light: #AAA;
    --dark-purple : #706D80;

    --orange: #D1622B;
    --wheat: #FBE2CE;
    --dark-green: #2C3F45;
    --light-cream: #FFF8F0;

    /* FONT SIZES */
    --text-xs: 12px;
    --text-s: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 28px;
    --text-3xl: 32px;
    --text-36: 36px;
    --text-40: 40px;
    --text-48: 48px;
    --text-56: 56px;
    --text-72: 72px;

    /* LINE HEIGHT */
    --line-height-20: 1.4;
    --line-height-24: 1.5;
    --line-height-28: 1.4;
    --line-height-32: 1.3;
    --line-height-36: 1.2;
    --line-height-40: 1.2;
    --line-height-44: 1.2;
    --line-height-48: 1.2;
    --line-height-52: 1.3;
    --line-height-56: 1.1;
    --line-height-64: 1.1;
    --line-height-80: 1.1;

    /* SPACING */
    --spacing-xl: 32px;
    --spacing-lg: 24px;
    --spacing-md: 16px;
    --spacing-s: 12px;
    --spacing-xs: 8px;
}

/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0 2px;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev.slick-disabled,
.slick-next.slick-disabled {
    opacity: .7;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    opacity: 0;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: 0;
}

.slick-prev:before,
.slick-next:before {
    font-family: 'slick';
    font-size: 0px;
    line-height: 1;
    opacity: 0;
    color: white;
}

.slick-prev {
    left: -25px;
}

[dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
}

.slick-prev:before {
    content: '←';
}

[dir='rtl'] .slick-prev:before {
    content: '→';
}

.slick-next {
    right: -25px;
}

[dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
}

.slick-next:before {
    content: '→';
}

[dir='rtl'] .slick-next:before {
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    display: block;
    width: 100%;
    padding: 0 !important;
    margin: 11px 0 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    max-width: 10px;
    min-width: 10px;
    height: 10px;
    padding: 0;
    background: rgba(48, 54, 54, 0.12);
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    border-radius: 100%;
}

.slick-dots li.slick-active button {
    background: #eee; /* replaced $color-cyan */
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    text-align: center;
    color: black;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
}

.slick-prev img {
    transform: rotate(180deg) !important;
    width: 45px;
    height: 45px;
}

.slick-prev,
.slick-next {
    z-index: 99900;
}

.slick-prev {
    left: 29px;
}

.slick-next {
    right: 25px;
}

.slick-arrow {
    width: 45px;
    height: 45px;
}

@media (max-width: 768px) {
    .slick-arrow {
        width: 27px;
        height: 27px;
    }

    .slick-arrow svg {
        width: 27px;
        height: 27px;
    }
}

/*--------------------------------------------------------------
# Box Sizing
--------------------------------------------------------------*/

*,
*::before,
*::after {
    box-sizing: border-box;
}


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

body,
button,
input,
select,
textarea {

    -webkit-font-smoothing: antialiased;

    color: var(--text-body);
    font-family: var(--font-family-text);
    font-size: var(--text-lg);
    line-height: var(--line-height-28);
    font-weight: var(--font-weight-regular);

    margin: 0;
    background: var(--white);
}


h1,
h2,
h3,
h4,
h5,
h6 {

    clear: both;
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
}

h1 {
    font-size: var(--text-40);
    line-height: var(--line-height-52);
}

h2 {
    font-size: var(--text-40);
    line-height: var(--line-height-28);
    margin: 0 0 var(--spacing-lg);
}

h3 {
    font-size: var(--text-xl);
    line-height: var(--line-height-32);
    margin: 0 0 var(--spacing-s);
}

h4 {
    font-size: var(--text-lg);
    line-height: var(--line-height-32);
    margin: 0 0 var(--spacing-xs);
}

h5 {
    font-size: var(--text-md);
    line-height: var(--line-height-28);
}

h6 {
    font-size: var(--text-s);
    line-height: var(--line-height-24);
}

p {
    margin-bottom: var(--spacing-lg);
}

p:last-of-type {
    margin-bottom: 0;
}


.page{
    margin: 0 !important;
}
/*--------------------------------------------------------------
# Containers
--------------------------------------------------------------*/

.container-small {
    max-width: var(--container-small);
    width: 90%;
    margin: 0 auto;
}

.container {
    max-width: var(--container);
    width: 90%;
    margin: 0 auto;
}

.container-wide {
    max-width: var(--container-wide);
    width: 90%;
    margin: 0 auto;
}


/*--------------------------------------------------------------
# Lists
--------------------------------------------------------------*/

ul,
ol {

    margin-bottom: var(--spacing-md);
    margin-left: var(--spacing-md);

    font-size: var(--text-md);
    line-height: var(--line-height-24);
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li {

    margin-top: var(--spacing-s);
    padding-left: var(--spacing-xs);
}


/*--------------------------------------------------------------
# Images
--------------------------------------------------------------*/

img {
    height: auto;
    max-width: 100%;
}


/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/

a {
    color: var(--orange);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--orange);
    /*text-decoration: underline;*/
}


/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/

input,
textarea,
select {
    border: 1px solid var(--neutral-light) !important;
    border-radius: 4px !important;
    padding: 6px;
    font-size: var(--text-md);
}

textarea {
    width: 100%;
}


/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

.gform_button,
button.button,
a.button {

    padding: 12px 24px;
    font-size: var(--text-md);

    border-radius: 100px;

    background: var(--brand-primary);
    color: var(--white);

    border: 1px solid transparent;

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

    transition: all .3s ease;
}

.gform_button:hover,
button.button:hover,
a.button:hover {

    background: var(--brand-primary);
    opacity: .9;
}


.button.light-btn {

    background: transparent;
    border: 1px solid var(--brand-secondary);
    color: var(--brand-secondary);
}

.button.light-btn:hover {

    background: var(--brand-secondary);
    color: var(--white);
}


/*--------------------------------------------------------------
# JCF Select
--------------------------------------------------------------*/

.jcf-select {

    display: flex;
    align-items: center;

    border: 1px solid var(--border-primary);
    background: transparent;

    height: 36px;
    width: 100%;
}

.jcf-select-text {

    padding: 4px 16px;

    font-size: var(--text-s);
    color: var(--dark-gray);

    white-space: nowrap;
    overflow: hidden;
}

.jcf-select-opener {

    position: absolute;
    right: var(--spacing-xs);
}


/*--------------------------------------------------------------
# Checkbox
--------------------------------------------------------------*/

.jcf-checkbox {

    width: 20px;
    height: 20px;

    border: 1px solid var(--gray);
    border-radius: 2px;

    position: relative;
}

.jcf-checkbox span {

    width: 6px;
    height: 12px;

    border-bottom: 2px solid var(--gray);
    border-right: 2px solid var(--gray);

    transform: rotate(45deg);

    display: none;
}

.jcf-checkbox.jcf-checked span {
    display: block;
}

/*--------------------------------------------------------------
# Header and footer
--------------------------------------------------------------*/
.site-header{
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
    position: fixed;
    width: 100%;
    background: var(--white);
    z-index: 999;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 33px 0;
}

.site-header .container .site-branding {
    max-width: 234px;
}

.site-header .container v#site-navigation {
    display: flex;
    justify-content: end;
}

.site-header .container .menu-primary-menu-container ul#primary-menu {
    align-items: center;
    justify-content: end;
    gap: 32px;
}

.site-header .container .menu-primary-menu-container ul#primary-menu .menu-item{
    margin-top: 0;
    padding: 0;
}

.site-header .container .menu-primary-menu-container ul#primary-menu .menu-item a{
    color: var(--dark-purple);
    font-size: var(--text-md);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: normal;
    transition: .3s ease;
}

.site-header .container .menu-primary-menu-container ul#primary-menu .menu-item a:hover,
.site-header .container .menu-primary-menu-container ul#primary-menu .menu-item a.active{
    color: var(--orange);
    text-decoration: none;
}

.site-header .container .menu-primary-menu-container ul#primary-menu .menu-item.menu-btn a{
    border-radius: 140px;
    background: var(--white);
    height: 40px;
    padding: 10px 20px;
    color: var(--orange);
    border: 1px solid var(--orange);
    transition: .3s ease;
}

.site-header .container .menu-primary-menu-container ul#primary-menu .menu-item.menu-btn a:hover,
.site-header .container .menu-primary-menu-container ul#primary-menu .menu-item.menu-btn a.active{
    background: var(--orange);
    color: var(--white);
}

.site-footer{
    background: var(--light-cream);
    padding-bottom: 70px;
}

.body-cardia-therapeutics .site-footer{
    background: var(--white);
}

.site-footer .site-info {
    display: flex;
    margin: auto;
    font-size: var(--text-s);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    justify-content: center;
    gap: 24px;
}

.site-footer .site-info .bottom-footer-menu{
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 24px;
}

.site-footer .site-info .bottom-footer-menu .menu-item{
    display: flex;
    padding: 0;
    margin: 0;

}


.site-footer .site-info .bottom-footer-menu .menu-item a{
    font-size: var(--text-s);
    text-decoration: underline;
}

.site-footer .site-info .bottom-footer-menu .menu-item a:hover{
    text-decoration: none;
}

/*--------------------------------------------------------------
# Layout Blocks
--------------------------------------------------------------*/

.hero-wrapper,
.blurbs-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
}


section.light,
section.light {
    color: var(--white);
}

section.dark,
section.dark {
    color: var(--black);
}


.blurb-item img,
.hero-column img {

    max-width: 100%;
    height: auto;
}


/*--------------------------------------------------------------
# Hero Buttons
--------------------------------------------------------------*/

.hero-button,
.blurbs-button {

    display: inline-block;
    padding: 12px 40px;

    border-radius: 50px;
    margin-top: 32px;
    text-decoration: none;

    font-size: var(--text-lg);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-28);
}


.hero-button.style-1 {

    background: var(--black);
    color: var(--white);
}

.hero-button.style-2 {

    background: var(--white);
    color: var(--black);
}

.eyebrow{
    font-size: var(--text-xl);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-36);
    text-transform: uppercase;
}

/*--------------------------------------------------------------
# Blurbs
--------------------------------------------------------------*/

.blurb-item, .blurbs-content-column{
    text-align: center;
}

.blurb-item img{
    margin-bottom: 20px;
}

.blurb-item .blurb-content{
    font-size: var(--text-md);
}

.cardiac-drug-development-is-broken .blurbs-items-container{
    max-width: 788px;
    margin: 0 auto;
}

.inline-items .inline-title{
    margin-top: 0;
}

/*--------------------------------------------------------------
# Our Team
--------------------------------------------------------------*/
.our-team-header{
    text-align: center;
}

.our-team-description-wrapper {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.our-team-nav{
    margin-bottom: 72px;
    display: flex;
    justify-content: center;
}

.our-team-nav .our-team-nav-wrapper {
    text-align: center;
    display: inline-flex;
    justify-content: center;
    border-radius: 140px;
    border: 1px solid var(--orange);
    overflow: hidden;
}

.our-team-nav .our-team-nav-wrapper span.our-team-nav-item {
    min-width: 233px;
    text-align: center;
    padding: 12px 24px;
    font-size: var(--text-md);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-24);
    cursor: pointer;
    transition: all .3s ease-in-out;
    color: var(--orange);
}

.our-team-nav .our-team-nav-wrapper span.our-team-nav-item.active,
.our-team-nav .our-team-nav-wrapper span.our-team-nav-item:hover{
    background: var(--orange);
    color: var(--white);
}

.our-team-grid {
    justify-content: center;
    max-width: 1144px;
    margin: auto;
}

.our-team-grid .our-team-card{
    text-align: center;
}

.our-team-grid .our-team-card .our-team-image{
    margin-bottom: 24px;
}

.our-team-grid .our-team-card .our-team-image img{
    width: 100%;
}

.our-team-grid .our-team-card .our-team-position{
    font-size: var(--text-md);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-24);
}

.our-team-grid .our-team-card .our-team-description{
    font-size: var(--text-md);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-24);
    margin-top: var(--spacing-lg);
}

.our-team-grid .our-team-card .our-team-linkedin{
    padding-top: 12px;
    display: inline-block;
}

.our-team-grid .our-team-card .our-team-linkedin path{
    transition: .3s ease;
}

.our-team-grid .our-team-card .our-team-linkedin:hover path{
    fill: var(--orange);
}

/*--------------------------------------------------------------
# Resources
--------------------------------------------------------------*/
.resources-section{
    overflow: hidden;
}
.resources-grid .resources-card{
    padding: 40px;
    border: 1px solid var(--neutral-light);
    background: var(--white);
}

.resources-grid .resources-card.slick-slide{
    margin-right: 36px;
}
.resources-grid .resources-card .resources-name{
    color: var(--black);
    font-size: var( --text-lg);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-28);

}

.resources-grid .resources-card .resources-link{
    color: var(--orange);
    font-size: var(--text-md);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-24);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.resources-grid .resources-card .resources-link path{
    stroke: var(--orange);
}

.resources-grid .slick-list{
    margin-right: -50%;
    padding-right: calc(50% - 36px);
}

.resources-social{
    margin-top: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.resources-social a.resources-social-link {
    padding: 6px 8px;
    display: flex;
    align-items: center;
}

.resources-social a.resources-social-link path{
    fill: var(--white);
    transition: .3s ease;
}

.resources-social a.resources-social-link:hover path{
    fill: var(--orange);
}


.resources-nav-wrapper {
    display: flex;
    justify-content: space-between;
}
.resources-nav {
    display: flex;
    max-width: 112px;
    align-items: end;
    gap: 12px;
}

.resources-nav-prev, .resources-nav-next {
    cursor: pointer;
    border-radius: 50px;
    border: 1px solid var(--orange);
    background: var(--white);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resources-nav .slick-arrow,
.resources-nav .slick-arrow path{
    transition: .3s ease;
}

.resources-nav .slick-arrow:hover{
    background: var(--orange);
}

.resources-nav .slick-arrow:hover path{
    stroke: var(--white);
}

.resources-nav-prev .prev-btn, .resources-nav-next .next-btn{
    height: 24px;
}

.form-section .gform_wrapper {
    /* spacing */
    --gf-form-gap-y: 24px;

    /* make sub-label typography match main label */
    --gf-ctrl-label-font-size-tertiary: var(--gf-ctrl-label-font-size-secondary);
    --gf-ctrl-label-line-height-tertiary: var(--gf-ctrl-label-line-height-secondary);
    --gf-ctrl-label-font-weight-tertiary: var(--gf-ctrl-label-font-weight-secondary);

    /* color */
    --gf-ctrl-label-color-tertiary: var(--gf-ctrl-label-color-secondary);
}

.form-section .form-content-column{
    text-align: center;
}

.form-section .gform_wrapper .gform_required_legend{
    display: none;
}

.form-section .gform_wrapper .gform-footer{
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.form-section .gform_wrapper .gform_body .gfield .gfield_label .gfield_required{
    display: none;
}


.form-section .gform_wrapper .gform-footer .gform_button {
    border-radius: 140px !important;
    border: 1px solid var(--orange) !important;
    background-color: var(--white) !important;
    color: var(--orange) !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.5 !important;
    padding: 12px 40px !important;
    outline: none !important;
    transition: .3s ease !important;
}

.form-section .gform_wrapper .gform-footer .gform_button:hover {
    border: 1px solid var(--orange) !important;
    background-color: var(--orange) !important;
    color: var(--white) !important;
}

.form-section .gform_wrapper .ginput_complex label {
    font-size: var(--gf-ctrl-label-font-size-secondary);
    font-weight: var(--gf-ctrl-label-font-weight-secondary);
    line-height: var(--gf-ctrl-label-line-height-secondary);
    color: var(--gf-ctrl-label-color-secondary);
}

.contact-us-section .form-column {
    max-width: 560px;
    margin: auto;
}

.form-section .form-content-column .form-description{
    max-width: 768px;
    margin: auto;
}

.two-column-content-section .content-items {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

.body-cardia-therapeutics .site-header .container .site-branding {
    max-width: 409px;
}

.cardia-therapeutics-page{
    padding: 72px 0 124px;
}

.cardia-therapeutics-page h1{
    margin-top: 0;
}

.cardia-therapeutics-page .cardia-content-wrapper{
    margin-top: 40px;
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}

.cardia-therapeutics-page .cardia-content-wrapper .thumbnail {
    width: calc(50% - 120px);
}

.cardia-therapeutics-page .cardia-content-wrapper .content-items {
    width: calc(50% + 60px);
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

#why-cytohub .blurbs-content-container{
    margin-bottom: 80px!important;
}

/*--------------------------------------------------------------
# responsiveness
--------------------------------------------------------------*/
.primary-menu-container{
    width: 100%;
}

.mobile-toggle {
    display: flex;
    justify-content: end;
}

@media (min-width: 980px) {
    .mobile-toggle {
        display: none;
    }

}

.mobile-toggle .mobile-toggle-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16' fill='none'%3E%3Cline x1='19.25' y1='0.75' x2='0.75' y2='0.749998' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='19.25' y1='7.75' x2='0.75' y2='7.75' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='19.25' y1='14.75' x2='0.75' y2='14.75' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: cover;
    width: 25px;
    height: 25px;
}

.mobile-toggle .mobile-toggle-btn.active{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16' fill='none'%3E%3Cpath d='M0.219467 0.926681C0.512366 0.63387 0.987261 0.633815 1.28013 0.926681L6.93698 6.58353L13.3009 0.219573C13.5939 -0.0731111 14.0688 -0.0732507 14.3616 0.219573C14.6543 0.51241 14.6542 0.987377 14.3616 1.28023L7.99764 7.64419L14.3616 14.0082C14.6544 14.301 14.6544 14.7759 14.3616 15.0688C14.0687 15.3617 13.5938 15.3616 13.3009 15.0688L6.93698 8.70485L1.28013 14.3617C0.987289 14.6545 0.512375 14.6544 0.219468 14.3617C-0.0734249 14.0688 -0.073425 13.5939 0.219468 13.301L5.87632 7.64419L0.219467 1.98734C-0.0734263 1.69445 -0.0734261 1.21957 0.219467 0.926681Z' fill='%23000'/%3E%3C/svg%3E");
}

.primary-menu-container .primary-menu-mobile {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.site-header .container .primary-menu-container .primary-menu-mobile .menu-item {
    margin: 0;
}

.site-header .container .primary-menu-container .primary-menu-mobile .menu-item a{
    color: var(--dark-purple);
    font-size: var(--text-md);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: normal;
    transition: .3s ease;
}

.site-header .container .primary-menu-container .primary-menu-mobile .menu-item a:hover,
.site-header .container .primary-menu-container .primary-menu-mobile .menu-item a.active{
    color: var(--orange);
}


.site-header .container .primary-menu-container .primary-menu-mobile .menu-item.menu-btn a{
    border-radius: 140px;
    background: var(--white);
    height: 40px;
    padding: 10px 20px;
    color: var(--orange);
    border: 1px solid var(--orange);
    transition: .3s ease;
}

.site-header .container .primary-menu-container .primary-menu-mobile .menu-item.menu-btn a:hover,
.site-header .container .primary-menu-container .primary-menu-mobile .menu-item.menu-btn a.active{
    background: var(--orange);
    color: var(--white);
}

.mobile-navigation-wrapper {
    position: absolute;
    width: 100%;
    background: var(--white);
    top: calc(100% - 1px);
    box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.10);
}


@media (max-width: 1200px) {
    .site-header .container .menu-primary-menu-container ul#primary-menu{
        gap: 15px;
    }
}

@media (max-width: 1080px) {
    .site-header .container .menu-primary-menu-container ul#primary-menu .menu-item a {
        font-size: var(--text-s);
    }
}

@media (max-width: 980px) {
    .hero-content-container,
    .blurbs-items-container,
    .inline-items .inline-item,
    .two-column-content-wrapper,
    .our-team-grid,
    .cardia-content-wrapper{
        flex-direction: column !important;

        > *{
            width: 100% !important;
        }
    }

    .site-header .container .menu-wrapper {
        display: none;
    }
    .site-footer .site-info{
        flex-direction: column;
        align-items: center;

    }

    /*br{
        display: none;
    }*/

    .our-team-nav .our-team-nav-wrapper span.our-team-nav-item{
        min-width: auto;
    }
}

@media (max-width: 767px) {
    .our-team-nav .our-team-nav-wrapper span.our-team-nav-item{
        padding: 10px 15px;
    }
}

@media (max-width: 425px) {
    .our-team-nav .our-team-nav-wrapper span.our-team-nav-item {
        font-size: var(--text-s);
    }
}


/*--------------------------------------------------------------
# Ignore br on mobile. Request made 03/16/26
--------------------------------------------------------------*/
@media (max-width: 980px) {
    .mobile-ignore-br br {
        display: none;
    }
}



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

/* Video wrapper */
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* Actual video */
.hero-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure content is above video */
.hero-banner .container {
    position: relative;
    z-index: 2;
}

.hero-bg-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.hero-bg-video-wrapper video {
    display: block;
}


@media (max-width: 980px) {
    .homepage-herobanner video {
        display: none;
    }

}