How To Make a Salon & Spa Website ~Step By Step~ 2026

body, html { overflow-x: hidden; }

@media (max-width: 767.98px) {
    .mxw-480 { max-width: 480px !important; }
}

@media (min-width: 1260.98px) {
    .no-wrap .elementor-heading-title { white-space: nowrap; }
}

.page-content a{
	text-decoration:none;
}

.elementor-icon-wrapper{
	display: flex;
}

.leafmove img {
    animation: leafMove 1.2s infinite;
}

@keyframes leafMove {
    0%, 100% { transform: scale(1, 1); }
    25% { transform: scale(0.9, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    75% { transform: scale(0.95, 1.05); }
}

.leaf-hang img {
    animation: leaf-hang 6s linear infinite alternate;
    transform-origin: top right;
}

.leaf-hang-bottom img {
    animation: leaf-hang 4s linear infinite alternate;
    transform-origin: bottom right;
}

@keyframes leaf-hang {
    from { transform: rotate(0deg); }
    to { transform: rotate(10deg); }
}

.coconut-leaf img {
    animation: coconut-leaf 3s linear infinite alternate;
    transform-origin: left;
}

@keyframes coconut-leaf {
    from { transform: rotate(-1deg); }
    to { transform: rotate(10deg); }
}

.e-btn .elementor-button {
    background: transparent;
}

.e-btn .elementor-button span.elementor-button-text {
    background: #FF6A4B;
    padding: 8px 23px;
    border: 1px solid #FF6A4B;
    border-radius: 100px;
    transition: all .5s;
}

.e-btn .elementor-button-icon {
    background: #FF6A4B;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px;
    border-radius: 50%;
    border: 1px solid #FF6A4B;
}

.e-btn .elementor-button:hover span.elementor-button-text {
    background: transparent;
}

.e-btn .elementor-button:hover .elementor-button-icon {
    animation: wobble-vertical 1s ease-in-out 1;
}

@keyframes wobble-vertical {
    16.65% { transform: translateY(8px); }
    33.3% { transform: translateY(-6px); }
    49.95% { transform: translateY(4px); }
    66.6% { transform: translateY(-2px); }
    83.25% { transform: translateY(1px); }
    100% { transform: translateY(0); }
}

span.elementor-button-content-wrapper { max-height: 40px; }

.service-box {
    border: 1px solid;
    border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16)) 1;
    position: relative;
}

.service-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0) 20.12%, #fff 100%);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: .4s linear;
}

.service-box:hover::before { transform: scaleY(1); }

.service-box:hover .elementor-heading-title {
    color: #110F49 !important;
    transition-delay: .3s;
}

.service-box:hover .elementor-button,
.service-box:hover .jkit-button-wrapper {
    background: #FF6A4B !important;
    transition-delay: .3s;
}