/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents 
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Linksco
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Global Reset or Base Styles */
html, body {
  overflow-x: hidden;  /* Prevent horizontal scrolling */
}
/* For mobile view */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
}
/* Global Styles */
html, body {
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

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

body {
  margin: 0; /* Ensure no default body margin */
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
/*@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}*/
@media (min-width: 400px) {
  .container {
    width: 100%;
    padding: 0; }
}
/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 100%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.3em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 24px;
  font-weight: 400;
  color: #6F4E22;
  font-style: normal;
   overflow-x: hidden;
}

@media (max-width: 1250px){
  body {
    font-size: 1.5em;
  }
}

@media (max-width: 500px){
  body {
    font-size: 1.7em;
  }
} 

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem 0;
  font-weight: 400;
  font-style: normal;}
h1 { font-size: 5.5rem; line-height: 1.3;  letter-spacing: 0rem;}
h2 { font-size: 4rem; line-height: 1.3; letter-spacing: 0rem; }
h3 { font-size: 2.2rem; line-height: 1.3;  letter-spacing: 0em; }
h4 { font-size: 2rem; line-height: 1.3; letter-spacing: 0rem; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5em;
  color: #000;
  }
p2 {
  margin-top: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5em;
  letter-spacing: 0.01 em;
  }
p3{
  margin-top: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5em;
  letter-spacing: 0.01 em;
  }
.content-padding {
 padding-top: 4%;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #6F4E22; 
  text-decoration: none;}
a:hover {
  color: #6F4E22; }


.neutral a {
  color: #6F4E22; 
  text-decoration: none;}
.neutral a:hover {
  color: #6F4E22; }
.neutral a::after {
  content: '';
  position: absolute;
  color: #000;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  justify-content: center;
  align-items: center; 
  height: 60px;
  padding: 1.2em 2em; 
  color: #fff; 
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: #6F4E22; 
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 300px;
  margin-top: 4%;
  max-width: 75%;
  border: none; 
  transition: background-color 0.3s ease, color 0.3s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
   /* Text color on hover/focus */
  background-color: #836640;
  outline: 0;
  border: none; 
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF; 
  background-color: #6F4E22; 
  border: none; 
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #6F4E22; 
  background-color: #8A6B3B; 
  border: none; 
}
a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  justify-content: center;
  align-items: center; 
  height: 60px;
  padding: 1.2em 2em; 
  color: #fff; 
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: #6F4E22; 
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 300px;
  margin-top: 4%;
  max-width: 75%;
  border: none; 
  transition: background-color 0.3s ease, color 0.3s ease;
}

a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
a.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  background-color: #8A6B3B;
  outline: 0;
  border: none; 
}
a.all-services-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
a.all-services-button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  background-color: #8A6B3B;
  outline: 0;
  border: none; 
}
.button1,
button.button1,
input[type="submit"].button1,
input[type="reset"].button1,
input[type="button"].button1 {
  display: inline-block;
  justify-content: center; 
  align-items: center; 
  height: 60px;
  padding: 1.2em 2em; 
  color: #6F4E22;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent; 
  border: 2px solid #6F4E22; 
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 300px;
  margin-top: 4%;
  max-width: 75%;
 /* transition: background-color 0.3s ease, color 0.3s ease; */
}
a.button1:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
a.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  background-color: #6F4E22;
  outline: 0;
  border: none; 
  color: #fff;
}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #000;
  border-radius: none;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #000;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; 
 }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }
/*Popup
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#overlay {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 3;
  cursor: pointer;
}
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  color: #6F4E22;
  background: #FFFFFF;
  padding: 30px;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
#close-box {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 15px;
    font-size: 3rem;
}

@media screen and (max-width:770px){
  #text {
    overflow-y: scroll;
    position: relative;
    top: 50%;
  }
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


.service-link{
text-decoration: auto;
    display: contents;
    font-size: 20px;
}
/* Header
----------------------------------------------------- */
 .fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px 0px;
  box-shadow: 10px 10px 5px #ECE7E2;
  z-index: 1000;
  display: flex;
  justify-content: center;
  height: 110px;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  position: relative;
}

.logo {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  float: left;
}

.logo img {
  height: auto;
  width: 280px;
  max-width: 100%;
}
.navigation {
  display: flex;
  justify-content: center; /* Center the navigation links */
}

.navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 40px;
  display: flex;
  gap: 30px;
}

.navigation a,
.navigation-responsive a {
  text-decoration: none;
  color: #8B6B43;
}

.navigation a:hover,
.navigation-responsive a:hover,
.navigation a.active,
.navigation-responsive a.active {
  text-decoration: underline;
  text-underline-offset: .4em; /* Consistent underline offset */
}

.navigation li {
  margin-bottom: 0;
}


.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.social-icons {
  display: flex;
  gap: 15px;
  justify-content: center;
  padding: 10px;
}

.social-icons a {
  color: #8B6B43;
  font-size: 18px;
  text-decoration: none;
}
.social-icons a + a {
 margin-left: 40px; 
}

.appointment-button {
  padding: 10px 50px;
  text-decoration: none;
  font-weight: bold;
}
.appointment-button .button  {
 max-width: 100%;
}

/* Hamburger Menu Styles */
.hamburger-menu {
  display: none; /* Initially hidden */
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  right: 20px;
  z-index: 1001;
}

.hamburger-menu div {
  width: 100%;
  height: 2px;
  background-color: #8B6B43;
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger-menu.active div:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active div:nth-child(2) {
  transform: translateY(-8px) rotate(-45deg);
}

.hamburger-menu.active div:nth-child(3) {
  opacity: 0;
}

/* Dropdown Menu */
.dropdown {
  position: relative;
}

.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* Position it below the parent */
  left: 0;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.dropdown .dropdown-menu li {
  margin: 0;
  border: none;
}

.dropdown .dropdown-menu li a {
  padding: 5px 10px;
  display: block;
  color: #8B6B43;
  text-decoration: none;
}

.dropdown .dropdown-menu li a:hover {
  background-color: #ECE7E2;
}

/* Show Dropdown on Hover */
.navigation ul li.dropdown:hover .dropdown-menu {
  display: block;
}

/* Navigation Styles for Mobile */
.navigation.active {
 display: flex;
 position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F4EBE5;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}
.navigation.active ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 20px; 
}
.navigation.active ul li:first-child a {
 text-decoration: underline;
}
.navigation.active .social-icons,
.navigation.active .appointment-button {
 position: absolute;
 bottom: 40px;
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
}
.navigation.active .social-icons {
 gap: 15px;
 margin-bottom: 20px;
}
.navigation.active .appointment-button {
 width: auto;
}

@media screen and (max-width: 1024px) {
.fixed-header {
 height: auto;
 padding: 10px;
 }
.header-content {
 flex-direction: row;
 justify-content: space-between;
 padding: 0;
 }
.logo {
 width: auto;
 justify-content: flex-start;
 padding: 10px;
 order: 1; 
 z-index: 0;

 
}
.logo img {
 width: 300px; 
 
 }
.hamburger-menu {
 display: flex; 
 position: relative;
 z-index: 1001;
 align-self: center;
 order: 2; 
 padding: 100px;
 }
.navigation {
 display: none; 
 }
.navigation.active {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #F4EBE5;
 z-index: 9999;
 padding: 20px;
 }


.navigation ul li {
 text-align: center;
 }
.navigation ul li a {
 font-size: 1.5em;
 text-decoration: none;
 color: #8B6B43;
    
 }.navigation ul li a:hover {
  text-decoration: underline;
  text-underline-offset: .4em;
}
.navigation ul li a.active {
    text-decoration: underline; /* Underline for the active link */
    text-underline-offset: .4em;
}
.navigation ul li:first-child a {
 text-decoration: underline;
 }

 .dropdown .dropdown-menu {
  display: none !important; 
  }
.header-right {
  display: none; 
  }
 .navigation.active .social-icons,
 .navigation.active .appointment-button {
 display: flex;
 flex-direction: column;
 align-items: center;
 position: absolute;
 bottom: 40px;
 width: 100%;
 }
.navigation.active .social-icons {
 gap: 15px;
 margin-bottom: 20px;
 }

.navigation.active .appointment-button {
 width: auto;
 }
}
@media screen and (max-width: 500px) {
 .logo img {
   width: 220px;
  }
}


@media screen and (max-width: 400px) {
.hamburger-menu {
 padding: 70px;
    }
}

/* Hack for displying at 80% zoom when system scaling is at 125% */
@media (-webkit-device-pixel-ratio: 1.25) {
  * {
    zoom: 0.8;
  }
}


