#homeBtn{
    background-color: var(--pink-100);
    color: var(--pink-700);
}







/* Main Content */

main{
    min-height: 100vh;
}

.section1{
    min-height: 90vh;
    background: linear-gradient(to right,#ec4899 ,var(--rose-500));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 1rem 1rem 1rem 1rem;
    margin-top: 10vh;
}

h2{
    font-size: 5rem;
    color: white;
    font-weight: 700;
    width: 70vw;
    text-align: center;
}

h2 span{
    color: var(--pink-200);
}

.section1 p{
    font-size: 2rem;
    color: white;
    width: 80vw;
    text-align: center;
    line-height:1.6;
    font-weight: 510;
}

#actionBtnContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.actionBtn{
    width: 90vw;
    max-width: 530px;
    padding: 1.2rem;
    border-radius: 5px;
    font-size: 2rem;
    font-weight: 300;
    cursor: pointer;
    transition: 0.4s color ease-in-out, 0.4s background-color ease-in-out;
}

#bookNowBtn{
    background-color: white;
    border: 1px solid transparent;
    color: var(--pink-500);
}

#bookNowBtn:hover{
    background-color: var(--pink-50);
}

#viewServicesBtn{
    background-color: transparent;
    color: white;
    border: 1px solid white;
    text-align: center;
    text-decoration: none;
}

#viewServicesBtn:hover{
    background-color: white;
    color: var(--pink-500);
}


/* section 2 */

.section2{
    min-height:90vh;
    background-color: var(--pink-100);
    padding: 1rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.treatmentWrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

@media (min-width:1200px) {
    .treatmentWrapper{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.servicesHeader
{
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

h3{
    font-size: 4rem;
    color: var(--gray-800);
    font-weight: 600;
    text-align: center;
}

.servicesHeader p{
    color: var(--gray-600);
    font-size: 2.2rem;
    text-align: center;
}


.typeCard{
    width: 90vw;
    min-height: 30vh;
    max-width: 550px;
    background-color:white ;
    border: 1px solid var(--pink-200);
    border-radius: 5px;
    padding: 1rem;
}

.typeTitle{
    font-size: 2.5rem;
    color: var(--pink-600);
    font-weight: 550;
    text-align: center;
    margin-bottom: 0.6rem;
}

.typeDesc{
    color: var(--gray-500);
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 2rem;
}

.treatmentList{
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.5rem;
}

.treatment{
    font-size: 1.9rem;
    color: var(--gray-800);
    display: flex;
    justify-content: space-between;
}
.treatment span{
    font-weight: 600;
}


/* section 3 */

.section3{
    background-color: white;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    padding: 1rem 1rem 10rem 1rem;
}

.reviewsHeader{
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reviewCard{
    background-color: white;
    min-height: 30vh;
    max-width: 500px;
    border: 1px solid var(--gray-300);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    line-height: 1.6;
}

.reviewsWrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

@media (min-width:1100px) {
    .reviewsWrapper{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.starWrapper svg{
    fill: #facc15;
}

.reviewCard q{
    color: var(--gray-500);
    font-size: 1.8rem;
    text-align: center;
    width: 90%;
}

.reviewCard p{
    font-size: 1.8rem;
    color: var(--pink-600);
    font-weight: 500;
}


/* section 4 */

.section4{
    background: linear-gradient(to right,var(--pink-500), var(--rose-500));
    height:60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.section4 h3{
    color: white;
}

.section4 p{
    color: white;
    font-size: 2.2rem;
    width: 75%;
    text-align: center;
}

.bookApptBtn{
    width: 65%;
    max-width: 530px;
    padding: 1.2rem;
    border-radius: 5px;
    font-size: 2rem;
    font-weight: 300;
    cursor: pointer;
    transition: 0.4s color ease-in-out, 0.4s background-color ease-in-out;
    background-color: white;
    border: 1px solid transparent;
    color: var(--pink-500);
}

.bookApptBtn:hover{
    background-color: var(--pink-50);
}


/* footer */

footer{
    height: 80vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

@media (min-width:1000px) {
    footer{
        flex-direction: row;
        height: 40vh;
    }
}


footer div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 40%;
}

footer div svg{
    stroke: var(--pink-500);
}

.footerHeading{
    font-size: 1.8rem;
    color: var(--gray-800);
    font-weight: 525;
}

.headingInfo{
    color: var(--gray-500);
    font-size: 1.8rem;
    text-align: center;
    width: 200px;
}