/* ===== CSS Variables & Reset ===== */
 :root {
     --main-color: #9B1728;
     --main-dark: #7a1220;
     --main-light: #c41e3a;
     --accent: #e60023;
     --bg-primary: #ffffff;
     --bg-secondary: #f4f6f9;
     --bg-dark: #1a1a2e;
     --text-primary: #1a1a2e;
     --text-secondary: #555;
     --text-light: #888;
     --border-color: #e8e8e8;
     --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
     --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
     --shadow-lg: 0 15px 50px rgba(0, 0, 0, 0.12);
     --radius-sm: 8px;
     --radius-md: 12px;
     --radius-lg: 20px;
     --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: "Cairo", sans-serif;
     direction: rtl;
     background: var(--bg-secondary);
     color: var(--text-primary);
     line-height: 1.8;
     overflow-x: hidden;
 }

 .container {
     width: 90%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 15px;
 }

 /* ===== Header ===== */
 /* .header {
      padding: 20px 0;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background-color: rgba(26, 26, 46, 0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      animation: slideDown 0.8s ease-out;
    }

    @keyframes slideDown {
      from { transform: translateY(-100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .header .logo {
      display: flex;
      gap: 10px;
      align-items: center;
      text-decoration: none;
    }

    .header .logo img {
      width: 50px;
      height: auto;
    }

    .header .logo .span {
      font-size: 24px;
      font-weight: bold;
      color: white;
    }

    .header .logo .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

    .header .logo .logo-text .word-1 {
      font-weight: bold;
      font-size: 18px;
      color: white;
    }

    .header .logo .logo-text .word-2 {
      font-size: 14px;
      color: rgba(255,255,255,0.7);
    }

    .header .navbar ul {
      display: flex;
      list-style: none;
      gap: 25px;
    }

    .header .navbar ul li a {
      text-decoration: none;
      color: rgba(255,255,255,0.85);
      font-size: 15px;
      font-weight: 600;
      transition: var(--transition);
      position: relative;
      padding-bottom: 5px;
    }

    .header .navbar ul li a::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0;
      height: 2px;
      background: var(--accent);
      transition: width 0.3s ease;
    }

    .header .navbar ul li a:hover {
      color: #fff;
    }

    .header .navbar ul li a:hover::after {
      width: 100%;
    }

    .header .navbar ul li a.active {
      color: #fff;
    }

    .header .navbar ul li a.active::after {
      width: 100%;
    }

    .header .button-1 {
      padding: 10px 22px;
      background: linear-gradient(135deg, var(--main-color), var(--main-light));
      color: white;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      font-size: 14px;
      transition: var(--transition);
      box-shadow: 0 4px 15px rgba(155, 23, 40, 0.3);
    }

    .header .button-1:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(155, 23, 40, 0.4);
    }

    .header .button-1 a {
      text-decoration: none;
      color: white;
      font-weight: 600;
    } */

 /* Mobile menu toggle */
 .menu-toggle {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 5px;
 }

 .menu-toggle span {
     width: 28px;
     height: 3px;
     background: white;
     border-radius: 3px;
     transition: var(--transition);
 }

 /* ===== Hero Banner ===== */
 .faq-hero {
     background: linear-gradient(135deg, var(--bg-dark) 0%, #16213e 50%, var(--main-dark) 100%);
     padding: 180px 0 100px;
     position: relative;
     overflow: hidden;
 }

 .faq-hero::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(155, 23, 40, 0.15), transparent 70%);
     animation: float 8s ease-in-out infinite;
 }

 .faq-hero::after {
     content: '';
     position: absolute;
     bottom: -30%;
     left: -10%;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(230, 0, 35, 0.1), transparent 70%);
     animation: float 6s ease-in-out infinite reverse;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0) scale(1);
     }

     50% {
         transform: translateY(-30px) scale(1.05);
     }
 }

 .faq-hero .container {
     position: relative;
     z-index: 1;
     text-align: center;
 }

 .faq-hero-icon {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--main-color), var(--accent));
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 25px;
     font-size: 36px;
     color: white;
     box-shadow: 0 10px 30px rgba(155, 23, 40, 0.4);
     animation: pulse 2s ease-in-out infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         box-shadow: 0 10px 30px rgba(155, 23, 40, 0.4);
     }

     50% {
         box-shadow: 0 10px 50px rgba(155, 23, 40, 0.6);
     }
 }

 .faq-hero h1 {
     font-size: 2.8rem;
     font-weight: 800;
     color: white;
     margin-bottom: 15px;
     line-height: 1.4;
 }

 .faq-hero h1 span {
     background: linear-gradient(135deg, #ff6b6b, var(--accent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .faq-hero p {
     font-size: 1.15rem;
     color: rgba(255, 255, 255, 0.7);
     max-width: 650px;
     margin: 0 auto 40px;
 }

 /* ===== Breadcrumb ===== */
 .breadcrumb {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     margin-bottom: 30px;
 }

 .breadcrumb a {
     color: rgba(255, 255, 255, 0.6);
     text-decoration: none;
     font-size: 14px;
     transition: color 0.3s;
 }

 .breadcrumb a:hover {
     color: white;
 }

 .breadcrumb span {
     color: rgba(255, 255, 255, 0.4);
     font-size: 14px;
 }

 .breadcrumb .current {
     color: var(--accent);
     font-weight: 600;
 }

 /* ===== Stats Bar ===== */
 .stats-bar {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 50px;
     margin-top: 40px;
     padding-top: 40px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .stat-item {
     text-align: center;
 }

 .stat-item .stat-number {
     font-size: 2rem;
     font-weight: 800;
     background: linear-gradient(135deg, #ff6b6b, var(--accent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .stat-item .stat-label {
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.5);
     margin-top: 5px;
 }

 /* ===== Search & Filter Section ===== */
 .search-filter-section {
     background: white;
     margin-top: -50px;
     position: relative;
     z-index: 10;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
     padding: 40px;
 }

 .search-wrapper {
     position: relative;
     margin-bottom: 25px;
 }

 .search-wrapper i {
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--text-light);
     font-size: 20px;
     transition: color 0.3s;
 }

 #faq-search {
     width: 100%;
     padding: 18px 55px 18px 20px;
     border: 2px solid var(--border-color);
     border-radius: var(--radius-md);
     font-size: 16px;
     font-family: "Cairo", sans-serif;
     direction: rtl;
     transition: var(--transition);
     background: var(--bg-secondary);
     color: var(--text-primary);
 }

 #faq-search:focus {
     outline: none;
     border-color: var(--main-color);
     background: white;
     box-shadow: 0 0 0 4px rgba(155, 23, 40, 0.1);
 }

 #faq-search:focus+i {
     color: var(--main-color);
 }

 .search-results-count {
     font-size: 14px;
     color: var(--text-light);
     margin-top: 8px;
     display: none;
 }

 .filter-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     align-items: center;
 }

 .filter-btn {
     padding: 10px 24px;
     border: 2px solid var(--border-color);
     background: white;
     border-radius: 50px;
     font-family: "Cairo", sans-serif;
     font-size: 14px;
     font-weight: 600;
     color: var(--text-secondary);
     cursor: pointer;
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .filter-btn i {
     font-size: 16px;
 }

 .filter-btn:hover {
     border-color: var(--main-color);
     color: var(--main-color);
     background: rgba(155, 23, 40, 0.04);
 }

 .filter-btn.active {
     background: linear-gradient(135deg, var(--main-color), var(--main-light));
     color: white;
     border-color: transparent;
     box-shadow: 0 4px 15px rgba(155, 23, 40, 0.3);
 }

 .toggle-all-btns {
     display: flex;
     gap: 10px;
     margin-right: auto;
 }

 .toggle-btn {
     padding: 8px 18px;
     border: 1px solid var(--border-color);
     background: white;
     border-radius: var(--radius-sm);
     font-family: "Cairo", sans-serif;
     font-size: 13px;
     color: var(--text-light);
     cursor: pointer;
     transition: var(--transition);
 }

 .toggle-btn:hover {
     border-color: var(--main-color);
     color: var(--main-color);
 }

 /* ===== FAQ Sections ===== */
 .faq-main {
     padding: 60px 0 80px;
 }

 .faq-category {
     margin-bottom: 50px;
     animation: fadeInUp 0.6s ease-out;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .category-header {
     display: flex;
     align-items: center;
     gap: 18px;
     margin-bottom: 25px;
     padding-bottom: 15px;
     border-bottom: 2px solid var(--border-color);
     position: relative;
 }

 .category-header::after {
     content: '';
     position: absolute;
     bottom: -2px;
     right: 0;
     width: 80px;
     height: 2px;
     background: linear-gradient(90deg, var(--main-color), var(--accent));
 }

 .category-icon {
     width: 55px;
     height: 55px;
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     color: white;
     flex-shrink: 0;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
 }

 .category-icon.fridge {
     background: linear-gradient(135deg, #2196F3, #1565C0);
 }

 .category-icon.washer {
     background: linear-gradient(135deg, #9C27B0, #6A1B9A);
 }

 .category-icon.tv {
     background: linear-gradient(135deg, #FF9800, #E65100);
 }

 .category-icon.ac {
     background: linear-gradient(135deg, #00BCD4, #00838F);
 }

 .category-icon.general {
     background: linear-gradient(135deg, var(--main-color), var(--accent));
 }

 .category-info h2 {
     font-size: 1.6rem;
     font-weight: 800;
     color: var(--text-primary);
     margin-bottom: 5px;
 }

 .category-info p {
     font-size: 0.9rem;
     color: var(--text-light);
 }

 .category-count {
     margin-right: auto;
     background: var(--bg-secondary);
     padding: 6px 16px;
     border-radius: 50px;
     font-size: 13px;
     font-weight: 700;
     color: var(--text-light);
 }

 /* ===== Accordion Items ===== */
 .faq-item {
     background: white;
     border-radius: var(--radius-md);
     margin-bottom: 12px;
     box-shadow: var(--shadow-sm);
     border: 1px solid transparent;
     transition: var(--transition);
     overflow: hidden;
 }

 .faq-item:hover {
     box-shadow: var(--shadow-md);
     border-color: rgba(155, 23, 40, 0.1);
 }

 .faq-item.active {
     box-shadow: 0 5px 25px rgba(155, 23, 40, 0.12);
     border-color: rgba(155, 23, 40, 0.2);
 }

 .faq-question {
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 20px 25px;
     cursor: pointer;
     user-select: none;
     transition: var(--transition);
 }

 .faq-question:hover {
     background: rgba(155, 23, 40, 0.02);
 }

 .faq-item.active .faq-question {
     background: rgba(155, 23, 40, 0.03);
 }

 .q-icon {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: var(--bg-secondary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     font-size: 14px;
     color: var(--main-color);
     flex-shrink: 0;
     transition: var(--transition);
 }

 .faq-item.active .q-icon {
     background: linear-gradient(135deg, var(--main-color), var(--accent));
     color: white;
 }

 .faq-question h3 {
     flex: 1;
     font-size: 1rem;
     font-weight: 700;
     color: var(--text-primary);
     line-height: 1.6;
 }

 .faq-item.active .faq-question h3 {
     color: var(--main-color);
 }

 .toggle-icon {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: var(--bg-secondary);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: var(--transition);
 }

 .toggle-icon i {
     font-size: 14px;
     color: var(--text-light);
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .faq-item.active .toggle-icon {
     background: var(--main-color);
 }

 .faq-item.active .toggle-icon i {
     color: white;
     transform: rotate(180deg);
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
     padding: 0 25px;
 }

 .faq-answer-inner {
     padding: 0 0 25px;
     padding-right: 51px;
     border-top: 1px solid var(--border-color);
     padding-top: 20px;
 }

 .faq-answer p {
     font-size: 0.95rem;
     color: var(--text-secondary);
     line-height: 2;
 }

 /* ===== No Results ===== */
 .no-results {
     text-align: center;
     padding: 60px 20px;
     display: none;
 }

 .no-results i {
     font-size: 64px;
     color: var(--border-color);
     margin-bottom: 20px;
 }

 .no-results h3 {
     font-size: 1.4rem;
     color: var(--text-primary);
     margin-bottom: 10px;
 }

 .no-results p {
     color: var(--text-light);
     margin-bottom: 25px;
 }

 /* ===== CTA Section ===== */
 .faq-cta {
     background: linear-gradient(135deg, var(--bg-dark), #16213e);
     padding: 80px 0;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .faq-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--main-color), var(--accent), var(--main-color));
 }

 .faq-cta .container {
     position: relative;
     z-index: 1;
 }

 .cta-icon {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--main-color), var(--accent));
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 25px;
     font-size: 30px;
     color: white;
     box-shadow: 0 10px 30px rgba(155, 23, 40, 0.4);
 }

 .faq-cta h2 {
     font-size: 2rem;
     font-weight: 800;
     color: white;
     margin-bottom: 15px;
 }

 .faq-cta p {
     font-size: 1.1rem;
     color: rgba(255, 255, 255, 0.6);
     max-width: 550px;
     margin: 0 auto 35px;
 }

 .cta-buttons {
     display: flex;
     gap: 15px;
     justify-content: center;
     flex-wrap: wrap;
 }

 .cta-btn {
     padding: 14px 35px;
     border-radius: 50px;
     font-family: "Cairo", sans-serif;
     font-size: 15px;
     font-weight: 700;
     text-decoration: none;
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     border: none;
 }

 .cta-btn.primary {
     background: linear-gradient(135deg, var(--main-color), var(--accent));
     color: white;
     box-shadow: 0 5px 20px rgba(155, 23, 40, 0.35);
 }

 .cta-btn.primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 30px rgba(155, 23, 40, 0.5);
 }

 .cta-btn.whatsapp {
     background: linear-gradient(135deg, #25D366, #128C7E);
     color: white;
     box-shadow: 0 5px 20px rgba(37, 211, 102, 0.3);
 }

 .cta-btn.whatsapp:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
 }

 .cta-btn.outline {
     background: transparent;
     color: white;
     border: 2px solid rgba(255, 255, 255, 0.3);
 }

 .cta-btn.outline:hover {
     border-color: white;
     background: rgba(255, 255, 255, 0.1);
     transform: translateY(-3px);
 }

 /* ===== WhatsApp Floating Button ===== */
 .whatsapp-float {
     position: fixed;
     bottom: 30px;
     left: 30px;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: linear-gradient(135deg, #25D366, #128C7E);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 28px;
     text-decoration: none;
     z-index: 999;
     box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
     animation: whatsappPulse 2s ease-in-out infinite;
     transition: var(--transition);
 }

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

 @keyframes whatsappPulse {

     0%,
     100% {
         box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
     }

     50% {
         box-shadow: 0 5px 35px rgba(37, 211, 102, 0.6);
     }
 }

 /* ===== Back to Top ===== */
 .back-to-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--main-color), var(--accent));
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 20px;
     text-decoration: none;
     z-index: 999;
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
     box-shadow: 0 5px 15px rgba(155, 23, 40, 0.3);
     cursor: pointer;
     border: none;
 }

 .back-to-top.visible {
     opacity: 1;
     visibility: visible;
 }

 .back-to-top:hover {
     transform: translateY(-3px);
 }

 /* ===== Footer ===== */
 .faq-footer {
     background: var(--bg-dark);
     padding: 40px 0;
     text-align: center;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }

 .faq-footer p {
     color: rgba(255, 255, 255, 0.4);
     font-size: 14px;
 }

 .faq-footer a {
     color: var(--accent);
     text-decoration: none;
 }

 /* ===== Highlight matched text ===== */
 .highlight {
     background: rgba(230, 0, 35, 0.12);
     color: var(--main-color);
     padding: 1px 4px;
     border-radius: 3px;
     font-weight: 700;
 }

 /* ===== Responsive Design ===== */
 @media (max-width: 992px) {
     .header .navbar {
         position: fixed;
         top: 0;
         right: -100%;
         width: 280px;
         height: 100vh;
         background: var(--bg-dark);
         z-index: 2000;
         transition: right 0.4s ease;
         padding-top: 80px;
     }

     .header .navbar.open {
         right: 0;
     }

     .header .navbar ul {
         flex-direction: column;
         padding: 20px 30px;
         gap: 15px;
     }

     .header .navbar ul li a {
         font-size: 16px;
         display: block;
         padding: 10px 0;
     }

     .menu-toggle {
         display: flex;
         z-index: 2001;
     }

     .header .button-1 {
         display: none;
     }

     .faq-hero h1 {
         font-size: 2rem;
     }

     .stats-bar {
         gap: 25px;
     }

     .stat-item .stat-number {
         font-size: 1.5rem;
     }

     .filter-buttons {
         justify-content: center;
     }

     .toggle-all-btns {
         margin-right: 0;
         width: 100%;
         justify-content: center;
         margin-top: 10px;
     }
 }

 @media (max-width: 768px) {
     .search-filter-section {
         margin-top: -30px;
         padding: 25px 20px;
         border-radius: var(--radius-md);
     }

     .faq-hero {
         padding: 150px 0 80px;
     }

     .faq-hero h1 {
         font-size: 1.6rem;
     }

     .faq-hero p {
         font-size: 0.95rem;
     }

     .stats-bar {
         flex-wrap: wrap;
         gap: 20px;
     }

     .category-header {
         flex-wrap: wrap;
     }

     .category-count {
         margin-right: 0;
     }

     .faq-question {
         padding: 16px 18px;
         gap: 12px;
     }

     .faq-question h3 {
         font-size: 0.9rem;
     }

     .faq-answer-inner {
         padding-right: 0;
     }

     .cta-buttons {
         flex-direction: column;
         align-items: center;
     }

     .faq-cta h2 {
         font-size: 1.5rem;
     }
 }

 @media (max-width: 480px) {
     .faq-hero h1 {
         font-size: 1.4rem;
     }

     .category-info h2 {
         font-size: 1.2rem;
     }

     .q-icon {
         width: 30px;
         height: 30px;
         font-size: 12px;
     }

     .filter-btn {
         padding: 8px 16px;
         font-size: 13px;
     }
 }

 /* ===== Overlay for mobile nav ===== */
 .nav-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1999;
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
 }

 .nav-overlay.active {
     opacity: 1;
     visibility: visible;
     }
    .site-footer .footer-col {
            opacity: 1 !important;
            transform: none !important;
            visibility: visible !important;
            transition: none !important;
        }