:root{
  --red:#b71c1c;
  --dark:#111;
  --grey:#6b6b6b;
  --light:#f7f7f7;
  --white:#ffffff;
  --overlay: rgba(11,11,11,0.35);
}
*{box-sizing:border-box}
body{font-family: 'Segoe UI', Roboto, Arial, sans-serif; margin:0; color:var(--dark); background:var(--light); line-height:1.5;}
.wrap{width:92%; max-width:1200px; margin:0 auto;}
a{color:var(--red); text-decoration:none;}

/* Header */
.site-header{background:linear-gradient(90deg,var(--dark) 0%, #222 100%); color:#fff; position:sticky; top:0; z-index:60; box-shadow:0 3px 12px rgba(0,0,0,0.12);}
.header-inner{display:flex; align-items:center; gap:20px; padding:12px 0; justify-content:space-between;}
.logo{height:56px;}
.main-nav ul{display:flex; gap:18px; margin:0; padding:0; list-style:none;}
.main-nav a{color:#fff; font-weight:600; font-size:0.95rem;}
.nav-toggle{display:none; background:transparent; border:0; color:#fff; font-size:1.4rem;}

/* HERO / SLIDER */
.hero{position:relative; overflow:hidden; margin-bottom:28px;}
.carousel{position:relative; min-height:520px; background:#000;}
.slides{position:relative; height:100%; width:100%;}
.slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.03); transition:opacity 900ms ease, transform 900ms ease, filter 900ms ease; will-change:opacity, transform;}
.slide.active{opacity:1; transform:scale(1); filter:contrast(1.03) saturate(1.05);}
.overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(183,28,28,0.15), rgba(11,11,11,0.55)); mix-blend-mode:multiply;}
.slide-inner{display:flex; gap:28px; align-items:center; padding:64px 0;}
.slide-text{flex:1; color:var(--white); max-width:720px;}
.slide-text h1{font-size:2.4rem; margin:0 0 12px; line-height:1.02; text-shadow:0 6px 20px rgba(0,0,0,0.45);}
.lead{color:rgba(255,255,255,0.95); margin-bottom:18px; font-size:1.05rem;}
.cta .btn{margin-right:12px;}
.btn{display:inline-block; padding:12px 18px; border-radius:6px; text-decoration:none; font-weight:700;}
.primary{background:var(--red); color:#fff; border:2px solid rgba(0,0,0,0.08); box-shadow:0 8px 30px rgba(183,28,28,0.12);}
.ghost{background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.14); backdrop-filter: blur(2px);}

/* ensure fallback img loads while keeping background-image visual */
.slide .slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

/* slide info (ticks) */
.slide-info{width:320px; color:#fff;}
.ticks{list-style:none; padding:0; margin:0;}
.ticks li{padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-weight:700;}

/* arrows & dots */
.arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:30; background:rgba(255,255,255,0.06); color:#fff; border:0; width:56px; height:56px; border-radius:50%; font-size:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s;}
.arrow:hover{background:rgba(255,255,255,0.12);}
.prev{left:18px;}
.next{right:18px;}
.dots{position:absolute; left:50%; transform:translateX(-50%); bottom:18px; display:flex; gap:10px; z-index:30;}
.dot{width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,0.28); border:2px solid rgba(0,0,0,0.08); cursor:pointer;}
.dot.active{background:var(--red); box-shadow:0 6px 20px rgba(183,28,28,0.18);}

/* rest content */
.quick-products{padding:26px 0;}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px;}
.card{background:var(--white); border-radius:8px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,0.06); text-decoration:none; color:var(--dark); transition:transform 0.3s, box-shadow 0.3s;}
.card img{width:100%; height:200px; object-fit:cover;}
.card-body{padding:12px 14px;}
.card h3{margin:0 0 8px;}
.card p{margin:0; color:var(--grey);}