/*welcome new */
.welcome {
  display: flex; 
  flex-direction: column;
  background-color: #ECE7E2;
  padding: 80px;
}

.bg-color {
  background-color: #fff;
  width: 100%; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
  display: flex; 
}

.welcome-text {
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  text-align: left; 
  padding-left: 10%; 
  padding-top: 5rem;
}

.welcome-text h1 {
  font-size: 92px; 
  margin: 60px 0; 
  line-height: 93.8px;
  font-weight: 500;
}

.welcome-text a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin-bottom: 5px;
  display: block; 
}

.welcome-text p {
  font-size: 27px; 
  margin: 10px 0; 
  color: #6F4E22;
  line-height: 34.4px;
}

.contact-info {
  display: flex; 
  flex-direction: column; 
  font-size: 16px; 
  margin-bottom: 20px;
  color: #6F4E22;
  line-height: 24px;
}

.contact-info > div {
  display: flex; 
  flex-direction: row; 
  align-items: center; 
}

.contact-info a {
  text-decoration: underline;
  text-underline-offset: .4em;
  margin-left: 5px; 
}

.contact-info div:not(:last-child) {
  margin-bottom: 5px; 
}

.button-container {
  display: flex; 
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 10px; 
  /*margin-top: 20px;*/
}

.button {
  padding: 10px 20px; /* Add padding for better appearance */
}

.dr-image {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: 0;
  margin-left: 0;
}
.dr-image .six.columns {
  width: 52%;
}
/* START Make the Dr image and welcome text in one column when page is max 650px wide 
@media screen and (max-width: 650px) {
  .welcome .bg-color{
    flex-direction: column;
  }
  .welcome .bg-color div{
    width: 100%;
  }
  .welcome .bg-color div img{

  }
}
END*/
.drimage {
  width: 100%; /* Ensure it takes full width */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; 

}
/* Image width fix*/
.six.columns.dr-image{

  width: 52%;
}


.welcome-text .button-container {
  padding-bottom: 20px; /* Add padding below the buttons */
}
@media screen and (max-width: 1920px) {
.dr-image {
 padding: 2% 0 0 0;
  }
.welcome-text h1 {
  font-size: 80px; 
  margin: 60px 0; 
  line-height: 83.8px;
}
}
@media screen and (max-width: 1665px) {
.dr-image {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 2% 0 0 0; /* Adjust padding as needed */
 }/*
.drimage {
 width: 100%; /* Ensure it takes full width */
/* height: 38vh; /* Set height to fill viewport height, adjust if needed */
/* object-fit: cover; /* Cover the container without cutting off */
 /*}*/
.welcome-text h1 {
  margin: 50px 0; 
}
.welcome-text {
 padding-left: 6%;
}
}

@media screen and (max-width: 1440px) {
.welcome-text{
padding-top: 7%;
padding-left: 8%
}
.welcome-text h1 {
font-size: 78px;
 margin: 50px 0;
}
.dr-image {
 display: flex;
 justify-content: center;
 align-items: normal;
 padding: 1% 0 0 0;
 }
.button-container{
  margin-bottom: 60px;
  }
}

@media screen and (max-width: 1280px) {
 .welcome-text h1 {
    font-size: 66px;
    }
}
@media screen and (max-width: 1180px) {
 .welcome-text h1 {
    font-size: 56px;
    }
 .button-container {
    display: flex;
    flex-direction: column; /* Stacks buttons vertically */
    align-items: flex-start;
    text-align: center;
  }
}
@media screen and (max-width: 1024px) {
.welcome{
 padding:50px;    
    }
.welcome-text{
 padding-top:14%;    
    }

.welcome-text h1 {
 font-size: 48px;
 line-height: 58px;
}
 .button-container {
    display: flex;
    flex-direction: column; /* Stacks buttons vertically */
    align-items: flex-start;
    text-align: center;
  }

   a.button,
  button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
  display: flex; /* Enables flex centering */
   justify-content: center; /* Centers text horizontally */
     align-items: center;
    width: 100%; /* Makes buttons take full width within container */
    max-width: 250px; /* Restricts maximum button width on small screens */
    padding: 15px 20px; /* Adjust padding for a better look */
  }
.dr-image {
  padding: 5% 0 0 0;
    }
.all-services-button{
display: inline-block;
    }
}
@media screen and (max-width: 900px) {
    .welcome {
        padding: 60px;  /* Increase padding slightly for medium screens */
    }
    .welcome-text {
        padding-top: 16%;
    }
}
@media screen and (max-width: 800px) {
.welcome-text p {
    font-size: 21px;
    }
.welcome-text{
 padding-top:20%;    
    }
}

@media screen and (max-width: 768px) {
.welcome{
 padding:25px;    
    }
.welcome-text{
 padding-top:22%;    
    }

.welcome-text h1 {
 font-size: 42px;
 line-height: 55px;
}
.dr-image {
 display: flex;
 
 justify-content: center;
 align-items: normal; 
 padding: 10% 0 0 0;
 }
}
@media screen and (max-width: 650px) {
.welcome-text p {
  font-size: 16px;
}
.welcome-text h1 {
        font-size: 37px;
    }
.welcome-text{
 padding-top:28%;    
    }
}
@media (min-width: 550px) {
 .dr-image .six.columns {
    width: 50%;
  }
}
@media screen and (max-width: 500px) {
.welcome{
 padding:25px; 
 }
.welcome-text{
 padding-top:34%;    
 }
.bg-color{
flex-direction: column;
}
.welcome-text h1 {
 font-size: 58px;
 line-height: 62px;
 margin: 20px 0;
}
.dr-image {
 padding: 4%;
 }
.button-container {
 margin-bottom: 8px;
}
.six.columns.dr-image{

  width: 100%;
}

}
@media screen and (max-width: 495px) {
.welcome-text{
 padding-top:40%;    
    }
}
@media screen and (max-width: 425px) {
/*.welcome-text{
 padding-top:0%;    
    }*/
.welcome-text h1 {
    font-size: 48px;
    line-height: 62px;
    margin: 20px 0;
}
.dr-image {
 padding: 4%;
  }
.welcome-text p {
    font-size: 18px;
}
    .six.columns.dr-image{

  width: 100%;
}
}

/* Office Intro
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.officeintro{
 background-color: #ECE7E2;
 display: flex;
 align-content: center;
 flex-direction: row;
}
.office {
 display: flex;
 flex-direction: row;
 align-items: center;
 width: 100%;
  background-color: #ECE7E2;
 justify-content: space-between;
}

.introimage {
 width: 100%;
 padding-left: 0;
 object-fit: cover;
 display: block;
  height: auto;
}
.intro-text {
 flex: 1; 
 display: flex;
 flex-direction: column;
 justify-content: center; 
 text-align: left;
 text-wrap: balance;
   padding: 20px;
margin-top: 4%;
}
.intro-text h1{
 font-size: 27px;
 line-height: 34.4px
 }
.intro-text h4{
 font-size: 64px;
 margin-top: 10px;
 margin-bottom: 45px;

}
.intro-text p {
 font-size: 27px;
 text-decoration: underline;
 text-underline-offset: 0.4em;
 color: #6F4E22;
  line-height: 34.4px;
}
.image-container {
  position: relative; }
/*
.fluidImageOverlay {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  mix-blend-mode: normal; 
  opacity: 0; 
}*/
/*
@media screen and (max-width: 1920px) {
.introimage {
 height: 80vh; 
 }
 }

@media screen and (max-width: 1665px) {
.introimage {
 height: 40vh;
}
}*/
/*
@media screen and (max-width: 1440px) {
.introimage {
  height: 56vh; 
}
 }

@media screen and (max-width: 1400px) {
.introimage {
 height: 64vh; 
  }
 }*/
