/*===========================
  01. SOCIAL TRUST
=============================*/

.social-trust{
  position: relative;
  height: auto;
  margin-bottom: 50px;
}

.item-social-icon{
  width: 135px;
  height: 135px;
}

.general-trust-social-container{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  justify-content: center;
  align-items: center;
  max-inline-size: 1200px;
  gap: 30px;
  width: 100%;
  top: 50px;

}

/*========= 02. SERVICES ==========*/

.services{
  padding: 70px 0 100px 0;
}


/*-------Card-------*/

.card.service{
  padding: 0;
  overflow: hidden;             
  border-radius: 10px;
  background: #fbfaf9;
}


.service__body{
  padding: 25px;
}


.service__top{
  position: relative;
  margin: 0;
}

.service__icon{
  width: 100%;
  height: 190px;
  display: block;
  object-fit: cover;
  border-radius: 0;      
  border: 0;
}

.brands__icon{
  width: 100%;
  height: 140px;
}

.service__top::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(15,30,43,.22) 0%, rgba(15,30,43,0) 55%);
  pointer-events:none;
}

.service__pill{
  position:absolute;
  top:17px;
  left:15px;
  z-index:1;
  font-size:12px;
  font-weight:800;
  color:#ffffff;
  background: rgba(197, 152, 41, 0.9);
  /* border: 1px solid rgba(230,221,209,.95); */
  padding: 7px 15px;
  border-radius:999px;
}

.service__body p{
  font-size: 14px;
}

.service__types{
  margin: 0 0 12px;
  color:var(--color-body-text);
  font-size:14px;
  line-height:1.35;
}

.service__chips{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service__chips .chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-ink);
  background: rgba(254,254,254,.7);
  border: 1px solid rgba(230,221,209,.95);
}

/* marker */
.service__chips .chip::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-gold);
  flex: 0 0 6px;
}

.service__more{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid rgba(230,221,209,.95);
  font-weight: 900;
  color: var(--color-brand-teal);
  font-size: 15px;
}

.service__more::after{
  content:"→";
  opacity:.75;
}

/*----------- 03. ABOUT INTRO -----------*/

.about-intro{
  display: grid;
  align-items: center;
  position: relative;
}


.video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video {
  width: 100%;
  height: 100%;
  overflow: hidden;
}



.meta-line{
  margin-top: 15px;
}

.container-description-about{
  padding: 100px 15px 120px 15px;
}

/*========= 04. WORK STEPS =========*/

.work-steps{
  position: relative;
  display: grid;
  top: -25px;
  margin-bottom: -25px;
}

.title-step{
  display: flex;
  gap: 15px;
  align-items: center;
}

.title-step span {
  width: 48px;
  height: 48px;
  border-radius: 100px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 20px;
  color: var(--color-white);
  background: var(--color-brand-gold-step);
}

.steps-general{
  background: rgba(255, 255, 255);
  box-shadow: var(--shadow-elev-1);
  padding: 30px;
  border-radius: 10px;
  gap: 45px;
  max-width: 100%;
}

.steps-general > .step{
  position: relative;
}

.steps-general > .step + .step::before{
  content:"";
  position:absolute;
  left: calc(-1 * var(--gap, 45px) / 2);          
  top: 10px;      
  bottom: 10px;
  width:1px;
  background: rgba(15,26,42,.10);
}

.note-steps{
  text-align: center;
  margin-top: 35px;
}

/*========== 05. REAL WORKS =======*/

.work-card h3{
  margin: 20px 0 10px 0;
}

.work-footnote{
  margin-top: 25px;
}

.real-works{
  padding-bottom: 100px;
}

.work-card picture,
.work-card img{
  border-radius: 10px;
  height: 270px;
}

.line {
  margin: 70px 0;
  display: flex;
  justify-content: center;
}

.line span {
  width: 740px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(15,26,42,.18),
    transparent
  );
}

/*========= 06. BRANDS ========*/

.brands{
  padding: 100px 0;
}

.logostrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  max-width: 100%;
}

.item-brands {
  height: 75px;
  padding: 12px;
  display: flex;
  max-width: 100%;
  background: var(--color-white);
  box-shadow: var(--shadow-elev-1);
  border-radius: 7px;
  align-items: center;
  justify-content: center;
}

/*================================ 07. SERVICE AREAS ============================*/

.service-areas{
  padding-top: 100px;
}

.general-areas-container{
  align-items: center;
}

.block-description{
  margin-top: 25px;
}

.areas{
  display:flex;
  flex-wrap:wrap;
  gap: 7px 5px;
  margin-top: 15px;
}

.areas a{
  display: flex;
  align-items: center;
  font-weight: 700;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--color-border-sand);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-brand-gold);
  background: var(--color-white);
}

