/* CSS Document */ /*######################################## ## Body ########################################*/ body {padding: 0; margin: 0; width: 100%; font-family: 'Onest', sans-serif; font-size: 18px; font-weight: 400; color: #333; line-height: 1.6em; min-width: 320px;} /*######################################## ## Typography ########################################*/ h1, h2, h3, h4, h5, h6, p, ul, ol, li {padding: 0; margin: 0;} h1, h2, h3, h4, h5, h6 {font-family: 'Grandstander', sans-serif; font-weight: 700; color: #004B5D; line-height: 1.1em;} h1, h2 {font-size: 60px;} h5 {font-size: 18px; letter-spacing: 4px;} a {text-decoration: none;} /*######################################## ## Layouts ########################################*/ .screen-reader-text {display: block; width: .1px; height: .1px; overflow: hidden; padding: 0 !important; margin: 0 !important;} .container {width: 100%; max-width: 1386px; padding: 0 10px; box-sizing: border-box; margin: 0 auto;} /*######################################## ## Animation / Keyframes ########################################*/ .home .fade {opacity: 0; transform: translateY(20px); transition: opacity 1.5s ease, transform 1.5s ease; will-change: opacity, transform;} .home .fade.visible {opacity: 1; transform: translateY(0);} @keyframes float_up_down { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(-20px);} } @keyframes float_left_right { 0% {transform: translateX(-20px);} 50% {transform: translateX(20px);} 100% {transform: translateX(-20px);} } /*######################################## ## Forms ########################################*/ /*contact form messages*/ form .messages p {display: none; font-family: "Open Sans", sans-serif!important; font-weight: 400 !important;letter-spacing: 0 !important;font-size: 16px !important;} form .loading {display: none;} form .alert {padding: 15px !important;margin-bottom: 20px;border: 1px solid transparent !important;border-radius: 4px !important;} form .alert-success {color: #3c763d !important;background-color: #dff0d8 !important;border-color: #d6e9c6 !important;} form .alert-danger {color: #a94442 !important;background-color: #f2dede !important;border-color: #ebccd1 !important;} form input:focus, form select:focus, form textarea:focus {outline: none;} /*contact form*/ .ctc-form {text-align: center;} .ctc-form input[type="text"],.ctc-form textarea {width: 100%; height: 45px; margin: 0 0 20px; border: 1px solid #D6D6D6; border-radius: 0; background: none; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; line-height: 120%; padding: 0 20px; box-sizing: border-box; display: block; color: #111;} .ctc-form textarea {height: 111px; padding-top:10px; width: 100%;} .ctc-form button {margin-top: 10px;} .ctc-form .recap {display: inline-block;} .ctc-hide, .hdMob {display: none;} .g-recaptcha > div {margin: 20px auto 0;} /*######################################## ## Button ########################################*/ .btn {font-family: 'Grandstander', sans-serif; font-size: 20px; font-weight: 700; color: #FFF; line-height: 1.2em; background: #F58143; border-radius: 30px; padding: 15px 40px; display: inline-block; text-align: center; transition: transform 0.3s ease;} .btn:hover {transform: scale(1.1);} .btn-yellow {background: #FFCD37;} .btn-dark-yellow {background: #FEBA19;} /*######################################## ## Header ########################################*/ header {position: relative;} #header {position: fixed; width: 100%; padding: 10px 0 35px; z-index: 999; transition: all 0.5s ease;} #header:before {content: ""; background: linear-gradient(to bottom, rgba(0, 75, 93, 0.5) 0%, transparent 100%); position: absolute; top: 0; width: 100%; height: 100%; z-index: -1;} #header .container {max-width: 1860px; display: flex; align-items: center;} #header .logo {width: 30%;} #header .logo img {display: block;} #header .navigation-reservation {width: 70%; display: flex; align-items: center; justify-content: flex-end; column-gap: 50px;} #header nav #pull {display: none;} #header nav ul {list-style: none; display: flex; column-gap: 50px;} #header nav ul li a {font-family: 'Grandstander', sans-serif; font-size: 20px; font-weight: 700; color: #FFF; line-height: 1.2em; padding-bottom: 10px; border-bottom: 5px solid transparent; transition: all 0.5s ease;} #header nav ul li a.active-menu, #header nav ul li a:hover {border-color: #FFCD37;} #header .reservation a {display: flex; align-items: center; column-gap: 20px;} #header .reservation i {font-size: 30px; color: #FFF; background: #FFCD37; padding: 15px; border-radius: 50%;} #header .reservation p {font-family: 'Grandstander', sans-serif; font-size: 20px; font-weight: 700; color: #FFF; line-height: 1.2em;} #header .reservation p span {display: block;} #header.sticky {background: rgba(0, 75, 93, 0.8); padding: 10px 0;} .inner #header {background: #FFFCF5;} .inner #header:before {display: none;} .inner #header nav ul li a, .inner #header .reservation p {color: #004B5D;} .inner #header.sticky {box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);} /*######################################## ## Banner ########################################*/ #banner {position: relative;} #banner .main {height: 100vh; background: url('../images/content/banner-background.webp') no-repeat; background-size: cover; background-position: top center; box-sizing: border-box; padding-bottom: 150px; display: flex; flex-direction: column; justify-content: flex-end; position: relative;} #banner .main:before {content: ""; background: rgba(0, 75, 93, 0.1); position: absolute; top: 0; width: 100%; height: 100%;} #banner .main:after {content: ""; background: url(../images/content/puzzle-line.webp); background-repeat: repeat-x; position: absolute; bottom: 0; width: 100%; height: 40px;} #banner .main .container {z-index: 5;} #banner .main h2 {font-size: 80px; color: #FFF;} #banner .main p {font-size: 25px; font-weight: 500; color: #FFF; line-height: 1.2em; margin: 20px 0 40px;} #banner .inner-banner {background: #FFFCF5; padding: 200px 0 145px; position: relative;} #banner .inner-banner:after {content: ""; background: url(../images/content/puzzle-line.webp); background-repeat: repeat-x; position: absolute; bottom: 0; width: 100%; height: 40px;} #banner .inner-banner h1 {text-align: center;} /*######################################## ## Home Page Content ########################################*/ #clarity {padding: 75px 0 100px;} #clarity .container {display: flex; justify-content: space-between; align-items: center;} #clarity .content-left {width: 43.19%;} #clarity .content-left h1 {margin-bottom: 40px;} #clarity .content-left .btn {margin-top: 40px;} #clarity .image-right {width: 43.33%;} #clarity .image-right img {display: block; width: 100%;} #vision {background: url('../images/content/vision-background.webp') no-repeat; background-size: cover; /*background-position: top center;*/ padding: 110px 0; position: relative;} #vision:before {content: ""; background: url('../images/content/puzzle-blue-offset.webp') no-repeat; position: absolute; top: -50px; left: 70px; width: 86px; height: 100px; animation: float_up_down 3s ease-in-out infinite;} #vision:after {content: ""; background: url('../images/content/puzzle-offset-yellow.webp') no-repeat; position: absolute; bottom: -50px; right: 80px; width: 144px; height: 100px; animation: float_left_right 3s ease-in-out infinite;} #vision .content {max-width: 540px; margin-left: auto;} #vision .content img {display: block; margin-bottom: 30px;} #vision .content h2 {margin: 15px 0 35px;} #vision .content p {color: #004B5D; margin-bottom: 35px;} #vision .content ul {list-style: none;} #vision .content ul li {color: #004B5D; background: url('../images/content/orange-bullet-check.webp') no-repeat; background-size: 20px 20px; background-position: 0 2px; padding-left: 35px;} #vision .content ul li:not(:last-of-type) {margin-bottom: 10px;} #vision .content .btn {margin-top: 50px;} #hearing {padding: 150px 0 190px; background: url('../images/content/hearing-section-background.webp') no-repeat; background-size: cover; background-position: top center;} #hearing .content {max-width: 545px;} #hearing .content img {display: block; margin-bottom: 40px;} #hearing .content h2 {margin: 15px 0 35px;} #hearing .content p {max-width: 540px;} #hearing .content .btn {margin-top: 50px;} #age-groups {padding: 100px 0;} #age-groups .container {display: flex; justify-content: space-between;} #age-groups .image-left {width: 46.85%;} #age-groups .image-left img {display: block; width: 100%;} #age-groups .content-right {width: 38.06%;} #age-groups .content-right span {display: block;} #age-groups .content-right h2 {margin-bottom: 20px;} #age-groups .content-right .requirements {margin-top: 50px;} #age-groups .content-right .requirements h5 {margin-bottom: 30px;} #age-groups .requirements .requirement-wrapper {display: flex;} #age-groups .requirements .requirement-wrapper:first-of-type {padding-bottom: 30px; border-bottom: 2px solid #FFF7E1; margin-bottom: 30px;} #age-groups .requirement-wrapper .requirement {width: 50%;} #age-groups .requirement-wrapper .requirement:first-of-type {padding-right: 45px;} #age-groups .requirement-wrapper .requirement:nth-of-type(2) {padding-left: 45px; border-left: 2px solid #FFF7E1;} #age-groups .requirement-wrapper .requirement img {display: block; margin-bottom: 20px;} #age-groups .requirement-wrapper .requirement p {font-family: 'Grandstander', sans-serif; font-size: 20px; font-weight: 700; color: #004B5D; line-height: 1.2em;} #age-groups .requirement-wrapper .requirement small {font-size: 16px; line-height: 1.2em;} #age-groups .requirements .buttons {margin-top: 50px; display: flex; align-items: center; column-gap: 20px;} .mission {background: #19A4B7; padding: 155px 0;} .mission .container {display: flex; justify-content: space-between;} .mission .content-left {width: 46.85%;} .mission .content-left h5 {color: #FFF; margin-bottom: 30px;} .mission .content-left p {font-family: 'Grandstander', sans-serif; font-size: 30px; font-weight: 700; color: #FFF; line-height: 1.2em;} .mission .content-left .btn {border-radius: 5px; margin-top: 45px;} .mission .image-right {width: 43.92%;} .mission .image-right img {display: block; width: 100%;} #contact-us {padding: 90px 0 135px;} #contact-us .container {display: flex; justify-content: space-between;} #contact-us .content-left {width: 39.67%;} #contact-us .content-left h2 {margin-bottom: 15px;} #contact-us .content-left p {margin-bottom: 40px;} #contact-us .ctc-form .inline {display: flex; justify-content: space-between;} #contact-us .ctc-form .inline label {width: 48.89%;} #contact-us .ctc-form input[type="text"], #contact-us .ctc-form textarea {margin-bottom: 10px; border: 1px solid #D6D6D6; border-radius: 5px; font-family: 'Onest', sans-serif; font-size: 16px; font-weight: 400; color: #333; line-height: 1.2em;} #contact-us .ctc-form input[type="text"] {height: 50px;} #contact-us .ctc-form textarea {height: 120px;} #contact-us .ctc-form .btn {background: #19A4B7; border: none;} #contact-us .image-right {width: 51.17%;} #contact-us .image-right img {display: block; width: 100%;} /*######################################## ## Footer ########################################*/ footer {position: relative;} #footer {background: #FFFCF5; padding-top: 100px; position: relative;} #footer:before {content: ""; background: url(../images/content/puzzle-line.webp); background-repeat: repeat-x; position: absolute; top: 0; width: 100%; height: 40px;} #footer .content {margin-bottom: 40px;} #footer .content .container {display: flex;} #footer .content .logo {width: 26.57%;} #footer .content .logo img {display: block;} #footer .content .navigation {width: 38.65%; padding-top: 10px; border-left: 2px solid #FFF7E1; border-right: 2px solid #FFF7E1; display: flex; flex-direction: column; align-items: center;} #footer .content .navigation nav ul {list-style: none; columns: 2; column-gap: 110px;} #footer .content .navigation nav ul li a {font-size: 16px; color: #333; line-height: 3em; text-transform: uppercase; transition: all 0.5s ease;} #footer .content .navigation nav ul li a.active-menu,#footer .content .navigation nav ul li a:hover {color: #F58143;} #footer .content .details {width: 34.78%; display: flex; flex-direction: column; align-items: flex-end; row-gap: 30px; padding-top: 20px;} #footer .details .detail {display: flex; align-items: center; column-gap: 10px; min-width: 365px;} #footer .details .detail p, #footer .details .detail a {font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 20px; color: #004B5D; line-height: 1.2em;} #footer .details .detail span {display: block;} #footer .copyright .container {padding: 40px 10px; border-top: 2px solid #FFF7E1;} #footer .copyright p {font-size: 16px;} #footer .copyright a {color: #F58143;} /*######################################## ## About Us Page ########################################*/ #overview {padding: 130px 0 110px;} #overview .container {display: flex; justify-content: space-between;} #overview .content-left {width: 43.92%;} #overview .content-left h2 {margin-bottom: 40px;} #overview .content-left p:not(:last-of-type) {margin-bottom: 30px;} #overview .image-right {width: 49.78%;} #overview .image-right img {display: block; width: 100%;} #nurses {padding-bottom: 100px;} #nurses h2 {text-align: center; margin-bottom: 40px;} #nurses .content-wrapper {display: flex; flex-direction: column; row-gap: 30px;} #nurses .nurse {padding: 80px; border-radius: 30px; display: flex; justify-content: space-between;} #nurses .nurse:nth-child(even) {flex-direction: row-reverse;} #nurses .nurse.orange {background: #F58143;} #nurses .nurse.orange h3, #nurses .nurse.orange p {color: #FFF;} #nurses .nurse.yellow {background: #FFCD37;} #nurses .nurse .image-left {width: 38.14%;} #nurses .nurse .image-left img {display: block; width: 100%; border-radius: 20px;} #nurses .nurse .content-right {width: 56.38%;} #nurses .nurse .content-right h3 {font-size: 35px; margin-bottom: 35px;} #nurses .nurse .content-right p:not(:last-of-type) {margin-bottom: 35px;} #our-values {padding: 100px 0 130px;} #our-values h2 {text-align: center; margin-bottom: 50px;} #our-values .values {display: flex;} #our-values .values:first-of-type {padding-bottom: 40px; border-bottom: 2px solid #FFF7E1; margin-bottom: 40px;} #our-values .values .value {width: 33.333%; padding: 0 60px; box-sizing: border-box; text-align: center;} #our-values .values .value:nth-of-type(2) {border-left: 2px solid #FFF7E1; border-right: 2px solid #FFF7E1;} #our-values .values .value img {display: block; margin: 0 auto;} #our-values .values .value h3 {font-size: 25px; margin: 30px 0 10px;} #our-values .values .value p {line-height: 1.4em;} /*######################################## ## FAQs Page ########################################*/ .faqs-page #content {padding: 80px 0 150px;} .faqs-page #content .container {max-width: 1220px;} .accordion:first-of-type {padding-top: 0;} .accordion {padding: 40px 0; box-sizing: border-box; border-bottom: 2px solid #FFF7E1; transition: all .3s linear;} .accordion .title {display: flex; align-items: center; column-gap: 25px; position: relative;} .accordion .title h3::after {content: "\f078"; font-family: FontAwesome; font-size: 20px; position: absolute; right: 0; transition: all .3s linear;} .accordion .title h3.open::after {content: "\f077"; color: #19A4B7;} .accordion .title h3 {cursor: pointer; font-size: 30px;} .accordion .content {padding: 5px 65px 0px 100px; box-sizing: border-box;} .accordion .content a {color: #F58143;} /*######################################## ## Prices Page ########################################*/ #pricings {padding: 100px 0 80px;} #pricings .container {max-width: 1430px; display: flex;} #pricings .pricing {width: 33.333%; text-align: center; padding: 0 30px; box-sizing: border-box;} #pricings .pricing:nth-of-type(2) {border-left: 2px solid #FFF7E1; border-right: 2px solid #FFF7E1;} #pricings .pricing img {display: block; margin: 0 auto;} #pricings .pricing h5 {margin: 25px 0 20px; letter-spacing: 3px;} #pricings .pricing p {font-family: 'Grandstander', sans-serif; font-size: 60px; font-weight: 700; color: #004B5D; line-height: 1.1em;} #pricings .pricing small {font-size: 18px; line-height: 1.2em; display: block; margin-top: -5px;} #child-rate {background: #19A4B7; padding: 90px 0;} #child-rate .top-section {margin-bottom: 100px; text-align: center;} #child-rate .top-section p {font-family: 'Grandstander', sans-serif; font-size: 30px; font-weight: 700; color: #FFF; line-height: 1.1em; max-width: 960px; margin: 0 auto;} #child-rate .top-section p:not(:last-of-type) {margin-bottom: 30px;} #child-rate .bottom-section .content-wrapper {display: flex;} #child-rate .bottom-section .content-wrapper:first-of-type {padding-bottom: 50px; margin-bottom: 50px; border-bottom: 2px solid rgba(255, 205, 55, 0.3);} #child-rate .content-wrapper .content {width: 50%; box-sizing: border-box;} #child-rate .content-wrapper .content:nth-of-type(odd) {padding: 0 50px 0 85px; border-right: 2px solid rgba(255, 205, 55, 0.3);} #child-rate .content-wrapper .content:nth-of-type(even) {padding-left: 130px;} #child-rate .content-wrapper .content h3 {font-size: 30px; color: #FFF; line-height: 1.1em; margin-bottom: 15px; position: relative;} #child-rate .content-wrapper .content h3:before {content: ""; background: url('../images/content/yellow-check-icon.webp') no-repeat; background-size: 100% 100%; position: absolute; top: -12px; left: -85px; width: 72px; height: 50px;} #child-rate .content-wrapper .content ul {padding-left: 20px;} #child-rate .content-wrapper .content ul li {color: #FFF;} #child-rate .content-wrapper .content ul li::marker {color: #FFCD37;} #child-rate .content-wrapper .content ul li:not(:last-of-type) {margin-bottom: 20px;} #additional-info {padding: 90px 0 100px;} #additional-info .top-section {text-align: center;} #additional-info .top-section h5 {letter-spacing: 1px; margin-bottom: 10px;} #additional-info .middle-section {margin: 40px 0 60px; display: flex;} #additional-info .middle-section .fee {width: 33.333%; text-align: center; padding: 0 30px; box-sizing: border-box;} #additional-info .middle-section .fee:nth-of-type(2) {border-left: 2px solid #FFF7E1; border-right: 2px solid #FFF7E1;} #additional-info .middle-section .fee h3 {font-size: 30px; margin-bottom: 10px;} #additional-info .middle-section .fee hr {height: 5px; background: #F58143; width: 65px; margin: 15px auto 0; border: none;} #additional-info .middle-section .yellow {background: #FFCD37 !important;} #additional-info .middle-section .blue {background: #19A4B7 !important;} #additional-info .bottom-section {text-align: center;} /*######################################## ## Services Page ########################################*/ #what-we-do {padding: 100px 0 80px; text-align: center;} #what-we-do .container {max-width: 840px;} #what-we-do h5 {margin-bottom: 30px;} #what-we-do p {font-family: 'Grandstander', sans-serif; font-size: 30px; font-weight: 700; color: #004B5D; line-height: 1.1em;} #services-vision {background: url('../images/content/vision-background.webp') no-repeat; background-size: cover; padding: 160px 0;} #services-vision .content {max-width: 540px; margin-left: auto;} #services-vision .content img {display: block; margin-bottom: 30px;} #services-vision .content h2 {margin: 15px 0 35px;} #services-vision .content p {color: #004B5D; margin-bottom: 35px;} #services-vision .content ul {list-style: none;} #services-vision .content ul li {color: #004B5D; background: url('../images/content/orange-bullet-check.webp') no-repeat; background-size: 20px 20px; background-position: 0 2px; padding-left: 35px;} #services-vision .content ul li:not(:last-of-type) {margin-bottom: 10px;} #services-hearing {padding: 150px 0 190px; background: url('../images/content/hearing-section-background.webp') no-repeat; background-size: cover; background-position: top center;} #services-hearing .content {max-width: 545px;} #services-hearing .content img {display: block; margin-bottom: 40px;} #services-hearing .content h2 {margin: 15px 0 35px;} #services-hearing .content p {max-width: 540px;} #services-groups {padding: 130px 0 150px;} #services-groups .top-section {text-align: center; margin-bottom: 30px;} #services-groups .top-section p {max-width: 960px; margin: 20px auto 0;} #services-groups .bottom-section {display: flex; justify-content: space-between; align-items: center;} #services-groups .image-left {width: 52.7%;} #services-groups .image-left img {display: block; width: 100%;} #services-groups .requirements {width: 38.06%;} #services-groups .requirements h5 {margin-bottom: 30px;} #services-groups .requirements .requirement-wrapper {display: flex;} #services-groups .requirements .requirement-wrapper:first-of-type {padding-bottom: 30px; border-bottom: 2px solid #FFF7E1; margin-bottom: 30px;} #services-groups .requirement-wrapper .requirement {width: 50%;} #services-groups .requirement-wrapper .requirement:first-of-type {padding-right: 45px;} #services-groups .requirement-wrapper .requirement:nth-of-type(2) {padding-left: 45px; border-left: 2px solid #FFF7E1;} #services-groups .requirement-wrapper .requirement img {display: block; margin-bottom: 20px;} #services-groups .requirement-wrapper .requirement p {font-family: 'Grandstander', sans-serif; font-size: 20px; font-weight: 700; color: #004B5D; line-height: 1.2em;} #services-groups .requirement-wrapper .requirement small {font-size: 16px; line-height: 1.2em;} /*######################################## ## Contact Us Page ########################################*/ .contact-us-page #content {padding: 100px 0;} .contact-us-page #content .container {max-width: 920px;} .contact-us-page #content p {text-align: center;} .contact-us-page .ctc-form {margin-top: 40px;} .contact-us-page .ctc-form .inline {display: flex; justify-content: space-between;} .contact-us-page .ctc-form .inline label {width: 48.89%;} .contact-us-page .ctc-form input[type="text"], .contact-us-page .ctc-form textarea {margin-bottom: 10px; border: 1px solid #D6D6D6; border-radius: 5px; font-family: 'Onest', sans-serif; font-size: 16px; font-weight: 400; color: #333; line-height: 1.2em;} .contact-us-page .ctc-form input[type="text"] {height: 50px;} .contact-us-page .ctc-form textarea {height: 120px;} .contact-us-page .ctc-form .btn {background: #19A4B7; border: none;} /*######################################## ## Thank You Page ########################################*/ .thank-you-page #content {padding: 100px 0; text-align: center;} .thank-you-page #content img {display: block; margin: 0 auto;} .thank-you-page #content p {font-size: 20px; margin: 50px 0 40px;} /*######################################## ## Responsive ########################################*/ @media screen and (max-width: 1500px) { #header .logo img {max-width: 300px;} #header .navigation-reservation {column-gap: 40px;} #header nav ul {column-gap: 45px;} #header nav ul li a, #header .reservation p {font-size: 18px;} #header .reservation i {font-size: 25px; padding: 12px;} #banner .main h2 {font-size: 60px;} #banner .main p {font-size: 22px;} } @media screen and (max-width: 1366px) { h1, h2 {font-size: 50px;} .btn {font-size: 18px;} #header .logo img {max-width: 250px;} #header .navigation-reservation {column-gap: 35px;} #header nav ul {column-gap: 40px;} #header nav ul li a, #header .reservation p {font-size: 16px;} #header .reservation i {font-size: 22px; padding: 10px;} #banner .main {padding-bottom: 120px;} #banner .main h2 {font-size: 50px;} #banner .main p {font-size: 20px;} #clarity {padding: 75px 0;} #clarity .content-left h1, #overview .content-left h2 {margin-bottom: 30px;} #clarity .content-left .btn, .mission .content-left .btn {margin-top: 30px;} #vision, #services-vision {padding: 80px 0; background-position: -120px 0;} #vision:before {left: 20px;} #vision:after {right: 20px;} #vision .content h2, #services-vision, #hearing .content h2, #services-hearing .content h2 {margin: 15px 0 25px;} #vision .content p, #services-vision {margin-bottom: 25px;} #vision .content .btn, #hearing .content .btn {margin-top: 40px;} #hearing, #services-hearing, .mission, #age-groups, #contact-us, #overview, #our-values, .thank-you-page #content, .faqs-page #content, #pricings, #child-rate, #additional-info, .contact-us-page #content, #what-we-do, #services-groups {padding: 80px 0;} .mission .container {align-items: center;} .mission .content-left h5, #overview .content-left p:not(:last-of-type) {margin-bottom: 20px;} .mission .content-left p, #what-we-do p {font-size: 25px;} #age-groups .content-right {width: 42%;} #age-groups .content-right h2 {margin-bottom: 15px;} #age-groups .content-right .requirements {margin-top: 30px;} #footer {padding-top: 90px;} #footer .content .logo img {max-width: 200px;} #footer .content .navigation nav ul {column-gap: 90px;} #footer .content .navigation nav ul li a {line-height: 2.5em;} #footer .details .detail p, #footer .details .detail a {font-size: 18px;} #footer .copyright .container {padding: 20px 10px;} #banner .inner-banner {padding: 150px 0 115px;} #nurses {padding-bottom: 80px;} #nurses h2 {margin-bottom: 35px;} #nurses .nurse {padding: 50px;} #nurses .nurse .content-right h3 {font-size: 30px;} #nurses .nurse .content-right h3, #nurses .nurse .content-right p:not(:last-of-type) {margin-bottom: 20px;} #our-values h2 {margin-bottom: 40px;} #our-values .values .value {padding: 0 40px;} #our-values .values .value h3 {font-size: 23px; margin: 20px 0 10px;} .accordion {padding: 30px 0;} .accordion .title h3, #additional-info .middle-section .fee h3 {font-size: 25px;} .accordion .title h3::after {font-size: 18px;} #pricings .pricing h5 {margin: 20px 0 15px;} #pricings .pricing p {font-size: 50px;} #child-rate .top-section {margin-bottom: 80px;} #child-rate .top-section p {font-size: 25px; max-width: 900px;} #child-rate .content-wrapper .content h3 {font-size: 25px;} #child-rate .content-wrapper .content ul li:not(:last-of-type) {margin-bottom: 15px;} #additional-info .middle-section {margin: 40px 0 50px;} #what-we-do .container {max-width: 740px;} #what-we-do h5 {margin-bottom: 20px;} } @media screen and (max-width: 1200px) { h1, h2 {font-size: 45px;} #header .logo {width: 20%;} #header .logo img {max-width: 200px;} #header .navigation-reservation {width: 80%; column-gap: 35px;} #header nav ul {column-gap: 35px;} #header nav ul li a {border-bottom-width: 3px; font-size: 15px;} #header .reservation a {column-gap: 15px;} #header .reservation p {font-size: 15px;} #header .reservation i {font-size: 20px;} #age-groups .content-right {width: 45%;} #footer .content .logo {width: 24%;} #footer .content .navigation {width: 36%;} #footer .content .details {width: 40%;} } @media screen and (max-width: 1024px) { h1, h2 {font-size: 40px;} .btn {padding: 12px 30px;} #header .logo {width: 17%;} #header .logo img {width: 100%;} #header .navigation-reservation {width: 83%;} #banner .main {padding-bottom: 60px; height: 500px;} #banner .main h2 {font-size: 40px;} #banner .main p {font-size: 18px; margin: 15px 0 30px;} #clarity, #vision, #services-vision, #hearing, #services-hearing, .mission, #age-groups, #contact-us, #overview, #our-values, .thank-you-page #content, .faqs-page #content, #pricings, #child-rate, #additional-info, .contact-us-page #content, #what-we-do, #services-groups {padding: 50px 0;} #clarity .content-left h1 {margin-bottom: 25px;} #vision:before, #vision:after {display: none;} .mission .content-left p {font-size: 22px;} #contact-us .content-left p {margin-bottom: 30px;} #contact-us .ctc-form .inline {flex-direction: column;} #contact-us .ctc-form .inline label {width: 100%;} #contact-us .ctc-form input[type="text"], .contact-us-page .ctc-form input[type="text"] {height: 45px;} #footer .content .container {flex-wrap: wrap; row-gap: 40px; justify-content: space-between;} #footer .content .logo {width: 100%;} #footer .content .logo img {margin: 0 auto;} #footer .content .navigation, #footer .content .details {width: 48%; padding: 0;} #footer .content .navigation {border-left: 0;} #footer .content .navigation nav ul {text-align: center;} #footer .content .details {align-items: center;} #footer .details .detail {min-width: 0; flex-direction: column; row-gap: 15px; text-align: center;} #footer .copyright {text-align: center;} #nurses {padding-bottom: 50px;} #nurses .nurse {padding: 30px;} #nurses .nurse .content-right h3 {font-size: 25px;} #our-values .values .value {padding: 0 30px;} #pricings .pricing p {font-size: 45px;} #child-rate .top-section {margin-bottom: 50px;} #child-rate .bottom-section .content-wrapper:first-of-type {padding-bottom: 30px; margin-bottom: 30px;} #child-rate .content-wrapper .content:nth-of-type(odd) {padding: 0 30px 0 85px;} #child-rate .content-wrapper .content:nth-of-type(even) {padding-left: 110px;} } @media screen and (max-width: 980px) { h1, h2 {font-size: 35px;} #header .logo, #header .reservation {display: none;} #header .container {padding: 0; border: none;} #header nav {position: fixed; top: 0; left: 0; width: 100%; z-index: 999; box-shadow: 0 0 5px rgba(0,0,0,.8);} #header nav ul {max-width: 100%; display: none; height: auto; background: #F58143;} #header nav ul li a {padding: 10px; margin: 0; font-size: 18px; text-align: left; width: 100%; display: block; border: none; color: #FFF !important;} #header nav ul li a.active-menu, #header nav ul li a:hover {color: #FFF; background: #19A4B7;} #header nav #pull {display: block; background: #004B5D; width: 100%; position: relative; height: 45px; color: #fff; z-index: 999;} #header nav #pull img {max-height: 35px; display: block; position: relative; top: 2px; padding-left: 10px;} #header nav #pull:after {content:"\f0c9"; font-family: 'Font Awesome 5 Free'; font-size: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; font-weight: 700; color: #FFCD37;} #header nav #pull strong {line-height: 45px;} #header #schedule {position: absolute; right: 60px; top: 5px;} #header #schedule i {font-size: 20px; color: #FFF; background: #FFCD37; padding: 8px; border-radius: 50%;} #vision .content, #services-vision .content, #hearing .content, #services-hearing .content {width: 100%; margin: 0 auto; padding: 20px; background: rgba(255, 255, 255, 0.7); border-radius: 20px; box-sizing: border-box;} #hearing, #services-hearing {background-position: right -20px top;} #age-groups .container, #services-groups .bottom-section, #services-groups .image-left, #services-groups .requirements {flex-direction: column; row-gap: 30px;} #age-groups .image-left, #age-groups .content-right, #services-groups .requirements, #services-groups .image-left {width: 100%;} #age-groups .image-left img, #services-groups .image-left img {max-width: 300px; margin: 0 auto;} #age-groups .content-right, #services-groups .requirements {text-align: center;} #age-groups .requirement-wrapper .requirement img, #services-groups .requirement-wrapper .requirement img {margin: 0 auto 20px;} #age-groups .requirements .buttons {justify-content: center;} #age-groups .requirement-wrapper .requirement:first-of-type, #services-groups .requirement-wrapper .requirement:first-of-type {padding-right: 0;} #age-groups .requirement-wrapper .requirement:nth-of-type(2), #services-groups .requirement-wrapper .requirement:nth-of-type(2) {padding-left: 0;} } @media screen and (max-width: 767px) { h1, h2 {font-size: 30px;} #banner .main {height: 450px;} #banner .main .container {text-align: center;} #banner .main h2 {font-size: 35px;} #clarity, #vision, #services-vision, #hearing, #services-hearing, .mission, #age-groups, #contact-us, #overview, #our-values, .thank-you-page #content, .faqs-page #content, #pricings, #child-rate, #additional-info, .contact-us-page #content, #what-we-do, #services-groups {padding: 40px 0;} #clarity .content-left h1 {margin-bottom: 20px;} #clarity .content-left .btn {margin-top: 25px;} #clarity .container, .mission .container, #contact-us .container, #overview .container {flex-direction: column-reverse; row-gap: 30px;} #clarity .content-left, #clarity .image-right, .mission .image-right, .mission .content-left, #contact-us .content-left, #contact-us .image-right, #footer .content .navigation, #footer .content .details, #overview .content-left, #overview .image-right, #nurses .nurse .image-left, #nurses .nurse .content-right, #our-values .values .value {width: 100%;} #clarity .content-left, .mission .content-left, #overview .content-left {text-align: center;} .mission .content-left p, #what-we-do p {font-size: 20px;} #age-groups .requirements .requirement-wrapper:first-of-type {padding-bottom: 0; border: none;} #age-groups .requirements .requirement-wrapper, #nurses .nurse, #nurses .nurse:nth-child(even), #our-values .values, #pricings .container, #services-groups .requirements .requirement-wrapper {flex-direction: column; row-gap: 30px;} #age-groups .requirement-wrapper .requirement, #services-groups .requirement-wrapper .requirement {width: 100%; padding: 30px !important; box-sizing: border-box; border: 2px solid #FFF7E1 !important;} #age-groups .requirements .buttons {flex-direction: column; row-gap: 20px; margin-top: 30px;} #age-groups .image-left img, #services-groups .image-left img {max-width: 100%;} #contact-us .content-left h2, #contact-us .content-left p, #nurses .nurse .content-right h3, #nurses .nurse .content-right p {text-align: center;} #contact-us .content-left p, #overview .content-left h2 {margin-bottom: 20px;} #footer .content .container {row-gap: 30px;} #banner .inner-banner {padding: 100px 0 80px;} #nurses {padding-bottom: 40px;} #nurses h2 {margin-bottom: 25px;} #nurses .nurse {padding: 20px;} #nurses .nurse .content-right h3 {font-size: 23px;} #nurses .nurse .content-right h3, #nurses .nurse .content-right p:not(:last-of-type) {margin-bottom: 15px;} #our-values h2 {margin-bottom: 20px;} #our-values .values:first-of-type {padding-bottom: 0; border-bottom: 0; margin-bottom: 30px;} #our-values .values .value {padding: 20px; border: 2px solid #FFF7E1 !important;} .thank-you-page #content p {font-size: 18px; margin: 30px 0 20px;} .accordion {padding: 20px 0;} .accordion .title {column-gap: 15px;} .accordion .title h3 {font-size: 20px;} .accordion .title h3::after {font-size: 16px;} .accordion .content {padding: 5px 50px 0px 90px;} #pricings .pricing p {font-size: 40px;} #pricings .pricing {width: 100%; padding: 20px; border: 2px solid #FFF7E1 !important;} #child-rate .top-section {margin-bottom: 40px;} #child-rate .top-section p, #child-rate .content-wrapper .content h3 {font-size: 20px;} #child-rate .top-section p:not(:last-of-type) {margin-bottom: 20px;} #child-rate .bottom-section .content-wrapper {flex-direction: column; row-gap: 30px;} #child-rate .bottom-section .content-wrapper:first-of-type {padding-bottom: 0; border: none;} #child-rate .content-wrapper .content {width: 100%; border: none !important; padding: 70px 0 0 0 !important;} #child-rate .content-wrapper .content h3:before {left: 0; top: -70px;} #additional-info .middle-section {margin: 30px 0; flex-direction: column; row-gap: 30px;} #additional-info .middle-section .fee {width: 100%; padding: 0 !important; border: none !important;} #additional-info .middle-section .fee h3 {font-size: 22px;} .contact-us-page .ctc-form {margin-top: 30px;} .contact-us-page .ctc-form .inline {flex-direction: column;} .contact-us-page .ctc-form .inline label {width: 100%;} #banner .main:after, #banner .inner-banner:after, #footer:before {background-size: 100% 100%; height: 20px;} } @media screen and (max-width: 480px) { .btn-large {font-size: 15px; padding: 10px 15px;} } @media screen and (max-width: 420px) { #vision, #services-vision {background-position: -245px 0; padding: 0 0 40px;} #vision .content img, #services-vision .content img, #hearing .content img, #services-hearing .content img {margin: 0 auto 20px;} #vision .content h5, #services-vision .content h5, #hearing .content h5, #services-hearing .content h5 {text-align: center;} #vision .content h2, #services-vision .content h2, #hearing .content h2, #services-hearing .content h2 {margin: 10px 0 15px; text-align: center;} #vision .content p, #services-vision .content p {margin-bottom: 15px;} #vision .content .btn, #hearing .content .btn {margin: 30px auto 0; display: block; max-width: 170px; box-sizing: border-box;} #hearing, #services-hearing {background-position: right -250px top;} #footer {padding-top: 80px;} #footer .content .navigation nav ul {columns: 1;} #footer .copyright .container {padding: 15px 10px;} #footer .copyright p {font-size: 15px;} .accordion .content {padding: 5px 20px 0px 15px;} } @media screen and (max-width: 350px) { .btn-large {font-size: 13px;} }