@media screen and (max-width: 1600px) {
  .office {
    flex-direction: row; /* Keep side-by-side layout */
  }

  .introimage {
    width: 100%; 
    height: 60vh;/* Image still takes full width */
  }

  .intro-text {
    padding-left: 5%;
    padding-top: 1%;
    margin:0;
  }
}
@media screen and (max-width: 1440px) {
  .office {
    flex-direction: row; /* Keep side-by-side layout */
  }

  .introimage {
    width: 100%;
    height: 50vh;
  }

  .intro-text {
    padding-left: 5%;
    padding-top: 1%;
    margin: 0;
  }
.intro-text h4{
 font-size: 54px;
}
.intro-text p {
  font-size: 24px;
  }
}
@media screen and (max-width: 1280px) {
.intro-text h1 {
  font-size: 22px;
  }
.intro-text h4 {
  font-size: 50px;
  }
.intro-text p {
  font-size: 24px;
  }
}
@media screen and (max-width: 1200px) {
.intro-text h4{
 font-size: 44px;
}
.intro-text p {
  font-size: 21px;
 line-height: 14px;
 }
}
@media screen and (max-width: 1100px) {
.intro-text h1 {
        font-size: 20px;
    }
}
@media screen and (max-width: 1024px) {
  .office {
    flex-direction: row; /* Stack image and text vertically */
   
  }

  .introimage {
    width: 100%; /* Full width on tablet */
    height: 40vh; /* Maintain relative height for the image */
    object-fit: cover; /* Ensure the image fits well */
  }

  .intro-text {
     padding-left: 5%;
   
  }

  .intro-text h1 {
    font-size: 22px;
  }

  .intro-text h4 {
    font-size: 36px;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .intro-text p {
    font-size: 18px;
  }
}

/*
@media screen and (max-width: 1280px) {
.intro-text h1 {
  font-size: 22px;
  }
.intro-text h4 {
  font-size: 50px;
  }
.intro-text p {
  font-size: 24px;
  }
.introimage {
 height: auto; 
  }
}
@media screen and (min-width: 1024px) {
.intro-text h1 {
  font-size: 25px;
  }
}
@media screen and (max-width: 1024px) {
.office {
 flex-direction: row; 
}
.intro-text {
 order: 1; 
 padding-left: 1%; 
 padding-top: 5%; 
}
.intro-text h4{
 font-size: 54px;
}
.introimage {
 order: 2; 
 /*height: 40vh;*/ 
 

@media screen and (max-width: 950px) {
.intro-text h1 {
 font-size: 24px;
 }
 .intro-text h4 {
  font-size: 34px;
 }
 .intro-text p {
  font-size: 22px;
 }
    /*
 .introimage {
   height: 112vh; 
    }*/
}
@media screen and (max-width: 800px) {
.office {
 flex-direction: row; 
}
.intro-text {
 order: 1; 
 padding-left: 5%; 
 
}
.intro-text h1 {
 font-size: 24px;
 }
.intro-text h4{
 font-size: 44px;
 margin-top: 20px;
 margin-bottom: 20px;
}
.intro-text p {
 font-size: 21px;
}
.introimage {
 order: 2; 
 /*height: 35vh; */
 
 }
}
@media screen and (max-width: 768px) {

.intro-text h1 {
 font-size: 22px;
 line-height: 28px
 }
.intro-text h4{
 font-size: 34px;
 margin-top: 20px;
 margin-bottom: 20px;
}
.intro-text p {
 font-size: 18px;
}
.introimage {
 order: 2; 
 /*height: 46vh;*/ 
 
 }
}
@media screen and (max-width: 650px) {
.intro-text h1 {
 font-size: 20px;
    }
.intro-text h4{
 font-size: 30px;
 margin-top: 20px;
 margin-bottom: 20px;
}
}
@media screen and (max-width: 600px) {
.intro-text p {
 font-size: 17px; 
 }

}
@media screen and (max-width: 580px) {
.intro-text p {
 font-size: 16px; 
 }
}
@media screen and (max-width: 550px) {
  .intro-text h1 {
    font-size: 18px; /* Further reduce font size for very small screens */
  }
 .office {
 flex-direction: column-reverse; 
 }
  .intro-text h4 {
    font-size: 28px; /* Keep subheading size smaller */
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .intro-text p {
    font-size: 14px; /* Reduce paragraph text size */
  }

  .introimage {
    width: 100%; /* Full width of the container */
    height: 40vh; /* Set the image height relative to the viewport */
    object-fit: cover; /* Ensure the image stays proportionate */
    margin-top: 10px; /* Small margin above the image */
  }
}
@media screen and (max-width: 500px) {
 .office {
 flex-direction: column-reverse; 
 }
.intro-text {
 padding-left: 5%; 
 padding-top: 5%; 
 padding-bottom: 0; 
}
.intro-text h1 {
 font-size: 22px; 
 }
.intro-text h4 {
 font-size: 36px; 
 margin-top: 15px;
 margin-bottom: 15px;
 }
.intro-text p {
 font-size: 18px; 
 }
.introimage {
 width: 100%; 
 height: 41vh;
 object-fit: cover; 
 margin-top: 10px; 
 }
}
/* Dentists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dentists {
 text-align: center;
 }
.dentists h2{
 font-size: 64px;
 line-height: 96px;
}
.dentists p {
 font-size: 19px;
 line-height: 0;
}
.dentists-flex {
 display: flex;
 align-items: stretch;
 justify-content: space-between;
}
.dentists-box {
 background: #fff;
 padding: max(20px,2vw);
 flex: 1;	
 color: #6F4E22;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 margin-right: 20px;
 transition: 400ms;
}
.dentists-box a {
 color: #fff;
 text-decoration: none;
}
.dentists-image{
 width: 350px;
 height: 350px;
 border-radius: 50%;
 margin-bottom: 4%;
 overflow: hidden;
 object-fit: cover;
 object-position: top;

 }
.services-image img{
 width: 100%;
 height: auto;
 object-fit: cover;
}

@media screen and (max-width: 1440px) {
.dentists h3{
 font-size: 48px;
}
.dentists p {
 font-size: 22px;
  }
}
@media screen and (max-width: 1024px) {
.dentists {
 text-align: center;
 }
.dentists h2{
 font-size: 48px;
}
.dentists h3{
 margin-bottom: 10px;
  font-size: 40px;
}
.dentists p {
 font-size: 19px;
 line-height: 1.5;
}
.dentists-box {
 padding: 20px;
 margin-right: 0px;
 margin-bottom: 20px;
 width: 100%;
 max-width: 400px;

}
.dentists-image{
 width: 250px;
 height: 250px;
 margin-bottom: 20px;
}
}
@media screen and (max-width: 800px) {
.dentists h3 {
 margin-bottom: 10px;
 font-size: 36px;
 }
.dentists p {
 font-size: 24px;
}
.dentists-image{
 width: 200px;
 height: 200px;
 }
}
@media screen and (max-width: 768px) {
.dentists h3 {
 margin-bottom: 10px;
 font-size: 32px;
 }
.dentists p {
 font-size: 20px;
}
}
@media screen and (max-width: 768px) {
  .doctor-name::after {
    content: "\00a0\00a0\00a0\00a0"; /* Adds 4 non-breaking spaces after the name */
  }
}
@media screen and (max-width: 500px) {
.dentists-flex {
 display: block;
 align-items: center;
}
  .dentists-flex > * {
        margin: 0 auto; /* Center align child elements */
    }
.dentists h2 {
 font-size: 42px;
 padding-top: 2%
}
}
/*Remove spacing-----------------------------------*/
.hide-break{
  display:none;
}

@media(min-width: 501px){
  .hide-break{
    display:block;
  }
}

/**/
  
