.bg-schedule-hours {
    background-image: url('../images/bg-headline.jpg');
    background-repeat: no-repeat;
    
    background-position: center;
    background-size: cover;
}
.bg-facial-services {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
.bg-waxing-services {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}


/* Default background image for small screens */
.bg-waxing-services {
    background-image: url('../images/bg-waxing-services-800x1037.jpg');
}
.bg-facial-services {
    background-image: url('../images/bg-facial-services-600x783.jpg');
}
  
/* Larger background image for medium screens */
@media (min-width: 768px) {
    .bg-waxing-services {
        background-image: url('../images/bg-waxing-services-1000x1037.jpg');
    }
    .bg-facial-services {
        background-image: url('../images/bg-facial-services-800x783.jpg');
    }
}
  
/* Even larger background image for large screens */
@media (min-width: 992px) {
    .bg-waxing-services {
        background-image: url('../images/bg-waxing-services-1400x1037.jpg');
    }
    .bg-facial-services {
        background-image: url('../images/bg-facial-services.jpg');
    }    
}
  
/* Largest background image for extra large screens */
@media (min-width: 1200px) {
    .bg-waxing-services {
        background-image: url('../images/bg-waxing-services.jpg');
    }
    .bg-facial-services {
        background-image: url('../images/bg-facial-services.jpg');
    }    
}
  


a {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: none;
    color: #336699;
}
.b-lg {
    font-size: 1.5rem;
}
.b-2lg {
    font-size: 2.5rem;
}
.b-xl {
    font-size: 3rem;
}
.b-xxl {
    font-size: 3.5rem;
}

.p-6 {
    padding: 4rem;
}
.pt-6 {
    padding-top: 4rem;
}
.pb-6 {
    padding-bottom: 4rem;
}
.ps-6 {
    padding-left: 4rem;
}
.pe-6 {
    padding-right: 4rem;
}
.py-6 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.px-6 {
    padding-left: 4rem;
    padding-right: 4rem;
}

.p-7 {
    padding: 5rem;
}
.pt-7 {
    padding-top: 5rem;
}
.pb-7 {
    padding-bottom: 5rem;
}
.ps-7 {
    padding-left: 5rem;
}
.pe-7 {
    padding-right: 5rem;
}
.py-7 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.px-7 {
    padding-left: 5rem;
    padding-right: 5rem;
}

.r-24 {
    border-radius: 24px;
}
.br-2 {
    border-radius: 24px;
}
.brt-2 {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.text-white-0 {
    color: #fbf2ed;
}
.text-gray-0 {
    color: #b7bcbf;
}
.text-gray-60 {
    color: #4f5152;
}
.text-green-80 {
    color: #66796b;
}

.border-white-5 {
    border: 5px solid #ffffff;
}

.hr-white-10 {
    width: 10%;
    border: 1px dashed #ffffff;
    margin-left: auto;
    margin-right: auto;
    opacity: 100% !important;
}
.hr-white-25 {
    width: 25%;
    border: 1px dashed #ffffff;
    margin-left: auto;
    margin-right: auto;
    opacity: 100% !important;
}
.hr-black-25 {
    width: 25%;
    border: 1px dashed #000000;
    margin-left: auto;
    margin-right: auto;
    opacity: 100% !important;
}

.bg-black-50 {
    background-color: rgba(0, 0, 0, 0.6);
}
.bg-black-25 {
    background-color: rgba(0, 0, 0, 0.6);
}
.bg-green-0 {
    background-color: #cbdbc5;
}
.bg-green-80 {
    background-color: #66796b;
}
.bg-brown-20 {
    background-color: #efdfcc;
}
.bg-brown-50 {
    background-color: #d4c2ad;
}
.bg-brown-80 {
    background-color: #ba8e7a;
}

.bg-white-0 {
    background-color: #FBF2ED;
}
.bg-gray-0 {
    background-color: #B7BCBF;
}
.bg-pink-0 {
    background-color: #E8D4C6;
}
.bg-yellow-0 {
    background-color: #dad4ce;
}
.bg-blue-50 {
    background-color: #729da6;
}
.bg-blue-80 {
    background-color: #374c50;
}
/*
.border {
    border-color: #374c50 !important;
}
*/
.border-brown-20-- {
    border-top: 10px dotted #efdfcc;
}
.border-brown-20-- {
    position: relative;
    padding: 20px;
    background-color: black;
}

.border-brown-20--::before {
    content: '';
    position: absolute;
    top: -10px; /* Adjust based on the size of your squares */
    right: -10px;
    bottom: -10px;
    left: -10px;
    background: 
        repeating-linear-gradient(90deg, transparent, transparent 5px, #efdfcc 5px, #efdfcc 10px),
        repeating-linear-gradient(0deg, transparent, transparent 5px, #efdfcc 5px, #efdfcc 10px);
    background-size: 10px 10px;
    background-origin: border-box;
    background-repeat: repeat;
    z-index: -1;
}


.bordered-element {
    position: relative;
    padding: 20px;
    background-color: #efefef;
}

.bordered-element::before {
    content: '';
    position: absolute;
    top: -10px; /* Adjust based on the size of your squares */
    right: -10px;
    bottom: -10px;
    left: -10px;
    background: 
        repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 10px),
        repeating-linear-gradient(0deg, transparent, transparent 5px, black 5px, black 10px);
    background-size: 10px 10px;
    background-origin: border-box;
    background-repeat: repeat;
    z-index: -1;
}


.bg-headline {
    background: linear-gradient(90deg, #efdfcc 60%, #d4c2ad 40%);
}
.bg-about {
    background: linear-gradient(90deg, #66796b 25%, #66796b 25%, #cbdbc5 25%, #cbdbc5 25%);
}
/*
.headline-region {
    opacity: 0;
    transform: translateX(100%);
    transition: transform 1s ease, opacity 1s ease;
    border: 10px solid #efdfcc;
}

.headline-region.visible {
    opacity: 1;
    transform: translateX(0);
}
*/
.slide-in-left, .slide-in-right {
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
}

.slide-in-left {
    transform: translateX(-100%);
}

.slide-in-right {
    transform: translateX(100%);
}

.slide-in-left.visible, .slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}





.gradient-container {
    position: relative;
    width: 100%;
    height: 30vh; /* Full viewport height */
}

.gradient-content {
    position: relative;
    z-index: 1; /* Ensure content is on top */
    padding: 20px; /* Adjust padding as needed */
}

.gradient-container::before,
.gradient-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ensure gradient is behind content */
}

.gradient-container::before {
    background: linear-gradient(90deg, #efdfcc 60%, #d4c2ad 40%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
}

.gradient-container::after {
    background: linear-gradient(0deg, #efdfcc 90%, #d4c2ad 10%);
    clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%);
}