@import url(root.css);

.productSectionContainer {
    width: 90%;
    margin: 0 auto 50px auto;
}

.productSectionWrapp {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.productCategory {
    width: 30%;
}

.productListWrap {
    width: 70%;
    padding-top: 47px;
}

.productCategoryTitle p {
    font-size: var(--fontLarge);
    font-weight: var(--fontW500);
    color: var(--PrimaryColor);
}

.sidebar-menu-box {
    border: 1px solid var(--BlackColor);
    border-radius: 10px;
    padding: 15px;
    background-color: var(--WhiteColor);
}

.sidebar-menu,
.submenu {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.menu-item {
    border-bottom: 1px solid var(--MenuItemBorder);
}

.menu-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--fontMedium);
    font-weight: var(--fontW400);
    color: var(--PrimaryColor);
}

.menu-header .icon {
    margin-right: 10px;
    font-size: var(--fontSmall);
    transition: transform 0.3s ease;
}

.menu-item.open>.menu-header .icon {
    transform: rotate(90deg);
}

.submenu {
    display: none;
    padding-left: 20px;
}

.submenu .menu-item {
    border-bottom: none !important;
}

.submenu .submenu li {
    padding-left: 20px;
}

.submenu li {
    position: relative;
    padding: 6px 0 6px 25px;
    font-size: var(--fontMedium);
    font-weight: var(--fontW400);
    color: var(--TitleLight);
    border-left: 1px solid var(--MenuItemBorder);
}

.submenu li::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 15px;
    height: 1px;
    background: var(--MenuItemBorder);
}

.menu-header .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mainMenuHeader {
    padding: 10px 8px;
}


/* Product Card View Styles */

.categoryProductCard {
    border-radius: 12px;
    box-shadow: var(--BoxShadow);
    text-align: center;
    background: var(--WhiteColor);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.categoryProductCard:hover {
    transform: translateY(-5px);
}

.categoryProductCard img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.categoryProductCard h3 {
    padding: 15px;
    font-size: var(--fontLarge);
    color: var(--PrimaryColor);
    font-weight: 600;
    margin: 0;
    text-align: left;
    text-transform: uppercase;
}


/* Product Details View Styles */

.xg93k8s {
    width: 95%;
    margin: 0 0 0 auto;
}

.pq7jwd2.main-image-section{
    height: 400px;
    margin-bottom: 20px;
}
    

.pq7jwd2 img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: contain;
}

.skq81v3 {
    width: 100%;
    display: flex;
    overflow: auto;
    margin-bottom: 30px;
}

.skq81v3::-webkit-scrollbar {
    display: none;
}

.skq81v3 img {
    width: 150px;
    height: 110px;
    border-radius: 15px;
    object-fit: contain;
    cursor: pointer;
    margin-right: 15px;
    border: 2px solid transparent;
}

.skq81v3 img:hover,
.skq81v3 img.active {
    border-color: var(--PrimaryColor);
}

.us4bs87I {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.k0p2qaz {
    font-size: var(--fontMediumLarge);
    font-weight: var(--fontW500);
    color: var(--TextColor);
}

.p9mlv3e {
    font-size: var(--fontLarge);
    font-weight: var(--fontW300);
    color: var(--TitleLight);
    margin-bottom: 40px;
}

.btnqv09y {
    background: var(--PrimaryColor);
    color: var(--WhiteColor);
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    float: right;
}

.q9plme3 {
    font-size: var(--font36);
    font-weight: var(--fontW500);
    color: var(--TextColor);
}

.contentb0zImagesWrap87c {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.contentb0zImagesWrap87c img {
    width: 33.33%;
    height: auto;
    padding: 0 20px 20px 20px ;
}

.q9Udn67 .nav-pills {
    width: 100%;
    margin: 30px 0;
}

.q9Udn67 .nav-pills li {
    width: 50%;
}

.q9Udn67 .nav-pills li a {
    width: 100%;
    border-radius: 0;
    padding: 15px 10px;
    text-align: center;
    font-size: var(--fontLarge);
    font-weight: var(--fontW400);
    color: var(--BlackColor);
    border-bottom: solid 1px var(--tabsBorder);
}

.q9Udn67 .nav-pills li a.active {
    background: var(--PrimaryColor);
    color: var(--WhiteColor);
}

/* Similar Products Styles */

.similarProductsNavigation {
    border-radius: 7px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--PrimaryColor);
    border: solid 1px var(--PrimaryColor);
}

.similarProductsNavigation:hover {
    border: solid 1px var(--PrimaryColor);
    background: var(--WhiteColor);
}

.swiper-button-disabled i{
    color: var(--PrimaryColor) !important;
}

.similarProductsNavigation i{
  color: var(--WhiteColor);
}

.similarProductsNavigation:hover i{
  color: var(--PrimaryColor);
}

.cqbq9pl .cq6582pl {
    margin-bottom: 30px;
}

.scrollable-similar-products {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.similar-products-section {
    margin-top: 40px;
}

.swiper-slide {
    padding: 10px 0;
    height: auto;
}

/* Enquire Modal Styles */

#enquireModal .modal-header{
    background: var(--PrimaryColor);
    color: var(--WhiteColor);
    padding: 25px;
}

#enquireModal .modal-header h1 {
    font-size: var(--fontLarge) !important;
    font-weight: var(--fontW400);
}

#enquireModal .modal-header button{
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--WhiteColor);
    border-radius: 50%;
    opacity: 1;
}

.productEnquireForm label{
    margin-bottom: 10px;
    font-size: var(--fontMedium);
    font-weight: var(--fontW400);
    color: var(--TitleLight);
}

.productEnquireForm label.error{
    font-size: var(--fontSml);
    font-weight: var(--fontW300);
    color: var(--DangerColor);
    margin-bottom: 0 !important;
}

.productEnquireForm input,
.productEnquireForm textarea{
    padding: 10px 15px;
    border-radius: 7px;
    font-size: var(--fontMedium);
    color: var(--TitleLight);
    box-shadow: none !important;
    outline: none !important;
    border: solid 1px var(--InputBorder);
}

.productEnquireForm input:active,
.productEnquireForm input:focus,
.productEnquireForm input:focus-within,
.productEnquireForm textarea:active,
.productEnquireForm textarea:focus,
.productEnquireForm textarea:focus-within{
    border: solid 1px var(--InputBorder);
}

.enquireCloseButton{
    background-color: transparent;
    border-radius: 30px;
    padding: 8px 20px;
    font-size: var(--fontMedium);
    font-weight: var(--fontW400);
    color: var(--PrimaryColor);
    border: 2px solid var(--PrimaryColor);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: fit-content;
}

.enquireCloseButton:hover {
    background-color: transparent;
    color: var(--PrimaryColor);
    border: 2px solid var(--PrimaryColor);
}

/* Media For Products Page Only */

@media screen and (max-width: 600px) {
    body .bannerSectionWrap{
        padding-top: 100px !important;
    }
}