/* Root CSS */ p{font-family: var(--para_font);} h1{font-family: var(--h1_font);} h2{font-family: var(--h2_font);} h3{font-family: var(--h3_font);} h4{font-family: var(--h4_font);} h4{font-size: 20px;} h5{font-family: var(--h5_font);} h6{font-family: var(--h6_font);} a{font-family: var(--link_font);} button{font-family: var(--button_font);} a{text-decoration:none;color:black;} a:hover{color: var(--primary_color);} body{background-color:#ffffff;font-size:13px;-webkit-font-smoothing: antialiased;-webkit-font-size:13px;} li{text-decoration: none;list-style: none;} li a{text-decoration: none;color: black;font-family: var(--link_font);font-size: 15px;line-height: 2;} /* Builder css */ /* ============================================ Hero Image Banner Component CSS ============================================ */ .hero-image-banner-section { position: relative; width: 100%; box-sizing: border-box !important; overflow: hidden; } .hero-image-banner-main { /* position: relative; width: 100%; */ min-height: 520px; display: flex; align-items: center; } /* Background & Overlay */ .hero-image-banner-bg, .hero-image-banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-image-banner-bg { object-fit: cover; z-index: 1; background: #2d3436; } .hero-image-banner-overlay { z-index: 2; } /* Content Layer */ .hero-image-banner-content { position: relative; z-index: 3; width: 100%; padding: 60px; } .hero-image-banner-inner { max-width: 600px; } [data-align="center"] .hero-image-banner-inner { margin: 0 auto; text-align: center; } [data-align="right"] .hero-image-banner-inner { margin-left: auto; text-align: right; } /* Typography */ .hero-image-banner-badge { display: block; color: #fff; text-transform: uppercase; margin-bottom: 15px; } .hero-image-banner-heading { color: #ffffff; margin: 0 0 20px 0; } .hero-image-banner-text { color: rgba(255, 255, 255, 0.9); margin-bottom: 30px; } /* Add this to your CSS if you want to force the transform to disappear */ .hero-image-banner-bg { transform: none !important; } /* CTA Button */ .hero-image-banner-btn { display: inline-block; padding: 12px 30px; background: #ffffff; color: #000000; text-decoration: none; border-radius: 4px; transition: all 0.4s ease; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .hero-image-banner-btn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 70%, transparent 100%); transform: translateX(-100%); transition: transform 0.55s ease; z-index: 0; } .hero-image-banner-btn::after { content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.3) 50%, transparent 80%); transform: translateX(-160%); transition: transform 0.6s ease 0.05s; z-index: 1; } .hero-image-banner-btn:hover::before { transform: translateX(100%); } .hero-image-banner-btn:hover::after { transform: translateX(280%); } .hero-image-banner-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } /* Responsive */ @media (max-width: 991px) { .hero-image-banner-main { min-height: 400px; } } @media (max-width: 767px) { .hero-image-banner-main { min-height: 350px; } .hero-image-banner-inner { max-width: 100%; text-align: center !important; margin: 0 auto !important; } }/* ============================================ Minimal Brand Logo Marquee Component CSS (OwlCarousel) ============================================ */ .brand-marquee-section { width: 100%; overflow: hidden; position: relative; box-sizing: border-box; background-color: var(--ps-bg, #ffffff); } /* Dark Theme Logo Inversion */ .brand-marquee-theme-dark .brand-marquee-item img { filter: invert(1) brightness(2) opacity(0.7); } .brand-marquee-theme-dark .brand-marquee-item:hover img { filter: invert(1) brightness(2) opacity(1); } .brand-marquee-heading { margin: 0; line-height: 1.2; } .brand-marquee-subheading { color: #666; margin: 0.5rem 0 2rem 0; } .brand-marquee-heading[data-align="left"], .brand-marquee-subheading[data-align="left"] { text-align: left; } .brand-marquee-heading[data-align="center"], .brand-marquee-subheading[data-align="center"] { text-align: center; } .brand-marquee-heading[data-align="right"], .brand-marquee-subheading[data-align="right"] { text-align: right; } .brand-marquee-item { display: flex; align-items: center; justify-content: center; height: 100%; } .brand-marquee-item a { display: block; width: 100%; height: 100%; text-align: center; } .brand-marquee-item img { max-width: 100%; max-height: 120px; width: auto !important; height: auto; object-fit: contain; transition: all 0.3s ease; } /* Responsive Styles */ @media (max-width: 768px) { .brand-marquee-section { padding: 3rem 0; } .brand-marquee-item img { max-height: 100px; } } @media (max-width: 480px) { .brand-marquee-section { padding: 2rem 0; } .brand-marquee-item img { max-height: 90px; } }/* 4 Column Product Box Component CSS */ .four-col-product-box-section { background: #fff; padding: 20px 30px; overflow: visible; position: relative; } /* Section Header Styling */ .four-col-product-box-section .section-header { margin-bottom: 2rem; } .four-col-product-box-section .section-title { color: #333; margin-bottom: 0.5rem; text-align: center; } .four-col-product-box-section .section-subtitle { color: #666; margin-bottom: 0; } /* 4 Column Product Grid Layout */ .four-col-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 15px 20px; } /* Responsive design for grid layout */ @media (max-width: 1200px) { .four-col-product-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; } } @media (max-width: 992px) { .four-col-product-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } } @media (max-width: 768px) { .four-col-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 10px 15px; } } @media (max-width: 576px) { .four-col-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 5px 15px; } } /* Force all badges to bottom left in four_col_product_box */ .four-col-product-grid .product-badges, .four-col-product-grid .ribbon { position: absolute !important; bottom: 10px !important; left: 10px !important; top: auto !important; right: auto !important; z-index: 10 !important; } .four-col-product-grid .badge, .four-col-product-grid .ribbon { display: inline-block; padding: 4px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; border-radius: 4px; margin-bottom: 4px; background: #e74c3c; color: #fff; } /* View All Button Styling */ .four-col-view-all-btn, .four-col-view-all-btn-light { background-color: var(--primary_color); color: #fff; border-radius: 4px; border: 1px solid var(--primary_color); transition: all 0.3s ease; } .four-col-view-all-btn:hover, .four-col-view-all-btn-light:hover { background-color: #ffffff; color: #000000; border: 1px solid #000; }/* top_categories_grid - Styled to match premium "top categories" dark background */ .top-categories-grid-section { background-color: var(--tcg-bg, #1e242a); padding: 2rem 0; } .top-categories-heading { margin-bottom: 1.5rem; color: var(--tcg-text, #ffffff); letter-spacing: -0.5px; } .top-categories-slider-wrapper { position: relative; width: 100%; } .top-categories-carousel { padding: 20px 0; } .top-categories-carousel .owl-stage-outer { margin: -20px 0; } .top-categories-slide-item { background: transparent !important; border: none !important; padding: 5px !important; } .top-categories-card { display: flex; flex-direction: column; text-decoration: none !important; border: none !important; border-radius: 6px !important; overflow: hidden !important; background: #ffffff !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; transition: transform 0.3s ease, box-shadow 0.3s ease; } .top-categories-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; } .top-categories-image-wrapper { width: 100%; aspect-ratio: 1 / 1; position: relative; overflow: hidden; background: #f1f2f4; } .top-categories-image { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.6s ease; } .top-categories-card:hover .top-categories-image { transform: scale(1.03); } .top-categories-content-footer { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: #ffffff; width: 100%; } .top-categories-name { color: #222; margin: 0; transition: color 0.3s ease; } .top-categories-arrow { color: #666; transition: transform 0.3s ease, color 0.3s ease; } .top-categories-card:hover .top-categories-arrow { color: #000; transform: translateX(4px); } /* Responsive Grid Adjustments */ @media (max-width: 991px) { .top-categories-content-footer { padding: 16px 20px; } } @media (max-width: 767px) { .top-categories-grid-section { padding: 2.5rem 0; } .top-categories-content-footer { padding: 14px 18px; } }.brand-spotlight-section { position: relative; overflow: hidden; background-color: var(--bs-bg, #ffffff); } .brand-spotlight-section .row { justify-content: center; align-items: center; } .spotlight-logo-img { width: 100%; height: 145px; object-fit: contain; } .spotlight-logo-box { height: 100px; display: flex; justify-content: center; align-items: center; } .brand-spotlight-section .spotlight-card { transition: transform 0.3s ease; padding: 1rem; display: flex; flex-direction: column; align-items: center; height: 100%; } .brand-spotlight-section .section-title { color: var(--bs-text, #333333); } .brand-spotlight-section .spotlight-quote { letter-spacing: -0.01em; text-align: center; color: var(--bs-text, #333333); line-height: 1.4; } .brand-spotlight-section .spotlight-shop-link { color: var(--bs-text, #6b6b6b); opacity: 0.8; transition: all 0.3s ease; } .brand-spotlight-section .spotlight-shop-link:hover { opacity: 1; color: var(--bs-text, #000000) !important; } .brand-spotlight-dark .spotlight-shop-link { color: rgba(255, 255, 255, 0.8) !important; } .brand-spotlight-dark .spotlight-shop-link:hover { color: #ffffff !important; } .brand-spotlight-section .spotlight-shop-link svg { transition: transform 0.3s ease; } .brand-spotlight-section .spotlight-shop-link:hover svg { transform: translateX(5px); } .brand-spotlight-section .spotlight-logo-img { filter: grayscale(0.5); transition: filter 0.4s ease, opacity 0.4s ease; opacity: 0.8; } .brand-spotlight-section .spotlight-card:hover .spotlight-logo-img { filter: grayscale(0); opacity: 1; } /* Responsive adjustments */ @media (max-width: 991px) { } @media (max-width: 767px) { .brand-spotlight-section { padding: 20px 0; } .brand-spotlight-section .spotlight-card { padding: 0.5rem; } .spotlight-logo-box { height: 60px !important; margin-bottom: 1rem !important; } .spotlight-logo-img { height: 100%; max-height: 50px; } .brand-spotlight-section .spotlight-quote { line-height: 1.3; } }.new-arrival-slider { padding: 60px 0; position: relative; background-color: var(--nas-bg, transparent); } .new-arrival-slider .section-header { margin-bottom: 40px; } .new-arrival-slider .section-title { color: var(--nas-text, #333); } .new-arrival-slider .owl-stage-outer { overflow: hidden; } .new-arrival-slider .product-card { background: #fff; padding: 0px; border-radius: 8px; transition: transform 0.3s ease; height: 100%; margin: 2px !important; } .new-arrival-slider-dark .product-card { background: #1f2937; } .new-arrival-slider .product-box-container { padding: 2px !important; } .new-arrival-slider .owl-nav { display: none !important; /* Hide default Owl nav */ } .new-arrival-slider .owl-nav-custom button { cursor: pointer; transition: transform 0.2s, opacity 0.2s; outline: none; } .new-arrival-slider .owl-nav-custom button:hover:not([style*="opacity: 0.3"]) { transform: scale(1.2); } .new-arrival-slider .owl-nav-custom i { color: var(--nas-text, #333333); } .new-arrival-slider .slider-counter { min-width: 60px; text-align: center; color: var(--nas-text, #333333); } .new-arrival-slider-dark .slider-counter { color: #f3f4f6; }.about-success-grid-section { overflow: hidden; background-color: var(--asg-bg, #dcd8cf); } .about-success-grid-section > div > h1, .about-success-grid-section > div > h2, .about-success-grid-section > div > h3, .about-success-grid-section > div > h4, .about-success-grid-section > div > h5, .about-success-grid-section > div > h6 { letter-spacing: -0.02em; color: var(--asg-text, inherit); } .success-card { display: flex; flex-direction: column; height: 100%; padding: 2.5rem 2rem; position: relative; background-color: var(--asg-card-bg, #c8c2b7); border-radius: 8px; color: var(--asg-text, #3b3935); } .success-card h1, .success-card h2, .success-card h3, .success-card h4, .success-card h5, .success-card h6 { letter-spacing: -0.01em; color: inherit; } .success-card a { color: inherit; } .success-card a:hover { color: inherit !important; } .success-card a svg { transition: transform 0.3s ease; } .success-card a:hover svg { transform: translateX(5px); } @media (max-width: 768px) { .success-card { padding: 2rem 1.5rem; } } /* Product Box 4 Styles */ .product-box-4 { background: #fff; border: 1px solid #f2f2f2; border-radius: 12px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .product-box-4:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); } .product-image-wrap { background: #fafafa; position: relative; overflow: visible; } .slide-image { width: 100%; height: 280px; object-fit: contain; transition: transform 0.4s ease; } .product-box-4:hover .slide-image { transform: scale(1.05); } .top-actions { position: absolute; top: 15px; right: -50px; display: flex; flex-direction: column; gap: 10px; z-index: 10; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .product-box-4:hover .top-actions { right: 15px; } .action-icon-circle { width: 35px; height: 35px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); cursor: pointer; color: #444; font-size: 14px; transition: all 0.2s; } .action-icon-circle:hover { color: #fff; background: var(--primary_color); } .action-icon-circle .active { color: #ff4747 !important; } .quickview-pill { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); background: var(--primary_color); color: #fff !important; border: none !important; padding: 6px 16px; font-size: 12px; font-weight: 600; border-radius: 20px; z-index: 20; transition: all 0.35s; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); opacity: 0; cursor: pointer; white-space: nowrap; } .cart-action-p3 { margin-top: auto; } .product-display-name a { font-size: 15px; font-weight: 600; color: #333 !important; /* height: 44px; */ line-height: 22px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 5px !important; transition: color 0.2s; } .product-display-name a:hover { color: var(--primary_color) !important; } .sale-price-new { font-size: 15px; } .old-price-new { font-size: 14px; } .btn-modern-pill { background: var(--primary_color) !important; color: #fff !important; border: 1px solid var(--primary_color) !important; padding: 10px 24px !important; font-weight: 600; font-size: 13px; border-radius: 30px !important; /* transition: all 0.25s; */ width: 100%; } .btn-modern-pill:hover { background: var(--secondary_color) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } /* .btn-modern-pill.outline { background: transparent !important; border: 1px solid #ddd !important; color: #444 !important; } .btn-modern-pill.outline:hover { background: #f8f8f8 !important; border-color: #333 !important; } */ @media (max-width: 768px) { .slide-image { height: 240px; padding: 10px; } .top-actions { right: 10px; opacity: 1; transition: none; } .product-box-4:hover .top-actions { right: 10px; } .action-icon-circle { width: 30px; height: 30px; font-size: 13px; } } @media (max-width: 480px) { .slide-image { height: 260px; padding: 15px; } .product-display-name a { font-size: 13px; line-height: 18px; -webkit-line-clamp: 2; white-space: normal; margin-bottom: 2px !important; } .sale-price-new { font-size: 15px; } .old-price-new { font-size: 12px; } .btn-modern-pill { padding: 8px 16px !important; font-size: 11px; } .top-actions { top: 8px; right: 8px; gap: 6px; } .action-icon-circle { width: 28px; height: 28px; font-size: 11px; } } /* Post css */