/* ================================
   Dyno Electrics – custom.css (optimized)
   Safe drop-in replacement
=================================== */

/* Design tokens */
:root{
  --bg: #f4f4f4;
  --muted: #f8f9fa;
  --border: #ddd;

  --black: #000;
  --white: #fff;

  /* Greens used across file, unified */
  --green-600: #05b713;   /* buttons / links hover */
  --green-700: #329000;   /* hover state darker */
  --green-500: #3ba700;   /* go-top button */
  --green-400: #05b713;   /* banner H1 */
  --green-300: #05B713;   /* promo title */
  --green-200: #05b713;   /* promo subtitle/discount */

  /* Accents */
  --yellow-300: #ffe07c;
  --green-100: #d1ff88;
  --blue-100:  #a6f3f3;

  --text-900: #1c1c1c;
  --text-700: #333;
  --text-600: #222;
  --text-500: #777;

  --shadow-sm: 0 0 5px rgba(0,0,0,.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,.2);
}

/* ============ Base / Resets ============ */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  /* Use Inter if available, then Segoe UI fallback */
  font-family: "Open Sans", Arial, sans-serif;
  background: var(--bg);
  color: var(--black);
  /* Ensure text can be selected (fixes “can’t copy text”) */
  user-select: text !important;
  -webkit-user-select: text !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", Arial, sans-serif;
}
a{
  text-decoration: none;
  color: var(--black);
  transition: color .2s ease;
}
a:hover{ color: var(--green-600); }

/* Header */
header input[type="search"]{
  border-radius: 20px;
  padding: .5rem 1rem;
}

