/*
Theme Name: ST Laundry Services Child
Theme URI: https://striviothemes.com/product/st-laundry-service-wordpress-theme
Template: st-laundry-services
Author: KristynaBennett
Author URI: https://striviothemes.com/
Description: ST Laundry Services is a clean, modern, and responsive WordPress theme designed for laundry, dry cleaning, and garment care businesses. It features a professional layout that helps showcase services, pricing, and customer information with ease. The theme is lightweight, SEO-friendly, and compatible with popular plugins, making it easy to customize without coding knowledge. With mobile-friendly design, fast loading performance, and user-friendly customization options, ST Laundry Services helps businesses create a strong online presence. It is ideal for laundromats, dry cleaners, ironing services, and cleaning companies looking for a simple yet effective website solution.
Tags: blog,one-column,custom-background,custom-colors,full-width-template,custom-menu,custom-logo,featured-images,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.4.1779900438
Updated: 2026-05-27 16:47:18

*/


.elementor-20 .elementor-element.elementor-element-2aafbd0 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-20 .elementor-element.elementor-element-2aafbd0 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
    background-color: #062163;
    margin-bottom: -5px;
}

.why-choose{

display:flex;
flex-wrap:wrap;
overflow:hidden;

}


/* LEFT SIDE */

.left-content{

flex:0 0 38%;
background:#06152f;
padding:100px 60px;
display:flex;
justify-content:center;
flex-direction:column;
min-height:700px;

}

.sub-title{

font-size:15px;
letter-spacing:3px;
color:#5aa9ff;
font-weight:600;
margin-bottom:15px;

}

.left-content h2{

font-size:48px;
line-height:1.2;
color:#fff;
margin-bottom:20px;

}

.left-content p{

color:#c2cbdd;
line-height:30px;
margin-bottom:30px;

}

.main-btn{

display:inline-block;
padding:15px 35px;
background:#fff;
color:#06152f;
text-decoration:none;
font-weight:600;
border-radius:50px;
width:fit-content;
transition:.5s;

}

.main-btn:hover{

transform:translateY(-5px);

}


/* RIGHT SIDE */

.feature-grid{

flex:0 0 62%;
background:#fff;
padding:80px 50px;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}


.feature-card{

padding:35px 25px;
text-align:center;
background:#fff;
border-radius:25px;
box-shadow:0 10px 35px rgba(0,0,0,.08);

transition:all .5s ease;
cursor:pointer;

}


.feature-card:hover{

background:#06152f;
transform:translateY(-15px);

}


.icon-box{

width:80px;
height:80px;

margin:auto;
margin-bottom:20px;

display:flex;
justify-content:center;
align-items:center;

background:#06152f;
border-radius:50%;

transition:.6s;

}


.icon-box i{

font-size:30px;
color:#fff;
transition:.5s;

}


.feature-card:hover .icon-box{

background:#fff;
transform:rotate(360deg);

}


.feature-card:hover .icon-box i{

color:#06152f;

}


.feature-card h4{

font-size:22px;
margin-bottom:10px;
color:#06152f;
transition:.5s;

}

.feature-card p{

color:#666;
line-height:24px;
transition:.5s;

}


.feature-card:hover h4{

color:#fff;

}

.feature-card:hover p{

color:#d7d7d7;

}



/* MOBILE */

@media(max-width:991px){

.left-content,
.feature-grid{

flex:0 0 100%;

}

.feature-grid{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:767px){

.feature-grid{

grid-template-columns:1fr;

}

.left-content {
    padding: 10px 10px;
}

	.left-content {
   
    background: #06152f;
    padding: 35px 19px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: auto;
}
	
.left-content h2{

font-size:27px;

}
	.feature-grid {
   
    padding: 30px 15px;
    
    
}
	.process-section {
 
    padding: 30px 15px !important;
   
}
h1 {
    font-size: 32px !important;
}
	.cards-wrapper {
    gap: 94px !important;
}
	
	.features {
    margin-top: 45px !important;

}
	h4 {
    font-size: 1rem;
}
	.habitt-lodery-section {
    padding: 17px 0 !important;
    background: #fff;
}
}









.process-section {
    position: relative;
    min-height: 100vh;
    background: url('https://www.habbittlaundry.com/wp-content/uploads/2026/05/londaery-bg-image.png') center/cover no-repeat;
    padding: 80px 20px;
    overflow: hidden;

}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
    90deg,
    rgba(0,0,0,.90),
    rgba(6,21,47,.88),
    rgba(6,21,47,.75)
    );
}

.container{
    position:relative;
    z-index:2;
    max-width:1400px;
    margin:auto;
    text-align:center;
}

