/* 
 * Custom Theme Colors (Pink & Dark Navy)
 * Responsive + Scroll-with-page Background
 * Overrides for Molla default theme
 */

:root {
    --primary-color: #E83D6D;
    --primary-color-hover: #C9335D;
    --navy-color: #242B45;
    --navy-color-dark: #1A1F33;
}

/* ============================================
 * GLOBAL BACKGROUND — Scrolls with page
 * ============================================ */

html {
    min-height: 100%;
    background: linear-gradient(135deg, #E83D6D 50%, #242B45 50%) !important;
    background-attachment: scroll !important;
}

body {
    position: relative;
    min-height: 100vh;
    background: transparent !important;
}

body::before {
    display: none !important;
}

/* ============================================
 * TRANSPARENT WRAPPERS
 * ============================================ */

.page-wrapper,
#page-wrapper,
.page-content,
.main,
.container,
.container-fluid,
.row,
.bg-white,
.bg-light,
[class*="section"],
[class*="wrapper"] {
    background-color: transparent !important;
    background-image: none !important;
}

/* ============================================
 * GLOBAL TEXT
 * ============================================ */

body, p, h1, h2, h3, h4, h5, h6, span {
    color: #fff;
}

.text-primary,
p.text-primary,
span.text-primary,
h1.text-primary,
h2.text-primary,
h3.text-primary,
h4.text-primary {
    color: #fff !important;
}

.text-dark {
    color: #333 !important;
}

/* ============================================
 * HEADER / NAVBAR
 * ============================================ */

.header {
    background: linear-gradient(135deg, #E83D6D 50%, #242B45 50%) !important;
    color: #fff !important;
    position: relative;
    z-index: 999;
}

.header p,
.header h1,
.header h2,
.header h3,
.header h4,
.header h5,
.header h6,
.header span,
.header a,
.header li,
.header i,
.header .cart-count,
.header .wishlist-count {
    color: #fff !important;
}

/* Menu links */
.header .menu li a,
.header .main-nav .menu > li > a {
    color: #fff !important;
}

.header .menu li a:hover,
.header .main-nav .menu > li > a:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Icons (cart, wishlist, search) */
.header .header-icon,
.header .icon-shopping-cart,
.header .icon-heart-o,
.header .icon-search {
    color: #fff !important;
}

/* Dropdown — navy background */
.header .menu .megamenu,
.header .menu .dropdown-box,
.header .menu li ul {
    background-color: var(--navy-color) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

.header .menu .megamenu a,
.header .menu .dropdown-box a,
.header .menu li ul a {
    color: #fff !important;
}

.header .menu .megamenu a:hover,
.header .menu .dropdown-box a:hover,
.header .menu li ul a:hover {
    color: var(--primary-color) !important;
}

/* Header top bar */
.header-top {
    background: rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

.header-top a,
.header-top span,
.header-top p {
    color: #fff !important;
}

/* Search box */
.header .search-wrapper input,
.header .search-toggle {
    color: #fff !important;
    border-color: rgba(255,255,255,0.4) !important;
    background: rgba(255,255,255,0.1) !important;
}

.header .search-wrapper input::placeholder {
    color: rgba(255,255,255,0.6) !important;
}

/* Mobile */
@media (max-width: 991px) {
    .header {
        background: linear-gradient(180deg, #E83D6D 50%, #242B45 50%) !important;
    }

    .mobile-menu-toggle span {
        background-color: #fff !important;
    }
}

/* ============================================
 * LINKS & BUTTONS
 * ============================================ */

a, a:hover, a:focus {
    color: var(--primary-color);
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
    box-shadow: none;
}

.btn-outline-primary-2 {
    color: var(--primary-color);
    background-color: transparent;
    background-image: none;
    border-color: var(--primary-color);
}

.btn-outline-primary-2:hover,
.btn-outline-primary-2:focus,
.btn-outline-primary-2.focus,
.btn-outline-primary-2:not(:disabled):not(.disabled):active,
.btn-outline-primary-2:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary-2.dropdown-toggle {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none;
}

.btn-more-custom {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    display: inline-flex;
    align-items: center;
    padding: 1rem 3rem;
    font-size: 1.6rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-more-custom:hover {
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
}

/* ============================================
 * SECTION HEADINGS
 * ============================================ */



/* ============================================
 * WHY CHOOSE US SECTION
 * ============================================ */

.why-choose-us {
    background-color: transparent !important;
    color: #fff !important;
    position: relative;
    padding: 6rem 0;
}

.wcu-eyebrow {
    color: var(--primary-color) !important;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1rem;
}

.wcu-heading {
    color: #fff !important;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.wcu-subheading {
    color: #FADAE2 !important;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 2rem;
}

.wcu-divider {
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 2rem 0;
}

.wcu-tagline {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.6rem;
    line-height: 1.6;
}

/* Tags / Circles */
.wcu-tags-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.wcu-tag {
    background-color: #fff !important;
    color: var(--navy-color) !important;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.wcu-tag:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* Glass Cards */
.wcu-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.wcu-card-glass {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.wcu-card-glass:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-5px);
}

.wcu-card-icon {
    font-size: 3rem;
    color: var(--primary-color) !important;
    margin-bottom: 1rem;
    display: block;
}

.wcu-card-title {
    color: #fff !important;
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0;
}

.wcu-tags{
    background-color:#e83d6d !important;
    color: var(--navy-color) !important;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.wcu-tags:hover {
    background-color:  #fff !important;
    color: #e83d6d  !important;
    transform: translateY(-2px);
}

/* ============================================
 * RESPONSIVE — Mobile & Tablet
 * ============================================ */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    body::before {
        /* Slightly adjust diagonal for tablet */
        background: linear-gradient(145deg, #E83D6D 50%, #242B45 50%);
    }

    .wcu-heading {
        font-size: 2.8rem;
    }

    .wcu-cards-row {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .wcu-tag {
        width: 85px;
        height: 85px;
        font-size: 1rem;
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    body::before {
        /* On mobile: top pink, bottom navy — easier to read */
        background: linear-gradient(180deg, #E83D6D 50%, #242B45 50%);
    }

    .wcu-heading {
        font-size: 2.2rem;
    }

    .wcu-subheading {
        font-size: 1.6rem;
    }

    .wcu-cards-row {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .wcu-tags-row {
        justify-content: center;
    }

    .wcu-tag {
        width: 80px;
        height: 80px;
        font-size: 0.95rem;
    }

    .btn-more-custom {
        padding: 0.8rem 2rem;
        font-size: 1.4rem;
    }

    .why-choose-us {
        padding: 4rem 0;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    body::before {
        background: linear-gradient(180deg, #E83D6D 45%, #242B45 45%);
    }

    .wcu-heading {
        font-size: 1.9rem;
    }

    .wcu-tag {
        width: 70px;
        height: 70px;
        font-size: 0.85rem;
    }
}

/* ============================================
 * STICKY HEADER SCROLL FIX
 * Scroll করলেও gradient থাকবে
 * ============================================ */

.header.sticky-header,
.header.fixed,
.header.is-sticky,
.header.scrolled,
.sticky-header,
.header-sticky,
.fixed-header,
header.sticky,
header.fixed {
    background: linear-gradient(135deg, #E83D6D 50%, #242B45 50%) !important;
    color: #fff !important;
}

.header.sticky-header *,
.header.fixed *,
.header.is-sticky *,
.header.scrolled *,
.sticky-header *,
.header-sticky *,
.fixed-header * {
    color: #fff !important;
}

/* Molla specific sticky override */
.header .sticky-wrapper,
.header .sticky-bar,
.sticky-bar .header-middle,
.sticky-bar .header-bottom,
.sticky-wrapper .header-middle,
.sticky-wrapper .header-bottom {
    background: linear-gradient(135deg, #E83D6D 50%, #242B45 50%) !important;
}

.sticky-bar .menu li a,
.sticky-wrapper .menu li a {
    color: #fff !important;
}

.sticky-bar .menu li a:hover,
.sticky-wrapper .menu li a:hover {
    color: rgba(255,255,255,0.75) !important;
}

/* ============================================
 * HEADER MENU — #F3D4A2 Golden Cream + Glow
 * ============================================ */

.header .menu li a,
.header .main-nav .menu > li > a,
.header .navigation li a,
.sticky-bar .menu li a,
.sticky-wrapper .menu li a {
    color: #F3D4A2 !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
    font-size:medium;
    
}

.header .menu li a:hover,
.header .main-nav .menu > li > a:hover,
.header .navigation li a:hover,
.sticky-bar .menu li a:hover,
.sticky-wrapper .menu li a:hover {
    color: #F3D4A2 !important;
    text-shadow: 0 0 8px rgba(243, 212, 162, 0.8),
                 0 0 16px rgba(243, 212, 162, 0.4) !important;
}

/* Header icons, cart, wishlist */
.header .header-icon,
.header .icon-shopping-cart,
.header .icon-heart-o,
.header .icon-search,
.header .cart-count,
.header .wishlist-count,
.header span,
.header i {
    color: #F3D4A2 !important;
    
}

/* Header top bar text */
.header-top a,
.header-top span,
.header-top p {
    color: #F3D4A2 !important;
    
}