/* 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 */ .modern-hero-section { position: relative; width: 100%; overflow: hidden; } .modern-hero-carousel .owl-stage-outer, .modern-hero-carousel .owl-stage, .modern-hero-carousel .owl-item { height: 100%; } .modern-hero-slide { position: relative; height: 80vh; min-height: 525px; display: flex; align-items: center; overflow: hidden; transition: all 0.5s ease; } .modern-hero-content-wrap { position: relative; z-index: 3; width: 100%; height: 100%; padding: 0; display: flex; flex-direction: column; } .modern-hero-content-wrap.v-align-top { justify-content: flex-start; padding-top: 50px; } .modern-hero-content-wrap.v-align-bottom { justify-content: flex-end; padding-bottom: 120px; } .modern-hero-content-wrap.v-align-center { justify-content: center; } @media (min-width: 769px) { .modern-hero-content-wrap.h-align-left .modern-hero-text-box { max-width: 850px; width: 100%; } .modern-hero-content-wrap.h-align-center .modern-hero-text-box { max-width: 1100px; width: 100%; } .modern-hero-content-wrap.h-align-center { align-items: center; } .modern-hero-content-wrap.h-align-right { align-items: flex-end; } } .modern-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .modern-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .modern-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%); z-index: 2; } .modern-hero-text-box { color: #fff; width: 100%; } .v-align-bottom .modern-hero-subheading { position: absolute; top: 60px; left: 5%; right: 5%; } .owl-item.active .modern-hero-subheading { opacity: 1; transform: translateY(0); } .modern-hero-heading { margin-bottom: 1rem; opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .modern-hero-description { margin-bottom: 1.5rem; max-width: 500px; opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out 0.2s; color: #fff; } .modern-hero-description p { margin-bottom: 0; } .modern-hero-cta { display: flex; align-items: center; gap: 25px; opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out 0.4s; } .modern-hero-btn { display: inline-block; padding: 0.8rem 1.8rem; text-decoration: none !important; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .modern-hero-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .modern-hero-secondary-btn { display: inline-flex; align-items: center; gap: 8px; background-color: transparent; color: #fff; text-decoration: none !important; transition: all 0.3s ease; } .modern-hero-secondary-btn svg { transition: transform 0.3s ease; width: 18px; height: 18px; } .modern-hero-secondary-btn:hover { color: #fff; opacity: 0.8; } .modern-hero-secondary-btn:hover svg { transform: translateX(5px); } .modern-hero-text-box .text-center { text-align: center; margin-left: auto; margin-right: auto; } .modern-hero-text-box .text-right { text-align: right; margin-left: auto; } .modern-hero-text-box .text-left { text-align: left; margin-right: auto; } .modern-hero-cta.text-left { display: flex; justify-content: flex-start; } .modern-hero-cta.text-center { display: flex; justify-content: center; } .modern-hero-cta.text-right { display: flex; justify-content: flex-end; } .nav-dotted-line .modern-hero-carousel .owl-dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 10; } .nav-dotted-line .modern-hero-carousel .owl-dot { width: 80px; height: 4px; background: rgba(255, 255, 255, 0.3) !important; border-radius: 0; transition: all 0.3s ease; border: none; padding: 0; margin: 0; } .nav-dotted-line .modern-hero-carousel .owl-dot span { display: none !important; } .nav-dotted-line .modern-hero-carousel .owl-dot.active { background: #fff !important; } .nav-arrows-dots .modern-hero-controls { position: absolute; bottom: 40px; right: 50px; z-index: 20; display: flex; align-items: center; gap: 40px; } .nav-arrows-dots .owl-nav, .nav-arrows-dots .owl-dots { margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row; align-items: center; } .nav-arrows-dots .owl-nav { gap: 30px; flex-direction: row !important; } .nav-arrows-dots .owl-dots { gap: 10px; } .nav-arrows-dots .owl-nav button { position: static; background: transparent; color: #fff; padding: 0; margin: 0; height: 24px; width: 24px; display: flex; align-items: center; justify-content: center; opacity: 0.85; transition: opacity 0.3s ease, transform 0.3s ease; } .nav-arrows-dots .owl-nav button:hover { opacity: 1 !important; transform: scale(1.15); } .nav-arrows-dots .owl-nav button.disabled { opacity: 0.3 !important; pointer-events: none; } .nav-arrows-dots .owl-nav .owl-prev { order: 1 !important; } .nav-arrows-dots .owl-nav .owl-next { order: 2 !important; } .nav-arrows-dots .owl-dot { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; height: 24px; } .nav-arrows-dots .owl-dot span { display: block; width: 7px; height: 7px; background: rgba(255, 255, 255, 0.5); margin: 0; border-radius: 50%; border: none; transition: background 0.3s ease, transform 0.3s ease; } .nav-arrows-dots .owl-dot.active span { background: #fff; transform: scale(1.1); } @media (max-width: 768px) { .nav-arrows-dots .owl-nav { display: none !important; } .nav-arrows-dots .modern-hero-controls { right: 0; left: 0; bottom: 20px; width: 100%; justify-content: center; } .nav-arrows-dots .owl-dots { width: 15%; justify-content: center; gap: 6px !important; } } .nav-numbers .modern-hero-numbers { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 25px; z-index: 20; color: #fff; } .nav-numbers .modern-hero-numbers .nav-arrow { background: transparent; border: none; color: #fff; cursor: pointer; opacity: 0.8; transition: all 0.3s ease; padding: 0; display: flex; align-items: center; justify-content: center; } .nav-numbers .modern-hero-numbers .nav-arrow:hover { opacity: 1; transform: scale(1.15); } .nav-numbers .modern-hero-numbers .number-counter { min-width: 50px; text-align: center; letter-spacing: 1px; } @media (max-width: 768px) { .nav-numbers .modern-hero-numbers { bottom: 25px; gap: 20px; } } .owl-item.active .modern-hero-heading, .owl-item.active .modern-hero-description, .owl-item.active .modern-hero-cta { opacity: 1; transform: translateY(0); } @media (max-width: 992px) { .modern-hero-slide { height: 70vh; } } @media (max-width: 768px) { .modern-hero-slide { height: auto; min-height: unset; padding: 0; } .modern-hero-text-box { text-align: center; margin: 0 auto; } .modern-hero-description { margin: 0 auto 1.5rem; } .modern-hero-carousel .owl-dot { width: 40px; } .modern-hero-btn { padding: 0.8rem 1.8rem; } .modern-hero-cta { gap: 15px; } .modern-hero-content-wrap { justify-content: center; min-height: 500px; padding: 50px 0; } .modern-hero-content-wrap.v-align-top { justify-content: flex-start; } .modern-hero-content-wrap.v-align-bottom { justify-content: flex-end; padding-bottom: 80px; } .modern-hero-content-wrap.v-align-center { justify-content: center; } .v-align-bottom .modern-hero-subheading { top: 30px; } } @media (max-width: 480px) { .modern-hero-slide { height: auto; min-height: unset; padding: 0; } .modern-hero-content-wrap { min-height: 400px; } .modern-hero-btn { padding: 0.8rem 1.8rem; } }.category-borderless-heading { padding-bottom: 0.5rem; margin: 0; } .category-borderless-slider-section { padding-top: 1.5rem; padding-bottom: 1.5rem; } .category-borderless-slider-section.placeholder { text-align: center; } .category-borderless-subheading { margin-bottom: 1.5rem; } .category-borderless-slider-header { text-align: center; } .category-borderless-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; min-width: 0; } .category-borderless-item { padding: 0; min-width: 0; } .category-borderless-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 15px; border-radius: 12px; background: transparent; text-align: center; width: 100%; min-width: 0; } .category-borderless-card:hover { background: #f3f4f6; } .category-image-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background: transparent; border: none; overflow: hidden; } .category-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.5s ease; } .category-title { margin: 0; word-wrap: break-word; overflow-wrap: anywhere; white-space: normal; width: 100%; } .category-borderless-placeholder .category-borderless-card { margin-bottom: 20px; } @media (max-width: 1200px) { .category-borderless-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 991px) { .category-borderless-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .category-borderless-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .category-borderless-slider-section { padding: 40px 0; } .category-image-container { margin-bottom: 15px; } .category-borderless-card { padding: 20px 10px; } } @media (max-width: 480px) { .category-borderless-card { padding: 15px 5px; } }.text-box-bg-image-section { width: 100%; overflow: hidden; position: relative; padding: 1.5rem 0; } .text-box-bg-image-container { text-align: center; max-width: 1200px; } .text-box-bg-image-heading-wrapper { margin-bottom: 1.5rem; } .text-box-bg-image-heading { text-transform: uppercase; margin: 0; display: inline-block; width: 100%; word-break: break-word; overflow-wrap: break-word; } /* Image mask effect */ .text-box-bg-image-clipped { background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .text-box-bg-image-content { margin: 0 auto; } .text-box-bg-image-content p { margin-bottom: 0; }.offers-grid-section { width: 100%; } .offers-grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; } .offers-grid-header { text-align: center; margin-bottom: 20px; } .offers-grid-item { border-radius: 12px; display: flex; align-items: center; padding: 30px; transition: transform 0.2s ease-in-out; } .offers-grid-image-wrapper { flex: 0 0 40%; max-width: 40%; display: flex; justify-content: center; align-items: center; } .offers-grid-img { width: 100%; height: auto; object-fit: contain; max-height: 200px; } .offers-grid-content { flex: 1; padding-left: 25px; display: flex; flex-direction: column; justify-content: center; } .offers-grid-heading { margin-bottom: 20px; } .offers-grid-button { display: inline-block; background-color: var(--btn-bg, #0d5ef8); color: var(--btn-color); padding: 10px 20px; border-radius: 50px; text-decoration: none; width: fit-content; position: relative; overflow: hidden; transition: color 0.5s ease; isolation: isolate; } .offers-grid-button::before { content: ""; position: absolute; z-index: -2; inset: 0; background: var(--btn-bg, #0d5ef8); border-radius: 50px; } .offers-grid-button::after { content: ""; position: absolute; z-index: -1; left: 0; top: 50%; width: 120%; height: 200%; border-radius: 50%; background: #3358E3; translate: -110% -30%; transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: translate; } .offers-grid-button:hover { color: #ffffff !important; } .offers-grid-button:hover::after { translate: -10% -50%; } /* Section Header Styles */ .offers-grid-section .section-heading { margin-bottom: 15px; margin-left: auto; margin-right: auto; } .offers-grid-section .section-subheading { margin: 0 auto; } @media (max-width: 991px) { .offers-grid-container { gap: 15px; } .offers-grid-item { padding: 20px; } } @media (max-width: 767px) { .offers-grid-container { grid-template-columns: 1fr; } .offers-grid-item { flex-direction: column; text-align: center; } .offers-grid-image-wrapper { max-width: 60%; margin-bottom: 20px; } .offers-grid-content { padding-left: 0; align-items: center; } }.product-list-tabs-section { width: 100%; padding: 1.5rem 0; } .product-list-tabs-nav { display: flex; justify-content: flex-start; gap: 15px; list-style: none; padding: 0; margin-bottom: 30px; border: none; } .product-list-tabs-nav .nav-item .nav-link { background: transparent; border: none; padding: 10px 24px; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; } .product-list-tabs-nav .nav-item .nav-link:hover { color: #111; } .product-list-tabs-nav .nav-item .nav-link.active { color: #000000; background-color: #eff6ff; } .product-list-tabs-pane { display: none; } .product-list-tabs-pane.active { display: block; } .product-list-tabs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .listtabs-section-header .section-subtitle { margin-bottom: 1rem; } /* Responsive */ @media (max-width: 1199px) { .product-list-tabs-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991px) { .product-list-tabs-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } } @media (max-width: 575px) { .product-list-tabs-grid { grid-template-columns: 1fr; } .product-list-tabs-nav { gap: 15px; } } /* See All Button */ .see-all-container { text-align: center; } .btn-see-all { display: inline-block; padding: 12px 35px; border-radius: 50px; text-decoration: none; position: relative; overflow: hidden; transition: color 0.5s ease; isolation: isolate; border: 2px solid #3358E3; } .btn-see-all::before { content: ""; position: absolute; z-index: -2; inset: 0; background: transparent; border-radius: 50px; } .btn-see-all::after { content: ""; position: absolute; z-index: -1; left: 0; top: 50%; width: 120%; height: 200%; border-radius: 50%; background: #3358E3; translate: -110% -30%; transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: translate; } .btn-see-all:hover { color: #ffffff !important; } .btn-see-all:hover::after { translate: -10% -50%; } .product-list-tabs-placeholder { padding: 1.5rem 0; }/* Modern Category Overlay Styles */ .modern-category-overlay-section { position: relative; overflow: hidden; padding: 1.5rem 0; } .modern-category-overlay-header { text-align: center; margin-bottom: 20px; } .modern-category-overlay-grid { display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; } .modern-category-overlay-item { position: relative; flex: 0 0 25%; max-width: 25%; /* aspect-ratio: 3 / 4.5; */ overflow: hidden; text-decoration: none !important; display: block; } .overlay-image-wrapper { width: 100%; height: 100%; position: relative; overflow: hidden; /* background: #111; */ } .overlay-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1); } .modern-category-overlay-item:hover .overlay-img { transform: scale(1.05); } .overlay-bottom-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 80px 20px 40px; background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 60%, transparent 100%); text-align: center; display: flex; flex-direction: column; justify-content: flex-end; min-height: 50%; } .overlay-cat-name { color: #fff; margin: 0; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6); transition: transform 0.4s ease; } .modern-category-overlay-placeholder { text-align: center; padding: 1.5rem 0; } /* Responsive Overrides */ @media (max-width: 1200px) { .modern-category-overlay-item { /* aspect-ratio: 3 / 4; */ } } @media (max-width: 991px) { .modern-category-overlay-item { flex: 0 0 50%; max-width: 50%; /* aspect-ratio: 1 / 1.1; */ } } @media (max-width: 768px) { .modern-category-overlay-section { padding: 40px 0; } .overlay-bottom-content { padding: 60px 15px 30px; } } @media (max-width: 480px) { .modern-category-overlay-item { flex: 0 0 100%; max-width: 100%; /* aspect-ratio: 4 / 3; */ } }/* Four Product List with Image Styles */ .four-product-list-section { position: relative; overflow: hidden; } .four-product-list-section .section-title { color: #111; margin-bottom: 2.5rem !important; } .static-image-card { position: relative; overflow: hidden; height: 100%; display: flex; } .image-zoom-container { position: relative; overflow: hidden; width: 100%; height: 100%; } .static-img { width: 100%; height: 97%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .static-image-card:hover .static-img { transform: scale(1.08); /* Zoom effect on static image only */ } /* Align product box text like the image (titles/brands usually left aligned) */ .four-product-list-section .product-loop { border: none !important; background: transparent !important; padding: 0 !important; } /* Ensure equal height for the grid column and image column on desktop */ @media (min-width: 992px) { .four-product-list-section .row.align-items-stretch { display: flex; } } @media (max-width: 991px) { .static-image-card { min-height: 500px; margin-top: 20px; } } @media (max-width: 768px) { .static-image-card { min-height: 400px; margin-top: 0; } .overlay-title { font-size: 1.5rem; } }/* ============================================ Hero Banner Centered Component CSS ============================================ */ .hero-banner-centered-section { position: relative; width: 100%; box-sizing: border-box !important; overflow: hidden; margin: 1.5rem 0; } .hero-banner-centered-container { position: relative; width: 100%; min-height: 100vh; /* Set as viewport height or slightly less as per requirement */ max-height: 800px; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; } /* Background Image Layer */ .hero-banner-centered-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1; } /* Dark Overlay for Text Clarity */ .hero-banner-centered-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.6) 100%); z-index: 2; pointer-events: none; } /* Content Layer */ .hero-banner-centered-content { position: relative; z-index: 3; width: 100%; padding: 4rem 2rem; text-align: center; color: #ffffff; } .hero-banner-centered-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } /* Subheading/Lead Text (Badge style) */ .hero-banner-centered-badge { font-size: 0.9rem; font-weight: 500; letter-spacing: 1px; color: rgba(255, 255, 255, 0.9); margin-bottom: 0.5rem; animation: hbCenteredFadeUp 0.8s ease-out both; } /* Heading */ .hero-banner-centered-heading { line-height: 1.15; margin: 0; text-transform: uppercase; animation: hbCenteredFadeUp 0.8s ease-out 0.1s both; } /* Body Text */ .hero-banner-centered-text { font-size: clamp(1rem, 2vw, 1rem); line-height: 1.6; color: rgba(255, 255, 255, 0.9); max-width: 600px; margin: 0 auto; animation: hbCenteredFadeUp 0.8s ease-out 0.2s both; } /* CTA Button */ .hero-banner-centered-btn { position: relative; padding: 12px 35px; /* font-size: 1rem; font-weight: 600; */ color: #111; background: #fff; border: 2px solid #fff; border-radius: 50px; text-decoration: none; overflow: hidden; transition: color 0.5s ease; display: inline-block; isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* ← prevents subpixel shift during compositing */ } .hero-banner-centered-btn span { position: relative; z-index: 2; } .hero-banner-centered-btn::before { content: ""; position: absolute; z-index: -2; inset: 0; background: #fff; border-radius: 50px; } .hero-banner-centered-btn::after { content: ""; position: absolute; z-index: -1; left: 0; top: 50%; width: 120%; height: 200%; border-radius: 50%; background: #000; translate: -100% -30%; transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: translate; } .hero-banner-centered-btn:hover { color: #fff; transform: none !important; } .hero-banner-centered-btn:hover::after { translate: -10% -50%; } /* Animation */ /* ============================================ Responsive Adjustments ============================================ */ /* Tablet View */ @media (max-width: 991px) { .hero-banner-centered-container { min-height: 70vh; } .hero-banner-centered-inner { max-width: 700px; } } /* Mobile View */ @media (max-width: 767px) { .hero-banner-centered-container { min-height: 500px; } .hero-banner-centered-content { padding: 3rem 1.5rem; } .hero-banner-centered-inner { gap: 1.25rem; } .hero-banner-centered-btn { padding: 0.85rem 2.2rem; font-size: 0.9rem; } } @media (max-width: 480px) { .hero-banner-centered-container { min-height: 400px; } .hero-banner-centered-heading { font-size: 1.75rem; } .hero-banner-centered-text { font-size: 0.9rem; } }/* ============================================ Modern Category Top Label Component CSS ============================================ */ .modern_category_top_label-section { position: relative; width: 100%; overflow: hidden; } .modern_category_top_label_header { padding-bottom: 1.5rem; text-align: center; } .modern_category_top_label_heading { padding-bottom: 0.5ren; } .modern_category_top_label-grid { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -15px; } .modern_category_top_label-item { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 15px; box-sizing: border-box; } .top-label-card { border-radius: 18px; padding: 30px 20px; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none !important; transition: none; overflow: hidden; border: none; } .top-label-card-header { margin-bottom: 22px; } .top-label-cat-name { margin: 0 0 28px 0; } .top-label-shop-btn { display: inline-block; padding: 13px 30px; border: 2px solid #0d5ef8; background: transparent; border-radius: 50px; text-decoration: none; position: relative; overflow: hidden; transition: color 0.5s ease; isolation: isolate; } .top-label-shop-btn::before { content: ""; position: absolute; z-index: -2; inset: 0; background: transparent; border-radius: 50px; } .top-label-shop-btn::after { content: ""; position: absolute; z-index: -1; left: 0; top: 50%; width: 120%; height: 200%; border-radius: 50%; background: #3358E3; translate: -110% -30%; transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: translate; } .top-label-shop-btn:hover { color: #ffffff !important; } .top-label-shop-btn:hover::after { translate: -10% -50%; } .top-label-image-wrapper { width: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .top-label-img { width: 100%; height: auto; object-fit: contain; display: block; margin: 0 auto; } /* Responsive Design */ @media (max-width: 1024px) { .modern_category_top_label-item { flex: 0 0 50%; max-width: 50%; } } @media (max-width: 767px) { .modern_category_top_label-item { flex: 0 0 100%; max-width: 100%; } .top-label-cat-name { padding-bottom: 0.3rem; } }.promo-banner-section { width: 100%; } .promo-banner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; width: 100%; } .promo-banner-header { text-align: center; padding-bottom: 1rem; } .promo-banner-card { background-color: #f3f4f6; border-radius: 16px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s ease; height: 100%; } .promo-banner-content { margin-bottom: 35px; display: flex; flex-direction: column; align-items: center; gap: 15px; } .promo-banner-title { margin: 0; padding-bottom: 1rem; } .promo-banner-button { display: inline-block; background-color: #0d5ef8; color: #ffffff; padding: 13px 30px; border-radius: 50px; text-decoration: none; position: relative; overflow: hidden; transition: color 0.5s ease; isolation: isolate; border: none; } .promo-banner-button::before { content: ""; position: absolute; z-index: -2; inset: 0; background: #0d5ef8; border-radius: 50px; } .promo-banner-button::after { content: ""; position: absolute; z-index: -1; left: 0; top: 50%; width: 120%; height: 200%; border-radius: 50%; background: #3358E3; translate: -110% -30%; transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: translate; } .promo-banner-button:hover { color: #ffffff !important; } .promo-banner-button:hover::after { translate: -10% -50%; } .promo-banner-image-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; } .promo-banner-img { max-width: 100%; height: auto; object-fit: contain; max-height: 350px; } /* Responsive adjustments */ @media (max-width: 991px) { .promo-banner-card { padding: 30px 15px; } .promo-banner-img { max-height: 200px; } } @media (max-width: 767px) { .promo-banner-grid { grid-template-columns: 1fr; gap: 20px; } .promo-banner-card { padding: 35px 20px; } .promo-banner-img { max-height: 220px; } }.product-detail-banner-section { width: 100%; } .product-detail-banner-header { padding-bottom: 1.5rem; text-align: center; } .product-detail-banner-header .section-title { padding-bottom: 0.5rem; margin-bottom: 0; } .product-detail-banner-header .section-subtitle { margin: 0 auto; } .product-detail-banner-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; width: 100%; } @media (min-width: 768px) { .product-detail-banner-grid { grid-template-columns: 1fr auto 1fr; gap: 30px; } } @media (min-width: 1200px) { .product-detail-banner-grid { max-width: 1400px; margin: 0 auto; gap: 40px; } } .product-detail-banner-left { display: flex; flex-direction: column; gap: 20px; text-align: left; /* max-width: 500px; */ } .product-detail-banner-heading { margin: 0; } .product-detail-banner-description { /* max-width: 400px; */ } .product-detail-banner-button { display: inline-block; background-color: #4b70f5; color: #ffffff; padding: 12px 32px; border-radius: 50px; text-decoration: none; width: fit-content; transition: background-color 0.2s ease, transform 0.2s ease; } .product-detail-banner-button:hover { background-color: #3b5bdb; color: #ffffff; transform: translateY(-2px); } .product-detail-banner-center { display: flex; justify-content: center; align-items: center; } .product-detail-banner-img { max-width: 100%; height: auto; object-fit: contain; transition: transform 0.5s ease; } @media (min-width: 768px) { .product-detail-banner-img { width: 580px; } } .product-detail-banner-right { display: flex; flex-direction: column; gap: 30px; text-align: left; align-items: flex-start; /* max-width: 300px; */ /* margin-left: auto; */ } .product-detail-banner-feature { display: flex; flex-direction: column; gap: 8px; width: 100%; } .product-detail-banner-section .feature-title { margin: 0 0 10px 0; } .feature-subtitle { margin: 0; text-transform: capitalize; } /* Responsive adjustments */ @media (max-width: 767px) { .product-detail-banner-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .product-detail-banner-img { padding-top: 15px; padding-bottom: 15px; } .product-detail-banner-left { align-items: center; text-align: center; } .product-detail-banner-description { margin: 0 auto; } .product-detail-banner-right { text-align: center; align-items: center; } } @media (min-width: 768px) and (max-width: 991px) { .product-detail-banner-grid { gap: 25px; } } @media (min-width:768px) { .product-detail-banner-section { display: flex; align-items: center; } }.tb-section { position: relative; overflow: hidden; } /* ── Overlay (bg-image variants) ─────────────────────────────── */ .tb-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .tb-content { position: relative; z-index: 1; padding-top: 5rem; padding-bottom: 5rem; } .tb-sub { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.5rem; opacity: 0.85; } /* ── Heading ─────────────────────────────────────────────────── */ .tb-heading { font-weight: 900; line-height: 1.1; margin-bottom: 1rem; } /* ── Divider ─────────────────────────────────────────────────── */ .tb-divider { width: 48px; height: 3px; border-radius: 2px; opacity: 0.2; margin-bottom: 1.25rem; flex-shrink: 0; } /* ── Body text ───────────────────────────────────────────────── */ .tb-body { line-height: 1.85; opacity: 0.85; margin-bottom: 1.5rem; } /* ── Side image ──────────────────────────────────────────────── */ .tb-image-wrap { border-radius: 1rem; overflow: hidden; } .tb-img { width: 100%; max-height: 560px; object-fit: cover; display: block; border-radius: 1rem; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.45s ease, box-shadow 0.45s ease; } .tb-image-wrap:hover .tb-img { transform: scale(1.025); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 6px 18px rgba(0, 0, 0, 0.1); } /* ── Button ──────────────────────────────────────────────────── */ .tb-btn { display: inline-block; padding: 0.625rem 2rem; border-radius: 50px; font-size: 0.875rem; font-weight: 600; text-decoration: none; margin-top: 0.5rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s; } .tb-btn:hover { opacity: 0.87; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 991px) { .tb-img { max-height: 340px; } } @media (max-width: 575px) { .tb-content { padding-top: 3rem; padding-bottom: 3rem; } .tb-heading { font-size: 1.75rem; } }.features-grid-section { width: 100%; } .features-grid-section .section-header { margin-bottom: 1.5rem; text-align: center; } .features-grid-row { display: flex; flex-wrap: wrap; margin: -10px; justify-content: center; } .feature-card-wrapper { padding: 10px; flex: 1 1 100%; max-width: 100%; display: flex; } .feature-card { border-radius: 16px; padding: 40px 20px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; transition: all 0.3s ease; } .feature-image-container { width: 50px; height: 50px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } .feature-img { max-width: 100%; max-height: 100%; object-fit: contain; } .feature-title { margin-bottom: 12px; } .section-heading { margin-bottom: 0.5rem; } .section-subheading { margin-bottom: 0; } @media (min-width: 576px) { .feature-card-wrapper { flex: 1 1 50%; max-width: 50%; } } @media (min-width: 992px) { .feature-card-wrapper { flex: 1 1 0; min-width: 250px; max-width: 100%; } } @media (min-width: 992px) { .features-grid-row:has(> :only-child) .feature-card-wrapper { max-width: 500px; } } /* Product Box 15 Styles */ /* Product Box Layout 15 - Clean Design with No Background */ .product-item { position: relative; margin-bottom: 20px; transition: transform 0.3s ease; } /* Product Image Container */ .product-image-container { position: relative; background-color: #f3f3f3; overflow: hidden; border-radius: 8px; } .product-image { width: 100%; height: 250px; object-fit: contain; display: block; padding: 15px; transition: opacity 0.5s ease; } .main-image { position: relative; z-index: 1; } .hover-image { position: absolute; top: 0; left: 0; opacity: 0; z-index: 2; background-color: #f3f3f3; } .product-item:hover .hover-image { opacity: 1; } /* Action Overlay */ .action-overlay { position: absolute; top: 10px; right: -50px; display: flex; flex-direction: column; gap: 8px; z-index: 10; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .product-item:hover .action-overlay { right: 10px; } .action-item { width: 36px; height: 36px; background: #fff !important; color: #333 !important; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; 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) !important; color: #fff !important; transform: scale(1.1); } .action-item .active { color: #ff4747 !important; } .action-item:hover .active { color: #fff !important; } .btn-add-to-cart { position: absolute; bottom: -50px; left: 0; width: 100%; background-color: #111 !important; color: #fff !important; border: none !important; padding: 12px 0 !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; border-radius: 0 !important; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; z-index: 15; } .product-item:hover .btn-add-to-cart { bottom: 0; } .btn-add-to-cart:hover { background-color: var(--primary_color) !important; } /* Product Badges */ .product-badges { position: absolute; bottom: 10px !important; left: 10px !important; z-index: 2 !important; } .badge { display: inline-block; padding: 4px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px; line-height: 1; } .sale-badge { background-color: #ff6b6b !important; color: white !important; } .out-of-stock-badge { background-color: #6c757d !important; color: white !important; } /* Product Info */ .product-info { padding: 12px 10px !important; text-align: left; } .product-name { display: block; font-size: 14px !important; font-weight: 500 !important; color: #333 !important; text-decoration: none !important; line-height: 1.4 !important; margin-bottom: 1px !important; /* min-height: 40px; */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; transition: color 0.3s ease; } .product-name:hover { color: #007bff; text-decoration: none; } /* Product Price */ .product-price { display: flex; align-items: start; justify-content: left; gap: 8px; flex-wrap: wrap; } .current-price { font-size: 16px; font-weight: 600; color: #333; } .original-price { font-size: 14px; color: #999; text-decoration: line-through; } /* Responsive Design */ @media (max-width: 768px) { .product-item { margin-bottom: 15px; } .product-name { font-size: 13px; min-height: 36px; } .current-price { font-size: 15px; } .original-price { font-size: 13px; } .badge { font-size: 10px; padding: 3px 6px; } } @media (max-width: 576px) { .product-item { margin-bottom: 12px; } .product-info { padding: 12px 10px; } .product-name { font-size: 12px; min-height: 34px; margin-bottom: 6px; } .current-price { font-size: 14px; } .original-price { font-size: 12px; } } /* Grid Layout for Multiple Products */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } @media (max-width: 768px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } } @media (max-width: 576px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } } /* Smooth Transitions */ .product-item * { transition: all 0.3s ease; } /* Focus States for Accessibility */ /* .product-name:focus { outline: 2px solid #007bff; outline-offset: 2px; border-radius: 2px; } */ /* Loading State */ .product-item.loading { opacity: 0.6; pointer-events: none; } .product-item.loading .product-image { animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Post css */