body{
   margin:0px;
   padding:0px;
   font-family: "Quicksand", sans-serif;
}
.section {
    padding: 8% 0px;
}
.header{
    padding:5% 0px;
}
.yellow-bg{
    background-color: #FFF3D5;
}
.blue{
    color:#5BC0E8;
}
.blue-bg{
    background-color:#D9E2F4;
}
.is-vertical-center {
    display: flex;
    align-items: center;
}
.footer{
    background-color: #CFF1FFCC;
}
body{
    margin:0px;
    padding:0px;
    font-family: "Quicksand", sans-serif;
}
a{
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6{
    font-family: "Quicksand", sans-serif;
}
.header{
    background-image: url("images/header-bg.png");
    min-height:700px;
    background-size: cover;
    padding-bottom:30px;
    margin-top:-60px;
}
nav.navbar.navbar-expand-lg.bg-body-tertiary {
    background-color: transparent !important;
}
.login-bg{
    background-image: url("../assets/login-bg.png");
    min-height:600px;
    background-size: cover;
    padding-bottom:30px;
}
.modal-dialog {
    max-width: 65% !important;
    margin-right: auto;
    margin-left: auto;
}
.modal-body{
    padding:0px;
}
.login-form-section{
    background-color: #A2C9F3;
    padding:40px;
    
}
.login-form-section input {
    border-radius: 20px;
    border: 1px solid #434343;
}
button.close {
    float: right;
}
button.btn.btn-login {
    background: #000000;
    width: 300px;
    padding: 15px;
    display: block;
    margin: auto;
    border-radius: 40px;
}
.section-heading{
    color:#5BC0E8;
}
.container.small-container {
    width: 60%;
}
.how-section .small-container{
    border-bottom: 2px solid #d7cdcd;
    padding: 25px 0px;
}
span.number {
    border: 2px solid #000000;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    text-align: center;
}
.customers .card{
    text-align:center;
    box-shadow:5px 5px 10px rgba(0,0,0,0.2);
}
.customers .card img {
    margin-top: -35px;
    padding-bottom: 25px;
}
.padded{
    padding:80px 0px;
}
.accordion {
    box-shadow: 5px 5px 9px rgb(0 0 0 / 10%);
    border-radius: 10px;
}
button.accordion-button {
    font-weight: 600;
}
.footer{
    background-color: #CFF1FF;
    padding:50px 0px;
}
.footer h2 {
    font-size: 1.2em;
}
.footer a {
    display: block;
    text-decoration: none;
    color: #181818;
    font-size: 0.9em;
    line-height: 2em;
}
.colophon{
    margin-top:30px;
    padding:25px 0px;
    border-top: 1px solid #253D4E;
}
.head-section
{
    padding-top:10%;
}
h1.header-title {
    text-align: center;
    font-weight: 500;
    font-size: 3.3em;
    color: #253d4e;
    font-family: 'Roboto';
}
.search-form {
    padding: 6px 12px 12px 12px;
    background: #ffffff;
    border: 2px solid #e1e1e1;
    border-radius: 45px;
}
button.btn-get-started {
    background-color: #5bc0e8;
    border: none;
    padding: 15px;
    width: 100%;
    display: block;
    border-radius: 40px;
    text-transform: uppercase;
    font-weight: bold;
}
.divider {
    height: 35px;
    width: 3px;
    background-color: #d7d7d7;
    float: right;
}
.search-form input {
    border: none;
}
.input-group-text {
    border: none;
    background: #ffffff;
}
.mission-section h2 {
    background: #5bc0e8;
    color: #ffffff;
    font-size: 1.5em;
    padding: 50px 30px;
    border-radius: 30px;
    text-align: center;
    margin-top:10%;
}
span.profession{
    color:#fcaf17;
}
.card.service-card {
    background: #eff9fd;
    text-align: center;
    border: 3px solid #67c5ea;
    border-radius: 20px;
    padding: 25px;
    margin-top: 20px;
    min-height: 300px;
}
.card.category-card {
    background: #E2E5FF;
    text-align: center;
    border: 1px solid #67c5ea;
    border-radius: 20px;
    padding: 25px;
    margin-top: 20px;
    min-height: 235px;
}

.card.service-card:hover, .card.category-card:hover{
    background: #ffffff;
}
.service-card img, .category-card img{
    display: block;
    margin:10px auto;
}
.service-graphic img {
    display: block;
    margin: 15% auto;
    width:75%;
}
.selected-image {
    opacity: 0; /* Initially set opacity to 0 */
    transition: opacity 2s ease-in-out; /* Smooth transition over 1 second */
  }
  
  .fade-in {
    opacity: 1; /* Set opacity to 1 for the fade-in effect */
  }
  a.explore-link {
    padding: 25px;
    font-size: 1.25em;
    text-decoration: none;
    color: #0cb1f1;
}
.feature-section .card {
    background: #5bc0e836;
    border: none;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 7%);
    min-height: 180px;
    margin-top: -20px;
    text-align: center;
    padding-top: 15px;
}
.feature-section img {
    display: block;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 80px;
}
a.btn.continue-btn {
    background: #1329C0;
    color: #Ffffff;
    text-transform: uppercase;
    padding: 10px 30px;
    border-radius: 30px;
    margin:0 auto;
}
a.btn.blue-btn {
    background: #1329C0;
    color: #Ffffff;
    text-transform: uppercase;
    width:90%;
    padding: 5px 15px;
    border-radius: 8px;
    margin:0 auto;
    display: block;
}
.fixed-width{
    display: block;
    width:200px;
}
.text-gray {
    color: #818181;
}
a.amount-link {
    background: #d3d3d3;
    color: #000000;
    margin: 10px;
    padding: 8px 12px;
}
.bold{
    font-weight:bold;
}
.select-btn {
    background: #E2E5FF;
    width: 45%;
    margin: 2%;
    padding: 30px;
    border: 1px solid #5BC0E8;
    border-radius: 10px;
}
i.fa-regular.fa-circle-check {
    float: right;
    font-weight: bold;
    color: #78b961;
    font-size: 1.5em;
}
a.appointment-links {
    display: block;
    font-size: 1.2em;
    border: 2px solid #D9D9D9;
    margin-top: 20px;
    padding: 15px;
    color: #434343;
    border-radius: 10px;
    font-weight: 500;
}
a.appointment-links:hover, a.appointment-links.selected {
    display: block;
    font-size: 1.2em;
    border: 2px solid #5BC0E8;
    margin-top: 20px;
    padding: 15px;
    color: #5BC0E8;
    border-radius: 10px;
    font-weight: 500;
}
p.card-text.small.appointment-card {
    color: #777777;
    font-weight: 500;
    line-height: 2em;
}
.text-orange {
    color: #f3961f;
}
span.pull-right {
    float: right;
}
a.social-link {
    font-size: 1.5em;
    float: left;
    padding: 0px 15px 0px 0px !important;
    /* margin-top: 15px; */
}
a.btn.btn-blue {
    background: #5bc0e8;
    color: #ffffff;
    text-transform: uppercase;
    padding: 20px 30px;
    border-radius: 46px;
}
h1.launch-text {
    text-align: center;
    text-transform: uppercase;
    color: #B262E3;
    font-weight: bold;
}
p.big {
    font-size: 1.2em;
}

.valign-center{
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    height: auto; /* Example height */
}
.curve-bg{
    background-image: url("images/yellow-curve.png");
    width:100%;
    background-size: cover;
}

@media only screen and (max-width: 600px) {
    .header-section {
      padding-top:20%;
    }
  }