body {
    margin: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

a{
    text-decoration: none;
    font-family: inherit;
    color: inherit;
}

.main-logo{
    width: calc(18*var(--unit-pixel));
    height: auto;
    object-fit: cover;
}

header,
section,
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

@media(max-width:500px) {
    .quick-booking {
        height: max-content !important;
    }
}

.start-position {
    color: var(--hover-rose) !important;
}



header {
    border-bottom: 1px inset black;
    box-shadow: 5px 5px 8px #00000058;
}


/* header */
.header-content {
    height: calc(4vh + var(--height-s)) ;
    max-width: var(--max-content-width);
    width: 96%;
    max-height:   calc(var(--content-height-unit)) ;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.logo-1 {
    font-family: var(--main-font-style);
    font-size: var(--font-xl);
    font-weight: 400;
    display: flex;
    align-items: center;
}

.logo-subitile {
    font-family: var(--main-font-style);
    font-size: var(--font-xs);
    font-weight: 400;
}

.img-social-media {
    height: var(--spacing-xl);
}

.img-social-media:hover {
    cursor: pointer;
}

nav {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-l);
    font-family: var(--secondary-font-style);
    font-size: var(--font-m);

}



.social-media-header-logo {
    display: flex;
    gap: var(--spacing-s);
}

.style-social-media:hover {
    cursor: pointer;
}

.menu {
    transition: all 300ms ease-in-out;
}

.menu:hover {
    cursor: pointer;
    color: var(--hover-rose);
}

.menu-responsive {
    transition: all 300ms ease-in-out;
}

.menu-responsive:hover {
    cursor: pointer;
    color: var(--hover-rose);
}

/* hero */
.hero {
    position: relative;
}

.overlay-menu {
    position: absolute;
    z-index: 1;
    height: calc(9*var(--height-s));
    max-width: var(--max-content-width);
    width: 100%;
    max-height: calc(10*var(--content-height-unit));
    background-color: var(--neutral-background);
}

.overlay-menu-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
    font-family: var(--secondary-font-style);
    font-size: var(--font-m);
    align-items: center;
    padding-top: var(--spacing-xl);
}

.social-media-header-logo-responsive {
    display: flex;
    gap: var(--spacing-s);
    justify-content: center;
    padding-top: var(--spacing-xl);
}

.hero-content {
    height: calc(9*var(--height-s));
    max-width: var(--max-content-width);
    width: 96%;
    max-height: calc(10*var(--content-height-unit));
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.text-part {
    width: 50%;
    display: flex;
    flex-direction: column;

}

.opening-text {
    display: flex;
    justify-content: center;
}

.opening-text:hover {
    cursor: pointer;
}

.picture-part {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-family: var(--welcome-font-style);
    font-weight: 400;
    font-size: var(--font-h1);
    margin-block-start: 0;
    margin-block-end: 0;
    width: 96%;
    color: var(--gold-primary);
}

h2 {
    font-family: var(--title-font-style);
    font-weight: 400;
    font-size: calc(1.5*var(--font-h2));
    margin-block-start: 0;
    margin-block-end: 0;
    color: var(--gold-dark);
}

p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.subtitle {
    font-family: var(--main-font-style);
    font-size: calc(1.25*var(--font-xs));
    width: 96%;
    color: var(--gold-dark);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
}

/* service */
.service-content {
    height: max-content;
    max-width: var(--max-content-width);
    max-height: calc(6*var(--content-height-unit));
    width: 96%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(2*var(--spacing-xl));
}

.service-content-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: max-content;
    padding: var(--spacing-xl);
}

.service-content-top {
    display: flex;
}

.service-content-bottom {
    display: flex;
}

.card {
    display: flex;
}

.bottom {
    flex-direction: row-reverse;
}

.card-pic {
    width: calc(8*var(--spacing-xl));
    height: calc(8*var(--spacing-xl));
}

.card-text {
    width: calc(8*var(--spacing-xl));
    height: calc(8*var(--spacing-xl));
    background-color: var(--hover-rose-secondary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

}

.card-text-top {
    font-family: var(--main-font-style);
    font-size: var(--font-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-xl);
}

.font-adjustable {
    flex-direction: column;
}

.card-text-bottom {
    font-family: var(--secondary-font-style);
    font-size: var(--font-m);
    transition: all 300ms ease-in-out;
    padding: var(--spacing-s);
    margin-bottom: var(--spacing-xl);
}

.bottom-make-up:hover {
    color: var(--hover-rose) !important;
    background-color: black !important;
}

.bottom-hair:hover {
    color: var(--hover-rose) !important;
    background-color: unset !important;
}

.card-text-bottom:hover {
    cursor: pointer;
    background-color: var(--hover-rose-secondary);
    color: white;
}

.card-2 {
    background-color: black !important;
    color: white !important;
}

.card-3 {
    background-color: var(--neutral-background) !important;

}

.pic-img {
    width: 100%;
    height: 100%;
}

/*specials  */
.special-offer-content {
    height: calc(10*var(--height-s));
    max-width: var(--max-content-width);
    width: 96%;
    max-height: calc(10*var(--content-height-unit));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-l);
}