.pic-service-areas img{
  display: block;
  width: 100%;
  object-fit: cover;
  height: 520px;
}

.areas-list{
  margin-top: 22px;
}

/*================================= 08. EMERGENCY ============================*/

.emergency{
  padding-bottom: 100px;
}

.emergency-description{
  position: relative;
  max-width: 940px;
  padding: 50px 45px;
  border: 10px solid #f5f3ee;
  margin: 0 auto;
  background-color: rgb(255, 255, 255, 0.2);
  z-index: 1;
}

.pic-emergency{
  position: relative;
  margin-top: -90px;
  z-index: 0;
}

.pic-emergency{
  display: flex;
  justify-content: center;
}
.pic-emergency img{
  max-width: 100%;
}

/*========== 09. HAPPY CUSTOMER =====*/

.pic-customer picture,
.pic-customer img{
  height: 690px;
}

/*===============================
  10. QUICK BOOK
================================*/


ol.steps-mini li{
  margin:16px 0 0;
  list-style:none;
  border-radius: 5px;
}

ol.steps-mini li p{
  color: var(--color-on-dark-text);
}

ol.steps-mini h4{
  margin-bottom: 5px;
  color: var(--color-on-dark-heading);
}

.quick-book {
  background-color: #362f1c;
}

.steps-mini{
  margin-top: 25px;
}

.pic-quick-book picture,
.pic-quick-book img{
  height: 800px;
}


/*==============================
  11. PROCESS
===============================*/

.block-procecc{
  align-items: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 100%;
  background-color: var(--color-white);
}

.content-process{
  position: relative;
  padding: 45px 50px;
}

.list-process{
  margin: 25px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.list-process li{
  display:flex;
  align-items: center;
  gap:12px;
  line-height: 30px;
  font-weight: 700;
}

.list-process li i{
  flex:0 0 auto;
  width: 22px;
  height: 22px;
  border-radius:3px;
  background:rgba(197,152,41,.14);
  box-shadow:0 0 0 1px rgba(15,26,42,.10) inset;
  position:relative;
}

.list-process li i::after{
  content:"";
  position:absolute;
  left:7px;
  top:3px;
  width:6px;
  height:10px;
  border-right:2px solid #C59829;
  border-bottom:2px solid #C59829;
  transform:rotate(40deg);
}

.media-process img{
  height: 390px;
}

/*===================================== 12. PARTS =======================*/

.pic-parts img{
  height: 560px;
  border-radius: 10px;
}

ul.u-list-dots li{
  color: var(--color-on-dark-text);
  margin-bottom: 16px;
  line-height: 30px;
}

ul.u-list-dots li strong{
  color: var(--color-on-dark-heading);
}

.general-parts-container{
  align-items: center;
}

/*==================================================
   13. ISSUES
====================================================*/

.issues{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}


.i-card {
  padding: 25px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-elev-1);
  background-color: #3e4b56;
}

.i-top {
  display: flex;
  gap: 25px;
  align-items: flex-start;
}

.i-ico {
  width: 60px;
  height: 60px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(230, 237, 246, .85);
  flex: 0 0 auto;
}

.i-ico svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.i-title {
  margin-bottom: 3px;
  color: var(--color-on-dark-title);
}

.i-sub {
  color: var(--color-on-dark-sub);
}

.i-list{
  margin-top: 20px;
}

.i-list li{
  position: relative;
  color: var(--color-on-dark-text);
  font-weight: 500;
  line-height: 1.5;
  padding: 10px 0 0 20px;
  margin-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.i-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(10px + 0.95em);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-gold-soft);
  transform: translateY(-50%);
}

.i-list li:first-child{
  border-top: none;
  padding-top: 0;
}

.i-list li:first-child::before{
  top: 0.95em;
}


/*================================== 14. REVIEWS =============================*/

#reviews .carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 28px) / 3);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 10px 0 24px;
  scrollbar-width: none;
}

#reviews .carousel::-webkit-scrollbar {
  display: none;
}

#reviews .review {
  scroll-snap-align: start;
  border-radius: 7px;
  border: 1px solid #e7ebf1;
  background: var(--color-white);
  padding: 35px 30px;
}

#reviews .stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}

#reviews .star {
  width: 14px;
  height: 14px;
  background: var(--color-brand-gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

#reviews .review b {
  display: block;
  margin-top: 10px;
}

#reviews .review small {
  display: block;
  color: #64748b;
  font-weight: 850;
  margin-top: 2px;
}

#reviews .dots {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

#reviews .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(13, 52, 90, .22);
  border: 1px solid rgba(13, 52, 90, .22);
  cursor: pointer;
  padding: 0;
}

