.footer{
    width:100%;
    min-height:500px;
    background:url('../img/footerimage.png') center center no-repeat;
  background-size: cover;
    color:#fff;
    padding:100px 0 0;
    font-family:'Poppins',sans-serif;
}

.footer-container{
    width:100%;
    max-width:1920px;      /* অথবা none */
    margin:0 auto;
    padding:0 60px;        /* দুই পাশে একটু gap */
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:50px;
    box-sizing:border-box;
}

.footer-box h2{
    color:#ffcc00;
    margin-bottom:15px;
}

.footer-box h3{
    color:#ffcc00;
    margin-bottom:15px;
}

.footer-box p{
    line-height:1.8;
    color:#ddd;
}

.footer-box ul{
    list-style:none;
    padding:0;
}

.footer-box ul li{
    margin-bottom:10px;
}

.footer-box ul li a{
    color:#ddd;
    text-decoration:none;
    transition:.3s;
}

.footer-box ul li a:hover{
    color:#ffcc00;
    padding-left:5px;
}

.social-icons{
    display:flex;
    gap:12px;

}

.social-icons a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
         background:#ffcc00;
    text-decoration:none;
    transition:.3s;
}

.social-icons a:hover{
    background:#fff;
    color:#000;
    transform:translateY(-5px);
}

.footer-bottom{
    margin-top:40px;
    text-align:center;
    padding:20px;
    border-top:1px solid rgba(255,255,255,.15);
    color:#bbb;
}

/* =========================
   Tablet
========================= */

@media (max-width:991px){

    .footer{
        padding:70px 0 0;
        background-position:center;
        background-size:cover;
    }

    .footer-container{
        grid-template-columns:repeat(2,1fr);
        gap:35px;
        padding:0 30px;
    }

}


/* =========================
   Mobile
========================= */

@media (max-width:767px){

    .footer{
        padding:50px 0 0;
        text-align:center;
        background-position:center;
        background-size:cover;
    }

    .footer-container{

        grid-template-columns:1fr;

        gap:30px;

        padding:0 20px;

    }

    .footer-box h2,
    .footer-box h3{
        margin-bottom:12px;
    }

    .footer-box p{
        font-size:15px;
        line-height:1.7;
    }

    .footer-box ul li{
        margin-bottom:8px;
    }

    .social-icons{

        justify-content:center;

    }

    .social-icons a{

        width:40px;
        height:40px;

    }

    .footer-bottom{

        margin-top:30px;
        padding:15px;
        font-size:14px;

    }

}






  
        .news-container{
    max-width:1300px;
    margin:auto;
    padding:40px 20px;
}

.news-heading{
    text-align:center;
    margin-bottom:50px;
}

.news-heading h1{
    font-size:42px;
    color:#155724;
    font-weight:700;
}

.news-heading p{
    color:#777;
    font-size:18px;
}

.news-card{

    display:flex;
    gap:30px;

    background:#fff;

    margin-bottom:30px;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #eee;

    transition:.3s;
}

.news-card:hover{
    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.news-image{
    width:380px;
    height:260px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f8f8f8;
}

.news-image img{
    width:100%;
    height:100%;

    object-fit:contain;

    display:block;
}
.news-content{
    padding:25px;
    flex:1;
}

.news-date{

    display:inline-block;

    background:#f1f8f3;

    color:#1b5e20;

    padding:8px 15px;

    border-radius:30px;

    font-size:14px;

    margin-bottom:15px;
}

.news-content h2{

    font-size:28px;

    line-height:1.4;

    margin-bottom:15px;

    color:#222;
}

.news-content p{

    color:#666;

    line-height:1.9;

    font-size:16px;

    margin-bottom:20px;
}

.read-btn{

    display:inline-block;

    background:#14532d;

     color:#fff !important;

    text-decoration:none;

    padding:12px 25px;

    border-radius:8px;

    font-weight:600;
}

.read-btn:hover{

    background:#0f3d21;
    color:#fff;
}

@media(max-width:768px){

    .news-card{
        flex-direction:column;
    }

  .news-image{
        width:100%;
        height:220px;
    }

     .news-image img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .news-heading h1{
        font-size:30px;
    }

    .news-content h2{
        font-size:22px;
    }

    .news-content{
        padding:20px;
    }

}








        .more-text{
    display:none;
}

.read-btn{
    color:#16a34a;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
}





 
.side-home-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: gold;
    color: #000;
    padding: 12px 18px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px 0 0 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: 0.3s;
    z-index: 9999;
}

