/* =========================
   DUXLER HOME HERO (BG IMAGE FULL WIDTH)
   ========================= */
.duxler-hero{
  --duxler-max: 1200px;
  --duxler-pad: 24px;
  --duxler-red: #EC1C24;
  --duxler-text: #1A1A1A;
  --duxler-muted: #000000;

 
	 background-image:
    url("https://heartautocare.com/wp-content/uploads/2026/03/Header.png"),
    url("https://heartautocare.com/wp-content/uploads/2026/03/IMG_02162-1-1.png");
  background-repeat: no-repeat, no-repeat;
    background-position: right center;
    background-size: contain;
	
	background-size:
    100% auto,   /* left image */
    60% auto; 

  /* ✅ hero height */
  min-height: clamp(260px, 36vw, 65vh);

  /* ✅ section full width */
  width: 100%;
  position: relative;
}
.duxler-hero::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 220px;   /* size control */
  height: 220px;

  background-image: url("https://heartautocare.com/wp-content/uploads/2026/03/Vector-2.png");
  background-size: contain;
  background-repeat: no-repeat;
} 
.duxler-card__btn, .duxler-services__btn, .duxler-wcard__btn, .duxler-coupon__btn, .duxler-cta__btn{
	font-family: "Roboto", sans-serif !important;
}
  .duxler-wcard{
  padding: 20px;
  border-radius: 15px;
  overflow: hidden;
}

/* smooth image zoom only */
.duxler-wcard__media img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform 220ms ease;
  transform-origin: center;
}

.duxler-wcard__media img:hover{
  transform: scale(1.08);
}
.duxler-wcard__btn:hover{
	background:#000;
	color:#fff;
}
.duxler-services__btn:hover{
	background:#000;
	color:#fff;
}
.duxler-hero__btn:hover{
	background:#000;
	color:#fff;
	cursor:pointer;
}
.duxler-cta__btn:hover{
	background:#fff;
	color: #EC1C24 !important;
}
/* optional: nice keyboard focus too */
.duxler-wcard:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
/* ✅ text container stays 1200px */
.duxler-hero__inner{
  max-width: var(--duxler-max);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) var(--duxler-pad);

  min-height: inherit;
  display: flex;
  align-items: center;
}

.duxler-hero__content{
  max-width: 570px; /* text block width */
}

.duxler-hero__title{
    margin: 0 0 10px 0;
    color: var(--duxler-text); 
    font-weight: 800 !important;
    letter-spacing: 2%;
    line-height: 1.05;
    font-size: clamp(26px, 3.2vw, 45px) !important;
    font-family: 'Montserrat';
}

.duxler-hero__title-accent{ 
	color: var(--duxler-red); 
	font:inherit;
}

.duxler-hero__desc{
margin: 0 0 18px 0;
    color: var(--duxler-muted);
    line-height: 1.55;
    font-family: 'Montserrat';
    font-size: clamp(14px, 1.25vw, 23px);
   font-weight: 500;
}

.duxler-hero__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--duxler-red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 7px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  font-size: 13px;
  text-transform: uppercase;
}
.duxler-hero__btn span{
	line-height:1;
}
.duxler-hero__btn:hover{
  color:#fff;
}
.duxler-hero__btn:active{ transform: translateY(0); opacity: .95; }
.duxler-hero__btn:focus-visible{
  outline: 3px solid rgba(225, 29, 46, 0.35);
  outline-offset: 3px;
}
/* icon image sizing inside button */
.duxler-hero__btn-icon{
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.duxler-hero__btn-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.duxler{
  width: 100%;
  padding: 0;
  background:#fff;
}

/* Full width (no container), fixed height like figma */
.duxler__videoWrap{
  width: 90%;
  overflow: hidden;
  padding:40px 0;
  position: relative;
}

/* Video fills the wrap */
.duxler__video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* ✅ same look (cropped nicely) */
  object-position: center; /* move if needed */
}
/* =========================
   DUXLER 3-CARDS SECTION
   Uses same variables as hero:
   --duxler-max, --duxler-pad, --duxler-red, --duxler-text, --duxler-muted
   ========================= */

