gihtml, body{
max-width:100%;
overflow-x:hidden;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
background:#f4f8ff;
}
/*---------------- HEADER ----------------*/
.account-img{
width:35px;
height:35px;
border-radius:50%;
cursor:pointer;
border:3px solid white;
object-fit:cover;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}
.cart-btn{
position:relative;
color:#000;
font-size:28px;
}
#cart-count{
position:absolute;
top:-8px;
right:-12px;
width:22px;
height:22px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:12px;
}
.header{
position:fixed;
top:10px;
left:50%;
transform:translateX(-50%);
width:96%;
z-index:1000;
transition:all .35s ease;
}
.navbar{
display:flex;
align-items:center;
justify-content:space-between;
min-height:55px;
padding:0 18px;
background:transparent;
border-radius:40px;
transition:all .35s ease;
}
.header.scrolled .navbar{
background:rgba(255,255,255,0.22);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,0.35);
border-radius:50px;
box-shadow:0 8px 32px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.35);
}
.logo,.nav-link,.cart-btn{
color:#fff !important;
}
.header.scrolled .logo,.header.scrolled .nav-link,.header.scrolled .cart-btn{
color:#222 !important;
}
.hero .container1{
width:100%;
max-width:100%;
margin:0;
padding:0;
}
.logo{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
font-size:24px;
font-weight:700;
flex:0 0 auto;
}
.logo img{
height:48px;
}
.nav-links{
display:flex;
align-items:center;
gap:20px;
list-style:none;
margin:0 auto;
padding:0;
}
.nav-links a{
text-decoration:none;
color:#222;
font-weight:500;
transition:.3s;
}
.nav-links a:hover{
color:#0d6efd;
}
.login-btn{
padding:12px 22px;
border-radius:40px;
border:2px solid #0d6efd;
text-decoration:none;
color:#0d6efd;
font-weight:600;
}
@media (max-width:767px){
.nav-links{
display:none !important;
}
.nav-btns{
display:none !important;
}
.navbar-toggler{
display:block !important;
}
.hero{
width:100%;
height:42vh !important;
min-height:250px;
max-height:340px;
overflow:hidden;
}
.hero-content{
position:absolute;
width:92% !important;
max-width:420px;
left:50% !important;
right:auto !important;
top:62% !important;
transform:translate(-50%,-50%) !important;
padding:0 5px !important;
text-align:center;
z-index:2;
}
.hero-content h1{
width:100%;
max-width:100%;
margin:0 auto 8px;
font-size:clamp(16px,5vw,21px) !important;
line-height:1.25;
font-weight:700;
overflow-wrap:break-word;
word-break:normal;
}
.hero-content p{
width:100%;
max-width:100%;
margin:0 auto 12px;
font-size:clamp(10px,3vw,13px) !important;
line-height:1.45;
overflow-wrap:break-word;
word-break:normal;
}
.hero-btn{
display:inline-block;
padding:8px 18px;
font-size:clamp(10px,2.8vw,13px);
line-height:1.2;
white-space:nowrap;
}
.hero-image{
width:100%;
height:100%;
right:0;
left:0;
}
.hero-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
}
.scroll-indicator{
bottom:4px;
}
}
@media (min-width:768px) and (max-width:991px){
.hero{
width:100%;
height:45vh;
}
.logo img{
height:48px;
width:auto;
}
.nav-links{
gap:10px;
}
.hero-content{
width:82%;
max-width:600px;
left:50%;
top:65%;
transform:translate(-50%,-50%);
}
.hero-content h1{
font-size:26px;
line-height:1.3;
}
.hero-content p{
font-size:18px;
}
}
@media(min-width:992px){
.navbar{
gap:14px;
}
.nav-links{
gap:12px;
margin-left:10px;
margin-right:10px;
}
.hero{
width:100%;
height:45vh;
}
}
/*---------------- HERO ----------------*/
.hero{
position:relative;
width:100%;
height:70vh;
margin-top:0;
overflow:hidden;
left:0;
right:0;
}
.hero-image{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.hero-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
object-position:center center;
}
.hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.35);
z-index:1;
}
.hero-content{
position:absolute;
top:72%;
left:34%;
transform:translate(-50%,-50%);
z-index:2;
text-align:center;
color:#fff;
width:80%;
max-width:700px;
padding:0 15px;
}
.hero-content h1{
font-size:clamp(1.5rem,3vw,2.2rem);
line-height:1.25;
font-weight:700;
margin-bottom:14px;
max-width:100%;
overflow-wrap:break-word;
}
.hero-content p{
font-size:clamp(0.90rem,1.8vw,1.3rem);
line-height:1.5;
margin-bottom:20px;
max-width:100%;
overflow-wrap:break-word;
}
.hero-btn{
display:inline-block;
padding:11px 28px;
background:#0d6efd;
color:#fff;
text-decoration:none;
border-radius:50px;
font-weight:600;
}
.hero-btn:hover{
background:#0b5ed7;
}
.mobile-link{
display:flex;
align-items:center;
padding:12px 5px;
text-decoration:none;
color:#222;
font-size:17px;
}
.mobile-link:hover{
background:#e0edfe;
border-radius:8px;
}
.service-link{
display:block;
padding:7px;
text-decoration:none;
color:#333;
}
.service-link:hover{
background:#e0edfe;
}
.mobile-menu{
width:280px !important;
height:fit-content !important;
max-height:85vh;
top:75px;
border-radius:15px 0 0 15px;
}
.mobile-menu .offcanvas-body{
overflow-y:auto;
}
.navbar-toggler:focus{
box-shadow:none;
}
body:has(.offcanvas.show) .navbar-toggler{
display:none;
}
.navbar-brand,.navbar-brand:hover{
color:000 !important;
}
.navbar .btn-outline-primary{
color:000 !important;
border-color:000 !important;
}
.navbar .btn-outline-primary:hover{
background-color:000 !important;
color:#5cabf5 !important;
}
.nav-link{
color:000 !important;
}
.carousel-inner{
height:550px;
}
.banner-overlay{
z-index:1;
}
.offcanvas a{
text-decoration:none;
font-size:16px;
}
.offcanvas{
z-index:1050;
}
.offcanvas-backdrop{
z-index:1040;
}
#cartModal{
z-index:2000 !important;
}
/* ---------------------------css for map-----------------*/
.coverage-right{
height:420px;
display:flex;
flex-direction:column;
}
.coverage-title{
font-size:32px;
font-weight:700;
margin-bottom:25px;
color:#1E3A5F;
}
.state-scroll{
height:370px;
overflow-y:auto;
scroll-behavior:smooth;
position:relative;
scrollbar-width:none;
}
.state-scroll::-webkit-scrollbar{
display:none;
}
.state-card{
display:flex;
align-items:center;
gap:18px;
padding:28px;
margin-bottom:18px;
background:#fff;
border-radius:18px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:all 0.4s ease;
}
.state-card.active{
background:linear-gradient(135deg,#1565C0,#42A5F5);
transform:translateX(8px);
box-shadow:0 10px 25px rgba(0,0,0,.18);
}
.state-card.active h4,.state-card.active p{
color:#fff;
}
.state-dot{
width:16px;
height:70px;
border-radius:30px;
}
.state-details h4{
margin-bottom:8px;
font-weight:700;
}
.state-details p{
margin:3px 0;
color:#555;
font-size:15px;
}
.state-dot{
width:18px;
height:70px;
border-radius:30px;
background-color:var(--state-color);
}
.coverage-section{
padding:10px 0;
background:#f4f9ff;
}
.section-title{
text-align:center;
margin-bottom:60px;
}
.section-title h2{
font-size:42px;
font-weight:700;
color:#173A63;
}
.section-title p{
color:#666;
font-size:18px;
}
.globe-box{
display:flex;
justify-content:center;
}
.india-map img{
width:300px;
border-radius:50%;
animation:rotateGlobe 25s linear infinite;
background:transparent;
}
@keyframes rotateGlobe{
from{
transform:rotate(0);
}
to{
transform:rotate(360deg);
}
}
.coverage-list{
background:white;
padding:35px;
border-radius:25px;
box-shadow:0 10px 35px rgba(0,0,0,.08);
max-height:450px;
overflow-y:auto;
}
.coverage-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
border-bottom:1px solid #eee;
}
.coverage-item:last-child{
border:none;
}
.coverage-item h5{
font-weight:600;
margin:0;
}
.worker-count{
background:#E8F5E9;
color:#2E7D32;
padding:8px 18px;
border-radius:30px;
font-weight:600;
}
@media (max-width:991px){
.globe-box{
margin-bottom:25px;
}
.coverage-right{
height:auto;
margin-top:15px;
}
.coverage-section{
padding:20px 0;
}
.section-title{
margin:25px 0 !important;
}
.india-map img{
width:220px;
}
.section-title h2{
font-size:20px;
}
}
/*----------map arrow css-------*/
.section-title{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
flex-wrap:nowrap;
}
.section-title .line{
flex:1;
height:3px;
background:#D4AF37;
max-width:300px;
}
.section-title .dot{
width:16px;
height:16px;
background:#D4AF37;
border-radius:50%;
}
.section-title h2{
margin:0;
font-size:36px;
font-weight:700;
color:#222;
white-space:nowrap;
}
/*-----------------uparrow-------------------------------------*/
.scroll-top-btn{
position:fixed;
bottom:25px;
right:25px;
width:48px;
height:48px;
border-radius:50%;
background:rgba(255,255,255,0.15);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.3);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
opacity:0;
visibility:hidden;
transition:.3s ease;
z-index:9999;
}
.scroll-top-btn::before{
content:"";
width:18px;
height:18px;
border-left:3px solid #1e88e5;
border-top:3px solid #1e88e5;
transform:rotate(45deg);
display:block;
}
.scroll-top-btn.show{
opacity:1;
visibility:visible;
}
.scroll-top-btn:hover{
transform:translateY(-3px);
background:rgba(255,255,255,0.25);
}
/*---------css for down arrow on banner-----------*/
.scroll-indicator{
position:absolute;
bottom:3px;
left:50%;
transform:translateX(-50%);
z-index:50;
display:flex;
flex-direction:column;
align-items:center;
}
.scroll-indicator span{
display:block;
width:18px;
height:18px;
border-right:3px solid #fff;
border-bottom:3px solid #fff;
transform:rotate(45deg);
animation:scroll-down 1.5s infinite;
margin:-5px;
}
.scroll-indicator span:nth-child(2){
animation-delay:.3s;
}
@keyframes scroll-down{
0%{
opacity:0;
transform:rotate(45deg) translate(-10px,-10px);
}
50%{
opacity:1;
}
100%{
opacity:0;
transform:rotate(45deg) translate(10px,10px);
}
}
/*--------------------------- our services----------------------------------*/
#slideinner{
position:relative;
max-width:1320px;
margin:auto;
padding-top:10px;
background:linear-gradient(to bottom,white 40%,#00004d 50%);
border-radius:15px;
margin-bottom:20px;
overflow:hidden;
}
.carousel-inner{
padding:0px 0;
height:300px;
}
.carousel-item .row{
display:flex;
justify-content:center;
}
.carousel-controls{
text-align:center;
margin-top:15px;
}
.carousel-controls .btn{
padding:12px 28px;
margin:0 12px;
background:rgba(255,255,255,0.18);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.35);
border-radius:50px;
color:#fff;
font-weight:600;
transition:all .35s ease;
box-shadow:0 8px 20px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.35);
}
.carousel-controls .btn:hover{
background:rgba(255,255,255,.28);
color:#fff;
transform:translateY(-3px);
box-shadow:0 15px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.45);
}
.carousel-controls .btn:active{
transform:scale(.96);
background:rgba(255,255,255,.35);
}
.carousel-controls .btn i{
font-size:18px;
margin:0 5px;
}
.glass-ui{
background:rgba(255,255,255,0.22);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.35);
box-shadow:0 8px 32px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.35);
}
.mobile-service-carousel{
display:none;
}
.desktop-service-carousel{
display:block;
}
@media (max-width:767.98px){
.desktop-service-carousel{
display:none;
}
.mobile-service-carousel{
display:block;
}
.mobile-service-carousel .container{
padding-left:10px;
padding-right:10px;
}
.mobile-service-carousel .row{
margin-left:0;
margin-right:0;
}
.mobile-service-carousel .col-4{
padding-left:6px;
padding-right:6px;
}
.mobile-service-carousel .card{
width:100%;
}
.mobile-service-carousel .service-img{
width:100%;
height:130px;
object-fit:cover;
}
.mobile-service-carousel .card-body{
padding:10px 5px;
}
.mobile-service-carousel .card-body a{
font-size:14px;
line-height:1.3;
}
}
@media (max-width:380px){
.mobile-service-carousel .service-img{
height:110px;
}
.mobile-service-carousel .card-body a{
font-size:13px;
}
}
/*--------------------footer----------------------------*/
.custom-footer{
width:100%;
margin:0;
padding:60px 0;
background-color:#00004d;
color:#fff;
position:relative;
left:0;
right:0;
margin-top:30px;
border-radius:30px 30px 0 0;
transform:none;
overflow:hidden;
}
.custom-footer .row{
margin:0;
padding:0;
}
.custom-footer h3{
color:#fff;
font-size:22px;
margin-bottom:15px;
}
.custom-footer a{
color:#ddd;
text-decoration:none;
display:block;
margin-bottom:6px;
font-size:14px;
}
.custom-footer a:hover{
color:#fff;
}
.footer-content{
padding:0 20px;
}
@media (max-width:767px){
.section-title h2{
font-size:22px;
}
.custom-footer{
padding:20px 15px;
}
.custom-footer .col-md-3{
margin-bottom:18px;
}
.custom-footer .col-md-3 h3{
font-size:22px;
margin-bottom:8px;
width:100%;
}
.custom-footer .col-md-3 a{
display:inline;
background:none;
border:none;
padding:0;
font-size:14px;
margin-right:16px;
line-height:26px;
white-space:nowrap;
}
}
/*------------css for section-----------*/
.service-section{
padding:30px 0;
background:#f8fbff;
}
.category-banner{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
border-radius:25px;
margin-bottom:20px;
color:#fff;
background:linear-gradient(135deg,#244191,#646e8b);
position:relative;
overflow:hidden;
}
.category-banner::before{
pointer-events:none;
z-index:0;
}
.category-banner{
position:relative;
overflow:hidden;
}
.banner-content,.banner-btn{
position:relative;
z-index:2;
}
.category-tag{
background:rgba(255,255,255,.2);
padding:8px 18px;
border-radius:30px;
font-size:13px;
letter-spacing:1px;
}
.category-banner h2{
font-size:40px;
font-weight:700;
margin:15px 0;
}
.category-banner p{
font-size:17px;
max-width:600px;
}
.glass-ui{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 28px;
border-radius:40px;
color:#fff;
font-weight:700;
text-decoration:none;
background:rgba(255,255,255,0.18);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,0.35);
box-shadow:0 8px 32px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.35);
transition:all .35s ease;
}
.glass-ui:hover{
background:rgba(255,255,255,0.28);
color:#fff;
transform:translateY(-3px);
box-shadow:0 12px 35px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.45);
}
.glass-ui:active{
transform:scale(.97);
}
.service-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.4s;
height:100%;
}
.service-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 50px rgba(0,0,0,.15);
}
.service-img-box{
position:relative;
overflow:hidden;
}
.service-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.5s;
}
.service-card:hover .service-img{
transform:scale(1.08);
}
.service-badge{
position:absolute;
top:15px;
left:15px;
background:#FF9800;
color:#fff;
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
}
.service-content{
padding:20px;
text-align:center;
}
.service-content h5{
font-weight:700;
min-height:55px;
font-size:17px;
}
.book-service{
display:block;
background:#0d6efd;
color:white;
padding:12px;
border-radius:35px;
font-weight:600;
text-decoration:none;
transition:.3s;
}
.book-service:hover{
background:#0d6efd;
color:white;
}
@media(max-width:991px){
.category-banner{
flex-direction:column;
text-align:center;
gap:15px;
}
.category-banner h2{
font-size:20px;
}
}
.service-card{
background:#ffffff;
border:none;
border-radius:22px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:0.4s;
}
.service-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}
.salon-section{
background:#FFF4F8;
border-radius:25px;
padding:20px 0;
margin:25px 0;
}
.salon-banner{
background:linear-gradient(135deg,#5f5a3b,#b1914b);
}
.salon-banner .category-tag{
background:rgba(255,255,255,.25);
}
.salon-banner .glass-ui{
color:#fff;
}
.salon-banner .glass-ui:hover{
background:#880E4F;
color:white;
}
.vehicle-section{
background:#F2FFF8;
border-radius:25px;
padding:20px 0;
margin:25px 0;
}
.vehicle-banner{
background:linear-gradient(135deg,#308f44,#00ACC1);
}
.vehicle-banner .glass-ui{
color:#fff;
}
.vehicle-banner .glass-ui:hover{
background:#00695C;
color:white;
}
.vehicle-section .service-badge{
background:#009688;
}
.lifestyle-section{
background:#FFF8EF;
border-radius:25px;
padding:20px 0;
margin:25px 0;
}
.lifestyle-banner{
background:linear-gradient(135deg,#8860a1,#9d79a7);
}
.lifestyle-banner .glass-ui{
color:#fff;
}
.lifestyle-banner .glass-ui:hover{
background:#E65100;
color:#fff;
}
.lifestyle-section .service-badge{
background:#FF9800;
}
.spiritual-section{
background:#F7F2FF;
border-radius:25px;
margin:25px 0;
padding:20px 0;
}
.spiritual-banner{
background:linear-gradient(135deg,#e78726,#eeb42b);
}
.spiritual-banner .glass-ui{
color:#fff;
}
.spiritual-banner .glass-ui:hover{
background:#4A148C;
color:#fff;
}
.spiritual-section .service-badge{
background:#FFB300;
}
@media (max-width:767px){
.service-section{
padding:15px 0 !important;
}
.salon-section,.vehicle-section,.lifestyle-section,.spiritual-section{
margin:15px 0 !important;
padding:15px 0;
border-radius:18px;
}
}
/*----------why choose us css-------------*/
.why-choose-section{
background:#dbd8ba;
padding:80px 0;
border-top:2px solid #e5e5e5;
}
.why-choose-section > .container > .row{
align-items:stretch !important;
}
.why-choose-image-box{
display:flex;
align-items:stretch;
justify-content:center;
}
.why-choose-main-img{
width:100%;
height:100%;
min-height:100%;
object-fit:contain !important;
object-position:center;
display:block;
border-radius:16px !important;
transition:transform .4s ease;
}
.why-choose-main-img:hover{
transform:scale(1.03);
}
.why-choose-content{
display:flex;
flex-direction:column;
}
.why-choose-content > .row{
flex:1;
}
.why-choose-card{
display:flex;
}
.feature-box{
width:100%;
height:100%;
background:#fff;
padding:25px;
border-radius:16px;
text-align:center;
transition:all .4s ease;
position:relative;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.feature-box:hover{
transform:translateY(-10px);
box-shadow:0 12px 30px rgba(0,0,0,.15);
}
.feature-icon{
width:60px;
height:60px;
transition:transform .4s ease;
}
.feature-box:hover .feature-icon{
transform:scale(1.15) rotate(5deg);
}
.feature-title{
margin-top:12px;
font-weight:700;
font-size:18px;
}
.feature-text{
font-size:14px;
color:#666;
margin-top:8px;
}
.feature-box::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:radial-gradient(circle,rgba(21,101,192,.08),transparent 60%);
transform:rotate(25deg);
transition:all .5s ease;
opacity:0;
}
.feature-box:hover::before{
opacity:1;
}
.feature-box:hover::before{
opacity:1;
}
.feature-title,.feature-text{
white-space:normal !important;
word-wrap:break-word !important;
overflow-wrap:break-word !important;
word-break:break-word !important;
}
@media(max-width:767px){
.why-choose-section{
padding:40px 0;
}
.why-choose-image-box{
display:block;
margin-bottom:20px;
}
.why-choose-main-img{
width:100%;
height:auto !important;
min-height:0;
object-fit:contain !important;
}
.why-choose-content{
display:block;
}
.why-choose-content > .row{
flex:none;
}
.why-choose-card{
display:flex;
}
.feature-box{
padding:16px 14px;
margin-bottom:10px;
}
.why-choose-section .row{
--bs-gutter-y:10px;
--bs-gutter-x:10px;
}
.feature-title{
font-size:14px;
line-height:1.3;
}
.feature-text{
font-size:12px;
line-height:1.4;
}
.feature-icon{
width:48px;
height:48px;
}
}
@media(min-width:1200px){
.why-choose-image-box{
align-items:center;
}
.why-choose-main-img{
height:auto;
max-height:420px;
width:100%;
object-fit:contain !important;
}
}
@media (min-width:992px){
.header{
width:88%;
}
.navbar{
display:flex;
align-items:center;
justify-content:flex-start;
gap:0;
padding:0 18px;
}
.logo{
display:flex;
align-items:center;
flex:0 0 auto;
gap:8px;
white-space:nowrap;
}
.logo img{
height:42px;
width:auto;
}
.logo h3{
font-size:20px;
font-weight:700;
margin:0;
white-space:nowrap;
}
.nav-links{
display:flex !important;
align-items:center;
justify-content:center;
gap:14px;
margin-left:auto !important;
margin-right:auto !important;
padding:0;
white-space:nowrap;
}
.nav-btns{
display:flex;
align-items:center;
gap:10px;
flex:0 0 auto;
white-space:nowrap;
}
.navbar-toggler{
display:none !important;
}
}
/* ================= MOBILE BOTTOM NAVIGATION ================= */
.mobile-bottom-nav{
display:none;
}
@media(max-width:768px){
.mobile-bottom-nav{
position:fixed;
left:0;
bottom:0;
width:100%;
height:58px;
background:#fff;
display:flex;
align-items:center;
justify-content:space-around;
z-index:9999;
box-shadow:0 -2px 10px rgba(0,0,0,.15);
border-top:1px solid #ddd;
}
.bottom-nav-item{
position:relative;
flex:1;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
text-decoration:none;
color:#555;
}
.bottom-nav-item i{
font-size:20px;
line-height:20px;
}
.bottom-nav-item span:last-child{
font-size:10px;
}
.bottom-nav-item:hover{
color:#0d6efd;
}
.bottom-cart-badge{
position:absolute;
top:4px;
right:calc(50% - 18px);
min-width:16px;
height:16px;
padding:0 4px;
display:flex;
align-items:center;
justify-content:center;
background:#000;
color:#fff;
border-radius:50%;
font-size:9px !important;
font-weight:700;
line-height:16px;
}
body{
padding-bottom:58px;
}
.bottom-services{
position:relative;
}
.bottom-services-btn{
border:0;
background:none;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
height:58px;
color:#555;
font-size:10px;
}
.bottom-services-btn i{
font-size:20px;
line-height:20px;
}
.bottom-services-dropdown{
display:none;
position:absolute;
bottom:58px;
left:50%;
transform:translateX(-50%);
width:180px;
max-height:250px;
overflow-y:auto;
background:#fff;
padding:5px 0;
margin:0;
list-style:none;
border-radius:8px;
box-shadow:0 0 10px rgba(0,0,0,.2);
z-index:10000;
}
.bottom-services-dropdown.show{
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:100000 !important;
}
.bottom-services-dropdown li a{
display:block;
padding:9px 12px;
text-decoration:none;
color:#333;
font-size:12px;
}
.bottom-services-dropdown li a:hover{
background:#f1f1f1;
}
/* ========================= ACCOUNT BUTTON ========================= */
.bottom-account{
position:relative;
}
.bottom-account-btn,.bottom-account-login{
border:0;
background:none;
width:100%;
height:58px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
color:#555;
text-decoration:none;
padding:0;
}
.bottom-account-btn i,.bottom-account-login i{
font-size:20px;
line-height:20px;
}
.bottom-account-btn span,.bottom-account-login span{
font-size:10px;
}
/* ========================= ACCOUNT OFFCANVAS ========================= */
.bottom-account-offcanvas{
position:fixed;
top:0;
left:0;
width:50%;
height:100vh;
background:#f8f9fc;
z-index:10002;
transform:translateX(-100%);
transition:transform .3s ease;
box-shadow:3px 0 15px rgba(0,0,0,.18);
overflow-y:auto;
}
.bottom-account-offcanvas.show{
transform:translateX(0);
}
/* ========================= ACCOUNT OVERLAY ========================= */
.bottom-account-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:rgba(0,0,0,.35);
z-index:10001;
display:none;
}
.bottom-account-overlay.show{
display:block;
}
/* ========================= ACCOUNT HEADER ========================= */
.bottom-account-header{
display:flex;
align-items:center;
padding:18px 15px;
background:#e0edfe;
border-bottom:1px solid #dfe5ef;
}
.account-big-icon{
font-size:38px;
color:#0d6efd;
margin-right:10px;
}
.bottom-account-header h5{
margin:0;
font-size:15px;
color:#222;
}
.bottom-account-header span{
font-size:11px;
color:#777;
}
.bottom-account-close{
margin-left:auto;
border:0;
background:transparent;
color:#555;
font-size:16px;
}
/* ========================= ACCOUNT BODY ========================= */
.bottom-account-body{
padding:12px;
}
/* ========================= ACCOUNT INFORMATION ========================= */
.account-info-item{
display:flex;
align-items:flex-start;
padding:11px 5px;
border-bottom:1px solid #e5e5e5;
}
.account-info-item > i{
width:28px;
font-size:17px;
color:#0d6efd;
margin-top:2px;
}
.account-info-item small{
display:block;
font-size:10px;
color:#777;
margin-bottom:2px;
}
.account-info-item p{
margin:0;
font-size:11px;
color:#333;
word-break:break-word;
}
/* ========================= DIVIDER ========================= */
.account-divider{
height:8px;
}
/* ========================= ACCOUNT ACTIONS ========================= */
.account-action{
display:flex;
align-items:center;
width:100%;
padding:13px 5px;
text-decoration:none;
color:#333;
border-bottom:1px solid #e5e5e5;
}
.account-action > i:first-child{
width:28px;
font-size:17px;
color:#555;
}
.account-action span{
flex:1;
font-size:12px;
}
.account-action > i:last-child{
font-size:10px;
color:#999;
}
.account-action:hover{
background:#eef4ff;
}
.account-logout{
color:#dc3545;
}
.account-logout > i:first-child{
color:#dc3545;
}
/* SEARCH HALF SCREEN */
.bottom-search-box{
display:none;
position:absolute;
bottom:58px;
left:90%;
transform:translateX(-50%);
width:60vw;
height:50vh;
min-width:180px;
max-width:none;
background:#fff;
padding:10px;
border-radius:8px;
box-shadow:0 0 10px rgba(0,0,0,.2);
z-index:10000;
}
.bottom-search-box.show{
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:100000 !important;
}
.bottom-search-box form{
display:flex;
gap:5px;
}
.bottom-search-box input{
width:100%;
height:55px;
padding:5px 8px;
font-size:12px;
border:1px solid #ccc;
border-radius:5px;
min-width:0;
}
.bottom-search-box button{
height:55px;
padding:0 8px;
border:0;
background:#0d6efd;
color:#fff;
border-radius:5px;
font-size:10px;
flex-shrink:0;
}
.bottom-search{
position:relative;
}
.bottom-search-btn{
border:0;
background:none;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
height:58px;
color:#555;
font-size:10px;
}
.bottom-search-btn i{
font-size:20px;
line-height:20px;
}
}
/* ========================================================= MOBILE RESPONSIVE TEXT - COMPLETE PAGE ========================================================= */
@media (max-width:767px){
.scroll-top-btn{
display:none !important;
}
.hero-content{
width:94%;
max-width:100%;
padding:0 8px;
top:65%;
}
.hero-content h1{
font-size:clamp(17px,5vw,22px) !important;
line-height:1.25;
margin-bottom:8px;
font-weight:700;
overflow-wrap:break-word;
word-break:break-word;
}
.hero-content p{
font-size:clamp(10px,3.2vw,14px) !important;
line-height:1.45;
margin-bottom:12px;
overflow-wrap:break-word;
word-break:break-word;
}
.hero-btn{
padding:8px 18px;
font-size:clamp(10px,2.8vw,13px);
line-height:1.2;
}
.scroll-indicator{
bottom:5px;
}
/* ---------------- SECTION TITLES ---------------- */
.section-title{
gap:5px;
margin:20px 0 !important;
width:100%;
}
.section-title h2{
font-size:clamp(17px,5vw,22px) !important;
line-height:1.2;
white-space:normal !important;
text-align:center;
overflow-wrap:break-word;
word-break:break-word;
}
.section-title p{
font-size:clamp(10px,3vw,13px);
line-height:1.4;
}
.section-title .line{
height:2px;
max-width:80px;
min-width:15px;
}
.section-title .dot{
width:10px;
height:10px;
flex-shrink:0;
}
/* ---------------- INDIA COVERAGE ---------------- */
.coverage-title{
font-size:clamp(18px,5vw,24px);
line-height:1.25;
margin-bottom:15px;
}
.state-card{
gap:8px;
padding:12px;
margin-bottom:10px;
border-radius:12px;
}
.state-details h4{
font-size:clamp(11px,3vw,15px);
line-height:1.25;
margin-bottom:5px;
overflow-wrap:break-word;
word-break:break-word;
}
.state-details p{
font-size:clamp(9px,2.5vw,12px);
line-height:1.35;
overflow-wrap:break-word;
word-break:break-word;
}
.state-dot{
width:10px;
height:45px;
flex-shrink:0;
}
.coverage-list{
padding:15px;
border-radius:15px;
}
.coverage-item{
padding:10px 0;
gap:8px;
}
.coverage-item h5{
font-size:clamp(10px,2.8vw,14px);
line-height:1.3;
overflow-wrap:break-word;
word-break:break-word;
}
.worker-count{
padding:5px 9px;
font-size:clamp(9px,2.5vw,12px);
white-space:nowrap;
}
/* ---------------- OUR SERVICES ---------------- */
.category-banner{
padding:15px 12px;
border-radius:18px;
gap:10px;
}
.category-tag{
padding:5px 10px;
font-size:clamp(9px,2.5vw,12px);
letter-spacing:.5px;
}
.category-banner h2{
font-size:clamp(17px,5vw,23px) !important;
line-height:1.2;
margin:8px 0;
overflow-wrap:break-word;
word-break:break-word;
}
.category-banner p{
font-size:clamp(10px,3vw,14px);
line-height:1.4;
margin-bottom:8px;
max-width:100%;
overflow-wrap:break-word;
word-break:break-word;
}
.category-banner .glass-ui{
padding:8px 16px;
font-size:clamp(10px,2.8vw,13px);
}
/* ---------------- SERVICE CARDS ---------------- */
.service-card{
border-radius:15px;
}
.service-content{
padding:10px;
}
.service-content h5{
font-size:clamp(11px,3vw,15px);
line-height:1.3;
min-height:auto;
margin-bottom:7px;
overflow-wrap:break-word;
word-break:break-word;
}
.book-service{
padding:8px 6px;
font-size:clamp(10px,2.8vw,13px);
line-height:1.2;
}
.service-badge{
top:8px;
left:8px;
padding:4px 7px;
font-size:clamp(8px,2.2vw,11px);
}
/* ---------------- MOBILE SERVICE CAROUSEL ---------------- */
.mobile-service-carousel .card-body{
padding:7px 4px;
}
.mobile-service-carousel .card-body a{
font-size:clamp(10px,3vw,14px) !important;
line-height:1.25;
overflow-wrap:break-word;
word-break:break-word;
}
.mobile-service-carousel .service-img{
height:120px;
}
/* ---------------- WHY CHOOSE US ---------------- */
.why-choose-section{
padding:35px 0;
}
.feature-box{
padding:12px 8px;
border-radius:12px;
}
.feature-title{
font-size:clamp(11px,3.2vw,14px) !important;
line-height:1.3;
margin-top:8px;
overflow-wrap:break-word;
word-break:break-word;
}
.feature-text{
font-size:clamp(9px,2.7vw,12px) !important;
line-height:1.4;
margin-top:5px;
overflow-wrap:break-word;
word-break:break-word;
}
.feature-icon{
width:42px;
height:42px;
}
/* ---------------- FOOTER ---------------- */
.custom-footer{
padding:25px 12px;
}
.custom-footer .col-md-3 h3{
font-size:clamp(15px,4vw,20px);
line-height:1.25;
}
.custom-footer .col-md-3 a{
font-size:clamp(10px,2.8vw,13px);
line-height:24px;
}
.footer-content{
padding:0 5px;
}
/* ---------------- GENERAL MOBILE TEXT ---------------- */
.service-section p,.salon-section p,.vehicle-section p,.lifestyle-section p,.spiritual-section p{
overflow-wrap:break-word;
word-break:break-word;
}
}
/* ========================================================= SMALL MOBILE 400px AND BELOW ========================================================= */
@media (max-width:400px){
.hero-content{
width:96%;
top:64%;
padding:0 5px;
}
.hero-content h1{
font-size:17px !important;
line-height:1.2;
}
.hero-content p{
font-size:10px !important;
line-height:1.4;
}
.hero-btn{
padding:7px 15px;
font-size:10px;
}
.section-title h2{
font-size:18px !important;
}
.category-banner h2{
font-size:18px !important;
}
.category-banner p{
font-size:10px;
}
.state-details h4{
font-size:11px;
}
.state-details p{
font-size:9px;
}
.coverage-item h5{
font-size:10px;
}
.worker-count{
font-size:9px;
padding:4px 7px;
}
.mobile-service-carousel .card-body a{
font-size:10px !important;
}
.feature-title{
font-size:11px !important;
}
.feature-text{
font-size:9px !important;
}
.custom-footer .col-md-3 h3{
font-size:16px;
}
.custom-footer .col-md-3 a{
font-size:10px;
}
}
/* ========================================================= VERY SMALL MOBILE 320px AND BELOW ========================================================= */
@media (max-width:320px){
.hero-content h1{
font-size:15px !important;
}
.hero-content p{
font-size:9px !important;
}
.hero-btn{
font-size:9px;
padding:6px 12px;
}
.section-title h2{
font-size:16px !important;
}
.category-banner h2{
font-size:16px !important;
}
.category-banner p{
font-size:9px;
}
.mobile-service-carousel .card-body a{
font-size:9px !important;
}
.feature-title{
font-size:10px !important;
}
.feature-text{
font-size:8px !important;
}
}
/* ========================================= BOTTOM ACCOUNT - MOBILE ONLY DESKTOP PAR COMPLETELY HIDDEN ========================================= */
.bottom-account-offcanvas,.bottom-account-overlay{
display:none;
}
@media (max-width:768px){
.bottom-account-offcanvas{
display:block;
}
.bottom-account-overlay{
display:none;
}
.bottom-account-overlay.show{
display:block;
}
}
/* ========================================= SALON FOR WOMEN ========================================= */
.women-salon-section{
padding:65px 0;
}
/* MAIN SHOWCASE */
.women-salon-showcase{
display:grid;
grid-template-columns:0.85fr 1.35fr;
gap:25px;
padding:18px;
border-radius:30px;
background:linear-gradient(135deg,#fff7fb,#fff);
box-shadow:0 10px 35px rgba(0,0,0,0.08);
}
/* ========================================= LEFT PANEL ========================================= */
.women-salon-intro{
position:relative;
min-height:390px;
overflow:hidden;
border-radius:23px;
background:#eee;
}
.women-salon-main-image{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* DARK / SOFT OVERLAY */
.women-salon-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:30px;
background:linear-gradient(transparent 25%,rgba(40,10,30,0.82));
color:#fff;
}
.women-salon-overlay span{
font-size:10px;
font-weight:700;
letter-spacing:2px;
margin-bottom:6px;
}
.women-salon-overlay h2{
margin:0 0 8px;
font-size:30px;
font-weight:800;
}
.women-salon-overlay p{
margin:0 0 18px;
font-size:13px;
line-height:1.5;
max-width:350px;
}
.women-salon-view-all{
align-self:flex-start;
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 17px;
border-radius:25px;
background:#fff;
color:#8d3c68;
text-decoration:none;
font-size:12px;
font-weight:700;
}
/* ========================================= RIGHT SIDE ========================================= */
.women-salon-services{
padding:12px 10px;
}
.women-salon-heading{
margin-bottom:18px;
}
.women-salon-heading span{
font-size:10px;
font-weight:700;
letter-spacing:2px;
color:#b45a87;
}
.women-salon-heading h3{
margin:3px 0 0;
font-size:26px;
font-weight:800;
color:#442236;
}
/* ========================================= SERVICE GRID ========================================= */
.women-salon-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}
/* SERVICE CARD */
.women-service-card{
overflow:hidden;
background:#fff;
border-radius:17px;
border:1px solid #f1dce7;
box-shadow:0 5px 15px rgba(100,30,70,0.08);
transition:0.3s ease;
}
.women-service-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(100,30,70,0.14);
}
/* IMAGE */
/* ========================================= WOMEN SALON SERVICE IMAGE - FIX ========================================= */
.women-service-image{
width:100%;
height:145px;
overflow:hidden;
background:#f8f8f8;
display:flex;
align-items:center;
justify-content:center;
}
.women-service-image img{
width:100%;
height:100%;
object-fit:contain;
object-position:center center;
display:block;
}
.women-service-card:hover .women-service-image img{
transform:scale(1.06);
}
/* CONTENT */
.women-service-content{
padding:12px;
text-align:center;
}
.women-service-content h4{
margin:0 0 9px;
color:#442236;
font-size:14px;
font-weight:700;
}
/* BOOK BUTTON */
.women-book-button{
display:inline-block;
padding:6px 15px;
border-radius:20px;
background:#a64d7d;
color:#fff;
text-decoration:none;
font-size:11px;
font-weight:600;
}
.women-book-button:hover{
color:#fff;
background:#84395f;
}
/* ========================================= MOBILE ========================================= */
@media (max-width:767px){
.women-salon-section{
padding:35px 0;
}
.women-salon-showcase{
display:block;
padding:10px;
border-radius:20px;
}
.women-salon-intro{
min-height:270px;
border-radius:16px;
}
.women-salon-overlay{
padding:20px;
}
.women-salon-overlay h2{
font-size:23px;
}
.women-salon-overlay p{
font-size:11px;
margin-bottom:12px;
}
.women-salon-services{
padding:18px 5px 5px;
}
.women-salon-heading h3{
font-size:20px;
}
.women-salon-grid{
gap:10px;
}
.women-service-image{
height:115px;
}
.women-service-content{
padding:9px;
}
.women-service-content h4{
font-size:12px;
margin-bottom:7px;
}
.women-book-button{
padding:5px 11px;
font-size:10px;
}
}