.top-badge{
    display:inline-block;
    padding:10px 30px;
    border-radius:50px;
    background:linear-gradient(90deg,#0a84ff,#14213d);
    color:#fff;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:25px;
}

h1{
    color:#fff;
    font-size:80px;
    font-weight:800;
    line-height:1.1;
}

h1 span{
    color:#0a84ff;
}

.subtitle{
    color:#fff;
    font-size:28px;
    margin-top:20px;
    margin-bottom:90px;
}

.cards-wrapper{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}

.process-card{
    width:300px;
    background:#fff;
    border-radius:28px;
    padding:120px 25px 40px;
    position:relative;
    box-shadow:0 15px 30px rgba(0,100,255,.25);
    transition:all .4s ease;
}

.process-card::after{
    content:'';
    position:absolute;
    bottom:-12px;
    left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:24px;
    height:24px;
    background:#fff;
}

.icon-circle{
    position:absolute;
    top:-65px;
    left:50%;
    transform:translateX(-50%);
    width:140px;
    height:140px;
    border-radius:50%;
    background:#fff;
    border:10px solid #0a84ff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 25px rgba(0,132,255,.45);
}

.icon-circle i{
    font-size:55px;
    color:#14213d;
}

.step-number{
    position:absolute;
    top:-8px;
    left:-8px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#0a84ff;
    color:#fff;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.process-card h3{
    font-size:22px;
    color:#14213d;
    margin-bottom:15px;
    font-weight:700;
    transition:.3s;
}

.line{
    width:50px;
    height:3px;
    background:#0a84ff;
    margin:15px auto 25px;
    transition:.3s;
}

.process-card p{
    color:#555;
    line-height:1.8;
    font-size:17px;
    transition:.3s;
}

.process-card span{
    color:#0a84ff;
    font-weight:700;
    transition:.3s;
}

/* SIMPLE HOVER */

.process-card:hover{
    background:linear-gradient(180deg,#0a84ff,#14213d);
    transform:translateY(-10px);
}

.process-card:hover h3,
.process-card:hover p,
.process-card:hover span{
    color:#fff;
}

.process-card:hover .line{
    background:#fff;
}

/* FEATURES */

.features{
    margin-top:80px;
    background:rgba(10,10,20,.75);
    border:1px solid rgba(255,255,255,.1);
    border-radius:25px;
    padding:35px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.feature{
    display:flex;
    align-items:center;
    gap:15px;
    color:#fff;
    text-align:left;
}

.feature i{
    color:#0a84ff;
    font-size:38px;
}

.feature h4{
    margin-bottom:5px;
}

.feature p{
    opacity:.8;
}

@media(max-width:1200px){

    .cards-wrapper{
        gap:70px;
    }

    .features{
        grid-template-columns:repeat(2,1fr);
    }

    h1{
        font-size:60px;
    }
}

@media(max-width:768px){

    .cards-wrapper{
        flex-direction:column;
        align-items:center;
    }

    .features{
        grid-template-columns:1fr;
    }

    h1{
        font-size:45px;
    }

    .subtitle{
        font-size:20px;
    }
}





.habitt-lodery-section{
padding:70px 0;
background:#fff;
}

.habitt-lodery-container{
width:1200px;
max-width:95%;
margin:auto;
}

.habitt-lodery-head{
text-align:center;
margin-bottom:40px;
}

.habitt-lodery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.habitt-lodery-card{

background:#fff;
border-radius:20px;
overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.4s;
}

.habitt-lodery-card:hover{

transform:translateY(-10px);

}

.habitt-lodery-card h3{

padding:20px;
font-size:20px;
text-align:center;
color:#1d2b53;
}


/* IMAGE AREA */

.image-box{

position:relative;
overflow:hidden;

height:280px;

}

.image-box img{

width:100%;
height:100%;
object-fit:cover;

transition:.6s;

}


/* overlay */

.overlay{

position:absolute;

top:0;
left:0;

height:100%;
width:100%;

display:flex;

justify-content:center;
align-items:center;

background:rgba(0,0,0,.2);

opacity:0;

transition:.5s;

}


/* image hover */

.image-box:hover img{

transform:scale(1.2);

filter:blur(4px);

}

.image-box:hover .overlay{

opacity:1;

}


/* button */

.habitt-btn{

padding:12px 25px;

border-radius:50px;

text-decoration:none;

background:linear-gradient(
90deg,
#2f80ed,
#1e5bff
);

color:#fff;

transform:translateY(30px);

opacity:0;

transition:.5s;

}

.image-box:hover .habitt-btn{

opacity:1;

transform:translateY(0);

}



@media(max-width:900px){

.habitt-lodery-grid{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:600px){

.habitt-lodery-grid{

grid-template-columns:1fr;

}

}





.habitt-marquee-section{

padding:25px 0;

background:linear-gradient(
90deg,
#081b44,
#112d72,
#081b44
);

overflow:hidden;

position:relative;

border-top:2px solid rgba(255,255,255,.1);
border-bottom:2px solid rgba(255,255,255,.1);

}


/* glowing top effect */

.habitt-marquee-section:before{

content:"";

position:absolute;

top:0;
left:0;

height:2px;
width:100%;

background:linear-gradient(
90deg,
transparent,
#2f80ed,
#ffffff,
#2f80ed,
transparent
);

animation:glowLine 3s infinite;

}


.habitt-marquee-wrap{

display:flex;

width:max-content;

animation:marqueeMove 60s linear infinite;

}


.habitt-marquee{

display:flex;

align-items:center;

white-space:nowrap;

}


.habitt-marquee span{

font-size:18px;

font-weight:700;

color:#fff;

padding:0 30px;

letter-spacing:1px;

transition:.4s;

}


.habitt-marquee span:hover{

color:#2f80ed;

transform:translateY(-4px);

}


@keyframes marqueeMove{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-100%);

}

}


@keyframes glowLine{

50%{

opacity:.3;

}

}


/* pause on hover */

.habitt-marquee-wrap:hover{

animation-play-state:paused;

}


@media(max-width:768px){

.habitt-marquee span{

font-size:14px;
padding:0 18px;

}

}



html,
body{
overflow-x:hidden !important;
width:100%;
max-width:100%;
}

*{
box-sizing:border-box;
}





p {
    margin-top: 0;
    margin-bottom: 0;
}
/* Premium Compact Container */
.habitt-form-new {
    max-width: 100%;
    margin: 0 auto;
    padding: 14px 15px;
    background: #ffffff;
    border: 1px solid #eef2f5;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


.habitt-form-new h2 {
    font-size: 25px;
    font-weight: 600;
    color: #000000;
    font-family: 'Poppins';
    text-transform: capitalize;
    margin: 0;
    padding-bottom: 12px;
}

/* Name aur Phone ko ek line me lane ke liye (Spacing Kam Karne Ke Liye) */
.habitt-form-new .form-row {
    display: flex;
    gap: 12px;
}
.habitt-form-new .form-row .form-group {
    flex: 1;
}

/* Form Group Spacing (Kam ki gayi hai) */
.habitt-form-new .form-group {
    margin-bottom: 14px;
    position: relative;
}

.habitt-form-new .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #0868f1;
    margin-bottom: 4px;
    transition: color 0.15s ease;
}

/* Sleek Compact Inputs */
.habitt-form-new input[type="text"],
.habitt-form-new input[type="tel"],
.habitt-form-new input[type="email"],
.habitt-form-new textarea {
    width: 100%;
    padding: 10px 12px; /* Tight Padding for Compact Look */
    font-size: 14px;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;
    transition: all 0.15s ease-in-out; /* Super Fast Hover/Click Transition */
}

/* Textarea Height */
.habitt-form-new textarea {
    height: 90px;
    resize: none;
}

/* Fast Hover Effect */
.habitt-form-new input:hover,
.habitt-form-new textarea:hover {
    border-color: #94a3b8;
}

/* Premium Click (Focus) Animation */
.habitt-form-new input:focus,
.habitt-form-new textarea:focus {
    border-color: #0f172a; /* Sophisticated Dark Border */
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08); /* Minimalist Subtle Glow */
}

/* Input Focus hone par Label ka Color Change Animation */
.habitt-form-new input:focus ~ label,
.habitt-form-new input:focus-within ~ label,
.habitt-form-new .form-group:focus-within label {
    color: #0f172a;
}

/* Submit Button Layout */
.habitt-form-new .form-submit {
    margin-top: 18px;
    text-align: right;
}

/* Modern Pill-Style Button */
.habitt-form-new input[type="submit"] {
    background: #0f172a; /* Dark Luxury Theme */
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%; /* Mobile friendly full-width button */
}

/* Button Hover State */
.habitt-form-new input[type="submit"]:hover {
    background: #1e293b;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.habitt-form-new input[type="submit"]:active {
    transform: scale(0.98); /* Click karne par dabne wala effect */
}

/* WordPress CF7 Error Fixer */
.habitt-form-new .wpcf7-form-control-wrap {
    display: block;
}







.marquee-wrapper{
    width:100%;
    overflow:hidden;
    padding:30px 0;
}

.marquee-track{
    display:flex;
    gap:25px;
    width:max-content;
    animation:marquee 7s linear infinite;
}

.img-box{
    width:500px;
    height:224px;
    flex-shrink:0;
    background:#fff;
    border-radius:20px;
    padding:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.img-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
}

@keyframes marquee{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

.marquee-wrapper:hover .marquee-track{
    animation-play-state:paused;
}

@media(max-width:768px){

    .img-box{
        width:300px;
        height:224px;
    }

}




.whatsapp-float{
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 65px;
    height: 65px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(37,211,102,0.5);
    z-index: 9999;
    animation: pulse 2s infinite;
    transition: all .3s ease;
}

.whatsapp-float:hover{
    transform: scale(1.15);
}

@keyframes pulse{
    0%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37,211,102,.7);
    }
    70%{
        transform: scale(1.08);
        box-shadow: 0 0 0 20px rgba(37,211,102,0);
    }
    100%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37,211,102,0);
    }
}