.duxler-links{
  /* fallback in case hero vars not present on this page */
  --duxler-max: 1200px;
  --duxler-pad: 24px;
  --duxler-red: #EC1C24;
  --duxler-text: #1A1A1A;
  --duxler-muted: #000000;
	display:none;

 background: #E7E7E7;
  padding:  0;
  background-image: url(https://heartautocare.com/wp-content/uploads/2026/03/Vector-2.png);
    background-repeat: no-repeat;
    background-position: 0px -50px;
    background-size: 140px auto;
    padding-top: 0px;
}

.duxler-links__inner{
  max-width: 1400px;
    margin: 0 auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
    align-items: stretch;
    position: relative;
    top: -20px;
    background: #E7E7E7;
}

/* Card */
.duxler-card{
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
  display: grid;
  grid-template-rows: auto 1fr;
}

/* clickable image */
.duxler-card__media{
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e5e7eb;
}
.duxler-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .18s ease;
}
.duxler-card__media:hover img{
  transform: scale(1.04);
}

.duxler-card__body{
  padding: 16px 16px 18px;
  text-align: center;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.duxler-card__title{
    margin: 5px 0;
    color: var(--duxler-text);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 22px;
    font-family: 'Montserrat';
}

.duxler-card__text{
  margin: 0 auto 14px;
  max-width: 42ch;
  color: #565656;
  line-height: 1.5;
  font-size: 13px;
}

/* Button clickable */
.duxler-card__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: var(--duxler-red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
  width:45%;
  text-transform: uppercase;
  font-size: 11px;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 10px 20px rgba(225, 29, 46, 0.18);
}
.duxler-card__btn:hover{
  color:#fff;
}
.duxler-card__btn:active{
  transform: translateY(0);
  opacity: .95;
}
.duxler-card__btn:focus-visible{
  outline: 3px solid rgba(225, 29, 46, 0.35);
  outline-offset: 3px;
}

/* =========================
   PIXEL-STYLE WELCOME SECTION (NO LEFT PHOTO)
   Red: #DE232A
   ========================= */

.heart-welcome{
  --red:#EC1C24;
  --max: 980px;
  --pad: 22px;

  padding: 22px 0;
  background: #fff;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    background-size: 140px auto;
    padding: 40px;
	padding-top:0px;
    background-image: url(https://heartautocare.com/wp-content/uploads/2026/03/Vector-3.png);
    background-repeat: no-repeat;
    background-position: right 0px top -50px;
    background-size: 140px auto;
}

.heart-welcome__wrap{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;

}

/* top-right tire mark */
.heart-welcome__tire{
  position: absolute;
  top: -8px;
  right: 0;
  width: 150px;
  height: auto;
  opacity: .25;
  pointer-events: none;
  user-select: none;
}

/* header bar */
.heart-welcome__header{
  background: #0b0b0b;
  color: #fff;
  padding: 26px 18px 18px;
  text-align: center;
}

.heart-welcome__title{
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: .02em;
 font-size: clamp(26px, 3.2vw, 40px) !important;
  font-family: 'Montserrat';
  color:#fff;
	letter-spacing:0px;
}

.heart-welcome__accent{ 
	color: var(--red); 
	font:inherit;
}

.heart-welcome__sub{
  margin: 0;
  font-weight: 500;
  letter-spacing: .02em;
  font-size: 18px;
  font-family: 'Montserrat';
  opacity: .95;
}

/* body area */
.heart-welcome__body{
  position: relative;
  border-top: 0;
       background: #aeaeae38;
  overflow: hidden;
  min-height: clamp(420px, 43vw, 690px);
background-position: calc(50% - 270px) bottom;
    background-image: url(https://heartautocare.com/wp-content/uploads/2026/03/Tire-vector.png);
    background-repeat: no-repeat;
margin-top:10px;
}

/* background image */
.heart-welcome__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 70%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  
}

/* Right note card */
.heart-welcome__note{
position: absolute;
    width: 100%;
    background-image: url(https://heartautocare.com/wp-content/uploads/2026/03/7900-1-3.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
padding: 20px 0;
}

.heart-welcome__note-inner{
  position: relative;
  color: #fff;
  font-size: 20px;
  line-height: 1.5;
	width:90%
}
.heart-welcome_inner_image{
	height: 300px;
    position: absolute;
    right: 1%;
   bottom: 17%;
    z-index: 2;
}
.heart-welcome_inner_image img{
	height: 100%;

    margin-bottom: 12px;
}
.heart-welcome__note-inner p{ 
	margin: 20px 30px 20px;
	width:80%;
       font-family: 'Montserrat';
   font-weight:400;
}

.heart-welcome__note-kicker{
font-family:"Aleo";
  margin: 0 0 14px !important;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .95;
    padding: 10px 20px !important;
	background:#EC1C24;
 width:fit-content;
font-style: italic;
font-weight: 700;
}

.heart-welcome__sig{
margin: 0px;

    text-align: center;
    font-style: italic;
	color:#000;
	
}
.heart-welcome__sig__name{
	font-family:"Aleo";
	font-size:20px;
	font-weight:800;
margin-top 10px;
}
.heart-welcome__sig__role{
	font-size:18px;
margin-top 10px;
}
/* watermark inside note */
.heart-welcome__watermark{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 58%;
  background: url("https://heartautocare.com/wp-content/uploads/2026/03/Vector-2.png") no-repeat right bottom;
  background-size: contain;
  opacity: .15;
  pointer-events: none;
}

/* =========================
   DUXLER STORY (pixel style)
   - Red: #DE232A
   - Description: #231F20
   ========================= */
.duxler-story{
  --red:#EC1C24;
  --text:#1A1A1A;
  --desc:#231F20;
  --max: 1200px;
  --pad: 24px;

  background: #fff;
  padding: clamp(22px, 3vw, 44px) 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.duxler-story__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);

  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(18px, 4vw, 46px);
  align-items: start;
}

/* Left content */
.duxler-story__kicker{
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  font-size: 18px;
  color: #000;
  font-family: 'Montserrat';
}

.duxler-story__title{
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 1.1;
  color: #111;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-family: 'Montserrat';
}

.duxler-story__accent{ 
	color: var(--red); 
	font:inherit;
}

.duxler-story__desc{
  color: var(--desc);
  font-size: 20px;
  line-height: 1.6;
  max-width: 56ch;
}

.duxler-story__desc p{
  margin: 0 0 14px;
}
.duxler-story__desc p:last-child{ margin-bottom: 0; }

.duxler-story__desc strong{
  font-weight: 800;
}

/* Right collage */
.duxler-story__collage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-left: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

.duxler-story__img{
  border-radius: 6px;
  overflow: hidden;
  background: #eee;

}

.duxler-story__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* badge in center */
.duxler-story__badge{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  max-width: 360px;
  transform: translate(-50%, -50%);
  z-index: 3;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.22));
}

