/* Google Fonts to use in your */ /* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Global Typography */ body, p, span, a, label, input, textarea, select, button, li, div, small, .form-label, .text-muted, .cta, .btn, .nav-links a, .search-container input, .search-container button, .product-info, .p-price, .m-price, .footer, .footer ul li a, .footer-desc, .small-text { font-family: 'Inter', sans-serif; } /* Headings */ h1, h2, h3, h4, h5, h6, .hero h1, .feat-box h3, .section-title, .mall-title, .featured-header h2, .promo-text h2, .footer h4, .footer-logo h2 { font-family: 'Playfair Display', serif; } /* Navigation */ /* nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 8%; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .logo h2 { font-size: 28px; color: #2A919D; } .logo span { color: #c5b950; } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 30px; } nav ul li a { text-decoration: none; color: #1c2a48; font-weight: 500; transition: 0.3s; } nav ul li a:hover { color: #2A919D; } */ /* Header Styles */ .main-header { width: 100%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; } /* IMPORTANT: Scope header container so it does NOT break Bootstrap pages */ .main-header .container, .navbar-middle .container, .navbar-bottom .container { max-width: 1300px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; } /* 1. Top Promo Bar */ .top-promo { background: #2A919D; color: #fff; text-align: center; padding: 8px 0; font-size: 12px; font-weight: 500; letter-spacing: 1px; } /* 2. Middle Navbar (Logo & Search) */ .navbar-middle { padding: 15px 0; border-bottom: 1px solid #f0f0f0; } .logo h2 { font-size: 26px; font-weight: 800; color: #2A919D; letter-spacing: -1px; } .logo span { color: #c2a76f; } /* Search Bar CSS */ .search-container { flex: 0.6; margin: 0 30px; } .search-container form { display: flex; position: relative; } .search-container input { width: 100%; padding: 12px 20px; border: 1px solid #e0e0e0; border-radius: 50px; font-size: 14px; outline: none; background: #f8f8f8; transition: 0.3s; } .search-container input:focus { background: #fff; border-color: #c2a76f; box-shadow: 0 0 8px rgba(194, 167, 111, 0.2); } .search-container button { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #888; cursor: pointer; font-size: 16px; } /* Icons Style */ .nav-icons { display: flex; gap: 25px; } .nav-icons a { text-decoration: none; color: #1a1a1a; font-size: 13px; font-weight: 500; display: flex; flex-direction: column; align-items: center; position: relative; } .nav-icons i { font-size: 20px; margin-bottom: 4px; } .nav-icons .badge { position: absolute; top: -5px; right: -8px; background: #ff4d4d; color: white; font-size: 10px; padding: 2px 6px; border-radius: 50%; } /* 3. Bottom Navbar (Links) */ .navbar-bottom { background: #fff; padding: 12px 0; } .nav-links { list-style: none; display: flex; justify-content: center; gap: 35px; } .nav-links a { text-decoration: none; color: #333; font-size: 13px; font-weight: 600; transition: 0.3s; } .nav-links a:hover, .nav-links a.active { color: #c2a76f; } .sale-link { color: #2A919D !important; } /* Logo fallback styles */ .xv-logo { display: flex; align-items: center; flex-shrink: 0; min-width: 0; } .xv-logo a, .xv-logo-link { display: block; width: 100%; text-decoration: none; line-height: 0; } .xv-logo-img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; } /* Responsive for Mobile */ @media (max-width: 900px) { .search-container { display: none; } .nav-links { gap: 15px; overflow-x: auto; padding: 10px 0; } .nav-links a { font-size: 11px; white-space: nowrap; } } /* Hero Section Container */ .hero { height: 90vh; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } /* Container-ka sawirada dhaqaaqaya */ .hero-slider { position: absolute; top: 0; left: 0; width: 400%; height: 100%; display: flex; z-index: 1; animation: slide-animation 20s infinite linear; } /* Sawirada shaqsiga ah */ .slide { width: 100vw; height: 100%; background-size: cover; background-position: center; position: relative; } /* Overlay */ .slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } /* Hero images */ .slide1 { background-image: url('/assets/img/hero/Slide1_beauty.jfif'); } .slide2 { background-image: url('/assets/img/hero/Slide2_electronics.jfif'); } .slide3 { background-image: url('/assets/img/hero/Slide3_home.jfif'); } .slide4 { background-image: url('/assets/img/hero/Slide4_accessories.jfif'); } /* Hero content */ .hero-content { position: relative; z-index: 2; } .hero h1 { font-size: 50px; } /* Slider animation */ @keyframes slide-animation { 0% { transform: translateX(0); } 20% { transform: translateX(0); } 25% { transform: translateX(-25%); } 45% { transform: translateX(-25%); } 50% { transform: translateX(-50%); } 70% { transform: translateX(-50%); } 75% { transform: translateX(-75%); } 95% { transform: translateX(-75%); } 100% { transform: translateX(0); } } .hero p { margin: 20px 0 40px; font-size: 18px; } /* Buttons */ .btn { padding: 12px 30px; text-decoration: none; border-radius: 5px; font-weight: 600; margin: 10px; display: inline-block; transition: 0.3s; } .primary { background: #2A919D; color: #fff; } .primary:hover { background: #fff; color: #000; } .secondary { border: 1px solid #fff; color: #fff; } .secondary:hover { background: #2A919D; color: #fff; } /* Features Section */ .features { display: flex; justify-content: space-around; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 50px 8%; background: #f4f4f4; flex-wrap: wrap; } .feat-box { text-align: center; background: #fff; padding: 30px; border-radius: 10px; width: 30%; min-width: 250px; margin-bottom: 20px; transition: 0.3s; } .feat-box:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); transform: translateY(-5px); } .feat-box i { font-size: 40px; color: #2A919D; margin-bottom: 15px; } .feat-box h3 { margin-bottom: 10px; color: #1c2a48; } /* General Settings */ :root { --gold-color: #c5a96d; --light-gray: #f9f9f9; } .product-section { padding: 50px 8%; text-align: center; } /* Midabka cusub ee Blue-White ah */ .gold-bg { background-color: #f4f9ff !important; border-top: 1px solid #e1e8f0; border-bottom: 1px solid #e1e8f0; } /* NEW ARRIVALS - ONE ROW */ .new-arrivals-row { display: flex !important; flex-wrap: nowrap !important; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 16px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .new-arrivals-row::-webkit-scrollbar { height: 8px; } .new-arrivals-row::-webkit-scrollbar-thumb { background: #cfd8e3; border-radius: 20px; } .new-arrivals-row::-webkit-scrollbar-track { background: #eef3f8; border-radius: 20px; } .new-arrival-card { flex: 0 0 180px; min-width: 180px; max-width: 180px; padding: 8px; border-radius: 8px; } .new-arrival-img { height: 150px; overflow: hidden; border-radius: 6px; margin-bottom: 8px; } .new-arrival-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .new-arrival-card .product-info { margin-top: 0; } .new-arrival-card .p-name { font-size: 11px; line-height: 1.35; min-height: 32px; max-height: 32px; overflow: hidden; margin-bottom: 6px; } .new-arrival-card .p-price { font-size: 13px; font-weight: 700; margin-top: 0; } .new-arrival-card .badge.sale { top: 8px; left: 8px; font-size: 9px; padding: 2px 6px; } /* Badges */ .sold-out { background: #999; } .sale { background: #2A919D; } .sales { color: #2A919D; } /* View All Button */ .view-all-btn { background-color: #2A919D; border: none; padding: 10px 40px; border-radius: 20px; color: #fff; cursor: pointer; font-size: 14px; } .view-all-btn.dark { background: #000; } /* Info Icons Section */ .info-icons { display: flex; justify-content: space-around; padding: 40px 8%; background: #fff; text-align: center; } .info-box i { font-size: 30px; color: #2A919D; margin-bottom: 10px; } .info-box p { font-size: 13px; font-weight: 500; } /* Color Palette */ :root { --mall-gold: #c2a76f; --border-color: #e0e0e0; } .mall-section { padding: 40px 5%; background: #fff; } .mall-title { text-align: center; font-size: 22px; font-weight: 600; margin-bottom: 25px; color: #1a1a1a; } /* Grid */ .mall-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } /* Compact Card */ .mall-card { background: #fff; border: 1px solid var(--border-color); border-radius: 4px; padding: 10px; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; } /* Image */ .m-img-box { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .m-img-box img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Card text */ .m-info { margin-top: 10px; } .m-name { font-size: 10px; font-weight: 600; color: #333; line-height: 1.3; text-transform: uppercase; margin-bottom: 5px; } .m-price { font-size: 11px; color: #444; } .old-price { text-decoration: line-through; color: #999; margin-right: 5px; } /* Badges */ .m-badge { position: absolute; top: 8px; left: 8px; font-size: 9px; padding: 2px 6px; border-radius: 2px; color: #fff; text-transform: uppercase; z-index: 5; } .m-sold { background: #9b9b9b; } .m-sale { background: #2A919D; } /* View All Button */ .center-btn { text-align: center; margin-top: 20px; } .view-all { background-color: #2A919D; color: white; border: none; padding: 8px 35px; border-radius: 20px; font-size: 13px; cursor: pointer; } /* Responsive */ @media (max-width: 900px) { .mall-grid { grid-template-columns: repeat(2, 1fr); } } /* Layout */ .featured-products { padding: 40px 0; background-color: #fff; } .container { width: 95%; max-width: 1400px; margin: 0 auto; } /* Header */ .featured-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; padding-bottom: 15px; margin-bottom: 20px; } .featured-header h2 { font-size: 18px; color: #1a2b4e; font-weight: 700; letter-spacing: 0.5px; } .view-more { text-decoration: none; color: #2A919D; font-size: 13px; font-weight: 500; } /* Grid */ .featured-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; align-items: start; } /* Card */ .p-card { border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; transition: 0.3s; background: #fff; } .p-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-color: #2A919D; } /* Image top */ .p-img-box { position: relative; padding: 10px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; height: 180px; overflow: hidden; } .p-img-box img { width: 100%; height: auto; object-fit: contain; } .discount-badge { position: absolute; top: 10px; left: 10px; background: #ff4d4d; color: #fff; padding: 2px 8px; font-size: 11px; font-weight: bold; border-radius: 4px; z-index: 5; } /* Details */ .p-details { padding: 15px 12px; background: #fff; position: relative; z-index: 10; } .p-title { font-size: 12px; color: #2A919D; font-weight: 500; line-height: 1.5; margin-bottom: 8px; display: block; white-space: normal; word-wrap: break-word; height: auto; min-height: 36px; } /* Stars */ .p-rating { font-size: 10px; color: #f1c40f; margin-bottom: 8px; } .p-rating span { color: #888; margin-left: 5px; } /* Price */ .p-price { margin-bottom: 8px; } .p-price .current { font-size: 14px; font-weight: 700; color: #2A919D; } .p-price .old { font-size: 11px; color: #999; text-decoration: line-through; margin-left: 5px; } /* In Stock */ .p-stock { display: flex; align-items: center; font-size: 11px; color: #27ae60; font-weight: 500; } .stock-dot { width: 8px; height: 8px; background-color: #27ae60; border-radius: 50%; display: inline-block; margin-right: 6px; } /* Responsive */ @media (max-width: 1100px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================= HOME SECTIONS MATCH FEATURED PRODUCTS Best Selling + New Arrivals + Flash Deals ========================================= */ /* Section titles */ .mall-title, .section-title { color: #1a2b4e; font-weight: 700; letter-spacing: 0.5px; font-family: 'Playfair Display', serif; } /* Best Selling + Flash Deals cards */ .mall-card { border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; transition: 0.3s; background: #fff; min-height: auto; padding: 0; } .mall-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-color: #2A919D; } .m-img-box { position: relative; padding: 10px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; height: 180px; overflow: hidden; } .m-img-box img { width: 100%; height: auto; object-fit: contain; max-width: 100%; max-height: 100%; } .m-info { padding: 15px 12px; background: #fff; position: relative; z-index: 10; margin-top: 0; } .m-name { font-family: 'Inter', sans-serif; font-size: 12px; color: #2A919D; font-weight: 500; line-height: 1.5; margin-bottom: 8px; display: block; white-space: normal; word-wrap: break-word; min-height: 36px; text-transform: none; } .m-price { font-family: 'Inter', sans-serif; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #2A919D; } .old-price { font-size: 11px; color: #999; text-decoration: line-through; margin-right: 5px; } .sold-count { font-family: 'Inter', sans-serif; margin-top: 6px; color: #2A919D; font-weight: 700; font-size: 12px; } /* New Arrivals cards */ .new-arrival-card { border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; transition: 0.3s; background: #fff; padding: 0; } .new-arrival-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-color: #2A919D; } .new-arrival-img { position: relative; padding: 10px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; height: 180px; overflow: hidden; border-radius: 0; margin-bottom: 0; } .new-arrival-img img { width: 100%; height: auto; object-fit: contain; } .new-arrival-card .product-info { padding: 15px 12px; background: #fff; margin-top: 0; } .new-arrival-card .p-name { font-family: 'Inter', sans-serif; font-size: 12px; color: #2A919D; font-weight: 500; line-height: 1.5; margin-bottom: 8px; display: block; white-space: normal; word-wrap: break-word; min-height: 36px; max-height: none; overflow: visible; } .new-arrival-card .p-price { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: #2A919D; margin-top: 0; margin-bottom: 8px; } /* Buttons inside these sections */ .mall-card .view-all, .new-arrival-card .view-all { background-color: #2A919D; color: #fff; border: none; padding: 8px 35px; border-radius: 20px; font-size: 13px; cursor: pointer; } .mall-card .view-all:hover, .new-arrival-card .view-all:hover { background-color: #247F89; } /* Badges */ .m-sale, .sale { background: #2A919D; } @media (max-width: 768px) { .m-img-box, .new-arrival-img { height: 160px; } .m-name, .new-arrival-card .p-name { min-height: auto; } } /* Promo */ .promo-banner-section { padding: 30px 5%; background-color: #f4f9ff !important; } .promo-container { max-width: 1200px; margin: 0 auto; } .promo-content { background-color: #2A919D; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; padding: 40px 60px; color: white; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .promo-text h2 { font-size: 26px; font-weight: 600; margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; } .promo-text p { font-size: 14px; font-weight: 300; opacity: 0.9; } .promo-image img { width: 180px; height: auto; border-radius: 5px; border: 2px solid rgba(255, 255, 255, 0.3); display: block; } /* Responsive */ @media (max-width: 768px) { .promo-content { flex-direction: column; text-align: center; padding: 30px; } .promo-text h2 { font-size: 20px; } .promo-image { margin-top: 20px; } } /* Shop Now Button Style */ .shop-now-btn { background-color: #2A919D; color: #ffff; } /* XIMI BLUE THEME OVERRIDE */ .btn-dark, .btn.btn-dark, .btn-sm.btn-dark { background-color: #2A919D !important; border-color: #2A919D !important; color: #fff !important; } .btn-dark:hover, .btn.btn-dark:hover, .btn-sm.btn-dark:hover { background-color: #247F89 !important; border-color: #247F89 !important; color: #fff !important; } /* Pagination Active */ .pagination .page-item.active .page-link { background-color: #2A919D !important; border-color: #2A919D !important; color: #fff !important; } /* Pagination Hover */ .pagination .page-link:hover { background-color: #2A919D !important; border-color: #2A919D !important; color: #fff !important; } /* Shop Title */ h1.h4 { color: #2A919D; } /* Shop Now link button */ a.btn.btn-sm.btn-dark { background-color: #2A919D !important; border-color: #2A919D !important; } /* Select dropdown focus */ .form-select:focus, .form-control:focus { border-color: #2A919D; box-shadow: 0 0 0 0.2rem rgba(42, 145, 157, 0.25); } /* HERO TEXT FIX */ .hero-content h1, .hero-content p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Mobile hero */ @media (max-width: 768px) { .hero-content h1 { font-size: 26px; } .hero-content p { font-size: 13px; } } /* HERO BUTTON FIX */ .buttons { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; } .btn.primary { background: #2A919D; color: #fff; border-radius: 5px; padding: 12px 30px; font-weight: 600; text-decoration: none; transition: 0.3s; } .btn.primary:hover { background: #fff; color: #000; border: 1px solid #2A919D; } .btn.secondary { border: 1px solid #fff; color: #fff; border-radius: 5px; padding: 12px 30px; font-weight: 600; text-decoration: none; transition: 0.3s; } .btn.secondary:hover { background: #2A919D; color: #fff; } /* FOOTER STYLING */ .footer { background: #f4f4f4; padding: 80px 0 30px; color: #444; border-top: 1px solid #ddd; font-family: 'Inter', sans-serif; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 50px; } .footer h4 { font-family: 'Playfair Display', serif; color: #111; font-size: 1.2rem; margin-bottom: 25px; position: relative; } /* Footer Logo */ .footer-logo h2 { font-family: 'Playfair Display', serif; font-size: 26px; color: #2A919D; margin-bottom: 20px; } .footer-logo h2 span { color: #908206; font-weight: 300; } .footer-desc { font-size: 14px; line-height: 1.8; color: #666; margin-bottom: 20px; } /* Links */ .footer ul { list-style: none; } .footer ul li { margin-bottom: 12px; } .footer ul li a { color: #555; font-size: 14px; text-decoration: none; transition: 0.3s ease; display: inline-block; } .footer ul li a:hover { color: #2A919D; text-decoration: none; transform: translateX(5px); } /* Social Icons */ .social-links { display: flex; gap: 15px; } .social-links a { width: 35px; height: 35px; background: #fff; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #333; font-size: 14px; } .social-links a:hover { background: #2A919D; color: #fff; border-color: #2A919D; } /* Newsletter */ .newsletter-form { display: flex; margin-top: 15px; background: #fff; padding: 5px; border-radius: 5px; border: 1px solid #ddd; } .newsletter-form input { flex: 1; border: none; padding: 10px; outline: none; font-size: 14px; background: transparent; } .newsletter-form button { background: #2A919D; color: #fff; border: none; padding: 10px 25px; border-radius: 4px; cursor: pointer; font-weight: 600; transition: 0.3s; } .newsletter-form button:hover { background: #247F89; } .small-text { font-size: 13px; color: #777; margin-bottom: 10px; } /* Payment Info */ .payment-info { margin-top: 25px; display: flex; align-items: center; gap: 10px; } .payment-info p { font-size: 12px; font-weight: 600; color: #333; } .payment-info img { height: 20px; filter: grayscale(1); opacity: 0.7; } .payment-info span { font-size: 11px; background: #ddd; padding: 2px 6px; border-radius: 3px; } /* Footer Bottom */ .footer-bottom { border-top: 1px solid #ddd; padding-top: 30px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #777; } .footer-bottom span { font-weight: 600; color: #333; } .bottom-links a { margin-left: 20px; color: #777; text-decoration: none; } .bottom-links a:hover { color: #2A919D; text-decoration: none; } /* Footer Responsive */ @media (max-width: 991px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } .social-links { justify-content: center; } .footer-bottom { flex-direction: column; gap: 15px; } .bottom-links a { margin: 0 10px; } } /* SHOP PAGE PROFESSIONAL FIX */ main.container { display: block !important; max-width: 1200px; } .card { border-radius: 16px; border: 1px solid #eaecf0; box-shadow: 0 10px 30px rgba(16,24,40,.06); } .card.p-3.mb-3 .form-control, .card.p-3.mb-3 .form-select { border-radius: 14px; border: 1px solid #eaecf0; padding: 12px 14px; } .card.p-3.mb-3 .btn.btn-dark { border-radius: 14px; font-weight: 700; padding: 12px 14px; } .row.g-3 > .col-6.col-md-3 .card { transition: 0.2s ease; overflow: hidden; } .row.g-3 > .col-6.col-md-3 .card:hover { transform: translateY(-4px); box-shadow: 0 18px 55px rgba(16,24,40,.12); } .product-img { width: 100%; height: 220px; object-fit: cover; border-radius: 14px; border: 1px solid #f2f4f7; display: block; } .row.g-3 .fw-semibold { font-size: 13px; font-weight: 800; line-height: 1.35; min-height: 36px; } .row.g-3 .btn.btn-sm.btn-dark { border-radius: 999px; padding: 8px 14px; font-weight: 800; } .pagination .page-link { border-radius: 14px; margin: 0 4px; border: 1px solid #eaecf0; font-weight: 700; } .pagination .page-item.active .page-link { background: #111827; border-color: #111827; } @media (max-width: 768px) { main.container { padding-left: 12px; padding-right: 12px; } .product-img { height: 170px; } }