/* ======================

Base Styles

======================= */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}
  
*, *:before, *:after {
    box-sizing: inherit;
}
  
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
  
h1,
h2,
h3,
h4 {
    font-family: 'Montserrat', Arial, sans-serif;
    color: #393e41;
    font-weight: 500;
}
  
body {
    background: #fff;
    font: 1em/1.5 'Libre Baskerville', serif;
    color: #393e41;
    position: relative;
}
  
a {
    text-decoration: none;
}

.brandBold {
    color: #f64740;
    font-weight: 700;
}
/* ======================
  
Navigation Styles
  
======================= */
  
.mainNav {
    display: flex;
    flex-flow: column;
    padding: 0;
    align-items: center;
    list-style-type: none;
}
  
.navList {
    list-style-type: none;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    padding: 0;
    margin-top: 0.5em;
    width: 90%;
}

.navList a {
    background-color: #f5f5f5;
    display: block;
    color: #393e41;
    padding: 1em 2.5em;
    margin: 0.3125em 0;
    border: 1px solid #ebf7ff;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
  
.navList a:hover {
    color: #f64740;
    background-color: #fff;
    border-color: #f64740;
}

.navVisited {
  color: #f64740;
}
/* ======================
  
Hero Styles

======================= */
  
.heroBG {
    background: linear-gradient(to bottom, #fff 75%, #ebf7ff 25%);
}
  
.heroTitle {
    font-size: 3.5em;
    margin: 1em .5em;
}

.fadeIn {
  animation: fadeIn 2s 1;
}

.heroPic {
    margin: 1.5em 0 1.5em 1em;
    width: 90%;
}

@keyframes fadeIn {
    from{opacity: 0} to {opacity: 1;}
}

/* ======================
  
Services and About Us Styles
  
======================= */
.services,
.aboutUs {
    background: #ebf7ff;
}
  
.services h2,
.aboutUs h2 {
    font-size: 3em;
    margin: 1em;
}

.services h3,
.aboutUs h3 {
  font-size: 2em;
  margin: 1em;
}

.services p,
.aboutUs p {
    width: 85%;
    font-size: 1.1em;
    margin: 0 0 1em 2em;
}

.aboutUs img {
  width: 85vw;
  margin: 1em 0 0 1.5em;  
}

.frontPageSubImage {
  width: 95%;
  max-width: 500px;
  align-self:flex-end;
  margin: 0 2em 2em 0;
}
/* ======================
  
Treatment Styles
  
======================= */
  
.treatment {
  background: linear-gradient(to bottom, #fff 90%, #ebf7ff 10%);
}

.treatment h2 {
    font-size: 2.8em;
    margin: 1em .5em;
}

.treatmentList {
  list-style: none;
  line-height: 225%;
  font-size: 1.1em;
  padding: .5em 1.5em 1.5em;
  margin: 0;
}

.treatment img {
  margin: 1em 0 0 1.5em;
  width: 100%;
}

.caption {
  position:relative;
}

.captionText {
  position: absolute;		
  top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
  opacity: 0;
  transition: all 0.8s ease;
}

.captionText {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: bold;
}

.caption:hover .captionText {
  opacity: 1;
}

.caption:hover img {
  filter: brightness(60%);
  -webkit-filter: brightness(60%);
}

.treatment p {
  padding-left: 1em;
  font-size: 1.2em;
}

.fullList {
  display: none;
}
/* ======================

FAQ Styles

======================= */

.faqLink {
  padding: 5em 1.5em;
  background-color: #ebf7ff;
}

.faqHeader {
  font-size: 3em;
  color: #fff;
  margin: 0 auto;
  transition: all 0.5s ease;
  background: #f64740;
  width: 100%;
}

.faqHeader:hover {
  color: #393e41;
  border-radius: 25px;
}

/* ======================

Resources Styles

======================= */

.formsWrapper {
  display: flex;
  flex-flow: column;
  padding: 0;
  align-items: center;
  list-style-type: none;
}

.formsList {
  display: flex;
  flex-flow: column;
  list-style-type: none;
  text-transform: uppercase;
  text-align: center;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  padding: 0;
  margin-top: 0.5em;
  width: 90%;
}

.formsList a {
  background-color: #fff;
  display: block;
  color: #393e41;
  padding: 1em 2.5em;
  margin: 0.3125em 0;
  border: 1px solid #ebf7ff;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.formsList a:hover {
  color: #f64740;
  background-color: #fff;
  border-color: #f64740;
}

/* ======================
  
Contact Styles
  
======================= */
  
#contact {
    background: #ebf7ff;
    display: flex;
    flex-flow: column;
}
  
#contact h2 {
  text-align: center;
  font-size: 3em;
  margin: 1em .5em .5em;
}

#contact h3 {
  font-size: 1.2em;
  margin-left: 1.1em;
}