.about-me-start-pic-parent {
    height: max-content;
    width: max-content;
    border-radius: var(--round-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-me-story {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-l);
    background-color: white;
    border: 1px solid #0000008a;
    border-radius: 10px;
    box-shadow: 10px 10px 5px #00000073;
    padding: var(--spacing-l);

}

.about-me-story-picture {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;

}

.about-me-short-text {
    font-size: var(--font-m);
    font-family: var(--secondary-font-style);
}

.about-me-story-text {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-l);
}

.about-me-story-pic-start {
    width: 300px;
    height: auto;
    border-radius: var(--round-border);
}

.about-me-story-link-parent {
    width: 100%;
}

.about-me-link {
    padding: var(--spacing-s);
    border-radius: var(--round-border);
    border: 1px solid var(--gold-dark);
    width: max-content;
    background-color: var(--gold-primary);
    font-family: var(--secondary-font-style);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.about-me-link:hover {
    background-color: white;
    cursor: pointer;
    color: var(--gold-dark);
}

.special-offer-inner-box {
    background-color: black;
    height: 80%;
    width: 50%;
}

.special-offer-inner-header {
    height: 20%;
    display: flex;
    justify-content: center;
}

.special-offer-inner-body {
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: var(--spacing-l);

}

.special-offer-inner-footer {
    font-family: var(--secondary-font-style);
    font-size: var(--font-m);
    color: white;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sp-offer-in-text-footer {
    padding: var(--spacing-s);
    transition: all 300ms ease-in-out;
}

.sp-offer-in-text-footer:hover {
    cursor: pointer;
    color: var(--hover-rose-secondary);
}

.offer-list {
    color: white;
    font-family: var(--secondary-font-style);
    font-size: var(--font-l);
    display: flex;
    width: 80%;
}

.offer-list-text {
    width: 90%;
}

.offer-list-price {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* book now */
.book-now-content {
    height: calc(9*var(--height-s));
    max-height: calc(5*var(--content-height-unit));
    max-width: var(--max-content-width);
    width: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

@media(max-width:500px) {
    .book-now-content {
        height: max-content;
        max-height: max-content;
    }
}

.book-now-inner-box {
    width: 96%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.book-now-header {
    display: flex;
    justify-content: center;
}

.book-now-body {
    height: 64%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-s);
    border: 2px solid white;
}

.book-now-body-title {
    font-family: var(--main-font-style);
    font-size: var(--font-xl);
}

.book-now-body-duration {
    font-family: var(--secondary-font-style);
    font-size: var(--font-l);
}

.book-now-body-price {
    font-family: var(--secondary-font-style);
    font-size: var(--font-l);
}

.book-now-body-button {
    font-family: var(--secondary-font-style);
    font-size: var(--font-l);
    width: calc(4*var(--spacing-l));
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--hover-rose);
    padding: var(--spacing-xs);
    transition: all 300ms ease-in-out;
}

.book-now-body-button:hover {
    cursor: pointer;
    text-decoration: underline;
    color: black;
}

/*reference */
.reference-content {
    height: max-content;
    max-height: calc(5*var(--content-height-unit));
    max-width: var(--max-content-width);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-sizing: border-box;
}

.reference-inner-box {
    width: 96%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-l);

}

.reference-header {
    font-family: var(--main-font-style);
    font-size: var(--font-xl);
}

.reference-body {
    display: flex;
    flex-direction: column;
    width: max-content;
    gap: var(--spacing-xl);
}

.reference-card-text {
    font-family: var(--secondary-font-style);
    font-size: calc(0.8*var(--font-l));
}

.reference-card-writer-label {
    font-family: var(--secondary-font-style);
    font-size: var(--font-m);
}

.ref-card {
    width: 720px;
    border: 1px solid #B8941E;
    box-shadow: 5px 5px 8px #B8941E;
    padding: var(--spacing-l);
    border-radius: var(--round-border);
}
@media(max-width:802px){
    .ref-card {
        width: 500px;
    }
}

@media(max-width:560px){
    .ref-card {
        width: 300px;
    }
}

@media(max-width:360px){
    .ref-card {
        width: 200px;
    }
}
/* end of index.css 1 */