.duxler-story__badge img{
  width: 100%;
  height: auto;
  display: block;
}

/* bottom fade like screenshot */
.duxler-story__fade{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 62%,
    rgba(255,255,255,0.75) 86%,
    rgba(255,255,255,1) 100%
  );
}
/* =========================
   DUXLER STORY (pixel style)
   Red: #DE232A
   Description: #231F20
   No top-left bg image (as requested)
   ========================= */

.duxler-story{
  --red:#EC1C24;
  --desc:#231F20;
  --max: 1200px;
  --pad: 24px;

  background: #F6F6F6;
  padding: clamp(22px, 3vw, 44px) 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background-image: url(https://heartautocare.com/wp-content/uploads/2026/03/Vector-2.png);
    background-repeat: no-repeat;
    background-position: 0px -50px;
    background-size: 140px auto;
}

.duxler-story__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);

  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(18px, 4vw, 46px);
  align-items: start;
}

/* Left content */


.duxler-story__title{
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 1.3;
  color: #111;
  font-size: clamp(26px, 3.2vw, 38px);
  font-family: 'Montserrat';
}

.duxler-story__accent{ color: 
	var(--red); 
	font:inherit;
}

.duxler-story__desc{
  color: var(--desc);
  font-size: 18px;
  line-height: 1.6;
  max-width: 56ch;
}
.duxler-story__desc p{ margin: 0 0 14px; }
.duxler-story__desc p:last-child{ margin-bottom: 0; }
.duxler-story__desc strong{ font-weight: 800; }

