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

body {
  font-family: var(--font-main);
  line-height: 1.6;
  background-color: var(--background);
  padding-bottom:80px;
}
.faq-answer {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.active .faq-answer {
  max-height: 500px;
}
:root {
  /* =========================
     BRAND COLORS (FIXED CONTRAST)
     ========================= */
  --primary-color: #8b0010;        /* Darker red – readable on white */
  --primary-dark: #6f000c;         /* Hover / active */
  --primary-soft: #fbeaec;         /* Light red background */

  /* =========================
     BACKGROUNDS
     ========================= */
  --background: #f5f7fa;           /* Neutral light gray (eye-safe) */
  --secondary-color: #eef1f6;      /* Cards / sections */
  --white: #ffffff;
  --black: #0b0b0b;

  /* =========================
     TEXT COLORS (WCAG SAFE)
     ========================= */
  --text-primary: #111827;         /* Main text (AAA on white) */
  --text-secondary: #374151;       /* Paragraphs */
  --text-muted: #6b7280;           /* Meta, labels */
  --text-inverse: #ffffff;         /* Dark backgrounds */

  /* =========================
     GRAYS (REPLACED OLD GRAYS)
     ========================= */
  --gray: #d1d5db;                 /* Borders */
  --gray-light: #f9fafb;           /* Inputs / subtle bg */
  --gray-dark: #4b5563;            /* Icons / secondary text */

  /* =========================
     ACCENTS & STATUS
     ========================= */
  --accent: #128c4a;               /* WhatsApp green (contrast-safe) */
  --accent-hover: #0e6f3b;

  --success: #047857;
  --warning: #b45309;
  --danger: #b91c1c;

  /* =========================
     RATING
     ========================= */
  --star: #f59e0b;                 /* Better contrast than #ffc107 */

  /* =========================
     FOOTER
     ========================= */
  --footer-bg: #0b0b0b;
  --footer-text: #ffffff;

  /* =========================
     UI TOKENS
     ========================= */
  --border-radius: 16px;
  --transition: 0.2s ease;
  --focus-ring: 0 0 0 3px rgba(139, 0, 16, 0.35);

  --font-main: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ======================================================
   FONT (FIXED)
====================================================== */
.call-time-bottom{
  margin-top: 8px;
  font-size: 12px;
  color: var(--primary-soft);
  display: flex;
  justify-content: center;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-regular.woff2') format('woff2');
  font-display: swap;
}
/* ======================================================
   RESET & BASE
====================================================== */
.product-page-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.logo-img {
  width: 120px;
  height: auto;
  object-fit: contain;
  display: block;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}
.lmtd-slt {
  background-color: #facc15;
  padding: 8px;
  font-weight:700;
  text-align:left;
  margin:10px 0;
border-radius:6px;
}
.uj-whte-ul{
  color: var(--gray-dark);
  font-weight: 600;
}
/* ======================================================
   IMAGE NORMALIZATION (VALID & SAFE)
====================================================== */
.serv-img,
.review-img {
  aspect-ratio: 1 / 1;
}

.ac-img,
.logo-img {
  aspect-ratio: 3 / 2;
}

.product-page-img,
.pop-img {
  aspect-ratio: 16 / 9;
}

.serv-img,
.ac-img,
.logo-img,
.review-img,
.product-page-img,
.pop-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ======================================================
   SEARCH RESULTS
====================================================== */
.search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
}

.search-result-item.active {
  background: #f0f4ff;
}

.search-result-item .result-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.search-result-item .result-text {
  display: flex;
  flex-direction: column;
}

/* ======================================================
   PAGE LOADER
====================================================== */
#pageLoader {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #720310, #930012);
  z-index: 9999;
  transition: width 0.3s ease-out;
}

/* ======================================================
   NAVIGATION
====================================================== */
.my-nav {
  width: 1200px;
  margin: 0 auto;
}

.nav-one {
  height: 80px;
  display: flex;
  padding: 8px 16px;
  background-color: var(--black);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  margin-bottom: 16px;
}

.uj-logo {

  width: 60px;
  height: 60px;
  transition: transform var(--transition);
}

.uj-logo:hover {
  transform: scale(1.1);
}

.nav-hdng {
  padding: 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
}

