body {
   background-color: #d5e8de;
}
.grey {
   background-color: #a0c9b2;
}

h1 {
  font-family:'Cormorant Garamond',serif;
}
.navbar-brand  {
   color: purple;
   padding-top: 10px;
}

.display-6 {
    color: purple; 

}

p{
color: white;
margin-left: 26px;
font-family:'Cormorant Garamond',serif;
font-size: 23px;
}

.about-me{
   background: #d5e8de;
   padding: 50px 0;
}
.mobile {
   display: none;
  }
img {
 max-width: 100%;
 height: auto;
 display: block;
 margin-left: auto;
 margin-right: auto;
}
@media all and (max-width:768px) {
   body {
     padding: 10px;
     height:100vh;
   }.img{
     width: 90%;
     height: auto;
     margin: 0 auto;
   }
   #navbarMenu{
     display: none;
   }
#menu-toggle:checked ~ 
#navbarsExample03
{
 display: block;
}
}
.about-me h3{
   color: purple;
   font-weight: 800;
   margin-bottom: 20px;

}
#about-me{
 padding: 40px 20px 80px;
}

.about-me p {
 font-size: 1.25rem;
 line-height: 1.8;
 color: rgb(144, 164, 152);
}

.about-me .container{
 max-width: 100%;
}
h6{
 margin-left: 100px;
 font-family:'Cormorant Garamond',serif;
color: rgb(131, 43, 131);
font-size: 25px;

}

h2 ,h4 {

font-family:'Cormorant Garamond',serif;
color: rgb(131, 43, 131);
}

.container{

 width:90%;

 max-width:1200px;

 margin:auto;
 color:rgb(144, 164, 152)
}

h2{

 text-align:center;

 font-size:3rem;

 margin-bottom:40px;



}

.logo{

 width:180px;

}
section{

 padding:30px 0;

}

.service-row {

 display:flex;
 justify-content: space-around;
 flex-wrap: wrap;
 gap: 20px;
 padding: 20px 30px;
 text-align: center;
 margin-bottom: 10px;

}
.service-item{
 flex: 1 1 180px;
 min-width: 150px;

}
.service-item h3, h4{
 font-family: 'Cormorant Garamond',serif;;
 color: purple;
 margin-bottom: 20px;

}

.service-item p{
 color: rgb(144, 164, 152);
 margin: 1px 0;

}

#testimonials{

 background:#a0c9b2;

}

.testimonial{

 display:none;
 text-align:center;
 max-width:700px;
margin:auto;
line-height:1.7;
color: white;
}

.testimonial.active{

 display:block;
 font-size: 20px;
 margin-bottom: 10px;
}


form{

 max-width:700px;

 margin:auto;
}
input,
textarea{

 width:100%;
 padding:18px;
 margin-bottom:18px;
 border:1px solid #ddd;
 border-radius:12px;
 font-size:1rem;
}
 .contact {
   text-align: center;
   margin-top: 30px;
   font-family:'Cormorant Garamond',serif;
   font-size: 38px;
   margin-bottom: 50px;
 }

footer{

 background:#a0c9b2;

 color:white;

 text-align:center;

 padding:50px 20px;

}

.btn{

 display:inline-block;

 padding:16px 35px;

 background: #a0c9b2;

 color: white;

 text-decoration:none;

 border:none;

 border-radius:40px;

 cursor:pointer;

}

.shadow-image {

 box-shadow: 0 10px 25px rgba(0,0,0,0.4);
 margin-bottom: 50px;

}
section {
 scroll-margin-top: 80px;
}

html{
 scroll-behavior: smooth;
}

.specialty {
 background-color: #a0c9b2;
}


/* ==========================================================
  Everything below this line was added while building out
  the logo size, mobile nav, Read More toggles, Book Now
  button, and treatment section styling.
  ========================================================== */

/* ============ Logo ============ */
.logo-img{ max-width:480px; width:100%; height:auto; }

/* ============ CSS-only nav toggle (no JS) ============ */
.site-nav{ position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:14px 24px; }
.nav-toggle-checkbox{ display:none; }
.navbar-toggler-label{
 display:none;
 flex-direction:column;
 gap:5px;
 cursor:pointer;
 padding:6px;
}
.navbar-toggler-label span{
 width:26px; height:3px; background:currentColor; border-radius:2px;
}
.navbar-nav-css{
 display:flex; gap:28px; list-style:none; margin:0; padding:0;
}
@media (max-width:768px){
 .navbar-toggler-label{ display:flex; }
 .navbar-nav-css{
   display:none;
   flex-direction:column;
   width:100%;
   padding:18px 24px 6px;
   gap:16px;
 }
 .nav-toggle-checkbox:checked ~ .navbar-nav-css{ display:flex; }
}

/* ============ Specialty treatments: centered, purple headings, white body text ============ */
.specialty-item{ padding:0; text-align:center; }
.specialty-item h4{ color:rgb(131, 43, 131); }
.specialty-item p{ color:#fff; }
.specialty-item li{ color:#fff; }
.specialty-item ul{ display:inline-block; text-align:left; }
.specialty-item .btn-read-more{ display:inline-block; }
.specialty-subtext{ color:#fff !important; }

/* ============ CSS-only Read More toggle (no JS) ============ */
.read-more-checkbox{ display:none; }
.treatment-full{ display:none; }
.read-more-checkbox:checked ~ .treatment-full{ display:block; }

.btn-read-more{
 display:inline-block;
 background:transparent;
 border:1px solid rgb(131, 43, 131);
 color:rgb(131, 43, 131);
 padding:8px 20px;
 border-radius:999px;
 font-size:.85rem;
 letter-spacing:.04em;
 text-transform:uppercase;
 cursor:pointer;
 margin-top:8px;
 transition:background .2s ease, color .2s ease;
}
.btn-read-more:hover{ background:rgb(131, 43, 131); color:#fff; }
.btn-read-more::before{ content:"Read More"; }
.read-more-checkbox:checked ~ .btn-read-more::before{ content:"Read Less"; }

/* ============ Book Now — fixed side button ============ */
.book-now-side{
 position:fixed;
 top:50%;
 right:0;
 transform:translateY(-50%);
 background:#6f2da8;
 color:#fff;
 text-decoration:none;
 font-weight:600;
 letter-spacing:.06em;
 text-transform:uppercase;
 font-size:.9rem;
 padding:16px 22px;
 border-radius:8px 0 0 8px;
 box-shadow:-3px 3px 10px rgba(0,0,0,.18);
 z-index:500;
 writing-mode:vertical-rl;
 transition:background .2s ease, padding .2s ease;
}
.book-now-side:hover{ background:#59227f; padding-right:28px; }
@media (max-width:600px){
 .book-now-side{
   writing-mode:horizontal-tb;
   top:auto; bottom:0; right:0; left:0;
   transform:none;
   text-align:center;
   border-radius:0;
   padding:14px;
 }
 .specialty h6{
   text-align:center;
   margin-left:auto;
   margin-right:auto;
 }
}


#contact {

    padding: 60px 20px;

    text-align: center;

}

.contact {

    max-width: 700px;

    margin: auto;

}

.contact p {

    font-size: 18px;

    line-height: 1.8;

}

.contact a {

    color: #a0c9b2;

    text-decoration: none;

    font-weight: 100;

}

.contact a:hover {

    text-decoration: underline;

}

.contact iframe {

    margin-top: 25px;

    width: 100%;

    border-radius: 12px;

    box-shadow: 0 5px 15px rgba(0,0,0,.15)

}