@font-face {
font-family: 'Gotham';
src:
local('Gotham Book'),
local('Gotham-Book'),
url('/fonts/Gotham-Book.woff2') format('woff2'),
url('/fonts/Gotham-Book.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Gotham';
src:
local('Gotham Medium'),
local('Gotham-Medium'),
url('/fonts/Gotham-Medium.woff2') format('woff2'),
url('/fonts/Gotham-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}

.pt-sans-narrow-regular {
font-family: "PT Sans Narrow", sans-serif;
font-weight: 400;
font-style: normal;
}

.pt-sans-narrow-bold {
font-family: "PT Sans Narrow", sans-serif;
font-weight: 700;
font-style: normal;
}

/* ====  COLORS  ======= */

:root {
--colorPeach: #fcc875;
--colorMedPeach: #;
--colorLightPeach: #;
--colorBlue: #7bbced;
--colorMedBlue: #;
--colorLightBlue: #;
}

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

html {
scroll-behavior: smooth;
scroll-padding-top: 50px;
}

body {
margin: 0;
padding: 0;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 300;
line-height: 1.4;
height: 100%;
background: black;
text-wrap: pretty;
}

.content {
background-color: white;
height: 100%;
/* Remove Margin Collapse VVV */
padding: .01px 0;
}

.cleanBreak {
display: inline-block;
}

img, picture, svg, video {
margin: 0;
display: block;
max-width: 100%;
height: auto;
}

a.button {
font-size: 1rem;
/* line-height: 1.5; */
padding: 10px 14px;
border-radius: 4px;
text-decoration: none;
font-family: 'Gotham Medium', Arial, Helvetica, sans-serif;
font-weight: normal;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
text-transform: uppercase;
width: auto;
cursor: pointer;
display: inline-block;
}

a.blackButton {
background: black!important;
color: var(--colorPeach);
}

a.blackButton:hover {
background: black!important;
color: white;
}

a.whiteButton {
background: white!important;
color: black;
}

a.whiteButton:hover {
background: white!important;
color: black;
}

a.peachButton {
background: var(--colorPeach)!important;
color: black;
}

a.peachButton:hover {
background: var(--colorPeach)!important;
color: white;
}

hr {
margin: 0 auto;
width: 90%;
max-width: 1000px
}

header {
padding: 16px 0 0;
background-color: white;
/* border: 1px solid red; */
}

.headerHolder {
margin: 0 auto;
max-width: 1200px;
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
}

.headerLeft {
width: 30%;
max-width: 320px;

}

.headerLeft img {
display: block;
margin: 0;
width: 100%;
max-width: 100%;
height: auto;
}

.headerLeft a {
display: block;
width: auto;
margin: 0;
padding: 0;
cursor: pointer;
}

.headerLeft a:hover {
opacity: .85;
}

.headerRight {
display: flex;
justify-content: flex-end;
align-items: center;
width: 70%;
}

.navHolder {
display: flex;
align-items: center;
width: 100%;
height: 50px;
}

nav.mainNav {
margin: 0 auto;
text-align: center;
padding: 0;
width: 100%;
}

nav.mainNav ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
margin: 0 auto;
/* padding: 0; */
padding: 0 10% 0 0;
}

nav.mainNav li {
display: inline-block;
}

nav.mainNav li:not(:last-of-type) {
/* margin: 0 20px 0 0; */
margin: 0 5% 0 0;
}

nav.mainNav li a {
display: block;
padding: 6px 0;
margin: 0;
color: black;
text-decoration: none;
text-align: center;
/* font-family: 'Abel', sans-serif; */
font-family: 'Gotham', sans-serif;
font-weight: 400;
font-size: 1rem;
text-transform: uppercase;
cursor: pointer;
}

nav.mainNav li:hover a {
color: gray;
cursor: pointer;
}

nav.mainNav li a.active {
color: #3882c4;
}

/*Hover state for dropdown links*/
nav.mainNav li:hover ul a:hover {
color: #3882c4;
}

/*Make dropdown links vertical*/
nav.mainNav li ul li {
display: block;
float: none;
position: relative;
top: 0;
}

/*Prevent text wrapping*/
nav.mainNav li ul li a {
width: auto;
min-width: 100px;
padding: 5px 20px;
}

/*Display the dropdown on hover*/
nav.mainNav ul li a:hover + .hidden,
.hidden:hover {
display: inline-block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
text-decoration: none;
color: white;
text-align: center;
padding: 8px 0 4px;
display: none;
font-size: 1.5rem;
cursor: pointer;
margin: 0 auto;
}

.show-menu:hover {
opacity: .66;
}

.border-menu {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}

/*Hide checkbox*/
input[type="checkbox"] {
display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type="checkbox"]:checked ~ #menu {
display: block;
}

input[type="checkbox"]:checked + label {
display: block;
}

.heroHolder {
margin: 0 auto;
/* text-align: center; */
position: relative;
width: 100%;
max-width: 100%;
/* max-height: 800px; */
overflow: hidden;
background: #fcc875;
}

.heroHolder img {
display: block;
margin: 0 auto;
width: 100%;
object-fit: cover;
object-position: bottom;
/* max-height: 800px; */
max-width: 1800px;
}

.heroContentHolder {
position: absolute;
top: 0%;
margin: 0 auto;
width: 100%;
height: 100%;
}

.heroGradientHolder {
position: absolute;
top: 0%;
width: 100%;
background-image: url(/art/white-gradient.png);
background-repeat: repeat-x;
background-size: 75px 75px;
background-position: center;
height: 75px;
}

.heroGradientHolder img {
height: 100px;
margin: 0;
}

.heroContent {
margin: 0 auto;
width: 90%;
max-width: 1200px;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}

.heroContentLeft {
align-items: flex-start!important;
text-align: left!important;
}

.heroContentRight {
align-items: flex-end!important;
text-align: right!important;
}

.heroContent h1 {
font-family: 'Gotham', sans-serif;
font-weight: 400;
font-size: clamp(2rem, 5vw, 4rem)!important;
text-shadow: 1px 1px 5px #000000af, 2px 2px 10px #000000af;
text-transform: uppercase;
line-height: 1.2;
margin: 0;
color: white;
}

.heroContent h2 {
font-family: 'Gotham', sans-serif;
font-weight: 400;
font-size: clamp(2.2rem, 6vw, 5rem)!important;
text-shadow: 1px 1px 5px #000000af, 2px 2px 10px #000000af;
text-transform: uppercase;
line-height: 1.2;
margin: 0;
color: var(--colorPeach);
}

.heroContent p {
margin: 20px 0 0 0;
/* font-family: 'Gotham', sans-serif; */
font-family: "PT Sans Narrow", sans-serif;
font-weight: 400;
color: black;
line-height: 1.2;
font-size: 1.6rem;
font-size: clamp(1.6rem, 4.4vw, 3.8rem);
font-style: italic;
/* width: 12ch; */
}

.heroButtonHolder {
margin: 20px 0 0;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}

.colorBar {
background-color: #98cbea;
/* background-color: #7bbced; */
background-color: #6399bf;
}

.colorBoxHolder {
display: flex;
margin: 0 auto;
width: 100%;
max-width: 1000px;
height: 100%;
}

.colorBox {
flex: 1;
padding: 30px 20px;
text-align: center;
}

.colorBox1 {
background-color: #5786a8;
}

.colorBox2 {
background-color: #6399bf;
}

.colorBox3 {
background-color: #7bbced;
background-color: #7bbced;
background-color: #61a9d3;
/* background-color: #5786a8; */
}

.icon {
margin: 0 auto;
max-width: 50px;
}

.colorBox p {
color: white;
font-family: 'Gotham', sans-serif;
font-weight: 300;
text-wrap: balance;
margin: 0 auto;
font-size: .9rem;
max-width: 24ch;
}

.colorBox p.colorBoxHeading {
margin: 20px auto 10px;
color: #fcc875;
font-weight: 400;
font-size: 1.1rem;
}

.ballSectionContainer {
margin: 80px auto;
}

.ballSectionHolder {
margin: 0 auto;
padding: 0px 0;
text-align: center;
}

.focusSectionHolder {
margin: 0 auto;
padding: 60px 0;
text-align: center;
}

.focusSection {
margin: 0 auto;
text-align: center;
width: 90%;
max-width: 900px;
display: flex;
justify-content: space-between;
}

.focusSectionLeft {
justify-content: flex-start;
}

.focusPic img {
width: 100%;
max-width: 500px;
border-radius: 30px;
}

.focusSectionContent {
width: 50%;
/* max-width: 400px; */
display: flex;
flex-direction: column;
justify-content: center;
align-content: flex-start;
text-align: left;
}

.focusSectionContentLeft {
margin: 0 0 0 60px;
}

.focusSectionContentRight {
margin: 0 60px 0 0;
}

.focusSectionContent p {
font-size: 1rem;
line-height: 1.6;
margin: 10px 0 20px;
font-weight: 300;
}

.focusSectionContent p.focusSectionContentHeading {
font-size: 1.4rem;
font-weight: 400;
margin: 0;
color: black;
}

.focusButtonHolder {
margin: 0;
display: flex;
width: auto;
}

.huggingHeroHolder {
margin: 0 auto;
width: 90%;
max-width: 1000px;
background: #7BBCED;
background: linear-gradient(90deg,rgba(123, 188, 237, 1) 0%, rgba(252, 200, 117, 1) 100%);
border-radius: 30px;
display: flex;
box-sizing: border-box;
}

.huggingContentWrapper {
display: flex;
margin: 30px 0 30px 40px;
width: 48%;
}

.huggingContent {
align-self: center;
margin: 0;
box-sizing: border-box;
width: 100%;
text-wrap: pretty;
}

.huggingContent h2 {
font-size: 1.3rem;
/* font-size: clamp(1.1rem, 2.2vw, 1.4rem); */
font-weight: 400;
line-height: 1.4
}

.huggingContent p {
margin: 0 0 25px;
font-size: 1.4rem;
font-size: clamp(1.2rem, 2.2vw, 1.3rem);
line-height: 1.4;
}

.huggingPic {
align-self: flex-end;
width: 50%;
}

.huggingPic img {
border-bottom-right-radius: 30px;
}

.majorBarriersHolder {
text-align: center;
margin: 80px auto;
padding-bottom: 50px;
background: #7BBCED;
background: linear-gradient(90deg,rgba(123, 188, 237, 1) 0%, rgba(252, 200, 117, 1) 100%);
}

.majorBarriersHolder h1 {
display: inline-block;
margin: 40px auto 30px;
font-size: 1.4rem;
font-weight: 400;
text-wrap: balance;
width: 90%;
}

.majorBarriersBoxes {
display: flex;
justify-content: space-between;
gap: 30px;
width: 90%;
max-width: 1000px;
margin: 0 auto;
text-wrap: balance;
}

.majorBarriersBox {
display: flex;
flex-direction: column;
justify-content: center;
background: white;
height: 100%;
border-radius: 30px;
border: 1px solid #7bbced;
padding: 30px;
line-height: 1.5
}

.majorBarriersBox p.heading {
font-weight: 400;
font-size: 1.4rem;
margin: 0;
}

.featureSectionHolder {
margin: 0 auto 50px;
width: 90%;
max-width: 1200px;
display: flex;
gap: 40px;
justify-content: space-between;
}

.featureBox {
flex: 1;
background: #a9c8e4;
}

.featureBox img {
width: 100%;
max-width: 100%;
}

.featureBoxContent {
width: 88%;
margin: 0 auto 30px;
text-align: left;
line-height: 1.6;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 300;
}

.featureBoxContent h2 {
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 400;
margin: 20px 0 0;
padding: 0;
font-size: 1.3rem;
}

.featureBoxContent p {
margin: 6px 0 20px;
padding: 0;
}

.trainingHeroHolder {
text-align: center;
margin: 0 auto;
}

.trainingHeroHolder img {
text-align: center;
margin: 0 auto;
}

.findTrainingHolder {
margin: 80px 0 40px;
position: relative;
width: 100%;
max-width: 100%;
max-height: 600px;
overflow: hidden;
background-image: url(/art/get-training-hero-100-1200.jpg);
background-repeat: repeat-x;
background-size: 50px 600px;
background-position: center;
}

.findTraingingContent {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 100%;
}

.findTrainingText {
display: flex;
align-items: flex-start;
padding-bottom: 20%;
width: 40%;
container-type: inline-size;
}

.findTrainingHeading {
margin: 0 auto;
color: #3d9ac3;
font-size: 3.4rem;
font-size: clamp(1.6rem, 11cqi, 3.4rem)!important;
font-weight: 900;
}

.orangeText {
font-style: italic;
font-size: 4.8rem;
font-size: clamp(1.6rem, 15cqi, 4.8rem)!important;
color: #ef8a11;
line-height: 1.4;
}

.blueText {
font-size: 4.4rem;
font-size: clamp(1.6rem, 14cqi, 4rem)!important;
color: #3d9ac3;
}

.findTrainingBalls {
width: 60%;
}

.hcaHeroHolder {
margin: 0 auto;
position: relative;
width: 100%;
max-width: 100%;
max-height: 600px;
overflow: hidden;
}

.hcaContentHolder {
width: 44%;
text-align: left;
}

.hcaHeroContent {
margin: 0 auto;
width: 90%;
max-width: 1200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end!important;
text-align: right!important;
height: 100%;
}

.hcaHeroHolder img {
display: block;
margin: 0 auto;
width: 100%;
object-fit: cover;
}

.hcaContentHolder p {
font-size: 1rem;
font-size: clamp(.8rem, 1.6vw, 1rem);
line-height: 1.5;
color: black;
text-shadow: none;
/* max-width: 40ch; */
text-wrap: balance;
margin: 10px 0 0;
}

p.hcaContentHolderHeader {
margin: 20px 0 0;
font-size: 1.4rem;
font-size: clamp(.8rem, 1.8vw, 1.3rem);
}

img.hcaLogo {
margin: 0;
max-width: 300px;
}

.formHolder {
padding: 40px 0 40px;
margin: 80px auto 80px;
background: var(--colorPeach);
width: 90%;
max-width: 1000px;
border-radius: 30px;
display: flex;
}

.formHolderLeft {
width: 50%;
padding-inline: 40px;
display: flex;
flex-direction: column;
justify-content: center;
container-type: inline-size;
}

.formHolderLeft p {
padding: 0;
margin: 0;
font-size: 1.8rem;
font-size: clamp(1.3rem, 8cqi, 1.8rem)!important;
line-height: 1.4;
font-weight: 300;
}

p.formHolderLeftHeading {
font-size: 2rem;
/* font-size: clamp(3rem, 2vw, 2rem); */
font-size: clamp(1.6rem, 12cqi, 3rem)!important;
line-height: 1.2;
font-family: "PT Sans Narrow", sans-serif;
padding: 0;
margin: 0 0 20px;
font-weight: 700;
}

.formHolderRight {
width: 50%;
display: flex;
align-items: center;
}

.contactForm {
width: 90%;
}

.hideContactFormAddress {
display:none;
}

.contactForm p {
margin: 5px auto 14px;
padding: 0;
font-size: 1.1rem;
text-align: left;
}

.contactForm p label {
font-weight: 400;
font-size: 1rem!important;
}

.contactForm input {
font-weight: 300;
padding: 12px;
color: black;
-webkit-text-fill-color: black;
opacity: 1; /* required on iOS */
z-index: 2;
background-color: #aaa;
background-color: var(--colorClay);
background-color: white;
width: 96%;
width: 100%;
border: none;
border-radius: 6px;
}

.contactForm input.button {
display: inline-block;
font-size: 1.2rem;
margin: 16px 0 0;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
font-family: 'Gotham', Arial, Helvetica, sans-serif;
font-weight: 400;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
text-transform: uppercase;
background-color: black;
color: var(--colorPeach);
color: white;
-webkit-text-fill-color: white;
opacity: 1; /* required on iOS */
width: auto;
border: 0;
outline: 0;
cursor: pointer;
}

.contactForm input.button:hover {
color: var(--colorPeach);
-webkit-text-fill-color: var(--colorPeach);
}

#contactFormMessage, .contactFormMessage {
   font-weight: 300;
padding: 5px;
color: black;
-webkit-text-fill-color: black;
opacity: 1; /* required on iOS */
z-index:2;
background-color: #aaa;
background-color: var(--colorClay);
background-color: white;
width: 96%;
width: 100%;
/* border: 2px solid black; */
height:120px;
overflow: auto;
border: none;
border-radius: 6px;
}