/* Right collage */
.duxler-story__collage{
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-left: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;

  position: relative;
}

/* Each image + bottom fade overlay */
.duxler-story__img{
  position: relative;
  overflow: hidden;
  background: #eee;
  border-radius:0px !important;
}
.duxler-story__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.duxler-story__img::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  top:auto !important;     /* ✅ inset ko break */
 
  height:140px;

  z-index:2;               /* ✅ overlay upar */
  pointer-events:none;

  background: linear-gradient(to bottom,
    rgba(246,246,246,0) 0%,
    #F6F6F6 100%
  );
}

/* alignment like screenshot */
.duxler-story__img--a,
.duxler-story__img--c{
  transform: translateY(-14px);   /* left col a bit down */
}
.duxler-story__img--b,
.duxler-story__img--d{
  transform: translateY(14px);  /* right col a bit up */
}

/* middle image (center-left) */
.duxler-story__img--m{
     position: absolute;
    left: 50%;
    top: 50%;
    width: calc(50% - 20px);
    height: calc(50% - 20px);
    transform: translate(-50%, -50%);
    z-index: 1;
    height: fit-content;
    background: #fff;
    border-radius: 50% !important;
    display: flex;
    justify-content: center;
    align-items: center;
border: 4px solid #fff;
	display:none;
}
.duxler-story__img--m--iner{
	    background: black;
    padding: 15px;
    border-radius: 50%;
}
.duxler-story__img--m img{
object-fit: cover;
    margin: auto;
    margin-top: -4px;

}
.duxler-story__img--m::after{
	display:none;
}
/* center logo badge */
.duxler-story__badge{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  max-width: 360px;
  transform: translate(-50%, -50%);
  z-index: 3;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.22));
}
.duxler-story__badge img{
  width: 100%;
  height: auto;
  display: block;
}
/* =========================
   DUXLER SERVICES (NO inline CSS)
   Hover overlay image fade in (250–350ms ease-in-out)
   Red: #DE232A
   ========================= */
.duxler-services{
  --red:#EC1C24;
  --max: 1200px;
  --pad: 24px;

  background:#fff;
  padding: clamp(26px, 3vw, 50px) 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background-image: url(https://heartautocare.com/wp-content/uploads/2026/03/Vector-3.png);
    background-repeat: no-repeat;
    background-position: right 0px top -50px;
    background-size: 140px auto;
}

.duxler-services__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: left;
}

.duxler-services__kicker{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: #111;
  font-family: 'Montserrat';
}

.duxler-services__title{
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 1.1;
  font-size: clamp(24px, 3.2vw, 40px) !important;
  color: #111;
 font-family: 'Montserrat';
}

.duxler-services__accent{ 
	color: var(--red); 
	font:inherit;
}

.duxler-services__sub{
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.6;
  color: #231F20;
  
}

/* grid */
.duxler-services__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

