html {
    scroll-behavior: smooth;
}

/* Ensure the carousel takes up 70% of the screen width */
#salonCarousel {
    width: 70%;
    margin: 0 auto; /* Centers the carousel */
}

/* Footer */
footer {
    background-color: #8a5d3b; /* Dark contrasting background color */
    color: white; /* Text color */
}

#services {
    background-color: #e6dbca; /* Creamy background for services */
    padding: 10px 0;
}

.services-list {
    list-style: none; /* Removes default list styling */
    padding: 0;
}

.services-list li {
    display: flex; /* Enables flexbox layout */
    justify-content: space-between; /* Spaces out the service name and price */
    margin-bottom: 10px; /* Adds space between each service */
    padding: 5px 0; /* Padding for each list item */
    border-bottom: 0px solid #ccc; /* Optional: Adds a line under each item */
}

/*.services-list li:nth-child(1) {*/
.services-list li.li-header {
    color: #835b3d; /* Red color for the first item */
    font-family: Georgia, serif; /* Different font for the first item */
    justify-content: center; /* Center the content of the first item */
    border-bottom: 2px solid #835b3d; /* Optional: Adds a line under each item */
}


.service-name {
    font-weight: bold; /* Makes the service name bold */
}

.service-price {
    /* Additional styling for the price, if needed */
}


body {
    margin: 0;
    font-family: 'Roboto', sans-serif; /* This is a good default font */
    padding-top: 60px; /* Add top padding to body to prevent content from hiding under the header */
}

.transparent-header {
    position: fixed; /* Fix the position to the top of the viewport */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    background: black;
    /*background: rgba(255, 255, 255, 0.5); Transparent background */
    z-index: 10; /* Ensures the header stays on top of other content */
    padding: 10px 0; /* Padding for aesthetic spacing */
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); Optional: adds a subtle shadow */
    box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.transparent-header h1 {
    font-family: 'Playfair Display', serif; /* A font that's often used for luxury branding */
    font-weight: 700;
    font-size: 2rem;
    color: white;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    header {
        padding: 30px;
    }
    .transparent-header h1 {
        font-size: 1.5em;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    header {
        padding: 40px;
    }
    .transparent-header h1 {
        font-size: 2.5em;
    }
}

.custom-selector {
    background-color: #e6dbca;
}

#backToTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position */
    bottom: 100px; /* Place it 20px from the bottom */
    left: 47%; /* Place it 30px from the right */
    z-index: 99; /* Make sure it sits on top of other elements */
    border: none; /* Remove border */
    outline: none; /* Remove outline */
    background-color: #8a5d3b; /*Background color */
    color: white; /* Text color */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 15px; /* Padding */
    border-radius: 50%; /* Makes it circular */
    width: 50px; /* Fixed width */
    height: 50px; /* Fixed height, same as width for circle */
    text-align: center; /* Center the text/icon inside */
    font-size: 16px; /* Adjust font size as needed */
    line-height: 20px; /* Aligns text vertically */
}

#backToTopBtn:hover {
    background-color: #555; /* Color change on hover */
}