#contactForm .textSelect {
padding: 6px;
height: 38px;
z-index: 2;
background-color: #aaa;
width: 99%;
border: 2px solid #999;
margin: 0;
}

#contactForm .textSelect select:-moz-focusring {
color: transparent;
}

::-webkit-input-placeholder { /* WebKit browsers */
color: white;
color: #555;
color: var(--colorGray)!important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
color: #555;
color: var(--colorGray)!important;
opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:    white;
color: black;
color: #555;
color: var(--colorGray)!important;
opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:    white;
color: #555;
color: var(--colorGray)!important;
}

.contactForm select {
font-weight: 300;
padding: 7px;
color: black!important;
-webkit-text-fill-color: black;
opacity: 1; /* required on iOS */
z-index: 2;
background-color: var(--colorLightClay);
width: 100%;
border: 2px solid black;
}

.contactForm input[type='checkbox'] {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
margin: 15px 0 0;
}

.contactForm input[type="checkbox"]:checked + label {
display: inline-block;
background: none;
}

.submissionText {
margin: 40px auto;
text-align: center;
}

.submissionText p {
margin: 0;
padding: 0;
text-align: center;
font-size: 1.8rem;
}

footer {
background: black;
padding: 30px 0 20px;
}

.footerContactHolder {
width: 90%;
max-width: 900px;
margin: 0 auto;
padding: 0 0 20px;
display: flex;
justify-content: space-between;
color: white;
}