/* ============ Banner ============ */
.banner{
  background: #eaffef;
  padding: 2rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.banner-text{
  flex: 1 1 380px;
  max-width: 650px;
}
.banner-text h1{
  font-size: clamp(1.6rem, 2.2vw + 1rem, 2.2rem);
  font-weight: 700;
  color: var(--green-400);
  margin: 0 0 1rem;
  line-height: 1.2;
}
.banner-text p{
  font-size: .95rem;
  color: var(--text-700);
  margin: 0 0 .5rem;
}
.banner-img{
  flex: 1 1 280px;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.banner-img img{
  max-height: 120px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ============ Feature Boxes ============ */
.feature-boxes{ margin-top: 2rem; }

.feature-box{
  border-radius: 10px;
  padding: 1rem;
  color: var(--black);
  font-weight: 700;
  text-align: center;
  height: 100%;
}
.feature-yellow{ background: var(--yellow-300); }
.feature-green{  background: var(--green-100); }
.feature-blue{   background: var(--blue-100); }

/* ============ Product Cards ============ */
.product-card{
  text-align: center;
  background: white;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  height: 100%;
}
.product-card img{
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.call-btn{
  background: var(--green-600);
  color: var(--white);
  border: none;
  padding: .4rem 1rem;
  font-size: .85rem;
  margin-top: .5rem;
  border-radius: 5px;
  transition: background .2s ease, transform .1s ease;
}
.call-btn:hover{ background: var(--green-700); transform: translateY(-1px); }

p.mt-3.fw-semibold.text-truncate.product_name {
    color: #181818;
    font-size: 24px;
    font-weight: 400;
    margin: 5px;
}
.fw-bold.text-dark .product-saparation {
    font-size: 14px;
    font-weight: 400;
}
small.txtVat {
    font-size: 12px;
    font-weight: 400;
    color: #000000;
}
/* ============ Nav bar ============ */
nav.navbar.navbar-expand-lg.bg-white.border-bottom.py-3 {
    padding: 5px 0px !important;
}
a.navbar-brand img {
    height: 70px !important;
}
/* ============ Sidebar ============ */
.category-sidebar{
  background: var(--white);
  padding: 1rem;
  border-radius: .5rem;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.category-item{ display: flex; align-items: center; }
.category-icon{
  display: inline-block;
  width: 25px; height: 25px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: .5rem;
}
.category-icon img{
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.category-label{ font-weight: 600; }
hr.divider {
    color: #7a7a7a;
    border-width: 1px;
    height: 0.5px;
    margin: 0;
}
.category-item.mb-3 {
    margin: 10px 0px 10px 10px !important;
}
/* ============ Promo Banner ============ */
.promo-banner{
  background-image: url('/frontend/images/Web-Banner-Top.png.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: clamp(260px, 28vw, 370px);
  padding: 2rem 3rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  display: flex;
  align-items: center;
  color: #3c3c3c;
}
.promo-content{ max-width: 60%; }
 
.promo-title {
    color: var(--green-300);
    font-size: 54px;
    font-weight: 700;
    line-height: 1.1em;
    margin: 0 0 1rem;
}
 .promo-subtitle, p.promo-discount {
    margin: 0 0 .5rem;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    color: #0A7D13;
}
.promo-btn{
  font-size: 14px;
  font-weight: 600;
  padding: .4rem 1.2rem;
}

/* Utility BG chips */
.bg-yellow{ background: var(--yellow-300); }
.bg-green { background: var(--green-100); }
.bg-blue  { background: var(--blue-100); }

/* ============ Topbar News Scroller ============ */
.topbar-marquee{
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  position: relative;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 500;
}
.marquee-wrapper{ width: 100%; overflow: hidden; position: relative; }
.marquee-content{
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scroll-left 25s linear infinite;
}
.marquee-wrapper:hover .marquee-content{ animation-play-state: paused; }
.marquee-content span{
  display: inline-block;
  margin-right: 4rem;
  letter-spacing: .5px;
}
@keyframes scroll-left{
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee-content{ animation: none; transform: translateX(0); }
}

/* ============ Home Feature Strip ============ */
.feature-section{ background: var(--bg); }
.feature-item{ min-height: 60px; }
.feature-icon{
  width: 45px; height: 45px; object-fit: contain;
  filter: grayscale(100%);
  transition: transform .2s ease, filter .2s ease;
}
.feature-item:hover .feature-icon{
  filter: grayscale(0%); transform: scale(1.05);
}
.feature-title{
  text-transform: uppercase;
  color: var(--text-900);
  margin: 0 0 2px;
  margin-bottom: 0;
  font-family: "Poppins", Sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.feature-desc{
  font-size: 15px;
  color: #000000;
  margin: 0;
  font-weight: 400;
}

/* ============ Go to Top Button ============ */
.go-top-btn{
  position: fixed; bottom: 20px; right: 20px;
  background: var(--green-500);
  width: 40px; height: 40px; border-radius: 0;
  text-align: center; display: none; z-index: 999;
  box-shadow: var(--shadow-md);
  transition: transform .15s ease, background .2s ease;
}
.go-top-btn .arrow-up{
  color: var(--white); font-size: 18px; line-height: 40px; display: block;
}
.go-top-btn:hover{
  background: var(--green-700);
  transform: scale(1.05);
}

/* ============ Highlight Boxes ============ */
.highlight-box{
  background-size: cover;
  background-position: center;
  padding: 30px 20px;
  color: var(--black);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .2s ease;
}
.highlight-cont{ width: min(60%, 520px); }
.highlight-box:hover{ transform: translateY(-5px); }
.highlight-subtitle{
  color: var(--text-600);
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.8em;
}
.highlight-title{
  font-size: 27px;
  font-weight: 700;
  color: #2b2b2b;
  font-family:"Open Sans", Arial, sans-serif;
}
.highlight-desc{
  font-size: 14px; color: var(--text-600); margin: 0 0 15px;
}
.highlight-link{
  transition: color .2s ease;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  -webkit-text-stroke-color: #000;
  stroke: #000;
}
.highlight-link:hover{ color: #004c6a; }

/* ============ Responsive Tweaks ============ */
@media (max-width: 992px){
  .promo-content{ max-width: 75%; }
}
@media (max-width: 768px){
  .banner-text{ max-width: 100%; }
  .promo-content{ max-width: 100%; }
}
@media (max-width: 576px){
  .banner{ padding: 1.25rem; }
  .promo-banner{ padding: 1.25rem 1rem; }
  .feature-title{ font-size: 13px; }
  .feature-desc{ font-size: 12px; }
}

/* ============ Footer Section ============ */

footer.bg-light.text-dark.mt-5.pt-4 {
    background-color: white !important;
  padding: 5rem 0px 2rem 0px !important;
}
footer.bg-light.text-dark.mt-5.pt-4 .container img {
    height: 50px;
}
footer p, footer ul li {
    font-size: 15px !important;
}
footer ul a.text-decoration-none.text-dark:hover {
    color: var(--green-600) !important;
}
footer div h6 {
    font-size: 18px;
    font-weight: 400;
    color: #2b2b2b;
  padding-bottom: 10px
}
footer p {
    margin-bottom: 0px;
}
footer .text-center.py-3.small {
    font-size: 15px;
    margin-top: 35px;
    border-top: 1px solid #c4c4c4;
    padding: 40px 0px 0px 0px !important;
}
/* ============ Bootstrap ============ */
.dropdown-item.active, .dropdown-item:active{
  background: #05b713;
  color:white !important;
}

.add_to_cart button  {
  border-radius:100px !important;
    background-color: #05b713 !important;
    border-color: #05b713;
  
}
.increment button {
    padding: 1px 1px;
}
.price_and_stock .stock {
    margin-bottom: 0;
    font-size: 16px;
    border: 1px solid #05B713;
    padding: 0px 5px;
    border-radius: 3px;
    color: #05B713;
}
.increment input {
    width: 70px;
}
.price_and_stock .price {
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 0;
    color: #000000;
    opacity: 1;
}
.container.product_details {
    margin-top: 7px;
}
span.sku_wrapper, span.posted_in {
    margin-right: 10px;
}
section.product_details_block_wrap {
    padding: 10px;
}
.product_block_content h1 {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 700;
}
.add_to_cart_and_increment {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    gap: 20px;
    
}
.btn_style {
    background: #05B713;
    padding: 10px 15px;
    line-height: initial;
    border-radius: 50px;
}
.btn_style:hover {
    background-color: #0A7D13;
    color: white;
}
.cart-total .amount {
    font-weight: 500;
    color: #05B713;
}
.checkout-content td .amount, .order_details_page td .amount, .tracking_order_area td .amount {
    font-weight: 600;
    color: #05B713;
    font-size: 18px;
}

/* Pritesh */
.product-card.position-relative.p-3.text-center.border.rounded.shadow-sm img.img-fluid.rounded {
    object-fit: contain !important;
    max-height: 170px;
}
.productImageThumb .swiper-slide img {
    max-height: 500px;
    object-fit: contain;
}