.side-home-btn:hover {
    background: #d4af37; /* dark gold */
    padding-right: 25px;
}








  /* =========================
   BODY
========================= */

body{
    margin:0;
    padding:40px;
    background:#FAFCFA;
    font-family:Arial,sans-serif;
}

/* =========================
   PRODUCT GRID
========================= */

.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

/* =========================
   PRODUCT CARD
========================= */

.product-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    position:relative;
    border:1px solid #eadfcf;
    transition:.4s;
    display:flex;
    flex-direction:column;
    height:500px;
}

.product-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

/* =========================
   OFFER TAG
========================= */

.offer-tag{
    position:absolute;
    top:15px;
    left:15px;
    background:#ff0000;
    color:#fff;
    font-size:14px;
    font-weight:700;
    padding:7px 14px;
    border-radius:30px;
    z-index:10;
}

/* =========================
   IMAGE
========================= */

.product-image{
    height:300px;
    min-height:300px;
    max-height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#fff;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:15px;
    transition:.4s;
}

.product-card:hover .product-image img{
    transform:scale(1.05);
}

/* =========================
   CONTENT
========================= */

.product-content{
    padding:15px 18px;
    display:flex;
    flex-direction:column;
    flex:1;
}

/* =========================
   PRODUCT TITLE
========================= */

.product-content h3{
  font-size:20px;

    color:#111;

    font-weight:700;

    margin:0 0 8px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    text-align:center;
}

/* =========================
   PRICE
========================= */

.price-box{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:10px;

    text-align:center;
}

.new-price{

    font-size:28px;

    font-weight:700;

    color:#111;
}

.old-price{

    font-size:18px;

    color:#999;

    text-decoration:line-through;
}
/* =========================
   SELECT
========================= */

.size-select{
    width:100%;
    height:50px;
    border:2px solid #ddd;
    border-radius:30px;
    padding:0 15px;
    font-size:16px;
    background:#fff;
    outline:none;
    margin-bottom:12px;
}

/* =========================
   BUTTON
========================= */

.cart-btn{
    width:100%;
    height:52px;
    border:none;
    border-radius:30px;
    background:#1d9c43;
    color:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.cart-btn:hover{
    background:#167a34;
    color:#fff;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    body{
        padding:15px;
    }

    .product-grid{
        gap:15px;
    }

    .product-card{
        height:480px;
    }

    .product-image{
        height:220px;
        min-height:220px;
        max-height:220px;
    }

    .product-image img{
        padding:10px;
    }

    .product-content{
        padding:12px 15px;
    }

    .product-content h3{
        font-size:18px;
          text-align:center;
    }

    .new-price{
        font-size:24px;
          text-align:center;
    }

    .old-price{
        font-size:14px;
          text-align:center;
    }

    .size-select{
        height:45px;
        font-size:15px;
    }

    .cart-btn{
        height:48px;
        font-size:16px;
    }
}









        /* জেনারেল স্টাইল */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .container {
            width: 85%;
            margin: 0 auto;
            max-width: 1200px;
        }

        /* 🌟 HERO SECTION STYLE */
        .hero-section {
            /* এখানে আপনার সরিষার ক্ষেত বা তেলের সুন্দর ব্যাকগ্রাউন্ড ইমেজ দিন */
            background:    url('../img/homeback.png') center center/cover no-repeat;
              
            color: #fff;
            padding: 100px 0;
            text-align: center;
        }
        .hero-section h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            color: #ffcc00; /* আকর্ষণীয় হলুদ রঙ */
        }
        .hero-section p {
            font-size: 1.2rem;
            margin-bottom: 35px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        /* B2B এবং B2C দুটি আলাদা বাটন */
        .cta-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .btn {
            display: inline-block;
            padding: 14px 28px;
            font-size: 1rem;
            font-weight: bold;
            text-decoration: none;
            border-radius: 5px;
            transition: 0.3s ease;
        }
        .btn-b2c {
            background-color: #ffcc00;
            color: #000;
        }
        .btn-b2c:hover {
            background-color: #e6b800;
        }
        .btn-b2b {
            background-color: transparent;
            color: #fff;
            border: 2px solid #fff;
        }
        .btn-b2b:hover {
            background-color: #fff;
            color: #000;
        }

    @media (max-width:992px){

    .container{
        width:92%;
    }

    .hero-section{
        padding:70px 0;
        background-position:center;
    }

    .hero-section h1{
        font-size:2.2rem;
        line-height:1.3;
    }

    .hero-section p{
        font-size:1.05rem;
        line-height:1.7;
        max-width:100%;
        margin-bottom:30px;
    }

}


/* ==========================
   Mobile (768px)
========================== */

@media (max-width:768px){

    .container{
        width:94%;
    }

    .hero-section{

        padding:55px 0;
        background-position:center;
        background-size:cover;
    }

    .hero-section h1{

        font-size:1.8rem;
        line-height:1.35;
        margin-bottom:15px;

    }

    .hero-section p{

        font-size:15px;
        line-height:1.7;
        margin-bottom:25px;

    }

    .cta-container{

        flex-direction:column;
        align-items:center;
        gap:15px;

    }

    .btn{

        width:100%;
        max-width:320px;

        text-align:center;

        padding:14px 20px;

        font-size:16px;

    }

}


/* ==========================
   Small Mobile (480px)
========================== */

@media (max-width:480px){

    .hero-section{

        padding:45px 0;

    }

    .hero-section h1{

        font-size:1.55rem;

    }

    .hero-section p{

        font-size:14px;

    }

    .btn{

        max-width:100%;

    }

}
     
 
        .app-download-bar{
    width:100%;
    background:#045540;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:3px 8px;
    box-sizing:border-box;
    flex-wrap:wrap;
}

.app-left{
    display:flex;
    align-items:center;
    gap:15px;
}

.app-logo{
    width:52px;
    height:52px;
    border-radius:12px;
    background:#0d6b53;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.app-logo img{
    width:36px;
    height:36px;
    object-fit:contain;
}

.app-text{
      display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;          /* এখানে gap নিয়ন্ত্রণ করো */
    line-height:1.1;
}

.app-title{
  font-size:16px;
    font-weight:500;
    color:#fff;
    margin:0;         /* সবচেয়ে গুরুত্বপূর্ণ */
    padding:0;
    line-height:1.1;

    background:linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 30%,
        #ffd700 50%,
        #ffffff 70%,
        #ffffff 100%
    );

    background-size:200% 100%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:premiumFlare 2s linear infinite;
}