footer hr {
border-top: 1px solid var(--colorPeach);
width: 96%;
max-width: 1000px;
margin: 0 auto;
}

.nape p {
font-size: 1.1rem;
line-height: 1.6;
text-align: left;
margin: 10px 0;
color: white;
}
footer a {
   color: white;
}

.nape a {
color: white;
text-decoration: none;
}

.nape a:hover {
color: var(--colorPeach);
}

.footerMargin {
display: inline-block;
margin: 6px 0 0;
}

.footerPeach {
color: var(--colorPeach);
}

.flexFooter {
display: flex;
flex-direction: column;
gap: 20px;
}

.socialBarFooter {
display: flex;
justify-content: flex-end;
margin: 8px 0 6px;
padding: 0 0 6px 0;
}

.socialBarHiRez {
height: 55px;
width: 55px;
background-image: url(/art/sprites-large.png);
background-repeat: no-repeat;
background-size: 350px 250px;
display: block;
margin: 0;
padding: 0;
}

.linkedInIconHiRez {
background-position: -164px 0px;
}

.linkedInIconHiRez:hover {
background-position: -164px -55px
}

.googleIconHiRez {
background-position: 0px 0px;
}

.googleIconHiRez:hover {
background-position: 0px -55px
}

.facebookIconHiRez {
background-position: -55px 0px;
}

