/* =========================================================
   ARISE Solar - Static Frontend Stylesheet
   Brand palette derived from ARISE logo
   ========================================================= */
:root{
  --arise-red: #D71920;
  --arise-red-dark: #A90F16;
  --white: #FFFFFF;
  --bg-light: #F7F7F7;
  --text-dark: #4b4b4e;
  --text-muted: #666666;
  --border-color: #E6E6E6;
  --solar-accent: #F5A623; /* warm yellow/orange - icons & calculator highlights only */
  --shadow-soft: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-med: 0 8px 30px rgba(0,0,0,0.10);
  --radius: 10px;
  --font-base: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

*{ box-sizing: border-box; }

/* Note: NOT using global smooth scroll-behavior here - it made the browser
   visibly animate the jump-to-anchor on page load (e.g. navbar links like
   solar-panels.html#dcr-600), which combined with the header/footer popping
   in made navigation feel like it was jumping/shaking. Back-to-top and the
   calculator's "scroll to result" already request smooth scrolling directly
   via JS where it's actually wanted. */
html{ scroll-behavior: auto; }

body{
  font-family: var(--font-base);
  color: var(--text-dark);
  background: var(--white);
  overflow-x: hidden;
}

/* Smooth page reveal: header/footer are injected via JS after the page
   parses, which used to make the layout visibly jump/shake as their height
   was added. Keep the page hidden until everything has settled, then fade
   it in as one piece - no more jump on navigation. */
body{ opacity: 1; }

a{ text-decoration: none; color: inherit; }
img{ max-width: 100%; }

.text-muted-custom{ color: var(--text-muted); }
.bg-light-custom{ background: var(--bg-light); }

/* ---------- Utility buttons ---------- */
.btn-arise{
  background: var(--arise-red);
  border: 1px solid var(--arise-red);
  color: var(--white);
  font-weight: 600;
  padding: .65rem 1.6rem;
  border-radius: 6px;
  transition: all .25s ease;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-arise:hover{
  background: var(--arise-red-dark);
  border-color: var(--arise-red-dark);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-arise-outline{
  background: transparent;
  border: 1.5px solid var(--arise-red);
  color: var(--arise-red);
  font-weight: 600;
  padding: .6rem 1.5rem;
  border-radius: 6px;
  transition: all .25s ease;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 15px;
}
.btn-arise-outline:hover{
  background: var(--arise-red);
  color: var(--white);
}
.btn-arise-dark{
  background: var(--text-dark);
  color: var(--white);
  font-weight: 600;
  padding: .65rem 1.6rem;
  border-radius: 6px;
  transition: all .25s ease;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 15px;
  border: 1px solid var(--text-dark);
}
.btn-arise-dark:hover{ background:#4b4b4e; border-color:#4b4b4e; color:var(--white); }

/* Buttons of different variants (.btn-arise / .btn-arise-outline / .btn-arise-dark)
   used to have slightly different font-size/border, which misaligned their
   height when placed together in the same row. .btn-sm variants get a matching
   consistent size too. */
.btn-arise, .btn-arise-outline, .btn-arise-dark{ line-height: 1.3; vertical-align: middle; }
.btn-arise.btn-sm, .btn-arise-outline.btn-sm, .btn-arise-dark.btn-sm{
  padding: .4rem 1rem; font-size: .82rem; gap:.35rem;
}

/* ---------- Top info bar ---------- */
.topbar{
  background: var(--text-dark);
  color: #ddd;
  font-size: .82rem;
  padding: 6px 0;
}
.topbar a{ color:#ddd; }
.topbar a:hover{ color: var(--solar-accent); }
.topbar .marquee-msg{ color:#ddd; }

/* ---------- Main header ---------- */
.main-header{
  background: var(--white);
  box-shadow: var(--shadow-soft);
  padding: 14px 0;
  position: relative;
  z-index: 1000;
  transition: all .3s ease;
}
.main-header.sticky-active{
  position: fixed;
  top:0; left:0; right:0;
  animation: slideDown .3s ease;
  padding: 8px 0;
}
@keyframes slideDown{ from{ transform: translateY(-100%); } to{ transform: translateY(0); } }

.site-logo img{ max-height: 56px; width:auto; }

.header-search{
  position: relative;
  max-width: 520px;
}
.header-search input{
  border: 1.5px solid var(--border-color);
  border-radius: 30px;
  padding: .6rem 3rem .6rem 1.2rem;
  width: 100%;
  font-size: .92rem;
}
.header-search input:focus{
  outline: none;
  border-color: var(--arise-red);
  box-shadow: 0 0 0 3px rgba(215,25,32,.1);
}
.header-search button{
  position: absolute;
  right: 4px; top: 4px; bottom: 4px;
  background: var(--arise-red);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex; align-items:center; justify-content:center;
}
.search-suggestions{
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-med);
  max-height: 360px;
  overflow-y: auto;
  z-index: 1200;
  display: none;
}
.search-suggestions.show{ display: block; }
.search-suggestions .sugg-item{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 1rem;
  border-bottom:1px solid var(--border-color);
  cursor:pointer;
}
.search-suggestions .sugg-item:hover{ background: var(--bg-light); }
.search-suggestions .sugg-item img{ width:40px; height:40px; object-fit:contain; background:#fff; border-radius:6px; }
.search-suggestions .sugg-empty{ padding:1.5rem; text-align:center; color:var(--text-muted); }

.header-icons a{
  width:42px; height:42px;
  border-radius: 50%;
  border:1.5px solid var(--border-color);
  display:flex; align-items:center; justify-content:center;
  color: var(--arise-red);
  font-size:1.05rem;
  transition:.2s;
}
.header-icons a:hover{ background: var(--arise-red); color:#fff; border-color:var(--arise-red); }
.header-icons .whatsapp-icon{ color:#25D366; }
.header-icons .whatsapp-icon:hover{ background:#25D366; color:#fff; border-color:#25D366; }

/* "Our Legacy" pill button - sits beside the phone/whatsapp/enquiry icons */
a.btn-legacy{
  width: auto !important;
  height: auto !important;
  border-radius: 30px !important;
  border: none !important;
  background: linear-gradient(135deg, var(--arise-red) 0%, var(--arise-red-dark) 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  padding: .55rem 1.15rem !important;
  line-height: 1.2 !important;
  gap: .4rem;
  box-shadow: 0 4px 14px rgba(215,25,32,.32);
  white-space: nowrap;
  text-decoration: none !important;
  transition: all .25s ease;
}
a.btn-legacy i{ font-size: .95rem !important; color:#fff !important; }
a.btn-legacy:hover{
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(215,25,32,.42);
  background: linear-gradient(135deg, var(--arise-red-dark) 0%, var(--arise-red-dark) 100%) !important;
  color: #fff !important;
}

/* ---------- Navigation ---------- */
.main-nav{
  background: var(--white);
  border-top: 1px solid var(--border-color);
}
.main-nav .navbar-nav > .nav-item > .nav-link{
  color: var(--text-dark);
  font-weight: 600;
  font-size: .92rem;
  padding: .9rem 1rem !important;
  position: relative;
}
.main-nav .navbar-nav > .nav-item > .nav-link:hover,
.main-nav .navbar-nav > .nav-item.active > .nav-link{
  color: var(--arise-red);
}
.dropdown-menu{
  border:none;
  box-shadow: var(--shadow-med);
  border-radius: var(--radius);
  padding: .6rem 0;
}
.dropdown-item{ padding:.5rem 1.25rem; font-size:.9rem; }
.dropdown-item:hover{ background: var(--bg-light); color: var(--arise-red); }
.inverter-menu-item,
.mobile-inverter-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
}
.inverter-menu-disabled{
  color:#90949a;
  cursor:not-allowed;
  user-select:none;
}
.inverter-menu-disabled:hover{ color:#90949a; background:transparent; }
.inverter-status{
  flex:0 0 auto;
  padding:.18rem .48rem;
  border-radius:999px;
  background:#f1f2f4;
  color:#7b8087;
  font-size:.62rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.2px;
  text-transform:uppercase;
}
.inverter-status.is-live{ background:rgba(215,25,32,.1); color:var(--arise-red); }
.mobile-inverter-list{ display:grid; grid-template-columns:1fr 1fr; gap:.35rem .75rem; }
.mobile-inverter-item{ padding:.4rem 0; font-size:.82rem; }
.mega-menu{
  padding: 1.5rem;
  border-radius: var(--radius);
}
.mega-menu h6{ color: var(--arise-red); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.5px;}

@media(min-width: 992px){
  /* .container becomes the positioning context for the nav row, so dropdowns
     (including full-width mega menus on items with .position-static) always
     align to the site's content width instead of jumping to <header>. */
  .main-nav .container{ position: relative; }

  .main-nav .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    display: none;
  }
  .main-nav .dropdown.position-static > .dropdown-menu.mega-menu{
    left: 0;
    right: 0;
    width: auto;
  }

  .main-nav .dropdown:hover > .dropdown-menu,
  .main-nav .dropdown:focus-within > .dropdown-menu{
    display: block;
  }
}

/* mobile offcanvas */
.mobile-drawer .offcanvas-header{ background: var(--arise-red); color:#fff; }
.mobile-drawer .accordion-button{ font-weight:600; }
.mobile-drawer .accordion-button:not(.collapsed){ color: var(--arise-red); background: var(--bg-light); }

/* Sticky top spacer to prevent layout shift when header goes fixed */
.header-spacer{ display:none; }
.header-spacer.active{ display:block; }

/* ---------- Section heading ---------- */
.section-heading{ margin-bottom: 2.5rem; }
.tagline, .section-heading .tagline{
  display: inline-block;
  color: var(--arise-red);
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: .8rem;
}
.section-heading h2{
  font-weight: 800;
  color: var(--text-dark);
  margin-top:.4rem;
}
.section-heading p{ color: var(--text-muted); max-width:700px; }

/* ---------- Hero slider ---------- */
.hero-slider{ position: relative; }
.hero-slide{
  height: 600px;
  display:flex;
  align-items:center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #4b4b4e 0%, #68686c 100%);
}
/* Blurred, zoomed copy of the same image fills the frame edge-to-edge so there
   is never empty letterbox space, without cropping the real image below */
.hero-slide-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(.55) saturate(1.15);
  transform: scale(1.2);
  z-index: 0;
}
/* Real image, shown in full (object-fit:contain never crops) */
.hero-slide-img{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.hero-slide::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(8,8,10,.88) 0%, rgba(12,12,14,.76) 32%, rgba(10,10,12,.30) 58%, rgba(0,0,0,0) 76%);
  z-index: 2;
}
.hero-slide .container{ position: relative; z-index: 3; }
.hero-slide .hero-eyebrow{
  color:#ffc247;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:.85rem;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}
.hero-slide h1,
.hero-slide h2.h1{
  color:#fff;
  font-weight:800;
  font-size:2.8rem;
  max-width:640px;
  line-height:1.18;
  text-shadow:0 3px 14px rgba(0,0,0,.9);
}
.hero-slide p{
  color:#fff;
  max-width:590px;
  font-size:1.08rem;
  font-weight:500;
  line-height:1.55;
  text-shadow:0 2px 10px rgba(0,0,0,.95);
}
@media(max-width:767px){
  .hero-slider,
  .hero-slider .swiper{ overflow:hidden; }
  .hero-slide{
    height:560px;
    align-items:flex-end;
    padding:0 0 54px;
  }
  .hero-slide-img{
    object-position:78% center;
  }
  .hero-slide-bg{
    background-position:78% center;
    filter:blur(20px) brightness(.48) saturate(1.05);
  }
  .hero-slide::before{
    background:linear-gradient(180deg, rgba(15,15,17,.28) 0%, rgba(28,28,31,.70) 36%, rgba(35,35,38,.96) 100%);
  }
  .hero-slide .container{
    width:100%;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;
    overflow:hidden;
  }
  .hero-slide .hero-eyebrow{
    font-size:.7rem;
    letter-spacing:.8px;
    white-space:normal;
  }
  .hero-slide h1, .hero-slide h2.h1{
    font-size:1.72rem;
    line-height:1.16;
    margin-bottom:.7rem;
  }
  .hero-slide p{
    font-size:.88rem;
    line-height:1.42;
    margin-bottom:0;
  }
  .hero-slide .d-flex{
    display:grid !important;
    grid-template-columns:1fr;
    width:100%;
    gap:10px !important;
    margin-top:16px !important;
  }
  .hero-slide .d-flex .btn-arise,
  .hero-slide .d-flex .btn-arise-outline{
    width:100%;
    min-width:0;
    justify-content:center;
    text-align:center;
    padding:.72rem 1rem;
  }
  .hero-slider .swiper-button-next,
  .hero-slider .swiper-button-prev{ display:none; }
  .hero-slider .swiper-pagination{ bottom:14px !important; }
}
.hero-slider .swiper-button-next, .hero-slider .swiper-button-prev{ color:#fff; }
.hero-slider .swiper-pagination-bullet{ background:#fff; opacity:.6; }
.hero-slider .swiper-pagination-bullet-active{ background: var(--arise-red); opacity:1; }

/* ---------- Featured solar panel visual ---------- */
.panel-highlight-row{ align-items:stretch; }
.panel-highlight-row > [class*="col-"]{ display:flex; flex-direction:column; }
.featured-panel-visual{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:repeat(2, minmax(0, 1fr));
  gap:14px;
  padding:16px;
  background:#f7f8fa;
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  box-shadow:var(--shadow-med);
  overflow:hidden;
}
.featured-panel-image,
.featured-panel-video{
  min-height:0;
  margin:0;
  border-radius:12px;
  overflow:hidden;
}
.featured-panel-image{
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  background:#fff;
  border:1px solid #e5e7eb;
}
.featured-panel-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.featured-panel-image figcaption,
.featured-video-caption{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  color:#26313a;
  background:#fff;
  border-top:1px solid #edf0f2;
  font-size:.8rem;
  font-weight:700;
}
.featured-panel-image figcaption i{ color:var(--arise-red); }
.featured-panel-video{
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  background:#101820;
  border:1px solid #182933;
}
.featured-panel-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#fff;
}
.featured-video-caption{
  color:#fff;
  background:#13212a;
  border-top:1px solid rgba(255,255,255,.12);
}
.featured-video-caption i{ color:#f7c948; }
@media(min-width:768px){
  .panel-highlight-row > [class*="col-"]{ justify-content:center; }
  .featured-panel-visual{ flex:none; height:676px; }
}
@media(max-width:767px){
  .panel-highlight-row > [class*="col-"]{ display:block; }
  .featured-panel-visual{ grid-template-columns:1fr; grid-template-rows:repeat(2, minmax(260px, auto)); gap:14px; padding:14px; }
}

/* ---------- Cards ---------- */
.product-card, .plant-card, .blog-card, .gallery-card, .video-card, .scheme-card{
  background:#fff;
  border:1px solid var(--border-color);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  transition: all .3s ease;
  height:100%;
}
.product-card:hover, .plant-card:hover, .blog-card:hover, .scheme-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-med), inset 0 3px 0 var(--arise-red);
}
.product-card .img-wrap, .plant-card .img-wrap, .scheme-card .img-wrap{
  overflow:hidden; height:auto !important; background:#fff;
}
.product-card .img-wrap img, .plant-card .img-wrap img, .scheme-card .img-wrap img{
  width:100%; height:auto !important; display:block; transition: transform .5s ease;
}
.product-card:hover img, .plant-card:hover img, .scheme-card:hover img{ transform: scale(1.08); }
.badge-solar{ background: rgba(245,166,35,.15); color:#b0700f; font-weight:600; font-size:.72rem; }

/* Disabled nav items (features not launched yet) - looks intentional, not broken */
.nav-link-disabled{
  color: var(--text-muted) !important;
  cursor: default;
  pointer-events: none;
  opacity: .8;
}
.badge-soon{
  display: inline-block;
  background: var(--solar-accent);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: .18rem .5rem;
  border-radius: 10px;
  margin-left: .4rem;
  vertical-align: middle;
  line-height: 1.4;
}
.card-body-custom{ padding:1.25rem; }
.blog-card .img-wrap{height:220px !important;overflow:hidden;background:#f4f6f8;}
.blog-card .img-wrap img{display:block;width:100%;height:100% !important;object-fit:cover;object-position:center;}
.blog-card .card-body-custom{position:relative;z-index:1;background:#fff;}
.blog-sidebar{position:sticky;top:145px;}.blog-sidebar-card{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:1.35rem;margin-bottom:1rem;}.blog-sidebar-card h3{font-size:1.05rem;font-weight:800;}.blog-related-links a{display:block;padding:.55rem 0;border-bottom:1px solid #edf0f2;font-size:.88rem;font-weight:600;color:var(--text-dark);}@media(max-width:991px){.blog-sidebar{position:static;margin-top:2rem;}}
.price-tag{ color: var(--arise-red); font-weight:700; }

/* Coming Soon page (e.g. Solar Load calculator) */
.coming-soon-card{
  max-width: 640px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 3.5rem 2.5rem;
}
.coming-soon-icon{
  width: 88px; height: 88px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: rgba(215,25,32,.08);
  color: var(--arise-red);
  font-size: 2.2rem;
  display: flex; align-items: center; justify-content: center;
}
.coming-soon-pill{ margin-left: 0; font-size: .68rem; padding: .3rem .75rem; }
@media (max-width: 575px){
  .coming-soon-card{ padding: 2.5rem 1.25rem; }
}

/* Spec tables inside product cards - subtle zebra striping, quieter labels */
.product-card table.table th{ color: var(--text-muted); font-size:.82rem; }
.product-card table.table td{ font-weight:500; font-size:.85rem; }
.product-card table.table tbody tr:nth-child(even){ background: rgba(0,0,0,.02); }

/* Filter / category toolbar (the row of "All / DCR / TOPCon..." pill
   buttons on list pages) - wrap it like a proper toolbar instead of
   buttons floating loosely on the page background */
.d-flex.flex-wrap:has(> [data-tab-filter]){
  background:#fff;
  border:1px solid var(--border-color);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  box-shadow: var(--shadow-soft);
}

/* Why choose us icons */
.why-item{ text-align:center; padding: 1.5rem 1rem; }
.why-item .icon-circle{
  width:72px; height:72px; margin:0 auto 1rem;
  border-radius:50%;
  background: rgba(215,25,32,.08);
  display:flex; align-items:center; justify-content:center;
  color: var(--arise-red); font-size:1.7rem;
}
.why-item h5{ font-weight:700; font-size:1rem; }
.why-item p{ color: var(--text-muted); font-size:.88rem; }

/* Process section */
.process-track{ position:relative; }
.process-step{ text-align:center; position:relative; padding-top:2rem; }
.process-step .step-num{
  width:52px; height:52px; border-radius:50%;
  background: var(--arise-red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; margin:0 auto 1rem; position:relative; z-index:2;
}
.process-step h6{ font-weight:700; font-size:.9rem; }
.process-step p{ font-size:.8rem; color:var(--text-muted); }
@media(min-width:992px){
  .process-track::before{
    content:''; position:absolute; top:2rem; left:5%; right:5%;
    height:2px; background: var(--border-color); z-index:1;
  }
}

/* CTA banner */
.cta-banner{
  background: var(--arise-red);
  color:#fff;
  border-radius: var(--radius);
  padding: 3rem;
}
.cta-banner h2{ font-weight:800; }
.epc-banner{
  background: var(--text-dark);
  color:#fff;
  border-radius: var(--radius);
  padding: 2.5rem;
}
.epc-banner .epc-feature{ font-size:.85rem; color:#ddd; }
.epc-banner .epc-feature i{ color: var(--solar-accent); margin-right:.4rem; }

/* Testimonials */
.testimonial-card{
  background:#fff; border:1px solid var(--border-color); border-radius: var(--radius);
  padding:2rem; box-shadow: var(--shadow-soft); height:100%;
}
.testimonial-card .stars{ color: var(--solar-accent); }
.testimonial-card .cust-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; }

/* FAQ */
.faq-accordion .accordion-item{ border:none; border-bottom:1px solid var(--border-color); }
.faq-accordion .accordion-button{ font-weight:600; padding:1.1rem 0; }
.faq-accordion .accordion-button:not(.collapsed){ color: var(--arise-red); background:transparent; box-shadow:none; }
.faq-accordion .accordion-button:focus{ box-shadow:none; }
.faq-accordion .accordion-body{ padding: 0 0 1.2rem; color: var(--text-muted); }

/* Footer */
.site-footer{ background:#4b4b4e; color:#f1f1f1; padding-top:3.5rem; }
.site-footer h6{ color:#fff; font-weight:700; margin-bottom:1.2rem; text-transform:uppercase; font-size:.85rem; letter-spacing:.5px; }
.site-footer a{ color:#bbb; }
.site-footer a:hover{ color: var(--solar-accent); }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer ul li{ margin-bottom:.6rem; font-size:.9rem; }
.site-footer .footer-bottom{ background:#3e3e41; padding:1rem 0; margin-top:2.5rem; font-size:.82rem; }
.social-icons a{
  width:36px; height:36px; border-radius:50%;
  background:#2a2a2a; display:inline-flex; align-items:center; justify-content:center;
  margin-right:.5rem;
}
.social-icons a:hover{ background: var(--arise-red); color:#fff; }

/* Floating buttons */
.floating-btns{ position:fixed; right:20px; bottom:24px; z-index:1050; display:flex; flex-direction:column; gap:12px; align-items:center; }
.fab{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem; box-shadow: var(--shadow-med);
  transition:.2s;
}
.fab:hover{ transform: scale(1.08); }
.fab-facebook{ background:#1877F2; }
.fab-instagram{ background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.fab-whatsapp{ background:#25D366; }
.fab-enquiry{ background: var(--arise-red); }
.back-to-top{
  width:44px; height:44px; border-radius:50%;
  background:#4b4b4e; color:#fff; display:none;
  align-items:center; justify-content:center; font-size:1.1rem;
  position:fixed; right:90px; bottom:24px; z-index:1051; box-shadow: var(--shadow-med);
}
.back-to-top.show{ display:flex; }

/* Side brand tab - Enquiry Now (desktop only, mobile already has quickbar) */
.side-enquiry-tab{
  position: fixed;
  top: 45%;
  right: -55px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  background: var(--arise-red);
  color: #fff !important;
  padding: .65rem 1.3rem;
  border-radius: 8px 8px 0 0;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .4px;
  z-index: 1045;
  box-shadow: var(--shadow-med);
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  transition: right .2s ease, background .2s ease;
}
.side-enquiry-tab:hover{
  background: var(--arise-red-dark);
  right: -45px;
}

/* Mobile quick call bar */
.mobile-quickbar{
  position:fixed; bottom:0; left:0; right:0; z-index:1040;
  background:#fff; border-top:1px solid var(--border-color);
  display:none; box-shadow: 0 -4px 15px rgba(0,0,0,.06);
}
.mobile-quickbar a{
  flex:1; text-align:center; padding:.7rem 0; font-size:.78rem; font-weight:600; color:var(--text-dark);
}
.mobile-quickbar a i{ display:block; font-size:1.15rem; margin-bottom:2px; }
.mobile-quickbar a.call-btn i{ color: var(--arise-red); }
.mobile-quickbar a.whatsapp-btn i{ color:#25D366; }
.mobile-quickbar a.enquiry-btn i{ color: var(--solar-accent); }
@media(max-width:767px){
  .mobile-quickbar{ display:flex; }
  body{ padding-bottom:58px; }
}

/* Cookie notice */
.cookie-notice{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1060;
  background:#fff; border:1px solid var(--border-color); border-radius: var(--radius);
  box-shadow: var(--shadow-med); padding:1rem 1.25rem;
  display:none; max-width:560px;
}
.cookie-notice.show{ display:flex; }

/* Breadcrumb / list-page header band */
.breadcrumb-bar{
  background: linear-gradient(135deg, var(--bg-light) 0%, #fdfdfd 100%);
  padding: 1.6rem 0;
  border-bottom:1px solid var(--border-color);
  position: relative;
}
.breadcrumb-bar .breadcrumb{ margin:0; font-size:.85rem; }
.breadcrumb-bar .breadcrumb-item.active{ color: var(--arise-red); font-weight:600; }
.breadcrumb-bar h1{
  font-size:1.7rem; font-weight:800; margin-top:.5rem; padding-bottom:.7rem; position:relative; display:inline-block;
}
.breadcrumb-bar h1::after{
  content:''; position:absolute; left:0; bottom:0; width:54px; height:3px;
  background: var(--arise-red); border-radius:2px;
}

/* Calculator */
.calc-card{ background:#fff; border:1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.calc-row .form-select, .calc-row .form-control{ font-size:.88rem; }
.calc-result{
  background: var(--bg-light);
  border:1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.calc-result .result-item{
  display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px dashed var(--border-color); font-size:.9rem;
}
.calc-result .result-item:last-child{ border-bottom:none; }
.calc-result .result-value{ font-weight:700; color: var(--arise-red); }
.calc-highlight{
  background: rgba(245,166,35,.12);
  border:1px solid rgba(245,166,35,.4);
  border-radius: var(--radius);
  padding:1.2rem;
  color:#8a5a0f;
}

/* Empty state */
.empty-state{ text-align:center; padding:3rem 1rem; color: var(--text-muted); }
.empty-state i{ font-size:2.6rem; color: var(--border-color); margin-bottom:1rem; }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--arise-red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Table scroll on mobile */
.table-responsive-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Utility spacing */
.section-py{ padding: 4.5rem 0; }
@media(max-width:767px){ .section-py{ padding: 2.75rem 0; } }

/* =========================================================
   MOBILE RESPONSIVE FIXES
   ========================================================= */

/* Stop AOS fade-left/fade-right (and similar) scroll-reveal animations from
   sliding content in from off-screen on small screens - on full-width mobile
   columns this made whole sections visibly shift/slide right-to-left and
   could feel broken. Below tablet width, content simply appears (no slide). */
@media (max-width: 991px){
  [data-aos]{
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Footer: 2-column (left / right) grid on mobile instead of one long
   stacked column, plus tighter spacing so it reads as compact/professional */
@media (max-width: 767px){
  .site-footer{ padding-top:2.5rem; }
  .site-footer .row > [class*="col-"]{ margin-bottom:1.75rem; }
  .site-footer h6{ margin-bottom:.8rem; font-size:.8rem; }
  .site-footer ul li{ margin-bottom:.45rem; font-size:.85rem; }
  .site-footer .footer-bottom{ text-align:center; }
  .site-footer .footer-bottom .container{ flex-direction:column; align-items:center; gap:.6rem; }
}

/* Multi-button rows (Enquiry Now / Buy Now / Datasheet / View Details etc.):
   these are plain ".d-flex.flex-wrap.gap-*" wrappers around .btn-arise /
   .btn-arise-outline / .btn-arise-dark buttons of varying text length, which
   wrapped raggedly (uneven widths, uneven left/right alignment) on small
   screens. Give every such row consistent alignment: */
.d-flex.flex-wrap.gap-2 > .btn-arise, .d-flex.flex-wrap.gap-2 > .btn-arise-outline, .d-flex.flex-wrap.gap-2 > .btn-arise-dark,
.d-flex.flex-wrap.gap-3 > .btn-arise, .d-flex.flex-wrap.gap-3 > .btn-arise-outline, .d-flex.flex-wrap.gap-3 > .btn-arise-dark{
  justify-content: center;
}
@media (max-width: 575px){
  /* Larger CTA rows (2-3 full-size buttons): stack one-per-line, full width,
     so text never gets cut off and every button lines up on the same edges */
  .d-flex.flex-wrap.gap-3 > .btn-arise:not(.btn-sm),
  .d-flex.flex-wrap.gap-3 > .btn-arise-outline:not(.btn-sm),
  .d-flex.flex-wrap.gap-3 > .btn-arise-dark:not(.btn-sm){
    flex: 1 1 100%;
    width: 100%;
  }
  /* Smaller pill/tag rows (filters, product-card actions, related categories):
     keep them inline and wrapping, just make sure each pill's content is
     centered so mixed short/long labels still look tidy side by side */
  .d-flex.flex-wrap.gap-2 > .btn-arise.btn-sm,
  .d-flex.flex-wrap.gap-2 > .btn-arise-outline.btn-sm,
  .d-flex.flex-wrap.gap-2 > .btn-arise-dark.btn-sm{
    flex: 1 1 auto;
  }
}

/* Enquiry / site-survey modal forms: shorter, tighter form on mobile so it
   doesn't feel like a long scroll - trims spacing without removing fields */
@media (max-width: 575px){
  .modal-dialog{ margin:.75rem; }
  .modal-header{ padding:.9rem 1rem; }
  .modal-body{ padding:1rem; max-height:80vh; overflow-y:auto; }
  .modal-body .mb-3{ margin-bottom:.65rem !important; }
  .modal-body .form-label{ margin-bottom:.2rem; font-size:.85rem; }
  .modal-body .form-control,
  .modal-body .form-select{ padding:.5rem .7rem; font-size:.9rem; }
  .modal-body textarea.form-control{ min-height:60px; }
  .modal-title{ font-size:1.05rem; }
}

/* =========================================================
   PRODUCT DETAIL PAGE - premium presentation
   ========================================================= */
.pd-media{
  position: relative;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
}
.pd-media img{
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}
.pd-trust-strip{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.pd-trust-strip > div{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .45rem;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: .6rem .7rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-muted);
}
.pd-trust-strip i{ color: var(--arise-red); font-size: 1rem; }
.pd-subheading{
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--border-color);
  position: relative;
}
.pd-subheading::after{
  content:'';
  position:absolute; left:0; bottom:-2px;
  width:30px; height:2px;
  background: var(--arise-red);
}
.pd-spec-table th{ color: var(--text-muted); font-weight:500; }
.pd-spec-table td{ font-weight:600; color: var(--text-dark); }
.pd-spec-table tbody tr:nth-child(even){ background: rgba(0,0,0,.02); }
@media (max-width: 575px){
  .pd-trust-strip{ flex-direction: column; }
}

/* =========================================================
   PAGE SIDEBAR (list & product-detail pages)
   Right-hand column: Contact Us / Enquiry Now / Find Us In
   ========================================================= */
@media (min-width: 992px){
  .page-sidebar{ position: sticky; top: 96px; }
}

.sidebar-widget{
  background:#fff;
  border:1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: box-shadow .25s ease;
}
.sidebar-widget:hover{ box-shadow: var(--shadow-med); }
.sidebar-widget h5{
  font-weight: 800;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 1.1rem;
  padding-bottom: .65rem;
  position: relative;
}
.sidebar-widget h5::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:36px; height:3px;
  background: var(--arise-red);
  border-radius:2px;
}

/* --- Widget 1: Contact Us --- */
.sidebar-contact ul{ list-style:none; padding:0; margin:0 0 1.2rem; }
.sidebar-contact li{
  display:flex; align-items:flex-start; gap:.65rem;
  margin-bottom:.9rem; font-size:.86rem; color: var(--text-muted);
}
.sidebar-contact li:last-child{ margin-bottom:0; }
.sidebar-contact li i{ color: var(--arise-red); font-size:1rem; margin-top:.15rem; flex-shrink:0; }
.sidebar-contact li a{ color: var(--text-dark); font-weight:600; }
.sidebar-contact li a:hover{ color: var(--arise-red); }

/* --- Widget 2: Enquiry Now (brand CTA card) --- */
.sidebar-enquiry{
  background: linear-gradient(150deg, var(--arise-red) 0%, var(--arise-red-dark) 100%);
  border: none;
  color: #fff;
  text-align: center;
}
.sidebar-enquiry h5{ color:#fff; }
.sidebar-enquiry h5::after{ left:50%; transform: translateX(-50%); background:#fff; }
.sidebar-enquiry p{ color: rgba(255,255,255,.88); font-size:.86rem; margin-bottom:1.2rem; }
.btn-white-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; color: var(--arise-red); font-weight:700;
  padding:.65rem 1.6rem; border-radius:6px;
  border:1.5px solid #fff; transition: all .25s ease;
}
.btn-white-cta:hover{ background:transparent; color:#fff; }

/* --- Widget 3: Find Us In (area-wise distributor links) --- */
.sidebar-areas ul{
  list-style:none; padding:0; margin:0;
  max-height:320px; overflow-y:auto;
}
.sidebar-areas li{ border-bottom:1px dashed var(--border-color); }
.sidebar-areas li:last-child{ border-bottom:none; }
.sidebar-areas a{
  display:flex; align-items:center; gap:.55rem;
  padding:.6rem .1rem; font-size:.84rem; color: var(--text-dark);
  transition: all .15s ease;
}
.sidebar-areas a i{ color: var(--arise-red); font-size:.8rem; flex-shrink:0; }
.sidebar-areas a:hover{ color: var(--arise-red); padding-left:.35rem; }
.sidebar-areas ul::-webkit-scrollbar{ width:5px; }
.sidebar-areas ul::-webkit-scrollbar-thumb{ background: var(--border-color); border-radius:4px; }

@media (max-width: 991px){
  .page-sidebar{ margin-top: 2.5rem; }
}

@media (max-width: 767px){
  .back-to-top{ bottom:80px; left:12px; right:auto; width:40px; height:40px; z-index:1052; }
  .floating-btns{
    display:flex;
    right:10px;
    bottom:76px;
    gap:8px;
    z-index:1051;
  }
  .floating-btns .fab{
    width:42px;
    height:42px;
    font-size:1.05rem;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
  }
}

.contact-map-full{width:100vw;height:420px;margin-left:calc(50% - 50vw);}

/* =========================================================
   SITE-WIDE RESPONSIVE HARDENING
   ========================================================= */
html, body{ max-width:100%; overflow-x:hidden; }
.site-footer a,
.sidebar-contact a{ overflow-wrap:anywhere; word-break:break-word; }
iframe, video, svg{ max-width:100%; }
.table{ width:100%; }

@media(max-width:767px){
  .container{ padding-left:16px; padding-right:16px; }
  .section-py{ padding:2.5rem 0; }
  .section-heading{ margin-bottom:1.75rem; }
  .section-heading h2{ font-size:clamp(1.45rem, 7vw, 1.9rem); line-height:1.22; }
  .breadcrumb-bar{ padding:1.2rem 0; }
  .breadcrumb-bar .breadcrumb{ flex-wrap:wrap; row-gap:.25rem; }
  .breadcrumb-bar h1{ font-size:clamp(1.35rem, 6.5vw, 1.7rem); line-height:1.25; overflow-wrap:anywhere; }
  .btn-arise,.btn-arise-outline,.btn-arise-dark,.btn-white-cta{
    max-width:100%; white-space:normal; text-align:center; justify-content:center;
  }
  .product-card,.plant-card,.blog-card,.gallery-card,.video-card,.scheme-card{ max-width:100%; }
  .card-body-custom{ padding:1rem; }
  .table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .calc-result{ padding:1rem; }
  .calc-result .result-item{ gap:1rem; align-items:flex-start; }
  .calc-result .result-value{ text-align:right; overflow-wrap:anywhere; }
  .cookie-notice{ left:10px; right:10px; bottom:70px; padding:.9rem; max-width:none; }
  .cookie-notice.show{ flex-direction:column; align-items:stretch; gap:.75rem; }
  .cookie-notice .d-flex{ width:100%; }
  .cookie-notice button{ flex:1; justify-content:center; }
  .offcanvas{ max-width:90vw; }
  .contact-map-full{ height:300px; }
  .site-footer .col-12:first-child a{ display:inline-block; max-width:100%; }
  .main-header .container{ padding-left:14px; padding-right:14px; }
  .site-logo img{ max-width:185px; height:auto; }
}

@media(max-width:375px){
  .site-logo img{ max-width:165px; }
  .header-icons{ gap:.25rem !important; }
  .header-icons > a,
  .header-icons > button{ width:38px !important; height:38px !important; }
  .d-flex.gap-2 > .btn-arise.btn-sm,
  .d-flex.gap-2 > .btn-arise-outline.btn-sm,
  .d-flex.gap-2 > .btn-arise-dark.btn-sm{ flex:1 1 100% !important; width:100%; }
  .mobile-quickbar a{ font-size:.72rem; padding:.6rem 0; }
  .floating-btns{ right:6px; gap:6px; }
  .floating-btns .fab{ width:36px; height:36px; font-size:.92rem; }
  .back-to-top{ left:8px; width:36px; height:36px; }
}