/* Global Settings & Variables */

:root {

    --primary-color: #0066ff;

    --text-color: #333333;

    --light-gray: #f5f6fa;

    --border-color: #eaeaea;

    --discount-color: #ff3b30;

    --new-color: #34c759;

}



body {

    margin: 0;

    padding: 0;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background-color: #ffffff;

    color: var(--text-color);

}



/* Header & Navbar */

.main-header {

    padding: 15px;

    background: #fff;

    border-bottom: 1px solid var(--border-color);

}

.nav-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}

.brand-area {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 1.3rem;

    font-weight: bold;

    color: #111;

}

.nav-icons {

    display: flex;

    gap: 18px;

    font-size: 1.25rem;

    position: relative;

}

.icon-badge {

    position: absolute;

    top: -8px;

    right: -8px;

    background: var(--discount-color);

    color: white;

    font-size: 0.7rem;

    padding: 2px 5px;

    border-radius: 50%;

}

/* ওয়েলকাম লেখার স্টাইল ও অ্যানিমেশন */
.welcome {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    
    /* ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট (রঙিন ইফেক্ট) */
    background: linear-gradient(120deg, #ff416c, #ff4b2b, #4f46e5, #06b6d4, #ff416c);
    background-size: 200% auto;
    
    /* টেক্সটের ভেতরে গ্রেডিয়েন্ট কালার দেখানোর জন্য */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* অ্যানিমেশন ট্র্রিগার */
    animation: shineEffect 4s linear infinite, pulseEffect 2s ease-in-out infinite alternate;
}

/* কালার পরিবর্তনের অ্যানিমেশন (শাইন ইফেক্ট) */
@keyframes shineEffect {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* হালকা জুম হওয়া ও কমার অ্যানিমেশন */
@keyframes pulseEffect {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}



.search-category-row {

    display: flex;

    gap: 10px;

}

.search-box {

    flex: 1;

    position: relative;

}

.search-box input {

    width: 85%;

    padding: 10px 10px 10px 35px;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    background: var(--light-gray);

}

.search-box i {

    position: absolute;

    left: 12px;

    top: 13px;

    color: #888;

}

.category-dropdown-btn {
    background: var(--primary-color);
    color: white;
    /* উপর-নিচে প্যাডিং ১০ থেকে কমিয়ে ৮ করা হলো, ডানে-বামে ১৫-ই থাকবে */
    padding: 6px 15px; 
    border-radius: 8px;
    border: none;
    font-weight: 500;
    display: inline-flex;  
    align-items: center;
    gap: 5px;
    text-decoration: none; 
    line-height: 1;        
    box-sizing: border-box;
    font-size: 0.9rem; /* বাটনের ফন্ট সাইজ সামান্য ছোট করা হলো যাতে দেখতে নিখুঁত লাগে */
}



/* Swiper Container */

.hero-slider {

    width: 100%;

    max-width: 720px; /* আপনার চাহিদা অনুযায়ী উইডথ */

    height: 300px;    /* আপনার চাহিদা অনুযায়ী হাইট */

    margin: 0 auto 20px auto; /* মাঝখানে রাখার জন্য */

    border-radius: 15px;

    overflow: hidden;

    position: relative;

}



/* স্লাইডারের ভেতরের ইমেজের জন্য */

.swiper-slide {

    width: 100%;

    height: 100%;

}



.swiper-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;      /* মাঝখান থেকে ক্রপ করবে */

    object-position: center; /* সেন্টারে ফোকাস রাখবে */

    display: block;

}



/* বাটন পজিশন */

.btn-shop1-now {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    background: #1cc88a;

    color: white;

    padding: 10px 25px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: bold;

    z-index: 10;

}

.btn-shop2-now {

    /* position: absolute;  <-- এটি সরিয়ে দিন */

    display: inline-block; /* অথবা block */

    width: fit-content;    /* বাটনটি যতটুকু কন্টেন্ট ততটুকুই জায়গা নেবে */

    margin-top: 15px;      /* আপনার কার্ডের টেক্সট থেকে যতটুকু দূরত্ব রাখতে চান */

    background: #1cc88a;

    color: white;

    padding: 10px 25px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: bold;

    z-index: 10;

    

    

}

/* মোবাইল রেসপনসিভ: স্ক্রিনের প্রস্থ ৭৬৮ পিক্সেল বা তার কম হলে */
@media (max-width: 768px) {
    .hero-slider {
        height: 200px !important; 
    }

    /* ১. প্রোডাক্টের ইমেজ যেন তার সীমানা পেরিয়ে পুরো লেআউট নষ্ট বা চওড়া না করে ফেলে */
    .product-img-wrapper img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* ২. মোবাইলে সার্চ বক্সের উইডথ ফিক্সড ৮৫% এর বদলে পুরো জায়গা নিয়ে রেসপন্সিভ কাজ করার জন্য */
    .search-box input {
        width: 70% !important;
    }

    /* ৩. মোবাইলে ফিচার সেকশনের গ্রিড কলাম লেআউট ফিক্স করা */
    .features-section {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
        padding: 10px !important;
        gap: 10px !important;
    }

   
}



/* ক্যাটাগরি সেকশন স্ক্রোলিং এর সুবিধা (যদি ক্যাটাগরি বেশি হয়) */

.categories-section {

    padding: 15px;

    display: flex;

    gap: 15px;

    overflow-x: auto;

    white-space: nowrap;

    scrollbar-width: none; /* Firefox এর জন্য স্ক্রোলবার হাইড */

}

.categories-section::-webkit-scrollbar {

    display: none; /* Chrome, Safari এর জন্য স্ক্রোলবার হাইড */

}



.category-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    min-width: 65px; /* ফিক্সড উইডথ */

    text-decoration: none;

    color: var(--text-color);

}