/* services */
.services-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; padding:18px 0;}
.service-card{background:var(--white); padding:12px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,0.06); text-align:center;}
.service-card img{width:100%; height:160px; object-fit:cover; border-radius:6px;}
.service-card h4{margin:12px 0 6px; color:var(--dark);}
.service-card p{color:var(--grey); font-size:0.95rem;}

/* brand strip & footer */
.brand-strip{background:var(--dark); color:#fff; padding:18px 0; margin-top:20px;}
.brand-strip h2{margin:0; text-align:center;}
.site-footer{background:#e9e9e9; color:var(--dark); padding:28px 0; margin-top:18px;}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:18px; align-items:start; width:92%; max-width:1200px; margin:0 auto;}
.footer-logo{height:48px; margin-bottom:8px;}
.footer-bottom{border-top:1px solid rgba(0,0,0,0.06); padding-top:12px; margin-top:12px; text-align:center; color:var(--grey)}

/* responsiveness */
@media (max-width:900px){
  .slide-inner{flex-direction:column; padding:28px 0;}
  .slide-info{width:100%; order:2;}
  .slide-text{order:1;}
  .logo{height:48px;}
  .arrow{width:44px; height:44px; font-size:22px;}
  .dots{bottom:12px;}
  .card img{height:160px;}
}

.all-products-box { display:block; }
.ap-small { display:inline-flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,0.06); text-decoration:none; transition:transform 220ms ease, box-shadow 220ms ease; border:1px solid rgba(0,0,0,0.04); }
.ap-small:hover, .ap-small:focus { transform:translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,0.12); outline:none; }
.ap-tick { width:40px; height:40px; min-width:40px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#fff; color:#1fa44a; border:1px solid rgba(0,0,0,0.06); box-shadow:0 6px 18px rgba(0,0,0,0.04); }
.ap-tick-svg { width:20px; height:20px; }
.ap-label { font-weight:700; color:#111; font-size:1rem; }
@media (max-width:900px) { .ap-small { padding:10px 12px; } .ap-label { font-size:0.95rem; } }

.all-products-box { display:flex; justify-content:center; }
.ap-small { font-size:1.1rem; padding:16px 22px; }
.ap-small { box-shadow:0 4px 10px rgba(0,0,0,0.25); } /* darker, thinner shadow */
.ap-small:hover, .ap-small:focus { transform:translateY(-6px); box-shadow:0 6px 14px rgba(0,0,0,0.35); }
.ap-label { transition:color 0.2s ease; }
.ap-small:hover .ap-label { color:#b71c1c; }
.ap-arrow { margin-left:12px; font-weight:900; color:#b71c1c; font-size:1.2em; }

/* All Products box should cover ~40% width */
.all-products-box { display:flex; justify-content:center; }
.ap-small { width:40%; justify-content:space-between; }

/* Product cards grid: 2 in a row */
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

/* Animate product boxes on hover */
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-8px) scale(1.02); box-shadow:0 12px 24px rgba(0,0,0,0.15); }

@media (max-width:768px){
  .cards { grid-template-columns:1fr; }
  .ap-small { width:100%; }
}

.ap-small { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.ap-small:hover, .ap-small:focus { transform: translateY(-8px) scale(1.02); box-shadow:0 12px 24px rgba(0,0,0,0.2); }

.card {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
  background:#fff;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card img {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 0 25px rgba(183,28,28,0.4), 0 12px 24px rgba(0,0,0,0.2);
}
.card:hover img {
  filter: brightness(1.08) saturate(1.1);
  transition: filter 0.35s ease;
}
.card-body {
  padding: 14px;
  text-align: center;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color:#111;
}
.card p {
  font-size:0.92rem;
  color:#555;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-items: center;
}
.card {
  max-width: 320px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.6s ease;
}
.card img {
  height: 160px;
  object-fit: cover;
  width: 100%;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.card.show {
  opacity: 1;
  transform: translateY(0);
}
.card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 0 25px rgba(183,28,28,0.35), 0 12px 24px rgba(0,0,0,0.2);
}
.card:hover img {
  filter: brightness(1.08) saturate(1.1);
}
.card-body {
  padding: 12px;
  text-align: center;
}
.card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #111;
}
.card p {
  font-size: 0.85rem;
  color: #555;
}
@media(max-width:768px){
  .cards { grid-template-columns: 1fr; }
}

/* All Products fade-in */
.all-products-box { opacity:0; transform:translateY(30px); transition:transform 0.6s ease, opacity 0.6s ease; }
.all-products-box.show { opacity:1; transform:translateY(0); }

/* Bigger product cards */
.card { max-width: 360px; }
.card img { height: 180px; }

/* Alternate hover effects */
.card.alt-hover:hover {
  transform: scale(1.05) rotate(1deg);
  box-shadow: 0 0 20px rgba(0,0,0,0.25), 0 0 35px rgba(183,28,28,0.3);
}
.card.alt-hover:hover img {
  filter: brightness(1.15) contrast(1.05);
}

/* Bigger product cards horizontally */
.cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.card { width: 100%; max-width: 420px; }

/* Alternate border colors */
.card:nth-child(odd) { border: 2px solid #b71c1c; } /* red */
.card:nth-child(even) { border: 2px solid #777; } /* grey */

/* New hover effect for alternate cards (zoom in/out pulse) */
.card.alt-hover { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.card.alt-hover:hover {
  animation: pulseZoom 0.8s forwards;
  box-shadow: 0 0 30px rgba(0,0,0,0.25), 0 0 45px rgba(183,28,28,0.3);
}
@keyframes pulseZoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.07); }
  100% { transform: scale(1.02); }
}

/* Red border for all cards */
.card { border: 2px solid #b71c1c; }

/* Zoom in/out pulse hover effect for all cards */
.card { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.card:hover {
  animation: pulseZoom 0.8s forwards;
  box-shadow: 0 0 28px rgba(183,28,28,0.35), 0 0 45px rgba(0,0,0,0.25);
}
@keyframes pulseZoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.07); }
  100% { transform: scale(1.02); }
}

/* Card titles in red */
.card h3 { color: #b71c1c; }

/* force red border on all product cards */
.card { border: 2px solid #b71c1c !important; box-shadow:none !important; }

/* support line styling */
.ap-support-line { padding:10px 0; }
.ap-support-line .support-text { color:#444; font-weight:600; margin:0; font-size:1rem; }

/* services: make them links and add overlay */
.service-link { text-decoration:none; display:block; border-radius:8px; overflow:hidden; }
.service-card { position:relative; transition: transform 0.35s ease, box-shadow 0.35s ease; }
.service-card img { width:100%; height:160px; object-fit:cover; border-radius:6px; display:block; }
.service-card .service-overlay {
  position:absolute; left:12px; right:12px; bottom:12px; background: linear-gradient(90deg, rgba(183,28,28,0.95), rgba(183,28,28,0.85));
  color:#fff; padding:10px 14px; border-radius:8px; transform: translateY(12px); opacity:0; transition: transform 0.28s cubic-bezier(.2,.9,.3,1), opacity 0.28s ease;
  display:flex; justify-content:center; align-items:center; font-weight:700;
}
.service-link:focus .service-overlay, .service-link:hover .service-overlay, .service-card:hover .service-overlay { transform: translateY(0); opacity:1; }

.service-link:focus .service-card, .service-link:hover .service-card, .service-card:hover { transform: translateY(-8px); box-shadow: 0 10px 30px rgba(0,0,0,0.16); }
.service-overlay span{font-size:0.98rem;}

/* brand strip background + overlay + contact CTA */
.brand-strip { background-size:cover; background-position:center; position:relative; padding:42px 0; color:#fff; }
.brand-strip .brand-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,11,11,0.55), rgba(183,28,28,0.12)); }
.brand-inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand-text h2 { margin:0; font-size:1.25rem; color:#fff; max-width:78%; }
.brand-contact .contact-cta { background:#b71c1c; color:#fff; padding:12px 18px; border-radius:6px; font-weight:800; text-decoration:none; box-shadow:0 8px 20px rgba(183,28,28,0.18); }
@media (max-width:900px) {
  .brand-inner { flex-direction:column; text-align:center; }
  .brand-text h2 { max-width:100%; font-size:1.05rem; }
  .brand-contact { margin-top:12px; }
}

/* ensure all-products-box fade-in behaviour */
.all-products-box { will-change: transform, opacity; }

.core-section { margin:50px auto; text-align:center; }
.core-heading { font-size:1.8rem; margin-bottom:30px; color:#111; }
.core-features { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature-box { background:#fff; padding:20px; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,0.08); transition:transform 0.3s ease, box-shadow 0.3s ease; }
.feature-box img { height:60px; width:auto; margin-bottom:12px; }
.feature-box h3 { margin:10px 0; font-size:1.1rem; font-weight:700; color:#b71c1c; }
.feature-box p { font-size:0.92rem; color:#555; }
.feature-box:hover { transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,0.18); }

@media(max-width:900px){
  .core-features { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .core-features { grid-template-columns:1fr; }
}

.feature-box { background:none; box-shadow:none; padding:10px; border-radius:0; }
.feature-box img { height:180px; width:100%; object-fit:cover; border:none; border-radius:10px; transition:transform 0.35s ease; }
.feature-box h3 { margin:12px 0 0; font-size:1.1rem; font-weight:700; color:#b71c1c; }
.feature-box:hover img { transform:scale(1.08); }

.core-section { margin:50px auto; text-align:center; }
.core-heading { font-size:1.8rem; margin-bottom:30px; color:#111; }
.core-grid-two { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.core-box { background:#fff; padding:20px; border-radius:10px; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.core-box img { width:100%; height:200px; object-fit:cover; border-radius:8px; transition:transform 0.35s ease; }
.core-box h3 { margin-top:12px; font-size:1.1rem; font-weight:700; color:#b71c1c; }
.core-box:hover { transform:translateY(-6px); box-shadow:0 10px 25px rgba(0,0,0,0.15); }
.core-box:hover img { transform:scale(1.08); }

@media(max-width:768px){
  .core-grid-two { grid-template-columns:1fr; }
}

.core-section { margin:50px auto; text-align:center; }
.core-heading { font-size:1.8rem; margin-bottom:30px; color:#111; }
.core-grid-two { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.core-img { position:relative; overflow:hidden; border-radius:10px; }
.core-img img { width:100%; height:240px; object-fit:cover; transition:transform 0.4s ease; display:block; }
.core-overlay { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); padding:12px; text-align:center; }
.core-overlay h3 { color:#fff; margin:0; font-size:1.2rem; font-weight:700; }
.core-img:hover img { transform:scale(1.1); }
@media(max-width:768px){
  .core-grid-two { grid-template-columns:1fr; }
  .core-img img { height:200px; }
}

/* Gradient overlay on hover */
.core-overlay { transition: background 0.3s ease; }
.core-img:hover .core-overlay { background:linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.3)); }

/* Header background color grey */
.site-header { background:#f0f0f0; }

/* Header fonts black */
.site-header, .site-header a { color:#000 !important; }
.main-nav a { color:#000 !important; }

/* Footer black with white text */
.site-footer { background:#111; color:#fff; }
.site-footer a { color:#fff; text-decoration:none; }
.site-footer h5 { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.2); margin-top:20px; padding-top:10px; }
.footer-img-col { text-align:right; }
.footer-extra-img { max-height:60px; }

/* Banner box for support line */
.banner-box {
  background: url('https://transparesindia.com/images/transformer%20pic.jpg') center/cover no-repeat;
  padding: 40px 20px;
  border-radius: 10px;
  color:#fff;
  font-size: 1.2rem;
  font-weight: 600;
  text-align:center;
}

/* Site background */
body { background:#f5f5f5; }

/* Footer style like SE.com */
.site-footer { background:#1a1a1a; color:#fff; }
.site-footer a { color:#fff; text-decoration:none; }
.site-footer a:hover { color:#b71c1c; text-decoration:underline; }
.site-footer h5 { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.2); margin-top:20px; padding-top:10px; }
.footer-img-col { text-align:right; }
.footer-extra-img { max-height:60px; }

/* Header group logo */
.group-logo { display:inline-flex; align-items:center; gap:6px; font-size:0.9rem; color:#000; margin-left:12px; text-decoration:none; }
.group-logo img { height:28px; }
.group-logo span { color:#333; font-weight:500; }

/* Align main logo and group logo in header */
.header-inner { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; }
.group-logo { display:flex; align-items:center; gap:8px; margin-left:15px; }
.group-logo img { height:34px; } /* slightly bigger */
.group-logo span { font-weight:600; color:#000; }

/* Banner text bigger and bolder */
.banner-box .support-text { font-size:1.5rem; font-weight:700; }

/* Banner with darker gradient overlay */
.banner-box {
  position: relative;
  overflow: hidden;
}
.banner-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.3));
  z-index: 0;
}
.banner-box .support-text {
  position: relative;
  z-index: 1;
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
}

/* Hover animation for banner (zoom effect) */
.banner-box { transition: transform 0.5s ease; }
.banner-box:hover { transform: scale(1.03); }

/* Banner text animation */
.banner-box .support-text { 
  position: relative; 
  z-index: 1; 
  font-size:1.6rem; 
  font-weight:700; 
  color:#fff; 
  transition: transform 0.5s ease, opacity 0.5s ease; 
}
.banner-box:hover .support-text { 
  transform: translateY(-8px); 
  opacity:0.95; 
}

/* TR group logo improvements */
.group-logo { display:flex; align-items:center; gap:10px; margin-left:15px; text-decoration:none; }
.group-logo img { height:45px; } /* larger */
.group-logo span { font-weight:700; color:#222; font-size:1rem; font-family:'Segoe UI', Arial, sans-serif; }

/* Center align header vertically like SE.com */
.site-header { background:#f0f0f0; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; }
.brand, .group-logo, .main-nav ul { display:flex; align-items:center; }
.main-nav ul { gap:20px; }
.main-nav a { font-weight:600; font-size:0.95rem; color:#000; }

/* Nav hover underline animation */
.main-nav a {
  position: relative;
  color: #000;
  text-decoration: none;
  padding: 4px 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #b71c1c;
  transition: width 0.3s ease;
}
.main-nav a:hover::after {
  width: 100%;
}

/* Active page link stays underlined in red */
.main-nav a.active::after {
  width: 100%;
}

/* Active nav link permanent underline */
.main-nav a.active::after {
  width: 100%;
}

/* Active state for mobile nav links too */
.mobile-nav a.active::after {
  width: 100%;
}

/* Mobile nav slide-in animation */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 250px;
  height: 100%;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 60px 20px;
  transition: right 0.4s ease;
  z-index: 9999;
}
.mobile-nav a { color:#fff; padding:10px 0; font-size:1rem; text-decoration:none; }
.mobile-nav.show { right: 0; }
.nav-toggle { cursor:pointer; z-index:10000; }

/* Footer image larger and blended */
.footer-extra-img {
  max-height: 240px;  /* twice the earlier size */
  opacity: 0.9;
  filter: brightness(0.9) contrast(1.1);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.footer-extra-img:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* Center footer image vertically */
.footer-img-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.footer-extra-img {
  max-height: 240px;
  opacity: 0.9;
  filter: brightness(0.9) contrast(1.1);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.footer-extra-img:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* Responsive footer image */
.footer-extra-img {
  max-height: 240px;
  width: auto;
  height: auto;
  max-width: 100%;
  opacity: 0.9;
  filter: brightness(0.9) contrast(1.1);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.footer-extra-img:hover {
  transform: scale(1.05);
  opacity: 1;
}

@media(max-width: 768px) {
  .footer-img-col {
    justify-content: center;
    margin-top: 20px;
  }
  .footer-extra-img {
    max-height: 160px;
  }
}

/* Footer image fade-in animation */
.footer-extra-img {
  opacity: 0;
  transform: translateY(30px);
}
.footer-extra-img.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Footer columns fade-in animation */
.site-footer .col {
  opacity: 0;
  transform: translateY(30px);
}
.site-footer .col.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Footer staggered animation */
.site-footer .col {
  opacity: 0;
  transform: translateY(30px);
}
.site-footer .col.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Footer pure black */
.site-footer { background:#000; color:#fff; }

/* Product cards animation */
.cards .card {
  opacity: 0;
  transform: translateY(30px);
}
.cards .card.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* General image fade-in on scroll */
img.fade-scroll {
  opacity: 0;
  transform: scale(0.98);
}
img.fade-scroll.show {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Core feature boxes fade-in */
.core-box {
  opacity: 0;
  transform: translateY(30px);
}
.core-box.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}



/* === Hero Slider Full Styling & Animations === */

/* Base carousel setup */
.carousel,
.slides,
.slide {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Full screen height */
  overflow: hidden;
}

/* Slide fade transition */
.slides {
  position: relative;
}

.slides .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1s ease-in-out;
}

.slides .slide.active {
  opacity: 1;
  position: relative;
  z-index: 2;
}

/* Semi-transparent square behind text */
.slide-text {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px 30px;
  border-radius: 8px;
  display: inline-block;
  max-width: 70%;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-text h1,
.slide-text p {
  color: #fff;
}

/* Animate text box when slide is active */
.slide.active .slide-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* CTA button animations */
.slide-text .cta a {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide.active .slide-text .cta a {
  opacity: 1;
  transform: translateY(0);
}

.slide.active .slide-text .cta a:nth-child(1) {
  transition-delay: 0.6s;
}

.slide.active .slide-text .cta a:nth-child(2) {
  transition-delay: 0.8s;
}

/* Bullet list animations */
.slide-info ul.ticks li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide.active .slide-info ul.ticks li {
  opacity: 1;
  transform: translateY(0);
}

.slide.active .slide-info ul.ticks li:nth-child(1) {
  transition-delay: 1s;
}

.slide.active .slide-info ul.ticks li:nth-child(2) {
  transition-delay: 1.2s;
}

.slide.active .slide-info ul.ticks li:nth-child(3) {
  transition-delay: 1.4s;
}

/* Smooth fade-out when slide is inactive */
.slide:not(.active) .slide-text,
.slide:not(.active) .cta a,
.slide:not(.active) .slide-info ul.ticks li {
  opacity: 0;
  transform: translateY(20px);
}

/* === Responsive Fix for Hero Slider === */
@media (max-width: 900px) {

  .carousel,
  .slides,
  .slide {
    height: auto;
    /* let content define height */
    min-height: 400px;
    /* reasonable minimum */
  }

  .slide-inner {
    flex-direction: column;
    padding: 30px 20px;
    text-align: center;
  }

  .slide-text {
    max-width: 100%;
    font-size: 0.95rem;
  }

  .slide-text h1 {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .slide-info {
    width: 100%;
    margin-top: 15px;
  }

  .arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .dots {
    bottom: 10px;
  }
}

@media (max-width: 600px) {
  .slide-text h1 {
    font-size: 1.3rem;
  }

  .slide-text p {
    font-size: 0.9rem;
  }

  .btn {
    padding: 8px 14px;
    font-size: 0.9rem;
  }
}

/* Footer group company logo centered */
.footer-group {
  text-align:center;
  margin:20px 0;
}
.footer-group .group-logo {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1rem;
  font-weight:600;
  color:#fff;
  text-decoration:none;
}
.footer-group .group-logo img {
  height:40px;
}
.footer-group .group-logo span {
  color:#fff;
}
.footer-group .group-logo:hover span {
  color:#b71c1c; /* red on hover */
}