/* card */
.duxler-svc{
  position: relative;
  display: grid;
  place-items: center;
  gap: 20px;
  padding: 40px 20px;
  background: #FAFAFA;
  border: 1px solid #E7E7E7;
  border-radius: 6px;
  text-decoration: none;
  color: #111;
  min-height: 150px;
  overflow: hidden;

  transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out, border-color 300ms ease-in-out;
}

.duxler-svc__icon{
  color: var(--red);
  line-height: 0;
  height: 70px;
  width: auto;
}
.duxler-svc__icon img{
	height: 100%;
    width: auto;
}
.duxler-svc__label{
  font-weight: 800;
  font-size: 18px;
  color: #111;
  font-family: 'Montserrat';
}

/* overlay base */
.duxler-svc__overlay{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 320ms ease-in-out, transform 320ms ease-in-out;
  z-index: 2;

  /* will be set per-card below */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* subtle layered feel */
.duxler-svc__overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.15) 100%);
  opacity: .45;
}

/* keep default content below overlay */
.duxler-svc__icon,
.duxler-svc__label{
  position: relative;
  z-index: 1;
}

/* hover */
.duxler-svc:hover{
  transform: translateY(-2px);
  border-color: rgba(222,35,42,.35);
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.10);
}

.duxler-svc:hover .duxler-svc__overlay{
  opacity: 1;
  transform: scale(1.0);
}

/* On hover: hide text/icon so ONLY image shows */
.duxler-svc:hover .duxler-svc__icon,
.duxler-svc:hover .duxler-svc__label{
  opacity: 0;
  transition: opacity 260ms ease-in-out;
}

/* hover images (no inline css) */
.duxler-svc--oil   .duxler-svc__overlay{ background-image:url("https://heartautocare.com/wp-content/uploads/2026/03/Oil-Change-2.png"); }
.duxler-svc--brake .duxler-svc__overlay{ background-image:url("https://heartautocare.com/wp-content/uploads/2026/03/Brake-Repair-4.png"); }
.duxler-svc--inspect .duxler-svc__overlay{ background-image:url("https://heartautocare.com/wp-content/uploads/2026/03/clean-car-engine-detail-in-the-garage-2026-01-06-00-00-39-utc-2.png"); }
.duxler-svc--ac    .duxler-svc__overlay{ background-image:url("https://heartautocare.com/wp-content/uploads/2026/03/close-up-hand-of-mechanics-inspect-and-check-the-r-2026-01-08-22-18-05-utc-2.png"); }
.duxler-svc--battery .duxler-svc__overlay{ background-image:url("https://heartautocare.com/wp-content/uploads/2026/03/Batteries-2.png"); }
.duxler-svc--tires .duxler-svc__overlay{ background-image:url("https://heartautocare.com/wp-content/uploads/2026/03/mechanic-removing-a-tire-from-the-rim-after-using-2026-01-09-01-01-30-utc-2.png"); }
.duxler-svc--engine .duxler-svc__overlay{ background-image:url("https://heartautocare.com/wp-content/uploads/2026/03/closeup-of-motor-gear-shaft-from-a-car-engine-at-a-2026-01-09-08-37-52-utc-2.png"); }
.duxler-svc--maint .duxler-svc__overlay{ background-image:url("https://heartautocare.com/wp-content/uploads/2026/03/car-service-and-maintenance-2026-01-11-10-13-32-utc-2.png"); }

