:root {
  --primary: #007bff;
  --secondary: #EC1C24;
}

@media (max-width: 992px) {
    .swiffy-slider.slider-show4-legacy .slider-container { grid-auto-columns: calc(100% / 2); }
}

@media (max-width: 576px) {
    .slider-show4-legacy .slider-container { grid-auto-columns: 100%; }
}

/* Guard against theme rules that force full width on items */
.swiffy-slider .slider-container > * {
    width: auto !important;
    flex: 0 0 auto;
}

.swiffy-slider.slider-show4-legacy .slider-container {
    grid-auto-columns: calc(100% / 4 - 0.75rem);
}

.swiffy-slider .slider-container li .card .card-body{
    margin-top: 1rem;
}

.swiffy-slider .slider-container li .card .ratio {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 1rem;
    overflow: hidden;
}

.swiffy-slider .slider-container li .card .ratio img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-image-square {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    overflow: hidden;
}

.card-image-square .card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.herobanner-section .banner-content {
    background-image: url("/images/home-page-banner.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 80vh;
	position: relative;
}

.herobanner-section .banner-content .banner-caption {
    position: absolute;
    width: 40%;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
}

.herobanner-section .banner-content .banner-caption .banner-title {
    font-size: 300%;
    color: #fff;
}

.herobanner-section .banner-content .banner-caption .banner-subtitle {
    font-size: 150%;
    color: #fff;
    max-width: 80%;
}

.herobanner-section .banner-content .banner-caption .banner-btns{
    display: flex;
    gap: 2rem;
}

.herobanner-section .banner-content .banner-caption .banner-btns .source-btn {
    background: red;
    border-radius: 10px;
    padding: .3125rem 3.125rem;
    font-size: 120%;
    border: unset;
    color: #fff;
}

.herobanner-section .banner-content .banner-caption .banner-btns .learn-btn {
    background: transparent;
    border-radius: 10px;
    padding: .3125rem 3.125rem;
    font-size: 120%;
    border: 1px solid #fff;
    color: #fff;
}

.categories-section .swiffy-slider .card .card-body{
    text-align: center;
}

.card-body-compact {
    padding: 0;
    padding-top: .5rem;
}

.swiffy-slider .slider-container li .card .card-body.card-body-compact {
    margin-top: .5rem;
}

.auth-btns {
    display: flex;
    gap: 1rem;
}

.auth-btns .register-btn {
    min-width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 120%;
    border-radius: 0.6rem;
}

.auth-btns .login-btn {
    min-width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 120%;
    border-radius: 0.6rem;
}

/* Carousel */
.carousel-item {
    position: relative;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.carousel-caption {
    position: relative;
    z-index: 2;
}

.carousel-image {
    width: 120rem;
    height: 50rem;
    opacity: 1;
}

.carousel-caption {
    top: 12rem;
}

.carousel-title {
    text-align: left;
    font: normal normal 600 1rem 'Poppins', sans-serif;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
    line-height: 5rem;
    max-width: 45rem;
    font-size: 350%;
}

.carousel-subtitle {
    text-align: left;
    font: normal normal normal 1rem 'Poppins', sans-serif;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
    font-size: 200%;
    max-width: 42rem;
}

.carousel-control-next {
    z-index: 11;
}

.carousel-caption .carousel-btns {
    display: flex;
    gap: 1rem;
}
 .carousel-caption .carousel-btns button {
    border-radius: 1rem;
    opacity: 1;
    font-size: large;
    padding: 0.5rem 4rem;
}

.carousel-control-btn-circle {
    border: 2px solid #FFFFFF;
    width: 3.32rem;
    height: 3.32rem;
    border-radius: 50%;
}

.carousel-control-prev-icon {
    background-image: url(../../../../images/prev-arrow.svg);
    width: 3.32rem;
    height: 3.32rem;
}

.carousel-control-next-icon {
    background-image: url(../../../../images/next-arrow.svg);
    width: 3.32rem;
    height: 3.32rem;
}

/* About Section */
.about-section .about-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.about-section .about-cards .about-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.about-section .about-cards .about-card .img-box {
    display: flex;
}

.about-section .about-cards .about-card .text-box .text {
    text-transform: capitalize;
    font-size: 140%;
    font-weight: 500;
}

@media (max-width: 768px) {
    .about-section .about-cards {
        justify-content: center;
        gap: 2rem;
    }
}

.herobanner-section {
    margin-bottom: 3rem;
}

/* All Sections */
.about-section, .product-grid-section, .categories-section, .recent-section, .best-seller-section, .faq-section, .footer-section {
    max-width: 112.5rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .about-section, .product-grid-section, .categories-section, .recent-section, .best-seller-section, .faq-section, .footer-section {
        max-width: 100%;
    }
}

/* Recommended */

.section-title {
    text-align: left;
    font: normal normal normal 1rem 'Poppins', sans-serif;
    letter-spacing: .0706rem;
    color: #000000;
    text-transform: uppercase;
    opacity: 1;
    margin: 2rem 0 1rem 0;
    font-size: 200%;
    text-transform: capitalize;
}

.product-grid .row {
    max-width: 84.5rem;
    margin-left: auto;
    margin-right: auto;
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.product-grid-item {
    grid-column: 1 / -1;
}

@media (min-width: 992px) {
    .product-grid { grid-template-columns: repeat(12, 1fr); }
    .product-grid .grid-7 { grid-column: span 7; }
    .product-grid .grid-5 { grid-column: span 5; }
    .product-grid .grid-4 { grid-column: span 4; }
    .product-grid .grid-8 { grid-column: span 8; }
}

.card {
    border: none;
}

.HDPE-card {
    height: 39.375rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 1.875rem !important;
    overflow: hidden;
    position: relative;
}

.HDPE-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.HDPE-card:hover img {
    transform: scale(1.1);
}

.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.HDPE-card:hover .overlay-content {
    opacity: 1;
    transform: translateY(0);
}

.Pipe-card {
    height: 26.875rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 1.875rem !important;
    overflow: hidden;
    position: relative;
}

.Pipe-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.Pipe-card:hover img {
    transform: scale(1.1);
}

.card-title {
    padding-top: 3rem;
    text-align: left;
    font: normal normal 600 1rem "Poppins", sans-serif;
    letter-spacing: 0.6px;
    color: #FFFFFF;
    text-transform: uppercase;
    opacity: 1;
    font-size: 140%;
}

.card-btn {
    color: white;
    width: 10rem;
    height: 3rem;
    background: rgba(199, 199, 199, .26) 0% 0% no-repeat padding-box;
    border: 2px solid #FFFFFF;
    border-radius: .625rem;
    margin-bottom: 3rem;
    font-size: 120%;
}

/*Buy by Recently Viewed*/
.recently-viewed {
    display: flex;
    justify-content: space-between;
}

.recently-box {
    display: flex;
    flex-direction: column;
}

.recently-img-box {
    position: relative;
    width: 18.75rem;
    aspect-ratio: 2/1;
    border-radius: 1.875rem;
    overflow: hidden;
}

.recently-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}

.recently-img.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.recently-placeholder-text {
    color: #6c757d;
}

.recently-title {
    text-align: center;
    font: normal normal normal 1rem 'Poppins', sans-serif;
    letter-spacing: 0;
    color: #000000;
    opacity: 1;
}

/*Best Sellers*/
.image-container {
    position: relative;
}

.image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent black overlay */
    z-index: 1; /* Places the overlay above the image */
    border-radius: 30px;
}

.swiper-seller-title {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font: bold normal normal 1rem 'Poppins',sans-serif;
    font-size: 100%;
    color: white;
    padding: .3125rem .625rem;
    border-radius: .3125rem;
    text-align: center;
    width: 100%;
    text-align: center;
    letter-spacing: 0;
    opacity: 1;
    z-index: 2;
}

.faq-section .accordion-item {
    border-right: unset;
    border-left: unset;
    border-top: unset;
}


body {
	align-items: center;
	justify-content: center;
    font: normal normal normal 1rem "Poppins", sans-serif;
}

@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-250px * 7))}
}

.slider {
	max-width: 84.5rem;
	height: 100px;
	margin: 5rem auto;
	overflow: hidden;
	position: relative;
	width: auto;
}

.slider .slide-track {
	animation: scroll 40s linear infinite;
	display: flex;
	width: calc(250px * 14);
}

.slider .slide {
	height: 100px;
	width: 250px;
}

.navbar-sub .theme-berlin {
    background-color: #fff;
    justify-content: end;
}

.navbar-sub .theme-berlin .cat-link {
    color: #000 !important;
}

.navbar-sub .menu {
    background-color: #000;
}

.navbar .section.catalog-filter {
    margin: 0;
}

.slider-section .slider-column {
    padding: 0;
}


.item-title-row {
    display: flex;
}

.item-title {
    flex: 1;
    margin: 0;
    font: normal normal 600 1rem 'Poppins', sans-serif;
    color: #000;
}