.facebookIconHiRez:hover {
background-position: -55px -55px
}

.yelpIconHiRez {
background-position: -110px 0px;
}

.yelpIconHiRez:hover {
background-position: -110px -55px
}

.copyright {
color: white;
text-align: center;
padding: 0 20px;
}

/* ============= THANK YOU PAGE ============= */

.thankYouHolder {
margin: 0 auto;
padding: 100px 0;
width: 90%;
max-width: 600px;
}

.thankYouHolder h1 {
margin: 0;
padding: 0;
text-align: center;
font-size: 1.4rem;
font-weight: 300;
color: black;
}

@media screen and (min-width: 0) and (max-width: 600px) {

.headerHolder {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
margin: 0 auto;
width: 90%;
max-width: 1100px;
}

.navHolder {
position: absolute;
display: block;
margin: 0 auto;
padding: 0;
height: auto;
z-index: 100;
}

nav.mainNav {
margin: 0 auto 0;
padding: 4px 0;
text-align: center;
display: block;
width: 100%;
}

/*Make dropdown links appear inline*/
nav.mainNav ul {
position: static;
display: none;
margin: 0px auto;
padding: 12px 0;
/* background-color: black; */
text-align: center;
}

/*Create vertical spacing*/
nav.mainNav li {
margin: 0 auto 10px;
}
/*Make all menu links full width*/
nav.mainNav ul li,
nav.mainNav li a {
width: 100%;
}

nav.mainNav li:hover ul {
margin: 0;
}

/*Style for menu links*/
nav.mainNav li a {
display: block;
width: 80%;
max-width: 280px;
min-width: 220px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size: 1.5rem;
padding: 8px;
margin: 8px auto;
text-align: center;
background: black;
color: white;
text-decoration: none;
}

nav.mainNav li a:hover {
color: #bbb;
}

.show-menu {
display: flex;
justify-content: center;
align-items: center;
margin: 6px auto 0;
text-align: center;
width: 100%;
}

span.menuText {
padding-left: 14px;
color: black;
}

.headerLeft {
width: 100%;
}

.headerRight {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
}

.colorBoxHolder {
flex-direction: column;
}

.focusSection {
margin: 0 auto 0;
padding: 0;
width: 90%;
flex-direction: column-reverse;
}

.focusSectionLeft {
flex-direction: column;
}

.focusPic {
width: 100%;
}

.focusSectionContent {
width: 100%;
margin: 0 auto;
}

.focusSectionContentLeft {
margin: 20px auto 0;
padding: 0;
}

.focusSectionContentRight {
margin: 20px auto 0;
}

.huggingHeroHolder {
flex-direction: column;
}

.huggingContentWrapper {
width: 100%;
margin: 0;
}

.huggingContent {
margin: 0 auto;
width: 86%;
padding: 30px 0 0px;
}

.huggingPic {
align-self: center;
width: 90%;
}

.majorBarriersBoxes {
flex-direction: column;
}

.majorBarriersBox {
width: 100%;
}

.featureSectionHolder {
margin: 0 auto 50px;
width: 90%;
max-width: 1200px;
display: flex;
gap: 40px;
justify-content: space-between;
flex-direction: column;
}

.findTrainingHolder {
height: 100%;
max-height: 100%;
background-size: 50px 100%;
}

.findTraingingContent {
flex-direction: column;
text-align: center;
align-items: center;
}
.findTrainingBalls {
width: 100%;
}
.findTrainingText {
width: 100%;
text-align: center;
padding-bottom: 40px;
}

.hcaContentHolder {
width: 100%;
max-width: 400px;
text-align: left;
margin: 0 auto;
}

.formHolder {
flex-direction: column;
padding: 40px 0 30px;
}

.formHolderLeft {
width: 100%;
margin: 0 auto 20px;
padding-inline: 30px;
text-align: center;
}

.formHolderRight {
width: 100%;
margin: 0 auto;
}

.contactForm {
margin: 0 auto;
width: 86%;
}

.footerContactHolder {
width: 88%;
margin: 0 auto;
padding: 16px 0;
flex-direction: column;
}

.flexFooter {
margin: 20px 0 0;
}

.connectBoxHolder {
text-align: left;
}

.socialBarFooter {
justify-content: flex-start;
margin: 8px 0 6px;
padding: 0;
}

.footerLinkHolder {
width: 88%;
margin: 0 auto;
padding: 20px 0;
flex-direction: column;
}
}