#reviews .dot.is-active {
  width: 18px;
  background: var(--color-brand-gold);
  border-color: rgba(195, 140, 79, .65);
}

.review-title {
  margin-bottom: 10px;
}


/*=================================== 
  15. FAQ 
===============================*/

.faq-item{
  border-bottom: 1px solid rgba(15,30,43,.14);
  padding: 22px 0;
}

.faq-item:first-of-type {
  padding-top: 0;
}

.faq-item:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.faq-q{
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: #47535c;
  padding-right: 42px;
  padding-left: 10px;
  position: relative;
}

.faq-q::-webkit-details-marker{ display:none; }
.faq-q::marker{ content:""; }


.faq-q::before,
.faq-q::after{
  content:"";
  position:absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: rgba(15,30,43,.7);
  transform: translateY(-50%);
  border-radius: 2px;
}

.faq-q::after{
  transform: translateY(-50%) rotate(90deg);
  transition: transform .18s ease;
}

.faq-item[open] .faq-q::after{
  transform: translateY(-50%) rotate(0deg);
}

.faq-a{
  padding: 10px 40px 0 0;
}

.faq-a p{
  margin: 0;
  color: var(--color-body-text);
  font-size: 15px;
  line-height: 1.9;
}

.faq-a{
  opacity: .0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
}

.faq-item[open] .faq-a{
  opacity: 1;
  transform: translateY(0);
}

#appointmentIframe{
  min-height: 475px !important;
}

/*===========================
  01. INNER PAGE
=============================*/

.content,
.inner-page-section{
  padding: 35px 0 90px 0;
}

/*============================
 CONTENT PAGE
=============================*/


.content h1{
  margin-bottom: 30px;
}

.content h2{
  margin: 30px 0 15px 0;
}

.content h3{
  margin: 20px 0 10px 0;
}

.content h4{
  margin: 23px 0 8px 0;
}

.content ol{
  padding: 20px 20px 20px 40px;
  background: var(--color-bg-offwhite);
  list-style: decimal;
  list-style-position: outside;
  margin-bottom: 20px;
}
.content ol li{
  line-height: 32px;
  font-weight: 600;
}

.content img,
.content picture{
  width: 100%;
  object-fit: cover;
  display: block;
  height: 350px;
}

/*===========================
 Recall
=============================*/

.brand-pic-recall{
  width: 170px;
  display: flex;
  height: 80px;
  padding: 18px;
  align-items: center;
  margin-bottom: 20px;
  background: var(--color-bg-offwhite);
}

ul.recall li a{
  color: var(--color-brand-gold);
  margin-bottom: 12px;
  font-weight: 700;
}

ul.recall li{
  margin-bottom: 12px;
  line-height: 26px;
}

.recalls-hero{
  padding: 35px 0 60px 0;
}

.recalls{
  padding: 50px 0 90px 0;
}

.recalls-hero__meta{
  margin-top: 18px;
  display: grid;
  gap: 20px;
  max-width: 780px;
}

.recalls-hero__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.recalls-hero__chips .chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--color-on-dark-heading);
  font-size: 13px;
  font-weight: 750;
}

.recalls-hero__note{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
.recalls-hero__note .note-ico{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--color-on-dark-heading);
  background: rgba(255,255,255,.08);
}
.recalls-hero__note .note-text{
  color: var(--color-on-dark-heading);
  font-size: 13px;
  line-height: 21px;
}
.recalls-hero h1{
  color: var(--color-on-dark-heading);
}

.recalls-hero__note .muted{
  color: var(--color-on-dark-heading);
}
.recalls-hero__note .dot{
  margin: 0 8px;
  opacity: .6;
}

.recalls-hero__hint{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--color-on-dark-heading);
  font-size: 13px;
  line-height: 20px;
}
.recalls-hero__hint .hint-ico{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  color: var(--color-on-dark-heading);
}

/*================================
 Table
=================================*/

table{
  width:100%;
  border-collapse:collapse;
  margin-top:35px;
}

tr:nth-of-type(odd){ 
  background-color: var(--color-bg-offwhite);
}

th{
  background-color: var(--color-bg-slate);
  color:#fff;
  font-weight:600;
  padding:20px 15px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

td,th{
  padding:20px 15px;
  text-align:left;
  font-size:14px;
}

td{ color:var(--color-bg-slate) }

/*============btn-footer===========*/

.btns-stick {
  width: 100%;
  background: #ebebeb;
  padding: 12px 10px;
  position: fixed;
  bottom: -76px;
  transition: bottom .5s ease-in-out;
  z-index: 777;
  display: none;
}

.btn-call.show {
  opacity: 1;
}