/* =========================================================
   GreenTech Renewables — Global Styles
   File: assets/css/styles.css
   ========================================================= */

/* ------------------------ */
/* Variables                */
/* ------------------------ */
:root{
  --brand:#0a6d34;
  --brand-2:#28a745;
  --dark:#13221a;
  --text:#243424;
  --soft:#f3f7f4;

  /* Static hero height for slideshow */
  --hero-h: 420px;

  /* Tints & accents */
  --overlay-a: rgba(10,109,52,.10);
  --overlay-b: rgba(40,167,69,.08);
  --caption-bg: rgba(19,34,26,.66);

  /* Project cards */
  --proj-h-sm: 240px;
  --proj-h-lg: 300px;
  --proj-ring: linear-gradient(135deg, rgba(10,109,52,.20), rgba(40,167,69,.25));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:#fff;
}

/* ------------------------ */
/* Topbar & Buttons         */
/* ------------------------ */
.topbar{background:var(--brand);}
.btn-cta{background:var(--brand-2); color:#fff; border:0}
.btn-cta:hover{filter:brightness(0.94); color:#fff}

/* Optional ghost button for secondary actions */
.btn-ghost{
  border:1px solid rgba(10,109,52,.28); color:var(--brand);
  padding:.45rem .7rem; border-radius:.65rem; background:#fff; font-weight:700;
  transition: all .2s ease;
}
.btn-ghost:hover{
  background: rgba(10,109,52,.06);
  border-color: var(--brand);
}

/* ------------------------ */
/* Navbar                   */
/* ------------------------ */
.navbar .nav-link{font-weight:500}
.navbar .nav-link.active,.navbar .nav-link:hover{color:var(--brand)}

/* ------------------------ */
/* Hero (legacy gradient)   */
/* ------------------------ */
.hero{
  position:relative;
  background:linear-gradient(120deg,var(--brand) 0%,#19a456 60%,#1bbe71 100%);
  overflow:hidden;
}
.hero .hero-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.15),transparent 40%),
    radial-gradient(ellipse at 80% 30%,rgba(255,255,255,.12),transparent 40%),
    radial-gradient(ellipse at 50% 90%,rgba(255,255,255,.10),transparent 40%);
  pointer-events:none;
}
.hero .hero-card{
  background:#fff; border-radius:1rem; padding:1.25rem;
}
.hero-stats{display:flex; gap:1.5rem}
.hero-stats > div{min-width:100px}

/* ------------------------ */
/* Sections & Utilities     */
/* ------------------------ */
.section{padding:3rem 0}
.bg-soft{background:var(--soft)}
.page-hero{background:var(--soft); padding:2rem 0; border-bottom:1px solid #e9f0ea}

input.form-control,textarea.form-control,select.form-select{border-radius:.75rem}

@media (max-width:767.98px){
  .hero-stats{gap:1rem}
}

/* ------------------------ */
/* “Why” & Service Cards    */
/* ------------------------ */
.why-card,.service-card{
  background:#fff; border:1px solid #e9f0ea; border-radius:1rem; padding:1rem; height:100%;
}
.why-card i,.service-card i{font-size:1.5rem; color:var(--brand); margin-bottom:.5rem; display:block}

/* =========================================================
   HERO Slideshow (index hero with carousel)
   ========================================================= */
.hero-slideshow{
  position:relative;
  padding-top:1rem;          /* space for brand bar */
  background:none;           /* override legacy gradient */
}
.hero-slideshow::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:6px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}
#heroCarousel{
  border-radius:1rem; overflow:hidden;
  box-shadow:0 10px 30px rgba(10,109,52,.15);
  border:2px solid rgba(10,109,52,.14);
}
#heroCarousel .carousel-item{
  position:relative; height:var(--hero-h);
}
#heroCarousel .carousel-item > img,
#heroCarousel .carousel-item picture,
#heroCarousel .carousel-item picture > img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center; image-rendering:auto;
}
#heroCarousel .carousel-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,var(--overlay-a),var(--overlay-b));
  pointer-events:none;
}
.caption-box{
  left:1rem; right:auto; text-align:left;
  background:var(--caption-bg);
  border-left:4px solid var(--brand-2);
  padding:.75rem 1rem; border-radius:.75rem; color:#fff;
  backdrop-filter:saturate(120%) blur(2px);
}
.caption-box h2,.caption-box p{margin:0 0 .25rem 0}

.carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(19,34,26,.25);
}
.carousel-indicators .active{background:var(--brand-2); border-color:var(--brand-2);}
.carousel-control-prev,.carousel-control-next{width:3rem}
.carousel-control-prev .carousel-control-prev-icon,
.carousel-control-next .carousel-control-next-icon{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));}

