:root{--primary:#1e88e5;--primary-dark:#1565c0;--primary-light:#e3f2fd;--secondary:#43a047;--secondary-dark:#2e7d32;--accent:#ff6f00;--accent-light:#fff3e0;--success:#4caf50;--warning:#ff9800;--danger:#f44336;--dark:#1a1a2e;--gray-900:#212121;--gray-800:#424242;--gray-700:#616161;--gray-600:#757575;--gray-500:#9e9e9e;--gray-400:#bdbdbd;--gray-300:#e0e0e0;--gray-200:#eeeeee;--gray-100:#f5f5f5;--white:#ffffff;--shadow:0 2px 8px rgba(0,0,0,0.1);--shadow-lg:0 8px 30px rgba(0,0,0,0.12);--radius:8px;--radius-lg:12px;--transition:all 0.3s ease}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden;font-family:'Cairo',sans-serif;font-size:16px;line-height:1.7;color:var(--gray-800);background:var(--white);direction:rtl;text-align:right;padding-bottom:70px}
a{text-decoration:none;color:inherit;transition:var(--transition)}
img{max-width:100%;height:auto}
ul{list-style:none}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 15px}
.top-bar{background:var(--dark);color:var(--white);padding:8px 0;font-size:13px}
.top-bar-content{display:flex;justify-content:center;align-items:center;gap:25px;flex-wrap:wrap}
.top-bar span,.top-bar a{display:flex;align-items:center;gap:6px;color:var(--white)}
.top-bar a:hover{color:var(--primary-light)}
.top-bar i{color:var(--primary)}
@media (max-width:768px){.top-bar-content span:nth-child(2){display:none}
}
.header{background:var(--white);box-shadow:var(--shadow);position:sticky;top:0;z-index:1000}
.header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 15px}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:45px;height:45px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:20px}
.logo-text{display:flex;flex-direction:column}
.logo-name{font-size:18px;font-weight:800;color:var(--primary);line-height:1.2}
.logo-tagline{font-size:11px;color:var(--gray-600)}
.nav-desktop{display:none;align-items:center;gap:5px}
.nav-desktop > a,.nav-desktop .dropdown-toggle{padding:10px 14px;color:var(--gray-800);font-weight:500;font-size:14px;border-radius:var(--radius);display:flex;align-items:center;gap:5px;cursor:pointer}
.nav-desktop > a:hover,.nav-desktop .nav-dropdown:hover .dropdown-toggle{background:var(--primary-light);color:var(--primary)}
.nav-desktop .dropdown-toggle i{font-size:10px;transition:var(--transition)}
.nav-desktop .nav-dropdown:hover .dropdown-toggle i{transform:rotate(180deg)}
.nav-dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;right:0;background:var(--white);min-width:220px;box-shadow:var(--shadow-lg);border-radius:var(--radius);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--transition)}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 18px;color:var(--gray-800);font-size:14px}
.dropdown-menu a:hover{background:var(--primary-light);color:var(--primary)}
.dropdown-menu a i{width:18px;color:var(--primary)}
@media (min-width:992px){.nav-desktop{display:flex}
}
.header-actions{display:flex;align-items:center;gap:10px}
.header-call{display:none}
.header-call span{display:none}
@media (min-width:768px){.header-call{display:flex}
}
@media (min-width:992px){.header-call span{display:inline}
}
.menu-toggle{width:44px;height:44px;background:var(--gray-100);border:none;border-radius:var(--radius);font-size:20px;color:var(--gray-800);cursor:pointer}
@media (min-width:992px){.menu-toggle{display:none}
}
.mobile-menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:2000;opacity:0;visibility:hidden;transition:var(--transition)}
.mobile-menu-overlay.active{opacity:1;visibility:visible}
.mobile-menu{position:fixed;top:0;right:-300px;width:300px;height:100%;background:var(--white);z-index:2001;transition:var(--transition);display:flex;flex-direction:column;overflow-y:auto}
.mobile-menu.active{right:0}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;background:var(--primary);color:var(--white);font-weight:700}
.mobile-menu-close{background:none;border:none;color:var(--white);font-size:20px;cursor:pointer}
.mobile-menu-list{flex:1;padding:10px 0}
.mobile-menu-list li a{display:flex;align-items:center;gap:12px;padding:12px 20px;color:var(--gray-800);border-bottom:1px solid var(--gray-100)}
.mobile-menu-list li a:hover{background:var(--primary-light);color:var(--primary)}
.mobile-menu-list li a i{width:20px;color:var(--primary)}
.menu-divider{padding:10px 20px 8px;font-size:12px;font-weight:700;color:var(--primary);background:var(--gray-100)}
.mobile-menu-cta{padding:15px 20px;border-top:1px solid var(--gray-200)}
.mobile-menu-cta .btn{margin-bottom:10px}
.mobile-menu-cta .btn:last-child{margin-bottom:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:600;font-family:inherit;border-radius:var(--radius);border:none;cursor:pointer;transition:var(--transition)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--white)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(30,136,229,0.4)}
.btn-secondary{background:var(--secondary);color:var(--white)}
.btn-success{background:var(--success);color:var(--white)}
.btn-white{background:var(--white);color:var(--primary)}
.btn-outline{background:transparent;border:2px solid currentColor}
.btn-block{width:100%}
.btn-lg{padding:15px 30px;font-size:16px}
.hero{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:var(--white);padding:40px 0 50px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E") repeat;opacity:0.3}
.hero-content{position:relative;z-index:1}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.hero-badge{background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:20px;font-size:13px;display:flex;align-items:center;gap:6px}
.hero h1{font-size:28px;font-weight:800;margin-bottom:15px;line-height:1.3}
.hero p{font-size:16px;opacity:0.95;margin-bottom:25px;line-height:1.8}
.hero-buttons{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:768px){.hero{padding:60px 0 70px}
.hero h1{font-size:36px}
.hero p{font-size:18px}
}
.booking-section{background:var(--gray-100);padding:40px 0}
.booking-form-card{background:var(--white);border-radius:var(--radius-lg);padding:25px;box-shadow:var(--shadow)}
.booking-form-card h3{font-size:20px;margin-bottom:20px;color:var(--primary-dark)}
.form-row{display:grid;gap:15px;margin-bottom:15px}
@media (min-width:768px){.form-row{grid-template-columns:repeat(2,1fr)}
}
.form-group{margin-bottom:15px}
.form-group label{display:block;margin-bottom:6px;font-weight:500;font-size:14px;color:var(--gray-800)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 15px;border:2px solid var(--gray-200);border-radius:var(--radius);font-family:inherit;font-size:14px;transition:var(--transition)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,136,229,0.1)}
.form-group textarea{resize:vertical;min-height:100px}
section{padding:50px 0}
.bg-light{background:var(--gray-100)}
.bg-primary-light{background:var(--primary-light)}
.bg-accent-light{background:var(--accent-light)}
.bg-gradient{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%)}
.section:nth-child(odd){background:var(--white)}
.section:nth-child(even){background:var(--gray-100)}
.section-title{text-align:center;margin-bottom:40px}
.section-title h2{font-size:26px;font-weight:800;color:var(--dark);margin-bottom:10px}
.section-title p{color:var(--gray-600);max-width:600px;margin:0 auto}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){.services-grid{grid-template-columns:repeat(3,1fr);gap:20px}
}
@media (min-width:992px){.services-grid{grid-template-columns:repeat(4,1fr)}
}
.service-card{background:var(--white);border-radius:var(--radius-lg);padding:20px 12px;text-align:center;box-shadow:var(--shadow);transition:var(--transition);border:2px solid transparent}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.service-card .icon{width:55px;height:55px;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;color:var(--primary)}
.service-card h3{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:6px;line-height:1.4}
.service-card p{font-size:12px;color:var(--gray-600);line-height:1.5}
.service-card img{width:55px;height:55px;object-fit:contain;margin:0 auto 12px;display:block}
@media (max-width:480px){.services-grid{gap:10px}
.service-card{padding:15px 10px}
.service-card .icon{width:48px;height:48px;font-size:20px;margin-bottom:10px}
.service-card h3{font-size:13px}
}
.brands-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (min-width:768px){.brands-grid{grid-template-columns:repeat(4,1fr);gap:15px}
}
@media (min-width:992px){.brands-grid{grid-template-columns:repeat(6,1fr)}
}
.brand-card{background:var(--white);border-radius:var(--radius);padding:15px 10px;text-align:center;box-shadow:var(--shadow);transition:var(--transition);border:2px solid var(--gray-200)}
.brand-card:hover{border-color:var(--primary);transform:translateY(-3px)}
.brand-card h4{font-size:13px;font-weight:600;color:var(--gray-800)}
.areas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){.areas-grid{grid-template-columns:repeat(3,1fr);gap:15px}
}
@media (min-width:992px){.areas-grid{grid-template-columns:repeat(4,1fr)}
}
.area-card{background:var(--white);border-radius:var(--radius);padding:15px;box-shadow:var(--shadow);transition:var(--transition);border-right:4px solid var(--primary)}
.area-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.area-card h4{font-size:14px;font-weight:600;color:var(--dark);display:flex;align-items:center;gap:8px}
.area-card h4 i{color:var(--primary)}
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (min-width:768px){.features-grid{grid-template-columns:repeat(4,1fr)}
}
.feature-card{text-align:center;padding:20px}
.feature-card .icon{width:70px;height:70px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;font-size:28px;color:var(--white)}
.feature-card h3,.feature-card h4{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:5px}
.feature-card p{font-size:13px;color:var(--gray-600)}
.reviews-slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:10px 0}
.review-card{flex:0 0 300px;scroll-snap-align:start;background:var(--white);border-radius:var(--radius-lg);padding:25px;box-shadow:var(--shadow)}
.review-card .stars{color:#ffc107;margin-bottom:12px}
.review-card p{color:var(--gray-700);font-size:14px;line-height:1.8;margin-bottom:15px}
.review-card .name{font-weight:700;color:var(--dark);font-size:14px}
.faq-list{max-width:800px;margin:0 auto}
.faq-item{background:var(--white);border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
.faq-question{width:100%;padding:18px 20px;background:none;border:none;text-align:right;font-family:inherit;font-size:15px;font-weight:600;color:var(--dark);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:15px}
.faq-question i{color:var(--primary);transition:var(--transition)}
.faq-item.active .faq-question i{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.faq-item.active .faq-answer{max-height:500px}
.faq-answer p{padding:0 20px 18px;color:var(--gray-700);line-height:1.8}
.cta-section{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--white);padding:50px 0;text-align:center}
.cta-section h2{font-size:26px;font-weight:800;margin-bottom:15px}
.cta-section p{font-size:16px;opacity:0.95;margin-bottom:25px;max-width:600px;margin-left:auto;margin-right:auto}
.cta-buttons{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
.page-header{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--white);padding:40px 0}
.page-header h1,.page-header h2,.page-header-title{font-size:28px;font-weight:800;margin-bottom:10px}
.breadcrumb{display:flex;align-items:center;gap:10px;font-size:14px;opacity:0.9}
.breadcrumb a:hover{text-decoration:underline}
.content-section{padding:40px 0}
.content-grid{display:grid;gap:30px}
@media (min-width:992px){.content-grid{grid-template-columns:1fr 320px}
}
.content-main{background:var(--white);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow)}
.content-main h2{font-size:22px;color:var(--primary-dark);margin:30px 0 15px;padding-bottom:10px;border-bottom:2px solid var(--primary-light)}
.content-main h2:first-child{margin-top:0}
.content-main h3{font-size:18px;color:var(--dark);margin:25px 0 12px}
.content-main p{margin-bottom:15px;line-height:1.9}
.content-main ul{margin:15px 0;padding-right:25px}
.content-main ul li{margin-bottom:10px;line-height:1.8;list-style:disc}
.content-main ul li strong{color:var(--primary-dark)}
.faults-section{background:var(--accent-light);padding:25px;border-radius:var(--radius);margin:25px 0;border-right:4px solid var(--accent)}
.faults-section h2,.faults-section h3{color:var(--accent);border:none;padding:0}
.fault-item{background:var(--white);border-radius:var(--radius);padding:20px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid var(--gray-200);transition:all 0.3s ease}
.fault-item:hover{box-shadow:0 5px 20px rgba(0,0,0,0.1);transform:translateY(-2px)}
.fault-item h4{color:var(--primary);font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.fault-item h4 i{width:35px;height:35px;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--primary)}
.fault-item p{font-size:14px;line-height:1.7;color:var(--gray-700);margin-bottom:8px}
.faults-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.fault-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px;text-decoration:none;color:var(--gray-800);transition:all 0.3s ease;display:block}
.fault-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.1);border-color:var(--primary)}
@media (max-width:768px){.faults-section{padding:18px;margin:20px 0}
.faults-section h2{font-size:18px !important;padding:15px 18px !important}
.faults-grid{grid-template-columns:1fr;gap:12px}
.fault-item{padding:16px}
.fault-item h4{font-size:15px}
.fault-item h4 i{width:32px;height:32px;font-size:13px}
.fault-card{padding:16px}
.fault-card h3,.fault-card h4{font-size:15px !important}
.fault-card .fault-icon{width:42px !important;height:42px !important;min-width:42px !important}
}
.sidebar{display:flex;flex-direction:column;gap:20px}
.sidebar-widget{background:var(--white);border-radius:var(--radius-lg);padding:25px;box-shadow:var(--shadow)}
.sidebar-widget h2,.sidebar-widget h4{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid var(--primary-light)}
.sidebar-widget ul{list-style:none}
.sidebar-widget ul li{margin-bottom:8px}
.sidebar-widget ul li a{display:flex;align-items:center;gap:8px;padding:8px 0;color:var(--gray-700);font-size:14px;border-bottom:1px solid var(--gray-100)}
.sidebar-widget ul li a:hover{color:var(--primary)}
.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
@media (min-width:768px){.works-grid{grid-template-columns:repeat(3,1fr);gap:20px}
}
.work-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.work-card img{width:100%;height:150px;object-fit:cover}
.work-card-content{padding:15px}
.work-card h3,.work-card h4{font-size:14px;color:var(--dark);margin-bottom:5px}
.work-card p{font-size:12px;color:var(--gray-600)}
.footer{background:var(--dark);color:var(--white);padding:50px 0 20px}
.footer-grid{display:grid;gap:30px;margin-bottom:30px}
@media (min-width:768px){.footer-grid{grid-template-columns:repeat(3,1fr)}
}
.footer h3,.footer h4,.footer .footer-heading{font-size:16px;font-weight:700;margin-bottom:20px;color:var(--white)}
.footer p{color:var(--gray-400);font-size:14px;line-height:1.8}
.footer-links li{margin-bottom:10px}
.footer-links a{color:var(--gray-400);font-size:14px;display:flex;align-items:center;gap:8px}
.footer-links a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid var(--gray-800);padding-top:20px;text-align:center;color:var(--gray-500);font-size:13px}
.float-buttons{position:fixed;bottom:85px;left:20px;display:flex;flex-direction:column;gap:10px;z-index:999}
.float-btn{width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--white);box-shadow:var(--shadow-lg);transition:var(--transition)}
.float-btn:hover{transform:scale(1.1)}
.float-btn.whatsapp{background:#25d366}
.float-btn.call{background:var(--primary)}
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--white);box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:1000;display:flex;justify-content:space-around;align-items:center;padding:8px 0;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--gray-600);padding:5px 10px}
.bottom-nav-item i{font-size:20px}
.bottom-nav-item.active{color:var(--primary)}
.bottom-nav-item.call-btn{background:var(--primary);color:var(--white);border-radius:50%;width:55px;height:55px;margin-top:-25px;box-shadow:0 4px 15px rgba(30,136,229,0.4)}
.bottom-nav-item.call-btn i{font-size:24px}
.bottom-nav-item.call-btn span{display:none}
@media (min-width:992px){.mobile-bottom-nav{display:none}
.float-buttons{bottom:20px}
body{padding-bottom:0}
}
.error-page{text-align:center;padding:80px 20px}
.error-page i{font-size:80px;color:var(--primary);margin-bottom:20px}
.error-page h1{font-size:36px;color:var(--dark);margin-bottom:15px}
.error-page p{color:var(--gray-600);margin-bottom:25px}
.text-center{text-align:center}
.text-primary{color:var(--primary)}
.mb-2{margin-bottom:10px}
.mb-3{margin-bottom:15px}
.mb-4{margin-bottom:20px}
.mt-3{margin-top:15px}
.mt-4{margin-top:20px}
.loading{display:inline-block;width:20px;height:20px;border:2px solid var(--gray-300);border-radius:50%;border-top-color:var(--primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
.hero{background:linear-gradient(135deg,rgba(30,136,229,0.95) 0%,rgba(21,101,192,0.95) 100%),url('https://images.unsplash.com/photo-1581092921461-eab62e97a780?w=1920&q=80') center/cover no-repeat;color:var(--white);padding:50px 0 60px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E") repeat;opacity:0.2}
.hero-content{position:relative;z-index:1;max-width:800px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:25px}
.hero-badge{background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);padding:8px 16px;border-radius:25px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,0.3)}
.hero h1{font-size:32px;font-weight:800;margin-bottom:18px;line-height:1.3;text-shadow:2px 2px 4px rgba(0,0,0,0.2)}
.hero-subtitle{font-size:20px;font-weight:600;margin-bottom:12px;color:#fff59d}
.hero p{font-size:16px;opacity:0.95;margin-bottom:30px;line-height:1.9}
.hero-stats{display:flex;gap:30px;margin-bottom:30px;flex-wrap:wrap;min-height:60px}
.hero-stat{text-align:center}
.hero-stat .number{font-size:32px;font-weight:800;display:block;color:#fff59d}
.hero-stat .label{font-size:13px;opacity:0.9}
.hero-buttons{display:flex;flex-wrap:wrap;gap:15px}
.hero-buttons .btn{padding:14px 28px;font-size:15px}
@media (min-width:768px){.hero{padding:70px 0 80px}
.hero h1{font-size:42px}
.hero-subtitle{font-size:24px}
.hero-stat .number{font-size:40px}
}
.footer{background:var(--dark);color:var(--white);padding:40px 0 15px}
.footer-grid{display:grid;gap:25px;margin-bottom:25px}
@media (min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
}
.footer h3,.footer h4,.footer .footer-heading{font-size:15px;font-weight:700;margin-bottom:15px;color:var(--white);position:relative;padding-bottom:10px}
.footer h3::after,.footer h4::after,.footer .footer-heading::after{content:'';position:absolute;bottom:0;right:0;width:40px;height:2px;background:var(--primary)}
.footer p{color:var(--gray-400);font-size:13px;line-height:1.7;margin-bottom:15px}
.footer-contact{display:flex;flex-direction:column;gap:10px}
.footer-contact a{display:flex;align-items:center;gap:10px;color:var(--gray-300);font-size:14px;padding:8px 12px;background:rgba(255,255,255,0.05);border-radius:var(--radius);transition:var(--transition)}
.footer-contact a:hover{background:var(--primary);color:var(--white)}
.footer-contact a i{width:20px;color:var(--primary)}
.footer-contact a:hover i{color:var(--white)}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:768px){.footer-links{grid-template-columns:1fr}
}
.footer-links li{margin:0}
.footer-links a{color:var(--gray-400);font-size:13px;display:flex;align-items:center;gap:6px;padding:5px 0}
.footer-links a i{font-size:10px;color:var(--primary)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:15px;text-align:center;color:var(--gray-500);font-size:12px}
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--white);box-shadow:0 -4px 20px rgba(0,0,0,0.1);z-index:1000;display:flex;justify-content:space-around;align-items:flex-end;padding:8px 5px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--gray-600);padding:5px 8px;text-decoration:none;min-width:50px}
.bottom-nav-item i{font-size:18px}
.bottom-nav-item.call-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--white);border-radius:50%;width:56px;height:56px;margin-top:-28px;box-shadow:0 4px 15px rgba(30,136,229,0.4);justify-content:center;padding:0;min-width:56px}
.bottom-nav-item.call-btn i{font-size:22px}
.contact-box{display:flex;align-items:center;gap:15px;padding:20px;background:var(--gray-100);border-radius:var(--radius);margin-bottom:15px;text-decoration:none;color:inherit;transition:var(--transition);border:2px solid transparent}
.contact-box:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow)}
.contact-box .icon{width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:22px;flex-shrink:0}
.contact-box .icon.phone{background:var(--primary)}
.contact-box .icon.whatsapp{background:#25d366}
.contact-box .icon.clock{background:var(--accent)}
.contact-box .icon.location{background:var(--secondary)}
.contact-box h3,.contact-box h4{margin:0 0 5px;font-size:14px;color:var(--gray-600)}
.contact-box .value{font-size:18px;font-weight:700;color:var(--dark)}
.blog-grid{display:grid;gap:25px}
@media (min-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:992px){.blog-grid{grid-template-columns:repeat(3,1fr)}
}
.blog-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition)}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.blog-card img{width:100%;height:200px;object-fit:cover}
.blog-card-content{padding:20px}
.blog-card .date{font-size:12px;color:var(--gray-500);margin-bottom:8px}
.blog-card h3{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:10px;line-height:1.5}
.blog-card p{font-size:14px;color:var(--gray-600);line-height:1.7;margin-bottom:15px}
.blog-card .read-more{color:var(--primary);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:5px}
.blog-card .read-more:hover{gap:10px}
.article-header{margin-bottom:30px}
.article-header img{width:100%;height:300px;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:20px}
@media (min-width:768px){.article-header img{height:400px}
}
.article-meta{display:flex;gap:20px;font-size:13px;color:var(--gray-500);margin-bottom:15px}
.article-content{font-size:16px;line-height:2}
.article-content h2{font-size:22px;color:var(--primary-dark);margin:30px 0 15px}
.article-content h3{font-size:18px;color:var(--dark);margin:25px 0 12px}
.article-content img{max-width:100%;border-radius:var(--radius);margin:20px 0}
.service-card-img{width:100%;height:120px;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;margin:-25px -15px 15px;width:calc(100% + 30px)}
.brand-card-enhanced{background:var(--white);border-radius:var(--radius);padding:15px;text-align:center;box-shadow:var(--shadow);transition:var(--transition);border:2px solid var(--gray-200)}
.brand-card-enhanced:hover{border-color:var(--primary);transform:translateY(-3px)}
.brand-card-enhanced img{width:60px;height:60px;object-fit:contain;margin-bottom:10px}
.brand-card-enhanced h4{font-size:14px;font-weight:600;color:var(--gray-800);margin-bottom:3px}
.brand-card-enhanced span{font-size:11px;color:var(--gray-500)}
.work-card-enhanced{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition)}
.work-card-enhanced:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.work-card-enhanced img{width:100%;height:180px;object-fit:cover}
.work-card-enhanced .content{padding:15px}
.work-card-enhanced h3,.work-card-enhanced h4{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:8px}
.work-card-enhanced p{font-size:13px;color:var(--gray-600);line-height:1.6}
.work-card-enhanced .tags{display:flex;gap:8px;margin-top:10px}
.work-card-enhanced .tag{font-size:11px;padding:4px 10px;background:var(--primary-light);color:var(--primary);border-radius:20px}
.booking-section{padding:0;margin-top:-30px;position:relative;z-index:10}
.booking-cta-card{background:var(--white);border-radius:var(--radius-lg);padding:20px 25px;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.booking-cta-content{display:flex;align-items:center;gap:15px}
.booking-cta-icon{width:55px;height:55px;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.booking-cta-icon i{font-size:24px;color:var(--primary)}
.booking-cta-text h2,.booking-cta-text h3{font-size:18px;color:var(--dark);margin-bottom:3px}
.booking-cta-text p{font-size:14px;color:var(--gray-600);margin:0}
@media (max-width:768px){.booking-cta-card{flex-direction:column;text-align:center}
.booking-cta-content{flex-direction:column}
.booking-open-btn{width:100%}
}
.booking-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:2000;opacity:0;visibility:hidden;transition:var(--transition)}
.booking-modal-overlay.active{opacity:1;visibility:visible}
.booking-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);width:95%;max-width:500px;max-height:90vh;background:var(--white);border-radius:var(--radius-lg);z-index:2001;opacity:0;visibility:hidden;transition:var(--transition);overflow:hidden}
.booking-modal.active{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.booking-modal-header{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--white);padding:18px 25px;display:flex;align-items:center;justify-content:space-between}
.booking-modal-header h3{font-size:18px;display:flex;align-items:center;gap:10px;margin:0}
.modal-close{width:35px;height:35px;background:rgba(255,255,255,0.2);border:none;border-radius:50%;color:var(--white);cursor:pointer;transition:var(--transition)}
.modal-close:hover{background:rgba(255,255,255,0.3)}
.booking-modal-body{padding:25px;max-height:calc(90vh - 80px);overflow-y:auto}
.booking-modal-body .form-group{margin-bottom:18px}
.booking-modal-body .form-group label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;margin-bottom:8px;color:var(--gray-700)}
.booking-modal-body .form-group label i{color:var(--primary)}
.booking-modal-body input,.booking-modal-body select,.booking-modal-body textarea{width:100%;padding:12px 15px;border:2px solid var(--gray-200);border-radius:var(--radius);font-size:15px;font-family:inherit;transition:var(--transition)}
.booking-modal-body input:focus,.booking-modal-body select:focus,.booking-modal-body textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-light)}
.booking-modal-body .form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:500px){.booking-modal-body .form-row{grid-template-columns:1fr}
}
.booking-success{text-align:center;padding:10px}
.booking-success .success-icon{width:80px;height:80px;background:#e8f5e9;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.booking-success .success-icon i{font-size:40px;color:var(--success)}
.booking-success h3{font-size:22px;color:var(--success);margin-bottom:8px}
.booking-success > p{color:var(--gray-600);margin-bottom:20px}
.booking-number-box{background:var(--gray-100);border-radius:var(--radius);padding:15px;margin-bottom:20px}
.booking-number-box span{display:block;font-size:13px;color:var(--gray-600);margin-bottom:5px}
.booking-number-box strong{font-size:24px;color:var(--primary);letter-spacing:2px}
.tracking-info-box{background:var(--gray-100);border-radius:var(--radius);padding:15px;margin-bottom:20px;text-align:right}
.tracking-info-box label{display:block;font-size:13px;color:var(--gray-600);margin-bottom:8px}
.tracking-link-wrapper{display:flex;gap:8px}
.tracking-link-wrapper input{flex:1;padding:10px 12px;border:1px solid var(--gray-300);border-radius:var(--radius);font-size:13px;background:var(--white);direction:ltr}
.tracking-link-wrapper button{padding:10px 15px;background:var(--primary);color:var(--white);border:none;border-radius:var(--radius);cursor:pointer;transition:var(--transition)}
.tracking-link-wrapper button:hover{background:var(--primary-dark)}
.success-actions{display:flex;flex-direction:column;gap:10px}
.success-actions .btn-light{background:var(--gray-100);color:var(--gray-700)}
.success-actions .btn-light:hover{background:var(--gray-200)}
.custom-alert{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:var(--dark);color:var(--white);padding:15px 25px;border-radius:var(--radius);z-index:3000;opacity:0;transition:var(--transition);white-space:nowrap}
.custom-alert.show{opacity:1;transform:translateX(-50%) translateY(0)}
.custom-alert.success{background:var(--success)}
.custom-alert.error{background:var(--danger)}
.custom-alert.warning{background:var(--warning)}
.track-search-card{background:var(--white);border-radius:var(--radius-lg);padding:30px;max-width:600px;margin:0 auto 30px;box-shadow:var(--shadow-lg);text-align:center}
.track-search-card h3{color:var(--dark);margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:10px}
.track-search-card h3 i{color:var(--primary)}
.track-search-form{display:flex;gap:10px}
.track-search-form input{flex:1;padding:14px 18px;border:2px solid var(--gray-200);border-radius:var(--radius);font-size:16px;font-family:inherit;direction:ltr;text-align:center}
.track-search-form input:focus{border-color:var(--primary);outline:none}
.track-search-form button{padding:14px 25px}
@media (max-width:500px){.track-search-form{flex-direction:column}
}
.track-error{margin-top:15px;padding:12px;background:#ffebee;color:var(--danger);border-radius:var(--radius);font-size:14px}
.track-instructions{background:var(--white);border-radius:var(--radius-lg);padding:40px;max-width:500px;margin:0 auto;text-align:center;box-shadow:var(--shadow)}
.track-instructions .icon{width:70px;height:70px;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.track-instructions .icon i{font-size:30px;color:var(--primary)}
.track-instructions h3{margin-bottom:10px;color:var(--dark)}
.track-instructions .note{color:var(--gray-500);font-size:14px}
.order-details-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);max-width:700px;margin:0 auto}
.order-header{background:var(--gray-100);padding:20px 25px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px}
.order-number span{display:block;font-size:13px;color:var(--gray-500);margin-bottom:3px}
.order-number strong{font-size:20px;color:var(--dark);letter-spacing:1px}
.order-status{padding:8px 18px;border-radius:20px;font-size:14px;font-weight:600}
.status-pending{background:#fff3e0;color:#e65100}
.status-confirmed{background:#e3f2fd;color:#1565c0}
.status-progress{background:#e8f5e9;color:#2e7d32}
.status-completed{background:#e8f5e9;color:#1b5e20}
.status-cancelled{background:#ffebee;color:#c62828}
.order-progress{display:flex;justify-content:space-between;padding:30px 25px;position:relative}
.order-progress::before{content:'';position:absolute;top:50px;left:60px;right:60px;height:3px;background:var(--gray-200)}
.progress-step{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.step-icon{width:45px;height:45px;background:var(--gray-200);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:10px;transition:var(--transition)}
.step-icon i{font-size:18px;color:var(--gray-500)}
.order-progress-enhanced{display:flex;align-items:flex-start;justify-content:center;padding:30px 20px;gap:0;flex-wrap:wrap}
.progress-step-enhanced{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:90px;position:relative}
.progress-step-enhanced .step-circle{width:60px;height:60px;background:var(--gray-200);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:all 0.4s ease;position:relative;border:3px solid var(--gray-300)}
.progress-step-enhanced .step-circle i{font-size:22px;color:var(--gray-400);transition:all 0.3s ease}
.progress-step-enhanced .step-info{display:flex;flex-direction:column;gap:4px}
.progress-step-enhanced .step-name{font-size:14px;font-weight:700;color:var(--gray-500)}
.progress-step-enhanced .step-desc{font-size:11px;color:var(--gray-400)}
.progress-step-enhanced.active .step-circle{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-color:var(--primary);box-shadow:0 4px 15px rgba(30,136,229,0.3)}
.progress-step-enhanced.active .step-circle i{color:var(--white)}
.progress-step-enhanced.active .step-name{color:var(--primary)}
.progress-step-enhanced.active .step-desc{color:var(--gray-600)}
.progress-step-enhanced.current .step-circle{animation:currentPulse 2s infinite}
@keyframes currentPulse{0%,100%{box-shadow:0 4px 15px rgba(30,136,229,0.3);transform:scale(1)}
50%{box-shadow:0 4px 25px rgba(30,136,229,0.5);transform:scale(1.05)}
}
.progress-step-enhanced .step-check{position:absolute;bottom:-5px;right:-5px;width:22px;height:22px;background:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--white)}
.progress-step-enhanced .step-check i{font-size:10px;color:var(--white)}
.step-connector{flex:1;height:4px;background:var(--gray-200);margin:28px 5px 0;border-radius:2px;min-width:30px;max-width:60px;transition:all 0.4s ease}
.step-connector.active{background:linear-gradient(90deg,var(--primary),var(--primary-dark))}
.order-cancelled-notice{display:flex;align-items:center;justify-content:center;gap:10px;padding:25px;background:#ffebee;color:#c62828;font-size:18px;font-weight:600}
.order-cancelled-notice i{font-size:24px}
@media (max-width:600px){.order-progress-enhanced{padding:20px 10px}
.progress-step-enhanced{min-width:70px}
.progress-step-enhanced .step-circle{width:50px;height:50px}
.progress-step-enhanced .step-circle i{font-size:18px}
.progress-step-enhanced .step-name{font-size:12px}
.progress-step-enhanced .step-desc{font-size:10px}
.step-connector{min-width:15px;max-width:30px;margin:23px 3px 0}
.progress-step-enhanced .step-check{width:18px;height:18px}
}
.step-label{font-size:12px;color:var(--gray-500);text-align:center}
.progress-step.active .step-icon{background:var(--primary)}
.progress-step.active .step-icon i{color:var(--white)}
.progress-step.active .step-label{color:var(--primary);font-weight:600}
.progress-step.current .step-icon{animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(30,136,229,0.4)}
50%{box-shadow:0 0 0 10px rgba(30,136,229,0)}
}
.order-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;padding:0 25px 25px}
.info-item{background:var(--gray-100);padding:15px;border-radius:var(--radius)}
.info-item i{color:var(--primary);margin-bottom:5px}
.info-item span{display:block;font-size:12px;color:var(--gray-500);margin-bottom:3px}
.info-item strong{font-size:15px;color:var(--dark)}
@media (max-width:500px){.order-info-grid{grid-template-columns:1fr}
}
.order-section{padding:0 25px 25px}
.order-section h4{font-size:15px;color:var(--dark);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.order-section h4 i{color:var(--primary)}
.order-section p{background:var(--gray-100);padding:15px;border-radius:var(--radius);color:var(--gray-700);font-size:14px}
.cost-section{background:#e8f5e9;margin:0 25px 25px;padding:20px;border-radius:var(--radius)}
.cost-section h4{margin-bottom:5px}
.cost-amount{font-size:28px;color:var(--success)}
.order-actions{padding:25px;border-top:1px solid var(--gray-200);display:flex;gap:15px;flex-wrap:wrap}
.order-actions .btn{flex:1;min-width:150px}
.brand-header-logo{width:120px;height:60px;background:var(--white);border-radius:var(--radius);padding:10px;margin:0 auto 15px;display:flex;align-items:center;justify-content:center}
.brand-header-logo.category-logo-card{width:100px;height:100px;border-radius:16px}
.brand-header-logo.category-logo-card i{font-size:48px;color:var(--primary)}
.brand-header-logo img{max-width:100%;max-height:100%;object-fit:contain}
.sidebar-brand-logo{background:var(--gray-100);border-radius:var(--radius);padding:15px;margin-bottom:15px;text-align:center}
.sidebar-brand-logo img{max-width:100%;max-height:50px;object-fit:contain}
.service-card.with-image{padding:0;overflow:hidden}
.service-card-img-wrapper{width:100%;height:150px;background:var(--gray-100);overflow:hidden}
.service-card-img{width:100%;height:100%;object-fit:cover}
.service-card-content{padding:15px}
.service-card.with-image h3{margin-bottom:5px}
.service-card.with-image p{font-size:13px;color:var(--gray-600)}
.brands-grid.with-logos{gap:15px}
.brand-card.with-logo{display:flex;flex-direction:column;align-items:center;padding:15px 10px}
.brand-card.with-logo .brand-logo{width:100%;height:45px;object-fit:contain;margin-bottom:8px}
.brand-card.with-logo .brand-name{font-size:13px;color:var(--gray-700)}
@media (min-width:768px){.works-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){.works-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:15px;margin:0 -15px;padding-left:15px;padding-right:15px;gap:12px}
.works-grid::-webkit-scrollbar{height:4px}
.works-grid::-webkit-scrollbar-track{background:var(--gray-200);border-radius:4px}
.works-grid::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}
.works-grid .work-card-enhanced{flex:0 0 280px;scroll-snap-align:start}
}
.work-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition)}
.work-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.work-card-img{height:150px;background:var(--gray-100);overflow:hidden}
.work-card-img img{width:100%;height:100%;object-fit:cover}
.work-card-content h3,.work-card-content h4{font-size:14px;color:var(--dark);margin-bottom:5px}
.work-card-content span{font-size:12px;color:var(--gray-500)}
.work-card-content span i{color:var(--primary)}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-radius:50%;border-top-color:#fff;animation:spin 0.8s linear infinite;vertical-align:middle;margin-left:8px}
.brands-grid-large{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
@media (min-width:576px){.brands-grid-large{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:768px){.brands-grid-large{grid-template-columns:repeat(4,1fr);gap:20px}
}
@media (min-width:992px){.brands-grid-large{grid-template-columns:repeat(5,1fr)}
}
.brand-card-large{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px 15px;text-align:center;transition:var(--transition);border:2px solid transparent}
.brand-card-large:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.brand-logo-wrapper{width:100%;height:70px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;background:var(--gray-100);border-radius:var(--radius);padding:10px}
.brand-logo-wrapper.brand-logo-placeholder{background:linear-gradient(135deg,var(--primary-light),var(--gray-100))}
.brand-logo-wrapper.brand-logo-placeholder i{font-size:28px;color:var(--primary)}
.brand-logo-large{max-width:100%;max-height:50px;object-fit:contain}
.brand-card-large h4{font-size:15px;color:var(--gray-800);margin-bottom:3px;font-weight:700}
.brand-card-large .brand-name-en{font-size:12px;color:var(--gray-500);display:block}
.brand-card-large .brand-country{font-size:11px;color:var(--gray-400);margin-top:8px;padding-top:8px;border-top:1px solid var(--gray-200)}
.brands-grid-with-logos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:576px){.brands-grid-with-logos{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:768px){.brands-grid-with-logos{grid-template-columns:repeat(4,1fr);gap:15px}
}
@media (min-width:992px){.brands-grid-with-logos{grid-template-columns:repeat(5,1fr)}
}
.brand-card-with-logo{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 10px;text-align:center;transition:var(--transition);display:flex;flex-direction:column;align-items:center}
.brand-card-with-logo:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.brand-card-with-logo .brand-logo{width:100%;height:40px;object-fit:contain;margin-bottom:8px}
.brand-card-with-logo h4{font-size:13px;color:var(--gray-700);font-weight:600}
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--white);box-shadow:0 -3px 15px rgba(0,0,0,0.1);display:flex;justify-content:space-around;align-items:flex-end;padding:8px 5px 10px;z-index:1000;border-top:1px solid var(--gray-200)}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;color:var(--gray-600);padding:5px 8px;text-decoration:none;transition:var(--transition);min-width:55px}
.bottom-nav-item span{font-weight:600}
.bottom-nav-item:hover,.bottom-nav-item.active{color:var(--primary)}
.bottom-nav-item.call-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--white);border-radius:25px;padding:12px 20px;margin-top:-25px;box-shadow:0 6px 20px rgba(30,136,229,0.5);animation:pulse-call 2s infinite;min-width:65px}
.bottom-nav-item.call-btn span{font-size:11px;font-weight:700}
.bottom-nav-item.call-btn:hover{color:var(--white);transform:scale(1.05)}
@keyframes pulse-call{0%,100%{box-shadow:0 6px 20px rgba(30,136,229,0.5)}
50%{box-shadow:0 8px 30px rgba(30,136,229,0.7)}
}
@media (min-width:993px){.mobile-bottom-nav{display:none}
}
.track-order-link{color:var(--primary);font-weight:600;display:flex;align-items:center;gap:5px;padding:8px 12px;background:var(--primary-light);border-radius:var(--radius);font-size:13px}
.track-order-link:hover{background:var(--primary);color:var(--white)}
@media (max-width:768px){.hero{padding:40px 0}
.hero h1{font-size:1.5rem;line-height:1.4}
.hero-badges{gap:8px}
.hero-badge{font-size:11px;padding:5px 10px}
.services-grid,.brands-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.service-card{padding:15px}
.service-card .icon{width:50px;height:50px;font-size:22px;margin-bottom:10px}
.service-card h3{font-size:14px}
.section-title h2{font-size:1.3rem}
.cta-section{padding:35px 0}
.cta-section h2{font-size:1.3rem}
}
.float-buttons{position:fixed;left:15px;bottom:85px;z-index:999;display:flex;flex-direction:column;gap:12px}
.float-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--white);box-shadow:0 4px 15px rgba(0,0,0,0.25);transition:var(--transition)}
.float-btn.whatsapp{background:#25D366}
.float-btn.whatsapp:hover{background:#1DA851}
@media (min-width:993px){.float-buttons{bottom:30px}
}
.service-card,.brand-card,.brand-card-large,.area-card,.work-card{position:relative;overflow:hidden}
.service-card::after,.brand-card-large::after{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease}
.service-card:hover::after,.brand-card-large:hover::after{transform:scaleX(1)}
.booking-section{display:none}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px}
.article-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);display:flex;flex-direction:column}
.article-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.article-img{height:180px;overflow:hidden;background:linear-gradient(135deg,var(--primary-light),var(--gray-200))}
.article-img img{width:100%;height:100%;object-fit:cover;transition:var(--transition)}
.article-card:hover .article-img img{transform:scale(1.05)}
.article-img-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-dark))}
.article-img-placeholder i{font-size:50px;color:rgba(255,255,255,0.3)}
.article-content{padding:20px;flex:1;display:flex;flex-direction:column}
.article-content h4{font-size:17px;color:var(--gray-900);margin-bottom:10px;line-height:1.5}
.article-content p{font-size:14px;color:var(--gray-600);margin-bottom:15px;flex:1}
.article-date{font-size:13px;color:var(--gray-500);display:flex;align-items:center;gap:5px}
.category-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:30px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));min-height:200px}
.category-hero-img{width:100%;height:200px;object-fit:contain;padding:30px;opacity:0.3}
.category-hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--white);padding:20px}
.category-hero-overlay h2{font-size:28px;margin-bottom:10px}
.category-hero-overlay p{font-size:16px;opacity:0.9}
.share-buttons{display:flex;align-items:center;gap:10px;margin:25px 0;padding:15px;background:var(--gray-100);border-radius:var(--radius)}
.share-buttons span{font-weight:600;color:var(--gray-700);font-size:14px}
.share-buttons a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--white);font-size:16px;transition:var(--transition)}
.share-buttons a:hover{transform:scale(1.1)}
.share-buttons .share-fb{background:#1877f2}
.share-buttons .share-tw{background:#1da1f2}
.share-buttons .share-wa{background:#25d366}
.share-buttons .share-tg{background:#0088cc}
.share-buttons .share-ln{background:#0077b5}
.booking-steps{display:flex;justify-content:space-between;margin-bottom:25px;position:relative;padding:0 10px}
.booking-steps::before{content:'';position:absolute;top:20px;left:15%;right:15%;height:3px;background:var(--gray-300);z-index:0}
.booking-steps .step{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1}
.booking-steps .step-number{width:40px;height:40px;background:var(--gray-300);color:var(--gray-600);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;transition:var(--transition)}
.booking-steps .step.active .step-number,.booking-steps .step.completed .step-number{background:var(--primary);color:var(--white)}
.booking-steps .step.completed .step-number{background:var(--success)}
.booking-steps .step-label{font-size:13px;color:var(--gray-500);font-weight:500}
.booking-steps .step.active .step-label{color:var(--primary);font-weight:600}
.booking-step-content{display:none}
.booking-step-content.active{display:block;animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
.step-title{font-size:18px;color:var(--gray-800);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.step-title i{color:var(--primary)}
.device-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:25px}
.device-option{cursor:pointer}
.device-option input{display:none}
.device-card{background:var(--white);border:2px solid var(--gray-300);border-radius:var(--radius);padding:15px 10px;text-align:center;transition:var(--transition)}
.device-card i{font-size:28px;color:var(--gray-500);margin-bottom:8px;display:block}
.device-card span{font-size:12px;color:var(--gray-700);font-weight:500;display:block}
.device-option input:checked + .device-card{border-color:var(--primary);background:var(--primary-light)}
.device-option input:checked + .device-card i{color:var(--primary)}
.device-card:hover{border-color:var(--primary)}
@media (max-width:576px){.device-grid{grid-template-columns:repeat(2,1fr)}
}
.step-buttons{display:flex;gap:15px;margin-top:20px}
.step-buttons .btn{flex:1}
@media (max-width:992px){.content-grid{display:flex;flex-direction:column}
.content-main{order:1}
.sidebar{order:2;margin-top:30px}
}
.float-buttons{position:fixed;bottom:90px;left:20px;z-index:999;display:flex;flex-direction:column;gap:10px}
.float-btn{width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--white);box-shadow:0 4px 15px rgba(0,0,0,0.3);transition:var(--transition);animation:pulse 2s infinite}
.float-btn.whatsapp{background:linear-gradient(135deg,#25d366,#128c7e)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0.4)}
50%{box-shadow:0 0 0 15px rgba(37,211,102,0)}
}
@media (min-width:769px){.float-buttons{bottom:30px}
}
.booking-cta-section{padding:0;margin-top:-30px;position:relative;z-index:10}
.booking-cta-card{background:linear-gradient(135deg,#1e88e5 0%,#1565c0 50%,#0d47a1 100%);border-radius:16px;padding:20px 25px;display:flex;align-items:center;gap:15px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 10px 40px rgba(30,136,229,0.4);position:relative;overflow:hidden}
.booking-cta-card::before{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);transform:rotate(45deg);transition:0.5s}
.booking-cta-card:hover::before{right:100%}
.booking-cta-card:hover{transform:translateY(-3px);box-shadow:0 15px 50px rgba(30,136,229,0.5)}
.booking-cta-icon{width:60px;height:60px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.booking-cta-icon i{font-size:28px;color:white}
.booking-cta-content{flex:1}
.booking-cta-content h2,.booking-cta-content h3{color:white;font-size:20px;font-weight:700;margin-bottom:5px}
.booking-cta-content p{color:rgba(255,255,255,0.9);font-size:13px;margin:0;line-height:1.5}
.booking-cta-arrow{width:45px;height:45px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:0.3s}
.booking-cta-arrow i{color:white;font-size:18px}
.booking-cta-card:hover .booking-cta-arrow{background:white}
.booking-cta-card:hover .booking-cta-arrow i{color:var(--primary)}
.services-image-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.service-image-card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;display:block;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all 0.4s ease}
.service-image-card:hover{transform:translateY(-8px);box-shadow:0 15px 40px rgba(0,0,0,0.2)}
.service-image-card img{width:100%;height:100%;object-fit:cover;transition:all 0.5s ease}
.service-image-card:hover img{transform:scale(1.1)}
.service-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.4) 50%,rgba(0,0,0,0.1) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:25px;transition:all 0.3s ease}
.service-card-icon{width:55px;height:55px;background:var(--primary);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:all 0.3s ease}
.service-card-icon i{font-size:24px;color:white}
.service-image-card:hover .service-card-icon{background:white;transform:scale(1.1)}
.service-image-card:hover .service-card-icon i{color:var(--primary)}
.service-card-overlay h3{color:white;font-size:18px;font-weight:700;margin-bottom:8px}
.service-card-link{color:rgba(255,255,255,0.8);font-size:13px;display:flex;align-items:center;gap:5px;opacity:0;transform:translateY(10px);transition:all 0.3s ease}
.service-image-card:hover .service-card-link{opacity:1;transform:translateY(0)}
.service-card-link i{transition:transform 0.3s ease}
.service-image-card:hover .service-card-link i{transform:translateX(-5px)}
@media (max-width:992px){.services-image-grid{grid-template-columns:repeat(2,1fr);gap:15px}
}
@media (max-width:480px){.services-image-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.service-image-card{aspect-ratio:1/1}
.service-card-overlay{padding:12px}
.service-card-icon{width:40px;height:40px;margin-bottom:8px}
.service-card-icon i{font-size:18px}
.service-card-overlay h3{font-size:13px;margin-bottom:0}
.service-card-link{display:none}
}
.mobile-quick-actions{display:none}
@media (max-width:768px){.mobile-quick-actions{display:flex;gap:10px;padding:12px 15px;background:#f8f9fa}
.quick-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 15px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;transition:0.3s}
.quick-action-btn.call{background:var(--primary);color:white}
.quick-action-btn.whatsapp{background:#25d366;color:white}
.quick-action-btn i{font-size:18px}
.quick-action-btn:active{transform:scale(0.98);opacity:0.9}
}
.articles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.article-card{background:white;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.08);transition:0.3s;display:block}
.article-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,0.12)}
.article-img{height:160px;overflow:hidden}
.article-img img{width:100%;height:100%;object-fit:cover;transition:0.3s}
.article-content{padding:15px}
.article-content h4{font-size:15px;font-weight:600;color:var(--gray-800);margin-bottom:8px;line-height:1.5}
.article-content p{font-size:13px;color:var(--gray-600);margin-bottom:10px;line-height:1.6}
.article-date{font-size:12px;color:var(--gray-500)}
.article-date i{margin-left:5px}
@media (max-width:992px){.articles-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){.articles-grid{grid-template-columns:1fr;gap:15px}
.article-card{display:flex;flex-direction:row}
.article-img{width:100px;min-width:100px;height:100px;flex-shrink:0}
.article-content{flex:1;padding:12px}
.article-content h4{font-size:14px;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-content p{display:none}
.article-date{font-size:11px}
}
.category-hero{min-height:200px;display:flex;align-items:center}
.category-hero-icon{width:80px;height:80px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px}
.category-hero-icon i{font-size:36px;color:white}
.category-hero h1{color:white;text-shadow:0 2px 4px rgba(0,0,0,0.2)}
.category-hero .breadcrumb a,.category-hero .breadcrumb span{color:rgba(255,255,255,0.9)}
.category-hero .breadcrumb a:hover{color:white}
@media (max-width:768px){.category-hero{min-height:150px}
.category-hero-icon{width:60px;height:60px}
.category-hero-icon i{font-size:28px}
}
.contact-grid{display:grid;gap:30px;grid-template-columns:1fr 1fr}
@media (max-width:992px){.contact-grid{grid-template-columns:1fr}
}
.contact-info h2{font-size:24px;margin-bottom:15px;color:var(--primary-dark)}
.contact-info > p{color:var(--gray-600);margin-bottom:25px;line-height:1.8}
.contact-booking-form{background:white;border-radius:20px;padding:30px;box-shadow:0 10px 40px rgba(0,0,0,0.1)}
.booking-form-header{display:flex;align-items:center;gap:12px;margin-bottom:25px;padding-bottom:15px;border-bottom:2px solid var(--gray-200)}
.booking-form-header i{font-size:28px;color:var(--primary)}
.booking-form-header h3{font-size:22px;color:var(--gray-800);margin:0}
.step-title{font-size:18px;color:var(--gray-700);margin-bottom:20px;text-align:center}
.options-grid{display:grid;gap:12px;margin-bottom:20px}
.options-grid.categories-grid{grid-template-columns:repeat(2,1fr)}
.options-grid.brands-grid{grid-template-columns:repeat(3,1fr);max-height:250px;overflow-y:auto}
.option-card{cursor:pointer}
.option-card input{display:none}
.option-card .option-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:15px 10px;border:2px solid var(--gray-200);border-radius:12px;transition:all 0.3s;background:white}
.option-card .option-inner i{font-size:28px;color:var(--primary)}
.option-card .option-inner span{font-size:13px;font-weight:600;color:var(--gray-700);text-align:center}
.option-card input:checked + .option-inner,.option-card.selected .option-inner{border-color:var(--primary);background:var(--primary-light)}
.option-card.brand-card .option-inner{padding:12px 8px}
.option-card.brand-card .option-inner span{font-size:12px}
.step-buttons{display:flex;gap:10px}
.success-message{text-align:center;padding:40px 20px}
.success-message i{font-size:60px;color:var(--success);margin-bottom:20px}
.success-message h4{font-size:22px;color:var(--gray-800);margin-bottom:10px}
.success-message p{color:var(--gray-600)}
.success-message .booking-code{margin-top:20px;padding:15px;background:var(--gray-100);border-radius:10px;font-size:16px}
@media (max-width:768px){.booking-cta-section{padding:15px;margin-top:15px}
.booking-cta-card{background:linear-gradient(135deg,#1565c0 0%,#0d47a1 100%);padding:20px;border-radius:16px;box-shadow:0 10px 30px rgba(21,101,192,0.4);position:relative;overflow:hidden}
.booking-cta-card::before{content:'';position:absolute;top:-50%;right:-30%;width:100%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);transform:rotate(45deg)}
.booking-cta-icon{width:56px;height:56px;background:rgba(255,255,255,0.2);border-radius:14px;backdrop-filter:blur(5px)}
.booking-cta-icon i{font-size:26px;color:white}
.booking-cta-content h2,.booking-cta-content h3{font-size:16px;font-weight:700;color:white;margin-bottom:4px}
.booking-cta-content p{font-size:13px;color:rgba(255,255,255,0.9)}
.booking-cta-arrow{width:44px;height:44px;background:white;border-radius:50%;box-shadow:0 4px 15px rgba(0,0,0,0.15)}
.booking-cta-arrow i{font-size:18px;color:var(--primary-dark)}
}
.service-image-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 60%,transparent 100%);color:white;text-align:center}
.service-image-overlay h3{font-size:16px;font-weight:700;margin:0}
.combined-services .service-image-card{position:relative}
.combined-services .service-image-card img{width:100%;height:100%;object-fit:cover}
.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-height:280px;overflow-y:auto;margin-bottom:20px;padding:5px}
.brand-option{cursor:pointer}
.brand-option input{display:none}
.brand-card-select{padding:15px 8px;border:2px solid var(--gray-200);border-radius:12px;text-align:center;transition:all 0.3s;background:white;display:flex;flex-direction:column;align-items:center;gap:6px}
.brand-select-logo{width:40px;height:40px;object-fit:contain}
.brand-letter-box{width:36px;height:36px;background:linear-gradient(135deg,var(--gray-100),var(--gray-200));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--gray-600);text-transform:uppercase}
.brand-card-select.has-logo .brand-letter-box{display:none}
.brand-card-select span{font-size:11px;font-weight:600;color:var(--gray-700)}
.brand-option input:checked + .brand-card-select,.brand-option.selected .brand-card-select{border-color:var(--primary);background:var(--primary-light)}
.brand-option input:checked + .brand-card-select::before,.brand-option.selected .brand-card-select::before{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white}
.brand-option input:checked + .brand-card-select span,.brand-option.selected .brand-card-select span{color:var(--primary-dark)}
@media (max-width:600px){.brand-grid{grid-template-columns:repeat(3,1fr);gap:8px}
.brand-card-select{padding:12px 6px}
.brand-card-select::before{width:32px;height:32px;font-size:12px}
.brand-card-select span{font-size:10px}
}
.device-option.selected .device-card,.device-option input:checked + .device-card{border-color:var(--primary);background:var(--primary-light)}
.device-option.selected .device-card i,.device-option input:checked + .device-card i{color:var(--primary-dark)}
@media (max-width:768px){.booking-cta-section{padding:20px 15px;margin-top:0;background:linear-gradient(180deg,var(--gray-100) 0%,white 100%)}
.booking-cta-card{background:linear-gradient(135deg,#1565c0 0%,#0d47a1 100%);padding:20px;border-radius:18px;box-shadow:0 12px 35px rgba(21,101,192,0.4);position:relative;overflow:hidden}
.booking-cta-arrow{width:44px;height:44px;background:white;border-radius:50%;box-shadow:0 4px 15px rgba(0,0,0,0.2)}
}
.intro-text{font-size:16px;line-height:1.8;margin-bottom:25px;color:var(--gray-700)}
.cta-box-enhanced{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;padding:30px 20px;border-radius:var(--radius-lg);margin-top:30px;text-align:center}
.cta-box-enhanced h3{font-size:20px;margin-bottom:10px}
.cta-box-enhanced p{font-size:14px;margin-bottom:15px;opacity:0.9}
.cta-box-enhanced .cta-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.text-danger{color:var(--danger) !important}
@media (max-width:768px){.intro-text{font-size:15px}
.cta-box-enhanced{padding:25px 18px}
.cta-box-enhanced h3{font-size:18px}
.cta-box-enhanced .cta-buttons .btn{flex:1;min-width:140px}
}
img[loading="lazy"]{transition:opacity 0.3s ease}
.service-card,.brand-card,.fault-card,.area-card{will-change:transform;-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){.btn{min-height:44px;min-width:44px}
.service-card,.brand-card,.fault-card{-webkit-touch-callout:none}
}
.status-message-box{display:flex;align-items:flex-start;gap:15px;padding:20px;margin:0 20px 20px;border-radius:var(--radius-lg);background:var(--gray-100)}
.status-message-box .status-icon{width:50px;height:50px;min-width:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}
.status-message-box.status-new{background:#fff8e1;border:1px solid #ffecb3}
.status-message-box.status-new .status-icon{background:#fff3e0;color:#ff9800}
.status-message-box.status-contacted{background:#e3f2fd;border:1px solid #bbdefb}
.status-message-box.status-contacted .status-icon{background:#e1f5fe;color:#2196f3}
.status-message-box.status-scheduled{background:#e8f5e9;border:1px solid #c8e6c9}
.status-message-box.status-scheduled .status-icon{background:#e8f5e9;color:#4caf50}
.status-message-box .status-content h4{font-size:16px;color:var(--dark);margin-bottom:5px}
.status-message-box .status-content p{font-size:14px;color:var(--gray-600);margin:0}
.status-message-box .status-note{margin-top:10px;padding:10px;background:rgba(255,255,255,0.7);border-radius:var(--radius);font-size:13px}
.scheduled-date{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:10px 15px;background:rgba(76,175,80,0.1);border-radius:var(--radius)}
.scheduled-date i{color:var(--success)}
.scheduled-date .time{background:var(--success);color:white;padding:3px 10px;border-radius:12px;font-size:12px}
.order-info-details{margin:0 20px 20px;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden}
.order-info-details summary{padding:15px;background:var(--gray-100);cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--gray-700);list-style:none}
.order-info-details summary::-webkit-details-marker{display:none}
.order-info-details summary .arrow{margin-right:auto;transition:transform 0.3s}
.order-info-details[open] summary .arrow{transform:rotate(180deg)}
.order-info-details .order-info-content{padding:15px}
.order-info-details .info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--gray-100);font-size:14px}
.order-info-details .info-row:last-child{border-bottom:none}
.order-info-details .info-row span{color:var(--gray-600);display:flex;align-items:center;gap:8px}
.order-info-details .info-row span i{color:var(--primary);width:16px}
.order-info-details .info-row.full{flex-direction:column;align-items:flex-start}
.order-info-details .info-row.full p{margin-top:8px;color:var(--gray-700)}
.order-completed-view{text-align:center;padding:30px 20px}
.order-completed-view .completed-icon{width:80px;height:80px;background:linear-gradient(135deg,#4caf50,#2e7d32);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:successPulse 2s infinite}
.order-completed-view .completed-icon i{font-size:40px;color:white}
@keyframes successPulse{0%,100%{box-shadow:0 0 0 0 rgba(76,175,80,0.4)}
50%{box-shadow:0 0 0 15px rgba(76,175,80,0)}
}
.order-completed-view h3{font-size:22px;color:var(--success);margin-bottom:10px}
.order-completed-view > p{color:var(--gray-600);margin-bottom:25px}
.order-completed-view .completed-cost{background:var(--gray-100);padding:15px;border-radius:var(--radius);margin-bottom:15px}
.order-completed-view .completed-cost span{display:block;font-size:13px;color:var(--gray-500);margin-bottom:5px}
.order-completed-view .completed-cost strong{font-size:24px;color:var(--success)}
.order-completed-view .completed-parts{background:#e3f2fd;padding:15px;border-radius:var(--radius);margin-bottom:15px;text-align:right}
.order-completed-view .completed-parts span{font-weight:600;color:var(--primary)}
.order-completed-view .completed-info{background:var(--gray-100);padding:15px;border-radius:var(--radius);margin-bottom:20px}
.order-completed-view .completed-info .info-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.order-completed-view .completed-rating{padding-top:15px;border-top:1px solid var(--gray-200)}
.order-completed-view .completed-rating p{margin-bottom:10px;color:var(--gray-600)}
@media (max-width:768px){.faults-section{margin-left:-15px;margin-right:-15px;border-radius:0;border-right:none;border-top:4px solid var(--accent);padding:18px 15px}
.faults-section h2{font-size:17px !important;margin:-18px -15px 18px !important;padding:15px !important;border-radius:0 !important}
.content-main{padding:0 !important}
.status-message-box{margin:0 15px 15px;padding:15px}
.order-info-details{margin:0 15px 15px}
.order-completed-view{padding:25px 15px}
.order-completed-view h3{font-size:20px}
}
.quick-nav-wrapper{margin-bottom:25px}
.quick-nav-scroll{display:flex;gap:10px;overflow-x:auto;padding:5px 0 15px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.quick-nav-scroll::-webkit-scrollbar{display:none}
.quick-nav-scroll a{flex-shrink:0;padding:10px 18px;background:var(--white);border:1px solid var(--gray-200);border-radius:25px;font-size:13px;font-weight:600;color:var(--gray-700);white-space:nowrap;transition:all 0.3s}
.quick-nav-scroll a:hover,.quick-nav-scroll a:active{background:var(--primary);border-color:var(--primary);color:white}
.quick-nav-scroll a i{margin-left:5px}
.content-main > p:first-child,.content-main > div:first-child{padding-top:10px}
.content-main h2:first-child,.content-main h3:first-child{margin-top:0}
@media (max-width:768px){.content-main .faults-section{margin-left:-15px !important;margin-right:-15px !important;border-radius:0 !important}
.content-main .faults-section h2{border-radius:0 !important;margin-left:-25px !important;margin-right:-25px !important;padding:15px 20px !important}
.content-main .faults-section .faults-grid{grid-template-columns:1fr !important;padding:0 5px}
.content-main .faults-section p{padding:0 10px}
}
.quick-nav-section{margin-bottom:25px}
.quick-nav-section h3{font-size:16px;color:var(--gray-700);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.quick-nav-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.quick-nav-pills a{padding:10px 18px;background:var(--primary);color:white;border-radius:25px;font-size:13px;font-weight:600;white-space:nowrap;transition:all 0.3s;display:flex;align-items:center;gap:6px}
.quick-nav-pills a .badge{background:rgba(255,255,255,0.3);padding:2px 8px;border-radius:10px;font-size:11px}
.quick-nav-pills a:hover{background:var(--primary-dark);transform:translateY(-2px)}
@media (max-width:768px){.quick-nav-pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start;padding-bottom:10px;margin:0 -15px;padding-left:15px;padding-right:15px}
.quick-nav-pills::-webkit-scrollbar{display:none}
.quick-nav-pills a{flex-shrink:0;padding:12px 16px}
}
.common-faults-section{padding:50px 0;background:linear-gradient(135deg,#fff5f5 0%,#fff 100%);overflow:hidden}
.common-faults-scroll{display:flex;gap:15px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px 0 20px}
.common-faults-scroll::-webkit-scrollbar{display:none}
.common-fault-card{flex-shrink:0;width:280px;background:white;border-radius:var(--radius-lg);padding:20px;box-shadow:0 3px 15px rgba(0,0,0,0.08);border:1px solid #fee;display:flex;align-items:flex-start;gap:15px;transition:all 0.3s;text-decoration:none}
.common-fault-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(244,67,54,0.15);border-color:#f44336}
.common-fault-card .fault-icon{width:50px;height:50px;min-width:50px;background:#ffebee;border-radius:12px;display:flex;align-items:center;justify-content:center}
.common-fault-card .fault-icon i{font-size:22px;color:#f44336}
.common-fault-card .fault-info{flex:1}
.common-fault-card .fault-category{font-size:11px;color:var(--gray-500);text-transform:uppercase;letter-spacing:0.5px}
.common-fault-card h3,.common-fault-card h4{font-size:14px;color:var(--dark);margin:5px 0 8px;line-height:1.4}
.common-fault-card .fault-link{font-size:12px;color:var(--primary);font-weight:600}
.common-fault-card .fault-link i{margin-right:3px;transition:margin 0.3s}
.common-fault-card:hover .fault-link i{margin-right:8px}
.btn-outline-primary{background:transparent;border:2px solid var(--primary);color:var(--primary);padding:12px 25px;border-radius:25px;font-weight:600;transition:all 0.3s}
.btn-outline-primary:hover{background:var(--primary);color:white}
@media (max-width:768px){.common-faults-section{padding:35px 0}
.common-faults-scroll{margin:0;padding-left:0;padding-right:0}
.common-fault-card{width:250px;padding:15px}
.common-fault-card .fault-icon{width:45px;height:45px;min-width:45px}
.common-fault-card .fault-icon i{font-size:18px}
.common-fault-card h3,.common-fault-card h4{font-size:13px}
}
.content-main p,.content-main h2,.content-main h3{padding-left:15px;padding-right:15px}
@media (min-width:769px){.content-main p,.content-main h2,.content-main h3{padding-left:0;padding-right:0}
}
.quick-nav-wrapper{margin:0 -15px 20px;padding:0 15px}
.quick-nav-scroll{display:flex;gap:8px;overflow-x:auto;padding:5px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory}
.quick-nav-scroll a{flex-shrink:0;scroll-snap-align:start;padding:10px 16px;background:var(--white);border:1px solid var(--gray-200);border-radius:20px;font-size:13px;font-weight:600;color:var(--gray-700);white-space:nowrap;transition:all 0.3s;display:flex;align-items:center;gap:6px}
.quick-nav-scroll a:active,.quick-nav-scroll a:hover{background:var(--primary);border-color:var(--primary);color:white}
.quick-nav-scroll a i{font-size:14px}
.status-new{background:#fff3e0;color:#e65100}
.status-scheduled{background:#e3f2fd;color:#1565c0}
.status-progress{background:#fff8e1;color:#ff8f00}
.status-completed{background:#e8f5e9;color:#2e7d32}
.status-message-box.status-in_progress{background:#fff8e1;border:1px solid #ffecb3}
.status-message-box.status-in_progress .status-icon{background:#fff3e0;color:#ff8f00}
@media (max-width:768px){.content-grid .faults-section{margin-left:-15px;margin-right:-15px}
.faults-grid{padding:0 15px}
}
.category-faults{margin:30px 0;background:transparent;border:none;padding:0}
.faults-header{background:linear-gradient(135deg,#f44336,#c62828);color:#fff;padding:18px 20px;border-radius:12px;margin-bottom:20px;font-size:17px;display:flex;align-items:center;gap:10px}
.faults-intro{font-size:15px;line-height:1.7;margin-bottom:20px;color:#555;padding:0 5px}
.faults-intro a{color:var(--primary);font-weight:bold}
.content-text{padding:0 5px}
.fault-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:18px;text-decoration:none;color:#333;transition:all 0.3s;display:block}
.fault-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,0.1);border-color:var(--primary)}
.fault-card-inner{display:flex;align-items:flex-start;gap:12px}
.fault-card .fault-icon{width:45px;height:45px;min-width:45px;background:#ffebee;border-radius:50%;display:flex;align-items:center;justify-content:center}
.fault-card .fault-icon i{color:#f44336;font-size:18px}
.fault-card .fault-content h3,.fault-card .fault-content h4{color:var(--primary);margin:0 0 6px 0;font-size:15px;line-height:1.4}
.fault-card .fault-content p{font-size:13px;color:#666;margin:0 0 8px 0;line-height:1.5}
.fault-card .fault-link{color:var(--primary);font-size:12px;font-weight:600}
.fault-card .fault-link i{margin-right:3px}
.faults-view-all{text-align:center;margin-top:20px;padding:0 15px}
.btn-outline-primary{background:transparent;border:2px solid var(--primary);color:var(--primary);padding:10px 25px;border-radius:25px;text-decoration:none;display:inline-block;font-size:14px;transition:all 0.3s}
.btn-outline-primary:hover{background:var(--primary);color:#fff}
@media (max-width:768px){.category-faults{margin-left:-15px;margin-right:-15px}
.faults-header{border-radius:0;margin-left:0;margin-right:0;font-size:16px;padding:15px}
.faults-intro{padding:0 15px;font-size:14px}
.faults-grid{padding:0 15px;grid-template-columns:1fr !important;gap:12px}
.fault-card{padding:15px}
.fault-card .fault-icon{width:40px;height:40px;min-width:40px}
.fault-card .fault-icon i{font-size:16px}
.fault-card .fault-content h3,.fault-card .fault-content h4{font-size:14px}
}
.faults-list{display:flex;flex-direction:column;gap:0}
.fault-list-item{display:flex;align-items:flex-start;gap:15px;padding:20px 15px;background:#fff;border-bottom:1px solid #f0f0f0;text-decoration:none;color:inherit;transition:background 0.2s}
.fault-list-item:first-child{border-radius:12px 12px 0 0}
.fault-list-item:last-child{border-bottom:none;border-radius:0 0 12px 12px}
.fault-list-item:only-child{border-radius:12px}
.fault-list-item:active{background:#f8f9fa}
.fault-list-icon{width:50px;height:50px;min-width:50px;background:linear-gradient(135deg,#ffebee,#ffcdd2);border-radius:50%;display:flex;align-items:center;justify-content:center}
.fault-list-icon i{color:#e53935;font-size:20px}
.fault-list-content{flex:1;text-align:right}
.fault-list-content h4{color:var(--primary);margin:0 0 8px 0;font-size:16px;font-weight:700;line-height:1.4}
.fault-list-content p{font-size:14px;color:#666;margin:0 0 10px 0;line-height:1.6}
.fault-list-link{color:var(--primary);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.quick-nav-wrapper{margin:0 -15px 25px;padding:0;overflow:hidden}
.quick-nav-scroll{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:8px;overflow-x:auto;overflow-y:hidden;padding:10px 15px;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory}
.quick-nav-scroll a{flex:0 0 auto;scroll-snap-align:start;padding:10px 16px;background:var(--white);border:1px solid var(--gray-200);border-radius:20px;font-size:13px;font-weight:600;color:var(--gray-700);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.status-message-box{display:flex;align-items:flex-start;gap:15px;padding:20px;margin:20px;border-radius:16px;text-align:right}
.status-message-box .status-icon{width:55px;height:55px;min-width:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}
.status-message-box.status-scheduled{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:none}
.status-message-box.status-scheduled .status-icon{background:#4caf50;color:white}
.status-message-box.status-in_progress{background:linear-gradient(135deg,#fff8e1,#ffecb3);border:none}
.status-message-box.status-in_progress .status-icon{background:#ff9800;color:white}
.status-message-box .status-content{flex:1}
.status-message-box .status-content h4{font-size:18px;color:var(--dark);margin-bottom:8px;font-weight:700}
.status-message-box .status-content > p{font-size:14px;color:var(--gray-600);margin:0 0 12px 0;line-height:1.6}
.scheduled-date{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;background:rgba(255,255,255,0.8);border-radius:10px;margin-bottom:12px}
.scheduled-date i{color:#4caf50;font-size:18px}
.scheduled-date span{font-size:15px}
.scheduled-date strong{color:#2e7d32;font-size:17px}
.status-note{margin-top:12px;padding:12px 15px;background:rgba(255,255,255,0.7);border-radius:10px;font-size:14px;line-height:1.6}
.status-note strong{color:var(--dark);display:block;margin-bottom:5px}
@media (max-width:768px){.status-message-box{margin:15px;padding:18px;flex-direction:column;align-items:center;text-align:center}
.status-message-box .status-content{text-align:center}
.scheduled-date{justify-content:center}
}
.quick-nav-horizontal{display:flex;gap:10px;overflow-x:auto;padding:15px 0;margin:0 -15px 20px;padding-left:15px;padding-right:15px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.quick-nav-horizontal::-webkit-scrollbar{display:none}
.quick-nav-horizontal a{flex-shrink:0;padding:12px 20px;background:var(--white);border:2px solid var(--primary);border-radius:25px;font-size:14px;font-weight:600;color:var(--primary);white-space:nowrap;transition:all 0.3s;display:flex;align-items:center;gap:8px;text-decoration:none}
.quick-nav-horizontal a:hover,.quick-nav-horizontal a:active{background:var(--primary);color:white}
.quick-nav-horizontal a i{font-size:16px}
.quick-nav-section,.quick-nav-pills,.quick-nav-wrapper{display:none !important}
.faults-list{display:flex;flex-direction:column;gap:12px}
.fault-list-item{display:flex;align-items:flex-start;gap:15px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:18px;text-decoration:none;color:#333;transition:all 0.3s ease}
.fault-list-item:hover{border-color:var(--primary);box-shadow:0 5px 20px rgba(0,0,0,0.08);transform:translateX(-5px)}
.fault-list-icon i{font-size:20px;color:#e53935}
.fault-list-content{flex:1}
.fault-list-content h4{font-size:16px;font-weight:700;color:var(--primary);margin:0 0 8px 0;line-height:1.4}
.fault-list-content p{font-size:14px;color:#666;line-height:1.6;margin:0 0 10px 0}
.fault-list-link{font-size:13px;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:5px}
.fault-list-link i{font-size:11px;transition:transform 0.3s}
.fault-list-item:hover .fault-list-link i{transform:translateX(-5px)}
@media (max-width:768px){.faults-list{gap:10px}
.fault-list-item{padding:15px;gap:12px}
.fault-list-icon{width:45px;height:45px;min-width:45px}
.fault-list-icon i{font-size:18px}
.fault-list-content h4{font-size:15px}
.fault-list-content p{font-size:13px}
}
.scheduled-date-box{display:flex;align-items:center;gap:12px;background:rgba(76,175,80,0.1);border:1px solid rgba(76,175,80,0.3);border-radius:10px;padding:12px 15px;margin:10px 0}
.scheduled-date-box .date-icon{width:40px;height:40px;background:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:16px}
.scheduled-date-box .date-info{display:flex;flex-direction:column}
.scheduled-date-box .date-label{font-size:12px;color:var(--gray-600)}
.scheduled-date-box .date-value{font-size:18px;color:var(--success);font-weight:700}
.status-note{margin-top:12px;padding:12px;background:rgba(255,255,255,0.8);border-radius:8px;border-right:3px solid var(--primary)}
.status-note strong{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gray-700);margin-bottom:5px}
.status-note p{margin:0;font-size:14px;color:var(--gray-600)}
.status-message-box.status-scheduled{background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%);border:1px solid #a5d6a7}
.status-message-box.status-scheduled .status-icon{background:linear-gradient(135deg,#4caf50,#2e7d32);color:white}
.quick-nav-section{display:none !important}
.quick-nav-pills{display:none !important}
.quick-nav-horizontal{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:10px;overflow-x:auto;overflow-y:hidden;padding:15px;margin:0 -15px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}
.quick-nav-horizontal a{flex:0 0 auto !important;white-space:nowrap;padding:12px 20px;background:var(--white);border:2px solid var(--primary);border-radius:25px;font-size:14px;font-weight:600;color:var(--primary);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all 0.3s}
@media (max-width:768px){.quick-nav-horizontal{padding:10px 15px;gap:8px}
.quick-nav-horizontal a{padding:10px 15px;font-size:13px}
}
.quick-nav-horizontal{display:flex !important;flex-wrap:nowrap !important;gap:10px !important;overflow-x:auto !important;overflow-y:hidden !important;padding:15px 0 !important;margin:0 0 20px 0 !important;-webkit-overflow-scrolling:touch !important;scrollbar-width:none !important;white-space:nowrap !important}
.quick-nav-horizontal::-webkit-scrollbar{display:none !important}
.quick-nav-horizontal a{flex:0 0 auto !important;display:inline-flex !important;padding:12px 20px !important;background:var(--white) !important;border:2px solid var(--primary) !important;border-radius:25px !important;font-size:14px !important;font-weight:600 !important;color:var(--primary) !important;white-space:nowrap !important;transition:all 0.3s !important;align-items:center !important;gap:8px !important;text-decoration:none !important}
.quick-nav-horizontal a:hover,.quick-nav-horizontal a:active{background:var(--primary) !important;color:white !important}
.sidebar-widget .sidebar-heading{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid var(--primary-light)}
.card-title{font-size:14px;font-weight:600}
.brand-card .card-title{font-size:13px;font-weight:600;color:var(--gray-800)}
.area-card .card-title{font-size:14px;font-weight:600;color:var(--dark);display:flex;align-items:center;gap:8px}
.area-card .card-title i{color:var(--primary)}
h3.fault-item-title{font-size:16px;font-weight:600;color:var(--primary);margin-bottom:12px;display:flex;align-items:center;gap:10px}