/* 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 */ .glb-3d-section { position: relative; } .glb-container { width: 100%; display: flex; justify-content: center; align-items: center; } .glb-3d-section model-viewer { width: 100%; height: 500px; background-color: transparent; } .glb-media-image { width: 100%; max-height: 500px; object-fit: contain; } .glb-cta-btn { display: inline-block; align-self: flex-start; padding: 10px 20px; background-color: #000; color: #fff; font-weight: 600; text-decoration: none; border-radius: 5px; /* transition: all 0.3s ease; */ } .glb-cta-btn:hover { background-color: #ffffff; color: #000000; outline: 1px solid #000; /* outline-offset: 3px; */ } @media (max-width: 991px) { .glb-cta-btn { align-self: center; } .glb-3d-section { padding: 20px 0 50px 0; } model-viewer { height: 400px !important; } } @media (max-width: 767px) { model-viewer { height: 300px !important; } } .glb-desc-lineheight { line-height: 1.3; }.three-card-feature-section { padding-top: 5rem; padding-bottom: 5rem; } .tcf-card { /* transition: transform 0.3s ease, box-shadow 0.3s ease; */ background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: 20px; overflow: hidden; box-shadow: 0 1rem 3rem rgba(0,0,0,0.125) !important; } .tcf-card:hover { /* transform: translateY(-10px); */ /* box-shadow: 0 1rem 3rem rgba(0,0,0,0.125) !important; */ } .tcf-card-img-wrapper { /* height: 200px; */ overflow: hidden; background-color: #000; } .tcf-card-img { width: 100%; /* height: 100%; */ /* object-fit: cover; */ transition: transform 0.5s ease; } .tcf-card:hover .tcf-card-img { transform: scale(1.1); } @media (max-width: 768px) { .three-card-feature-section { padding-top: 3rem; padding-bottom: 3rem; } .tcf-card-img-wrapper { height: 180px; } } /* Light Theme (Default) */ .av-heading { /* font-size: 2.5rem; */ margin-bottom: 1rem; color: #1a1a1a; transition: color 0.3s ease; } .av-subheading { /* font-size: 1.25rem; */ /* margin-bottom: 3rem; */ color: #495057; transition: color 0.3s ease; } /* Dark Theme */ .animated-visions-component-dark .av-heading { color: #ffffff; } .animated-visions-component-dark .av-subheading { color: #b0b0b0; } .av-media-container { width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 20px; overflow: hidden; transition: background 0.3s ease; } .av-media-container model-viewer { width: 100%; height: 100%; --poster-color: transparent; } .av-media-container img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; } .av-benefits-list { list-style: none; padding: 0; margin: 0; } .av-benefit-item { margin-bottom: 1.5rem; position: relative; padding-left: 0; transition: color 0.3s ease; } /* Light theme benefit styling */ .av-benefit-title { font-weight: 700; color: #1a1a1a; transition: color 0.3s ease; } .av-benefit-desc { color: #495057; line-height: 1.6; transition: color 0.3s ease; } /* Dark theme benefit styling */ .animated-visions-component-dark .av-benefit-title { color: #ffffff; } .animated-visions-component-dark .av-benefit-desc { color: #b0b0b0; } /* GLB Container */ .glb-container { width: 100%; height: 500px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } /* Enhanced responsive styles */ @media (max-width: 768px) { .av-section { padding: 40px 15px; } /* .av-heading { font-size: 1.75rem; } */ /* .av-subheading { font-size: 1rem; } */ .av-media-container { height: 300px; border-radius: 12px; } .glb-container { height: 300px !important; } .av-benefit-item { margin-bottom: 1rem; } } /* Accessibility: High contrast mode support */ @media (prefers-contrast: more) { .av-heading { font-weight: 900; } .av-benefit-title { font-weight: 900; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .av-media-container, .av-heading, .av-subheading, .av-benefit-item, .av-benefit-title, .av-benefit-desc, .glb-container { transition: none; } }/* 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; }/* Category List Component Styles */ .category-list-section { padding: 40px 0; background-color: transparent; } .category-list-heading { font-size: 2rem; font-weight: 600; margin-bottom: 10px; color: #333; } .category-list-subheading { font-size: 1.1rem; color: #666; margin-bottom: 0; } /* Standalone wrapper (no fourth section) */ .category-list-wrapper { background: transparent; border: 1px solid #dee2e6 !important; border-radius: 4px; position: relative; overflow: hidden; } .category-list-grid { display: grid; grid-template-columns: repeat(1, 1fr); padding: 20px; row-gap: 0; } @media (min-width: 576px) { .category-list-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .category-list-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { .category-list-grid { grid-template-columns: repeat(3, 1fr); } } .category-list-item { display: flex; align-items: center; padding: 9px 15px; text-decoration: none; color: #333; transition: color 0.2s ease; } .category-list-item:hover { color: #000; text-shadow: 0 0 1px rgba(0,0,0,0.1); } .category-list-icon-wrapper { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 14px; flex-shrink: 0; } .category-list-icon { max-width: 100%; max-height: 100%; object-fit: contain; } .category-list-name { font-size: 0.9rem; font-weight: 500; margin: 0; line-height: 1.2; } /* Skeleton Loading State */ .category-skeleton-item { display: flex; align-items: center; padding: 9px 15px; } .skeleton-icon { width: 24px; height: 24px; border-radius: 4px; background: #f0f0f0; margin-right: 14px; animation: pulse 1.5s infinite ease-in-out; } .skeleton-text { height: 12px; width: 60%; background: #f0f0f0; border-radius: 4px; animation: pulse 1.5s infinite ease-in-out; } @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } /* ── Layout: all 4 columns inside one bordered box ── */ .category-list-layout { display: block; } .category-list-layout--with-fourth { display: flex; align-items: stretch; border: 1px solid #dee2e6; border-radius: 4px; overflow: hidden; } /* Remove the wrapper's own border when it sits inside the combined layout */ .category-list-layout--with-fourth .category-list-wrapper { flex: 3 1 0; min-width: 0; border: none !important; border-radius: 0; } /* ── Fourth section column ── */ .category-list-fourth-section { flex: 1 1 0; min-width: 160px; display: flex; flex-direction: column; padding: 20px 16px; } .category-list-fourth-item { display: flex; align-items: center; gap: 14px; padding: 9px 8px; /* border-bottom: 1px solid rgba(0, 0, 0, 0.06); */ } .category-list-fourth-item:last-child { border-bottom: none; } .category-list-fourth-icon-wrap { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .category-list-fourth-icon { max-width: 100%; max-height: 100%; object-fit: contain; } .category-list-fourth-title { font-size: 0.9rem; font-weight: 500; color: #333; line-height: 1.2; } /* Mobile: stack vertically */ @media (max-width: 767px) { .category-list-layout--with-fourth { flex-direction: column; } .category-list-fourth-section { flex: none; border-left: none; border-top: 1px solid #dee2e6; } } /* ============================================ Popular Products 3 Section Styling ============================================ */ /* Section wrapper */ .popular-products-3-section { background: #fff; padding-bottom: 30px; } /* Header */ .popular-products-3-section .pp3-header { margin-bottom: 10px; } .popular-products-3-section .pp3-title { margin-bottom: 6px; } /* Slider wrapper – remove side padding so cards align with container */ .popular-products-3-section .pp3-slider-wrapper { padding: 0; } /* ---- Carousel card equal dimensions ---- */ .popular-products-3-section .popular-products-3-carousel .owl-item .item { min-height: 0 !important; height: 100%; display: flex; flex-direction: column; } /* Force equal heights across all items in a row */ .popular-products-3-section .popular-products-3-carousel .owl-item { display: flex; flex-direction: column; } /* Product card image area – fixed height for alignment */ .popular-products-3-section .popular-products-3-carousel .owl-item .item img, .popular-products-3-section .popular-products-3-carousel .owl-item img { width: 100%; /* height: 260px; */ object-fit: contain; display: block; } /* Transition only on cards */ .popular-products-3-section .popular-products-3-carousel .owl-item .item { transition: transform 0.25s ease, box-shadow 0.25s ease; } .popular-products-3-section .popular-products-3-carousel .owl-item .item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10); } /* ---- Custom nav buttons – square design to match Categories ---- */ .popular-products-3-section .pp3-nav-btn { position: absolute; top: 40%; /* adjust based on image height */ transform: translateY(-50%); width: 36px; height: 36px; border: none; background: #ffffff; border-radius: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: #000000; /* NO transition here – transition only on cards */ } .popular-products-3-section .pp3-nav-btn:hover { background: #f8f9fa; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); color: #000; } .popular-products-3-section .pp3-nav-btn:active { background: #e9ecef; } .popular-products-3-section .pp3-prev { left: 15px; } .popular-products-3-section .pp3-next { right: 15px; } /* Hide default owl nav & dots */ .popular-products-3-section .popular-products-3-carousel .owl-nav, .popular-products-3-section .popular-products-3-carousel .owl-dots { display: none !important; } /* Single item centering */ .popular-products-3-section .pp3-slider-wrapper.pp3-single-item { padding: 0; } .popular-products-3-section .pp3-single-item .popular-products-3-carousel .owl-item { width: 100% !important; max-width: 320px; } /* Tablet: 2 cards */ @media (max-width: 991px) { .popular-products-3-section .popular-products-3-carousel .owl-item img { height: 220px; } .popular-products-3-section .pp3-nav-btn { top: 110px; /* half of 220px */ } } /* Mobile: 1 card */ @media (max-width: 575px) { .popular-products-3-section .popular-products-3-carousel .owl-item img { height: 200px; } .popular-products-3-section .pp3-nav-btn { top: 100px; /* half of 200px */ width: 34px; height: 34px; } } /* Extra small screens (320px - 425px): Maximize content width */ @media (max-width: 425px) { .popular-products-3-section .pp3-slider-wrapper { padding: 0 15px; } .popular-products-3-section .pp3-prev { left: 35px; } .popular-products-3-section .pp3-next { right: 35px; } } @media (max-width: 350px) { .popular-products-3-section .pp3-slider-wrapper { padding: 0; } .popular-products-3-section .popular-products-3-carousel .owl-item img { height: 220px; } .popular-products-3-section .pp3-nav-btn { top: 110px; /* half of 220px */ } .popular-products-3-section .pp3-prev { left: 10px; } .popular-products-3-section .pp3-next { right: 10px; } } /* 4K / Ultra-wide Centering (2560px+) */ @media (min-width: 1400px) { .popular-products-3-section .container-fluid { max-width: 1440px; margin: 0 auto; padding: 0; } }/* Testimonial Component v2 Styles */ .testimonial-section-v2 { padding-bottom: 80px; overflow: hidden; } .testimonial-subtitle { display: block; margin-bottom: 8px; font-size: 0.9rem; } .testimonial-main-heading { color: #333; /* margin-bottom: 50px; */ } .testimonial-card-v2 { background: #fff; border: 1px solid rgba(0, 0, 0, .03); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .05); padding: 15px 30px 30px 30px; height: 100%; position: relative; display: flex; flex-direction: column; } .testimonial-card-v2 .quote-icon { position: relative; top: 0; left: 0; z-index: 1; } .testimonial-content { flex-grow: 1; } .testimonial-text-v2 { line-height: 1.7; font-size: 0.95rem; } .client-name-v2 { font-weight: 700; margin: 0; } /* Row Spacing */ .testimonial-section-v2 .row.g-4 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; } @media (max-width: 767px) { .testimonial-section-v2 { padding: 40px 0; } .testimonial-main-heading { margin-bottom: 20px; font-size: 1.75rem; } .testimonial-card-v2 { padding: 20px; } } @media (max-width: 426px) { .testimonial-main-heading { font-size: 1.5rem; margin-bottom: 15px; } .testimonial-subtitle { font-size: 0.8rem; } .testimonial-text-v2 { font-size: 0.85rem; line-height: 1.6; } } @media (max-width: 575px) { .testimonial-text-v2 { line-height: 1.6; } } /* Product Box 5 Styles */ .product-box-5 { background: #fff; border: 1px solid #e8e8e8; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.28s ease; position: relative; } /* ---- Image Wrap ---- */ .pb5-img-wrap { position: relative; /* overflow: hidden; */ background: #fff; width: 100%; /* aspect-ratio: 1 / 1; */ } .pb5-img-link { display: block; width: 100%; /* height: 100%; */ } .pb5-img { width: 100%; /* height: 100%; */ object-fit: cover; display: block; transition: transform 0.4s ease; } .product-box-5:hover .pb5-img { transform: scale(1.04); } /* ---- Hover Action Buttons (Wishlist / Video) ---- */ .pb5-hover-actions { position: absolute; top: 10px; right: -50px; display: flex; flex-direction: column; gap: 8px; z-index: 10; transition: right 0.3s ease; } .product-box-5:hover .pb5-hover-actions { right: 10px; } .pb5-act { width: 34px; height: 34px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #555; box-shadow: 0 2px 8px rgba(0,0,0,0.12); cursor: pointer; font-size: 13px; transition: background 0.2s, color 0.2s; } .pb5-act:hover { background: #222; color: #fff; } .pb5-heart-active { color: #e74c3c; } /* ---- Card Body ---- */ .pb5-body { padding: 10px 12px 12px; display: flex; flex-direction: row; align-items: center; gap: 8px; } .pb5-body-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } /* ---- Product Name ---- */ .pb5-name { display: block; font-size: 14px; font-weight: 600; color: #1a1a1a; text-decoration: none; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; } .pb5-name:hover { color: var(--primary_color, #333); } /* ---- Price Row ---- */ .pb5-price-row { display: flex; align-items: center; justify-content: space-between; } .pb5-prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pb5-price-new { font-size: 16px; font-weight: 700; color: var(--primary_color); letter-spacing: -0.2px; } .pb5-from-label { font-size: 11px; font-weight: 500; color: #888; } .pb5-price-old { font-size: 13px; font-weight: 400; color: #999; text-decoration: line-through; } /* ---- Info / Quickview Icon ---- */ .pb5-info-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; align-self: center; border-radius: 50%; color: #000000; font-size: 20px; cursor: pointer; transition: color 0.2s; background: transparent; border: none; padding: 0; } /* ---- Responsive ---- */ @media (max-width: 768px) { .pb5-hover-actions { right: 8px; } .pb5-price-new { font-size: 15px; } .pb5-name { font-size: 13px; } } @media (max-width: 480px) { .pb5-body { padding: 8px 10px 10px; } .pb5-price-new { font-size: 14px; } .pb5-price-old { font-size: 12px; } } /* Post css */