:root{
    --ink:#0E2E23;
    --forest:#12463A;
    --forest-deep:#0A2A21;
    --sun:#E8A33D;
    --sun-deep:#C97F1C;
    --cream:#FAF6EE;
    --paper:#FFFFFF;
    --line:rgba(14,46,35,0.12);
    --muted:#5B6E67;
    --radius:18px;
    --shadow: 0 20px 50px -20px rgba(10,42,33,0.35);
}

.hero-section-pwd.hero {
    padding: 0;
}  
.hero-section-pwd .vc_column-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.hero-section-img img {
    max-width: 450px;
}
.hero h1 {
    color: #000000;
    font-size: 70px;
    line-height: 1.06;
    font-weight: 700;
    max-width: 560px;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.01em;
    text-transform: capitalize;
}
 .hero h1 span {
    color: var(--sun);
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232,163,61,0.16);
    color: var(--sun);
    border: 1px solid rgba(232,163,61,0.35);
    padding: 7px 16px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 22px;
}
.badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sun);
}
.hero p.lead {
    color: rgb(0 0 0 / 78%);
    font-size: 20px;
    line-height: 1.6;
    max-width: 600px;
    margin-top: 22px;
}
.hero-ctas {
    display: flex;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.btn-primary {
    padding: 15px 28px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 14px;
    transition: transform .2s, box-shadow .2s;
    background-color: #015801;
    color: #ffffff;
    font-family: Lato, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    height: 52px;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(232,163,61,0.5);
    background-color: #005a00;
    color: #ffffff;
}
.btn-ghost {
    background: transparent;
    border: 1.5px solid rgb(0 0 0 / 35%);
    padding: 15px 28px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 14px;
    transition: transform .2s, box-shadow .2s;
    color: #000000;
    font-family: Lato, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    height: 52px;
}
.btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(232,163,61,0.5);
    background-color: #005a00;
    color: #ffffff;
}
.trust-row {
    display: flex;
    gap: 26px;
    padding: 0;
    margin-top: 38px;
    flex-wrap: wrap;
    color: #000;
    font-weight: 600;
}
.trust-row li {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}
.trust-row .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sun);
    flex-shrink: 0;
}
.hero-circle-img {
    position: absolute;
    bottom: 5%;
    right: 5%;
}









  :root{
    --bg-light:#f5f6f8;
    --white:#fff;
    --red:#c0272b;
    --yellow:#f5b942;
  }


  .deye-section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    padding:110px 0px;
    gap:48px;
  }

  /* ---- product image ---- */
  .deye-visual{
    position:relative;
    flex:1 1 420px;
    max-width:560px;
    text-align:center;
  }
  .deye-visual img{
    max-width:100%;
    height:auto;
  }
  .deye-visual .price-badge{
    position:absolute;
    top:10px;
    right:10px;
    background:#111;
    color:var(--yellow);
    font-weight:800;
    font-size:18px;
    padding:9px 16px;
    border-radius:50px;
    box-shadow:0 6px 14px rgba(0,0,0,.25);
    white-space:nowrap;
  }

  /* ---- price card (shared base — theme colors set per modifier) ---- */
  .deye-card{
    position:relative;
    border-radius:26px;
    padding:34px 34px 28px;
    width:450px;
    flex:0 0 auto;
    box-shadow:0 10px 26px rgba(0,0,0,.18);
  }
  .deye-card-icon{
    width:70px;
    height:70px;
    margin-bottom:18px;
  }
  .deye-card-icon img{width:100%;height:100%;display:block;}
  .deye-card-title{
    margin:0 0 4px;
  }