/* CTA */
.duxler-services__cta{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.duxler-services__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 7px;
  text-transform: uppercase;
  font-size: 11px;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out, opacity 300ms ease-in-out;
}
.duxler-services__btn:hover{
  color:#fff;
  cursor:pointer;
}
.duxler-services__btn:active{ transform: translateY(0); opacity: .95; }
.duxler-svc__overlay::after{
  content:"";
  position:absolute;
  inset:0;
  /* maroon/red tint */
  background: rgba(80, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 320ms ease-in-out;
}

/* when hovered, tint becomes visible */
.duxler-svc:hover .duxler-svc__overlay::after{
  opacity: 1;
}
/* =========================
   WARRANTY + PAYMENT OPTIONS
   (no top-left background image)
   Red: #DE232A
   ========================= */
.duxler-warranty{
  --red:#EC1C24;
  --max: 1200px;
  --pad: 24px;
  --desc:#231F20;

  background: #F6F6F6;
  padding: clamp(26px, 5vw, 60px) 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background-image: url(https://heartautocare.com/wp-content/uploads/2026/03/Vector-2.png);
    background-repeat: no-repeat;
    background-position: 0px -50px;
    background-size: 140px auto;
}

.duxler-warranty__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: center;
}

.duxler-warranty__title{
  margin: 0 0 40px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 1.15;
  font-size: clamp(26px, 3vw, 40px) !important;
  color: #111;
  font-family: 'Montserrat';
}

.duxler-warranty__accent{
  color: var(--red);
 font:inherit;
}

/* 2 cards */
.duxler-warranty__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 34px);
  align-items: start;
  justify-items: center;
}

/* Card */
.duxler-wcard{
  width: 100%;
  max-width: 520px;
}

.duxler-wcard__media{
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;

  box-shadow: 0 10px 30px rgba(17,24,39,.08);
}
.duxler-wcard__media--pattern{
	  border: 2px solid #c6c6c6;
}
.duxler-wcard__media img{
  width: 100%;
  height: auto;
  display: block;
}

.duxler-wcard__heading{
  margin: 30px 0 8px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 22px;
  color: #111;
	font-family: 'Montserrat';
}

.duxler-wcard__text{
  margin: 0 auto 16px;
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--desc);
}

.duxler-wcard__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 50px;
  min-width: 210px;

  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 7px;
  text-transform: uppercase;
  font-size: 11px;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  transition: transform 260ms ease-in-out, box-shadow 260ms ease-in-out, opacity 260ms ease-in-out;
}
.duxler-wcard__btn:hover{
 color:#fff;
}
.duxler-wcard__btn:active{ transform: translateY(0); opacity: .95; }

/* =========================
   COUPONS GRID (Responsive)
   - No top-right background image
   - No blue border on 3rd card (we keep all borders neutral)
   Red: #DE232A
   ========================= */
.duxler-coupons{
  --red:#EC1C24;
  --max:1200px;
  --pad:24px;
 display:none;
  background:#fff;
  padding: clamp(26px, 3vw, 54px) 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	background-image: url(https://heartautocare.com/wp-content/uploads/2026/03/Vector-3.png);
    background-repeat: no-repeat;
    background-position: right 0px top -50px;
    background-size: 140px auto;

}

.duxler-coupons__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: center;
   
}

.duxler-coupons__title{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(22px, 3.1vw, 40px);
  color: #111;
  font-family: 'Montserrat';
}

.duxler-coupons__accent{ 
	color: var(--red); 
	font:inherit;
}

.duxler-coupons__sub{
  margin: 0 0 18px;
  font-size: 18px;
  color: #231F20;
  
}

/* grid */
.duxler-coupons__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 4vw, 40px);
  align-items: start;
}
.duxler-coupon-btm{
	margin-top:20px;
}
/* card */
.duxler-coupon{
  background: transparent;
  border: 0;                 /* ✅ no blue border */
  box-shadow: none;
  border-radius: 0;
}

.duxler-coupon img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;          /* match screenshot */
}

/* CTA button */
.duxler-coupons__cta{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.duxler-coupons__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 11px;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 10px 22px rgba(222,35,42,.18);
  transition: transform 260ms ease-in-out, box-shadow 260ms ease-in-out, opacity 260ms ease-in-out;
}
.duxler-coupons__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(222,35,42,.24);
}
.duxler-coupons__btn:active{ transform: translateY(0); opacity: .95; }
 .duxler-coupon__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 20px 40px;
  background: #DE232A;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 7px;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  box-shadow: 0 10px 22px rgba(222,35,42,.18);
  transition: all 300ms ease-in-out;
}