/* Services
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.services {
 text-align: center;	
 padding:20px;
 }
.heading {
 text-align: center;
 margin-bottom: 20px;
 line-height: 96px;
}
.services h2{
 padding-bottom: 70px;
 font-size: 64px;
}
.services p {
 color: #000;
}
.services-flex {
 display: flex;
 align-items: stretch;
 justify-content: space-between;
 
}
.service-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: max(20px, 2vw);
  margin-right: 20px;
  background: #ECE7E2;
  height: auto;
 
}

.service-box a {
 color: #6F4E22;
 text-decoration: none;
}
.services h3{
 font-size: 35px;
}
.services p{
 font-size: 19px;
}
.services-image{
 width: 250px;
 height: 250px;
 border-radius: 50%;
 overflow: hidden;
 margin-bottom: 10px;
 object-fit: cover;
}
.services-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}
@media screen and (max-width: 1665px) {
.services h2 {
 padding-bottom: 40px;
 }
}
@media screen and (max-width: 1100px) {
.services-flex {
 display: flex;
 align-items: stretch;
 justify-content: space-between; 
 padding: 0 10px; 
}
.service-box {
 flex: 1 1 calc(25% - 15px); 
 max-width: calc(25% - 15px);
 box-sizing: border-box;
 margin-right: 0; 
 margin-bottom: 20px;
 background: #ECE7E2;
 padding: 10px; 
 
 }
.services {
 padding:0;
 }
.services-flex > .service-box:last-child {
 margin-right: 0;
 }
.services-image {
 width: 180px; 
 height: 180px; 
}
.services h2 {
 font-size: 36px; 
 padding-bottom: 20px; 
}
.services h3 {
 font-size: 28px; 
}
.services p {
 font-size: 16px; 
 }
}

@media screen and (max-width: 767px) {
 .services-flex {
  flex-direction: column; 
  padding: 0 15px; 
}
.service-box {
 flex: 1 0 100%;
 max-width: 100%; 
 margin-bottom: 20px; 
 padding: 15px; 
 background: #ECE7E2;
}
.services-image {
 width: 250px;
 height: 250px;
 border-radius: 50%;
 overflow: hidden;
 margin-bottom: 10px;
 object-fit: cover;
}

.services h2 {
 font-size: 64px;
 padding-bottom: 70px;
}
.services h3 {
 font-size: 35px;
}
.services p {
   font-size: 19px;
}
}
@media screen and (max-width: 768px) {
.services-image {
 width: 150px; 
 height: 150px; 
}
.services h2 {
 font-size: 36px; 
 padding-bottom: 10px; 
}
.services h3 {
 font-size: 22px; 
}
.services p {
 font-size: 16px; 
 }
}
@media screen and (max-width: 500px) {
.services-image {
 width: 300px; 
 height: 300px; 
}
.services h2 {
 font-size: 44px;
 padding-bottom: 70px;
}
.services h3 {
 font-size: 35px;
}
.services p {
   font-size: 19px;
}
}
/* Patient Testimonial
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.testimonial-container {
 padding: 20px;
 border-radius: 10px;
 position: relative;
 max-width: 1400px;
 margin: 0 auto;

}
.testimonial-container h2{
 padding-top: 80px;
 font-size: 64px;
 line-height: 96px;
}
.testimonial-slider-container {
  position: relative;
  padding-bottom: 60px;
}
.testimonial-slider {
 position: relative; 
 overflow: hidden;
}
.testimonial-row {
 display: flex;
 width: 100%;
 transition: transform 0.5s ease-in-out;
}
.testimonial {
  height: 400px; 
  width: 332px; 
  overflow: hidden; 
  display: flex-start;
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  box-sizing: border-box;
  padding: max(20px, 2vw);
  text-align: center;
  background-color: #ECE7E2;
  margin: 10px;
  max-width: none;
  flex-shrink: 0; 
  
}
.testimonial p {
 color: #5d492a;
 margin-bottom: 10px;
 font-size: 25px;
 line-height: 29.3px;

}
.testimonial span {
 display: block;
 margin-top: 10px;
 color: #000;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-40%);
  background-color:#5d492a;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  user-select: none;
  border-radius: 50%; 
  font-size: 24px; 
  width: 40px; 
  height: 40px; 
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.left-arrow {
  left: -70px;
  transform: translateX(-100%) translateY(-50%);
}

.right-arrow {
  right: -70px;
  transform: translateX(100%) translateY(-50%);
}
@media (max-width: 1665px) {
.testimonial-container h2 {
 padding-top: 20px;
 }
}
@media (max-width: 1440px) {
.left-arrow {
left: 75px; 

}
.right-arrow {
right: 60px; 

}
}
@media screen and (max-width: 1024px) {
.left-arrow {
left: 60px; 

}
.right-arrow {
right: 60px; 

}
}
@media screen and (max-width: 800px) {
.testimonial {
    height: 350px;
    }
}

@media (max-width: 600px) {
.testimonial-row {
 display: flex;
  width: 100%; 
}
.testimonial {
  width: 250px;
  height: 300px;
}
.arrow {
 position: absolute;
 bottom: -30px; 
 transform: none; 
 top: 70%;
}
.left-arrow {
 left: 40%; 
  transform: translateX(-50%) translateY(100%); 
  }
 .right-arrow {
  right:40%; 
   transform: translateX(50%) translateY(100%); 
 }
 }
@media screen and (max-width: 600px) {
.arrow {
top: 76%;
}
}
@media screen and (max-width: 500px) {
.testimonial-container h2 {
  font-size: 53px;
line-height: 52px
 }
.testimonial p {
 font-size: 18px;
  line-height: 22px;
}
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
  background-color: #fff;
  margin-bottom: 0;
  display: flex; 
  justify-content: center;
  align-items: center; 
  flex-direction: column; /* Stack items on smaller screens */
  margin: 0.5%;
  padding: 2% 2% 2% 1%;
 }
.footer-container {
  display: flex;
    flex-wrap: wrap; 
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  width: 100%;
 
}
.map {
  width: 100%;
  height: auto;
}
.footer-hours{
  margin-left: 60px;
}
.footer-location {
  margin-left: 30px;
  
}
.footer-hours {
  margin-left: 0;
  margin-right: 0;
  padding-left: 60px;
}

.footer-location p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.footer a,
.footer-location a {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.footer a:hover {
  transition: 0.2s;
}

.footer ul {
  list-style-type: none;
  line-height: 1.8rem;
  padding-top: 2%;
}

.footer td {
  border-bottom: none;
  padding: 2px 10px 2px 0px;
}

.footer-table {
  line-height: 2;
}

.footer-table td {
  
}
.footer h4{
 color: #000;
}
.map-container {
  filter: grayscale(100%);
  /* Optional: Add a transition for a smooth effect when toggling */
  transition: filter 0.5s ease;
  /* Set the container dimensions to match the iframe */
  width: 100%;
  height: 350px;
}

/* Optional: Add hover effect to remove grayscale */
.map-container:hover {
  filter: grayscale(0%);
}

@media screen and (max-width: 1024px) {
.footer {
 padding: 4%;
 }
.footer-hours {
 padding-left: 50px;
}
.footer h4{
line-height: 2rem;

}
}
@media screen and (max-width: 950px) {
.footer-hours {
 padding-left: 20px;
 }
}
@media screen and (max-width: 800px) {
.footer-hours {
 padding-left: 16px;
 }
}

@media screen and (max-width: 768px) {
.footer-hours,
.footer-location {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
  }
.footer-table td {
  font-size: 0.8em; 
  }
.footer ul {
 line-height: 1.5rem;
 padding-top: 1%;
  }
.footer {
 padding: 15px;
  }
.footer-hours {
padding-left: 10px;
}
.footer-table {
  font-size: 1.2em; 
}
}
@media screen and (max-width: 650px) {
.footer-table {
  font-size: 0.8em; 
}
}
@media screen and (max-width: 500px) {
 .footer-container {
  padding: 0 10px; 
  display: block;
  }
 .footer-table td {
 font-size:1.5em;
  }
 .footer ul {
  line-height: 1.4rem;
 }
 .footer {
  padding: 10px;
  padding-top: 6%;
  }
.footer-hours,
.footer-location {
 padding-top: 20px;
  }
}

/* Post footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */    
.post-footer{
background-color:#ECE7E2;
padding:0.5rem;
    }
.uponline{
text-align: end;
}
.uponline img{
 max-width: 100%;
 width: 150px;
}
@media screen and (max-width:1400px){
.uponline{
text-align: end;
}
.uponline img{
 max-width: 100%;
 width: 150px;
}
    }
@media screen and (max-width:1100px){
.uponline{
padding: 0 4% 0 0;
}
.copy{
 padding: 0 0 0 4%;
}
}

/* Internal
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.internalintro{
 background-color: #ECE7E2;
 display: flex;
 align-items: center; /* Center items vertically */
 align-content: center;
 padding: 4% 0 0 0; 
 margin: 0; 
 /*text-wrap: wrap;*/
 width: 100%;

}
/*
.internal {
 display: flex;
 /*flex-direction: row;
 align-items: center;*/
 /*width: 100%;
}*/
.internal {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Allow items to stretch to full height */
    width: 100%;
    margin: 0;  
}
/*
.internalimage {
 width: 100%;
 padding-left: 0;
 object-fit: cover;
 height: 90vh;
 display: block;
}*/
.internalimage {
    width: 100%; /* Full width of the column */
    height: 100%; /* Full height of the column */
    object-fit: cover; /* Cover the entire area without leaving gaps */
    display: block;
    margin: 0; /* Remove any margins */
    padding: 0; /* Remove any padding */
}
.internal-text {
 flex: 1; 
 display: flex;
 flex-direction: column;
 justify-content: center; 
 text-align: left;
 /*text-wrap: balance;*/
 /*padding: 10% 4% 2% 10%;*/
 /*padding: 4% 8%;*/
 padding: 40px 10px 40px 120px;
 margin: 0;
}
.internal-text h1{
 font-size: 27px;
 }
.internal-text h4{
 font-size: 64px;
 margin: 10px 0; /* Adjust margin for spacing */
    
}
.internal-text p {
 font-size: 27px;
 
 color: #6F4E22;
}
.image-container {
  position: relative; }