.nav-hdng:hover {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

/* ======================================================
   ROLLING BANNER – TEXT ONLY VERSION
====================================================== */

.rolling-banner {
  width: 60%;
  padding: 8px 0;
  background: var(--black);
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}

.rolling-text {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.rolling-text span {
  display: inline-block;
  animation: scrollText 15s linear infinite;
}

@keyframes scrollText {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}



/* ======================================================
   ADD TO CART BUTTON
====================================================== */

.open-booking-popup {
    width: 220px;
    height: 56px;
    padding: 16px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s, transform 0.2s;
    justify-content: center;
}

.open-booking-popup:hover,
.open-booking-popup:focus {
  background: var(--primary-dark);
  transform: scale(1.05);
}


.open-booking-popup:active {
  transform: scale(0.97);
}

.add-to-cart-anim {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
  color: var(--primary-dark);
  pointer-events: none;
}

/* ======================================================
   SEARCH ICON
====================================================== */
#searchBtn .fa-search {
  color: var(--gray-light);
}

.call-btn-blk {
    width: 220px;
    height: 56px;
    display: flex;
    margin-top: 16px;
    padding: 16px;
    font-size: 16px;
    background: var(--black);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    /* transition: background var(--transition); */
    align-items: center;
    justify-content: center;
    gap: 8px;
}


.whtsap-call {
    width: 220px;
    height: 56px;
    display: flex;
    margin-top: 32px;
    padding: 16px;
    font-size: 16px;
    background: var(--black);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    /* transition: background var(--transition); */
    align-items: center;
    justify-content: center;
    gap: 8px;
}


/* ======================================================
   SEARCH + SERVICE CONTAINERS
====================================================== */
.serh-box-product-menu {
  width: 60%;
  height: 80px;
  padding: 8px 16px;
  display: flex;
  color: var(--white);
}

.srch-bar {
  display: flex;
  width: 100%;
  margin-top: 56px;
  gap: 40px;
}

.srch-img-text {
  width: 60%;
  padding: 8px;
  display: flex;
  background: var(--secondary-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transition: box-shadow var(--transition);
  justify-content: flex-start;
  gap: 16px;
}

.srch-img-text:hover {
  box-shadow: 0 4px 16px rgba(147,0,18,0.15);
}

.srch-img-text-home{
width: 60%;
height: 120px;
display: flex;
align-items: flex-start;
gap: 16%;
  padding: 8px;
  background: var(--secondary-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transition: box-shadow var(--transition);
}
/* ======================================================
   SERVICE ICON GRID
====================================================== */
.img-text-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
  border-radius: var(--border-radius);
  transition: transform var(--transition), background var(--transition);
}

.img-text-link:hover {
  transform: scale(1.05);
  background: var(--primary-color);
}

.serv-img {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--primary-color);
  background: linear-gradient(
    135deg,
    var(--primary-color) 60%,
    var(--primary-dark) 100%
  );
  box-shadow: 0 2px 8px rgba(147,0,18,0.08);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.img-text-link:hover .serv-img {
  border-color: var(--white);
  box-shadow: 0 4px 16px rgba(255,255,255,0.18);
  animation: rotate-border 1.2s linear infinite;
}

@keyframes rotate-border {
  to { transform: rotate(8deg); }
}

.spannn {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #222;
  transition: color var(--transition);
}

.img-text-link:hover .spannn {
  color: var(--gray-light);
}

/* ======================================================
   SEARCH INPUT + RESULTS
====================================================== */
.new-nav-box-search {
  display: flex;
  width: 100%;
  height: 120px;
  margin-bottom: 24px;
  gap: 40px;
}

.all-srch {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  gap: 16px;
  background: var(--black);
  border-radius: var(--border-radius);
  position: relative;
  z-index: 2000;
}

.text-search {
  display: flex;
}

.text-search input {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--gray);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  background: var(--white);
  color: var(--primary-color);
  outline: none;
}

.text-search button {
  padding: 8px 16px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  background: var(--primary-color);
  color: var(--background);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  transition: background var(--transition);
}

.text-search button:hover {
  background: var(--primary-dark);
}

/* ======================================================
   SEARCH RESULTS DROPDOWN
====================================================== */
.search-results {
  position: absolute;
  top: 112px;
  left: 0;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--secondary-color);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  z-index: 100;
  display: none;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 16px;
  color: var(--primary-color);
  cursor: pointer;
  border-bottom: 1px solid var(--white);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  color: var(--primary-dark);
}

/* ======================================================
   VOICE SEARCH
====================================================== */
.voice-search-container {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(147,0,18,0.08);
  position: relative;
  transition: box-shadow var(--transition);
}

.voice-search-container.active {
  box-shadow:
    0 0 0 8px rgba(147,0,18,0.08),
    0 2px 8px rgba(147,0,18,0.08);
}

#voiceSearchBtn {
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#voiceSearchBtn .fa-microphone {
  font-size: 20px;
  color: var(--primary-color);
  transition: color 0.3s;
}

#voiceSearchBtn.listening .fa-microphone {
  color: var(--primary-dark);
}

/* ======================================================
   VOICE WAVE
====================================================== */
.wave-effect,
.wave-circle {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wave-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  animation: wavePulse 1.5s linear;
}

@keyframes wavePulse {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: .7; }
  70%  { opacity: .3; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* ======================================================
   BOTTOM NAVIGATION
====================================================== */

/* ======================================================
   BOTTOM NAV – MOBILE FIRST
====================================================== */

.bottom-nav {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 88px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px;
  background: var(--black);
  border-radius: 16px 16px 0px 0px;
  box-shadow: 0 -5px 8px rgba(90,90,90,0.6);
  z-index: 1001;
  display: none;
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition);
}

.bottom-nav a span {
  font-size: 14px;
}


.bottom-nav a.active span {
  color: var(--primary-color);
}

/* ======================================================
   ICON CIRCLE (HOVER)
====================================================== */
.crcle-hvr {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  transition: transform var(--transition), background var(--transition);
}

.crcle-hvr:hover {
  transform: scale(1.15);
  background: var(--primary-dark);
}

.botttom-nav-img {
  width: 40px;
  height: 40px;
}

.trecsion {
  font-size: 14px;
  color: var(--white);
}

/* ======================================================
   WHATSAPP FLOATING BUTTON – MOBILE FIRST
====================================================== */

.whatsapp-float-btn {
  position: fixed;
  right: 80px;
  bottom: 16px;

  width: 54px;
  height: 54px;

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

  border-radius: 50%;
  background: var(--accent);
  color: var(--gray-light);
  font-size: 28px;
  text-decoration: none;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 8999;

  transition: background var(--transition), transform var(--transition);
}

/* ======================================================
   MAIN CONTAINERS & LAYOUT
====================================================== */
.container-main {
  max-width: 1200px;
  margin: 0 auto;
}

.container-one,
.container-two,
.container-three,
.container-ac {
  display: flex;
  width: 100%;
  gap: 40px;
  margin-top: 40px;
}

.container-ac {
  margin-bottom: 32px;
}

