/* ════════════════════════════════════════
       ROOT — White + Red Professional Palette
    ════════════════════════════════════════ */
 :root {
     /* Brand */
     --red: #D0211C;
     --red-dark: #A8110D;
     --red-light: #FDECEA;
     --red-mid: #F8C6C4;
     --red-glow: rgba(208, 33, 28, 0.15);

     /* Neutrals */
     --white: #FFFFFF;
     --bg: #F4F6F9;
     --surface: #FFFFFF;
     --border: #E2E6EA;
     --border-dark: #CDD2D8;
     --text-primary: #1A1D23;
     --text-secondary: #5A6272;
     --text-muted: #9BA4B0;

     /* UI Roles */
     --topbar-bg: var(--red);
     --topbar-text: var(--white);
     --header-bg: var(--white);
     --header-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
     --header-border: var(--border);
     --btn-bg: var(--red);
     --btn-text: var(--white);
     --btn-hover: var(--red-dark);
     --search-bg: var(--bg);
     --search-border: var(--border-dark);
     --search-focus: var(--red);
     --icon-color: var(--text-primary);
     --icon-hover: var(--red);
     --sidebar-bg: var(--white);
     --sidebar-border: var(--border);
     --overlay: rgba(26, 29, 35, 0.5);
     --badge-bg: var(--red);

     --radius-sm: 6px;
     --radius-md: 10px;
     --transition: 0.22s ease;
     --font-ui: 'Inter', sans-serif;
     --font-brand: 'Sora', sans-serif;
 }

 /* ════════════════════════════════════════
       RESET & BASE
    ════════════════════════════════════════ */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html,
 body {
     width: 100%;
     max-width: 100vw;
     overflow-x: hidden;
 }

 body {
     font-family: var(--font-ui);
     background: var(--bg);
     color: var(--text-primary);
 }

 /* header css start */

 /* ── TOPBAR ── */
 .topbar {
     background: var(--topbar-bg);
     color: var(--topbar-text);
     font-size: 0.72rem;
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     padding: 7px 0;
     overflow: hidden;
     white-space: nowrap;
     position: relative;
 }

 .topbar-track {
     display: inline-flex;
     gap: 60px;
     animation: marquee 26s linear infinite;
 }

 .topbar-track span {
     flex-shrink: 0;
 }

 @keyframes marquee {
     0% {
         transform: translateX(0)
     }

     100% {
         transform: translateX(-50%)
     }
 }

 .topbar::after {
     content: '';
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     width: 60px;
     background: linear-gradient(to left, #D0211C, transparent);
     pointer-events: none;
 }

 /* ── MAIN HEADER ── */
 .main-header {
     background: #FDECEA;
     border-bottom: 1px solid var(--header-border);
     box-shadow: var(--header-shadow);
     position: sticky;
     top: 0;
     z-index: 900;
 }

 .header-accent {
     height: 3px;
     background: linear-gradient(90deg, var(--red) 0%, #FF6B68 50%, var(--red) 100%);
     background-size: 200% 100%;
     animation: shimmer 3s ease infinite;
 }

 @keyframes shimmer {
     0% {
         background-position: 200% 0
     }

     100% {
         background-position: -200% 0
     }
 }


 .header-inner {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 0 24px;
     height: 72px;
     max-width: 1600px;
     margin: 0 auto;
     position: relative;
     /* ADD THIS */
 }

 /* ── EXPLORE BTN ── */
 .btn-explore {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--btn-bg);
     color: var(--btn-text);
     border: none;
     border-radius: var(--radius-sm);
     font-family: var(--font-ui);
     font-size: 0.82rem;
     font-weight: 700;
     letter-spacing: 0.01em;
     padding: 10px 16px;
     cursor: pointer;
     flex-shrink: 0;
     white-space: nowrap;
     transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
     box-shadow: 0 2px 8px var(--red-glow);
 }

 .btn-explore:hover {
     background: var(--btn-hover);
     box-shadow: 0 4px 16px rgba(208, 33, 28, 0.28);
     transform: translateY(-1px);
 }

 .btn-explore:active {
     transform: translateY(0);
 }

 .btn-explore i {
     font-size: 1rem;
 }

 /* ── LOGO ── */
 .logo-wrap {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     pointer-events: none;
     /* যেন click block না করে */
 }

 .logo-link {
     pointer-events: all;
     display: flex;
     align-items: center;
     text-decoration: none;
 }



 .logo-img {
     height: 110px;
     width: auto;
     max-width: 170px;
     object-fit: contain;
     display: block;
     transition: opacity var(--transition), transform var(--transition);
 }

 .logo-link:hover .logo-img {
     opacity: 0.88;
     transform: scale(1.03);
 }

 /* ── CENTER SEARCH ── */
 .search-center {
     margin-left: auto;
     /* push to right side */
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     padding: 0 12px;
 }


 .search-box {
     display: flex;
     align-items: center;
     background: var(--white);
     border: 2px solid var(--search-border);
     border-radius: 10px;
     overflow: hidden;
     width: 300px;
     /* fixed smaller width */
     transition: border-color var(--transition), box-shadow var(--transition);
 }

 .search-box:focus-within {
     border-color: var(--red);
     box-shadow: 0 0 0 4px var(--red-glow);
 }

 .search-category {
     background: #f5eded;
     border: none;
     border-right: 1.5px solid var(--border);
     color: var(--text-secondary);
     font-family: var(--font-ui);
     font-size: 0.78rem;
     font-weight: 600;
     padding: 0 12px;
     height: 44px;
     cursor: pointer;
     outline: none;
     flex-shrink: 0;
     transition: background var(--transition);
 }

 .search-category:hover {
     background: var(--red-light);
 }

 .search-input {
     flex: 1;
     border: none;
     background: none;
     color: var(--text-primary);
     font-family: var(--font-ui);
     font-size: 0.88rem;
     padding: 0 14px;
     height: 44px;
     outline: none;
     min-width: 0;
 }

 .search-input::placeholder {
     color: var(--text-muted);
 }

 .search-submit {
     background: var(--red);
     border: none;
     color: #fff;
     padding: 0 18px;
     height: 44px;
     cursor: pointer;
     font-size: 1rem;
     flex-shrink: 0;
     transition: background var(--transition);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .search-submit:hover {
     background: var(--red);
 }

 /* ── RIGHT ACTIONS ── */
 .header-actions {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
 }

 .action-btn {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2px;
     width: 52px;
     height: 52px;
     background: var(--white);
     border: 1.5px solid var(--border);
     border-radius: var(--radius-md);
     color: var(--icon-color);
     font-size: 1.2rem;
     text-decoration: none;
     cursor: pointer;
     flex-shrink: 0;
     transition: all var(--transition);
 }

 .action-btn:hover {
     background: var(--red-light);
     border-color: var(--red-mid);
     color: var(--red);
     transform: translateY(-1px);
     box-shadow: 0 3px 10px var(--red-glow);
 }

 .action-btn .action-label {
     font-size: 0.56rem;
     font-weight: 600;
     letter-spacing: 0.02em;
     line-height: 1;
     color: inherit;
 }

 .badge-dot {
     position: absolute;
     top: -5px;
     right: -5px;
     background: var(--badge-bg);
     color: #fff;
     font-size: 0.58rem;
     font-weight: 700;
     min-width: 18px;
     height: 18px;
     border-radius: 99px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid var(--white);
     padding: 0 3px;
     animation: pop .3s cubic-bezier(.4, 0, .2, 1);
 }

 @keyframes pop {
     0% {
         transform: scale(0)
     }

     70% {
         transform: scale(1.2)
     }

     100% {
         transform: scale(1)
     }
 }

 /* Mobile search toggle btn */
 .mobile-search-btn {
     display: none;
     width: 42px;
     height: 42px;
     background: var(--white);
     border: 1.5px solid var(--border);
     border-radius: var(--radius-md);
     align-items: center;
     justify-content: center;
     color: var(--icon-color);
     font-size: 1.1rem;
     cursor: pointer;
     transition: all var(--transition);
 }

 .mobile-search-btn:hover {
     background: var(--red-light);
     border-color: var(--red-mid);
     color: var(--red);
 }

 /* Cart open btn */
 .cart-open-btn {
     display: none;
 }

 /* Mobile searchbar */
 .mobile-searchbar {
     display: none;
     background: var(--white);
     border-top: 1px solid var(--border);
     padding: 10px 16px;
 }

 .mobile-searchbar.open {
     display: flex;
 }

 .mobile-searchbar input {
     flex: 1;
     background: var(--bg);
     border: 1.5px solid var(--border);
     border-radius: 8px 0 0 8px;
     color: var(--text-primary);
     font-family: var(--font-ui);
     font-size: 0.84rem;
     padding: 10px 14px;
     outline: none;
 }

 .mobile-searchbar input:focus {
     border-color: var(--red);
 }

 .mobile-searchbar button {
     background: var(--red);
     border: none;
     border-radius: 0 8px 8px 0;
     color: #fff;
     padding: 0 18px;
     font-size: 1rem;
     cursor: pointer;
 }

 /* ══════════════════════════════════
     LEFT SIDEBAR (categories)
  ══════════════════════════════════ */
 .sidebar-overlay {
     position: fixed;
     inset: 0;
     background: var(--overlay);
     z-index: 1000;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
     backdrop-filter: blur(2px);
 }

 .sidebar-overlay.active {
     opacity: 1;
     pointer-events: all;
 }

 .sidebar {
     position: fixed;
     top: 0;
     left: 0;
     width: min(320px, 88vw);
     height: 100dvh;
     background: var(--sidebar-bg);
     z-index: 1100;
     display: flex;
     flex-direction: column;
     transform: translateX(-100%);
     transition: transform 0.36s cubic-bezier(.4, 0, .2, 1);
     box-shadow: 6px 0 40px rgba(0, 0, 0, 0.14);
     border-right: 1px solid var(--border);
     overflow: hidden;
 }

 .sidebar.open {
     transform: translateX(0);
 }

 .sidebar-stripe {
     height: 4px;
     background: linear-gradient(90deg, var(--red), #FF6B68, var(--red));
     background-size: 200% 100%;
     animation: shimmer 3s ease infinite;
     flex-shrink: 0;
 }

 .sidebar-head {
     padding: 16px 18px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid var(--border);
     flex-shrink: 0;
 }

 .sidebar-head h6 {
     font-size: 0.95rem;
     font-weight: 800;
     color: var(--text-primary);
     margin: 0;
     display: flex;
     align-items: center;
     gap: 9px;
 }

 .sidebar-head h6 span {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 28px;
     height: 28px;
     background: var(--red-light);
     border-radius: 7px;
     color: var(--red);
     font-size: 0.9rem;
 }

 .sidebar-x {
     background: var(--bg);
     border: 1.5px solid var(--border);
     border-radius: 8px;
     color: var(--text-secondary);
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 0.95rem;
     transition: all 0.2s;
 }

 .sidebar-x:hover {
     background: var(--red-light);
     color: var(--red);
     border-color: var(--red-mid);
 }

 .sidebar-srch {
     padding: 12px 14px;
     border-bottom: 1px solid var(--border);
     flex-shrink: 0;
 }

 .sidebar-srch-inner {
     display: flex;
     background: var(--bg);
     border: 1.5px solid var(--border);
     border-radius: 8px;
     overflow: hidden;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 .sidebar-srch-inner:focus-within {
     border-color: var(--red);
     box-shadow: 0 0 0 3px var(--red-glow);
 }

 .sidebar-srch input {
     flex: 1;
     background: none;
     border: none;
     color: var(--text-primary);
     font-size: 0.82rem;
     font-family: var(--font-ui);
     padding: 9px 12px;
     outline: none;
 }

 .sidebar-srch input::placeholder {
     color: var(--text-muted);
 }

 .sidebar-srch button {
     background: none;
     border: none;
     color: var(--text-muted);
     padding: 0 12px;
     cursor: pointer;
     font-size: 0.88rem;
 }

 .sidebar-srch button:hover {
     color: var(--red);
 }

 .sidebar-body {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 6px 0 16px;
 }

 .sidebar-body::-webkit-scrollbar {
     width: 3px;
 }

 .sidebar-body::-webkit-scrollbar-thumb {
     background: var(--red-mid);
     border-radius: 3px;
 }

 .s-label {
     font-size: 0.62rem;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--text-muted);
     padding: 14px 16px 5px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .s-label::after {
     content: '';
     flex: 1;
     height: 1px;
     background: var(--border);
 }

 .sidebar-body a {
     display: flex;
     align-items: center;
     gap: 11px;
     padding: 9px 16px;
     color: var(--text-secondary);
     text-decoration: none;
     font-size: 0.84rem;
     font-weight: 500;
     border-left: 3px solid transparent;
     transition: all 0.18s;
 }

 .sidebar-body a:hover {
     background: var(--red-light);
     color: var(--red);
     border-left-color: var(--red);
     padding-left: 20px;
 }

 .sidebar-body a .s-icon {
     width: 30px;
     height: 30px;
     background: var(--bg);
     border-radius: 7px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.9rem;
     color: var(--text-muted);
     flex-shrink: 0;
     transition: all 0.18s;
 }

 .sidebar-body a:hover .s-icon {
     background: var(--red-mid);
     color: var(--red);
 }

 .s-arrow {
     margin-left: auto;
     font-size: 0.65rem;
     color: var(--border-dark);
 }

 .sidebar-promo {
     margin: 12px 14px;
     background: linear-gradient(135deg, var(--red), #E84040);
     border-radius: 10px;
     padding: 14px 16px;
     flex-shrink: 0;
 }

 .sidebar-promo p {
     color: rgba(255, 255, 255, 0.85);
     font-size: 0.72rem;
     margin-bottom: 4px;
 }

 .sidebar-promo strong {
     color: #fff;
     font-size: 0.9rem;
     display: block;
 }

 .sidebar-promo a {
     display: inline-block;
     margin-top: 8px;
     background: #fff;
     color: var(--red);
     font-size: 0.72rem;
     font-weight: 700;
     padding: 4px 12px;
     border-radius: 99px;
     text-decoration: none;
     border: none;
 }

 .sidebar-promo a:hover {
     background: var(--red-light);
 }

 .sidebar-foot {
     padding: 12px 16px;
     border-top: 1px solid var(--border);
     flex-shrink: 0;
     font-size: 0.68rem;
     color: var(--text-muted);
     text-align: center;
 }

 /* ══════════════════════════════════
     RIGHT SIDEBAR (ecommerce panel)
  ══════════════════════════════════ */
 .right-overlay {
     position: fixed;
     inset: 0;
     background: var(--overlay);
     z-index: 1000;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
     backdrop-filter: blur(2px);
 }

 .right-overlay.active {
     opacity: 1;
     pointer-events: all;
 }

 .right-sidebar {
     position: fixed;
     top: 0;
     right: 0;
     width: min(380px, 92vw);
     height: 100dvh;
     background: var(--sidebar-bg);
     z-index: 1100;
     display: flex;
     flex-direction: column;
     transform: translateX(100%);
     transition: transform 0.36s cubic-bezier(.4, 0, .2, 1);
     box-shadow: -6px 0 40px rgba(0, 0, 0, 0.14);
     border-left: 1px solid var(--border);
     overflow: hidden;
 }

 .right-sidebar.open {
     transform: translateX(0);
 }

 .right-sidebar .sidebar-stripe {
     background: linear-gradient(90deg, #FF6B68, var(--red), #FF6B68);
 }

 /* Right sidebar tabs */
 .rs-tabs {
     display: flex;
     border-bottom: 1px solid var(--border);
     flex-shrink: 0;
 }

 .rs-tab {
     flex: 1;
     padding: 12px 6px;
     background: none;
     border: none;
     font-family: var(--font-ui);
     font-size: 0.75rem;
     font-weight: 700;
     color: var(--text-muted);
     cursor: pointer;
     border-bottom: 2px solid transparent;
     transition: all 0.2s;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
 }

 .rs-tab i {
     font-size: 1.1rem;
 }

 .rs-tab:hover {
     color: var(--red);
 }

 .rs-tab.active {
     color: var(--red);
     border-bottom-color: var(--red);
     background: var(--red-light);
 }

 /* Tab panels */
 .rs-panel {
     display: none;
     flex: 1;
     flex-direction: column;
     overflow: hidden;
 }

 .rs-panel.active {
     display: flex;
 }

 /* Cart panel */
 .rs-panel-body {
     flex: 1;
     overflow-y: auto;
     padding: 12px 16px;
 }

 .rs-panel-body::-webkit-scrollbar {
     width: 3px;
 }

 .rs-panel-body::-webkit-scrollbar-thumb {
     background: var(--red-mid);
     border-radius: 3px;
 }

 .cart-item {
     display: flex;
     gap: 12px;
     padding: 12px 0;
     border-bottom: 1px solid var(--border);
 }

 .cart-item:last-child {
     border-bottom: none;
 }

 .cart-img {
     width: 68px;
     height: 68px;
     border-radius: 8px;
     background: #f5eded;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.6rem;
     border: 1px solid var(--border);
 }

 .cart-info {
     flex: 1;
     min-width: 0;
 }

 .cart-info h5 {
     font-size: 0.82rem;
     font-weight: 700;
     color: var(--text-primary);
     margin: 0 0 3px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .cart-info .brand {
     font-size: 0.7rem;
     color: var(--text-muted);
     margin-bottom: 6px;
 }

 .cart-price {
     font-size: 0.9rem;
     font-weight: 800;
     color: var(--red);
 }

 .cart-old {
     font-size: 0.72rem;
     color: var(--text-muted);
     text-decoration: line-through;
     margin-left: 5px;
 }

 .qty-ctrl {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-top: 6px;
 }

 .qty-btn {
     width: 26px;
     height: 26px;
     border: 1.5px solid var(--border);
     border-radius: 6px;
     background: var(--bg);
     color: var(--text-secondary);
     cursor: pointer;
     font-size: 0.85rem;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.18s;
 }

 .qty-btn:hover {
     background: var(--red-light);
     border-color: var(--red-mid);
     color: var(--red);
 }

 .qty-num {
     font-size: 0.82rem;
     font-weight: 700;
     min-width: 20px;
     text-align: center;
 }

 .cart-del {
     background: none;
     border: none;
     color: var(--text-muted);
     cursor: pointer;
     font-size: 1rem;
     padding: 4px;
     transition: color 0.18s;
     align-self: flex-start;
 }

 .cart-del:hover {
     color: var(--red);
 }

 .cart-summary {
     padding: 14px 16px;
     border-top: 2px solid var(--border);
     flex-shrink: 0;
     background: var(--bg);
 }

 .summary-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.8rem;
     color: var(--text-secondary);
     margin-bottom: 6px;
 }

 .summary-row.total {
     font-weight: 800;
     color: var(--text-primary);
     font-size: 0.96rem;
     margin-top: 8px;
     padding-top: 8px;
     border-top: 1px solid var(--border);
 }

 .summary-row.total span:last-child {
     color: var(--red);
     font-size: 1.05rem;
 }

 .free-badge {
     background: #e8f5e9;
     color: #2e7d32;
     font-size: 0.65rem;
     font-weight: 700;
     padding: 2px 8px;
     border-radius: 99px;
 }

 .checkout-btn {
     width: 100%;
     margin-top: 12px;
     padding: 14px;
     background: var(--red);
     color: #fff;
     border: none;
     border-radius: 10px;
     font-family: var(--font-ui);
     font-size: 0.92rem;
     font-weight: 800;
     cursor: pointer;
     transition: background var(--transition), transform var(--transition);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     box-shadow: 0 4px 14px var(--red-glow);
 }

 .checkout-btn:hover {
     background: var(--red-hover);
     transform: translateY(-1px);
 }

 .continue-btn {
     width: 100%;
     margin-top: 8px;
     padding: 11px;
     background: none;
     color: var(--red);
     border: 1.5px solid var(--red-mid);
     border-radius: 10px;
     font-family: var(--font-ui);
     font-size: 0.84rem;
     font-weight: 700;
     cursor: pointer;
     transition: all var(--transition);
 }

 .continue-btn:hover {
     background: var(--red-light);
 }

 /* Wishlist panel */
 .wish-item {
     display: flex;
     gap: 12px;
     padding: 12px 0;
     border-bottom: 1px solid var(--border);
     align-items: center;
 }

 .wish-item:last-child {
     border-bottom: none;
 }

 .wish-img {
     width: 60px;
     height: 60px;
     border-radius: 8px;
     background: #f5eded;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
     border: 1px solid var(--border);
     flex-shrink: 0;
 }

 .wish-info {
     flex: 1;
     min-width: 0;
 }

 .wish-info h5 {
     font-size: 0.82rem;
     font-weight: 700;
     color: var(--text-primary);
     margin: 0 0 3px;
 }

 .wish-info .wish-price {
     font-size: 0.88rem;
     font-weight: 800;
     color: var(--red);
 }

 .wish-add {
     background: var(--red);
     color: #fff;
     border: none;
     border-radius: 7px;
     padding: 8px 12px;
     font-size: 0.75rem;
     font-weight: 700;
     cursor: pointer;
     transition: background var(--transition);
     display: flex;
     align-items: center;
     gap: 5px;
     flex-shrink: 0;
 }




 .step-dot {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.75rem;
 }

 .step-dot.done {
     background: #e8f5e9;
     color: #2e7d32;
 }

 .step-dot.current {
     background: var(--red-light);
     color: var(--red);
 }

 .step-dot.pending {
     background: var(--bg);
     color: var(--text-muted);
     border: 1.5px solid var(--border);
 }

 .step-info {
     flex: 1;
 }

 .step-info h6 {
     font-size: 0.78rem;
     font-weight: 700;
     color: var(--text-primary);
     margin: 0 0 1px;
 }

 .step-info p {
     font-size: 0.7rem;
     color: var(--text-muted);
     margin: 0;
 }

 /* Account panel */
 .account-panel {
     padding: 16px;
 }

 .account-avatar {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--red), #FF6B68);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 1.5rem;
     font-weight: 800;
     margin: 0 auto 10px;
 }

 .account-name {
     text-align: center;
     font-weight: 800;
     font-size: 0.96rem;
     color: var(--text-primary);
 }

 .account-email {
     text-align: center;
     font-size: 0.75rem;
     color: var(--text-muted);
     margin-bottom: 16px;
 }

 .account-menu a {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 11px 14px;
     background: var(--bg);
     border: 1.5px solid var(--border);
     border-radius: 9px;
     margin-bottom: 8px;
     color: var(--text-secondary);
     text-decoration: none;
     font-size: 0.83rem;
     font-weight: 600;
     transition: all 0.18s;
 }

 .account-menu a:hover {
     background: var(--red-light);
     border-color: var(--red-mid);
     color: var(--red);
 }

 .account-menu a i {
     font-size: 1rem;
 }

 .account-menu a .a-arrow {
     margin-left: auto;
     font-size: 0.7rem;
     color: var(--border-dark);
 }

 .logout-btn {
     width: 100%;
     margin-top: 10px;
     padding: 11px;
     background: none;
     color: var(--red);
     border: 1.5px solid var(--red-mid);
     border-radius: 9px;
     font-family: var(--font-ui);
     font-size: 0.84rem;
     font-weight: 700;
     cursor: pointer;
     transition: all var(--transition);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .logout-btn:hover {
     background: var(--red-light);
 }

 /* RS head */
 .rs-head {
     padding: 14px 18px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid var(--border);
     flex-shrink: 0;
 }

 .rs-head h6 {
     font-size: 0.92rem;
     font-weight: 800;
     color: var(--text-primary);
     margin: 0;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .rs-head h6 i {
     color: var(--red);
     font-size: 1rem;
 }

 /* ── RESPONSIVE ── */
 /* ── MOBILE FIX ── */
 @media (max-width: 768px) {

     .header-inner {
         padding: 0 10px;
         gap: 6px;
         position: relative;
     }

     /* Logo — absolute center */
     .logo-wrap {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
         z-index: 2;
         pointer-events: none;
     }

     .logo-link {
         pointer-events: all;
     }

     .logo-img {
         height: 56px;
         max-width: 110px;
     }

     /* Desktop search লুকাও */
     .search-center {
         display: none;
     }

     /* Mobile search button দেখাও */
     .mobile-search-btn {
         display: flex;
         flex-shrink: 0;
         z-index: 3;
     }

     /* Explore button — icon only */
     .btn-explore .btn-label {
         display: none;
     }

     .btn-explore {
         padding: 10px 12px;
         flex-shrink: 0;
         z-index: 3;
     }

     /* Right actions */
     .header-actions {
         margin-left: auto;
         z-index: 3;
         flex-shrink: 0;
     }

     .action-btn {
         width: 40px;
         height: 40px;
     }

     .action-btn .action-label {
         display: none;
     }
 }

 @media (max-width: 480px) {
     .header-inner {
         padding: 0 8px;
         gap: 4px;
     }

     .logo-img {
         height: 48px;
         max-width: 95px;
     }

     .action-btn {
         width: 36px;
         height: 36px;
         font-size: 0.95rem;
     }

     .btn-explore {
         padding: 9px 10px;
     }

     .mobile-search-btn {
         width: 36px;
         height: 36px;
         font-size: 0.95rem;
     }
 }

 @media (max-width: 360px) {
     .header-inner {
         gap: 3px;
         padding: 0 6px;
     }

     .logo-img {
         height: 42px;
         max-width: 85px;
     }
 }


 @media (max-width: 768px) {
     .mobile-search-btn {
         display: flex;
         margin-left: auto;
         /* এটাই right-এ পাঠাবে */
         z-index: 3;
         flex-shrink: 0;
     }

     /* header-actions থেকে margin-left: auto সরান */
     .header-actions {
         margin-left: 0;
         z-index: 3;
         flex-shrink: 0;
     }
 }

 /* header css end */

 /* banner start */

 /* ══════════════════════════════
       BANNER SECTION WRAPPER
    ══════════════════════════════ */
 .banner-section {
     padding: 14px 16px 0;
 }

 @media (min-width: 768px) {
     .banner-section {
         padding: 16px 20px 0;
     }
 }

 @media (min-width: 1200px) {
     .banner-section {
         padding: 20px 24px 0;
         max-width: 1320px;
         margin: 0 auto;
     }
 }

 /* ══════════════════════════════
       SLIDER CONTAINER
    ══════════════════════════════ */
 .banner-slider-wrap {
     position: relative;
     border-radius: var(--radius-md);
     overflow: hidden;
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
     background: var(--border);
     /* height tiers */
     height: 150px;
 }

 @media (min-width: 576px) {
     .banner-slider-wrap {
         height: 220px;
     }
 }

 @media (min-width: 768px) {
     .banner-slider-wrap {
         height: 340px;
         border-radius: 14px;
     }
 }

 @media (min-width: 992px) {
     .banner-slider-wrap {
         height: 440px;
     }
 }

 @media (min-width: 1200px) {
     .banner-slider-wrap {
         height: 520px;
     }
 }

 /* ══════════════════════════════
       SLIDES
    ══════════════════════════════ */
 .banner-track {
     display: flex;
     height: 100%;
     transition: transform 0.55s cubic-bezier(.4, 0, .2, 1);
     will-change: transform;
 }

 .banner-slide {
     min-width: 100%;
     height: 100%;
     position: relative;
     flex-shrink: 0;
 }

 .banner-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
     /* placeholder bg while image loads */
     background: var(--border);
 }

 /* ── Slide overlay gradient (subtle) */
 .banner-slide::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom,
             transparent 55%,
             rgba(0, 0, 0, 0.28) 100%);
     pointer-events: none;
 }

 /* ══════════════════════════════
       PREV / NEXT ARROWS
    ══════════════════════════════ */
 .slider-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     background: rgba(255, 255, 255, 0.92);
     border: 1.5px solid var(--border);
     border-radius: 50%;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--text-primary);
     font-size: 1rem;
     transition: background var(--transition), border-color var(--transition),
         color var(--transition), box-shadow var(--transition), transform 0.22s;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
     outline: none;
 }

 .slider-arrow:hover {
     background: var(--red);
     border-color: var(--red);
     color: var(--white);
     box-shadow: 0 4px 16px var(--red-glow);
     transform: translateY(-50%) scale(1.08);
 }

 .slider-arrow:active {
     transform: translateY(-50%) scale(0.96);
 }

 .slider-prev {
     left: 10px;
 }

 .slider-next {
     right: 10px;
 }

 @media (min-width: 768px) {
     .slider-arrow {
         width: 44px;
         height: 44px;
         font-size: 1.15rem;
     }

     .slider-prev {
         left: 16px;
     }

     .slider-next {
         right: 16px;
     }
 }

 @media (min-width: 1200px) {
     .slider-arrow {
         width: 50px;
         height: 50px;
         font-size: 1.25rem;
     }

     .slider-prev {
         left: 20px;
     }

     .slider-next {
         right: 20px;
     }
 }


 @media (min-width: 768px) {
     .slider-dots {
         bottom: 16px;
         gap: 8px;
     }

     .slider-dot {
         width: 9px;
         height: 9px;
     }

     .slider-dot.active {
         width: 28px;
     }
 }

 /* ══════════════════════════════
       SLIDE COUNTER BADGE
    ══════════════════════════════ */
 .slide-counter {
     position: absolute;
     top: 12px;
     right: 12px;
     background: rgba(0, 0, 0, 0.45);
     color: rgba(255, 255, 255, 0.9);
     font-size: 0.68rem;
     font-weight: 600;
     letter-spacing: 0.06em;
     padding: 3px 10px;
     border-radius: 99px;
     z-index: 10;
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
 }

 /* ══════════════════════════════
       THUMBNAIL STRIP (optional, shown ≥768px)
    ══════════════════════════════ */
 .thumb-strip {
     display: none;
     gap: 8px;
     margin-top: 10px;
 }

 @media (min-width: 768px) {
     .thumb-strip {
         display: flex;
     }
 }

 .thumb-item {
     flex: 1;
     height: 52px;
     border-radius: 8px;
     overflow: hidden;
     cursor: pointer;
     border: 2.5px solid transparent;
     transition: border-color var(--transition), opacity var(--transition), box-shadow var(--transition);
     opacity: 0.55;
 }

 .thumb-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .thumb-item.active {
     border-color: var(--red);
     opacity: 1;
     box-shadow: 0 2px 10px var(--red-glow);
 }

 .thumb-item:hover {
     opacity: 0.85;
 }

 @media (min-width: 992px) {
     .thumb-strip {
         margin-top: 12px;
     }

     .thumb-item {
         height: 64px;
     }
 }


 /* banner end */
 /* category */
/* ── Section wrapper ── */
.collections-section {
    background: var(--surface);
    padding: 32px 0 28px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

/* ── Title ── */
.collections-section-title {
    text-align: center;
    font-family: var(--font-brand), Arial, sans-serif;
    font-size: clamp(18px, 4vw, 28px);
    font-weight: 400;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 24px;
}

@media (max-width: 480px) {
    .collections-section-title {
        font-size: 4vw;
        padding: 0 0.5rem;
    }
}

/* ── Marquee outer ── */
.marquee-outer {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* fade edges */
.marquee-outer::before,
.marquee-outer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.marquee-outer::before {
    left: 0;
    background: linear-gradient(to right, var(--surface), transparent);
}

.marquee-outer::after {
    right: 0;
    background: linear-gradient(to left, var(--surface), transparent);
}

/* ── ✅ KEY: CSS animation — translateX(-50%) কারণ track এ 6+6=12 items ── */
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-track {
    display: flex;
    gap: 22px;
    padding: 10px 22px 16px;
    width: max-content;
    animation: marquee-scroll 20s linear infinite;
}

/* ✅ Hover এ pause */
.marquee-outer:hover .marquee-track {
    animation-play-state: paused;
}

/* ✅ Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}

/* ── Scroll item ── */
.scroll-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    gap: 10px;
}

.scroll-item-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    background: var(--border);
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
    border: 3px solid transparent;
}

.scroll-item:hover .scroll-item-circle {
    transform: scale(1.06);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    border-color: var(--red-mid);
}

.scroll-item-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* overlay label */
.scroll-item-circle .circle-label {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: calc(100% - 20px);
    background: rgba(0, 0, 0, 0.58);
    color: var(--white);
    font-family: var(--font-brand), sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 6px 8px;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
    transition: background var(--transition);
}

.scroll-item:hover .scroll-item-circle .circle-label {
    background: rgba(208, 33, 28, 0.82);
}

/* ── Responsive ── */
@media (min-width: 576px) {
    .scroll-item-circle {
        width: 125px;
        height: 125px;
    }
}

@media (min-width: 992px) {
    .scroll-item-circle {
        width: 145px;
        height: 145px;
    }

    .marquee-track {
        gap: 28px;
        padding: 10px 28px 18px;
        animation-duration: 24s; /* বড় screen এ একটু slow */
    }

    .collections-section-title {
        font-size: 34px;
        letter-spacing: 8px;
        margin-bottom: 28px;
    }
}

@media (min-width: 1440px) {
    .marquee-track {
        animation-duration: 28s; /* 22 inch monitor এ আরো smooth */
    }
}


@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(var(--marquee-offset, -50%)); }
}