#contact p {
  margin: 0 0 1em 1.5em;
  line-height: 200%;
}

/* ======================
  
Footer Styles
  
======================= */
  
footer {
    background: #ebf7ff;
    font-size: 0.9em;
    font-family: 'Montserrat', Arial, sans-serif;
    margin: 0;
    padding-top: 2.5em;
}

.footerList {
    display: flex;
    flex-flow: row;
    gap: 1em;
}

footer a {
    text-decoration: none;
    color: #333;
}
  
.backToTop {
    text-transform: uppercase;
}
  
  /* ======================
  
  Media Queries
  
  ======================= */
  
  @media (min-width: 768px) {
      .wrapper {
          margin: 0 auto;
      }
  
    .mainNav,
    .navList {
      display: flex;
    }
  
    .navList {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin: 0;
      width: 100%;
    }
  
    .navList a {
      background-color: #f5f5f5;
      padding: 1em 2.5em;
    }
  
    .headerPic {
      margin: 0 1em;
    }
  
    .headerBio {
      margin: 0 1em;
      text-align: left;
    }
  
    .services img {
      width: 95%;
    }

    #contact p {
      width: 90%;
      font-size: 1.2em;
      margin: 0 0 1em 1em;
    }
  
    #contact h3 {
      font-size: 1.5em;
      margin: 0 0 1em .8em;
    }

    .contactInfo {
      margin: 0 0 0 1em;
    }
  
    .formsList {
      width: 60%;
    }

    .aboutUs {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Adjust for number of columns */
        grid-gap: 20px;
    }

    .aboutUsCard {
      display: flex;
      flex-flow: row nowrap;
      width: 90%;
      max-width: 1700px;
    }

    .aboutUsCard img {
      width: 40%;
      max-width: 500px;
    }

    .aboutUsCard .text {
      flex-grow: 2;
    }

    footer {
        display: block;
        height: 100px;
    }
  
    .backToTop {
      display: none;
    }
  }
  
  @media (min-width: 1024px) {
    .wrapper {
      max-width: 1700px;
    }

    .mainNav {
      width: 80%;
      margin: auto;
      flex-direction: row;
      justify-content: space-between;
    }
  
    .navList {
      justify-content: flex-end;
    }
  
    .navList a {
      background-color: #fff;
      padding: 1em 0 1em 2.5em;
      border: none;
    }
  
    .navList a:hover {
      color: #f64740;
      background: #fff;
      border: none;
    }
    
    .heroBG {
      position: relative;
      text-align: center;
      background: linear-gradient(to bottom, #fff 50%, #ebf7ff 50%);
    }

    .heroPic {
      margin: 0;
      width: 80%;
    }

    .heroTitle {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
    }

    .services {
      display: flex;
      flex-flow: column;
    }

    .servicesCard {
      width: 60vw;
      margin: 1em 7em;
    }

    .services p {
      font-size: 1.4em;
    }

    .treatment {
      display: flex;
      flex-flow: column;
      margin: auto;
      background: #fff;
    }

    .treatmentCard {
      max-width: 900px;
      margin-left: 6em; 
    }

    .listItems {
      display: flex;
      flex-flow: row nowrap;
    }

    .item1 {
      display: none;
    }

    .item2 {
      order: 1;
    }

    .item3 {
      display: none;
    }

    .item4 {
      order: 2;
    }

    .item5 {
      display: none;
    }

    .item6 {
      order: 3;
    }

    .treatment img {
      width: 25vw;
    }

    .fullList {
      display: flex;
      flex-flow: row;
      margin: 2em auto;
      max-width: 1000px;
    }

    .faqHeader {
      margin: 1em auto;
      text-align: center;
      width: 50%;
    }

    .contactCard {
      width: 50%;
      margin: auto;
    }
  
    footer {
      max-width: 1700px;
      text-align: center;
      margin: auto;
    }

    .footerList {
      display: block;
    }
  
    .footerName {
      font-size: 1.1em;
    }
  }