.deye-card-title .line1 {
    display: block;
    color: var(--white);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    font-family: "Space Grotesk", sans-serif;
}
.deye-card-title .line2 {
    display: block;
    color: var(--yellow);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    margin: 5px 0 20px;
}
  .deye-card-from-wrap{
    text-align:center;
  }
  .deye-card-from{
    display:inline-block;
    background:var(--yellow);
    color:#1a1a1a;
    font-style:italic;
    font-weight:800;
    font-size:13px;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:4px 14px;
    transform:skewX(-8deg);
  }
  .deye-card-btn{
    background:var(--red);
    border:2px solid var(--yellow);
    border-radius:10px;
    color:var(--white);
    font-size:26px;
    font-weight:800;
    text-align:center;
    padding:12px 10px;
    margin-bottom:22px;
  }
  .deye-card-models-label{
    color:var(--yellow);
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    text-align:center;
    margin:0 0 10px;
  }
  .deye-card-models{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
  }
  .deye-card-models .divider{color:rgba(255,255,255,.35);font-weight:400;}
  .model-variant{
    color:var(--white);
    font-size:16px;
    font-weight:800;
    cursor:pointer;
    padding:4px 4px;
    border-radius:6px;
    transition:color .15s ease, transform .15s ease;
  }
  .model-variant:hover,
  .model-variant.is-active{
    color:var(--yellow);
    transform:translateY(-2px);
  }

  /* ---- theme: inverters (blue) ---- */
  .deye-card--blue{
    background:#0e1f3c;
    border:2px solid #4aa8e8;
  }

  /* ---- theme: batteries (green) ---- */
  .deye-card--green{
    background:#0c2b13;
    border:2px solid #3ecf5e;
  }

  /* content-left / image-right variant */
  .deye-section--content-left .deye-card{order:1;}
  .deye-section--content-left .deye-visual{order:2;}
  
  .deye-card-wrap {
    display: flex;
    gap: 20px;
    flex-direction: row;
}
section.deye-section.deye-section--content-left {
    padding-bottom: 20px;
}





.marqee-section {
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff;
    background:  #015801;
}

/* MARQUEE */
.mq {
//     border-top: 1px solid rgba(200,169,110,.07);
//     border-bottom: 1px solid rgba(200,169,110,.07);
    padding: 15px 0;
    overflow: hidden;
//     background: linear-gradient(90deg, #161616 0%, #6722a1 100%);
}
.mq-t{display:flex;animation:mqs 22s linear infinite;white-space:nowrap}
.mq-t:hover{animation-play-state:paused}
.mqi {
    font-family: var(--serif);
    font-size: clamp(20px,3vw,25px);
    font-weight: 500;
    font-style: italic;
    color: #e8a33d;
    flex-shrink: 0;
    padding: 0 32px;
}
.mqi.ac {
    color: #fff;
}
// @keyframes mqs{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqs {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}







:root {
  --color-green: #146b3a;
  --color-gold: #f5c518;
  --color-text-secondary: #5f6368;
  --color-border: #e6e8eb;
  --radius: 8px;
  --ease: cubic-bezier(.4,0,.2,1);
}
  .section-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.section-head h2 {
    font-size: 38px;
    margin-bottom: 12px;
    color: #000000;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    line-height: 1.1;
}
  .section-head p{color:var(--color-text-secondary);font-size:15.5px;}
span.eyebrow {
    color: #015801 !important;
    margin-bottom: 15px;
    display: inline-block;
    font-size: 14px;
}



  .feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .feature-card{
    background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);
    padding:30px 20px;text-align:center;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .feature-card:hover{transform:translateY(-8px);box-shadow:0 16px 28px rgba(10,31,61,.1);border-color:var(--color-gold);}
  .feature-icon{
    width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(20,107,58,.1);color:var(--color-green);
  }
  .feature-card h4{font-size:15.5px;margin-bottom:6px;}
  .feature-card p{font-size:13.5px;color:var(--color-text-secondary);}
  
  
  
  
  
  
  
  
/* ================= 6. INFO-GRAPHIC FLOW ================= */
.flow-diagram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

.flow-step {
  flex: 1;
  min-width: 130px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 14px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
  box-sizing: border-box;
}

.flow-step:hover {
  transform: translateY(-5px);
  border-color: var(--color-gold);
}

