/* 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 { overflow: hidden; } .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; } } .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; } .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: #000; color: #fff; border-radius: 4px; border: 1px solid #000; 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; } .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: 15px; } @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(4, 1fr); /* Simulate gray background for the 4th column */ /* background: linear-gradient(to right, #ffffff 75%, #f8f9fa 75%); */ } } .category-list-item { display: flex; align-items: center; padding: 8px 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: 15px; 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: 8px 15px; } .skeleton-icon { width: 24px; height: 24px; border-radius: 4px; background: #f0f0f0; margin-right: 15px; 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; } } /* ============================================ 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 – side padding gives gutter space for the outside arrows */ .popular-products-3-section .pp3-slider-wrapper { padding: 0 50px; } /* ---- 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 – centred on image area (260px tall) ---- */ .popular-products-3-section .pp3-nav-btn { position: absolute; top: 130px; /* half of image height 260px */ transform: translateY(-50%); width: 42px; height: 42px; border: none; background: rgba(255, 255, 255, 0.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); color: #1f2937; /* NO transition here – transition only on cards */ } .popular-products-3-section .pp3-nav-btn:hover { background: #e8e8ec; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: #000; } .popular-products-3-section .pp3-nav-btn:active { background: #dcdce0; } .popular-products-3-section .pp3-prev { left: 70px; } .popular-products-3-section .pp3-next { right: 70px; } /* 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; } /* ============================================ Responsive ============================================ */ /* 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 1 Styles */ .product-box-1 { background: #fff; border: 1px solid #f0f0f0; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; flex-direction: column; } .product-box-1:hover { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important; border-color: transparent; } .productimage { position: relative; background: #fdfdfd; overflow: hidden; } .theme-image-container { padding: 10px; height: 240px; display: flex; align-items: center; justify-content: center; } .slide-image { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .product-box-1:hover .slide-image { transform: scale(1.08); } .product-overlay-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-1:hover .product-overlay-actions { right: 15px; } .action-item { width: 38px; height: 38px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #333; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s; font-size: 14px; } .action-item:hover { background: var(--primary_color); color: #fff !important; transform: scale(1.1); } .action-item .active { color: #ff4747; } .action-item:hover .active { color: #fff; } .product-info { flex-grow: 1; display: flex; flex-direction: column; } .category-tag { letter-spacing: 1px; font-size: 7px; } .product-title-text a { font-size: 16px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .price-now { font-size: 19px; } .btn-modern-action { background: var(--primary_color) !important; color: #fff !important; border: 1px solid #333 !important; border-radius: 8px !important; padding: 10px 15px !important; font-weight: 600; font-size: 14px; transition: all 0.3s; } .btn-modern-action:hover { background: transparent !important; transform: translateY(-2px); color: #000000 !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } .btn-out-of-stock { border: 1px solid #ddd !important; background: #e0e0e0; font-size: 14px; color: #424242 !important; font-weight: 600 !important; border-radius: 8px !important; padding: 10px 15px !important; } .btn-options-box { border: 1px solid #333 !important; color: #ffffff !important; font-weight: 600; background: #333 !important; border-radius: 8px !important; padding: 10px !important; text-align: center; text-decoration: none; transition: all 0.3s; } .btn-options-box:hover { color: #000000 !important; background: transparent !important; } @media (max-width: 768px) { .theme-image-container { height: 200px; padding: 10px; } /* Always show action icons on touch devices */ .product-overlay-actions { right: 10px; opacity: 1; transition: none; } .product-box-1:hover .product-overlay-actions { right: 10px; } .action-item { width: 34px; height: 34px; font-size: 13px; } .product-title-text a { font-size: 14px; } .price-now { font-size: 17px; } .btn-modern-action, .btn-out-of-stock, .btn-options-box { font-size: 13px; padding: 8px 10px !important; } } @media (max-width: 480px) { .theme-image-container { height: 170px; padding: 8px; } .product-overlay-actions { top: 8px; right: 8px; gap: 6px; } .action-item { width: 30px; height: 30px; font-size: 12px; } .product-info { padding: 10px !important; } .product-title-text a { font-size: 13px; } .price-now { font-size: 15px; } .btn-modern-action, .btn-out-of-stock, .btn-options-box { font-size: 12px; padding: 7px 8px !important; border-radius: 6px !important; white-space: nowrap; } } /* Post css */