:root { --charcoal: #3B3B3B; --blue: #0070B8; /*--offWhite: #F8F7F4;*/ --offWhite: #ece8dd; --header-height: 148px; --anchor-offset: 74px; --smooth: 0.75s cubic-bezier(0.5, 0, 0, 1); } @media (max-width: 1100px) { :root { --header-height: 127px; --anchor-offset: 64px; } } @media (max-width: 840px) { :root { --header-height: 96px; --anchor-offset: 48px; } } @media (max-width: 410px) { :root { --header-height: 70px; --anchor-offset: 35px; } } * {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box;} /* GLOBAL */ html {scroll-padding-top: var(--anchor-offset);} body {line-height:1; color: var(--charcoal); margin-top: var(--header-height); font-family: "franklin-gothic-urw", sans-serif; } [id] {scroll-margin-top: var(--anchor-offset);} h1 {font-size: 70px; color: #ffffff; font-weight: normal; margin-bottom: 0.5em; line-height: 1.1em; font-weight: normal; font-family: "anth", sans-serif; } h2 {font-weight: normal; font-size: 36px; font-weight: normal; margin-bottom: 0.5em; line-height: 125%; font-family: "anth", sans-serif; } h3 {font-weight: normal; font-family: "anth", sans-serif; } h4 {font-weight: normal; font-family: "anth", sans-serif; } h5 {font-weight: normal; font-family: "anth", sans-serif; } h6 {font-weight: normal; font-family: "anth", sans-serif; } p {margin-bottom: 1em; font-size: 17px; line-height: 160%;} p.intro s{margin-bottom: 1em; font-size: 22px; line-height: 150%;} section ul, section ol {font-size: 16px; line-height: 160%; margin: 1.5em 1em 1.5em 2em} p a, ul li a, ol li a {color: var(--blue)} p a:hover, ul li a:hover, ol li a:hover {color: var(--charcoal);} img {max-width:100%; height:auto;} a {color:inherit;} a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;} .inner { max-width:1400px; width:100%; margin:0 auto; padding: 0 25px} .cols {display: flex;} .desktop {display: block;} .mobile {display: none;} @media (max-width: 600px) { .desktop {display: none;} .mobile {display: block;} } /* GRID */ .grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px;} /* HEADER */ header {padding: 30px 0; background-color: #ffffff; position: fixed; z-index: 999; width: 100%;/* box-shadow: 0 10px 10px rgba(0, 0, 0, .2);*/ top: 0; left: 0;} header .inner {display: flex; justify-content: space-between; align-items: center; gap: 30px;} header .logo {width:310px; height: auto; max-width: 100%; flex-shrink: 1; font-size: 0;} /* NAV */ nav {padding-bottom: 8px;} nav ul {display: flex; gap: 25px; font-size: 17px;} nav ul li {position: relative; padding: 10px 0} nav ul li a {color: var(--charcoal); text-decoration: none;} nav ul li:hover a {color: var(--blue);} nav ul li.active a {font-weight: 700; color: var(--blue)} nav ul li ul {position: absolute; left: -25px; top: 35px; transition: var(--smooth); transform: translateY(10px); gap:0; font-size: 16px; opacity: 0; visibility: hidden; flex-direction: column; z-index: 20; background-color: #ffffff; width: max-content; padding: 20px 0; border-radius: 10px; box-shadow: 10px 10px 20px rgba(0,0,0,0.2)} nav ul li ul li {padding: 0} nav ul li ul li a {display: block; padding:15px 25px;} nav ul li ul li:hover a {color: #ffffff !important; background-color: var(--blue);} nav ul li:hover ul li a {color: var(--charcoal)} nav ul li:hover ul {visibility: visible; opacity: 1; transform: translateY(0);} /* MOBILE NAV */ .hamburger {width: 30px; height: 22px; flex-shrink: 0; z-index: 50; margin: 0; cursor: pointer; position: relative; display: none} .hamburger span {width: 100%; display: block; height: 4px; background-color: var(--blue); position: absolute; top: 0; left: 0; transition: 0.2s ease-out; } .hamburger span:nth-child(1) {} .hamburger span:nth-child(2) {top: 9px;} .hamburger span:nth-child(3) {top:auto; bottom: 0;} .hamburger.open {} .hamburger.open span:nth-child(1) {top: 7px; transform: rotate(45deg) scaleX(-1);} .hamburger.open span:nth-child(2) {opacity: 0; transform: scale(0)} .hamburger.open span:nth-child(3) {top: 7px; transform: rotate(-45deg) scaleX(-1);} /* HEADER RIGHT */ .header-right {display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-end; gap: 15px;} .quick-contact-lockup {display: flex; gap: 18px;} .quick-contact-lockup a {display: inline-flex; align-items: center; gap: 9px; color: var(--blue); text-decoration: none} .circle-icon {background-color: var(--blue); width: 28px; height: 28px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center;} .header-right-top a:hover {color: var(--charcoal);} .header-right-top a:hover .circle-icon {background-color: var(--charcoal);} /* HOME HERO */ .home-hero {position: relative; height: calc(100vh - 140px); overflow: hidden;} .home-hero video {position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: center;} .home-hero:after {inset: 0; position: absolute; left: 0; top: 0; background-color: #87cbf5; mix-blend-mode: multiply; content: '';} .home-hero .inner {display: flex; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 5; height: 100%;} .home-hero h1 {font-size: 70px; color: #ffffff; font-weight: normal; margin-bottom: 0.5em;} .home-hero p {font-size: 24px; color: #ffffff; font-weight: normal; line-height: 140%;} .home-hero-text {max-width: 800px; width: 100%;} .home-hero-text .btn {margin-top: 1em} /* HOME INTRO TEXT */ .home-intro-text {padding: 80px 0; background-color: var(--offWhite);} .home-intro-text .buttons {width: max-content} .home-intro-text .btn {width: 100%;} .home-intro-text .cols {display: flex; gap: 50px;} .home-intro-text .col {width: calc(50% - 25px);} .home-intro-text .col:last-child {display: flex; align-items: center; justify-content: center; position: relative;} .home-intro-text .col:last-child:after {position:absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5; background-image: url(/_uploads/_assets/logo-motif.svg); background-size: contain; background-repeat: no-repeat; background-position: center; content: '';} .home-intro-text .col:first-child h3 {margin: 1em 0 0.5em} .home-intro-text .col.col-right {display: block;} .founder-lockup {text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10;} .founder-lockup h3 {color: var(--blue); font-size: 22px; font-weight: normal; line-height: 140%; margin-bottom: 1em} .founder-lockup p {max-width: 500px; width: 100%; margin-bottom: 0;} .person-image-outer {width: 100%; max-width: 305px;} .person-image {width: 100%; height: auto; padding-top: 100%; border-radius: 305px; overflow: hidden; position: relative; margin-bottom: 1.5em} .person-image img {position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: center} /* TREATMENT LISTING */ .treatment-listing {padding: 80px 0} .treatment-listing h2 {display: block; text-align: center; margin-bottom: 1em} .treatment-card {position: relative; text-decoration: none; overflow: hidden; display: flex; overflow: hidden; border-radius: 5px; cursor: pointer; aspect-ratio: 1 / 1;} .treatment-card img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;} .tc-text {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: flex-end; text-align: center; justify-content: center; z-index: 11;} .tc-text p {margin: 0; color: #ffffff; font-size: 18px; padding: 10px 20px; line-height: 130%; transition: var(--smooth); font-weight: 700;} .treatment-card::before {position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; content: ''; mix-blend-mode: multiply; transition: var(--smooth); opacity: 0.9; z-index: 10; background: linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,0)); /*background: linear-gradient(0deg, rgba(177,167,63,1), rgba(0,0,0,0));*/} /* .treatment-card.blue::before {background: linear-gradient(0deg, rgba(0,112,184,1), rgba(0,112,184,0));} .treatment-card.teal::before {background: linear-gradient(0deg, rgba(27,128,113,1), rgba(27,128,113,0));} .treatment-card.green::before {background: linear-gradient(0deg, rgba(119,147,59,1), rgba(119,147,59,0));} .treatment-card.purple::before {background: linear-gradient(0deg, rgba(85,45,108,1), rgba(85,45,108,0));} .treatment-card.pink::before {background: linear-gradient(0deg, rgba(135,21,87,1), rgba(135,21,87,0));} .treatment-card.orange::before {background: linear-gradient(0deg, rgba(152,99,0,1), rgba(152,99,0,0));} */ .treatment-card:hover:before {height: 150%; opacity: 1;} .treatment-card:hover .tc-text p {transform: translateY(-20px);} /* TEAM CAROUSEL */ .team-carousel-section {padding: 80px 0; background-color: var(--offWhite);} .team-carousel-section h2 {display: block; text-align: center;} .team-carousel-section .inner {position: relative;} .team-carousel-section .button {margin-top: 60px;} .team-carousel {width: 100%; max-width: 1200px; padding: 0 50px; margin: auto;} .team-carousel .col {padding: 20px} .team-carousel h3 {font-size: 30px; margin-bottom: 10px; line-height: 120%; color: #9e0f62;} .team-card {text-align: center;} .team-card .person-image-outer {width: 100%; max-width: 267px; margin-left: auto; margin-right: auto;} .team-card .person-image {margin:0 auto 20px;} .team-alt .team-carousel-section {background-color: #ffffff} .slick-arrow {width: 50px; height: 50px; border-radius: 50px; top:110px; background-color: transparent; font-size: 0; border:1px solid #552D6A; background-image: url(/_uploads/_assets/slick-right.svg); background-size: 20px auto; background-repeat: no-repeat; background-position: center; position: absolute;} .slick-next {right: 0;} .slick-prev {left: 0; transform: rotate(180deg);} .team-carousel-section.image-carousel-section {background-color: #ffffff;} .image-carousel-section .image-carousel {padding: 40px 70px; width: 1020px; max-width: 100%; margin: auto;} .image-carousel-section .image-carousel .slick-track {display: flex;} .image-carousel-section .image-carousel .slide {position: relative; overflow: hidden; border-radius: 20px; margin:0 15px; height:590px; min-height: unset; opacity: 0.5;} .image-carousel-section .image-carousel .slide img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;} .image-carousel-section .image-carousel .slide.slick-current {opacity: 1; transform: scale(1)} .image-carousel-section .image-carousel .slick-arrow {top: 50%; margin-top: -20px;} .image-carousel-section .image-carousel-container {position: relative; padding-bottom: 40px;} .image-carousel-section .image-carousel-container ul {display: flex; position: absolute; bottom: 0px; width: 100%; justify-content: center; list-style: none; left: 0; font-size: 0; gap: 10px;} .image-carousel-section .image-carousel-container ul li {width: 10px; height: 10px; border-radius: 10px; background-color: #efefef} .image-carousel-section .image-carousel-container ul li.slick-active {background-color: var(--blue)} /* THERAPISTS CARD */ .therapists-listing {position: relative; z-index: 5; padding-bottom: 60px;} .therapists-listing .cols.grid {grid-template-columns: repeat(3, 1fr); gap: 40px;} .therapist-profile-card {border-radius:20px; transition: var(--smooth); display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap:15px; height: 100%; background-color: #ffffff; box-shadow: 5px 5px 20px rgba(0,0,0,0.1); padding: 30px; text-align: center; text-decoration: none;} .therapist-profile-card .person-image-outer {margin: 0 auto 30px; width: 100%; max-width: 305px;} .therapist-profile-card .person-image {height: auto; width: 100%; padding-top: 100%;} .therapist-profile-card .person-image img {position: absolute; left: 0; top: 0; } .therapist-profile-card h3 {font-size: 24px; color: var(--blue); margin-bottom: 0.5em;} .therapist-profile-card:hover {transform: translateY(10px);} /* CONTENT PAGE HEADER */ .content-page-header {overflow: hidden; position: relative; background-color: var(--blue);} .content-page-header img {position: absolute; width: 100%; height: 100%; inset:0; object-fit: cover; object-position: center; filter: grayscale(100%);} .content-page-header:before {position: absolute; width: 100%; height: 100%; inset:0; background-color: #87cbf5; mix-blend-mode: multiply; z-index: 1; content: '';} .content-page-header .inner {display: flex; position: relative; z-index: 5; justify-content: center; align-items: center; min-height: 460px; padding-top: 50px; padding-bottom: 50px; text-align: center; color: #ffffff;} .content-page-header h1 {margin-bottom: 0;} .content-page-header h2 {font-size: 30px; margin-top: 0.5em;} .content-page-header p {font-size: 22px; margin: 1.2em 0 0;} .content-page-header p a {color: #ffffff;} .content-page-header .btn {margin-top: 1.5em;} .content-page-header::after {width: 414px; height: 369px; background-image: url(/_uploads/_assets/logo-mask.svg); background-size: cover; position: absolute; right: 0; bottom: 0; content: '';} .cph-text {width: 100%; max-width: 740px;} .shallow-head .content-page-header p {font-size: 18px;} .shallow-head .content-page-header .inner {min-height: 320px;} /* INTRO TEXT WITH CARD */ .home-intro-text.intro-text-with-card {position: relative; overflow: hidden;} .home-intro-text.intro-text-with-card .col:last-child:after, .home-intro-text.intro-text-image-quote .col:last-child:after {display: none;} .home-intro-text.intro-text-with-card::before {background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); content: ''; width: 50%; position: absolute; left: 50%; top: 0; bottom: 0;} .home-intro-text.intro-text-with-card .col-inner {width: 430px; max-width: 100%;margin: auto} .home-intro-text.intro-text-with-card .col-inner.col-inner-not-central {margin: 0; width: 500px; max-width: 100%} .home-intro-text.intro-text-with-card .cols {gap:100px} .home-intro-text.intro-text-with-card .col {width: calc(50% - 50px);} .home-intro-text.intro-text-with-card .col:last-child {width: calc(50% - 50px);} .lbp {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;} .lbp a {color: var(--blue);} .lbp p, .lbp a {margin: 0; font-size: 18px;} .lbp a:hover {color: var(--charcoal);} /* BLOG CARD */ .blog-card {overflow: hidden; border-radius: 5px; display: flex; flex-direction: column; align-items: flex-start; background-color: #ffffff; text-decoration: none; box-shadow: 5px 5px 20px rgba(0,0,0,0.1);} .bc-listing-image {overflow: hidden; position: relative; width: 100%; height: 230px; display: flex; align-items: flex-end;} .bc-listing-image img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--smooth);} .bc-listing-image p {position: relative; z-index: 10; margin-left: 30px; color: #ffffff;} .blog-card:hover img {transform: scale(1.05);} .bc-text {padding: 30px;} .bc-text h3 {font-size: 20px; margin-bottom: 0.5em; line-height: 120%;} .bc-text p {font-size: 14px;} .bc-text .btn.small {font-size: 14px; width: auto;} .bc-listing-image:before {background: linear-gradient(0deg, rgba(0,112,184,1), rgba(0,112,184,0)); position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; content:''; z-index: 9; mix-blend-mode: multiply;} /* BLOG LISTING */ .blog-listing {padding: 80px 0;} .blog-listing .grid {grid-template-columns: repeat(4, 1fr); column-gap: 30px} .blog-listing .blog-card {height: 100%;} .blog-listing .bc-text {padding:25px 20px;} .blog-listing .bc-text p {font-size: 15px;} /* BLOG POST */ .blog-post {padding: 80px 0 0} .blog-post p {font-size: 18px;} .blog-post-header h1 {color: var(--charcoal); margin-bottom: 0.75em; font-size: 60px;} .bph-text {width: 1200px; max-width: 100%; text-align: center; margin: 0 auto} .bph-image {position: relative; width: 960px; height: 390px; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: 20px; box-shadow: 10px 10px 20px rgba(0,0,0,0.1);} .bph-image img {position: absolute; object-fit: cover; object-position: center; left: 0; top: 0; width: 100%; height: 100%;} .blog-post-content {padding: 60px 0;} .blog-post-content .inner {width: 768px; max-width: 100%;} .more-blog-listing {background-color: #ffffff;} .more-blog-listing h2 {display: block; text-align: center; margin-bottom: 1.5em;} /* INTRO TEXT IMAGE AND QUOTE */ .intro-text-image-quote .cols {align-items: flex-start;} .intro-text-image-quote .col-inner {width: 500px; max-width: 100%;} .image-treatment-top {border-radius: 20px;} h3, .therapist-detail h3, .intro-text-image-quote h3 {font-size: 24px; margin-bottom: 12px; color: var(--blue)} .intro-text-image-quote .blockquote-container {display: flex; flex-direction: column; margin-top: 40px; gap: 20px; width: 100%; background-color: rgba(255,255,255,0.75); padding:25px; border-radius: 20px; width: 100%; max-width: 500px} .testimonial-carousel-section .team-card:before, .intro-text-image-quote .blockquote-container:before {width: 60px; height: 56px; background-image: url(/_uploads/_assets/quotemark.svg); background-size: cover; content: '';} .intro-text-image-quote blockquote p {font-size: 20px; font-style: italic;} .intro-text-image-quote blockquote p:last-child {margin-bottom: 0;} .intro-text-image-quote blockquote h3 {font-size: 30px; margin-bottom: 15px; color: #178b82; line-height: 1.3em} /* THERAPISTS */ .therapist-page .content-page-header p {margin-top: 15px;} .therapist-page .content-page-header h2 {font-size: 26px;} .therapist-detail {padding: 80px 0;} .therapist-detail .cols {gap: 50px} .therapist-detail .cols .col {flex: 0 0 1} .therapist-detail .cols .col:first-child {flex: 0 0 350px;} .therapist-detail .cols .col .btn {margin-top: 20px;} .therapist-detail .person-image-outer {width: 100%; max-width: 350px;} .therapist-detail .col:first-child {text-align: center} .therapist-detail .col:first-child h2 {font-size: 30px; margin-bottom: 0.35em; font-size: 36px; color: var(--blue)} .therapist-detail .col:first-child h3 {font-size: 20px; line-height: 140%; margin-bottom: 0.25em; color: var(--charcoal)} .therapist-detail .col:first-child p {margin: 10px 0; font-size: 16px; font-weight: 700} .therapist-detail .col:first-child p.therapist-title {font-family: "anth", sans-serif;} .therapist-page .therapists-listing {background-color: var(--offWhite); padding:70px 0 80px 0;} .therapist-page .therapists-listing h2 {display: block; text-align: center; margin-bottom: 1.5em;} .therapist-detail .col:last-child h2 {margin-top: 1em; margin-bottom: 0.5em; font-size: 36px;} .therapist-detail .col:last-child h2:first-child {margin-top: 0} .therapist-detail .col:last-child h3 {margin-top: 1.25em; font-size: 26px;} /* WHAT WE OFFER */ .what-we-offer .basic-panel {padding: 80px 0;} .basic-panel h3 {font-size: 22px; margin-bottom: 0.5em; color: var(--blue)} /* OUR THERAPISTS */ .section-centred-intro-text {padding: 80px 0; background-color: var(--offWhite);} .section-centred-intro-text .inner {max-width: 960px;} .section-centred-intro-text p:last-child {margin-bottom: 0} .our-therapists .basic-panel {padding: 80px 0;} .therapists-listing-page {padding: 60px 0} .our-therapists .therapists-listing {margin-top: 0;} /* FOR PROFRESSIONALS */ .for-professionals .basic-panel {padding: 80px 0;} /* TESTIMONIAL CAROUSEL */ .testimonial-carousel-section {} .testimonial-carousel-section .team-card {display: flex;flex-direction: column; text-align: left; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); padding: 25px; padding-bottom: 10px; border-radius: 20px; height: 100%;} .testimonial-carousel-section .team-card:before {margin-bottom: 20px;} .testimonial-carousel-section .col p:last-child {margin-bottom: 0} .testimonial-carousel-section .team-carousel {padding-top: 30px; padding-bottom: 30px} .testimonial-carousel-section .team-carousel h3 {color:#178b82} .testimonial-carousel-section .team-carousel .col {height: auto; min-height: unset} .testimonial-carousel-section .slick-arrow {top: 50%; margin-top: -20px} .testimonial-carousel-section .slick-track {display: flex;} /* FAQ ACCORDION */ .accordion .accordion-item {border-bottom: 1px solid #efefef; border-radius: 5px; box-shadow: 5px 5px 20px rgba(0,0,0,0.1); margin-bottom: 20px; background-color: #ffffff;} .accordion .accordion-item h3 {font-size:22px; position: relative; cursor: pointer; line-height: 1.4em; padding: 20px 40px 20px 30px; margin-bottom: 0} .accordion .accordion-item h3 span.plus {width:21px; height: 21px; position:absolute; right:15px; display: block; top:25px;} .accordion .accordion-item h3 span.plus:before {width:2px; height: 100%; background-color: var(--blue); position: absolute; left: 10px; top: 0; content: '';} .accordion .accordion-item h3 span.plus:after {width:2px; height: 100%; background-color: var(--blue); position: absolute; left: 10px; top: 0; content: ''; transform: rotate(90deg);} .accordion .accordion-item.active h3 {} .accordion .accordion-item.active h3 span.plus:after {} .accordion .accordion-item.active h3 span.plus:before {display:none;} .accordion .accordion-expanded {display:none; padding:1px 40px 20px 30px;} .accordion .accordion-expanded p:last-child {margin-bottom:0;} .accordion .accordion-item:last-child {margin-bottom: 0;} .inner-narrow {max-width: 1100px;} .faq-section {padding: 80px 0} /* CONTACT PAGE */ .content-page-header .quick-contact-lockup {margin: auto; display: inline-flex; margin-top: 30px} .content-page-header .quick-contact-lockup a {color: #ffffff} .content-page-header .quick-contact-lockup a:hover {text-decoration: underline} .content-page-header .quick-contact-lockup .circle-icon {border:1px solid #ffffff} .contact-section, .referral-section {padding: 80px 0; background-color: var(--offWhite)} .contact-form, .referral-form {padding: 30px; background-color: #ffffff; border-radius: 20px; box-shadow: 5px 5px 20px rgba(0,0,0,0.1);} .contact-form .btn, .referral-form .btn {/*width: 250px;*/ max-width: 100%;} .contact-section .cols, .referral-section .cols {gap:80px;} .contact-section .col {width: 50%;} .contact-section h2, .referral-section h2 {color: var(--blue); margin-bottom: 0.25em} .referral-section .cols {justify-content: center;} .referral-section .col {width: 65%;} .form-row {margin-bottom: 20px;} .form-cell {display: flex; flex-direction: column} .form-cell select.select-css, .form-cell input, .form-cell textarea {border:1px solid #D0D0D0; border-radius: 10px; padding: 15px; font-size: 16px; background-color: #ffffff;} .form-cell textarea {height: 150px;} .form-cell label {display: block; margin-bottom: 10px} .phone-input-group {display: flex; gap: 10px;} .phone-input-group select.phone-country-code {flex: 0 0 170px;} .phone-input-group input {flex: 1 1 auto; min-width: 0;} .checkbox-cell span {display: flex; align-items: flex-start; gap: 10px; line-height: 1.4;} .checkbox-cell label {margin-bottom: 0;} .checkbox-cell input {width: auto; margin-top: 3px; padding: 0; border: 0;} .form-cell:focus-within label {font-weight: 700} .form-container {margin-top: 25px;} .flex-row {display: flex; gap: 10px; } .contact-section .accordion {margin: 30px 0} .contact-section .accordion .accordion-item {margin-bottom: 10px} .contact-section .accordion .accordion-item h3 {font-size: 18px; padding: 15px 40px 15px 25px; color: var(--blue); margin-bottom: 0} .contact-section .accordion .accordion-item h3 span {top: 17px;} .contact-section .accordion .accordion-expanded {padding-left: 25px} .form-field-error {color: red; background-color: #ffecec; padding: 10px; margin: 10px 0; border-radius: 5px;} /* BUTTON STRIP */ .button-strip {padding:40px 0 60px 0; background: linear-gradient(90deg, #F8F7F4, #ffffff, #F8F7F4);} .button-strip .inner {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;} .button-strip .btn {} /* BUTTONS */ .buttons {display: flex; margin-top: 2.5em} .buttons.stacked {flex-direction: column; gap: 20px;} .button {display: flex; justify-content: center;} .btn {font-size: 18px; line-height: 130%; text-align: center; justify-content: center; align-items: center; background-image: linear-gradient(180deg, #0092F0, #0070B8, #004672); box-shadow: 10px 10px 10px rgba(0,0,0,0.16); background-size: 100% 200%; position: relative; overflow: hidden; border-radius: 30px; color: #ffffff; text-decoration: none; padding: 18px 30px; display: inline-flex; transition: var(--smooth);} .btn.small {font-size: 16px; padding: 16px 20px;} .btn:hover {background-position: 0 100%; transform: translateY(4px); cursor: pointer; color: #ffffff;} .btn.white {color: var(--charcoal) ; background-image: linear-gradient(180deg, #ffffff, #E6E6E6, #E6E6E6, #88C9F2);} .btn.green {background-image: linear-gradient(180deg, #15B59E, #1B8071, #1B8071, #126256);} .btn.pink {background-image: linear-gradient(180deg, #D5077E, #871557, #871557, #5A0A38);} /* FOOTER */ footer {background-color: #132D43; padding: 80px 0 0;} footer ul {list-style: none;} .footer-top {margin-bottom: 30px;} .footer-top .cols {justify-content: space-between;} .footer-bottom ul {column-gap: 40px; columns: 2;} .footer-bottom ul li {margin-bottom: 0.5em;} .footer-bottom ul li a {color: #ffffff; text-decoration: none; line-height: 140%;} .footer-bottom ul li a:hover {text-decoration: underline;} .footer-bottom ul li ul {display: none} .footer-bottom .cols {justify-content: space-between; align-items: flex-end; padding-bottom: 80px;} .footer-bottom .quick-contact-lockup a {color: #ffffff;} .footer-bottom .quick-contact-lockup a:hover {text-decoration: underline;} .footer-sign-off {background-color: #ffffff; text-align: center; padding: 20px 0;} .footer-sign-off p {margin-bottom: 0; font-size: 14px;} /* FORM STYLES */ .form-container {} .form-row {} .form-cell {} input[type="text"] {} input[type="password"] {} input[type="submit"] {} textarea {} /* SELECT CSS */ .select-css {} /* LEGACY COOKIE BAR */ .cookieBar {width: 100%; background-color:rgba(0,0,0,0.5); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999;} .cookieBar p {color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;} .cookieBar .acceptBtn {background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }