@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');

@charset "utf-8";

:root {

  --primary: #005047;

  --secondary: #96ce43;

  --tertiary: #01322c;

  --tertiary2: #276562;

  --dark: black;

  --light: white;

}

* {

  transition: all .5s ease;

}


footer h4 {
  font-size: 1.5vw;
}

#centexiv h2 {
  margin: 0;
}

#centexiv p {
  margin: 1vw 10vw;
}


h1 {

  text-align: center;

  color: #005047;

}

a {
  font-size: 2vw;
}

.centexiv {
  width: 44vw;
}

.hamburger {

  width: 30px;

  height: 25px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  cursor: pointer;

  padding: 10px;

}

.bar {

  width: 100%;

  height: 4px;

  background-color: #333;

  border-radius: 2px;

  transition: transform 0.3s ease, opacity 0.3s ease;

}

.navbar-links ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}

.navbar-links li {

  padding: 10px;

}

.navbar-links li a {

  color: white;

  text-decoration: none;

  display: block;

}

.navbar-links li a:hover {

  background-color: #575757;

}

.navbar-links.active {

  animation: slideDown .05s ease-in-out forwards;

}

@keyframes slideDown {

  from {

    max-height: 0;

  }

  to {

    max-height: 100%; /* Adjust this value based on content */

  }

}

@keyframes slideUp {

  from {

    max-height: 100%; /* Adjust this value based on content */

  }

  to {

    max-height: 0;

  }

}

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.services-content {

  padding: 6.2vw;

  background-color: #005047;

}

.services-content p {

  color: white;

  font-size: 1.6vw;

}

.about-content {

  padding: 4vw 10vw;

}

.why {

  width: 50vw;

  margin: 3vw 25vw !important;

  font-size: 2vw !important;

}

.story {

  margin-left: 38vw;

  width: 46vw;

  margin-top: 22vw;

}

.mission {

  margin: -16.2vw 12vw 5vw 12vw;

  font-size: 2vw;

  font-weight: bold;

  text-align: center;

  line-height: 2.5vw;

}

.vision {

  margin: -16.2vw 15vw 15vw 15vw;

  font-size: 2vw;

  font-weight: bold;

  text-align: center;

  line-height: 2.5vw;

}

.our-approach-header {

  width: 47vw;

  margin-top: 10vw;

}

.patient-testimonials {

  width: 75vw;

  margin-left: 50%;

  transform: translateX(-50%);

  margin-top: 10vw;

  margin-bottom: 3vw;

}

.testimonial-01, .testimonial-02, .testimonial-03 {

  width: 21.8vw;

  float: left;

  margin: 1.9vw;

  text-align: center;

  margin-bottom: 10vw;

}

.emily-logo {

  width: 100%;

}

.jonathan-logo {

  width: 100%;

}

.sarah-logo {

  width: 100%;

}

.about-vision {

  width: 100%;

}

.about-footer {

  width: 65vw;

  margin-left: 50%;

  transform: translateX(-50%);

  margin-bottom: 10vw;

}

.about-img-01 {

  width: 100%;

}

.about-title {

  width: 100%;

}

.about-half-logo {

  width: 20vw;

  float: left;

  margin-left: 13vw;

}

.our-story-header {

  width: 40vw;

  float: left;

  margin: 0 20vw 0 3vw;

}

.meet-our-chiropractor {

  width: 60vw;

  clear: left;

  margin: 6vw 50% 6vw 50%;

  transform: translateX(-50%);

}

.ali-logo {

  width: 30vw;

  margin-left: 50%;

  transform: translateX(-50%);

}

.ali-footer {

  width: 40vw;

  margin-left: 50%;

  transform: translateX(-50%);

  margin-top: 5vw;

}

.hamburger {

  display: none;

}

h5 {

  font-size: 2.4vw;

  color: #96ce43;

}

.homepage {

  width: 100%;

}

body {

  margin: 0;

  padding: 0;

  overflow-x: hidden;

  font-family: 'Roboto';

}

.why-section {

  padding: 7vw;

}

.why-section p {

  font-size: 1vw !important;

  margin: 1vw !important;

  line-height: 2.2vw;

}

.why-section h3 {

  color: #96ce43;

}

.home-footer {

  margin-left: 50%;

  transform: translateX(-50%);

  margin-top: 7vw;

  width: 60vw;

}

.why-section {

  padding: 1vw 7vw;

  height: 47vw;

}

.why-section p {

  font-size: 1.3vw !important;

  margin: 1vw !important;

  line-height: 2 !important;

}

.why-section h3 {

  color: #96ce43;

}

.home-img-03 {

  background-image: url(../images/home-img-03.webp);

  background-size: 100vw 40vw;

  height: 40vw;

  padding-top: 4vw;

  padding-left: 40vw;

  background-repeat: no-repeat;



  margin-top: -0.5vw;

}

.home-img-03 p {

  color: white !important;

}

#home-content {

  padding-top: 5vw;

  background-color: white;

}

#home-content h2 {

  text-align: center;

}

.green {

  color: #96ce43;

}

.column-01, .column-02, .column-03, .column-04 {

  width: 17vw;

  float: left;

  margin: 1.9vw;

  text-align: center;

}

.home-icon {

  width: 100%;

}

.home-img {

  width: 100%;

}

#homevid {

  WIDTH: 100%;

}

#home-content p {

  text-align: center;

  margin: 5vw;

  color: #01322c;

  font-size: 1.4vw;

}

.clear {

  clear: both;

  margin: 5vw;

  height: 5vw;

}

.service-text {

  color: white;

  width: 45vw;

  float: right;

  margin-right: 6.2vw;

}

h3 {

  color: white;

  font-size: 2.4vw;

  line-height: 4vw;

}

.title-services {

  width: 100vw;

  margin-top: 5vw;

}

.service-image {

  width: 30vw;

  float: left;

  clear: both;

  margin-right: 3vw;

}

.service-title {

  width: 40vw;

  margin-top: 4vw;

  float: right;

  margin-right: 11vw;

}

iframe {

  width: 100%;

  height: 40vw;

  border-radius: 1vw;

  border: #005047 solid 5px;

}

h2 {

  font-family: Montserrat;

  color: #01322c;

  font-size: 4vw;

  margin-top: 4vw;

  margin-bottom: 1vw;

}

p {

  font-size: 2vw;

  line-height: 3vw;

  color: #005047;

}

.btn-sched6 {

  width: 24vw;

  margin-left: 50%;

  transform: translateX(-50%);

  margin-top: 5vw;

}

.healthy {

  position: absolute;

  margin: 10vw;

  width: 40vw;

}

#content {

  background-color: #fff;

}

.right {

  float: right !important;

}

#text-content {

  padding: 0 10vw;

  padding-bottom: 10vw;

}

.right2 {

  text-align: right;

}

.condition-item {

  align-items: center;

  margin-bottom: 5vw;

  float: left;

}

.condition-item img.condition-image {

  width: 24vw;

  margin: 4vw;

  float: left;

}

.condition-item .text {

  flex: 1;

  padding: 1vw;

}

.condition-item .text h2 {

  font-family: "Montserrat Alternates", sans-serif;

  font-weight: 700;

  font-style: normal;

  font-size: 2.5vw;

  color: var(--primary);

  margin-top: 7vw;

}

.condition-item .text p {

  font-family: "Roboto", sans-serif;

  font-size: 1.5vw;

  line-height: 2vw;

}

.title-faq {

  width: 100%;

  max-width: 40vw;

  position: absolute;

  left: 50%;

  margin-top: 10.8vw;

  transform: translateX(-50%);

}

.bg-header {

  width: 100%;

  margin-top: 5vw;

}

.footer-bottom {

  border-top: solid .2vw #96ce43;

  padding-top: 2vw;

  width: 100%;

}

.footer-nav {

  text-align: right

}

h4 {

  margin: .2vw;

}

footer .hvr-buzz-out {

  margin: 0 0.6vw

}

.wrapper {

  padding: 10vw;

  line-height: 3vw;

  font-size: 1.8vw;

}

.bold {

  font-weight: 900;

}

.footer-bottom p {

  color: var(--tertiary2);

  font-size: 0.9vw;

  line-height: 1.5vw;

  margin-left: 6vw;

  margin-top: 2vw;

}

button.btn-submit {

  background-color: var(--secondary);

  padding: .6vw;

  margin-left: 0vw;

  margin-top: 0.24vw;

  font-weight: 900;

  letter-spacing: 0.1vw;

  position: absolute;

  right: 12vw;

}

textarea.email-input {

  margin-top: 0.3vw;

  height: 2.1vw;

  position: relative;

  width: 15.5vw;

}

.policies a {

  text-decoration: none;

  margin: 0vw 1vw;

  font-weight: 900;

  letter-spacing: .1vw;

}

.footer-right img {

  width: 100%;

}

.footer-left img {

  width: 18vw;

}

footer a {

  color: white;

  text-decoration: none;

}

.footer-right {

  float: right;

  width: 22vw;

  margin-top: 3vw;

  margin-right: 5vw;

}

.footer-nav {

  text-align: right;

}

footer .hvr-buzz-out {

  margin: 0 0.6vw;

}

.footer-nav a {

  margin: 1vw;

}

img.footer-logo {

  width: 15vw;

}

footer {

  background: var(--primary);

  color: var(--light);

  padding: 3vw 4vw;

  font-family: 'Roboto';

  border-top: solid .4vw var(--secondary);

  margin-top: 8vw;
}

footer a {

  color: var(--light);

  text-decoration: none;

  font-size: 1.5vw;

}

.footer-middle a, .footer-bottom p a {

  color: var(--accent);

  text-decoration: none;

  font-weight: 900;

  margin: 0.8vw;

  text-align: left;

}

.footer-middle {

  float: left;

  width: 31vw;

  margin-top: 0vw;

  margin-bottom: 2vw;

}

.footer-bottom p {

  color: var(--light);

  font-size: 1.3vw;

  line-height: 2.3vw;

  margin: 4vw;

}

.footer-middle {

  float: left;

  width: 22vw;

  display: inline-grid;

  margin-left: 5vw;

  margin-top: 3vw;

}

.footer-middle a {

  text-decoration: none;

  margin-bottom: 1.5vw;

  text-transform: uppercase;

  letter-spacing: .1vw;

  font-weight: 900;

}

.footer-left {

  float: left;

  width: 22vw;

  margin-left: 0vw;

  margin-top: 3vw;

  height: 32vw;

}

.footer-bottom {

  clear: both;

  text-align: center;

}

img.contact-us {

  width: 50vw !important;

  margin: 0 15vw;

}

img.btn-sched3 {

  width: 15vw !important;

}

img.btn-sched4 {

  width: 24vw !important;

  margin-left: 50%;

  transform: translatex(-50%);

  margin-bottom: 10vw;

}

img.btn-sched5 {

  width: 25vw !important;

  margin-left: 50%;

  transform: translatex(-50%);

}

img.btn-sched {

  width: 12vw;

  margin-bottom: -1.1vw;

}

img.btn-sched2 {

  width: 21vw !important;

  margin-left: 50%;

  transform: translateX(-50%);

  margin-top: 5vw;

  margin-bottom: 5vw;

}

nav a {

  color: white;

  margin: 1vw;

  text-decoration: none;

  text-transform: uppercase;

  font-size: 1.1vw;

}

#navbar-top {

  background-color: var(--primary);

  width: 100vw;

  height: 5vw;

  color: var(--light);

  border-bottom: solid .4vw var(--secondary);

  position: fixed;

  top: 0;

  z-index: 1;

}

a #navbar-top {

  color: var(--light);

}

#navbar-right a {

  display: inline;

}