.container-one-1 {
  width: 60%;
  padding: 16px;
  background: var(--secondary-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ------------------------------------------------------
   HEADINGS & TEXT
------------------------------------------------------ */
.top-hdng {
  font-size: 24px;
  font-weight: 600;
  color: #2b2b2b;
}

.top-pera {
  margin-bottom: 8px;
  font-size: 16px;
  color: #111;
}

.frst-hdng {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #2b2b2b;
}

.main-hdng {
  margin-top: 8px;
  height: 72px;
  font-size: 16px;
  font-weight: 600;
  color: #2b2b2b;
}


.main-hdng {
  margin-top: 8px;
  height: 72px;
  font-size: 16px;
  font-weight: 600;
  color: #2b2b2b;
}

.main-pera {
  margin-top: 8px;
  font-size: 14px;
  color: #111;
}

/* ------------------------------------------------------
   IMAGE / CARD GROUPS
------------------------------------------------------ */
.container-img-text {
  display: flex;
  gap: 40px;
  padding: 12px 0;
}

.cont-ac-img-text {
  width: 164px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--gray);
  transition: transform var(--transition), box-shadow var(--transition);
}

.cont-ac-img-text:hover {
  transform: scale(1.02);
  border-color: var(--primary-color);
  box-shadow: 0 4px 16px rgba(147,0,18,0.15);
}

.ac-img,
.ac-img-2 {
  width: 100%;
  height: 96px;
  border-radius: 8px;
}

/* ------------------------------------------------------
   BADGE
------------------------------------------------------ */
.batch {
  position: relative;
}

.batch-label {
  position: absolute;
  top: 0;
  right: -16px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-light);
  background: var(--primary-color);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 10px rgba(0,0,0,0.08);
  z-index: 2;
}

/* ======================================================
   POPUP MODAL
====================================================== */
#popup {
  display: none;
}

.popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

.popup-content {
  width: 480px;
  padding: 16px;
  background: var(--gray-light);
  border-radius: 8px;
  position: relative;
  box-shadow: 0 4px 16px rgba(147,0,18,0.15);
}

.pop-hdng {
  font-size: 16px;
  font-weight: 600;
  color: #2b2b2b;
}

.pop-pera- {
  margin-top: 12px;
  font-size: 14px;
  color: #2b2b2b;
}

.pop-visit-price {
  font-size: 14px;
  color: #555;
}

/* ------------------------------------------------------
   POPUP CLOSE
------------------------------------------------------ */
.popup .close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--gray-dark);
  background: var(--gray-light);
  border: 1px solid var(--gray-dark);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.popup .close:hover {
  color: var(--primary-dark);
  border-color: var(--primary-dark);
}

body.popup-active {
  overflow: hidden;
}

/* ------------------------------------------------------
   POPUP CONTENT LAYOUT
------------------------------------------------------ */
.container-prnts-pop {
  display: flex;
  gap: 20px;
}

.child-pop-1 {
  width: 36%;
}

.child-pop-2 {
  width: 64%;
}

.pop-img {
  width: 100%;
  border-radius: 8px;
}

/* ------------------------------------------------------
   POPUP ACTIONS
------------------------------------------------------ */
.pop-btn-cntr {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pop-btn-call-95 {
  padding: 16px 56px;
  font-size: 16px;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  background: var(--primary-color);
  color: var(--white);
  transition: background var(--transition);
}

.pop-btn-call-95:hover,
.pop-btn-call-95:focus {
  background: var(--primary-dark);
}

/* ------------------------------------------------------
   PRODUCT / CALL ACTIONS
------------------------------------------------------ */

.call-phn {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--black);

}

.call-time {
  margin-top: 8px;
  font-size: 14px;
  color: #555;
    display: flex;
  justify-content: center;
}

/* ======================================================
   SERVICE & REVIEW SECTIONS
====================================================== */