/* গোল ও নির্দিষ্ট আকারের কন্টেইনার */

.category-icon-circle {

    width: 60px;

    height: 60px;

    background: #f5f6fa;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden; /* ভেতরের ইমেজ যাতে বাইরে বের না হতে পারে */

    border: 1px solid #eaeaea;

}



/* ইমেজটির সাইজ ডাটাবেজে যেমনই হোক, এখানে ফিক্সড থাকবে */

.category-icon-circle img {

    width: 100%;

    height: 100%;

    object-fit: cover; /* ইমেজটিকে স্ট্রেচ না করে সুন্দরভাবে কাটবে */

    display: block;

}



.category-item span {

    font-size: 0.75rem;

    font-weight: 500;

    text-align: center;

    max-width: 75px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis; /* নাম বড় হলে ডট ডট (...) দেখাবে */

}



/* Features Grid Update */

.features-section {

    margin: 20px 15px;

    background: white; /* সাদা ব্যাকগ্রাউন্ড ক্লিন লুকের জন্য */

    border: 1px solid blue;

    border-radius: 12px;

    padding: 20px;

    display: grid;

    /* মোবাইল স্ক্রিনে ১টি কলাম, বড় স্ক্রিনে ২টি কলাম */

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 20px;

    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* হালকা ছায়া */

}



.feature-box {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px;

    border-radius: 8px;

    transition: background 0.3s;

}



.feature-box:hover {

    background: #f9f9f9; /* হোভার করলে হালকা ইফেক্ট */

}



.feature-box i {

    font-size: 1.5rem; /* আইকন কিছুটা বড় করা হলো */

    color: var(--primary-color);

    background: #eef2ff; /* আইকনের পেছনে হালকা রঙ */

    padding: 10px;

    border-radius: 50%;

}



.feature-info h5 {

    margin: 0;

    font-size: 0.9rem;

    font-weight: 600;

    color: #333;

}



.feature-info p {

    margin: 2px 0 0 0;

    font-size: 0.75rem;

    color: #666;

    line-height: 1.2;

}



/* Promo Banners Grid */

.promo-section {

    margin: 15px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

}

.promo-card {

    border-radius: 12px;

    padding: 15px;

    color: #111;

    background-size: cover;

    background-position: center;

    min-height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.promo-1 { background-color: #ffeae6; }

.promo-2 { background-color: #e3f9ff; }

.promo-card h4 { margin: 0; font-size: 0.95rem; }

.promo-card p { margin: 5px 0; font-size: 0.75rem; color: #555; }



/* Products Grid Section */

.section-header {

    padding: 0 15px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

}

.section-header h3 { margin: 0; font-size: 1.1rem; }

.view-all { color: #666; text-decoration: none; font-size: 0.85rem; }



.products-grid {

    padding: 15px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

}

.product-card {

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 10px;

    position: relative;

    background: #fff;

}

.product-badge {

    position: absolute;

    top: 10px;

    left: 10px;

    font-size: 0.7rem;

    padding: 3px 6px;

    border-radius: 4px;

    color: white;

    font-weight: bold;

}

.badge-discount { background: var(--discount-color); }

.badge-new { background: var(--new-color); }

.wishlist-btn {

    position: absolute;

    top: 10px;

    right: 10px;

    color: #ccc;

    font-size: 1.1rem;

}

.product-img-wrapper {

    text-align: center;

    margin: 10px 0;

}

.product-img-wrapper img {

    max-height: 110px;

    object-fit: contain;

}

.product-card h4 {

    margin: 5px 0;

    font-size: 0.85rem;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.price-row {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 5px 0;

}

.current-price { font-weight: bold; color: #000; font-size: 0.9rem; }

.old-price { text-decoration: line-through; color: #aaa; font-size: 0.75rem; }

.rating-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.75rem;

    color: #666;

}

.rating-row i { color: #ffcc00; }

.add-to-cart-btn {

    border: 1px solid var(--primary-color);

    color: var(--primary-color);

    background: transparent;

    width: 28px;

    height: 28px;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

}



/* Exclusive Banner */

.exclusive-banner {

    margin: 15px;

    background: #002244;

    color: white;

    border-radius: 15px;

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



/* Bottom Navigation Bar */

.bottom-nav {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: #fff;

    border-top: 1px solid var(--border-color);

    display: flex;

    justify-content: space-around;

    padding: 10px 0;

    z-index: 999;

}

.bottom-nav-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    font-size: 0.7rem;

    color: #888;

    text-decoration: none;

}

.bottom-nav-item.active {

    color: var(--primary-color);

}

.bottom-nav-item i {

    font-size: 1.2rem;

}



/* Spacer for bottom nav fixed position */

.bottom-spacer {

    height: 70px;

}