.hero-card{border:1px solid rgba(10,109,52,.14)}
@media (min-width:992px){
  .hero-card{min-height:var(--hero-h); display:flex; flex-direction:column;}
  .hero-card form{flex:1 1 auto}
}

/* =========================================================
   Brand Links & Section Headers
   ========================================================= */
.brand-link{
  --_grad: linear-gradient(90deg, var(--brand), var(--brand-2));
  font-weight: 600; text-decoration: none; position: relative;
  background: var(--_grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand-2); /* fallback */
  padding-bottom: 2px;
}
.brand-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background: var(--_grad); transform: scaleX(.35); transform-origin:left;
  transition: transform .25s ease; border-radius: 999px;
}
.brand-link:hover::after{ transform: scaleX(1); }
.brand-link .fa-arrow-right{ transition: transform .25s ease; }
.brand-link:hover .fa-arrow-right{ transform: translateX(4px); }

/* Auto-upgrade section header links if class omitted */
.section .d-flex.align-items-end > a:not(.btn){
  font-weight: 600; text-decoration: none; position: relative; color: var(--brand-2);
}
.section .d-flex.align-items-end > a:not(.btn):hover{ color: var(--brand); }

/* =========================================================
   Popular Product Categories (home tiles)
   ========================================================= */
.product-cat{
  display: block; text-decoration: none; color: inherit;
  padding: .25rem; border-radius: .9rem; position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-cat::before{
  content:""; position:absolute; inset:0; border-radius:.9rem; padding:1px;
  background: linear-gradient(135deg, rgba(10,109,52,.22), rgba(40,167,69,.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.product-cat .product-thumb{
  border-radius:.65rem; box-shadow: 0 6px 16px rgba(10,109,52,.08);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.product-cat:hover{ transform: translateY(-3px); box-shadow: 0 12px 26px rgba(10,109,52,.12); }
.product-cat:hover .product-thumb{ transform: scale(1.03); filter: saturate(1.08); }
.product-cat h6{
  margin:.6rem 0 0; font-weight: 700; color: #1b2b20; transition: color .2s ease;
}
.product-cat:hover h6{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--brand);
}

/* Category thumbnail backgrounds (paths relative to assets/css/) */
.product-thumb{
  border-radius:.75rem; height:110px;
  background:#e5efe8; background-size:cover; background-position:center;
}
.product-thumb.swh{background:url('../img/products/solarwh.jpg') center/cover no-repeat,#e5efe8;}
.product-thumb.street{background:url('../img/products/street.png') center/cover no-repeat,#e5efe8;}
.product-thumb.pv{background:url('../img/products/pvCar.jpg') center/cover no-repeat,#e5efe8;}
.product-thumb.pump{background:url('../img/products/solarPamp.jpg') center/cover no-repeat,#e5efe8;}

/* =========================================================
   PRODUCTS — Pro card UI + responsive images (keeps HTML)
   ========================================================= */

/* Card shell (works with your existing .product-card markup) */
.product-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit; background:#fff; border-radius:1rem;
  border:1px solid #e9f0ea; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card::before{
  /* subtle brand ring */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background: linear-gradient(135deg, rgba(10,109,52,.14), rgba(40,167,69,.20));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .22s ease;
}
.product-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(10,109,52,.12);
  border-color: rgba(10,109,52,.18);
}
.product-card:hover::before{ opacity:.9 }

/* Media area (supports BOTH background divs and <img>) */
.product-card .bg-cover,
.product-card .product-thumb,
.product-card .card-img-top,
.product-card .card-img{
  width:100%;
  aspect-ratio: 4 / 3;         /* consistent tile height */
  min-height: 180px;           /* fallback for older browsers */
  background-color:#f3f7f4;
  display:block;
}

/* Background-based thumbnails */
.product-card .bg-cover,
.product-card .product-thumb{
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition: transform .35s ease, filter .35s ease;
}

/* <img> thumbnails */
.product-card img,
.product-card picture > img{
  width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  transition: transform .35s ease, filter .35s ease;
}

/* Hover polish (applies to both background and <img>) */
.product-card:hover .bg-cover,
.product-card:hover .product-thumb,
.product-card:hover img{
  transform: scale(1.03);
  filter: saturate(1.05);
}

/* Body / texts */
.product-card .card-body{
  padding:.9rem .95rem 1rem; display:flex; flex-direction:column; gap:.4rem; flex:1 1 auto;
}
.product-card .card-title{
  font-weight:800; line-height:1.3; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card .card-text{ color:#567161; }

/* Price styling (if present) */
.product-price{ display:flex; align-items:baseline; gap:.5rem; margin-top:.15rem; }
.product-price .now{ font-weight:800; color:var(--brand); }
.product-price .old{ color:#9aa7a0; text-decoration: line-through; }

/* Action buttons inside cards */
.product-card .btn{ border-radius:.65rem; }
.product-card .btn-cta{ box-shadow:0 8px 22px rgba(10,109,52,.16); }
.product-card .btn-outline{ border:1px solid rgba(10,109,52,.28); color:var(--brand); }
.product-card .btn-outline:hover{ border-color:var(--brand); background:rgba(10,109,52,.06); }

/* Optional compact variant */
.product-card.compact .card-body{ padding:.75rem; }
.product-card.compact .card-title{ -webkit-line-clamp:1; }

/* =========================================================
   PROJECTS — Upgraded visuals & paths
   ========================================================= */
.project-card{
  position:relative; display:block; color:#fff; text-decoration:none;
  border-radius:1rem; overflow:hidden;
  box-shadow:0 10px 28px rgba(10,109,52,.10);
  transition: transform .28s ease, box-shadow .28s ease;
}
.project-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--proj-ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:1;
}
.project-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.80) 100%),
    linear-gradient(135deg, rgba(10,109,52,.10), rgba(40,167,69,.08));
  opacity:.95; transition:opacity .28s ease;
}
.project-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(10,109,52,.16);
}
.project-card:hover::after{opacity:1}

.project-thumb{
  /* Use aspect-ratio + fallback for consistency */
  aspect-ratio: 16 / 9;
  min-height: var(--proj-h-sm);
  background:#0d8a4d; background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:brightness(.9) saturate(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.project-card:hover .project-thumb{
  transform:scale(1.035);
  filter:brightness(.98) saturate(1.06);
}
.project-lg .project-thumb{ min-height: var(--proj-h-lg); }

.project-card .project-body{
  position:absolute; left:0; right:0; bottom:0; padding:1rem .95rem .85rem; color:#fff; z-index:2;
}
.project-card .project-body h5{margin:0 0 .15rem 0; font-weight:800; letter-spacing:.2px}
.project-meta{opacity:.9; font-size:.92rem}

.badge-soft{
  position:absolute; z-index:3; left:.85rem; top:.85rem;
  display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.02em;
  padding:.25rem .5rem; border-radius:.5rem;
  background:rgba(16,125,64,.18); color:#dff7ea; border:1px solid rgba(16,125,64,.25);
}
.view-btn{
  position:absolute; right:.75rem; bottom:.75rem; z-index:3;
  display:flex; align-items:center; gap:.4rem;
  background:#fff; color:#0a6d34; border:0; border-radius:.65rem; padding:.45rem .65rem; font-weight:800;
  box-shadow:0 10px 24px rgba(10,109,52,.18);
  transition:transform .2s ease, filter .2s ease;
}
.project-card:hover .view-btn{ transform:translateY(-2px) }
.view-btn i{font-size:.9rem}

/* Thumbnail image paths (relative to assets/css/styles.css) */
.thumb-1{background-image:url('../img/projects/project_1.jpg');}
.thumb-2{background-image:url('../img/projects/project_2.jpg');}
.thumb-3{background-image:url('../img/projects/project_3.jpg');}
.thumb-4{background-image:url('../img/projects/project_4.jpg');}
.thumb-5{background-image:url('../img/projects/project_5.JPG');} /* keep case if file is .JPG */

/* Modal polish (if using projects modal) */
.modal .modal-title{ font-weight:800; }
.modal .list-unstyled li{ margin-bottom:.35rem; }
.modal .kw{ font-weight:800; }
#projCarousel .carousel-item img{ width:100%; height:520px; object-fit:cover; display:block; }
@media (max-width:575.98px){ #projCarousel .carousel-item img{ height:300px; } }

/* ------------------------ */
/* CTA                      */
/* ------------------------ */
.cta{background:linear-gradient(120deg,var(--brand) 0%,#1ca45b 80%)}

/* ------------------------ */
/* Footer & Back-to-top     */
/* ------------------------ */
.footer{background:var(--dark)}
.footer-links a{color:#fff; text-decoration:none; opacity:.9}
.footer-links a:hover{opacity:1; text-decoration:underline}
.footer-base{background:#0d1511}
.back-to-top{
  position:fixed; right:1rem; bottom:1rem; width:44px; height:44px; display:grid; place-items:center;
  color:#fff; background:var(--brand-2); border-radius:999px; text-decoration:none; opacity:.9; transform:translateY(120%);
  transition:all .25s ease; z-index:999;
}
.back-to-top.show{transform:translateY(0)}