.marquee-track {
    display: flex;
    gap: 22px;
    padding: 10px 22px 16px;
    width: max-content;
    animation: marquee-scroll 20s linear infinite;
}

.marquee-outer:hover .marquee-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

@media (min-width: 992px) {
    .marquee-track {
        gap: 28px;
        padding: 10px 28px 18px;
        animation-duration: 24s;
    }
}

@media (min-width: 1440px) {
    .marquee-track { animation-duration: 28s; }
}
 /*  */
 /* category end */



 /* product start */
 /* ══════════════════════════════════════════════
   DEALS SECTION — CSS
   ══════════════════════════════════════════════ */

 /* ── SECTION ── */
 .deals-section {
     background: var(--bg);
     padding: 40px 16px;
 }

 /* ── HEADER ── */
 .section-title {
     font-size: 1.6rem;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: -0.5px;
     color: var(--red);
     margin: 0;
 }

 .see-all-btn {
     background: var(--red);
     color: var(--white) !important;
     border: none;
     padding: 9px 26px;
     border-radius: 8px;
     font-weight: 800;
     font-size: 0.88rem;
     text-decoration: none;
     transition: background 0.22s;
     white-space: nowrap;
     display: inline-block;
 }

 .see-all-btn:hover {
     background: var(--red-dark);
 }

 /* ── GRID ── */
 .p-grid {
     --bs-gutter-x: 10px;
     --bs-gutter-y: 10px;
 }

 .p-grid>.col {
     display: flex;
     flex-direction: column;
 }

 /* ── CARD ── */
 .product-card {
     background: var(--surface);
     border-radius: 14px;
     border: 1.5px solid var(--border);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     width: 100%;
     flex: 1;
     transition: box-shadow 0.3s, border-color 0.3s;
 }

 .product-card:hover {
     box-shadow: 0 6px 28px var(--red-glow);
     border-color: var(--red);
 }

 /* ── IMAGE BOX ── */
 .img-box {
     position: relative;
     width: 100%;
     aspect-ratio: 1 / 1;
     overflow: hidden;
     display: block;
     text-decoration: none;
     background: #f7f7f7;
     flex-shrink: 0;
 }

 /* img-hover — default লুকানো, hover এ দেখাবে */
 .img-box .img-hover {
     opacity: 0;
     transform: translateX(100%);
 }

 /* সব image এর base style */
 .img-box img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform-origin: center center;
     transition: opacity 0.4s ease, filter 0.45s ease, transform 0.45s ease;
     will-change: transform, filter;
 }

 /* ★ Hover এ img-main blur + উপরে যাবে, img-hover দেখাবে ★ */
 .product-card:hover .img-box .img-main {
     filter: blur(2px) brightness(0.92);
     transform: none;
     opacity: 0;
 }

 .product-card:hover .img-box .img-hover {
     opacity: 1;
     transform: translateX(0%);
 }

 /* ── CART OVERLAY ── */
 .cart-overlay {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.32s ease;
     z-index: 10;
     pointer-events: none;
 }

 .product-card:hover .cart-overlay {
     opacity: 1;
     pointer-events: auto;
 }

 /* ★ Quick View pill button — example image এর মতো pink/magenta ★ */
 .cart-icon-wrap {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     background: #F8C6C4;
     color: #333;
     border: none;
     border-radius: 50px;
     padding: 6px 14px;
     font-size: 0.72rem;
     font-weight: 700;
     white-space: nowrap;
     box-shadow: none;
     transform: translateY(14px);
     transition: transform 0.32s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.25s ease;
     cursor: pointer;
     letter-spacing: 0.2px;
     text-decoration: none;
 }

 .product-card:hover .cart-icon-wrap {
     transform: translateY(0px);
 }

 .cart-icon-wrap i {
     font-size: 1rem;
     color: #333;
 }

 /* ── DISCOUNT BADGE ── */
 .disc-badge {
     position: absolute;
     top: 8px;
     left: 8px;
     background: var(--red);
     color: var(--white);
     font-size: 10px;
     font-weight: 800;
     padding: 3px 8px;
     border-radius: 4px;
     z-index: 6;
     letter-spacing: 0.3px;
 }

 /* ── CARD BODY ── */
 .c-body {
     padding: 10px 12px 12px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
 }

 /* ── PRODUCT TITLE ── */
 .p-title {
     color: var(--text-secondary);
     font-size: 0.80rem;
     font-weight: 600;
     line-height: 1.45;
     margin-bottom: 8px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     min-height: 36px;
 }

 /* ── PRICE ROW ── */
 .price-row {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 5px;
     margin-bottom: 10px;
 }

 .p-new {
     font-weight: 700;
     font-size: 1.05rem;
     line-height: 1;
 }

 .p-old {
     color: #bbb;
     text-decoration: line-through;
     font-size: 0.76rem;
     font-weight: 600;
     line-height: 1;
 }

 .p-discount {
     background: #fff0f0;
     color: var(--red);
     font-size: 0.68rem;
     font-weight: 800;
     padding: 2px 7px;
     border-radius: 4px;
     border: 1px solid #ffd0d0;
     line-height: 1.5;
     white-space: nowrap;
 }

 .btn-row {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: auto;
 }

 .add-btn {
     background: var(--red);
     color: var(--white);
     border: none;
     border-radius: 50px;
     padding: 7px 61px;
     font-size: 0.72rem;
     font-weight: 800;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     cursor: pointer;
     transition: background 0.2s, transform 0.1s;
     font-family: 'Nunito', sans-serif;
     white-space: nowrap;
 }

 .add-btn:hover {
     background: var(--red-dark);
 }

 .add-btn:active {
     transform: scale(0.97);
 }

 .add-btn .bi-cart-plus {
     font-size: 0.95rem;
 }

 .cart-icon-btn {
     background: #fff0f0;
     color: var(--red);
     border: 1px solid #ffd0d0;
     border-radius: 50px;
     width: 32px;
     height: 32px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     cursor: pointer;
     flex-shrink: 0;
     transition: background 0.2s, border-color 0.2s;
 }

 .cart-icon-btn:hover {
     background: #ffe0e0;
     border-color: var(--red);
 }

 /* ── MOBILE RESPONSIVE ── */
 @media (max-width: 480px) {
     .p-new {
         font-size: 0.92rem;
     }

     .p-old {
         font-size: 0.70rem;
     }

     .p-discount {
         font-size: 0.62rem;
         padding: 2px 5px;
     }

     .add-btn {
         padding: 6px 8px;
         font-size: 0.72rem;
         gap: 4px;
     }

     .add-btn .bi-cart-plus {
         font-size: 0.9rem;
     }

     .cart-icon-wrap {
         padding: 7px 14px;
         font-size: 0.75rem;
     }

     .disc-badge {
         font-size: 9px;
         padding: 2px 6px;
     }
 }

 /* product end */


 /* footer */
 .footer-section {
     background-color: #810505;
     color: #ffffff;
     font-family: var(--font-ui);
     overflow: hidden;
     position: relative;
 }

 /* Logo Box */
 .footer-logo {
     max-width: 130px;
     background: rgba(255, 255, 255, 0.1);
     padding: 8px;
     border-radius: var(--radius-md);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 /* Headings */
 .footer-heading {
     font-family: var(--font-brand);
     font-size: 1.15rem;
     font-weight: 700;
     margin-bottom: 25px;
     color: #FFD700;
     position: relative;
     padding-bottom: 10px;
     border-bottom: 2px solid #FFD700;
     display: inline-block;
 }

 .social-title {
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 15px;
     color: rgba(255, 255, 255, 0.75);
 }

 /* Lists */
 .footer-list li {
     margin-bottom: 12px;
 }

 .footer-list a {
     text-decoration: none;
     color: rgba(255, 255, 255, 0.8);
     font-size: 0.9rem;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: var(--transition);
 }

 .footer-list a i {
     font-size: 12px;
     color: #FFD700;
     transition: transform 0.3s;
 }

 .footer-list a:hover {
     color: #FFD700;
 }

 .footer-list a:hover i {
     transform: translateX(5px);
 }

 /* Social Buttons */
 .social-btn {
     width: 40px;
     height: 40px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white !important;
     text-decoration: none;
     transition: var(--transition);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 .social-btn:hover {
     transform: translateY(-5px) scale(1.1);
 }

 .fb {
     background: #1877F2;
 }

 .yt {
     background: #FF0000;
 }

 .ln {
     background: #0077B5;
 }

 /* Contact Items */
 .contact-item {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     color: rgba(255, 255, 255, 0.9);
     transition: var(--transition);
 }

 .contact-icon {
     width: 38px;
     height: 38px;
     background: #FFD700;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #A8110D;
     flex-shrink: 0;
 }

 .email-link {
     color: rgba(255, 255, 255, 0.9);
 }

 .email-icon {
     background: #FFD700;
     color: #A8110D;
 }

 /* Copyright */
 .copyright-section {
     border-color: rgba(255, 255, 255, 0.2) !important;
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.85rem;
 }

 /* WhatsApp Floating */
 .whatsapp-float {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 55px;
     height: 55px;
     background-color: #25d366;
     color: white;
     border-radius: 50%;
     text-align: center;
     font-size: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 100;
     text-decoration: none;
     transition: 0.3s;
 }

 .whatsapp-float:hover {
     transform: scale(1.1);
     color: white;
     background-color: #128C7E;
 }

 /* Mobile Adjustments */
 @media (max-width: 767px) {
     .footer-heading {
         border-bottom: none;
         padding-bottom: 0;
         margin-bottom: 15px;
         text-align: center;
         width: 100%;
         color: #FFD700;
     }

     .footer-heading::after {
         content: "";
         display: block;
         width: 50px;
         height: 2px;
         background: #FFD700;
         margin: 8px auto;
     }

     .contact-item {
         justify-content: center;
     }
 }