/* Reset page margin */
body{
  margin:0;
}

/* Support hero section */
.ac-support-hero{
  position: relative;
  min-height: 360px;
  display: grid;
  align-items: center;
  overflow: hidden;
  margin-bottom: 0;

  background-image: url("/uploads/garages/4/garage4-wheel-balance-auto-services1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hero overlay */
.ac-support-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    rgba(0,0,0,0.70),
    rgba(0,0,0,0.35)
  );
}

/* Hero content */
.ac-support-hero__content{
  position:relative;
  z-index:2;
  padding:56px 16px;
  max-width:980px;
  text-align:center;
}

/* Hero title */
.ac-support-hero__title{
  color:#fff;
  font-weight:800;
  margin-bottom:10px;
  font-size:clamp(28px,4vw,46px);
}

/* Hero subtitle */
.ac-support-hero__subtitle{
  color:rgba(255,255,255,.85);
  margin-bottom:22px;
  font-size:clamp(14px,2vw,18px);
}

/* Search form */
.ac-support-search{
  margin:0 auto;
  width:min(720px,100%);
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
}

/* Search input */
.ac-support-search__input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  padding:12px 14px;
}

/* Search placeholder */
.ac-support-search__input::placeholder{
  color:rgba(255,255,255,.65);
}

/* Search button */
.ac-support-search__btn{
  border:none;
  border-radius:12px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#0d6efd,#084298);
  color:#fff;
}

/* ---------------- SUPPORT HUB ---------------- */

.ac-support-hub{
  background:#ffffff;
  padding:55px 0 70px;
}

/* Categories */
.ac-support-cats{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:20px;
  margin-bottom:42px;
}

.ac-support-cat{
  text-decoration:none;
  text-align:center;
  padding:18px 12px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
  transition:.2s ease;
}

.ac-support-cat:hover{
  transform:translateY(-4px);
  border-color:#ffbf80;
  box-shadow:0 18px 36px rgba(15,23,42,.10);
}

.ac-support-cat__icon{
  display:inline-flex;
  width:58px;
  height:58px;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg,#eff6ff,#fff7ed);
  border:1px solid #dbe4ef;
  font-size:22px;
  color:#0d6efd;
  margin-bottom:10px;
}

.ac-support-cat:hover .ac-support-cat__icon{
  color:#ff8c1a;
  background:#fff7ed;
}

.ac-support-cat__label{
  display:block;
  color:#111827;
  font-size:13px;
  font-weight:800;
}

/* Support Cards */
.ac-support-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.ac-support-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:26px;
  box-shadow:0 14px 34px rgba(15,23,42,.07);
}

.ac-support-box__title{
  color:#111827;
  font-weight:900;
  margin-bottom:16px;
  font-size:18px;
}

.ac-support-list{
  margin:0;
  padding-left:18px;
}

.ac-support-list li{
  margin:9px 0;
  color:#475569;
}

.ac-support-list a{
  color:#334155;
  text-decoration:none;
  font-weight:600;
}

.ac-support-list a:hover{
  color:#ff8c1a;
  text-decoration:underline;
}

/* FAQ */
.ac-faq-wrap{
  padding:65px 0 90px;
}

.ac-faq-head{
  text-align:center;
  margin-bottom:28px;
}

.ac-faq-title{
  color:#111827;
  font-weight:900;
  margin-bottom:8px;
  font-size:clamp(24px,3vw,34px);
}

.ac-faq-sub{
  color:#64748b;
}

.ac-faq-wrap .container{
  max-width:920px;
}

.ac-faq-cat{
  margin-top:30px;
}

.ac-faq-cat__title{
  color:#334155;
  font-weight:900;
  margin-bottom:14px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.accordion{
 --bs-accordion-bg:transparent;
 --bs-accordion-border-color:transparent;
}

.ac-faq-item{
  border-radius:18px;
  overflow:hidden;
  margin-bottom:14px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.ac-faq-item:hover{
  transform:translateY(-2px);
}

.ac-faq-btn{
  background:#fff !important;
  color:#111827 !important;
  box-shadow:none !important;
  font-weight:800;
  padding:18px;
  display:flex;
  align-items:center;
  gap:12px;
}

.ac-faq-btn::after{
 display:none !important;
}

.ac-faq-toggle{
  margin-left:auto;
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  border:1px solid #dbe4ef;
  color:#64748b;
}

.accordion-button:not(.collapsed){
 background:#eff6ff !important;
}

.accordion-button:not(.collapsed) .ac-faq-toggle{
 color:#0d6efd;
 border-color:#bfdbfe;
}

.ac-faq-a{
  color:#475569;
  padding:0 18px 18px;
  line-height:1.75;
  background:#fff;
  border-top:1px solid #e5e7eb;
}

.ac-faq-cat{
  margin-top:30px;
  scroll-margin-top:140px;
}

.ac-support-cat{
background:#f8fbff;
border:1px solid #dbe5ef;
}


.ac-support-cat:hover{
background:#ffffff;
border-color:#ffbf80;
}

/* Mobile FAQ */
@media(max-width:576px){

.ac-faq-btn{
 padding:16px 14px;
}

.ac-faq-a{
 padding:0 14px 16px;
}

.ac-faq-toggle{
 width:34px;
 height:34px;
}

}

/* Responsive */
@media(max-width:992px){

.ac-support-cats{
 grid-template-columns:repeat(3,minmax(0,1fr));
}

.ac-support-grid{
 grid-template-columns:1fr;
}

}