@media screen and (min-width: 601px) and (max-width: 800px) {

.headerHolder {
width: 94%;
}

.headerLeft {
width: 28%;
}

.breaker {
display: block;
}

nav.mainNav ul {
margin: 0 auto;
padding: 0;
}

nav.mainNav ul > * {
align-self: center;
}

nav.mainNav li a {
font-size: 2.1vw;
font-size: clamp(.75rem, 2.1vw, .8rem)!important;
line-height: 1.3;
}

.colorBoxHolder {
flex-direction: column;
}

.focusSection {
margin: 0 auto 0;
padding: 0;
width: 86%;
max-width: 520px;
flex-direction: column-reverse;
}

.focusSectionLeft {
flex-direction: column;
}

.focusPic {
width: 100%;
}

.focusSectionContent {
width: 100%;
max-width: 100%;
margin: 0 auto;
}

.focusSectionContentLeft {
margin: 20px auto 0;
padding: 0;
}

.focusSectionContentRight {
margin: 20px auto 0;
}

.majorBarriersBoxes {
flex-direction: column;
max-width: 500px;
}

.huggingHeroHolder {
flex-direction: column;
}

.huggingContentWrapper {
margin: 0 auto 0;
width: 80%;
}

.huggingContent {  
margin: 0 auto;
padding: 30px 0 0px;
}

.huggingPic {
align-self: center;
width: 90%;
}

.majorBarriersBox {
width: 100%;
}

.featureSectionHolder {
margin: 0 auto 50px;
width: 90%;
max-width: 500px;
display: flex;
gap: 40px;
justify-content: space-between;
flex-direction: column;
}

.featureSectionHolder .hide {
display: none;
}

.findTrainingHolder {
height: 100%;
max-height: 100%;
background-size: 50px 100%;
}

.findTraingingContent {
flex-direction: column;
text-align: center;
align-items: center;
}

.findTrainingBalls {
width: 100%;
}

.findTrainingText {
width: 100%;
padding-bottom: 40px;
}

.hcaHeroHolder .heroContent {
width: 95%;
}

.hcaContentHolder {
width: 45%;
}

.hcaHeroContent {
width: 95%;
}

p.hcaContentHolderHeader {
margin: 10px 0 0;
}

img.hcaLogo {
max-width: 220px;
}

.formHolder {
flex-direction: column;
/* padding: 30px 0 20px; */
}

.formHolderLeft {
width: 100%;
margin: 0 auto 20px;
padding-inline: 30px;
text-align: center;

}

.formHolderRight {
width: 100%;
margin: 0 auto;
}

.contactForm {
margin: 0 auto;
width: 86%;
}
}

@media screen and (min-width: 801px) and (max-width: 1000px) {

.headerHolder {
width: 94%;
}

.headerLeft {
width: 28%;
}

nav.mainNav li a {
font-size: 1rem;
font-size: clamp(.8rem, 2vw, .9rem)!important;
}

.featureSectionHolder .hide {
display: none;
}

.hcaHeroHolder {
max-height: 1000px;
}
}