@media screen and (max-width: 1920px) {
.internal-text {
padding: 60px 10px 60px 120px;
}
.internal-text h4{
 font-size: 54px;
}
}
@media screen and (max-width: 1440px) {
.internalintro {
 padding: 8% 0 0 0;
 }/*
.internal-text {
 padding: 10px 2px 2px 60px;
}*/
.internal-text h4 {
  font-size: 48px;
}
.internal-text p {
 font-size: 25px;
}
.internal-text {
 padding: 30px 10px 30px 120px;
}
}

@media screen and (max-width: 1250px) {

.internal-text h4 {
  font-size: 40px;
}
.internal-text p {
 font-size: 22px;
}
}
@media screen and (max-width: 1100px) {
.internalintro {
 padding: 14% 0 0 0;
 }
.internal-text{
 padding: 20px 10px 20px 110px;
 }
.internal-text h4 {
  font-size: 40px;
}
.internal-text p {
 font-size: 18px;
}
}
@media screen and (max-width: 1024px) {
.internal-text p {
 font-size: 16px;
}

}
@media screen and (max-width: 768px) {
.internalintro {
 padding: 20% 0 0 0;
 }
.internal-text h4 {
  font-size: 22px;
}
.internal-text p {
 font-size: 14px;
}
.internal-text{
 padding: 20px 10px 20px 38px;
 }
}
@media screen and (max-width: 500px) {
 .internalintro {
  flex-direction: column; 
  align-content: center;
  padding: 30% 0 0 0;
}
.internal {
 flex-direction: column; 
  align-items: center;
    }
.internal-text h4 {
  font-size: 36px;
}
.internal-text p {
 font-size: 18px;
}
}
@media screen and (max-width: 450px) {
 .internalintro {
  flex-direction: column; 
  align-content: center;
  padding: 36% 0 0 0;
}
}
/*
@media screen and (max-width: 2000px) {
.internal-text {
 padding: 4% 4% 4% 6%; 
}
}
@media screen and (max-width: 1440px) {
.internalimage {
 height: auto; /* Maintain full image aspect ratio */
 /*max-height: 66vh;
}
.internal-text h4 {
  font-size: 50px;
}

}
@media screen and (max-width: 1024px) {
  .internalintro {
    background-color: #ECE7E2;
    display: flex;
    flex-direction: column;
    align-content: center;
    padding-top: 20%;
    text-wrap: wrap;
  }
  .internal {
    flex-direction: row; 
    align-items: center;
    width: 100%;
  }
  .internalimage {
    width: 100%;
    padding-left: 0;
    object-fit: cover;
    height: 50vh; 
    display: block;
  }
  .internal-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    text-wrap: balance;
    padding: 4% 8% 0 8%; 
  }
  .internal-text h1 {
    font-size: 27px; 
  }
  .internal-text h4 {
    font-size: 37px; 
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .internal-text p {
    font-size: 20px; 
    color: #6F4E22;
    text-wrap: wrap;
  }
  .image-container {
    position: relative;
    width: 100%;
  }
}

@media screen and (max-width: 800px) {
  .internalintro {
    background-color: #ECE7E2;
    display: flex;
    flex-direction: column;
    align-content: center;
    padding-top: 30%;
    text-wrap: wrap;
  }
  .internal {
    flex-direction: row; 
    align-items: center;
    width: 100%;
  }
  .internalimage {
    width: 100%;
    padding-left: 0;
    object-fit: cover;
    height: 50vh; 
    display: block;
  }
  .internal-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    text-wrap: balance;
    padding: 4% 8% 0 8%; 
  }
  .internal-text h1 {
    font-size: 22px; 
  }
  .internal-text h4 {
    font-size: 26px; 
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .internal-text p {
    font-size: 16px; 
    color: #6F4E22;
    text-wrap: wrap;
  }
  .image-container {
    position: relative;
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .internalintro {
    background-color: #ECE7E2;
    display: flex;
    flex-direction: column; 
    align-content: center;
    padding-top: 36%;
    text-wrap: wrap;
  }
  .internal {
    flex-direction: column; 
    align-items: center;
    width: 100%;
  }
  .internalimage {
    width: 100%;
    padding-left: 0;
    object-fit: cover;
    height: 35vh; 
    display: block;
    margin-top: 10px; 
  }
  .internal-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    text-wrap: wrap;
    padding: 5%; 
  }
  .internal-text h1 {
    font-size: 20px; 
  }
  .internal-text h4 {
    font-size: 28px; 
    margin-top: 6px;
    margin-bottom: 6px;
  }
  .internal-text p {
    font-size: 16px; 
    color: #6F4E22;
    text-wrap: wrap;
  }
  .image-container {
    position: relative;
    width: 100%;
  }

}
*/

/* Meet the Team
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.meettheteam {
 text-align: center;
 }
.meettheteam h2{
 font-size: 64px;
}
.meettheteam p {
 font-size: 19px;
 line-height: 0;
}
.meettheteam-flex {
 display: flex;
 align-items: stretch;
 justify-content: space-between;
}
.placeholder-image {
  width: 350px;
  height: 350px;
  background-color: #ffffff;
  border-radius: 50%;
  margin-bottom: 4%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.placeholder-text {
  color: #999;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}


/*
.meettheteam-flex.single-member {
  justify-content: center;
  max-width: 600px; /* or 500px */
  /*margin: 0 auto;
}*/
.meettheteam-box {
 background: #ECE7E2;;
 padding: max(10px,0vw);
 flex: 1;	
 color: #6F4E22;
 display: flex;
    
 align-items: center;
 justify-content: center;
 flex-direction: column;
 margin: 0 20px 0 20px;
 transition: 400ms;
}
.meettheteam-box a {
 color: #6F4E22;
 text-decoration: none;
}
.meettheteam-image{
 width: 350px;
 height: 350px;
 border-radius: 50%;
 margin-bottom: 4%;
 overflow: hidden;
 object-fit: cover;
 object-position: top;

 }
.meettheteam-image img{
 width: 100%;
 height: auto;
 object-fit: cover;
}
/*
@media screen and (max-width: 1440px) {

.meettheteam-box {
    margin: 0 20px 0px 0px;

}
}*/
@media screen and (max-width: 1024px) {
.meettheteam {
 text-align: center;
 }
.meettheteam h2{
 font-size: 48px;
}
.meettheteam h3{
 margin-bottom: 10px;
}
.meettheteam p {
 font-size: 19px;
 line-height: 1.5;
}
.meettheteam-box {
 padding: 20px;
 margin-right: 0px;

 margin-bottom: 20px;
 
 max-width: 400px;

}
.meettheteam-flex {
justify-content: center;
}
.meettheteam-image{
 width: 250px;
 height: 250px;
 margin-bottom: 20px;
}
}
@media screen and (max-width: 800px) {
.meettheteam h3 {
 margin-bottom: 10px;
 font-size: 2.5rem;
 }
.meettheteam p {
 font-size: 15px;
}
.meettheteam-image{
 width: 200px;
 height: 200px;
 }
.meettheteam-box {
 padding: 10px;
 margin-right: 20px;
 margin-left: 20px;
}
}
@media screen and (max-width: 500px) {
.meettheteam-flex {
 display: block;
}
.meettheteam h2 {
 font-size: 42px;
}
.meettheteam-box{
  max-width: 100%;
}
}
/* Team Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team {
 display: flex; 
 flex-direction: column;
 background-color: #ECE7E2;
 padding: 100px;
 }
.team-text h1 {
 font-size: 68px; 
 margin: 60px 0; 
 text-align: left; 
 line-height: 1.1;
 }
.team-text p {
 font-size: 20px;
 text-align: left;
 color: #6F4E22;

 }
.team-image {
 display: flex; 
 justify-content: center; 
 align-items: center; 
 }
.teamimage {
 max-width: 100%; 
 height: auto;
}

@media screen and (max-width: 1440px) {
.team-image img {
 object-fit: cover;
 height: 60vh;
 }
}
@media screen and (max-width: 1024px) {
.team-image {
 width: 100%; 
}
.team-image img {
 width: 100%; 
 display: block;
 padding-left: 0;
 object-fit: cover;
 height: 101vh;
 
}
}
@media screen and (max-width: 800px) {
.team-image {
 width: 100%; 
}
.team-image img {
 width: 100%; 
 display: block;
 padding-left: 0;
 object-fit: cover;
 height: 96vh;
}
}
@media screen and (max-width: 500px) {
.team-image img {
 height: 50vh;
 width: calc(100% - 40px);
 padding: 20px;
 }
}


/* Services Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dentalservices {
 
 text-align: center;	
}
.dentalservices-heading {
 text-align: center;
 margin-bottom: 10px;
}
.dentalservices h3{
 font-size: 24px;
 line-height: 1.8;
}
.dentalservices h2{
 padding-bottom: 70px;
 padding-top: 70px;
 font-size: 64px;
}
.dentalservices p {
 font-size: 18px;
 color: #000;
 margin-bottom: 20px;
}
.dentalservices-flex {
 display: flex;
 align-items: wrap;
   gap: 10px;
 justify-content: center;
 padding: 0% 2% 0 2%;
}
.dentalservice-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  align-items: center;
  padding: max(20px, 2vw);
 /* margin-right: 20px;*/
  background: #ECE7E2;
  height: auto;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

