.biointro {
	font-style: oblique;
}

.ITake { margin-top:20px; padding-top:20px }
#topSection { margin-bottom:80px }
h1 {
  font-size:40px; margin:20px 0px 0px 0px; 
  padding:0px; line-height:70% ;

}
h1, h2 { 
    font-family: "haboro-serif-extended", serif;
    font-weight: 700;
    font-style: normal;
  
}
.mainSubheading { font-size:14px; margin:0px 0px 20px }
#topSection, #topSection a { color:black }
#topSection a { text-decoration:underline; font-weight:bold; }
.mainPictures img  {
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  }

 .mainText a { color:black; text-decoration:underline; font-weight:bold }
      .mainText { 
        padding:10px; 
        position:relative; 
      }
                        .mainTitle { text-align:left; padding-top:20px }
                        .mainTitle h1 {
                           font-family: 'Lora', serif;
                           line-height:90%;
                        }
  .upperRight { position:absolute; top:40px; right:50px }
                        .mainCopy { text-align:left }
                        .helloWelcome { font-size:120%; font-weight:bold }
@media screen and (min-width: 992px) {
  .ITake { 
    margin-top: 20px; 
    padding-top: 20px; 
    margin-bottom: 20px;
  }
  .mainPictures { 
    float: right;
    width: 30%;
  }
  .mainText {
    width: 70%;
    float: left;
  }
}
.mainPictures img  {
  max-width:200px;
  }

.topTextInner { padding:30px }  
.mainText { padding:30px }

.pricing-section {
    background-color: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 2rem 0;
}

.tldr-box {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.tldr-box h3 {
    color: #333;
    margin-bottom: 1rem;
}

.pricing-highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.price {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c3e50;
}

.service {
    font-size: 1.2rem;
    color: #666;
}

.service-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.pricing-section .service-card {
    background-color: #f8f9fa !important;
    padding: 1.5rem !important;
    border-radius: 6px !important;
    border: 1px solid #e9ecef !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.pricing-section .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

.pricing-section .service-card h4 {
    color: #2c3e50 !important;
    margin-bottom: 1rem !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
}

.pricing-section .service-card ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

.pricing-section .service-card ul li {
    padding: 0.5rem 0 !important;
    position: relative !important;
    padding-left: 1.5rem !important;
    color: #666 !important;
    font-size: 1rem !important;
}

.pricing-section .service-card ul li:before {
    content: "•" !important;
    color: #2c3e50 !important;
    position: absolute !important;
    left: 0 !important;
}

.pricing-section .note {
    background-color: #e3f2fd !important;
    padding: 1rem !important;
    border-radius: 4px !important;
    margin-top: 1rem !important;
    font-size: 0.9rem !important;
    color: #2c3e50 !important;
}

.pricing-section .pricing-breakdown {
    background-color: #fff !important;
    padding: 1rem !important;
    border-radius: 4px !important;
    margin-top: 1rem !important;
    border: 1px solid #e9ecef !important;
}

.pricing-section .appointment-info {
    background-color: #f8f9fa !important;
    padding: 1.5rem !important;
    border-radius: 6px !important;
    margin-top: 2rem !important;
    border: 1px solid #e9ecef !important;
}

.pricing-section .appointment-info h4 {
    color: #2c3e50 !important;
    margin-bottom: 1rem !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
}

.pricing-section .appointment-info ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

.pricing-section .appointment-info ul li {
    padding: 0.5rem 0 !important;
    position: relative !important;
    padding-left: 1.5rem !important;
    color: #666 !important;
    font-size: 1rem !important;
}

.pricing-section .appointment-info ul li:before {
    content: "✓" !important;
    color: #28a745 !important;
    position: absolute !important;
    left: 0 !important;
}