/** Shopify CDN: Minification failed
Line 832:12 Expected identifier but found whitespace
Line 832:14 Unexpected "{"
Line 832:23 Expected ":"
Line 832:51 Expected ":"
**/
/*
© 2023 EcomGraduates.com
https://www.ecomgraduates.com
*/
/*
Topbar
*/
#topbar {}
#topbar.text-body .nav-link {
color: var(--bs-dark);
opacity: .6;
transition: all .2s ease;
font-size: .875em !important;
}
#topbar.text-body .nav-link:hover,
#topbar.text-body .nav-link:focus {
opacity: 1;
}
#topbar.text-body ul.social-icons .nav-link {
display: flex;
}
ul.social-icons li a[href*="facebook"]:hover,
ul.social-icons li a[href*="facebook"]:focus {
color: #3b5998 !important;
}
ul.social-icons li a[href*="twitter"]:hover,
ul.social-icons li a[href*="twitter"]:focus {
color: #1da1f2 !important;
}
ul.social-icons li a[href*="instagram"]:hover,
ul.social-icons li a[href*="instagram"]:focus {
color: #8a3ab9 !important;
}
ul.social-icons li a[href*="youtube"]:hover,
ul.social-icons li a[href*="youtube"]:focus {
color: #FF0000 !important;
}
#topbar .btn-sm {
padding-top: .1rem;
padding-bottom: .1rem;
}
/*
Announcement bar
*/
.announcement-bar {
position: relative;
transition: all .2s ease-out;
}
.announcement-bar.hide {
height: 0;
opacity: 0;
}
.announcement-bar p {
margin: 0;
}
.announcement-bar a {
text-decoration: none;
transition: all 0.2s ease-out;
}
.announcement-bar.text-white a {
color: white;
}
.announcement-bar.text-dark a {
color: var(--bs-dark);
}
.announcement-bar a:hover,
.announcement-bar a:focus {
opacity: 0.75;
}
.announcement-bar a .rte {
display: flex;
align-items: center;
justify-content: center;
}
.announcement-bar svg {
transition: all 0.2s ease-out;
}
.announcement-bar a:hover svg {
transform: translateX(2px);
}
.announcement-bar .carousel-control {
width: auto;
height: auto;
}
.announcement-bar .carousel-control-icon {
width: 1.75rem;
height: 1.75rem;
background-size: 70%;
}
.announcement-bar ul.countdown-timer {
margin: 0 0 0 1rem;
}
.announcement-bar .btn-close {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: .25rem;
background-size: 50%;
transition: all .2s ease-out;
}
/*
Navbar
*/
.navbar .navbar-brand {
color: currentColor;
}
.navbar .nav-link {
padding: 0.25rem 0.75rem;
font-weight: 500;
display: flex;
align-items: center;
}
.navbar.text-body .nav-link {
color: var(--bs-body);
}
.navbar.text-body .nav-link:hover {
color: var(--bs-dark-lighten-10);
}
.navbar.text-body .nav-link.active {
color: var(--bs-primary);
}
.navbar.text-white .nav-link {
color: white;
}
.navbar.text-white .nav-link:hover {
color: rgba(255, 255, 255, 0.9);
}
.navbar.text-white .nav-link.active {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
.navbar .nav-link.dropdown-toggle::after {
transform: translateY(1px);
}
#navbar-desktop .dropdown-menu {
border: none;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
overflow: hidden;
margin-top: 0;
transition: margin-top 700ms;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-megamenu {
width: 100%;
padding: 1rem 0;
}
.dropdown-megamenu.show {
display: flex;
}
.dropdown-megamenu .col {
max-width: 280px;
}
.dropdown-megamenu .dropdown-item-level-2 {
font-family: var(--bs-headings-font-family);
font-size: 1rem;
margin-bottom: .25rem;
}
.dropdown-megamenu .dropdown-item-level-3 {
font-size: 0.875rem;
}
.dropdown-megamenu .megamenu-col a {
display: block;
text-align: center;
color: currentColor;
text-decoration: none;
font-size: 0.875rem;
}
.dropdown-megamenu .megamenu-col img {
transition: all 0.2s ease-out;
}
.dropdown-megamenu .megamenu-col a:hover img {
opacity: 0.85;
}
.navbar .nav-icons .nav-link {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.navbar-transparent {
position: absolute;
width: 100%;
transition: all .2s ease-out;
}
html:not(.has-scrolled) .navbar-transparent {
background: transparent !important;
box-shadow: none !important;
}
/* hover navbar start */
html:not(.has-scrolled) .navbar-hover.navbar-transparent:not(:hover) {
background: transparent !important;
box-shadow: none !important;
}
html:not(.has-scrolled) .navbar-hover.navbar-transparent:hover {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
color: var(--bs-body-color) !important;
}
html:not(.has-scrolled) .navbar-hover.navbar-transparent:hover .nav-link {
color: var(--bs-body-color) !important;
}
html:not(.has-scrolled) .navbar-hover.navbar-transparent:hover .nav-link.active {
color: var(--bs-primary) !important;
}
html:not(.has-scrolled) .navbar-hover.navbar-transparent:hover .navbar-brand img {
filter: unset !important;
}
html:not(.has-scrolled) .navbar-hover.navbar-transparent:hover .dropdown-megamenu.dropdown-menu.show {
margin: 1rem !important;
border-radius: var(--bs-border-radius) !important;
width: calc(100% - 2rem);
}
/* hover navbar end */
html:not(.has-scrolled) .navbar-transparent .navbar-brand.logo-inverted img {
filter: invert(1);
}
/* html:not(.has-scrolled) #navbar-desktop.navbar-transparent .dropdown-menu {
border-radius: var(--bs-border-radius) !important;
}
html:not(.has-scrolled) .navbar-transparent .dropdown-megamenu {
padding-top: 2rem;
padding-bottom: 2rem;
width: 98%;
margin: 0 1%;
} */
.navbar-bg-blur:not(:hover) {
backdrop-filter: blur(20px);
--bs-bg-opacity: .75;
}
.predictive-search-results {
padding: 0.75rem 0.5rem;
border-radius: 0.5rem;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
z-index: 9999;
max-height: 480px;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
min-width: 100%;
box-sizing: border-box;
}
.predictive-search-results ul {
list-style: none;
margin: 0;
padding: 0;
}
.predictive-search-results .product-item {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
gap: 0.75rem;
border-bottom: 1px solid #eee;
white-space: normal;
word-break: break-word;
}
.predictive-search-results .product-item:last-child {
border-bottom: none;
}
.predictive-search-results .product-item img {
max-width: 50px;
height: auto;
border-radius: 0.375rem;
flex-shrink: 0;
}
#predictive-search:empty {
display: none !important;
}
/*
Newsletter
*/
.newsletter.text-white {
position: relative;
}
.newsletter.text-white::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.75rem;
background-color: rgba(255, 255, 255, 0.1);
}
.newsletter.text-white .newsletter-inner {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.newsletter.text-white .description {
opacity: 0.75;
}
.newsletter.text-white .notice {
opacity: 0.5;
}
/*
/*
Footer
*/
.newsletter-social-icons a {
display: inline-flex;
justify-content: center;
align-items: center;
}
.newsletter-social-icons svg {
width: 28px !important;
height: 28px !important;
transition: opacity 0.3s ease;
}
.newsletter-social-icons a:hover svg {
opacity: 0.7;
}
/* Reset the list display for accordion behavior */
#footer-blocks ul.list-unstyled {
display: block;
flex-wrap: unset;
justify-content: unset;
width: 100%;
max-width: unset;
}
/* Center newsletter form elements on mobile */
#footer form input[type="email"],
#footer form button[type="submit"] {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
/* Center other form and button elements */
#footer .btn,
#footer .form-control {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
} /* Fix mobile accordion arrow positioning with centered titles */
#footer .nav-link[aria-expanded]::after {
position: absolute;
right: 1rem; /* Or use left: 1rem if you want it on the left */
top: 50%;
transform: translateY(-50%);
}
/* Better alignment for accordion toggle on mobile */
#footer .nav-link[aria-expanded] {
position: relative;
padding: 1rem 2.5rem 1rem 2.5rem; /* Equal left/right padding */
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text-align: center;
}/* Fix transition glitch on mobile by removing animations */
@media (max-width: 991px) {
/* Prevent transition glitches with immediate centering */
#footer-blocks .collapse,
#footer-blocks .collapsing {
transition: none !important;
text-align: center !important;
}
/* Ensure nav links are always centered, even during transitions */
#footer-blocks .collapse .nav-item,
#footer-blocks .collapse .nav-link,
#footer-blocks .collapsing .nav-item,
#footer-blocks .collapsing .nav-link {
text-align: center !important;
display: block !important;
width: 100% !important;
transition: none !important;
}
}/*
Custom Footer CSS - Javvy-inspired Layout
*/
/* Main footer styling */
#footer {
padding-top: 4rem;
padding-bottom: 1rem;
}
/* Reduce space at the bottom */
#footer-blocks {
margin-bottom: 2rem !important;
}
/* Fix padding for the bottom section */
#footer-copyright {
padding-bottom: 1.5rem;
}
/* Add additional fix for image spacing at bottom */
#footer img.mt-6 {
margin-top: 0 !important;
}
/* Ensure all menu content is visible and properly centered */
#footer-blocks .collapse {
display: block !important;
height: auto !important;
}
#footer-blocks ul.nav {
display: block !important;
}
/* Make sure all links are aligned centered within their containers */
#footer .nav-link {
text-align: center;
justify-content: center;
}
/* Logo centering */
#footer-about .navbar-brand {
display: flex;
justify-content: center;
margin-bottom: 1.5rem !important;
}
@media (min-width: 992px) {
/* Logo/about section styling */
#footer-about {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 auto 3rem auto;
max-width: 100%;
padding: 0;
background: transparent !important;
border: none !important;
}
#footer .description {
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
#footer-about .description {
max-width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 0.75rem;
}
#footer .col-lg-4 {
flex: 0 0 100%;
max-width: 100%;
}
/* Footer blocks arrangement */
#footer-blocks .col-lg-8 {
flex: 0 0 100%;
max-width: 100%;
}
/* Center everything better */
#footer .container {
max-width: 1200px;
margin: 0 auto;
}
#footer .row {
justify-content: center;
text-align: center;
}
/* Center the main content columns */
#footer-blocks ul.list-unstyled {
display: flex;
flex-wrap: nowrap;
justify-content: center;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}
/* Define width for each menu section */
#footer-blocks .list-unstyled > li.footer-block {
flex: 0 0 22%;
min-width: 150px;
max-width: 220px;
margin-bottom: 0;
text-align: center;
}
/* Newsletter section specific alignment */
#footer form {
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
/* Better title alignment */
.footer-block .title {
text-align: center;
width: 100%;
font-weight: 600;
margin-bottom: 1rem;
}
/* Remove the line decoration on titles */
.footer-block .title::before {
display: none;
}
/* Center the menu nav items */
#footer-blocks ul.nav {
text-align: center;
margin-top: 1rem;
}
/* Make the copyright section centered */
#footer-copyright {
text-align: center;
}
#footer-copyright .row {
justify-content: center;
}
#footer-copyright .col-lg-4 {
flex: 0 0 auto;
width: auto;
margin: 0 1rem;
}
/* Social icons in a row */
#footer .social-icons-wrapper {
flex-direction: row;
align-items: center;
justify-content: center;
}
#footer .social-icons-wrapper small {
margin-right: 1rem;
}
}
/* Mobile-specific styles to restore original accordion behavior */
@media (max-width: 991px) {
/* Reset text alignment for mobile */
#footer-blocks .list-unstyled > li.footer-block,
#footer .nav-link,
#footer-blocks ul.nav {
text-align: center;
}
/* Center the logo on mobile */
#footer-about {
text-align: center;
padding: 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
}
#footer-about .navbar-brand {
display: flex;
justify-content: center;
margin: 0 auto 1.5rem auto;
text-align: center;
float: none;
}
/* Logo image centering */
#footer-about .navbar-brand img {
margin: 0 auto;
}
/* Center menu title text on mobile */
.footer-block .title,
#footer .nav-link[aria-expanded] {
text-align: center;
display: block;
width: 100%;
}
/* Center the collapsible nav links on mobile */
#footer .nav-link.collapsed.d-lg-none {
text-align: center;
width: 100%;
display: block;
padding-right: 0;
padding-left: 0;
}
/* Adjust the arrow position for these centered links */
#footer .nav-link.collapsed.d-lg-none::after {
right: 15px;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
/* Reset footer block for mobile */
#footer-blocks .list-unstyled > li.footer-block {
flex: unset;
min-width: unset;
max-width: unset;
width: 100%;
margin-bottom: 0;
}
/* Restore original mobile collapse behavior */
#footer-blocks .collapse:not(.show) {
display: none !important;
}
/* Restore original footer styling for mobile */
#footer-about {
text-align: left;
padding: 1.25rem;
}
#footer-about .navbar-brand {
display: inline-block;
justify-content: flex-start;
}
/* Restore accordion toggle behavior */
#footer .nav-link[aria-expanded] {
padding: 1rem 2.25rem 1rem 0;
font-weight: 500;
font-size: 1rem;
margin: 0;
position: relative;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text-align: center;
}
#footer.text-white .nav-link[aria-expanded] {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
/* Center not needed on mobile */
#footer-copyright {
text-align: left;
}
#footer-copyright .row {
justify-content: flex-start;
}
}
/* Newsletter styling */
#footer form input[type="email"] {
height: 40px;
border-radius: 20px;
}
#footer form button[type="submit"] {
border-radius: 20px;
}
/* Improved link colors - force white text */
#footer.text-white #footer-blocks a:not(.btn),
#footer.text-white .nav-link,
#footer.text-white h3.title,
#footer.text-white h3.title span,
#footer.text-white .title {
color: white !important;
opacity: 0.9;
}
#footer.text-white #footer-blocks a:not(.btn):hover {
opacity: 1;
color: white !important;
}
/* Better spacing between sections */
#footer hr {
margin: 2rem 0;
opacity: 0.1;
}
/* Footer navigation styling */
#footer .nav-link {
padding: 0.5rem 0;
font-size: 0.875rem;
}
/* Make all icons have consistent sizing */
#footer svg {
width: 20px;
height: 20px;
}
/* Fix for arrow icons */
#footer .nav-link[aria-expanded]::after {
content: "";
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-size: cover;
transition: all 0.2s ease-out;
}
#footer .nav-link[aria-expanded="true"]::after {
transform: rotate(-180deg) translateY(50%);
}
/* Ensure menu block content is visible */
@media (min-width: 992px) {
#footer .footer-block > .d-lg-block {
display: block !important;
}
#footer .footer-block > .d-lg-inline-block {
display: inline-block !important;
}
}
#footer-blocks .footer-block {
padding: 0 1rem;
}
#footer .collapse {
transition: height 0.3s ease;
}
/*
footer marquee
*/
/* Footer Marquee Styles */
/*
footer marquee
*/
/* Footer Marquee Styles */
.marquee-wrapper {
position: relative;
width: 100%;
max-width: {{ section.settings.marquee_width }}px;
margin: 0 auto;
overflow: hidden;
height: 120px;
pointer-events: none;
}
.marquee-inner {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: 1; /* <-- THIS MAKES THE MARQUEE BEHIND */
}
.marquee-content {
display: flex;
align-items: center;
white-space: nowrap;
animation: marquee 20s linear infinite;
}
.marquee-img {
height: 110px; /* Adjust badge size */
margin: 0 2rem;
opacity: 1; /* Fully visible */
}
/* Center the main logo ABOVE the marquee */
.navbar-brand {
position: relative;
z-index: 2; /* <-- THIS ENSURES LOGO STAYS ON TOP */
display: flex;
align-items: center;
justify-content: center;
height: 120px;
}
/* Main logo styling */
.navbar-brand img {
max-height: 90px;
height: auto;
width: auto;
}
/* Marquee continuous scroll */
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
/* Mobile adjustments */
@media (max-width: 767px) {
.marquee-wrapper {
height: 100px;
}
.marquee-img {
height: 80px;
}
.navbar-brand {
height: 100px;
}
}
/*
Cards with image
*/
@media (max-width: 575px) {
.cards-with-image div.row.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 0.5rem;
margin: 0 -1rem -0.5rem !important;
}
.cards-with-image div.row.xs-scroll .col {
width: 75vw;
flex: none;
}
}
/*
Icon Blocks
*/
@media (max-width: 575px) {
.icon-blocks div.row.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 0.5rem;
margin: 0 -1rem -0.5rem !important;
}
.icon-blocks div.row.xs-scroll .col {
width: 75vw;
flex: none;
}
}
/*
Image list
*/
/* CSS for Image with Text - Section specific */
/*
Latest articles
*/
@media (max-width: 575px) {
.latest-articles ul.blog-list.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 0.5rem;
margin: 0 -1rem -0.5rem !important;
}
.latest-articles ul.blog-list.xs-scroll .article-item {
width: 75vw;
flex: none;
}
}
/*
Carosuel
*/
.carousel-controls-arrows .carousel-control-prev-icon {
transition: all 0.2s ease-out;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffff' class='bi bi-arrow-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'/%3E%3C/svg%3E");
}
.carousel-controls-arrows button:hover .carousel-control-prev-icon {
transform: translateX(-2px);
}
.carousel-controls-arrows .carousel-control-next-icon {
transition: all 0.2s ease-out;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffff' class='bi bi-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
}
.carousel-controls-arrows button:hover .carousel-control-next-icon {
transform: translateX(2px);
}
.carousel-indicators-circles .carousel-indicators [data-bs-target] {
width: 8px;
height: 8px;
border-radius: 50%;
transition: all 0.2s ease-out;
}
.carousel-indicators-circles .carousel-indicators [data-bs-target].active {
transform: scale(1.4);
}
.carousel-ken-burns .carousel-item {
overflow: hidden;
}
.carousel-ken-burns .carousel-item.active img,
.carousel-ken-burns .carousel-item.active video {
animation: carousel_ken_burns 1s ease-out both;
}
@keyframes carousel_ken_burns {
to {
transform: scale(1.2);
}
}
.carousel .carousel-item-link {
display: block;
color: inherit;
text-decoration: none;
position: relative;
z-index: 1;
}
.carousel-item-blur {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.carousel-item-img,
.carousel-item-video {
width: 100%;
object-fit: cover;
display: flex;
}
.carousel-caption .subtitle {
text-transform: uppercase;
letter-spacing: 0.1rem;
}
.carousel-caption .btn {
flex-shrink: 0;
}
@media (max-width: 991px) {
.carousel-caption-mobile-top {
top: 1rem;
bottom: auto;
}
.carousel-caption-mobile-center {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.carousel-caption-mobile-bottom {
bottom: 2rem;
}
}
@media (min-width: 992px) {
.carousel-caption-desktop-left {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
}
.carousel-caption-desktop-center {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.carousel-caption-desktop-right {
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
text-align: right;
}
.carousel-caption-desktop-bottom {
bottom: 2.25rem;
display: flex;
justify-content: center;
}
}
/*
Marquee
*/
.marquee ul {
margin: 0;
display: inline-flex;
align-items: center;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.marquee ul:hover {
animation-play-state: paused;
}
.marquee ul li {
position: relative;
flex-shrink: 0;
padding: 0 1rem;
}
.marquee.separator-dot ul li::after {
content: "";
background-color: currentColor;
background-size: cover;
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
}
.marquee ul li a {
color: currentColor;
padding: 0.5rem 0;
text-decoration: none;
transition: all 0.2s ease-out;
}
.marquee ul li a:hover,
.marquee ul li a:focus {
opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
.marquee ul {
animation: none;
}
}
/*
Featured Products
*/
.featured-products .splide__arrow--prev {
left: 0;
transform: none;
}
.featured-products .splide__arrow--next {
right: 0;
transform: rotate(180deg);
}
.featured-products .container-fluid .splide__arrow--prev {
left: 0.5rem;
}
.featured-products .container-fluid .splide__arrow--next {
right: 0.5rem;
}
.featured-products .splide__pagination {
position: relative;
margin-top: 0.5rem;
}
.featured-products .splide__pagination__page {
background-color: rgba(var(--bs-body-color-rgb), 0.25);
opacity: 1;
transition: all 0.2s ease-out;
}
.featured-products .splide__pagination__page:hover,
.featured-products .splide__pagination__page:focus {
background-color: rgba(var(--bs-body-color-rgb), 0.5);
}
.featured-products .splide__pagination__page.is-active {
background-color: var(--bs-body-color);
}
@media (max-width: 575px) {
.featured-products .splide__pagination {
display: none;
}
.featured-products [data-breakpoint-xs-partial="true"] .splide__track {
padding-left: 0.5rem !important;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.featured-products [data-breakpoint-xs-partial="true"] .splide__arrows {
display: none;
}
}
@media (min-width: 576px) {
.featured-products .splide__pagination--mobile {
display: none;
}
.featured-products .splide__arrow--prev {
left: -0.25rem;
}
.featured-products .splide__arrow--next {
right: -0.25rem;
}
}
/*
Recently Viewed
*/
.recently-viewed {}
/*
Recently Wishlisted
*/
.recently-wishlisted {}
/*
Featured Collections
*/
.featured-collections {}
.featured-collections .collection-item a,
.list-collections .collection-item a {
display: flex;
position: relative;
color: white;
text-decoration: none;
}
.collection-item-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(var(--bs-dark-rgb), 0.25);
padding: 0.5rem 1rem;
border-bottom-left-radius: calc(var(--bs-border-radius) - 3px);
border-bottom-right-radius: calc(var(--bs-border-radius) - 3px);
transition: all 0.2s ease-out;
}
.img-thumbnail+.collection-item-title {
left: calc(0.25rem + 1px);
right: calc(0.25rem + 1px);
bottom: calc(0.25rem + 1px);
}
a:hover .collection-item-title {
background-color: rgba(var(--bs-dark-rgb), 0.5);
}
@media (max-width: 575px) {
.featured-collections ul.collection-list.xs-scroll {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 0.5rem;
margin: 0 -1rem -0.5rem !important;
}
.featured-collections ul.collection-list.xs-scroll .collection-item {
width: 75vw;
flex: none;
}
}
/*
Testimonials
*/
.testimonials {
overflow: hidden;
}
.testimonials .splide__track {
overflow: visible;
}
.testimonials .splide__slide {
opacity: 0.25;
transition: all 0.2s ease-out;
}
.testimonials .splide__slide.is-visible {
opacity: 1;
}
.testimonials .splide__arrow--prev {
left: 0;
transform: none;
}
.testimonials .splide__arrow--next {
right: 0;
transform: rotate(180deg);
}
.testimonials .splide__pagination {
position: relative;
margin-top: 1.25rem;
}
.testimonials .splide__pagination__page {
background-color: rgba(var(--bs-body-color-rgb), 0.25);
opacity: 1;
transition: all 0.2s ease-out;
}
.testimonials .splide__pagination__page:hover,
.testimonials .splide__pagination__page:focus {
background-color: rgba(var(--bs-body-color-rgb), 0.5);
}
.testimonials .splide__pagination__page.is-active {
background-color: var(--bs-body-color);
}
.testimonials.text-white .splide__pagination__page {
filter: invert();
}
.testimonials .splide__pagination--mobile {
margin-top: 1rem;
}
@media (max-width: 575px) {
.testimonials .splide__pagination {
display: none;
}
.testimonials .splide__arrow {
display: none;
}
}
@media (min-width: 576px) {
.testimonials .splide__pagination--mobile {
display: none;
}
}
.testimonials-fb-style {
--fb-color-rgb: 66, 103, 178
}
.testimonials-fb-style .card {
border-color: rgba(var(--fb-color-rgb), 1);
background-color: rgba(var(--fb-color-rgb), .1);
}
.testimonials-fb-style .card .btn {
display: inline-flex;
align-items: center;
color: rgba(var(--fb-color-rgb), 1);
border: 1px solid rgba(var(--fb-color-rgb), 1);
background: white;
}
.testimonials-fb-style .card .btn svg {
transition: all .2s ease-out;
}
.testimonials-fb-style .card .btn:hover svg,
.testimonials-fb-style .card .btn:focus svg {
transform: scale(1.15);
}
.testimonials-fb-style .card .btn:focus-visible {
box-shadow: 0 0 0 .25rem rgba(var(--fb-color-rgb), .25);
}
.testimonials-fb-style .splide__arrow {
background-color: rgba(var(--fb-color-rgb), .75);
}
.testimonials-fb-style .splide__arrow:hover,
.testimonials-fb-style .splide__arrow:focus {
background-color: rgba(var(--fb-color-rgb), 1);
}
.testimonials-fb-style .splide__pagination__page {
background-color: rgba(var(--fb-color-rgb), .4);
}
.testimonials-fb-style .splide__pagination__page.is-active {
background-color: rgba(var(--fb-color-rgb), 1);
}
.testimonials-fb-style .btn-view-all {
background-color: rgba(var(--fb-color-rgb), 1);
color: white;
border-color: rgba(var(--fb-color-rgb), 1);
padding-left: 1.5rem;
padding-right: 1.5rem;
box-shadow: none;
}
.testimonials-fb-style .btn-view-all:hover,
.testimonials-fb-style .btn-view-all:focus {
background-color: rgba(var(--fb-color-rgb), .75);
background-color: rgba(var(--fb-color-rgb), .75);
}
.testimonials-fb-style .btn-view-all:focus-visible {
box-shadow: 0 0 0 .25rem rgba(var(--fb-color-rgb), .25);
}
.testimonials .trustpilot-star {
width: 32px;
height: 32px;
margin-right: 4px;
}
.testimonials-tp-style {
--tp-color-rgb: 0, 182, 122; /* Light green color */
}
.testimonials-tp-style .card {
border-color: rgba(var(--tp-color-rgb), 1);
background-color: rgba(var(--tp-color-rgb), .1);
}
.testimonials-tp-style .card .btn {
display: inline-flex;
align-items: center;
color: rgba(var(--tp-color-rgb), 1);
border: 1px solid rgba(var(--tp-color-rgb), 1);
background: white;
box-shadow: none; /* Ensure no box shadow for Trustpilot style */
}
.testimonials-tp-style .card .btn svg {
transition: all .2s ease-out;
}
.testimonials-tp-style .card .btn:hover svg,
.testimonials-tp-style .card .btn:focus svg {
transform: scale(1.15);
}
.testimonials-tp-style .card .btn:focus-visible {
box-shadow: none;
}
.testimonials-tp-style .splide__arrow {
background-color: rgba(var(--tp-color-rgb), .75);
}
.testimonials-tp-style .splide__arrow:hover,
.testimonials-tp-style .splide__arrow:focus {
background-color: rgba(var(--tp-color-rgb), 1);
}
.testimonials-tp-style .splide__pagination__page {
background-color: rgba(var(--tp-color-rgb), .4);
}
.testimonials-tp-style .splide__pagination__page.is-active {
background-color: rgba(var(--tp-color-rgb), 1);
}
.testimonials-tp-style .btn-view-all {
background-color: rgba(var(--tp-color-rgb), 1);
color: white;
border-color: rgba(var(--tp-color-rgb), 1);
padding-left: 1.5rem;
padding-right: 1.5rem;
box-shadow: none;
}
.testimonials-tp-style .btn-view-all:hover,
.testimonials-tp-style .btn-view-all:focus {
background-color: rgba(var(--tp-color-rgb), .75);
}
.testimonials-tp-style .btn-view-all:focus-visible {
box-shadow: none;
}
/* Video styles */
.testimonials video,
.testimonials .testimonials-image {
max-width: 100%;
height: auto;
border-radius: 50%;
object-fit: cover;
}
/* Additional responsive styling for videos and images */
@media (max-width: 767px) {
.testimonials video,
.testimonials .testimonials-image {
width: 70px;
height: 70px;
}
}
@media (min-width: 768px) {
.testimonials video,
.testimonials .testimonials-image {
width: 70px;
height: 70px;
}
}
.testimonials-etsy-style {
--etsy-color-rgb: 238, 99, 36;
}
.testimonials-etsy-style .card {
border-color: rgba(var(--etsy-color-rgb), 1);
background-color: rgba(var(--etsy-color-rgb), .1);
}
.testimonials-etsy-style .card .btn {
display: inline-flex;
align-items: center;
color: rgba(var(--etsy-color-rgb), 1);
border: 1px solid rgba(var(--etsy-color-rgb), 1);
background: white;
box-shadow: none;
}
.testimonials-etsy-style .card .btn svg {
transition: all .2s ease-out;
}
.testimonials-etsy-style .card .btn:hover svg,
.testimonials-etsy-style .card .btn:focus svg {
transform: scale(1.15);
}
.testimonials-etsy-style .card .btn:focus-visible {
box-shadow: none;
}
.testimonials-etsy-style .splide__arrow {
background-color: rgba(var(--etsy-color-rgb), .75);
}
.testimonials-etsy-style .splide__arrow:hover,
.testimonials-etsy-style .splide__arrow:focus {
background-color: rgba(var(--etsy-color-rgb), 1);
}
.testimonials-etsy-style .splide__pagination__page {
background-color: rgba(var(--etsy-color-rgb), .4);
}
.testimonials-etsy-style .splide__pagination__page.is-active {
background-color: rgba(var(--etsy-color-rgb), 1);
}
.testimonials-etsy-style .btn-view-all {
background-color: rgba(var(--etsy-color-rgb), 1);
color: white;
border-color: rgba(var(--etsy-color-rgb), 1);
padding-left: 1.5rem;
padding-right: 1.5rem;
box-shadow: none;
}
.testimonials-etsy-style .btn-view-all:hover,
.testimonials-etsy-style .btn-view-all:focus {
background-color: rgba(var(--etsy-color-rgb), .75);
}
/*
Instagram Gallery
*/
.instagram-title-brand .title {
display: inline-block;
background: -webkit-linear-gradient(0deg, #8a3ab9, #e95950, #bc2a8d, #fbad50);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.instagram-gallery .splide__slide a {
display: block;
position: relative;
overflow: hidden;
}
.instagram-gallery .splide__slide a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.2s ease-out;
}
.instagram-gallery .splide__slide a:hover::before {
opacity: 1;
}
.instagram-gallery .splide__slide a::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 32px;
background-position: center;
opacity: 0;
transform: scale(0);
transition: all 0.2s ease-out;
}
.instagram-gallery .splide__slide a:hover::after {
opacity: 1;
transform: scale(1);
}
.instagram-gallery a.img-thumbnail img {
border-radius: 1.75rem;
}
.instagram-gallery-meta {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
color: white;
opacity: 0;
transform: translateY(2rem);
transition: all 0.2s ease-out;
}
a:hover .instagram-gallery-meta {
opacity: 1;
transform: translate(0);
}
.instagram-gallery-meta-likes {
display: inline-block;
position: relative;
padding-left: 26px;
margin: 0.75rem;
}
.instagram-gallery-meta-likes::before {
content: "";
background: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: center;
width: 24px;
height: 24px;
display: block;
background-size: 18px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.instagram-gallery-meta-comments {
display: inline-block;
position: relative;
padding-left: 26px;
margin: 0.75rem;
}
.instagram-gallery-meta-comments::before {
content: "";
background: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: center;
width: 24px;
height: 24px;
display: block;
background-size: 18px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/*
TikTok Slider
*/
.tiktok-slider {}
.tiktok-slider .container .splide__arrow--prev {
left: -1rem;
}
.tiktok-slider .container .splide__arrow--next {
right: -1rem;
}
.tiktok-slider video {}
.tiktok-slider .video-wrapper {
cursor: pointer;
color: white;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.tiktok-slider .video-wrapper::after {
content: "";
width: 36px;
height: 36px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
background-color: rgba(var(--bs-dark-rgb), 0.2);
transform: translate(-50%, -50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' class='bi bi-play-fill' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 24px;
background-position: center;
transition: all 0.2s ease-out;
pointer-events: none;
}
.tiktok-slider .video-wrapper:hover::after {
background-color: rgba(var(--bs-dark-rgb), 0.4);
}
.tiktok-slider .video-wrapper.is-playing::after {
opacity: 0;
transform: scale(0);
}
.tiktok-slider .video-wrapper .btn-toggle-sound {
display: flex;
color: white;
position: absolute;
top: 0.25rem;
right: 0.375rem;
opacity: 0;
border: none;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper .btn-toggle-sound:focus {
border: none;
box-shadow: none;
}
.tiktok-slider .video-wrapper .btn-toggle-sound:focus-visible {
box-shadow: 0 0 0 0.125rem rgba(var(--bs-dark-rgb), 0.5);
}
.tiktok-slider .video-wrapper.is-playing .btn-toggle-sound {
opacity: 1;
}
.tiktok-slider .video-wrapper.has-title::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(var(--bs-dark-rgb), 0),
rgba(var(--bs-dark-rgb), 0.5));
transition: all 0.2s ease-out;
pointer-events: none;
}
.tiktok-slider .video-wrapper.has-title.is-playing::before {
opacity: 0;
}
.tiktok-slider .video-wrapper .title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
visibility: visible;
pointer-events: none;
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper.is-playing .title {
opacity: 0;
bottom: -2rem;
visibility: hidden;
}
.tiktok-slider .video-wrapper a.video-wrapper-product {
display: block;
position: absolute;
bottom: -2rem;
left: 0;
width: calc(100% - 2rem);
margin: 1rem;
opacity: 0;
background-color: rgba(var(--bs-dark-rgb), 0.75);
text-align: left;
text-decoration: none;
color: white;
visibility: hidden;
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper a.video-wrapper-product img {
transition: all 0.2s ease-out;
}
.tiktok-slider .video-wrapper a.video-wrapper-product:hover {}
.tiktok-slider .video-wrapper a.video-wrapper-product:hover img,
.tiktok-slider .video-wrapper a.video-wrapper-product:focus img {
opacity: 0.85;
}
.tiktok-slider .video-wrapper.is-playing a.video-wrapper-product {
opacity: 1;
bottom: 0;
visibility: visible;
}
@media (max-width: 575px) {
.tiktok-slider .splide__arrow {
display: none;
}
}
/*
Parallax Image
*/
.parallax-image {
position: relative;
overflow: hidden;
background-color: var(--bs-dark);
color: white;
}
.parallax-image .img-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.parallax-image .img-mobile,
.parallax-image .img-desktop {
width: 100%;
height: 100%;
}
.parallax-image-blur {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.parallax-image-inner {
position: relative;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
/*
Sticky ATC (Add to cart)
*/
#sticky-atc {
padding: 0.75rem 0;
transform: translateY(100%);
transition: all 0.2s ease-out;
box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
#sticky-atc.show {
z-index: 1019;
transform: translateY(0);
}
#sticky-atc.text-dark {
box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
#sticky-atc .product-img {
max-width: 90px;
flex-shrink: 0;
}
#sticky-atc .spr-badge {
margin: 0 0 0.25rem;
}
#sticky-atc.product-price .price-badge-sale {
background-color: var(--bs-success);
font-size: 0.75rem;
margin-left: 0.75rem;
}
#sticky-atc .dropdown-menu {
max-height: 300px;
min-width: 260px;
overflow: auto;
}
#sticky-atc .dropdown-item:active small {
color: white !important;
}
#sticky-atc form.loading .btn-atc:after {
display: none;
}
#sticky-atc .btn-atc {
min-width: 120px;
}
@media (max-width: 575px) {
#sticky-atc .product-img {
max-width: 50px;
}
#sticky-atc .spr-badge {
display: none;
}
#sticky-atc .btn-atc {
font-size: 0.875rem;
}
#sticky-atc .dropdown-menu {
left: -0.5rem !important;
}
}
/*
Animated Stories
*/
.animated-stories img,
.animated-stories video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
.animated-stories .story-is-read svg {
display: none;
}
.animated-stories .img-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.animated-stories .img-wrapper-inner {
position: relative;
overflow: hidden;
border-radius: 50%;
}
.animated-stories svg {
position: absolute;
fill: none;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 0;
animation: animated_stories_stroke_draw 6s ease-out 2 alternate;
}
/*
Quiz
*/
.quiz-items .btn-quiz-value {
width: 100%;
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-body-color);
cursor: pointer;
text-align: center;
font-weight: 500;
border-radius: 0.5rem;
transition: all 0.1s ease-out;
}
.quiz-items .btn-quiz-value img {
border-radius: 0.25rem;
transition: all 0.2s ease-out;
}
.quiz-items .btn-quiz-value:hover {
color: var(--bs-primary);
}
.quiz-items .btn-quiz-value:hover img {
opacity: 0.85;
}
.quiz-items .btn-quiz-value:focus-visible {
box-shadow: 0 0 0 0.125rem rgba(var(--bs-body-color-rgb), 0.5);
}
.quiz-items .btn-quiz-value.active {
background-color: var(--bs-body-color);
color: var(--bs-body-bg);
}
.quiz .progress {
height: 0.5rem;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
/*
Brands
*/
.brands .brand-all-letters {
display: flex;
}
.brands .brand-all-letters button {
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 0.825rem;
margin: 0.25rem;
}
.brands .brand-all-letters button:disabled {
opacity: 0.25;
}
.brand-list-item-letter {
width: 24px;
}
@media (max-width: 1199px) {
.brands .brand-all-letters {
overflow: auto;
padding-bottom: 0.5rem;
margin-left: -1rem;
margin-right: -1rem;
}
.brands .brand-all-letters li:first-child {
padding-left: 0.75rem;
}
.brands .brand-all-letters li:last-child {
padding-right: 0.75rem;
}
}
@media (min-width: 1200px) {
.brands .brand-all-letters {
justify-content: center;
}
}
/*
F.A.Q (Accordion)
*/
.accordion-flush .accordion-item,
.accordion-flush .accordion-item:last-child {
border-bottom: 1px solid var(--bs-dark);
}
.accordion-flush .accordion-item:first-child {
border-top: 1px solid var(--bs-dark);
}
.accordion-flush .accordion-button {
background-color: transparent;
padding: 1rem 0;
box-shadow: none;
}
.accordion-flush .accordion-button:focus-visible {
box-shadow: 0 0 0 .25rem rgba(var(--bs-body-color-rgb), .125)
}
.accordion-flush .accordion-body {
padding: 0 0 1.25rem;
}
.accordion-fancy .accordion-item {
border-radius: 0;
border: none;
margin-bottom: 0.5rem;
background-color: transparent;
color: currentColor;
}
.accordion-fancy .accordion-button {
border-radius: 5rem !important;
background-color: var(--bs-light);
box-shadow: none;
}
.accordion-fancy .accordion-button:hover,
.accordion-fancy .accordion-button:focus {
background-color: var(--bs-light-darken-5);
}
.accordion-fancy .accordion-button:not(.collapsed) {
background-color: var(--bs-primary);
color: white;
}
.accordion-fancy .accordion-button::after {
content: "";
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 70%;
background-color: var(--bs-primary);
color: white;
border-radius: 50rem;
padding: 0.25rem;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
}
.accordion-fancy .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
/*
Sticky Video
*/
.sticky-video {
position: relative;
position: fixed;
bottom: 0;
left: 0;
padding: 0.75rem;
z-index: 9;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
transition: all 0.4s ease-out;
}
.sticky-video.show {
visibility: visible;
opacity: 1;
}
.sticky-video:not(.show) {
z-index: -1 !important;
}
.sticky-video video {
display: block;
max-width: 100%;
}
.sticky-video .btn-close-custom {
background: var(--bs-body-bg);
color: var(--bs-body-color);
position: absolute;
top: 1.25rem;
right: 1.25rem;
opacity: 1;
display: flex;
padding: 0;
border: none;
border-radius: 50%;
transition: all 0.2s ease-out;
}
.sticky-video .video-wrapper-product {
display: block;
margin: 0.5rem 0 0;
background-color: rgba(0, 0, 0, 0.75);
text-align: left;
text-decoration: none;
color: white;
visibility: visible;
opacity: 1;
transition: all 0.2s ease-out;
}
.sticky-video .video-wrapper-product:hover,
.sticky-video .video-wrapper-product:focus {
background-color: rgba(0, 0, 0, 0.9);
}
.sticky-video .video-wrapper-product .product-price {
visibility: hidden;
opacity: 0;
height: 0;
transition: all 0.2s ease-out;
}
/*
Comparison Table
*/
.comparison-table {}
.comparison-table table.rounded tbody tr:last-child th,
.comparison-table table.rounded tbody tr:last-child td {
border-bottom: none;
}
@media (max-width: 575px) {
.comparison-table .table-responsive {
padding-right: 1rem;
margin-right: -1rem;
}
.comparison-table table th {
font-size: 0.85rem;
}
.comparison-table table tbody th {
min-width: 33vw;
}
.comparison-table table svg {
width: 20px;
height: 20px;
}
}
/*
Timeline
*/
.timeline-list {
position: relative;
list-style: none;
padding: 0;
margin: 1.75rem 0;
}
.timeline-list::before {
content: "";
background: rgba(var(--bs-dark-rgb), 0.5);
width: 0.25rem;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50rem;
}
.timeline-list-item {
position: relative;
width: calc(50% - 1.75rem);
}
.timeline-list-item:nth-child(odd) {
margin-left: auto;
}
.timeline-list-item::before {
content: "";
width: 1.5rem;
height: 1.5rem;
background: rgba(var(--bs-dark-rgb), 1);
border-radius: 50%;
position: absolute;
right: -1.75rem;
margin-top: 1.125rem;
transform: translateX(0.75rem);
}
.timeline-list-item:nth-child(odd)::before {
left: -1.75rem;
right: auto;
transform: translateX(-0.75rem);
}
.timeline-list-item img+.card-body .badge {
position: absolute;
top: 1rem;
right: 1rem;
}
.timeline-list-item:nth-child(odd) img+.card-body .badge {
left: 1rem;
right: auto;
}
@media (max-width: 575px) {
.timeline-list:before {
left: 1rem;
}
.timeline-list-item {
width: calc(108% - 4.5rem);
margin-left: auto;
}
.timeline-list-item:before {
left: -1.75rem;
right: auto;
}
.timeline-list-item img+.card-body .badge {
left: 1rem;
right: auto;
}
}
/*
Video Slider
*/
.video-slider .splide__arrow--prev {
left: 0;
transform: none;
}
.video-slider .splide__arrow--next {
right: 0;
transform: rotate(180deg);
}
.video-slider.container-fluid .splide__arrow--prev {
left: 0.5rem;
}
.video-slider .container-fluid .splide__arrow--next {
right: 0.5rem;
}
.video-slider .splide__pagination {
position: relative;
margin-top: 1.5rem;
}
.video-slider .splide__pagination__page {
background-color: rgba(var(--bs-body-color-rgb), 0.25);
opacity: 1;
transition: all 0.2s ease-out;
}
.video-slider .splide__pagination__page:hover,
.video-slider .splide__pagination__page:focus {
background-color: rgba(var(--bs-body-color-rgb), 0.5);
}
.video-slider .splide__pagination__page.is-active {
background-color: var(--bs-body-color);
}
.video-slider .splide__pagination--mobile {
margin-top: 0.5rem;
}
@media (max-width: 575px) {
.video-slider .splide__pagination {
display: none;
}
}
@media (min-width: 576px) {
.video-slider .splide__pagination--mobile {
display: none;
}
.video-slider .splide__arrow--prev {
left: -0.25rem;
}
.video-sliders .splide__arrow--next {
right: -0.25rem;
}
}
/*
Look-book
*/
.look-book {}
.look-book-list-item {
position: absolute;
}
.look-book-point {
display: block;
padding: .25rem;
border-radius: 50%;
border: 1px solid var(--bs-primary);
background-color: transparent;
transition: all .2s ease-out;
animation: look-book-pulse-animation 2s infinite;
}
.look-book-point:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.look-book-point span {
background: var(--bs-primary);
display: block;
width: 1rem;
height: 1rem;
border-radius: 50%;
}
.look-book-point[aria-describedby] {
background-color: rgba(255, 255, 255, 0.5);
animation-play-state: paused;
}
@keyframes look-book-pulse-animation {
0% {
box-shadow: 0 0 0 0px rgba(var(--bs-primary-rgb), 0.25);
}
100% {
box-shadow: 0 0 0 20px rgba(var(--bs-primary-rgb), 0);
}
}
/*
Animated Counters
*/
.animated-counters {}
.animated-counters .animated-counter-circle {
border-radius: 50%;
width: 180px;
height: 180px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.animated-counters .animated-counter-circle::before {
content: "";
position: absolute;
width: 162px;
height: 162px;
border-radius: 50%;
background-color: #fff;
}
.animated-counters .animated-counter-inner {
position: relative;
z-index: 1;
}
@media (max-width: 575px) {
.animated-counters .row-cols-2 .animated-counter-circle {
width: 120px;
height: 120px;
}
.animated-counters .row-cols-2 .animated-counter-circle::before {
width: 105px;
height: 105px;
}
}
/*
Media grid
*/
.media-grid {}
@media (max-width: 991px) {
.media-grid-mobile-blocks {
display: flex;
flex-wrap: nowrap;
overflow: auto;
padding-bottom: 1rem;
}
.media-grid-mobile-block {
flex-shrink: 0;
width: 70vw;
max-width: 360px;
margin-right: 1rem;
}
}
@media (min-width: 992px) {
.media-grid-desktop {
display: grid;
grid-template-areas:
"b a c"
"d a e"
"f a g";
grid-gap: 1.5rem;
}
.media-grid-desktop .col:nth-child(1) {
grid-area: a;
display: flex;
align-items: center;
}
.media-grid-desktop .col:nth-child(2) {
grid-area: b;
}
.media-grid-desktop .col:nth-child(3) {
grid-area: c;
}
.media-grid-desktop .col:nth-child(4) {
grid-area: d;
}
.media-grid-desktop .col:nth-child(5) {
grid-area: e;
}
.media-grid-desktop .col:nth-child(6) {
grid-area: f;
}
.media-grid-desktop .col:nth-child(7) {
grid-area: g;
}
}
/*
Pricing plans
*/
.pricing-plans .card-body .description ul {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-plans .card-body .description ul li {
padding-top: .125rem;
padding-bottom: .125rem;
}
@media (max-width: 575px) {
.pricing-plans .row {
overflow: auto;
flex-wrap: nowrap;
padding: 0 0.5rem 0.5rem;
margin: 0 -1rem -0.5rem !important;
}
.pricing-plans .row .col {
width: 75vw;
flex: none;
}
}
/* Waves */
.eg-waves-section {
position: relative;
height: 0px;
background-color: transparent;
}
.eg-waves {
position: absolute;
width: 100%;
height: var(--wave-height-desktop);
min-height: 20px;
max-height: 150px;
z-index: 1;
}
.eg-waves-top {
bottom: 0;
left: 0;
}
.eg-waves-bottom {
top: 0;
left: 0;
transform: rotate(180deg);
}
.eg-waves-parallax>use {
animation: eg-waves-animation 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.eg-waves-parallax>use:nth-child(1) {
animation-delay: -2s;
animation-duration: calc(var(--wave-animation-speed) * 0.5);
}
.eg-waves-parallax>use:nth-child(2) {
animation-delay: -3s;
animation-duration: calc(var(--wave-animation-speed) * 1);
}
.eg-waves-parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: calc(var(--wave-animation-speed) * 1.5);
}
.eg-waves-parallax>use:nth-child(4) {
animation-delay: -5s;
animation-duration: calc(var(--wave-animation-speed) * 2);
}
@keyframes eg-waves-animation {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
@media (max-width: 768px) {
.eg-waves {
height: var(--wave-height-mobile);
min-height: 20px;
}
}
/*
Progress Circles
*/
.progress-circle-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
}
.progress-circle {
width: var(--progress-circle-size);
height: var(--progress-circle-size);
border-radius: 50%;
position: relative;
background: conic-gradient(from 0deg at 50% 50%, var(--progress-border-color) 0%, var(--progress-border-color) var(--percentage), #fff var(--percentage), #fff 100%);
display: flex;
align-items: center;
justify-content: center;
margin-right: 2rem;
flex: none;
}
.progress-circle::after {
content: "";
position: absolute;
top: var(--progress-circle-border-thickness);
bottom: var(--progress-circle-border-thickness);
left: var(--progress-circle-border-thickness);
right: var(--progress-circle-border-thickness);
background: #fff;
border-radius: 50%;
z-index: 1;
}
.progress-circle .progress-value {
position: relative;
z-index: 2;
font-size: calc(var(--progress-circle-size) * 0.2);
color: var(--progress-border-color);
}
@media only screen and (max-width: 768px) {
.progress-circle-wrapper {
flex-direction: row;
flex-wrap: wrap;
}
.progress-circle-text {
flex: 1;
margin-top: 0;
text-align: left;
}
.progress-circle {
flex: none;
margin-right: 1rem;
margin-bottom: 0;
}
}
/*
Tracking
*/
.tracking-container iframe {
border-radius: var(--bs-border-radius);
}
/*
Advanced image with text
*/
.advanced-image-with-text-img {
display: block;
position: relative;
margin: 40px auto 60px;
width: 50%;
transition: all 1s ease-out;
}
.advanced-image-with-text-img-1 {
z-index: 1;
/* box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .25)!important; */
}
.advanced-image-with-text-img:not(.advanced-image-with-text-img-1) {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease-out;
}
.advanced-image-with-text-img-2 {
width: 34%;
}
.entered .advanced-image-with-text-img-2 {
transform: translate(-134%, -102%);
}
.advanced-image-with-text-img-3 {
width: 20%;
}
.entered .advanced-image-with-text-img-3 {
transform: translate(94%, -132%);
}
.advanced-image-with-text-img-4 {
width: 24%;
}
.entered .advanced-image-with-text-img-4 {
transform: translate(86%, -9%);
}
.advanced-image-with-text-img-5 {
width: 30%;
}
.entered .advanced-image-with-text-img-5 {
transform: translate(-134%, -18%);
}
/*
image-with-text-carousel
*/
.image-with-text-carousel .splide__arrow {
background-color: rgba(255, 255, 255, .25);
}
.image-with-text-carousel .splide__arrow:hover,
.image-with-text-carousel .splide__arrow:focus {
background-color: rgba(255, 255, 255, .375);
}
.image-with-text-carousel.bg-body .splide__arrow,
.image-with-text-carousel.bg-white .splide__arrow,
.image-with-text-carousel.bg-light .splide__arrow {
background-color: rgba(0, 0, 0, .25);
border: 1px solid rgba(0, 0, 0, .5);
}
.image-with-text-carousel.bg-body .splide__arrow:hover,
.image-with-text-carousel.bg-white .splide__arrow:hover,
.image-with-text-carousel.bg-light .splide__arrow:hover,
.image-with-text-carousel.bg-body .splide__arrow:focus,
.image-with-text-carousel.bg-white .splide__arrow:focus,
.image-with-text-carousel.bg-light .splide__arrow:focus {
background-color: rgba(0, 0, 0, .375);
}
.image-with-text-carousel .splide__pagination {
position: relative;
bottom: 0;
margin-top: 2rem;
}
.image-with-text-carousel .splide__pagination__page {
border: 1px solid white;
background-color: transparent;
width: 12px;
height: 12px;
opacity: 1;
}
.image-with-text-carousel .splide__pagination__page.is-active {
background-color: white;
transform: scale(1);
}
@media (max-width: 575px) {
.image-with-text-carousel .description {
font-size: 1rem !important;
}
}
@media (min-width: 1200px) {
.image-with-text-carousel .splide__arrow--prev {
left: -4rem;
}
.image-with-text-carousel .splide__arrow--next {
right: -4rem;
}
}
.image-with-text-carousel .col-lg-6 {
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
}
.image-with-text-carousel .btn {
box-sizing: border-box;
}
/* scrolling text */
.scrolling-with-text__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.scrolling-with-text__image {
width: 100%;
display: block;
height: 100%;
line-height: 0;
}
.scrolling-text-item-rounded-img-left {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
}
.scrolling-text-image-rounded-img-left {
border-top-left-radius: var(--bs-border-radius) !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
}
.scrolling-text-item-rounded-img-right {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-top-left-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
}
.scrolling-text-image-rounded-img-right {
border-top-left-radius: 0px !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: 0px !important;
}
@media screen and (max-width: 749px) {
.scrolling-with-text__image {
height: auto;
padding-top: 100%;
}
.scrolling-with-text__image.scrolling-with-text__image-small {
padding-top: 75%;
}
.scrolling-with-text__image.scrolling-with-text__image-large {
padding-top: 125%;
}
.scrolling-text-item-rounded-img-left {
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
}
.scrolling-text-image-rounded-img-left {
border-top-left-radius: var(--bs-border-radius) !important;
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
.scrolling-text-item-rounded-img-right {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-top-left-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
}
.scrolling-text-image-rounded-img-right {
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
border-bottom-left-radius: var(--bs-border-radius) !important;
}
}
.scrolling-text-section .grid {
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none;
column-gap: 0;
row-gap: 0;
}
.scrolling-text-section .grid__item {
padding: 0 30px;
}
.scrolling-text-section .scrolling-text-item {
padding-top: 50px;
padding-bottom: 50px;
}
.scrolling-with-text__text-item .button::before,
.scrolling-with-text__text-item .button::after {
display: none;
}
.scrolling-with-text__text.rte {
margin-bottom: 30px;
}
.scrolling-with-text__content {
align-items: center;
display: flex;
height: 100%;
}
.scrolling-with-text__text-item {
position: relative;
}
.scrolling-text-inner {
max-height: 640px;
overflow: hidden;
-webkit-mask-image: linear-gradient(0deg, transparent 0, #000 20%, #000 70%, transparent);
mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 70%, transparent);
}
.scrolling-with-text__heading {
margin: 0 0 20px;
}
.scrolling-text-vetical {
animation: vertTicker var(--scrolling-text-speed) linear infinite forwards;
}
@keyframes vertTicker {
to {
transform: translateY(-50%);
}
}
/*
Tabs with accordion
*/
.tabcontent.faq {
display: none;
}
.tabs-main+.tabs-faq .tabcontent.faq {
display: block;
}
.tabs-with-accordion .tab button {
background: none;
border: none;
padding: 10px 10px 25px;
position: relative;
font-size: 16px;
line-height: 20px;
border-bottom: 1px solid #ccc;
}
.tablink-inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.tabs-with-accordion .tab {
display: flex;
justify-content: center;
padding-bottom: 10px;
}
.tabs-with-accordion .tab button img {
width: 100%;
max-width: 100px;
height: auto;
margin-bottom: 15px;
}
.tablinks.active::after,
.tablinks.active::before {
bottom: -1px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.tablinks.active::after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #FFF;
border-width: 25px;
margin-left: -25px;
}
.tablinks.active::before {
border-color: rgba(204, 204, 204, 0);
border-bottom-color: #CCC;
border-width: 26px;
margin-left: -26px;
}
@media screen and (max-width: 992px) {
.tabs-with-accordion .tab {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.tablink-inner {
width: 150px;
}
.tabs-with-accordion .tab {
justify-content: flex-start;
}
}
.tabs-accordion-container {
position: relative;
}
.tabs-accordion-arrow {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
padding: 5px;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
z-index: 1;
cursor: pointer;
}
.tabs-accordion-arrow-left {
left: 0;
}
.tabs-accordion-arrow-right {
right: 0;
}
@media screen and (max-width: 992px) {
.tabs-accordion-arrow {
display: flex;
}
.tabs-accordion-wrapper .tabs-accordion-content {
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding-left: 30px;
padding-right: 30px;
}
.tabs-accordion-wrapper .tabs-accordion-content::-webkit-scrollbar {
display: none;
}
}
/*
Faq widget
*/
.faq-popup {
position: fixed;
right: 0;
bottom: 100px;
z-index: 1020;
}
.faq-popup-top {
width: 100%;
display: block;
margin-bottom: 5px;
}
.faq-popup-btn {
float: right;
background: var(--bs-primary);
color: #fff;
text-decoration: none;
padding: 10px 15px;
font-size: 16px;
line-height: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.faq-popup-inner {
position: absolute;
right: 15px;
bottom: 0;
width: 300px;
display: none;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
padding: 10px;
}
.faq-popup.show .faq-popup-inner {
display: inline-block;
}
.faq-popup-review-block {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
}
.faq-popup-review-ratting {
font-size: 14px;
line-height: 16px;
color: var(--bs-blue);
}
.faq-popup-bottom .accordion-item .accordion-button {
padding: 12px 15px;
font-size: 14px;
line-height: 16px;
}
.faq-popup-bottom .accordion-body {
padding: 10px;
font-size: 13px;
line-height: 20px;
}
.faq-popup-bottom .accordion-body p {
margin-bottom: 0;
}
.faq-popup-title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ccc;
margin-bottom: 8px;
padding-bottom: 8px;
}
.faq-popup-title h3 {
margin-bottom: 0;
}
.faq-popup-close {
text-decoration: none;
font-size: 24px;
line-height: 26px;
font-weight: bold;
}
.faq-popup-top .rte {
text-align: center;
}
.faq-popup-viewmore {
width: 100%;
display: inline-block;
text-align: center;
margin-top: 5px;
}
.faq-popup.show .faq-popup-btn {
display: none;
}
.faq-popup-btn:hover {
background: var(--bs-secondary);
color: #fff;
}
/*
Product progress
*/
.product-progress-left .title {
color: var(--bs-secondary);
margin-bottom: 45px !important;
}
.product-progress-left .rte ul {
padding-left: 15px;
}
.product-progress-left .rte ul li::marker {
color: var(--bs-secondary);
}
.product-progress-left .rte ul li {
padding-left: 10px;
margin: 8px 0;
}
.progress-bar {
transition: width 1s ease-in-out;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 0;
}
.progress-bar:hover,
.progress-bar:focus {
background-color: var(--bs-primary);
}
.progress-item {
width: 100%;
display: flex;
align-items: center;
padding: 5px 0;
}
.progress-icon {
width: 100%;
max-width: 85px;
position: relative;
}
.progress-icon img {
width: 100%;
height: auto;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
border-radius: 100%;
}
.progress-count-value {
width: 100%;
max-width: 100px;
color: #424242;
font-size: 16px;
line-height: 18px;
margin-left: 10px;
}
.progress-count-value .progress-count {
font-weight: bold;
color: var(--bs-secondary);
}
.progress-item .progress {
width: 100%;
height: 30px;
background: #fff;
border: 1px solid var(--bs-primary);
margin-left: -3px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.product-progress-right {
padding-left: 40px;
}
@media screen and (max-width: 992px) {
.product-progress-right {
padding-left: 70px;
padding-right: 70px;
margin-top: 15px;
}
}
@media screen and (max-width: 767px) {
.product-progress-right {
padding-left: 50px;
padding-right: 50px;
}
}
@media screen and (max-width: 575px) {
.product-progress-left .title {
margin-bottom: 35px !important;
}
.product-progress-right {
padding-left: 15px;
padding-right: 15px;
}
.progress-icon {
max-width: 70px;
}
.progress-item .progress {
height: 25px;
margin-left: -3px;
}
.progress-count-value {
max-width: 80px;
font-size: 14px;
line-height: 16px;
}
}
/*
Advanced Accordion
*/
section[id^="advanced-accordion-"] .accordion-item,
section[id^="advanced-accordion-"] .accordion-button,
section[id^="advanced-accordion-"] .accordion-button:not(.collapsed),
section[id^="advanced-accordion-"] .accordion-header,
section[id^="advanced-accordion-"] .img-fluid,
section[id^="advanced-accordion-"] .accordion-collapse.collapse.show,
section[id^="advanced-accordion-"] .accordion-body {
border-radius: var(--bs-border-radius) !important;
}
.advanced-accordion .accordion,
.advanced-accordion .accordion-item,
.advanced-accordion .accordion-button,
.advanced-accordion .accordion-collapse,
.advanced-accordion .accordion-body {
border: none !important;
transition: none;
}
@media (max-width: 1199px) {
.advanced-accordion .accordion {
border: none !important;
}
.advanced-accordion .accordion-item {
border: none !important;
margin: 0;
}
.advanced-accordion .accordion-item:not(:last-child) {
border-bottom: none !important;
}
.advanced-accordion .accordion-button {
font-size: 2.5rem;
text-align: center;
border-radius: 0 !important;
padding: 2rem 1.5rem 4.5rem;
}
.advanced-accordion .accordion-button:not(.collapsed) {
border-bottom: none !important;
border-radius: var(--bs-border-radius) !important;
height: 280px;
}
.advanced-accordion .accordion-button::after {
content: "+";
filter: none;
left: 50%;
position: absolute;
bottom: 1.5rem;
border-radius: 50%;
width: 2.25rem;
height: 2.25rem;
background-image: none;
font-size: 1.4rem;
line-height: 2.25rem;
transform: translateX(-50%);
}
.advanced-accordion .accordion-button:not(.collapsed)::after {
opacity: 0;
}
.advanced-accordion .accordion-button span {
width: 100%;
display: block;
text-align: center;
animation: advancedAccordionTitleAnimation 1s ease-out infinite alternate;
}
@keyframes advancedAccordionTitleAnimation {
to {
text-shadow: 0 0 1.5rem rgba(255, 255, 255, .75);
}
}
.advanced-accordion .accordion-button:not(.collapsed) span {
opacity: 0;
}
.advanced-accordion .accordion-header img {
position: absolute;
top: 0;
left: 0;
height: 100%;
object-fit: cover;
opacity: .25;
transition: all .2s ease-out;
filter: blur(var(--advanced-accordion-image-blur));
}
.advanced-accordion .accordion-button:not(.collapsed) img {
opacity: 1;
filter: none;
}
.advanced-accordion .accordion-collapse {
opacity: 0;
}
.advanced-accordion .accordion-collapse.show {
animation: advancedAccordionCollapseAnimation 1s ease-out both;
}
@keyframes advancedAccordionCollapseAnimation {
to {
opacity: 1;
}
}
.advanced-accordion .accordion-body {
padding-top: 3rem;
padding-bottom: 3rem;
}
}
@media (min-width: 1200px) {
.advanced-accordion .accordion {
display: flex;
border: none !important;
}
.advanced-accordion .accordion-item {
border: none !important;
border-right: none !important;
width: 100%;
display: flex;
margin: 0;
}
.advanced-accordion .accordion-item:not(:last-child) {
border-right: none !important;
}
.advanced-accordion .accordion-header {
width: 100%;
height: 100%;
}
.advanced-accordion .accordion-button {
height: 100%;
font-size: 3rem;
justify-content: center;
border-radius: 0;
}
.advanced-accordion .accordion-button::after {
content: "+";
filter: none;
position: absolute;
bottom: 1.25rem;
border-radius: 50%;
width: 2.25rem;
height: 2.25rem;
background-image: none;
background-color: none !important;
font-size: 1.4rem;
line-height: 2.25rem;
text-align: center;
}
.advanced-accordion .accordion-button:not(.collapsed) {
background: none;
width: 360px;
border-right: none !important;
}
.advanced-accordion .accordion-button:not(.collapsed) span {
opacity: 0;
}
.advanced-accordion .accordion-button:not(.collapsed)::after {
opacity: 0;
}
.advanced-accordion .accordion-header img {
position: absolute;
top: 0;
left: 0;
height: 100%;
object-fit: cover;
opacity: .25;
transition: all .2s ease-out;
filter: blur(var(--advanced-accordion-image-blur));
}
.advanced-accordion .accordion-header button:hover img {
opacity: .5;
}
.advanced-accordion .accordion-button:not(.collapsed) img {
filter: none;
opacity: 1 !important;
}
.advanced-accordion .accordion-header span {
display: block;
position: absolute;
transform: rotate(-90deg);
animation: advancedAccordionTitleAnimation 1s ease-out infinite alternate;
}
@keyframes advancedAccordionTitleAnimation {
to {
text-shadow: 0 0 1.5rem rgba(255, 255, 255, .75);
}
}
.advanced-accordion .accordion-collapse:not(.show) {
opacity: 0;
}
.advanced-accordion .accordion-collapse.collapsing {
height: auto;
width: 360px;
transition: none;
}
.advanced-accordion .accordion-collapse.show {
width: 360px;
opacity: 0;
flex-shrink: 0;
animation: advancedAccordionCollapseAnimation 1s ease-out .2s both;
}
@keyframes advancedAccordionCollapseAnimation {
to {
opacity: 1;
}
}
.advanced-accordion .accordion-body {
text-align: center;
display: flex;
align-items: center;
height: 100%;
}
.accordion-item {
border: none;
transition: border 0.3s ease;
}
/* State with border, on some condition, like a class being added */
.accordion-item.with-border {
border: none;
}
.advanced-accordion .accordion-item {
transition: none;
border: none !important;
}
}
/* Media with text */
.media-with-text .animated-circle {
position: absolute;
top: -1rem;
right: 0;
width: 6rem;
height: 6rem;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-size: .7em;
text-align: center;
line-height: 1.55556;
}
.media-with-text .animated-circle:hover,
.media-with-text .animated-circle:focus {
opacity: .75;
}
@media (min-width: 992px) {
.media-with-text .animated-circle {
width: 12rem;
height: 12rem;
bottom: 1rem;
top: auto;
right: 0;
transform: translate(44%, 0);
font-size: 1em;
}
.media-with-text .flex-lg-row-reverse .animated-circle {
left: 0;
right: auto;
transform: translate(-44%, 0);
}
.media-with-text .animated-circle.align-right {
left: 0;
right: auto;
transform: translate(-44%, 0);
}
}
.media-with-text .animated-circle svg {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
max-width: unset;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: transform .4s cubic-bezier(0,0,.002,1);
}
.media-with-text.entered .animated-circle svg {
animation: dash 2.5s ease-out forwards;
animation-delay: 2s;
}
@keyframes dash {
0% {
stroke-dasharray: 1000;
stroke-dashoffset: 1000
}
to {
stroke-dashoffset: 0
}
}
/*
Rich text with buttons
*/
.richtext-with-buttons .btn-sm {
padding: .375rem 1rem;
}
.richtext-with-buttons ul {
}
.richtext-with-buttons ul > * {
flex-shrink: 0;
}
@media (max-width: 575px) {
.richtext-with-buttons ul {
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow: auto;
padding: 0 1rem .5rem;
margin: 0 -1rem;
}
}
/*
duel-columns-with-images
*/
.duel-columns-with-images .title span {
color: var(--bs-secondary);
}
/*
Designed by
*/
.designed-by [data-bs-toggle="collapse"] {
display: flex;
align-items: center;
justify-content: space-between;
}
.designed-by [data-bs-toggle="collapse"]::after {
flex-shrink: 0;
content: "+";
font-size: 1.5rem;
margin-right: -.5rem;
}
.designed-by [data-bs-toggle="collapse"][aria-expanded="true"]::after {
content: "-";
}
/*
Step by step
*/
.step-by-step .nav-underline {
gap: 0;
}
.step-by-step .nav .nav-item {
flex-grow: 1;
}
.step-by-step .nav button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
line-height: normal;
font-size: .9rem;
padding: .5rem;
}
.step-by-step .nav button.active {
font-weight: normal;
color: var(--bs-primary);
border-bottom-color: currentcolor;
}
.step-by-step .nav button img {
transform: scale(.8);
transition: all .2s ease-out;
}
.step-by-step .nav button.active img {
transform: scale(1) translateY(-.25rem);
}
@media (max-width: 575px) {
.step-by-step .nav button {
font-size: .7rem;
}
}
/*
Simple Product List
*/
.simple-product-list ul {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding: 0;
margin: 0;
list-style-type: none;
padding-left: 1rem; /* Ensures first item is visible */
}
.simple-product-list ul li {
text-align: center;
flex-shrink: 0;
padding: 0.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.simple-product-list ul li a:hover img {
animation: simpleProductListImgAnimation 1.5s;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@keyframes simpleProductListImgAnimation {
from { opacity: 0.4; }
to { opacity: 1; }
}
@media (max-width: 991px) {
.simple-product-list .container {
padding-left: 0;
padding-right: 0;
}
.simple-product-list .header {
padding-left: .75rem;
padding-right: .75rem;
}
.simple-product-list ul li:first-child {
margin-left: 1rem !important;
}
.simple-product-list ul li {
max-width: 90px;
}
}
@media (min-width: 992px) {
.simple-product-list ul {
justify-content: center;
}
.simple-product-list ul li {
max-width: 160px;
}
}
/*
Simple collection List
*/
.simple-collection-list ul {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding: 0;
margin: 0;
list-style-type: none;
padding-left: 1rem; /* Ensures first item is visible */
}
.simple-collection-list ul li {
text-align: center;
flex-shrink: 0;
padding: 0.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.simple-collection-list ul li a:hover img {
animation: simpleProductListImgAnimation 1.5s;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@keyframes simpleProductListImgAnimation {
from { opacity: 0.4; }
to { opacity: 1; }
}
@media (max-width: 991px) {
.simple-collection-list .container {
padding-left: 0;
padding-right: 0;
}
.simple-collection-list .header {
padding-left: .75rem;
padding-right: .75rem;
}
.simple-collection-list ul li:first-child {
margin-left: 1rem !important;
}
.simple-collection-list ul li {
max-width: 90px;
}
}
@media (min-width: 992px) {
.simple-collection-list ul {
justify-content: center;
}
.simple-collection-list ul li {
max-width: 160px;
}
}
/*
Feedback drawer
*/
button[data-bs-target="#feedback-offcanvas"] {
position: fixed;
z-index: 9999;
border-radius: 0;
display: flex;
flex-direction: column;
line-height: 1.2;
justify-content: center;
align-items: center;
padding: 0.5rem;
background-color: #ffffff !important;
color: #000000 !important;
max-width: 200px;
left: 37px;
transform: rotate(-90deg);
transform-origin: left bottom;
white-space: nowrap;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for better visibility */
border: 1px solid #000000; /* Adds a border for better visibility */
}
button[data-bs-target="#feedback-offcanvas"][data-alignment="right"] {
left: auto;
right: 0;
border-radius: .5rem 0 0 .5rem;
transform-origin: right bottom;
}
button[data-bs-target="#feedback-offcanvas"]:hover {
background-color: #f1f1f1 !important;
}
#feedback-offcanvas {
background-color: #ffffff;
color: #000000;
}
.contact-form .form-group {
margin-bottom: 1.5rem;
}
.contact-form .btn {
/* width: 100%; */
}
/* slide up discount menu */
/*
Promo testimonial with image
*/
.promo-with-image {
position: relative;
}
@media (min-width: 992px) {
.promo-with-image::before {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
background-image: var(--bg-img-desktop);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
animation: fadeIn .5s;
}
.promo-with-image.img-desktop-left::before {
left: 0;
}
.promo-with-image.img-desktop-right::before {
left: 50%;
}
}
/*
Social Slider
*/
.social-slider .splide__arrow--prev {
left: -1rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.social-slider .splide__arrow--next {
right: -1rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.social-slider .text-content {
min-height: 200px;
}
.social-slider .testimonial-card {
position: relative;
overflow: hidden;
}
.social-slider .testimonial-card:before {
content: '';
position: absolute;
bottom: -25px;
left: -20px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 25px 0;
border-color: transparent rgba(0,0,0,0.05) transparent transparent;
}
.social-slider .stars {
font-size: 1.2rem;
letter-spacing: 2px;
}
.social-slider .quote-text {
font-style: italic;
line-height: 1.5;
margin-bottom: 1rem;
}
.social-slider .quote-marks {
font-size: 1.5em;
line-height: 0;
vertical-align: middle;
opacity: 0.7;
}
.social-slider .verified-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #28a745;
color: white;
font-size: 11px;
}
.social-slider .slide-content:not(.ratio) {
height: 100%;
}
.social-slider .slide-content > * {
height: 100%;
}
.social-slider .slide-content.ratio > * {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.social-slider .slide-content.ratio .text-content {
min-height: auto;
}
/*
product Slider
*/
.general-slider {
}
.general-slider .splide__track {
overflow: visible;
}
.general-slider .splide__slide {
}
.general-slider .splide__slide.is-visible {
}
.general-slider img {
transition: all .2s ease-out;
}
.general-slider a:hover img {
opacity: .75;
}
.general-slider .splide__arrow--prev {
left: 0;
}
.general-slider .splide__arrow--next {
right: 0;
}
.featured-reviews img.rounded {
border-radius: 2.5rem!important;
}
.general-slider .btn-link {
transition: all .2s ease-out;
}
.general-sliders .btn-link:hover {
opacity: .75;
}
@media (max-width: 575px) {
.general-slider .splide__arrow {
display: none;
}
}
/*
Image with Side Icons
*/
.image-with-side-icons { }
.image-with-side-icons .carousel-indicators {
top: 5px;
right: 5px;
bottom: auto;
left: auto;
flex-direction: column;
margin: 0;
}
@media (min-width: 992px) {
.image-with-side-icons .carousel-indicators {
top: 50%;
right: 0;
transform: translate(50%, -50%);
}
}
.image-with-side-icons .carousel-indicators.align-indicators-left {
right: auto;
left: 0;
}
@media (min-width: 992px) {
.image-with-side-icons .carousel-indicators.align-indicators-left {
right: auto;
left: 0;
transform: translate(-50%, -50%);
}
}
.image-with-side-icons .carousel-indicators [data-bs-target] {
box-sizing: content-box;
text-indent: inherit;
width: 50px;
height: 50px;
border: 1px solid transparent;
margin: .125rem;
background-color: transparent;
border-radius: 50%;
overflow: hidden;
opacity: 1;
transition: all .2s ease-out;
}
@media (min-width: 992px) {
.image-with-side-icons .carousel-indicators [data-bs-target] {
width: 70px;
height: 70px;
margin: .25rem;
}
}
.image-with-side-icons .carousel-indicators [data-bs-target].active {
border-color: white;
border-radius: .25rem;
}
.image-with-side-icons .carousel-indicators [data-bs-target] img {
}
@media (max-width: 767px) {
.image-with-side-icons .carousel-item .col-lg-6 + .col-lg-6 {
margin-top: 20px; /* Existing spacing */
}
.image-with-side-icons h4 {
margin-bottom: 20px; /* Extra bottom margin for titles */
}
.image-with-side-icons .carousel-item .col-lg-6 img {
margin-bottom: 20px; /* Extra bottom margin for images */
}
}
/*
ingredient cards
*/
.ingredient-cards-wrapper {
padding: 20px 0;
background-color: #fcf8f5;
}
.ingredient-cards-content {
text-align: center;
}
.ingredient-tabs {
text-align: left;
}
.ingredient-tabs .ingredient-tab {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
.ingredient-tabs .ingredient-tab:hover {
background-color: #f0f0f0;
}
.ingredient-tabs-list {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ingredient-tabs-list .ingredient-tab {
flex: 0 0 auto;
}
.ingredient-card {
background-color: #fff;
padding: 15px;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
transition: background-color 0.3s ease;
}
.ingredient-card img {
max-width: 100%;
height: auto;
margin-bottom: 15px;
}
.ingredient-card.active-card {
background-color: #f0f0f0;
}
.ingredient-button {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #000;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.ingredient-button:hover {
background-color: #333;
}
@media (max-width: 768px) {
.ingredient-tabs-list {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ingredient-tabs-list .ingredient-tab {
flex: 0 0 auto;
margin-right: 10px;
}
.ingredient-tabs {
margin-bottom: 20px;
}
.ingredient-card {
margin-bottom: 40px;
}
}
/*
large-image-with-icons
*/
.large-image-with-icons-bg-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 575px) {
.large-image-with-icons .icon {
height: 70px !important;
}
.large-image-with-icons .icon svg {
height: 100%;
}
.large-image-with-icons .description {
font-size: 1rem !important;
}
}
/* Limit icons on desktop to 4 */
.large-image-with-icons ul > li:nth-child(n+5) {
display: none;
}
/* Limit icons on mobile to 3 */
@media (max-width: 767px) {
.large-image-with-icons ul > li:nth-child(n+4) {
display: none;
}
}
/*
Masonry Grid
*/
.masonry-grid {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.masonry-grid-list {
display: grid;
gap: 1.5rem;
grid-template-areas:
"a c d f"
"b c e f";
}
@media (max-width: 767px) {
.masonry-grid-list {
display: grid;
gap: .75rem;
grid-template-areas:
"a c"
"b c"
"d f"
"e f";
}
}
.masonry-grid-list img {
height: 100%;
object-fit: cover;
}
.masonry-grid-list li:nth-child(1) {
grid-area: a;
}
.masonry-grid-list li:nth-child(2) {
grid-area: b;
}
.masonry-grid-list li:nth-child(3) {
grid-area: c;
}
.masonry-grid-list li:nth-child(4) {
grid-area: d;
}
.masonry-grid-list li:nth-child(5) {
grid-area: e;
}
.masonry-grid-list li:nth-child(6) {
grid-area: f;
}
.masonry-grid .btn-light {
background-color: white;
color: var(--bs-primary);
}
/*
video testimonial
*/
.video-testimonial-slider .splide__slide {
padding: 0 5px;
}
@media (max-width: 991px) {
.video-testimonial-slider .splide__slide {
padding: 0;
}
}
.video-container-vt {
position: relative;
width: 100%;
height: 0;
}
.video-container-vt.ratio-1x1 { padding-bottom: 100%; }
.video-container-vt.ratio-4x3 { padding-bottom: 75%; }
.video-container-vt.ratio-16x9 { padding-bottom: 56.25%; }
.video-container-vt.ratio-21x9 { padding-bottom: 42.86%; }
.video-container-vt.ratio-3x4 { padding-bottom: 133.33%; }
.video-container-vt.ratio-9x16 { padding-bottom: 177.78%; }
.video-container-vt video,
.video-container-vt .video-thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-testimonial-sound-toggle {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
padding: 5px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.testimonial-content {
padding: 20px;
}
@media (min-width: 992px) {
.testimonial-content {
padding: 0 20px;
}
}
.testimonial-quote {
font-style: italic;
position: relative;
padding-left: 1.5em;
}
.testimonial-quote::before {
content: '"';
font-size: 2em;
position: absolute;
left: 0;
top: -0.2em;
}
.testimonial-author {
font-weight: bold;
}
@media (max-width: 991px) {
.video-testimonial-slider .splide__slide {
opacity: 0.5;
transition: opacity 0.3s ease;
}
.video-testimonial-slider .splide__slide.is-active {
opacity: 1;
}
}
/*
Fixed cards slider
*/
.fixed-cards-slider-btn {
position: fixed;
bottom: 0;
left: 50%;
z-index: 9;
transform: translateX(-50%);
border-radius: .25rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transition: all .2s ease-out;
}
.fixed-cards-slider-btn.hide {
transform: translate(-50%, 100%);
}
.fixed-cards-slider {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9;
transform: translateY(100%);
}
.fixed-cards-slider.show {
animation: fixed_cards_slider .4s ease-out both;
}
@keyframes fixed_cards_slider {
to { transform: translateY(0); }
}
.fixed-cards-slider .splide__arrow--prev {
left: 0;
transform: none;
}
.fixed-cards-slider .splide__arrow--next {
right: 0;
transform: rotate(180deg);
}
.fixed-cards-slider.container-fluid .splide__arrow--prev {
left: 0.5rem;
}
.fixed-cards-slider .container-fluid .splide__arrow--next {
right: 0.5rem;
}
.fixed-cards-slider .splide__pagination {
position: relative;
margin-top: 1.5rem;
}
.fixed-cards-slider .splide__pagination__page {
background-color: rgba(var(--bs-body-color-rgb), 0.25);
opacity: 1;
transition: all 0.2s ease-out;
}
.fixed-cards-slider.text-white .splide__pagination__page {
background-color: rgba(var(--bs-white-rgb), 0.25);
}
.fixed-cards-slider .splide__pagination__page:hover,
.fixed-cards-slider .splide__pagination__page:focus {
background-color: rgba(var(--bs-body-color-rgb), 0.5);
}
.fixed-cards-slider.text-white .splide__pagination__page:hover,
.fixed-cards-slider.text-white .splide__pagination__page:focus {
background-color: rgba(var(--bs-white-rgb), 0.5);
}
.fixed-cards-slider .splide__pagination__page.is-active {
background-color: var(--bs-body-color);
}
.fixed-cards-slider.text-white .splide__pagination__page.is-active {
background-color: var(--bs-white);
}
.fixed-cards-slider .splide__pagination--mobile {
margin-top: 0.5rem;
}
.fixed-cards-slider .btn-close {
position: absolute;
right: 1rem;
top: 1rem;
}
@media (max-width: 575px) {
.fixed-cards-slider .splide__pagination {
display: none;
}
}
@media (min-width: 576px) {
.fixed-cards-slider .splide__pagination--mobile {
display: none;
}
.fixed-cards-slider .splide__arrow--prev {
left: -0.25rem;
}
.fixed-cards-slider .splide__arrow--next {
right: -0.25rem;
}
}
/*
Rotating Circles
*/
.rotating-circles-circle {
width: 260px;
height: 260px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 2rem;
background-color: var(--bs-light);
color: var(--bs-primary-darken-10);
border-radius: 50%;
text-align: center;
line-height: 1;
margin: 0;
transition: all .2s ease-out;
padding: 1rem;
}
.rotating-circles .splide__slide.is-active {
z-index: 1;
}
.splide__slide.is-active .rotating-circles-circle {
transform: scale(1.2);
background-color: var(--bs-primary);
color: white;
}
.rotating-circles .splide__arrow--prev {
left: -1rem;
}
.rotating-circles .splide__arrow--next {
right: -1rem;
}
.rotating-circles-descriptions {
position: relative;
}
@media (max-width: 575px) {
.rotating-circles-circle {
width: 240px;
height: 240px;
}
.rotating-circles .splide__arrow--prev {
left: 2.5rem;
}
.rotating-circles .splide__arrow--next {
right: 2.5rem;
}
}
/*
Ingredient Slider
*/
.ingredient-slider {
overflow: hidden;
}
.ingredient-slider .splide__track {
overflow: visible;
}
.ingredient-slider .splide__slide {
opacity: .25;
transition: all .2s ease-out;
}
.ingredient-slider .splide__slide--inner {
color: white;
border-radius: 0.25rem; /* Add this line for rounded corners */
overflow: hidden; /* Add this line to ensure content doesn't overflow */
transition: border-radius 0.2s ease-out; /* Add this line for smooth transition */
}
.ingredient-slider .splide__slide--inner .inner-content {
transition: all .2s ease-out;
padding: 1.5rem;
height: 100%;
}
.ingredient-slider .splide__slide--inner .description {
opacity: 0;
transform: translateY(2rem);
transition: all .2s ease-out;
transition-delay: .2s;
}
.ingredient-slider .splide__slide--inner:hover {
border-radius: 1rem; /* Add this line to increase roundness on hover */
}
.ingredient-slider .splide__slide--inner:hover .inner-content {
background-color: rgba(0, 0, 0, .5);
backdrop-filter: blur(10px);
}
.ingredient-slider .splide__slide--inner:hover .inner-content .title {
color: white !important;
}
.ingredient-slider .splide__slide--inner:hover .description {
opacity: 1;
transform: translateY(0);
}
.ingredient-slider .splide__slide.is-visible {
opacity: 1;
}
.ingredient-slider .splide__arrow--prev {
left: 0;
transform: none;
}
.ingredient-slider .splide__arrow--next {
right: 0;
transform: rotate(180deg);
}
.ingredient-slider .splide__pagination {
position: relative;
margin-top: 1.25rem;
}
.ingredient-slider .splide__pagination__page {
background-color: rgba(0, 0, 0, .25);
opacity: 1;
transition: all .2s ease-out;
}
.ingredient-slider .splide__pagination__page:hover,
.ingredient-slider .splide__pagination__page:focus {
background-color: rgba(0, 0, 0, .5);
}
.ingredient-slider .splide__pagination__page.is-active {
background-color: var(--bs-dark);
}
@media (max-width: 575px) {
.ingredient-slider .splide__slide.is-visible .inner-content {
background-color: rgba(0, 0, 0, .5);
backdrop-filter: blur(10px);
}
.ingredient-slider .splide__slide.is-visible .description {
opacity: 1;
transform: translateY(0);
}
}
/*Featured product tabs*/
.tabs-collection-info-block {
height: 100%;
width: 100%;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tabs-collection-info-top {
width: 100%;
display: block;
}
.tabs-collection-info-top img {
margin-bottom: 15px;
}
.tabs-collection-info-top h3 {
margin-bottom: 10px;
}
.tabs-collection-info-block .rte * {
font-size: 18px;
line-height: 28px;
}
.featured-product-tabs .featured-products-nav {
border: none;
margin-bottom: 15px;
}
.featured-product-tabs .featured-products-nav .nav-link {
border: 2px solid;
font-size: 18px;
line-height: 20px;
padding: 15px 35px;
border-radius: 70px;
font-weight: bold;
}
.featured-product-tabs .featured-products-nav .nav-item {
margin-right: 10px;
}
.featured-product-tabs .product-item .card .product-item-title {
padding: 0;
}
@media screen and (max-width: 576px) {
.featured-product-tabs .product-list .product-item > div {
padding: 0;
}
.featured-product-tabs .product-list .product-item > div.tabs-collection-info-block {
padding: 25px !important;
}
}