.dentalservice-box a {
 color: #6F4E22;
 text-decoration: none;
}
.learn-more-button {
  font-size: 14px;
  margin-top: auto;
}
a.learn-more-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
a.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  background-color: #8A6B3B;
  outline: 0;
  border: none; 
}
.dentalservices-image{
 width: 350px;
 height: 350px;
 border-radius: 50%;
 overflow: hidden;
 margin-bottom: 10px;
 object-fit: cover;
}
.dentalservices-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

@media screen and (max-width: 1440px) {
.dentalservices-flex {
 padding: 0px 20px 0px 20px; 
}
.dentalservices h2 {
 font-size: 56px; 
 padding: 60px 0; 
}
.dentalservices h3 {
 font-size: 22px; 
}
.dentalservices p {
font-size: 17px; 
}
.dentalservice-box {
flex: 1 1 calc(30% - 20px); 
/*margin-right: 10px; */
padding: 1%;
}
.dentalservices-image {
 width: 300px; 
 height: 300px; 
 }
}
@media screen and (max-width: 1400px) {
.dentalservices h2 {
 font-size: 52px; 
 padding: 50px 0; 
 }
.dentalservices h3 {
 font-size: 28px; 
}
.dentalservices p {
 font-size: 16px; 
}
.dentalservice-box {
 flex: 1 1 calc(33% - 20px); 
}
.dentalservices-image {
 width: 280px; 
 height: 280px; 
 }
}

@media screen and (max-width: 1200px) {
.dentalservices h2 {
 font-size: 48px; 
 padding: 40px 0; 
 }
.dentalservices h3 {
 font-size: 28px; 
}
.dentalservices p {
font-size: 15px; 
}
.dentalservice-box {
 flex: 1 1 calc(50% - 15px); 
 margin-right: 0; 
 margin-bottom: 20px; 
}
.dentalservices-image {
 width: 250px; 
 height: 250px; 
 }
}
@media screen and (max-width: 1100px) {
.dentalservices-flex {
 display: flex;
 align-items: stretch;
 justify-content: space-between; 
 padding: 0px 10px 0px 10px; 
}
.dentalservice-box {
 flex: 1 1 calc(25% - 15px); 
 max-width: calc(25% - 15px);
 box-sizing: border-box;
 margin-right: 0; 
 margin-bottom: 20px;
 background: #ECE7E2;
 padding: 10px; 
 }

.dentalservices-flex > .dentalservice-box:last-child {
 margin-right: 0;
 }
.dentalservices-image {
 width: 180px; 
 height: 180px; 
}
.dentalservices h2 {
 font-size: 36px; 
 padding-bottom: 20px; 
padding-top: 88px;
 
}
.dentalservices h3 {
 font-size: 28px; 
}
.dentalservices p {
 font-size: 16px; 
 }
}
@media screen and (max-width: 1024px) {
.dentalservices h2 {
 padding-top: 95px;
 }
}
@media screen and (max-width: 767px) {
 .dentalservices-flex {
  flex-direction: column; 
  padding: 0 15px; 
}
.dentalservice-box {
 flex: 1 0 100%;
 max-width: 100%; 
 margin-bottom: 20px; 
 padding: 15px; 
 background: #ECE7E2;
}
.dentalservices-image {
 width: 250px;
 height: 250px;
 border-radius: 50%;
 overflow: hidden;
 margin-bottom: 10px;
 object-fit: cover;
}

.dentalservices h2 {
 font-size: 64px;
 padding-bottom: 70px;
         padding-top: 105px;
}
.dentalservices h3 {
 font-size: 35px;
}
.dentalservices p {
   font-size: 19px;
}
}
@media screen and (max-width: 768px) {
.dentalservices-image {
 width: 150px; 
 height: 150px; 
}
.dentalservices h2 {
 font-size: 36px; 
 padding-bottom: 20px;
 padding-top: 124px;
}
.dentalservices h3 {
 font-size: 22px; 
}
.dentalservices p {
 font-size: 16px; 
 }
.learn-more-button {
  font-size: 12px;

}
}
@media screen and (max-width: 500px) {
.dentalservices-image {
 width: 300px; 
 height: 300px; 
}
.dentalservices h2 {
 font-size: 40px;
padding-bottom: 25px;
padding-top: 146px;
    }
.dentalservices h3 {
 font-size: 24px;
}
.dentalservices p {
   font-size: 18px;
}
}
/* Services Drop Down
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.accordion {
 color: #000;

}
.accordion a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 2rem 1rem 1rem 1rem;
  font-size: 27px;
  border-bottom: 1px solid #000;
  
  color: #000;

}

/*remove the + or - for the links in accordion text*/
.accordion p a::after {
  content: '';
}

.accordion a:hover,
.accordion a:hover::after {
  cursor: pointer;
  color: #6F4E22;
}

.accordion a.active {
  color: #000;
  border-bottom: none;
}

.accordion a::after {
  content: '\002B';
  position: absolute;
  float: right;
  right: 1rem;
  font-size: 18px;
  color: #000;
  padding: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
}

.accordion a.active::after {
  content: '\2212';
  color: #000;
}

.accordion .content {
  opacity: 0;
  padding: 0 1rem;
  max-height: 0;
  border-bottom: 1px solid #000;
  overflow: hidden;
  clear: both;
  -webkit-transition: all 0.2s ease 0.15s;
  -o-transition: all 0.2s ease 0.15s;
  transition: all 0.2s ease 0.15s;
  border-bottom: 1px solid #000;
}

.accordion .content.active {
  opacity: 1;
  padding: 1rem;
  max-height: 100%;
  -webkit-transition: all 0.35s ease 0.15s;
  -o-transition: all 0.35s ease 0.15s;
  transition: all 0.35s ease 0.15s;
}
.servicesintro{
 background-color: #fff;
 display: flex;
 align-content: center;
 padding-top: 4%;
 text-wrap: wrap;
}
.services {
 display: flex;
 flex-direction: row;
 align-items: center;
 width: 100%;
}
.services-text {
 flex: 1; 
 display: flex;
 flex-direction: column;
 justify-content: center; 
 text-align: left;
 text-wrap: balance;
 padding: 4% 8% 4% 8%; 
}
.services-text h1{
 font-size: 56px;
 line-height: 65.5px;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 8% 1% 2% 0%;

 }
.services-text p {
 font-size: 20px;
 color: #6F4E22;
 text-wrap: wrap;
}
.services ul{
 color: #6F4E22;
 font-size: 18px;
}
.services a{
 text-decoration: none;
 color: #000;

}

@media screen and (max-width: 1440px) {
.services-text h1 {
  font-size: 50px;
}
}
@media screen and (max-width: 1024px) {
.servicesintro {

 display: flex;
 flex-direction: column;
 align-content: center;
 padding-top: 8%;
 text-wrap: wrap;
}
.services{
 flex-direction: row; 
 align-items: center;
 width: 100%;
}
.services-text {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 text-align: left;
 text-wrap: balance;
 padding: 4% 8% 4% 8%; 
 }
.services-text h1 {
 font-size: 37px; 
 margin-top: 10px;
 margin-bottom: 10px;
}
.services-text p {
 font-size: 20px;
 text-wrap: wrap;
 }
}

@media screen and (max-width: 800px) {
.servicesintro {

 display: flex;
 flex-direction: column;
 align-content: center;
 padding-top: 12%;
 text-wrap: wrap;
         padding-bottom: 8%;
 }
.services {
 flex-direction: row; 
 align-items: center;
 width: 100%;
}
.services-text {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 text-align: left;
 text-wrap: balance;
 padding: 4% 8% 0 8%; 
}
.services-text h4 {
 font-size: 26px; 
 margin-top: 10px;
 margin-bottom: 10px;
}
.services-text p {
 font-size: 16px; 
 text-wrap: wrap;
}

}

@media screen and (max-width: 500px) {
.servicesintro {
 display: flex;
 flex-direction: column; 
 align-content: center;
 padding-top: 32%;
 text-wrap: wrap;
 padding-bottom: 10%;
}
.services {
flex-direction: column; 
align-items: center;
width: 100%;
}
.servicesimage {
 width: 100%;
 padding-left: 0;
 object-fit: cover;
 height: 35vh; 
 display: block;
 margin-top: 10px; 
}
.internal-text {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 text-align: left;
 text-wrap: wrap;
 padding: 5%; 
}
.services-text h1 {
 font-size: 28px; 
 margin-top: 6px;
 margin-bottom: 6px;
 padding: 8% 1% 2% 2%;
 }
.services-text p {
 font-size: 16px; 
}
}