@keyframes premiumFlare{
    from{
        background-position:200% 0;
    }
    to{
        background-position:-200% 0;
    }
}
.download-btn{
    background:#f7d87c;
    color:#111;
    text-decoration:none;
    padding:10px 20px;
    border-radius:14px;
    font-size:15px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
    transition:.3s;
}

.download-btn:hover{
    background:#ffd95b;
    color:#111;
    text-decoration:none;
    transform:translateY(-2px);
}

@media(max-width:768px){

    .app-download-bar{
        display:flex;
        flex-direction:row;      /* Row-ই থাকবে */
        justify-content:space-between;
        align-items:center;
        padding:8px 10px;
        flex-wrap:nowrap;
        gap:8px;
    }

    .app-left{
        display:flex;
        flex-direction:row;      /* Logo + Text পাশাপাশি */
        align-items:center;
        gap:8px;
        flex:1;
        min-width:0;
    }

    .app-logo{
        width:42px;
        height:42px;
        flex-shrink:0;
    }

    .app-logo img{
        width:28px;
        height:28px;
    }

    .app-title{
        font-size:13px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .download-btn{
        padding:8px 12px;
        font-size:13px;
        border-radius:10px;
        width:auto;              /* 100% নয় */
        white-space:nowrap;
        flex-shrink:0;
    }

}
   











.px-subscribe-box{
    position:relative;
    display:flex;
    align-items:center;
    background:#023d2a;
    border:2px solid #2b6a56;
    border-radius:12px;
    overflow:visible;   /* খুব গুরুত্বপূর্ণ */
}

.px-subscribe-input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    color:#fff;
    font-size:16px;
    padding:22px 16px 8px;
}

.px-subscribe-input::placeholder{
    color:transparent;
}

.px-floating-label{
    position:absolute;
    left:14px;
    top:18px;
    padding:0 6px;
    background:#023d2a;   /* TextBox-এর background-এর same color */
    color:#cfd8d5;
    transition:.25s ease;
    pointer-events:none;
    z-index:2;            /* Border-এর উপরে থাকবে */
}


.px-subscribe-input:focus + .px-floating-label,
.px-subscribe-input:not(:placeholder-shown) + .px-floating-label{
    top:-10px;            /* Border-এর উপরে উঠবে */
    font-size:12px;
    color:#f7d87c;
}

.px-subscribe-btn{
    width:55px;
    height:55px;
    border:none;
    background:#f7d87c;
    color:#023d2a;
    display:flex;
    align-items:center;
    justify-content:center;
}