/* Alternative Home CSS Starts Here */ 

.hero-service-area * {
    color: #fff !important;
}

.hero-ser-title {
    margin: 0 !important;
    font-size: 25px;
}

.hero-plus-icon {
    font-size: 35px;
    border: 2px solid #fff !important;
    width: 40px;
    height: 40px;
    line-height: 35px;
    border-radius: 50%;
    margin: 10px auto 0;
}

@media (min-width: 768px) {
    .hero-service-area {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        align-items: center;
    }
    
    .hero-service-col {
        width: 25%;
        position: relative;
        overflow: hidden;
        transition: .4s ease-in;
        height: 75vh;
    }
    
    .hero-service-col a {
        padding: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9;
        position: relative;
        height: 100%;
    }
    
   .hero-plus-icon {
       margin-top: 30px;
    }
    
    .hero-service-col:hover .hero-ser-text {
        opacity: 1;
        height: auto;
        font-size: 20px;
    }
    
    .hero-service-col:nth-child(even):after,
    .hero-service-col:nth-child(odd):after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    
    .hero-service-col:nth-child(odd):after {
        background-color: rgb(0 0 0 / 60%);
    }

    .hero-service-col:nth-child(even):after {
        background-color: rgb(0 0 0 / 50%);
    }
    
    .hero-ser-title {
        font-size: 27px;
    }
    
    .hero-service-col:before {
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: .3s ease-in;    
    }
    
    .hero-service-col:hover:before {
        opacity: 1;
        transform: scale(1.05);
    }
    
    .hero-service-col.hero-service-col-one:hover:before {
        background-image: url('https://fancywaxspa.com/wp-content/uploads/2024/04/Brazilian-Services.webp');
        background-position: 25% 50%;
    }
    
    .hero-service-col.hero-service-col-two:hover:before {
        background-image: url('https://fancywaxspa.com/wp-content/uploads/2024/04/Waxing-Services.webp');
        background-position: center center;
    }
    
    .hero-service-col.hero-service-col-three:hover:before {
        background-image: url('https://fancywaxspa.com/wp-content/uploads/2024/04/Facial-Services.webp');
        background-position: center center;
    }
    
    .hero-service-col.hero-service-col-four:hover:before {
        background-image: url('https://fancywaxspa.com/wp-content/uploads/2024/04/Body-Treatment-Services.webp');
        background-position: center right;
    }
}

@media (max-width: 767px) {
    .hero-service-area {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 25px;
        padding: 25px;
        text-align: center;
    }
    
    .hero-service-col a {
        background: rgb(129 181 42 / 75%);
        padding: 15px;
        display: block;
        transition: .5s;
    }

    .hero-service-col a:hover {
        transform: scale(0.95);
        background: var(--primary-color);
    }
}

/* Alternative Home CSS Ends Here */