/* Contact Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.form {
 padding: 2% 8%;
 }
.contactpage{
 padding-top: 4%;
 padding-left: 4%;
}
.contactintro{
 background-color: #ECE7E2;
 display: flex;
 align-content: flex-start;

  padding: 4% 0 0 0;
 text-wrap: wrap;
}
.contact {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 align-items: flex-start;
 width: 100%;
}
.contact-info-item{
 text-decoration: underline;
}
.contactimage {
 width: 100%;
 padding-left: 0;
 object-fit: cover;
 height: 90vh;
 padding: 4%;
 /*display: block;
 position: relative;
 width: calc(100% - 40px);*/
 
}
.contact-section .six.columns {
  padding: 0 2%;
}
.contact-section .row {
  margin: 0; /* Remove default row margin */
}
.contact-container {
 display: flex; 
 justify-content: space-between; 
 gap: 20px;
 flex-wrap: wrap;
}

.contact-info-item,
.contact-info {
    flex: 1; 

}
.contact-text {
 flex: 1; 
 display: flex;
 flex-direction: column;
 justify-content: center; 
 text-align: left;
 text-wrap: balance;
 padding: 0 8%;  
}
.contact-text h1{
 font-size: 27px;
 }
.contact-text h4{
 font-size: 64px;
 margin-top: 10px;
 margin-bottom: 10px;
}
.contact-text p {
 font-size: 27px;
 color: #6F4E22;
}
@media screen and (max-width: 1600px) {
.contactimage {
 height: 80vh;
 }
}
@media screen and (max-width: 1440px) {
.contactimage {
 height: 80vh;
}
.contact-text h4 {
  font-size: 50px;
}
.contact-text {
 padding: 6% 8% 0% 8%; 
}
.contactintro{
 padding: 8% 0 0% 0;
}
    .contact{
align-items: flex-start;
 }
    .contactpage{
padding-top:0;
    }
 }
@media screen and (max-width: 1024px) {
  .contactintro {
padding-top: 16%;
  
  }
  .contact {
    flex-direction: row; 
 
    width: 100%;
  }
  .contactimage {
    height: 50vh; 
 
  }
  .contact-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    text-wrap: balance;
    padding: 4% 8% 0 8%; 
  }
  .contact-text h1 {
    font-size: 27px; 
  }
  .contact-text h4 {
    font-size: 37px; 
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .contact-text p {
    font-size: 20px; 
    color: #6F4E22;
    text-wrap: wrap;
  }
}
@media screen and (max-width: 850px) {
.contactintro {
     padding-top: 18%;
    }
}
@media screen and (max-width: 800px) {
.form {
 padding: 8% 4%;
}  
.contactpage{
 padding-top: 4%;
 padding-left: 2%;
}
.contactintro {
    display: flex;
    flex-direction: column;
    align-content: center;
    padding-top: 20%;
    text-wrap: wrap;
  }
  .contact{
    flex-direction: row; 
    align-items: center;
    width: 100%;
  }
  .contactimage {
  height: 50vh; 
  
  }
  .contact-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    text-wrap: balance;
    padding: 2% 0% 0 2%; 
  }
  .contact-text h1 {
    font-size: 22px; 
  }
  .contact-text h4 {
    font-size: 26px; 
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .contact-text p {
    font-size: 18px; 
    color: #6F4E22;
    text-wrap: wrap;
  }
}

@media screen and (max-width: 790px) {
.contactintro {
     padding-top: 18%;
    }
}
@media screen and (max-width: 730px) {
  .contactintro {
    flex-direction: column; 
    align-content: center;
    padding-top: 20%;               /* Adjust top padding to reduce space */
    width: 100%;                   /* Ensure it uses full width of the screen */
    margin: 0; 
  }
    
  .contact {
    flex-direction: column; 
    align-items: center;
    width: 100%;
     padding: 0;
    margin: 0;
  }
    .contactpage{
 padding-top: 4%;
 padding-left: 0%;
width:100%;
        margin: 0;   
    } 
  .contactimage {
     height: 35vh; 
    display: block;
    margin-top: 10px; 
    object-fit: cover;
  }
  .contact-text {
    width: 100%;                   /* Ensure it takes full width */
    padding: 5%;                   /* Add padding around text for spacing */
    text-align: left;              /* Align text to the left */
    box-sizing: border-box;        /* Include padding in width calculation */
    margin: 0;
  }
  .contact-text h1 {
    font-size: 20px; 
    margin: 0;  
  }
  .contact-text h4 {
    font-size: 28px; 
    margin-top: 6px;
    margin-bottom: 6px;
  }
  .contact-text p {
    font-size: 16px; 
    color: #6F4E22;
    text-wrap: wrap;
      margin: 0;  
  }

.form {
 padding: 2% 6%;
}  
 /* Specific adjustment for .six.columns inside .contactpage */
  .contact .six.columns {
    width: 100% !important;   /* Force full width */
    box-sizing: border-box;   /* Ensure padding is included in width calculation */
    padding: 0 !important;    /* Remove any padding that may be set elsewhere */
   margin:0;
    }
    
}
@media screen and (max-width: 560px) {
  .contactintro {
    padding-top: 26%; 
    }
.contact-container {
 flex-direction: column;
    }
}
@media screen and (max-width: 400px) {
  .contactintro {
    padding-top: 30%; 
    }
}

@media screen and (max-width: 375px) {
.form {
 border-radius: 0px;
 padding: 4% 4%;
}
 .contactpage {
   padding-top: 10%;
}
    .contactintro{
padding-top: 26%;
    }
    .logo img{
width: 200px;
    }
}

/* Appointment
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.book-appointment{
 background-color: #ECE7E2;
 display: flex;
 align-content: flex-start;
 padding: 10rem 0 0 0;
 text-wrap: wrap;
}
.appt-form{
 background-color: #fff;
 padding: 6rem 6rem 0 6rem;
}
.appt-page{
 padding: 20rem 12rem 16rem 20rem;
}
.appt {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 align-items: flex-start;
 width: 100%;
}

.appt-page h4{
 font-size: 24px;
 line-height: 31.2px;
 }
.appt-page h1{
 font-size: 64px;
 margin-top: 10px;
 margin-bottom: 10px;
 line-height: 73.2px;
}


@media screen and (max-width: 1440px) {
.appt-page h1 {
  font-size: 45px;
}
.appt-page {
    padding: 14rem 2rem 14rem 8rem;
}
.book-appointment{
padding: 12rem 0 0 0;
}
.appt-page h4{
 font-size: 22px;
 }
}

@media screen and (max-width: 1024px) {
.appt-form{
 padding: 6rem 6rem 0 6rem;
}
.appt-page{
}
.appt {
 flex-wrap: nowrap;
}
.appt-page h4{
 font-size: 18px;
 line-height: 31.2px;
 }
.appt-page h1{
 font-size: 35px;
 line-height: 47.2px;
}
}

@media screen and (max-width: 768px) {
.appt {
 flex-wrap: nowrap;
}
.appt-page h4{
 font-size: 18px;
 line-height: 31.2px;
 }
.appt-page h1{
 font-size: 35px;
 line-height: 47.2px;
}
}
@media screen and (max-width: 500px) {
.appt-form{
 padding: 3rem 3rem 0 3rem;
}
.appt-page{
  padding: 4rem 4rem 4rem 4rem;
}
.appt {
 flex-direction: column;
}
.appt-page h4{
 font-size: 18px;
 line-height: 31.2px;
 }
.appt-page h1{
 font-size: 35px;
 line-height: 47.2px;
}
}
/* Dentist Bio
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dentistbio-intro{
 background-color: #fff;
 display: flex;
 align-content: center;
 padding: 10rem 0 0 0;
 }
.dentistbio {
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 width: 100%;
 color: #000;
}
.dentistimage {
 width: 100%;
 padding-left: 0;
 object-fit: cover;
/* height: 90vh;*/
 display: block;
}
.dentist-text {
 flex: 1; 
 display: flex;
 flex-direction: column;
 justify-content: center; 
 text-align: left;
/* text-wrap: balance;*/
 padding: 10% 6% 0 0%; 
}
.dentist-text h1{
 font-size: 66px;
 color: #6F4E22;
 }