.duxler-coupon__btn:hover{
color:#fff;
}

.duxler-coupon__btn:active{
  transform: translateY(0);
  opacity: .95;
}
/* =========================
   RED CTA SECTION
   ========================= */

.duxler-cta{
  --max: 1100px;
  --pad: 24px;

  background-image: url("https://heartautocare.com/wp-content/uploads/2026/03/14-3.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: clamp(50px, 6vw, 100px) 0;
  text-align: center;
  color: #fff;
  background-color:#EC1C24;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.duxler-cta__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Title */
.duxler-cta__title{
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 700;
  letter-spacing: 0px; 
  color:#fff;
      font-family: 'Montserrat';
}

/* Description */
.duxler-cta__desc{
  margin: 0 auto 28px;
  max-width: 80ch;
   font-size: 18px;
  line-height: 1.6;
  opacity: 0.95;
}

/* Buttons wrapper */
.duxler-cta__actions{
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Base button */
.duxler-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
  min-width: 220px;
  padding: 12px 40px;

  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;

  border-radius: 7px;
  text-decoration: none;

  transition: all 300ms ease-in-out;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Dark button */
.duxler-cta__btn--dark{
  background: #000;
  color: #fff;
}

.duxler-cta__btn--dark:hover{
  color:#fff;
}

/* Light button */
.duxler-cta__btn--light{
  background: #fff;
  color: #000;
}

.duxler-cta__btn--light:hover{
color:#000;
}

/* =========================
   RESPONSIVE
   ========================= */


@media (max-width: 980px){
	.duxler-hero::before{
		display:none;
	}
	    .duxler-hero__desc {
        width: 280px;
    }
	.heart-welcome__bg{
		height:80%;
	}


  .duxler-hero__inner{
    align-items: flex-end; /* text bottom side */
    padding-top: 18px;
    padding-bottom: 24px;
  }

  .duxler-hero__content{
    max-width: 680px;
  }


  .duxler-card__body{
    padding: 14px 14px 16px;
  }

  .duxler-card__text{
    font-size: 12px;
  }

  .duxler-card__btn{
    width: 100%;
    max-width: 260px;
  }
	.duxler-links__inner{
		top:0px;
	}
	.duxler-links{
		padding:15px;
	}
	.duxler-links__inner{
		padding:0px;
	}
  .heart-welcome__note{
    width: 100%;
  }
	.heart-welcome_inner_image {
    height: 130px;
	width:130px;
	}
	.heart-welcome__sig__role {
    font-size: 12px;
    line-height: 1;
}
	.heart-welcome__sig__name {
    font-size: 16px;
	}
.heart-welcome__note-inner > p:first-of-type{
  margin-bottom: 0 !important;
}
	.heart-welcome__note-inner > p:nth-of-type(2){
  margin-top: 0 !important;
}
 .duxler-story__inner{
    grid-template-columns: 1fr;
  }

  .duxler-story__collage{
    margin: 10px auto 0;
    max-width: 560px;
  }

  .duxler-story__desc{
    max-width: 90%;
    margin: 0 auto;
  }
	.duxler-story__content{
		text-align: center;
	}
 .duxler-services__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duxler-services__inner{
	text-align: center;	
	}
	.duxler-services__sub{
		max-width:100%;
	}
  
  .duxler-wcard{
    max-width: 560px;
  }
	.duxler-card__title {
	font-size:15px;	
	}
	.heart-welcome__note-inner{
		font-size:13px;
               width: 95%;
	}
	.duxler-story__kicker {
		font-size: 16px;
         margin: 0 0 0px;

	}
	.duxler-story__title br{
		display:none;
	}
	.duxler-services__kicker {
		font-size: 16px;
	}
	.duxler-services__sub, .duxler-story__desc, .duxler-wcard__text, .duxler-coupons__sub, .duxler-cta__desc {
		font-size: 14px;
	}
	.duxler-wcard__heading {
		font-size: 16px;
	}
	.heart-welcome__sub{
		font-size: 14px;
	}
.heart-welcome{
		padding-top:0px !important;
	}	
	
}
@media (max-width: 720px){
.duxler-warranty__grid{
    grid-template-columns: 1fr;
  }

  .heart-welcome__body{
    min-height: 520px;
  }

  .heart-welcome__note{
            position: absolute;
        width: 100%;
        
        margin: 0 auto;
      
  }
 .duxler-story__img--a,
  .duxler-story__img--b,
  .duxler-story__img--c,
  .duxler-story__img--d{
    transform: none; /* remove offset on small screens */
  }

  .duxler-story__badge{
    width: 78%;
  }
	.duxler-coupon-btm{
	margin-top:0px;
}
    .heart-welcome_inner_image {
    bottom: 0%;
        left: 2%;
        height: 170px;
        display: flex;
        gap: 10px;
		width:auto !important;
    }
	.heart-welcome_inner_image img{
		    order: 2;
	}
	.heart-welcome__inner_wrap{
		order: 1;
    color: #fff;
    text-align: left;
	}
	.heart-welcome__sig__name{
		font-size:16px;
		text-align:left;
		color:#fff;
	}
.heart-welcome__sig__role {
    font-size: 12px;
	text-align:left;
	color:#fff;
}
	.heart-welcome__note{
		padding-bottom: 85px;
	}
	
	.heart-welcome__note-inner p{
		    width: 100%;
	}
	.duxler__videoWrap{
		    padding: 10px 0;
	}
	
}

@media (max-width: 520px){
  .duxler-story{ --pad: 16px; }

  .duxler-story__collage{
    gap: 10px;
  }

  .duxler-story__badge{
    width: 84%;
  }
  .duxler-links__inner{
    grid-template-columns: 1fr;
  }
  .duxler-hero{ --duxler-pad: 16px; 
	background-size:cover;
	  background-position: center;
	}
	.duxler-hero__desc{
		width:280px;
	}
 
 
  .duxler-hero__btn{
    width: 100%;
    justify-content: center;
    padding: 13px 16px;
  }

  .duxler-hero__desc br{ display:none; }
  .duxler-links{
    --duxler-pad: 16px;
  }
 .heart-welcome{ --pad: 14px; }

  .heart-welcome__tire{
    width: 110px;
    top: -6px;
  }

  .heart-welcome__header{
    padding: 22px 14px 16px;
  }

  .heart-welcome__note-inner{
    font-size: 13px;
  }
    .heart-welcome{
		padding: 15px;
	}
  .duxler-services{ --pad: 16px; }
  .duxler-services__grid{ gap: 14px; }
  .duxler-svc{ min-height: 140px; }
	.duxler-services__inner{
	text-align: center;	
	}
.duxler-warranty{ --pad: 16px; }
 .duxler-coupons__grid{
    grid-template-columns: 1fr;
  }
  .duxler-wcard__btn{
    width: 100%;
    min-width: 0;
  }
.duxler-coupons{ --pad: 16px; }
  .duxler-coupons__btn{ width: 100%; }
	 .duxler-coupon__btn{
    width: 100%;
  }
.duxler-cta__btn{
    width: 100%;
    max-width: 320px;
  }

  .duxler-cta__desc{
    font-size: 13px;
  }
    .duxler-card__title {
        font-size: 20px;
    }
    .duxler-card__text {
        font-size: 14px;
    }
	.duxler-svc__label{
		font-size: 15px;
	}
	.duxler-services__btn, .duxler-wcard__btn, .duxler-coupon__btn, .duxler-hero__btn, .duxler-cta__btn{
	width: 100%;
    max-width: 270px;
	padding:12px ;
	}
.heart-welcome__note-inner p {
          margin: 0px 8px 10px;
	}
	
}