/* =========================================================
   custom.css
   Site-wide enhancements layered on top of style.css:
   - Sticky header polish (shadow + slight shrink on scroll)
   - Scroll-reveal animation support (AOS) + safe fallback
   - Responsive fixes for small screens
   - Seamless infinite Before/After carousel styling
   - Emoji -> Font Awesome icon sizing
   - Small UX additions (back-to-top, focus states)
   ========================================================= */

/* ---------- Sticky header polish ---------- */
.navbar.sticky-top{
  transition: box-shadow .25s ease, padding .25s ease;
}
.navbar.sticky-top.is-scrolled{
  box-shadow: 0 4px 18px rgba(0,0,0,.09);
}
/* @media (min-width: 992px){
  .navbar.sticky-top.is-scrolled{ padding-top: .35rem; padding-bottom: .35rem; }
} */

/* ---------- AOS animation tuning ---------- */
[data-aos]{
  transition-timing-function: ease-out !important;
}
/* If a page loads before AOS finishes initializing, never let content stay invisible */
.aos-init.aos-animate, [data-aos]{ will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce){
  [data-aos]{ transform: none !important; transition: none !important; opacity: 1 !important; }
}

/* Gentle hover-lift utility reused across cards/buttons that don't already animate */
.value-card, .benefit-card, .problem-card, .ct-card, .product-card{
  transition: transform .25s ease, box-shadow .25s ease;
}
.value-card:hover, .benefit-card:hover, .problem-card:hover, .ct-card:hover, .product-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* Floating call/whatsapp buttons: subtle pulse so they draw the eye without being annoying */
.float-btn.call{ animation: floatPulse 2.4s ease-in-out infinite; }
@keyframes floatPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  50%{ box-shadow: 0 0 0 8px rgba(0,0,0,.03); }
}

/* ---------- Before / After infinite carousel ---------- */
.gallery-track{
  scroll-behavior: smooth;
}
.gallery-track.no-smooth{ scroll-behavior: auto; }
.gallery-wrap:hover .gallery-nav,
.gallery-wrap:focus-within .gallery-nav{ opacity: 1; }
.gallery-nav{ transition: opacity .2s ease, background .2s ease; }

/* Real image ab dashed placeholder box ke andar hai -- box ko hata kar img ko poora fit karo */
.gallery-card .img-placeholder.gallery-img{
  border: none;
  background: none;
  padding: 0;
}
.gallery-card .img-placeholder.gallery-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

/* ---------- Back to top button ---------- */
.back-to-top{
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--orange-2, #F57C00);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 999;
  text-decoration: none;
  font-size: 18px;
}
.back-to-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--orange-2, #F57C00); color: #fff; }
@media (max-width: 575.98px){
  .back-to-top{ right: 16px; bottom: 84px; width: 40px; height: 40px; font-size: 16px; }
}

/* ---------- Global responsive touch-ups ---------- */
/* Prevent long words/URLs from breaking mobile layout */
p, h1, h2, h3, .section-sub{ overflow-wrap: break-word; }

/* Sections generally get comfortable spacing on very small screens */
@media (max-width: 575.98px){
  section{ padding-left: 4px; padding-right: 4px; }
  h1{ font-size: 1.7rem !important; }
  .section-title{ font-size: 1.4rem !important; }
}

/* Contact page grid: stack cleanly on tablets/mobiles (defensive, in case ct-grid isn't already responsive) */
@media (max-width: 991.98px){
  .ct-grid{ grid-template-columns: 1fr !important; }
}

/* Products page rows: force stacked layout on small screens */
@media (max-width: 767.98px){
  .product-row, .product-row.reverse{ flex-direction: column !important; }
}

/* Floating buttons shouldn't overlap footer content or get too big on small phones */
@media (max-width: 400px){
  .float-actions{ right: 12px !important; bottom: 12px !important; }
}

/* Make sure Font Awesome icons used in place of emoji render at a consistent size/alignment */
.ct-icon i, .service-icon i, .value-icon i, .benefit-icon i,
.product-icon i, .why-icon i, .sa-region-icon i, .step-circle i{
  line-height: 1;
}

/* Nav links: quick visual feedback on tap for mobile */
.nav-link{ transition: color .2s ease; }

/* ---------- Instant Quote: estimated price result card ---------- */
.quote-result-card{
  background: linear-gradient(135deg, #fdf6ea, #ffffff);
  border: 1px solid rgba(245,124,0,.25);
  border-radius: 12px;
  padding: 1.1rem 1rem;
}
.quote-result-card #resultPriceLabel{
  font-size: 2rem;
}
.form-control-lg-custom.is-invalid{
  border-color: #dc3545 !important;
}

/* Focus visibility for accessibility/keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--orange-2, #F57C00);
  outline-offset: 2px;
}

/* Product images: smaller, centered, with shadow -- matches reference design */
.img-placeholder.product-img{
  max-width: 380px;
  margin: 0 auto;
  border: none;
  background: none;
}
.img-placeholder.product-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,.15);
}

.why-img .img-placeholder {
  /* overflow: hidden; */
}
.why-img .img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

@media (max-width: 480px) {
  .btn-hero {
    font-size: .92rem;
    padding: .75rem 1.2rem;
  }
}

@media (max-width: 480px) {
  .btn-call-now,
  .btn-final-call {
    font-size: .8rem;
    padding: 1rem 1.9rem;
    white-space: nowrap;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .btn-whatsapp{
    padding: 14px 48px;

  }
}