#navbar-right {

  float: right;

  width: 70vw;

  text-align: right;

  padding-top: 0.7vw;

  font-family: Roboto;

  font-weight: 600;

  letter-spacing: .05vw;

  padding-right: 1.8vw;

  clear: both;

}

div#navbar-right {}

img#logo-icon {

  height: 4vw;

  margin-top: 0.5vw;

  margin-right: 0.7vw;

}

img#logo-type {

  height: 3.7vw;

  margin: 0;

}

/* Safari */

@-webkit-keyframes hvr-buzz-out {

  10% {

    -webkit-transform: translateX(3px) rotate(2deg);

    transform: translateX(3px) rotate(2deg);

  }

  20% {

    -webkit-transform: translateX(-3px) rotate(-2deg);

    transform: translateX(-3px) rotate(-2deg);

  }

  30% {

    -webkit-transform: translateX(3px) rotate(2deg);

    transform: translateX(3px) rotate(2deg);

  }

  40% {

    -webkit-transform: translateX(-3px) rotate(-2deg);

    transform: translateX(-3px) rotate(-2deg);

  }

  50% {

    -webkit-transform: translateX(2px) rotate(1deg);

    transform: translateX(2px) rotate(1deg);

  }

  60% {

    -webkit-transform: translateX(-2px) rotate(-1deg);

    transform: translateX(-2px) rotate(-1deg);

  }

  70% {

    -webkit-transform: translateX(2px) rotate(1deg);

    transform: translateX(2px) rotate(1deg);

  }

  80% {

    -webkit-transform: translateX(-2px) rotate(-1deg);

    transform: translateX(-2px) rotate(-1deg);

  }

  90% {

    -webkit-transform: translateX(1px) rotate(0);

    transform: translateX(1px) rotate(0);

  }

  100% {

    -webkit-transform: translateX(-1px) rotate(0);

    transform: translateX(-1px) rotate(0);

  }

}

@keyframes hvr-buzz-out {

  10% {

    transform: translateX(3px) rotate(2deg);

  }

  20% {

    transform: translateX(-3px) rotate(-2deg);

  }

  30% {

    transform: translateX(3px) rotate(2deg);

  }

  40% {

    transform: translateX(-3px) rotate(-2deg);

  }

  50% {

    transform: translateX(2px) rotate(1deg);

  }

  60% {

    transform: translateX(-2px) rotate(-1deg);

  }

  70% {

    transform: translateX(2px) rotate(1deg);

  }

  80% {

    transform: translateX(-2px) rotate(-1deg);

  }

  90% {

    transform: translateX(1px) rotate(0);

  }

  100% {

    transform: translateX(-1px) rotate(0);

  }

}

@media (orientation: portrait) {

  

  p {

  font-size: 4vw;

  line-height: 6vw;

}

  

  #content {

margin-top: 12vw;

}

  

  

  .why-section h3 {

font-size: 6vw;

}

  

  .home-icon {

  width: 50%;

}

  

  .column-01, .column-02, .column-03, .column-04 {

  width: 80vw;

  float: left;

  margin: 1.9vw;

  text-align: center;

}

  

  

  .home-img-03 p {

font-size: 2vw !important;;

line-height: 3vw !important;

margin: 2vw 5vw 0 6vw !important;

}

  #home-content p {

  margin: 5vw;

  font-size: 2.8vw;

