/* === ABHANG DETAILING HUB — CUSTOM STYLESHEET === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Bebas+Neue&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:#0A0A0A;color:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{font-family:'Inter',sans-serif;font-weight:700;line-height:1.2}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#0A0A0A}
::-webkit-scrollbar-thumb{background:#DC2626;border-radius:2px}

.nav-glass{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(10,10,10,0.85);border-bottom:1px solid rgba(255,255,255,0.06)}

.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:#DC2626;color:#fff;font-weight:600;padding:1rem 2rem;border-radius:2px;transition:background .2s;letter-spacing:.05em;text-transform:uppercase;font-size:.875rem;cursor:pointer;text-decoration:none;white-space:nowrap;border:none;font-family:inherit}
.btn-primary:hover{background:#B91C1C}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,0.3);color:#fff;font-weight:600;padding:1rem 2rem;border-radius:2px;transition:border-color .2s,color .2s;letter-spacing:.05em;text-transform:uppercase;font-size:.875rem;cursor:pointer;text-decoration:none;white-space:nowrap;background:transparent;font-family:inherit}
.btn-outline:hover{border-color:#EF4444;color:#F87171}
.btn-outline-dark{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #D1D5DB;color:#111827;font-weight:600;padding:1rem 2rem;border-radius:2px;transition:border-color .2s,color .2s;letter-spacing:.05em;text-transform:uppercase;font-size:.875rem;cursor:pointer;text-decoration:none;white-space:nowrap;background:transparent;font-family:inherit}
.btn-outline-dark:hover{border-color:#EF4444;color:#DC2626}

.section-padding{padding:5rem 1rem}
@media(min-width:768px){.section-padding{padding:5rem 2rem}}
@media(min-width:1024px){.section-padding{padding:5rem 4rem}}
.container-max{max-width:80rem;margin-left:auto;margin-right:auto}

.section-tag{display:inline-block;color:#EF4444;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem}
.section-title{font-size:1.875rem;font-weight:700;line-height:1.2}
@media(min-width:768px){.section-title{font-size:3rem}}
.section-subtitle{color:#9CA3AF;font-size:1.125rem;line-height:1.75;margin-top:1rem}

.card-dark{background:#141414;border:1px solid rgba(255,255,255,0.05);border-radius:2px;padding:2rem;transition:border-color .3s,box-shadow .3s}
.card-dark:hover{border-color:rgba(220,38,38,0.3)}
.card-light{background:#fff;border:1px solid #F3F4F6;border-radius:2px;padding:2rem;box-shadow:0 1px 2px rgba(0,0,0,0.05);transition:box-shadow .3s,border-color .3s}
.card-light:hover{box-shadow:0 10px 15px rgba(0,0,0,0.1);border-color:#FECACA}
.red-hover:hover{box-shadow:0 0 30px rgba(220,38,38,0.12)}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
.shimmer-text{background:linear-gradient(90deg,#fff 25%,#DC2626 50%,#fff 75%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s linear infinite}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}

.fade-in-up{animation:fadeInUp .6s ease forwards}
.fade-in-right{animation:fadeInRight .8s .5s ease both}
.delay-1{animation-delay:.1s;opacity:0}
.delay-2{animation-delay:.3s;opacity:0}
.delay-3{animation-delay:.45s;opacity:0}
.delay-4{animation-delay:.7s;opacity:0}
.delay-5{animation-delay:1.5s;opacity:0}
.animate-bounce{animation:bounce 1s infinite}

.sr{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.sr.visible{opacity:1;transform:translateY(0)}

.gallery-item{overflow:hidden;position:relative}
.gallery-img{transition:transform .5s ease;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.gallery-item:hover .gallery-img{transform:scale(1.08)}
.gallery-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(220,38,38,0.7) 0%,transparent 60%);opacity:0;transition:opacity .4s;display:flex;align-items:flex-end;padding:1.5rem}
.gallery-item:hover .gallery-overlay{opacity:1}

.service-card{overflow:hidden}
.service-img{transition:transform .5s ease}
.service-card:hover .service-img{transform:scale(1.05)}

.ba-slider{position:relative;overflow:hidden;user-select:none;cursor:ew-resize}
.ba-handle{position:absolute;top:0;bottom:0;width:3px;background:#DC2626;z-index:10;display:flex;align-items:center;justify-content:center;cursor:ew-resize;transform:translateX(-50%)}
.ba-handle-circle{width:44px;height:44px;border-radius:50%;background:#DC2626;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px rgba(220,38,38,0.5);flex-shrink:0}

.whatsapp-btn{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;width:3.5rem;height:3.5rem;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(37,211,102,0.4);text-decoration:none;transform:scale(0);animation:popIn .5s 1.5s cubic-bezier(.34,1.56,.64,1) forwards;transition:box-shadow .2s}
.whatsapp-btn:hover{box-shadow:0 6px 20px rgba(37,211,102,0.5)}

.nav-link{color:#D1D5DB;text-decoration:none;transition:color .2s}
.nav-link:hover{color:#fff}
.nav-link.active{color:#EF4444}
.mobile-nav-link{color:#D1D5DB;text-decoration:none;display:block;transition:color .2s}
.mobile-nav-link:hover{color:#fff}
.mobile-nav-link.active{color:#EF4444}

.hero-pill{display:inline-flex;align-items:center;font-size:.875rem;font-weight:600;padding:.75rem 1.25rem;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.05);color:#E5E7EB;border-radius:9999px;white-space:nowrap;transition:all .3s;text-decoration:none}
.hero-pill:hover{background:#DC2626;border-color:#DC2626;color:#fff;box-shadow:0 0 20px rgba(220,38,38,0.5)}

.scroll-mt-28{scroll-margin-top:7rem}

.t-dot{height:6px;border-radius:9999px;transition:all .2s;border:none;cursor:pointer;padding:0}
.t-dot.active{width:2rem;background:#DC2626}
.t-dot.inactive{width:.5rem;background:#E5E7EB}

.form-input{width:100%;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:2px;padding:.875rem 1rem;color:#111827;font-size:.875rem;transition:all .2s;font-family:inherit;outline:none}
.form-input:focus{border-color:#EF4444;box-shadow:0 0 0 2px rgba(239,68,68,0.1)}
.form-input::placeholder{color:#9CA3AF}
.form-input.error{border-color:#EF4444}
.form-label{display:block;color:#374151;font-weight:600;font-size:.875rem;margin-bottom:.375rem}
.form-label-dark{color:#D1D5DB}
.form-error{color:#F87171;font-size:.75rem;margin-top:.25rem}