/*
Theme Name: Al Musafa Technical Services
Theme URI: https://www.almusafa.com
Author: Al Musafa Technical Services
Author URI: https://www.almusafa.com
Description: Professional cleaning and maintenance services theme for Al Musafa Technical Services Dubai UAE
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Private
Tags: business, cleaning, services, dubai
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --hue: 200;
    --saturation: 70%;
    --lightness: 55%;
    --main-color: hsl(var(--hue), var(--saturation), var(--lightness));
    --text-white: hsl(0, 0%, 100%);
    --text-light-gray: hsl(0, 0%, 96%);
    --text-x-dark-gray: hsl(0, 0%, 10%);
    --text-dark-gray: hsl(0, 0%, 20%);
    --body-bg-color: hsl(var(--hue), 60%, 94%);
    --bg-color: hsl(var(--hue), 60%, 96%);
    --bg-white: hsl(0, 0%, 100%);
    --border-color: hsl(var(--hue), 48%, 80%);
    --shadow: 0 0 10px hsla(var(--hue), 57%, 63%, 0.3);
    --focus-shadow: 0 0 10px hsla(var(--hue), 57%, 63%, 0.6);
    --fs-4xl: 50px;
    --fs-3xl: 35px;
    --fs-2xl: 26px;
    --fs-xl: 20px;
    --fs-lg: 18px;
    --fs-md: 16px;
    --fs-sm: 14px;
}

html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }
::before, ::after { box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--text-dark-gray);
    background-color: var(--body-bg-color);
    -webkit-text-size-adjust: 100%;
}

a { color: var(--main-color); text-decoration: none; }

/* ========== TOP BAR ========== */
.top-bar { background: var(--main-color); padding: 7px 10px; width: 100%; }
.top-bar-inner { max-width: 100%; display: flex; align-items: center; justify-content: space-between; }
.top-bar-inner span { color: #fff; font-size: 13px; font-weight: 500; }
.top-bar-inner span a { color: #fff; text-decoration: none; }
.top-bar-inner span i { margin-right: 5px; }
.top-bar-auth { display: flex; align-items: center; gap: 10px; }
.top-bar-auth a { color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; opacity: 0.9; transition: opacity .2s; }
.top-bar-auth a:hover { opacity: 1; }
.top-bar-auth a i { margin-right: 4px; }
.top-bar-btn { background: #fff; color: var(--main-color) !important; padding: 4px 14px; border-radius: 4px; font-weight: 600 !important; opacity: 1 !important; }
.top-bar-btn:hover { background: var(--text-x-dark-gray) !important; color: #fff !important; }
.top-bar-pay { background: #FFD700; color: #1a1a1a !important; padding: 4px 16px; border-radius: 4px; font-weight: 700 !important; opacity: 1 !important; display: inline-flex; align-items: center; gap: 5px; }
.top-bar-pay:hover { background: #FFC200 !important; color: #1a1a1a !important; }

/* ========== HEADER ========== */
.number h2 { display: flex; margin-right: 15px; color: var(--main-color); font-size: 18px; margin-top: 0; white-space: nowrap; }
ul { list-style: none; }
.nav li { display: inline-block; position: relative; }
.nav li:hover .sub-menu { position: absolute; right: 0; left: auto; top: calc(100% + 5px); z-index: 1000; }

.header { position: sticky; top: 0; z-index: 999; background: var(--bg-white); box-shadow: var(--shadow); padding: 15px 0; }
.container-section { max-width: 100%; margin: 0 auto; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; }
.logo a { font-size: 22px; font-weight: 700; color: var(--text-x-dark-gray); text-transform: uppercase; }
.logo a span { color: var(--main-color); }
.nav { display: flex; align-items: center; }
.nav > ul { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.nav ul li a { font-size: 14px; font-weight: 500; color: var(--text-dark-gray); padding: 5px 8px; border-radius: 5px; transition: all .3s; white-space: nowrap; }
.nav ul li a:hover { color: var(--main-color); background: var(--bg-color); }
.nav .sub-menu { display: none; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,0.12); min-width: 260px; border-radius: 10px; padding: 12px 0; right: 0; left: auto; border-top: 3px solid var(--main-color); }
.nav li:hover .sub-menu { display: block; }
.nav .sub-menu hr { display: none; }
.sub-menu li { display: block !important; }
.sub-menu li a { display: flex; align-items: center; gap: 10px; padding: 10px 20px 10px 20px; font-size: 14px; font-weight: 500; color: var(--text-dark-gray); border-radius: 0; transition: all .25s; border-left: 3px solid transparent; margin: 0; }
.sub-menu li a::before { content: '\ea6c'; font-family: 'remixicon'; font-size: 14px; color: var(--main-color); flex-shrink: 0; }
.sub-menu li a:hover { background: #f0f9ff; color: var(--main-color); border-left: 3px solid var(--main-color); padding-left: 24px; }
.nav-toggler { display: none; background: none; border: none; cursor: pointer; }
#icon { display: none; }
.nav-auth-buttons { display: flex; align-items: center; gap: 8px; margin-left: 12px; flex-shrink: 0; }
.btn-nav-login { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--main-color) !important; border: 2px solid var(--main-color); background: transparent; transition: all .3s; white-space: nowrap; text-decoration: none; }
.btn-nav-login:hover { background: var(--main-color) !important; color: #fff !important; }
.btn-nav-register { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #fff !important; background: var(--main-color); border: 2px solid var(--main-color); transition: all .3s; white-space: nowrap; text-decoration: none; }
.btn-nav-register:hover { background: var(--text-x-dark-gray) !important; border-color: var(--text-x-dark-gray) !important; color: #fff !important; }
/* Hide cookie consent popup/button */
#cookie-law-info-bar, .cli-bar-container, .cookie-notice-container, #cn-notice-text, .cc-window, .cc-banner, #cookiebanner, .cookieconsent, [id*="cookie"], [class*="cookie-btn"], .wt-cli-cookie-bar-container { display: none !important; }
@media (max-width: 768px) { #icon { display: block; } .nav-auth-buttons { display: none; } }
.nav-toggler span { display: block; width: 25px; height: 3px; background: var(--text-dark-gray); margin: 5px 0; border-radius: 3px; }

/* ========== BANNER ========== */
.banner { position: relative; width: 100%; overflow: hidden; }
.slide { display: none; min-height: 450px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
.slide-1 { background-image: url('/wp-content/themes/almusafa/images/Full01.jpg'); }
.slide-2 { background-image: url('/wp-content/themes/almusafa/images/Full02.jpg'); }
.slide-3 { background-image: url('/wp-content/themes/almusafa/images/Full03.jpg'); }
.slide::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.caption { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); z-index: 2; color: #fff; max-width: 500px; }
.caption h3 { font-size: var(--fs-3xl); font-weight: 700; margin-bottom: 15px; }
.caption p { font-size: var(--fs-md); }
.banner-button { position: absolute; bottom: 100px; left: 10%; z-index: 2; }
.banner-btn { background: var(--main-color); color: #fff; padding: 12px 30px; border-radius: 30px; font-weight: 600; transition: all .3s; }
.banner-btn:hover { background: var(--text-x-dark-gray); color: #fff; }
.deep { position: absolute; bottom: 30px; right: 10%; z-index: 2; text-align: right; color: #fff; }
.deep h2 { font-size: var(--fs-2xl); }
.deep h2 span { color: var(--main-color); font-size: 30px; }
.deep h3 { font-size: var(--fs-sm); }
.deep h3 span { color: var(--main-color); }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; cursor: pointer; }
.arrow.l { left: 15px; }
.arrow.r { right: 15px; }

/* ========== WHATSAPP FLOAT ========== */
.Whatsapp { position: fixed; bottom: 25px; right: 25px; z-index: 9999; }
.Whatsapp img { border-radius: 50%; box-shadow: var(--shadow); transition: transform .3s; }
.Whatsapp img:hover { transform: scale(1.1); }

/* ========== SECTIONS ========== */
.btn { display: inline-block; background: var(--main-color); color: #fff; padding: 10px 22px; border-radius: 25px; font-weight: 500; margin-top: 15px; transition: all .3s; font-size: var(--fs-sm); }
.btn:hover { background: var(--text-x-dark-gray); color: #fff; }

.header-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 100%; margin: 50px auto; padding: 0 10px; align-items: stretch; }
.content-card { display: flex; flex-direction: column; justify-content: center; }
.content-card h3 { font-size: var(--fs-2xl); color: var(--text-x-dark-gray); margin-bottom: 15px; }
.content-card p { margin-bottom: 15px; line-height: 1.8; }
.section-header { overflow: hidden; border-radius: 12px; }
.section-header img { width: 100%; height: 450px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow); display: block; }

/* ========== PACKAGE ========== */
.service-pakage { text-align: center; padding: 40px 20px 20px; }
.service-pakage h2 { font-size: var(--fs-3xl); color: var(--text-x-dark-gray); }
.pakage-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; max-width: 100%; margin: 0 auto 50px; padding: 0 10px; }
.pakage-col { background: var(--bg-white); border-radius: 12px; padding: 30px; box-shadow: var(--shadow); text-align: center; transition: transform .3s; }
.pakage-col:hover { transform: translateY(-5px); }
.pakage-col h2 { font-size: var(--fs-xl); color: var(--main-color); margin-bottom: 15px; }
.pakage-col i { font-size: 40px; color: var(--main-color); margin: 15px 0; display: block; }

/* ========== BEST SERVICES ========== */
.best { text-align: center; padding: 40px 20px 20px; }
.best h2 { font-size: var(--fs-3xl); color: var(--text-x-dark-gray); }
.services-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 100%; margin: 30px auto 50px; padding: 0 10px; align-items: stretch; }
.card-service { overflow: hidden; border-radius: 12px; }
.card-service img { width: 100%; height: 450px; object-fit: cover; border-radius: 12px; display: block; }
.card-text { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; padding: 20px 10px; }
.card-text h2 { font-size: var(--fs-2xl); color: var(--text-x-dark-gray); margin-bottom: 12px; }
.card-text ul { padding-left: 18px; margin: 10px 0 15px; line-height: 2; }
.card-text ul li { font-size: var(--fs-sm); color: var(--text-dark-gray); }
.content-card { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; padding: 20px 10px; }
.content-card ul { padding-left: 18px; margin: 10px 0 15px; line-height: 2; }
.content-card ul li { font-size: var(--fs-sm); color: var(--text-dark-gray); }

/* ========== SLIDER BAR ========== */
.slider-bar { text-align: center; padding: 40px 20px 20px; }
.slider-bar h2 { font-size: var(--fs-3xl); color: var(--text-x-dark-gray); }
.slider-container { max-width: 100%; margin: 20px auto 50px; padding: 0 10px; }
.slide-content { overflow: hidden; position: relative; }
.card-wrapper { position: relative; align-items: stretch !important; }
.swiper-slide { height: auto !important; display: flex !important; }
.card { background: var(--bg-white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transition: transform .3s; display: flex; flex-direction: column; height: 100%; }
.card:hover { transform: translateY(-5px); }
.card .image-content { background: var(--main-color); padding: 15px 10px; text-align: center; height: 150px !important; min-height: 150px !important; display: flex !important; flex-direction: column; justify-content: center; align-items: center; }
.card .image-content h2 { color: #fff; font-size: 12px; margin-top: 8px; font-weight: 700; letter-spacing: 0.5px; }
.card .images-logo img { border-radius: 50%; background: rgba(255,255,255,0.2); padding: 5px; max-height: 65px; width: auto; }
.card .card-content { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.card p.description { font-size: 13px; margin-bottom: 15px; flex: 1; line-height: 1.6; min-height: 90px; }
.card .button { background: var(--main-color); color: #fff; border: none; padding: 7px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; transition: all .3s; align-self: flex-start; margin-top: auto; }
.card .button:hover { background: var(--text-x-dark-gray); }

/* ========== CLEANING CARD SECTION ========== */
.cleaning-card-section { text-align: center; padding: 40px 20px 20px; }
.cleaning-card-section h2, .maintenince-card-section h2 { font-size: var(--fs-3xl); color: var(--text-x-dark-gray); }
.cleaning-card-section h3, .maintenince-card-section h3 { font-size: var(--fs-md); color: var(--text-dark-gray); margin-top: 10px; }
.maintenince-card-section { text-align: center; padding: 40px 20px 20px; }
.cleaning-section { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; max-width: 100%; margin: 20px auto 50px; padding: 0 10px; }
.slid { background: var(--bg-white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transition: transform .3s; }
.slid:hover { transform: translateY(-5px); }
.slid img { width: 100%; height: 180px; object-fit: cover; }
.slid .card-content { padding: 15px; }
.slid h5 { font-size: var(--fs-md); color: var(--text-x-dark-gray); margin-bottom: 8px; }
.slid p { font-size: var(--fs-sm); }

/* ========== FAQ SECTION ========== */
.wrapper-qusion { max-width: 100%; margin: 0 auto 50px; padding: 0 10px; }
.qusion-section { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; }
.card-qusion { background: var(--bg-white); border-radius: 12px; padding: 30px; box-shadow: var(--shadow); }
.card-qusion h2 { font-size: var(--fs-xl); color: var(--main-color); margin-bottom: 20px; }
.card-qusion .btn { display: block; margin: 8px 0; text-align: center; }
.faq { margin-bottom: 10px; }
.accordion { width: 100%; background: var(--bg-white); border: none; padding: 15px 20px; text-align: left; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; border-radius: 8px; box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center; transition: all .3s; }
.accordion:hover, .accordion.active { background: var(--main-color); color: #fff; }
.pannel { display: none; background: var(--bg-color); padding: 15px 20px; border-radius: 0 0 8px 8px; font-size: var(--fs-sm); }
.pannel p { line-height: 1.7; }

/* ========== WORK CATEGORY ========== */
.Company-rules { text-align: center; padding: 40px 20px 20px; }
.Company-rules h2 { font-size: var(--fs-3xl); color: var(--text-x-dark-gray); }
.work-catagory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 100%; margin: 20px auto 50px; padding: 0 10px; }
.row-1 { background: var(--bg-white); border-radius: 12px; padding: 25px; box-shadow: var(--shadow); }
.row-1 h3 { color: var(--main-color); font-size: var(--fs-xl); margin-bottom: 10px; }

/* ========== LABOUR TRADING ========== */
.labour-trading { text-align: center; padding: 40px 20px 20px; }
.labour-trading h2 { font-size: var(--fs-3xl); color: var(--text-x-dark-gray); }
.labour-box { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 100%; margin: 20px auto 50px; padding: 0 10px; align-items: center; }
.labour-box p { line-height: 1.8; }

/* ========== TEAM / EMPLOYERS ========== */
.company-employers { text-align: center; padding: 40px 20px 20px; }
.company-employers h2 { font-size: var(--fs-3xl); color: var(--text-x-dark-gray); }
.card-image img.card-img { width: 100%; height: 200px; object-fit: cover; }
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.1); }

/* ========== FOOTER ========== */
.footer { background: var(--text-x-dark-gray); color: var(--text-light-gray); padding: 50px 0 20px; margin-top: 50px; }
.footer-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 100%; margin: 0 auto; padding: 0 10px; }
.footer-col h3 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 20px; color: #fff; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { color: var(--text-light-gray); font-size: var(--fs-sm); transition: color .3s; }
.footer-col ul li a:hover { color: var(--main-color); }
.footer-col p { font-size: var(--fs-sm); margin-bottom: 8px; color: var(--text-light-gray); }
.footer-col h4 { color: var(--main-color); font-size: var(--fs-lg); margin-top: 8px; }
.footer-col .email-id { color: var(--main-color); }
.underline { height: 2px; background: var(--main-color); width: 40px; margin-bottom: 15px; border-radius: 2px; }
.footer form { display: flex; gap: 8px; margin-bottom: 20px; }
.footer form input { flex: 1; padding: 10px 15px; border-radius: 25px; border: none; font-size: var(--fs-sm); }
.footer form button { background: var(--main-color); color: #fff; border: none; padding: 10px 15px; border-radius: 25px; cursor: pointer; }
.social-icons { display: flex; gap: 15px; font-size: 20px; }
.social-icons i { color: var(--text-light-gray); cursor: pointer; transition: color .3s; }
.social-icons i:hover { color: var(--main-color); }

/* ========== CONTACT PAGE ========== */
.contact { text-align: center; padding: 50px 20px; }
.contact h2 { font-size: var(--fs-3xl); color: var(--text-x-dark-gray); }
.contact h2 span { color: var(--main-color); }
.container-form { max-width: 700px; margin: 0 auto 50px; padding: 0 20px; background: var(--bg-white); border-radius: 15px; padding: 40px; box-shadow: var(--shadow); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: 6px; color: var(--text-x-dark-gray); }
.form-group input, .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 8px; font-size: var(--fs-sm); font-family: 'Poppins', sans-serif; transition: all .3s; background: var(--bg-color); }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--main-color); box-shadow: var(--focus-shadow); }
#form-musafa button[type="submit"] { background: var(--main-color); color: #fff; border: none; padding: 14px 40px; border-radius: 30px; font-size: var(--fs-md); font-weight: 600; cursor: pointer; width: 100%; transition: all .3s; }
#form-musafa button[type="submit"]:hover { background: var(--text-x-dark-gray); }

/* ========== KITCHEN, BATH, etc. PAGES ========== */
.kitchen, .maintenince-page, .service-page-title { text-align: center; padding: 40px 20px 20px; }
.kitchen h4, .service-page-title h4 { font-size: var(--fs-3xl); color: var(--text-x-dark-gray); font-weight: 700; }
.kitchen-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 100%; margin: 30px auto 50px; padding: 0 10px; align-items: center; }
.content-text h3 { font-size: var(--fs-2xl); color: var(--text-x-dark-gray); margin-bottom: 15px; }
.card-kitchen img { width: 100%; border-radius: 12px; }

/* ========== SERVICE PAGES ========== */
.service-hero { width: 100%; height: 420px; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; position: relative; }
.service-hero::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.50); }
.service-hero-content { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 20px; }
.service-hero-content h1 { font-size: var(--fs-3xl); font-weight: 700; margin-bottom: 12px; text-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.service-hero-content p { font-size: var(--fs-md); max-width: 650px; margin: 0 auto 20px; opacity: 0.95; }
.service-hero-content .btn { background: #fff; color: var(--main-color); font-weight: 700; }
.service-hero-content .btn:hover { background: var(--main-color); color: #fff; }
.service-intro { max-width: 100%; padding: 50px 10px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.service-intro-img { border-radius: 14px; overflow: hidden; }
.service-intro-img img { width: 100%; height: 400px; object-fit: cover; border-radius: 14px; display: block; }
.service-intro-text { display: flex; flex-direction: column; justify-content: flex-start; padding: 10px 0; }
.service-intro-text h2 { font-size: var(--fs-2xl); color: var(--text-x-dark-gray); margin-bottom: 15px; }
.service-intro-text p { line-height: 1.8; margin-bottom: 15px; font-size: var(--fs-sm); }
.service-intro-text ul { padding-left: 20px; margin-bottom: 20px; }
.service-intro-text ul li { font-size: var(--fs-sm); line-height: 2.2; color: var(--text-dark-gray); }
.service-features { padding: 40px 10px; text-align: center; }
.service-features h2 { font-size: var(--fs-2xl); color: var(--text-x-dark-gray); margin-bottom: 30px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 100%; }
.feature-box { background: var(--bg-white); border-radius: 12px; padding: 30px 20px; box-shadow: var(--shadow); text-align: center; transition: transform .3s; border-top: 4px solid var(--main-color); }
.feature-box:hover { transform: translateY(-5px); }
.feature-box i { font-size: 36px; color: var(--main-color); margin-bottom: 15px; display: block; }
.feature-box h3 { font-size: var(--fs-md); color: var(--text-x-dark-gray); margin-bottom: 10px; }
.feature-box p { font-size: var(--fs-sm); color: var(--text-dark-gray); line-height: 1.7; }
.service-gallery { padding: 10px 10px 50px; }
.service-gallery h2 { font-size: var(--fs-2xl); color: var(--text-x-dark-gray); text-align: center; margin-bottom: 25px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.gallery-grid img { width: 100%; height: 250px; object-fit: cover; border-radius: 12px; transition: transform .3s; display: block; }
.gallery-grid img:hover { transform: scale(1.03); }
.service-cta { background: var(--main-color); padding: 60px 20px; text-align: center; }
.service-cta h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: 15px; }
.service-cta p { color: rgba(255,255,255,0.9); font-size: var(--fs-md); margin-bottom: 25px; }
.service-cta .btn { background: #fff; color: var(--main-color); font-weight: 700; font-size: var(--fs-md); padding: 14px 35px; }
.service-cta .btn:hover { background: var(--text-x-dark-gray); color: #fff; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .pakage-box { grid-template-columns: repeat(2, 1fr); }
    .cleaning-section { grid-template-columns: repeat(2, 1fr); }
    .work-catagory { grid-template-columns: repeat(2, 1fr); }
    .card-wrapper { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .nav { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--bg-white); padding: 20px; box-shadow: var(--shadow); }
    .nav.show { display: block; }
    .nav ul { flex-direction: column; gap: 5px; }
    .nav-toggler { display: block; }
    .header-section, .services-section, .labour-box, .kitchen-section, .qusion-section { grid-template-columns: 1fr; }
    .footer-row { grid-template-columns: repeat(2, 1fr); }
    .pakage-box { grid-template-columns: 1fr; }
    .cleaning-section { grid-template-columns: 1fr; }
    .work-catagory { grid-template-columns: 1fr; }
    .card-wrapper { grid-template-columns: 1fr; }
    .caption h3 { font-size: var(--fs-2xl); }
    .slide { min-height: 300px; }
}

@media (max-width: 480px) {
    .footer-row { grid-template-columns: 1fr; }
    .deep { display: none; }
    .banner-button { bottom: 50px; }
}