line-height:4vw;

}

  #home-content {

  padding-top: 17vw;



}

  .bar {

    width: 100%;

    height: 1vw;

    background-color: #fff !important;

    border-radius: 2vw;

    transition: transform 0.3s ease, opacity 0.3s ease;

  }

  .hamburger {

    width: 8vw;

    height: 8vw;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    cursor: pointer;

    padding: 10px;

    float: right;

    margin: 3vw 5vw;

  }

  img#logo-type {

    height: 8vw;

  }

  img#logo-icon {

    height: 8vw;

  }

  img.btn-sched {

    width: 50vw;

    margin-bottom: -1.1vw;

  }

  #navbar-right a {

    border-bottom: #9cd745 solid 2px !important;

    padding-top: 5vw;

    padding-bottom: 7.4vw;

    line-height: 0;

    width: 100%;

    float: right;

    margin-top: 0px;

  }

  nav a {

    color: white;

    margin: 3vw;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 6vw;

    float: left;

  }

  #navbar-top {

    height: 17vw;

    color: var(--light);

    z-index: 99999;

  }

  footer a {

    font-size: 2.8vw;

  }

  .navbar-links {

    animation: slideUp 1.5s ease-in-out forwards;

    margin-top: -140vw;

  }

  .navbar-links ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

  }

  .navbar-links li {

    padding: 10px;

  }

  .navbar-links li a {

    color: white;

    text-decoration: none;

    display: block;

  }

  .navbar-links li a:hover {

    background-color: #575757;

  }

  .navbar-links.active {

    margin-top: 0;

  }

  .footer-right {

    float: left;

    width: 22vw;

    margin-top: 3vw;

    margin-right: 5vw;

    display: none;

    clear: both;

  }

  .footer-left img {

    width: 100%;

  }

  .footer-middle a {

    float: none;

    width: 80vw;

    margin-top: 0vw;

    margin-bottom: 9vw;

    text-align: center;

    clear: both;

  }

  .footer-left {

    float: none;

    width: 80vw;

    margin-top: 0vw;

    margin-bottom: 9vw;

    text-align: center;

  }

  img.footer-logo {

    width: 100%;

  }

  .footer-middle {

    font-size: 3.5vw;

    text-align: center;

    padding: 2vw;

    display: block;

    width: 95%;

    margin: 0;

    margin-bottom: 3vw;

  }

  footer a {

    font-size: 3.5vw;

    text-align: center;

    padding: 2vw;

  }

  .footer-nav {

    text-align: center;

    padding-bottom: 6vw;

  }

  footer {

    padding: 9vw;

  }

  .why {

    margin: 0 50% !important;

    transform: translateX(-50%);

  }

  footer h4 {

    margin: 2.7vw 0vw;

    font-size: 5.5vw;

    text-align: center;

    color: #a4d54a;

  }

  .footer-bottom p {

    font-size: 2vw;

    line-height: 4vw;

    margin: 0vw;

    padding: 4vw 0;

  }

  .footer-left {

    float: left;

    width: 100%;

    margin-top: 3vw;

    height: 94vw;

    clear: both;

  }

  .footer-bottom {

    clear: both;

    text-align: center;

  }

  

 .title-services {

  margin-top: 17vw;

}

  .footer-bottom p {

    color: #fff;

    font-size: 2vw;

    line-height: 3.5vw;

    width: 100%;

    margin-left: 0;

    margin-top: 4vw;

    margin-bottom: 5vw;

  }

  .story {

    font-size: 3vw;

  }

  .ali{

    font-size: 3vw

  }

  .testimonial-01 p, .testimonial-02 p, .testimonial-03 p {

    font-size: 2vw;

    line-height: 4vw;



}

 .service-image {

  width: 50vw;

  float: left;

  clear: both;

  margin-left: 50%;

  transform: translateX(-50%)

}

  

  .services-content p {

  font-size: 3vw;

}

  

.service-text {

  width: 100%;

  float:left;

}

  

  .service-title {

  width: 60vw;

  margin-top: 4vw;

  float: left;

  margin-left: 50%;

  transform: translateX(-50%)

}

  

  #navbar-right {

    text-align: right;

    font-family: Roboto;

    font-weight: 600;

    letter-spacing: .05vw;

    background-color: #004039;

    height: 100vh !important;

    position: fixed;

    top: 17.4vw;

    width: 100vw;

    left: 0;

  }

  h4 {

    font-size: 2vw;

  }

  #navbar-right a {

    display: block;

  }

  .footer-bottom p a {

    font-size: 2vw;

  }

}