.ac-pera-work {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ac-pera-work li {
  margin-bottom: 10px;
}


/* ------------------------------------------------------
   SIDE CONTAINERS
------------------------------------------------------ */
.cont-new {
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  justify-content: flex-end;
  align-self: flex-start;
}

.container-two-one {
  width: 34%;
}

.all-service-container,
.cont-hw-t-wr-revw-filter {
  width: 50%;
}

/* ------------------------------------------------------
   INFO / CARD BLOCKS
------------------------------------------------------ */
.cont-two-2,
.cont-two-3,
.cont-two-4 {
  width: 100%;
  padding: 8px 16px;
  border-radius: var(--border-radius);
}

.cont-two-2 {
  border: 1px solid var(--black);
}

.cont-two-3,
.cont-two-4 {
  background: var(--secondary-color);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ------------------------------------------------------
   HEADINGS & TEXT
------------------------------------------------------ */
.uj-whte-hdng {
  font-size: 22px;
  font-weight: 600;
  color: var(--black);
}

.uj-whte-pera {
  font-size: 18px;
  font-weight: 500;
  color: var(--black);
}

.uj-whte-pera-bg {
  font-size: 18px;
  font-weight: 600;
  color: #111;
}

/* ------------------------------------------------------
   BRAND LOGOS
------------------------------------------------------ */
.brand-logo-img {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.logo-img {
  width: 60px;
  height: 48px;
  border-radius: 8px;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  mix-blend-mode: darken;
}

/* ------------------------------------------------------
   RATING + CALL CTA
------------------------------------------------------ */
.user-rtng-call-btn,
.user-rtng-call-btn-top {
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.user-rtng-call-btn-top {
  margin-top: 48px;
}

.rtng-user,
.rtng-user-two {
  width: 60%;
  display: flex;
  align-items: flex-start;
  gap: 20%;
}

.rtng-user-block {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.rtng-star {
  font-size: 2rem;
  color: var(--star);
}

.combo {
  display: flex;
  flex-direction: column;
}

.rtng-score {
  font-size: 1.2rem;
  font-weight: 700;
}

.rtng-label {
  font-size: 1rem;
  color: #555;
}

.rtng-users {
  font-size: 2rem;
  color: var(--primary-color);
}

/* ------------------------------------------------------
   CALL BUTTON
------------------------------------------------------ */
.call-btn-container {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.call-btn-95 {
  width: 220px;
  height: 56px;
 padding: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius);
  background: var(--primary-color);
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background var(--transition), transform var(--transition);
  display: flex;
  justify-content: center;
}

.call-btn-95:hover,
.call-btn-95:focus {
  background: var(--primary-dark);
  transform: scale(1.05);
}

.call-btn i {
  margin-right: 8px;
  font-size: 20px;
  vertical-align: middle;
}

/* ------------------------------------------------------
   SERVICE LIST
------------------------------------------------------ */
.product-page-btns {
  margin-top: 64px;
}

.product-page-btns-hdr {
  margin-top: 20px;
  display: flex;
  column-gap: 32px;
}

.call-btn-blk-hdr {
    width: 220px;
    height: 56px;
    display: flex;
    margin-top: 0px;
    padding: 16px;
    font-size: 16px;
    background: var(--black);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    /* transition: background var(--transition); */
    align-items: center;
    justify-content: center;
    gap: 8px;
}


.whtsap-call-hdr {
    width: 220px;
    height: 56px;
    display: flex;
    margin-top: 0px;
    padding: 16px;
    font-size: 16px;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    /* transition: background var(--transition); */
    align-items: center;
    justify-content: center;
    gap: 8px;
}


.service-container {
  width: 100%;
  padding: 16px;
  margin-bottom: 40px;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
}

.container-all-service {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.container-repair {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* ------------------------------------------------------
   HOW IT WORKS + FAQ
------------------------------------------------------ */
.cont-hw-it-wrk {
  width: 100%;
  padding: 16px;
  margin-bottom: 40px;
  background: var(--black);
  border-radius: var(--border-radius);
}

.cont-fltr-home {
  width: 100%;
  padding: 16px;
  background: var(--black);
  border-radius: var(--border-radius);
    margin-bottom: 40px;
}

.cont-fltr {
  width: 50%;
  height: fit-content;
  padding: 16px;
  background: var(--black);
  border-radius: var(--border-radius);

}

.container-all-service-faq {
  width: 50%;
  padding: 8px 16px;
  margin-bottom: 32px;
  border: 0.5px solid var(--primary-color);
  border-radius: var(--border-radius);
}

/* ======================================================
   FAQ SECTION
====================================================== */
.faq-section {
  margin: 16px 0;
}

/* ------------------------------------------------------
   FAQ HEADING
------------------------------------------------------ */
.faq-hdng {
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
}

/* ------------------------------------------------------
   QUESTION BUTTON
------------------------------------------------------ */
.faq-question {
  width: 100%;
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: none;
  border: none;
  cursor: pointer;
  text-align: left;

  font-size: 14px;
  font-weight: 400;
  color: var(--white);
}

/* ------------------------------------------------------
   ANSWER
------------------------------------------------------ */
.faq-answer {
  display: none;
  padding: 10px 0;
  color: var(--white);
}

.faq-answer.show {
  display: block;
}

/* ------------------------------------------------------
   ARROW ICON
------------------------------------------------------ */
.faq-arrow {
  font-size: 1em;
  transition: transform var(--transition);
}

/* ------------------------------------------------------
   HOW IT WORKS (FAQ META)
------------------------------------------------------ */
.ac-hdng-work {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: var(--gray-light);
}

.ac-pera-work {
  margin-top: 8px;
  font-size: 14px;
  color: var(--gray-light);
}

/* ------------------------------------------------------
   RATING / INFO BOX
------------------------------------------------------ */
.ranting-work {
  margin-top: 24px;
  padding: 8px 16px;
  border-radius: 24px;
  background: var(--secondary-color);
  border: 1px solid var(--primary-color);
}

/* ======================================================
   REVIEW SECTION
====================================================== */

.all-review-home {
  width: 100%;
  margin-bottom: 40px;
  padding: 20px 16px;
  background: var(--secondary-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.all-review {
  margin-bottom: 40px;
  padding: 20px 16px;
  background: var(--secondary-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ------------------------------------------------------
   FILTERS
------------------------------------------------------ */
.review-filters {
  margin: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-around;

}

.filter-btn {
  padding: 6px 16px;
  font-size: 15px;
  border-radius: var(--border-radius);
  border: 1px solid #ddd;
  background: #f1f1f1;
  color: #333;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--primary-dark);
  color: var(--white);
  border-color: var(--primary-color);
}

/* ------------------------------------------------------
   REVIEW LIST
------------------------------------------------------ */
.review-list {
  display: flex;
  flex-direction: column;
}

.review-item {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.review-item:last-child {
  border-bottom: none;
}

/* ------------------------------------------------------
   REVIEW CONTENT
------------------------------------------------------ */
.review-img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
}

.review-content {
  flex: 1;
}

.review-stars {
  margin-bottom: 2px;
  font-size: 18px;
  color: var(--star);
  letter-spacing: 1px;
}

.review-user {
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: 600;
}

.review-location {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 400;
  color: #222;
}

.review-text {
  font-size: 15px;
  color: #444;
}

/* ======================================================
   FOOTER
====================================================== */
.footer-container {
  max-width: 1200px;
  margin: 0px auto 0;
  padding: 24px 16px;
  display: flex;
  gap: 40px;

  background: var(--footer-bg);
  color: var(--footer-text);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* ------------------------------------------------------
   FOOTER COLUMNS
------------------------------------------------------ */
.footer-part {
  width: 25%;
  margin-top: 16px;
}

.footer-title {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--footer-text);
}

.footer-sign {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--footer-text);
}

/* ------------------------------------------------------
   SOCIAL ICONS
------------------------------------------------------ */
.footer-social-links {
  display: flex;
  gap: 10px;
}

/* keep IDs for backward compatibility */
#facebook-icon,
#instagram-icon,
#whatsapp-icon,
#email-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--black);
  color: var(--footer-text);
  border-radius: 50%;
  font-size: 24px;
  text-decoration: none;

  box-shadow: 0 2px 8px rgba(24,119,243,0.15);
  transition: background var(--transition), color var(--transition);
}

#facebook-icon:hover,
#instagram-icon:hover,
#whatsapp-icon:hover,
#email-icon:hover {
  background: var(--footer-text);
  color: var(--primary-dark);
}
.top-section{
  width: 60%;
  margin-top: 16px;
  padding: 0px 8px;

}
/* ======================================================
   SCROLLABLE CONTAINERS
====================================================== */
.scrollable-div {
  width: 60%;
  overflow-y: auto;
  padding: 8px 16px;
  background: var(--secondary-color);
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollable-div::-webkit-scrollbar {
  display: none;
}

/* ======================================================
   PRODUCT PAGE CARD
====================================================== */
.prodcut-page-all-details {
  width: 100%;
  margin: 16px 0 32px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid var(--gray);
  border-radius: 8px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.prodcut-page-all-details:hover {
  transform: scale(1.02);
  border-color: var(--primary-color);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ------------------------------------------------------
   PRODUCT LAYOUT
------------------------------------------------------ */
.box-1,
.box-2 {
  display: flex;
  gap: 20px;
}

.product-page-detail-1 { width: 65%; }
.product-page-detail-2 { width: 35%; }

.product-page-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
}


/* ------------------------------------------------------
   SERVICE LINKS
------------------------------------------------------ */
.services-name a {
  display: inline-block;
  margin: 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  transition: color var(--transition);
}

.services-name a:hover {
  color: var(--gray-light);
}

/* ======================================================
   REVIEW POPUP / MODAL
====================================================== */
.review-popup-link {
  display: inline-block;
  font-size: 1em;
  color: var(--star);
  text-decoration: none;
}

.fa-star {
  color: var(--star);
}

.review-rating-1 {
  margin-left: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.review-count {
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
}

/* ------------------------------------------------------
   REVIEW LIST
------------------------------------------------------ */
.review-list-popup {
  list-style: none;
  margin: 0;
  padding: 0 8px 0 0;
  max-height: 220px;
  overflow-y: auto;
}

.review-list-popup li {
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eee;
}

.review-stars-popup {
  font-size: 1.1em;
  color: var(--star);
}

.review-text-popup {
  margin-top: 4px;
  font-size: 0.95em;
  color: #444;
}

/* ------------------------------------------------------
   REVIEW MODAL SHELL
------------------------------------------------------ */
.review-popup-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9000;
}

.review-popup-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pop-body {
  max-width: 400px;
  width: 90%;
  padding: 16px;
  background: var(--background);
  border-radius: 8px;
  position: relative;
}

/* ------------------------------------------------------
   CLOSE BUTTON
------------------------------------------------------ */
.closeReviewPopup {
  position: absolute;
  top: -10px;
  right: -10px;

  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--white);
  border: 1px solid var(--gray-dark);
  border-radius: 50%;

  font-size: 24px;
  cursor: pointer;
  color: var(--gray-dark);
  transition: color var(--transition), border-color var(--transition);
}

.closeReviewPopup:hover {
  color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* ======================================================
   FORM STYLES
====================================================== */
.form-hdng {
  text-align: center;
  font-weight: 700;
  color: #222;
  font-size: 20px;
}

/* ------------------------------------------------------
   FORM CARD / SERVICE ITEM
------------------------------------------------------ */
.cont-ac-img-text-form {
  width: 100%;
  margin: 12px 0;
  padding: 8px;

  display: flex;
  flex-direction: column;

  background: transparent;
  border: 1px solid var(--primary-color);
  border-radius: 8px;

  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform var(--transition), box-shadow var(--transition);
}

.ac-img-form {
  width: 40%;
  max-height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

.main-hdng-form {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #2b2b2b;
}

.main-pera-form {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-dark);
}

/* ------------------------------------------------------
   FORM WRAPPER
------------------------------------------------------ */
.container-main-form {
  display: flex;
  justify-content: center;
  padding: 0;
  background: var(--background);
}

.contact-container {
  width: 100%;
  max-width: 400px;
  padding: 8px;
  background: var(--background);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ------------------------------------------------------
   FORM GROUPS
------------------------------------------------------ */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.form-group label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
}

.required {
  margin-left: 2px;
  color:var(--primary-color);
}

 #clear-cart-btn{
  display: none;
}




/* ------------------------------------------------------
   INPUTS & SELECTS
------------------------------------------------------ */
.form-input {
  width: 100%;
  padding: 10px 8px;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 400;
  color: #111;
  background: var(--gray-light);
  border: 1px solid #222;
  border-radius: 8px;
  transition: border-color var(--transition);
}

.form-input-loctn {
  width: 80%;
  padding: 10px 8px;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 400;
  color: #111;
  background: var(--gray-light);
  border: 1px solid #222;
  border-radius: 8px;
  transition: border-color var(--transition);
}



.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.form-group select.form-input {
  background: #fff;
  color: #333;
}

.form-group select.form-input:focus {
  border-color: var(--primary-dark);
}

/* optional service dropdown compatibility */
#service {
  margin-top: 12px;
  background: var(--gray-light);
  border-color: var(--gray-dark);
}

#service:hover {
  background: #ffecec;
  border-color: var(--primary-dark);
}



/* ------------------------------------------------------
   RADIO BUTTONS
------------------------------------------------------ */
.form-group fieldset label {
  position: relative;
  padding-left: 28px;
  font-weight: 600;
  cursor: pointer;
  color: #333;
}

.form-group fieldset input[type="radio"] {
  position: absolute;
  left: 0;
  top: 2px;

  width: 18px;
  height: 18px;

  appearance: none;
  -webkit-appearance: none;

  background: #fff;
  border: 1px solid var(--primary-dark);
  border-radius: 50%;

  transition: border-color var(--transition);
}

.form-group fieldset input[type="radio"]:checked {
  background: radial-gradient(
    circle at center,
    var(--primary-dark) 60%,
    #fff 61%
  );
}


.form-group fieldset label:hover input[type="radio"] {
  border-color: var(--primary-dark);
}



/* ------------------------------------------------------
   SUBMIT BUTTON
------------------------------------------------------ */
.submit-btn {
  width: 240px;
  margin: 20px auto 0;
  padding: 20px 0;

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

  background: var(--primary-color);
  color: var(--white);

  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;

  transition: background var(--transition);
}

.submit-btn:hover {
  background: var(--primary-dark);
}

/* ======================================================
   BUTTONS & UTILITIES
====================================================== */
.wht-flex {
  display: flex;
  gap: 16px;
}

/* ------------------------------------------------------
   LOCATION / WHATSAPP INLINE BUTTONS
------------------------------------------------------ */
.location-btn,
.wa-location-btn {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: 22px;
  cursor: pointer;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--transition);
}

.location-btn:hover,
.wa-location-btn:hover {
  background: #075e54;
}

.wa-location-btn {
  margin-left: 2px;
}

/* ------------------------------------------------------
   LARGE WHATSAPP CTA BUTTON
------------------------------------------------------ */
.whatsapp-btn {
  width: 240px;
  margin: 24px auto;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px;
  font-size: 18px;

  background: var(--accent);
  color: var(--gray-light);

  border-radius: var(--border-radius);
  text-decoration: none;

  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background var(--transition);
}

.whatsapp-btn:hover {
  background: #075e54;
}
/* ======================================================
   THANK YOU PAGE
====================================================== */
.thankyou-container {
  min-height: 100vh;
  background: var(--background);
}

.thnks {
  min-height: 100vh;
  padding: 16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: var(--secondary-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.thankyou-title {
  margin-top: 24px;
  font-size: 48px;
  font-weight: 800;
  color: var(--accent);
}

.thankyou-message {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 500;
  color: var(--black);
}

/* =========================
    MEDIA QUERIES

    ========================= */  

 @media (max-width: 1024px) {

  .container-main {
    max-width: 100%;
    margin: 0 auto;
    padding: 0px 24px;
}

.my-nav {
    width: 100%;
}

.nav-one {
  
margin-bottom: 0px;
  
  }

   }   


@media (max-width: 425px) {
    
    /* Navigation */
    .my-nav {
        width: 100%;
        padding: 0px;
    }
    .nav-one {
        height: 56px;
        padding: 4px 4px;
        border-radius: 0;
        margin-bottom: 0px;
    }
.uj-whte-hdng {
    font-size: 18px;
}

        .nav-hdng {
        padding: 0px 8px;
        margin-top: 4px;
        font-size: 16px;
        line-height: 1.25;
    }
    .uj-logo {
      margin-top: 4px;
        width: 40px;
        height: 40px;
    }

    .nav-hdng:hover {
        border-radius: 8px;
    }
    .location-finder {
        width: 100%;
    padding: 0px 10px;
    justify-content: flex-end;
}
    .lct {
    margin: 4px 0px;
    width: 100%;
}
.map-location-btn {
    padding: 6px 4px;
    font-size: 14px;
    background: none;
}
.map-location-btn i {
    margin-right: 6px;
    font-size: 16px;
}
mark{
    background-color: #930012;
    color: #f7fafc;
}
.rolling-text {
    border-radius:  0px;
}
.rolling-banner {
  width: 75%;
    margin-top: 8px;
    column-gap: 16px;
    align-items: flex-start;
    justify-content: center;
    border-radius: 0px 8px 8px 0px;
}

    .srch-bar {
        margin-top: 24px;
        flex-direction: column-reverse;
        row-gap: 16px;
        padding: 0px 8px;
    }
     .srch-img-text {
        width: 100%;
        padding: 8px 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);

    }
         .srch-img-text-ro {
        width: 100%;
        padding: 8px 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
    }
    .img-text-link {
        padding: 0;
    }
    .serv-img {
        width: 44px;
        height: 44px;
       border: 1px solid #930012;
    }
        .spannn {
    font-size: 12px;
    font-weight: 400;
}
    .all-srch {
    width: 100%;
    background-color: var(--background);
    column-gap: 8px;
    border-radius: 0px;
    padding: 0px 0px;
}

.top-section{
  width: 100%;
  margin-top: 8px;
}

.lmtd-slt {
    padding: 8px 0;
    font-weight: 600;
    margin: 8px 0;
  }

   .nav-search input[type="text"] {
        padding: 10px 10px;
    }
    .nav-search button {
        background: #930012;
        border: none;
        color: #f7fafc;
        padding: 9px 16px;
        border-radius: 0 16px 16px 0;
        cursor: pointer;
        font-size: 16px;
        transition: background 0.2s;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px;
    }
    .nav-search button:hover {
        background: #720310;
    }
.voice-search-container {
     width: 36px;
     height: 36px;
    border: none;
    background: none;
    box-shadow: none;
}
#voiceSearchBtn .fa-microphone {
    font-size: 20px;
}
.wave-circle {
        background: #720310;
            opacity: 0.5;
    }
    .search-results {
        top: 48px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        max-height: 180px;
    }
    .search-result-item {
        padding: 6px 8px;
        cursor: pointer;
        border-bottom: 1px solid #fff;
        color: #930012;
        text-decoration: none;
        display: block;
        font-size: 14px;
        transition: color 0.2s, font-size 0.2s;
    }
    .search-result-item:last-child {
        border-bottom: none;
    }
    .search-result-item:hover {
        font-size: 14px;
        color: #720310;
    }
    .new-nav-box-search {
        margin-left: 0;
        width: 100%;
        padding: 8px 0;
        height: 48px;
        background: #f4f4f4;
    }
    /* WhatsApp Floating Button */
    .whts-btn {
        right: 20px;
        bottom: 96px;
    }
    .whatsapp-float-btn {
    right: 16px;
        width: 48px;
        height: 48px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
position: fixed;
    }
    /* Main Container */
    .container-main {
        width: 100%;
        margin: 0 auto;
        padding: 0px;
    }
    /* Content Layout */
    .container-one, .container-two,
     .container-three, .container-ac{
        width: 100%;
        gap: 24px;
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 0px;
        padding: 0 8px;
    }
    .cont-new {
    width: 100%;
    margin-top: 0px;
    row-gap: 20px;
}
    .container-one-1,
    .cont-two-2,
    .cont-two-3,
    .cont-two-4 {
        width: 100%;
        padding: 8px;
        border-radius: 8px;
    }
    .cont-two-3,
    .cont-two-4 {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12)
    }
    .cont-ac-img-text {
        width: 100%;
        border-radius: 8px;
        padding: 0;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .main-hdng {
        margin-left: 4px;
    }

    .main-pera {
        margin: 8px 4px 0px 4px;
    }
    .top-hdng {
        font-size: 18px;
    }
    .top-pera {
        font-size: 16px;
    }

.frst-hdng {
  font-size: 16px;
}

    .container-img-text {
        column-gap: 12px;
        padding: 8px 0;
    }
    .brand-logo-img {
        display: flex;
        justify-content: space-between;
        padding: 0 4px;
    }
    .logo-img {
        margin-right: 0;
    }
    /* Batch Label */
    .batch-label {
        top: -4px;
        right: -4px;
        font-size: 10px;
        padding: 2px 10px;
        border-radius: 8px;
    }
    /* User Rating & Call Button */
    .user-rtng-call-btn {
        margin: 24px 0;
         gap: 24px;
        flex-direction: column;
        padding: 0 8px;
    }
    .user-rtng-call-btn-top {
margin-top: 32px;
     column-gap: 40px;
     flex-wrap: wrap;
          padding: 0 8px;
          display: none;
}
    .rtng-user-two {
        width: 100%;
        margin: 0px 0;
        padding: 0;
        row-gap: 16px;
        flex-direction: row;
    }
     .rtng-user {
        width: 100%;
        margin: 0px 0;
        padding: 0;
        row-gap: 16px;
        flex-direction: column;
    }
    .rtng-user-inner {
        padding: 0;
        gap: 16px;
        flex-wrap: wrap;
    }
.srch-img-text-home {
    width: 100%;
    height: max-content;
    gap: 8px;
}

    .rtng-user-block {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    .rtng-star {
        font-size: 22px;
    }
.rtng-score {
    font-size: 18px;
}

.rtng-label {
    font-size: 16px;
}
.rtng-users {
    font-size: 22px;
}
    .call-btn-container {
        width: 100%;

    }

    .cont-fltr-home {
margin-bottom: 24px;
padding: 8px;
         }


         .all-review-home {
    width: 100%;
    margin-bottom: 0px;
    padding: 8px;
}

.call-btn-95 {
  width: 220px;
  height: 56px;
 padding: 16px;

}

.ac-hdng-work {
    margin-top: 0px;
    font-size: 18px;
}

.ac-pera-work {
    margin-top: 0px;
    font-size: 16px;
}

     .all-service-container{
        width: 100%;
     }
.container-all-service {
    row-gap: 16px;
}
     .service-container {
    width: 100%;
    padding: 8px 8px;
    margin-bottom: 0px;
}
.container-repair {
    width: 100%;
    display: flex;
    column-gap: 12px;
}
        .cont-hw-it-wrk {
        width: 100%;
        padding: 8px 8px;
        border-radius: 8px;
        margin-bottom: 20px;
        }
        .faq-section {
        margin: 8px 0;
        }
        .faq-hdng {
        font-size: 18px;
        }
        .faq-question {
        width: 98%;
        font-size: 16px;
        padding: 8px 0px;

        }
        .faq-arrow {
        transition: transform 0.2s;
        font-size: 10px;
        }
        .faq-answer {
        padding: 0px;
        font-size: 14px; 
        }
        .cont-hw-t-wr-revw-filter {
        width: 100%;
    }
        .popup {
        }
        .popup-content {
        padding: 8px;
        border-radius: 8px;
        width: 85%;
        position: relative;
        transform: translateY(-10%);
        }
        .popup .close:hover .close:focus{
        color: #720310;
        border: 1px solid #720310;
        }
        .container-prnts-pop {
        column-gap: 12px;
        }
        .pop-btn-cntr {
        margin-left: 0%;
        }
    .ac-img-2 {
        width: 100%;
        height: min-content;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .pop-btn-call-95 {
        margin-top: 0px;
        padding: 12px 56px;
        border-radius: 16px;
        font-weight: 700;
        transition: background 0.2s;
        margin-bottom: 8px;
    }
    .call-btn-blk {
    width: 240px;
    margin-top: 20px;
  }


.whtsap-call {
    width: 240px;
    margin-top:24px;
}

.product-page-btns {
        margin-top: 20px;
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
        .all-review {
        height: fit-content;
        border-radius: 8px;
        margin-top: 16px;
        padding: 16px 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .review-filters {
        gap: 8px;
        margin-bottom: 12px;
        }
        .filter-btn {
        width: 48px;
        height: 28px;
        border-radius: 12px;
        padding: 4px 2px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 400;
        text-align: center;

        }
        .review-item,
        .review-item-last {
        align-items: flex-end;
        gap: 8px;
        padding-bottom: 12px;
        display: flex;
        }
        .review-stars {
        margin-top: 8px;
        font-size: 18px;
        margin-bottom: 0px;
        }
        .review-location {
        font-weight: 400;
        font-size: 13px;
        margin-left: 6px;
        }
        .ac-hdng {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 2px;
        }
        .review-text {
        width: 95%;
        font-size: 14px;
        }
        .footer-container {
        width: 100%;
        padding: 8px 8px;
        gap: 12px;
        border-radius: 8px;
        margin-top: 24px;
        flex-direction: column;
        margin-bottom: 0px;
        }
        .footer-part {
        width: 100%;
        margin-top: 8px;
        }
        .footer-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        text-align: center;
        }
        .footer-sign {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
        text-align: center;
        }
        .footer-social-links {
        display: flex;
        gap: 10px;
        justify-content: center;
        }
        #facebook-icon, #instagram-icon, #whatsapp-icon, #email-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
        border-radius: 50%;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: background 0.2s, color 0.2s;
        }
        #facebook-icon:hover, #instagram-icon:hover, #whatsapp-icon:hover, #email-icon:hover {
        color: #930012;
        background: #fff;
        }
        .bottom-nav {
        width: 220px;
        height: 48px;
        justify-content: space-evenly;
        padding: 12px;
        display: inherit;
          position: fixed;
        bottom: 16px;
        border-radius: 16px;
   
        }
        .scrollable-div {
        width: 100%;
        padding: 8px;
        border-radius: 8px;
        margin-bottom: 8px;
        }
        .scrollable-div::-webkit-scrollbar {
        display: none;
        }
        .box-1 {
        display: flex;
        gap: 8px;
        }
        .product-page-detail-1 {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        }
        .product-page-detail-2 {
        width: 40%;
        }
        .serv-dtl {
            margin-top: 8px;
            display: flex;
            flex-direction: column;
    width: 100%;
    transform: translateY(0%); 
}
        .box-2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0px;
        }
        .new-nav-box-search {
        margin-left: 0;
        width: 100%;
        padding: 8px 0px;
        height: 48px;
        background: #f4f4f4;

        }
        .search-results {
        top: 48px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        max-height: 180px; 
        }
        .search-result-item {
        padding: 6px 8px;
        cursor: pointer;
        border-bottom: 1px solid #fff;
        color: #930012;
        text-decoration: none;
        display: block;
        font-size: 14px;
        transition: color 0.2s, font-size 0.2s;
        }
        .search-result-item:last-child {
        border-bottom: none;
        }
        .search-result-item:hover {
        font-size: 14px;
        color: #720310;
        }
        .pop-body {
        padding: 8px;
        border-radius: 8px;
        max-width: 84%;
        }
        .review-popup-modal {
        display: none;
        position: fixed;
        width: 100vw;
        height: 75vh;
        background: rgba(0,0,0,0.5);
        z-index: 9000;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        }
        .review-popup-modal.active {
        display: flex;
        top: 0;
        left: 0;
        width: 92vw;
        max-height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: 9000;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        transform: translate(0%, -15%);
        }
        .review-list-popup {
        max-height: 280px;
        overflow-y: auto;
        padding-right: 8px;
        list-style: none;
        margin: 0;
        }
        .viewDetailModal {
        display: none;
        position: fixed;
        width: 92vw;
        height: 90vh;
        background: rgba(0,0,0,0.5);
        transform: translate(0%, -17.5%);
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        max-height: 400px;
        }
    .contact-container {
        margin-top: 16px;
      padding: 8px;
      border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      min-width: 300px;;
      width: 90%;
    }
    .contact-container h2 {
      color: #222;
      font-weight: 700;
      font-size: 18px;
    }
    .form-group {
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
    }
    .form-group label {
      margin-bottom: 6px;
      color: #333;
      font-size: 14px;
      font-weight: 500;
    }
    .required {
      color: #930012;
      margin-left: 2px;
    }
    .form-input {
      padding: 8px;
      border: 1px solid #888;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 400;
      font-family: 'Lato', sans-serif;
      transition: border-color 0.2s;
      background: #f7f7f7;
      color: #000;
    }
    .form-input:focus {
      border-color: #930012;
      outline: none;
      background: #f7f7f7;
    }
   .submit-btn {
      width: 100%;
      padding: 16px 0;
     background: #930012;
    color: #f7fafc;
      outline: none;
      border: none;
      border-radius: 16px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 240px;
      margin: 16px auto 0;
      transition: background 0.2s;
    }
    .submit-btn:hover {
      background: #720310;
    }
          .form-group select.form-input {
            width: 100%;
            padding: 8px;
            border: 1px solid #bbb;
            border-radius: 8px;
            font-size: 1rem;
            background: #fff;
            color: #333;
          }
          .form-group select.form-input:focus {
            border-color: #720310;
            outline: none;
          }
        #service {
            margin-top: 10px;
            border-color: #930012;
            outline: none;
            background: #f7f7f7;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        #service:hover {
            border-color: #720310;
              background: #ffecec;
        }
        option{
            padding: 8px;
             background: #ffecec;
            color: #000;
        }
        option:hover, option:focus {
            background-color: #930012;
            color: #000;
        }
        .product-page-img {
    height: 100%;

}



.uj-whte-pera {
        font-size: 16px;
    }


    .container-three{
 width: 100%;
}
    .cont-fltr {
        width: 100%;
     padding: 16px 8px;
}
.srvc-contnr {
    width: 100%;
    justify-content: space-between;
}

.open-booking-popup {
    width: 240px;
    height: 56px;
    padding: 8px;
}


.call-us {
    width: 240px;
    height: 56px;
    padding: 8px;
    margin-top: 0px;

}
.cart-item-img {
  width: 48px;
  height: 48px;
  margin-right: 8px;
  margin-top: 4px;
}

.ac-img-form {
    width: 50%;

}

.form-hdng {
    font-size: 18px;
}

.product-page-btns-hdr {
  flex-direction: column;
  row-gap: 20px;
  align-items: center;
}

.call-btn-blk-hdr {
    width: 240px;
    padding: 8px;
}

.whtsap-call-hdr {
    width: 240px;
    padding: 8px;
}

}