* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --accent-color: #f9c3ce;
    --primary-color: #aa2c49;
    --secondary-color: #111;
    --p-tag: 18px;
    /* --h1-font-size: 5.5rem; */
    /* --h2-font-size: 4.0rem; */
    /* --h3-font-size: 3.0rem; */
}

body {
    overflow-x: hidden;
}

.about-header {
    /* position: relative; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 75px;
    /* height: calc(100vh - 50px); */
}

.btn {
    display: inline-block;
    /* margin-top:50px; */
    padding: 10px 35px;
    font-size: 20px;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    /* background: var(--primary-color); */
    border: 2px solid transparent;
    transition: 0.2s ease;
    text-decoration: none;
    text-align: center;
}

/* .btn-book-appointment {
    background-color: var(--primary-color);
} */

.btn-view-services {
    background-color: var(--secondary-color);
}

/* p {
    font-size: var(--p-tag);
} */

/* h1 {
    font-size: var(--h1-font-size);
} */

/* h2 {
    font-size: var(--h2-font-size);
} */

/* h3 {
    font-size: var(--h3-font-size);
} */

div ul li {
    list-style: none;
}

div ul li a {
    text-decoration: none;
}

.about-section {
    position: relative;
    width: 100vw;
    padding-top:100px;
    /* height:inherit; */
    /* margin-top: 5.3rem;
    padding-top: 1rem; */
    background-color: white;
    /* background-color: var(--primary-color); */
}

.about-section > div {
    width: 80vw;
    margin: 0 auto;
    background-color: #fff;
}

.large-img-and-content {
    position: relative;
}

.large-img-container {
    /* width: 70%; */
    display: flex;
    justify-content: center;
}

.our-story-container {
    position: relative;

}

.two-para-text {
    position: relative;
    z-index: 4;
    text-align: left;
    font-size: 20px;
    line-height: 1.5;
    margin-top:40px;
    /* background:#f9c3ce; */
    border-top-left-radius:50px;
    border-bottom-right-radius: 50px;
    padding:20px
}
.img-and-large-text {
    /* width:100%; */
    display: flex;
    justify-content: space-evenly;
    position: relative;
}

.we-are-salon h3 {
    text-align: center;
}

.img-and-large-text .we-are-salon {
    display: flex;
    justify-content: center;
}

.img-and-large-text div img {
    width: auto;
}

.img-and-text-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-left: -1px;
    z-index: 4;
}

.text-under-large-image {
    height: fit-content;
    /* background:var(--primary-color); */
    padding: 20px;
    width: 45%;
    color: #fff;
    /* position: absolute;
    bottom: 0; */
}

.img-and-content .img-and-large-text div {
    text-align: center;
}

@media screen and (max-width: 1170px) {
    .about-section > div {
        width: 100%;
        padding: 0 20px;
    }

    .img-and-large-text div img {
        height: 90% !important;
    }

    .brush-img-container {
        height: 250px !important;
    }

    .brush-img-container img {
        width: 30% !important;
        height: auto !important;
    }
}

@media screen and (max-width:940px) {

    .our-story-container {
        width: 100% !important;
    }

    .about-img-2 {
        display: none;
    }

    .large-img-container {
        width: 100% !important;
        padding-top: 50px;
    }

    .img-and-large-text {
        flex-direction: column-reverse;
        align-items: center;
    }

    .img-and-large-text div img {
        position: relative !important;
        width: 60%;
    }

    .img-and-text-content {
        justify-content: center;
    }

    .text-under-large-image {
        width: 80%;
    }

    .core-values-container {
        flex-direction: column;
    }
}

@media screen and (max-width: 550px) {
    .img-and-large-text div img {
        position: relative !important;
        width: 80%;
    }

    .text-under-large-image {
        width: 100%;
    }
}

@media screen and (max-width: 440px) {

    .two-para-text {
        background: transparent !important;
        padding: 0;
    }
    .book-now-view-services-btn-container {
        flex-direction: column !important;
        align-items: center;
    }

    .book-now-view-services-btn-container a {
        width: 75%;
    }
}