.dentist-text h3{
 font-size: 30px;
 margin-top: 5px;
 margin-bottom: 60px;
}
.dentist-text p {
 font-size: 21px;
}
.dentist-text h2{
 font-size: 56px;
 color: #6F4E22;
 }
.dentist-text h4{
 font-size: 36px;
 color: #6F4E22;
 }/*
@media screen and (max-width: 2000px) {
.dentistbio-intro{
 padding-top: 2%;
}
    /*
.dentistbio {
 padding-top: 6%;
}*/

@media screen and (max-width: 1440px) {
/*
.dentistbio {
 padding-top: 6%;
}*/
.dentistbio-intro{
 padding: 12rem 0 0 0;
 }
.dentist-text h3 {
 font-size: 25px;
}
.dentist-text h1{
 font-size: 54px;
 color: #6F4E22;
 }
.dentist-text{
 padding: 6% 6% 0 0%; 
}
}
@media screen and (max-width: 1024px) {
.dentistbio-intro {
 display: flex;
 flex-direction: column;
 align-content: center;
 padding: 16rem 0 0 0;
 }
.dentistbio {
 flex-direction: row; 
 align-items: center;
 width: 100%;
 }
.dentistimage {
 width: 100%;
 padding-left: 0;
 object-fit: cover;
 display: block;
 }
.dentist-text {
 flex: 1;
padding: 0 6% 0 0%; 
 }
.dentist-text h1 {
    font-size: 40px; 
  }
.dentist-text h3 {
    font-size: 25px; 
    margin-top: 10px;
    margin-bottom: 10px;
  }
.dentist-text p {
    font-size: 20px; 
    color: #6F4E22;

  }
}

@media screen and (max-width: 800px) {
.dentistbio-intro {
 display: flex;
 flex-direction: column;
 align-content: center;
 }
.dentistbio {
 flex-direction: row; 
 
 width: 100%;
  }
.dentistimage {
    width: 100%;
    padding-left: 0;
    object-fit: cover;

    display: block;
  }
.dentist-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    text-wrap: balance;
    padding: 2% 8% 0 0%; 
  }
.dentist-text h1 {
    font-size: 28px; 
  }
.dentist-text h3 {
    font-size: 18px; 
    margin-top: 10px;
    margin-bottom: 10px;
  }
.dentist-text p {
    font-size: 16px; 
    color: #6F4E22;

 }
}

@media screen and (max-width: 500px) {
.dentistbio-intro{
 display: flex;
 flex-direction: column; 
 }
.dentistbio {
 flex-direction: column-reverse; 
 width: 100%;
 }
.dentistimage {
 width: 100%;
 padding-left: 0;
 object-fit: cover;
 display: block;
 margin-top: 10px; 
 }
.dentist-text {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 text-align: left;
 text-wrap: wrap;
 padding: 5%; 
 }
}
@media screen and (max-width: 700px) and (min-width: 550px) {
 .dentistbio-intro {
  display: flex;
  flex-direction: column;
  align-items: center; 
  padding: 14rem 0 0 0; 
  }
.dentistbio {
 display: flex;
 flex-direction: row;
 width: 100%;
 justify-content: space-between; /* Ensures elements are spaced properly */
}
.dentistimage {
 width: 100%; /* Adjust width to prevent overflow */
 padding-left: 0;
 object-fit: cover;
 display: block;
 margin-top: 0;
}
.dentist-text {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 text-align: left;
 text-wrap: wrap;
 padding: 5%; 
 margin-left: 2%; /* Adjust margin to ensure proper spacing */
}
}
/* Styles for screens between 500px and 550px */
@media screen and (max-width: 550px) and (min-width: 500px) {
 .dentistbio-intro {
 display: flex;
 flex-direction: column;
 align-items: center; /* Center align everything */
 padding: 16rem 0 0 0; /* Adjust padding for better spacing */
 }
.dentistbio {
 display: flex;
 flex-direction: column-reverse; /* Stack the image and text vertically */
 width: 100%;
 }
.dentistimage {
 width: 100%; /* Ensure image fills the width */
 padding-left: 0;
 object-fit: cover; /* Ensures the image covers the container */
 display: block;
 margin-top: 0; /* Reduce top margin for tighter spacing */
 }
.dentist-text {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 text-align: left;
 text-wrap: wrap;
 padding: 5%; /* Add padding for text spacing */
 margin-top: 15px; /* Ensure text does not crowd the image */
 }
}


/* Hamburger Menu */
#toggle {
  display: none;
}

/**
  Hamburger
**/
.hamburger {
  position: absolute;
  top: 5em;
  right: 12%;
  margin-left: -2em;
  margin-top: -45px;
  width: 3rem;
  height: 45px;
  z-index: 5;
}

.hamburger div {
  position: relative;
  width: 3rem;
  height: 2px;
  border-radius: 3px;
  background-color: #6F4E22;
  margin-top: 13px;
  transition: all 0.3s ease-in-out;
}

/**
Nav Styles
**/
.nav {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #ECE7E2;
  top: -100%; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  transform: scale(0);
}
.nav-wrapper {
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  height: 100%;
}
nav .navigation-responsive {
  text-align: left;
  margin-left: 25%;
}
nav .navigation-responsive a {
  position: relative;
  text-decoration: none;
  color: #ECE7E2;
  font-size: 2em;
  display: inline-block;
  margin-top: 1.25em;
  transition: color 0.2s ease-in-out;
  letter-spacing: 1px;
}
nav .navigation-responsive a:before {
  content: '';
  height: 0;
  position: absolute;
  width: 0.25em;
  background-color: white;
  left: -0.5em;
  transition: all 0.2s ease-in-out;
}
nav .navigation-responsive a:hover {
  color: white;
}
nav .navigation-responsive a:hover:before {
  height: 100%;
}

/**
Animations
**/
#toggle:checked + .hamburger .top-bun {
  transform: rotate(-45deg);
  margin-top: 25px;
}

#toggle:checked + .hamburger .meat {
  transform: rotate(45deg);
  margin-top: -1px;
}

#toggle:checked + .hamburger + .nav {
  top: 0;
  transform: scale(1);
}

@media only screen and (min-width: 1025px) and (max-width: 2560px) {
	.nav {
		display:none !important;
	}
	
	.hamburger {
		display:none !important;
	}
	
	.social-icons-responsive {
		display:none !important;
	}
	
	#toggle {
		display:none !important;
	}
	
	#myTopnav {
		display:none !important;
	}
}

.navigation-responsive {
	display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 9999;
        padding-top: 20%;
	    gap: 30px;
		margin-bottom: 1rem;
}

.navigation-responsive a {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  font-size: 36px;
}

.navigation-responsive ul li a {
  text-decoration: none;
  color: #8B6B43;
}
.navigation-responsive ul li a {
  text-decoration: none;
  color: #8B6B43;
}
.navigation-responsive ul li a:hover {
text-decoration: underline;
    text-underline-offset: .4em;
}



.responsive-dropdown {
	float: left;
  overflow: hidden;
}

.responsive-dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: #6F4E22;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.responsive-dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 1024px) {
  .responsive-dropdown a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .responsive-dropdown a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1024px) {
  .responsive-dropdown .responsive {position: relative;}
  .responsive-dropdown .responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .responsive a {
    float: none;
    display: block;
    text-align: center;
  }

.responsive .responsive-dropdown {float: none;}
.responsive .responsive-dropdown .dropdown-content {position: relative;}
.responsive .responsive-dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
	
.social-icons-responsive {
	display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    flex-grow: 0;
    flex-shrink: 1;
    margin-bottom: 6vw;
	gap: 30px;
	width: 25px;
	height:25px;
	}
	
.social-icons-responsive a {
	width: 25px;
	height:25px;
	
	}
 




  
    
  /* form button
–––––––––––––––––––––––––––––––––––––––––––––––––– */  
 .button {
        display: inline-block; /* Allows setting width and height */
        width: 150px;         /* Set desired width */
        height: 40px;         /* Set desired height */
        padding: 10px;        /* Padding for better appearance */
        font-size: 16px;      /* Consistent font size */
        text-align: center;   /* Center text */
        border-radius: 5px;   /* Optional: Rounded corners */
        text-decoration: none; /* Remove underline */
        margin-right: 2px;    /* Space between buttons */
        cursor: pointer;       /* Pointer cursor on hover */
    }

    .button-submit {
        background-color: #6F4E22; /* Background color for Submit */
        color: #fff;                /* Text color */
        border: none;               /* No border */
    }

    .button-reset {
        color: #6F4E22;             /* Text color */
        background-color: transparent; 
        border: 2px solid #6F4E22;  /* Border for Clear Fields */
    }
    
.learn-more-button a{
  font-size: 14px;
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}