.flow-step .icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,31,61,.08);
  color: #015801;
}

.flow-arrow {
  color: var(--color-text-secondary);
  font-size: 22px;
}

/* ================= RESPONSIVE MEDIA QUERIES ================= */

/* ট্যাবলেট ও মোবাইল ডিভাইস (সর্বোচ্চ ৭৬৮ পিক্সেল) */
@media (max-width: 768px) {
  .flow-diagram {
    gap: 20px; /* মোবাইল স্ক্রিনে স্পেসিং সুন্দর দেখানোর জন্য */
  }
  
  .flow-step {
    flex: 0 0 calc(50% - 10px); /* প্রতি লাইনে ২টি করে বক্স দেখাবে */
    min-width: auto;
  }
  
  .flow-arrow {
    display: none; /* তীর চিহ্ন হাইড করা হলো */
  }
}

/* ছোট মোবাইল ডিভাইস (সর্বোচ্চ ৪৮০ পিক্সেল) */
@media (max-width: 600px) {
  .flow-step {
    flex: 0 0 100%; /* প্রতি লাইনে ১টি করে বক্স দেখাবে */
  }
}
  
  
  
  
  
  
  
  
  
  
    /* ================= 4. CALL TO ACTION ================= */
  .mid-cta{
    position:relative;
    overflow:hidden;
    text-align:center;
    color:#fff;
    background: linear-gradient(135deg, #146b3a 0%, #0d4a28 100%);
  }
  .mid-cta::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 18% 20%, rgba(245,197,24,.22), transparent 45%);
    pointer-events:none;
  }
  

.mid-cta .section-head h2,
.mid-cta .section-head p {color: #ffffff; }
.mid-cta .hero-ctas {justify-content: center; }
.mid-cta .btn-ghost {background: #ffffff; }
.mid-cta .btn-ghost:hover {background-color: #ffffff; color: #005900; }





@media (max-width: 1600px) {
  .hero-section-pwd.hero.vc_custom_1784433872310 {
    background-size: cover !important;
}
}
@media (max-width: 964px) {
  .deye-section {
    justify-content: center;
}
    .deye-section{justify-content:center;text-align:center;flex-direction:column;}
    .deye-card{width:100%;max-width: 500px;order:1;}
    .deye-visual{order:2;}
    .deye-card-models{justify-content:center;}
}

@media (max-width: 920px) {
  .feature-grid {
    grid-template-columns: repeat(2,1fr);
}
}


@media (max-width: 767px) {
  .feature-grid {
    grid-template-columns: repeat(1,1fr);
}
}

@media (max-width: 767px) {
  .deye-visual {
    flex: 1 1 auto;
}
}


/* ==========================================
   ১.Default styles (১২০০ পিক্সেলের নিচে বা নরমাল স্ক্রিনে)
   ========================================== */

/* প্রথম অবস্থায় এটি হাইড বা লুকানো থাকবে */
.hero-banner-pwd {
    display: none;
}

.hero-banner-pwd .vc_column-inner {
    padding: 0;
}


/* ==========================================
   ২. Media Query (১২০০ পিক্সেল এবং তার উপরে)
   ========================================== */
@media screen and (max-width: 1200px) {
    
    /* ১২০০ পিক্সেল বা তার উপরে গেলে এটি শো হবে এবং নির্দিষ্ট হাইট পাবে */
    .hero-banner-pwd {
        display: block; /* অথবা flex/grid */
    }

    /* ১২০০ পিক্সেল বা তার উপরে গেলে এটি রিমুভ (হাইড) হয়ে যাবে */
    .hero-section-pwd.hero {
        display: none;
    }
    
}

@media (max-width: 480px) {
  .deye-card-wrap {
    display: flex;
    gap: 0;
    flex-direction: column;
    align-items: flex-start;
}
.deye-card-title .line2 {
    text-align: left;
}
.deye-card-from-wrap {
    display: none;
}
}