/*@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap&subset=vietnamese");*/
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

html {
    overflow-x: hidden;
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

h2 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
    margin: 0px;
}

body {
    font-family: "Inter", sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    padding-top: 80px;
    /* Add padding to account for fixed header */
}

.site-header {
    box-shadow: 0 4px 12px 3px rgba(0, 0, 0, 0.2);
    /* You can adjust the blur and spread as needed */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--header-background-color, #fff);
    transition: all 0.3s ease;
}

.site-header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

a {
    text-decoration: none;
}

.card {
    border: none;
}

img {
    max-width: 100%;
    height: auto;
}

.header-search-form {
    margin-left: 30px;
    height: 30px;
    width: 100%;
    max-width: 194px;
    background-color: #d9d9d9;
    border-radius: 30px;
    display: flex;
    padding: 8px;
    align-items: center;
}

.header-search-form input {
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: #000;
    font-size: 14px;
    padding: 0px;
    width: 100%;
}

.header-search-form input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.header-search-form input:hover,
.header-search-form input:focus {
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

.header-search-form .submit-search,
.header-search-form .submit-search:hover,
.header-search-form .submit-search:focus {
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

.header-search-form .submit-search svg {
    width: 16px;

    height: 16px;
}

.header-search-form .submit-search:hover svg {
    fill: black;
}

.header-navbar {
    background-color: var(--header-background-color);
    color: var(--header-text-color);
}

#menu-primary-menu a {
    color: var(--header-text-color);
    /* Use the dynamic header text color */
    font-size: 15px;
    /* Set font size */
    text-decoration: none;
    /* Optional: Remove underline */
}

#menu-primary-menu {
    gap: 30px;
    /* Set gap between menu items */
}

#menu-primary-menu a:hover {
    text-decoration: underline;
    /* Optional: Add underline on hover */
}

#menu-primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 20px);
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    min-width: 200px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

#menu-primary-menu .sub-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
    padding-left: 0;
}

#menu-primary-menu li.menu-item-has-children {
    position: relative;
}

#menu-primary-menu li.menu-item-has-children>a {
    position: relative;
    padding-right: 25px;
}

#menu-primary-menu li.menu-item-has-children .menu-arrow {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#menu-primary-menu li.menu-item-has-children .menu-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transition: transform 0.3s ease;
}

#menu-primary-menu li.menu-item-has-children .menu-arrow.active::before {
    transform: translate(-50%, -50%) rotate(-135deg);
}

#menu-primary-menu .sub-menu li {
    list-style: none;
}

#menu-primary-menu .sub-menu a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s ease;
}

#menu-primary-menu .sub-menu a:hover {
    background-color: #f8f9fa;
    color: var(--link-hover-color);
}

#menu-primary-menu .sub-menu li:last-child a {
    border-bottom: none;
}

.top-banner {
    padding: 20px 0;
}

.top-banner .slick-slide img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .header-search-form {
        margin-right: 0;
        margin-top: 20px;
    }

    #menu-primary-menu {
        gap: 20px;
        /* Set gap between menu items for mobile */
    }

    /* Mobile menu styles */
    #menu-primary-menu .sub-menu {
        position: static;
        box-shadow: none;
        background-color: transparent;
        opacity: 1;
        transform: none;
        transition: none;
        display: none;
    }

    #menu-primary-menu .sub-menu.show {
        display: block;
    }

    #menu-primary-menu .sub-menu a {
        padding: 8px 20px;
        color: var(--header-text-color);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #menu-primary-menu .sub-menu a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Adjust body padding for mobile */
    body {
        padding-top: 70px;
    }
}

/* slider */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider-container.slick-slider {
    margin-bottom: 0px !important;
}

.slider-container .slick-slide img {
    width: 100%;
    height: auto;
}

/*creativeaccessories-gallery */
.creativeaccessories-gallery {
    padding: 15px 0 0px 0;
}

.creativeaccessories-gallery.hide_dot .slick-dots,
.hide-dots .slick-dots {
    display: none;
    /* Hide dots if class is present */
}

.creativeaccessories-gallery .slide-content {
    position: absolute;
    top: 15%;
    bottom: 10%;
    left: 0;
    width: 568px;
    max-width: 55%;
    /* Matches Bootstrap's container-lg max-width */
    margin: 0;
    /* Center the content */
    padding: 0px 30px;
    text-align: left;
    font-weight: 700;
    color: black;
    display: flex;
    justify-content: space-between;
    row-gap: 30px;
    flex-direction: column;
}

.creativeaccessories-gallery .slick-slide img {
    border-radius: 30px;
}

.creativeaccessories-gallery .slide-content h1,
.creativeaccessories-gallery .slide-content h2,
.creativeaccessories-gallery .slide-content h3,
.creativeaccessories-gallery .slide-content p {
    color: inherit;
    text-align: left;
}

.creativeaccessories-gallery .slide-content h1,
.creativeaccessories-gallery .slide-content h2 {
    text-align: left;
    font-size: 64px;
    font-weight: 700;
    color: inherit;
}

.creativeaccessories-gallery .slide-content .btn-primary {
    width: fit-content;
}

/* Slide Content Wrapper */

.slide-content {
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    /* Semi-transparent background */
    color: #fff;
    padding: 0px;
    text-align: left;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

.slick-dots {
    bottom: 8px;
}

.slick-dots li {
    width: 52px;
}

.slick-dots li button {
    background: #d9d9d9;
    border-radius: 100px;
    width: 52px;
    height: 5px;
    padding: 0;
}

.slick-dots li.slick-active button {
    background: #918f8f;
}

.slick-dots li button:before {
    display: none;
    content: "";
}

/* Responsive Adjustments for Slide Content */
@media (max-width: 1400px) {

    .slide-content,
    .container-xl {
        max-width: 100%;
        /* Full width on smaller screens */
        width: 1320px;
        /* Matches Bootstrap's container-lg max-width */
    }
}

@media (max-width: 1200px) {
    .slide-content {
        max-width: 100%;
        /* Full width on smaller screens */
        width: 1140px;
        /* Matches Bootstrap's container-md max-width */
    }
}

@media (max-width: 992px) {
    .slide-content {
        max-width: 100%;
        /* Full width on smaller screens */
        width: 960px;
        /* Matches Bootstrap's container-sm max-width */
    }

    .slide-content h1 {
        font-size: 56px;
        /* Adjusted font size for smaller screens */
    }

    .creativeaccessories-gallery .slide-content h2 {
        font-size: 56px;
        /* Adjusted font size for smaller screens */
    }
}

@media (max-width: 768px) {
    .creativeaccessories-gallery {
        padding: 10px 0 0 0;
        /* Reduced padding for smaller screens */
    }

    .creativeaccessories-gallery .slide-content {
        top: 8%;
    }

    .creativeaccessories-gallery .slick-dots,
    .slider-container .slick-dots {
        display: none !important;
        /* Hide dots on smaller screens */
    }

    .slide-content {
        max-width: 100%;
        /* Full width on smaller screens */
        width: 720px;
        /* Matches Bootstrap's container-xs max-width */
        padding: 10px;
    }

    .slide-content h1 {
        font-size: 48px;
        /* Adjusted font size for smaller screens */
    }

    .creativeaccessories-gallery .slide-content h2 {
        font-size: 18px;
        /* Adjusted font size for smaller screens */
    }

    .creativeaccessories-gallery .slide-content p {
        font-size: 8px;
    }
}

@media (max-width: 576px) {
    .slide-content {
        max-width: 100%;
        /* Full width on smaller screens */
        width: 540px;
        /* Matches Bootstrap's container-xs max-width */
        padding: 8px;
    }

    .slide-content h1 {
        font-size: 24px;
        /* Adjusted font size for smaller screens */
    }
}

.wp-singular .slide-content .content {
    margin-bottom: 8%;
    width: 50%;
}

.slide-content {
    color: #fff;
}

.slide-content p,
.slide-content h1,
.slide-content h2,
.slide-content h3 {
    color: inherit;
    /* Inherit color from parent */
}

.slide-content p {
    font-size: 16px;
    margin: 0 0 10px 0;
}

.slide-content h1 {
    font-size: 64px;
    line-height: 1.2;
    font-weight: 700;
}

.slide-content .btn {
    margin-right: 10px;
    color: #fff;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 3px;
}

.btn-primary {
    border: none;
}

.slide-content .btn-primary {
    background-color: var(--button-color);
    color: var(--button-text-color);
    border-radius: 50px;
    font-weight: 700;
}

.slide-content .btn-primary:hover {
    background-color: var(--button-hover-color);
    color: var(--button_hover_text_color);
}

.slide-content .btn-secondary {
    background-color: var(--button-hover-color);
    color: var(--button-text-color);
}

.slide-content .btn-secondary:hover {
    background-color: var(--button-color);
    color: var(--button-text-color);
}

@media (max-width: 1024px) {
    .slide-content {
        bottom: 15%;
        padding: 15px;
        max-width: 90%;
    }

    .slide-content h1 {
        font-size: 48px;
    }

    .slide-content p {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .wp-singular .slide-content .content {
        margin-bottom: 2%;
    }

    h2 {
        font-size: 18px;
    }

    .slide-content {
        bottom: 10%;
        padding: 10px;
        max-width: 95%;
    }

    .slide-content h1 {
        font-size: 36px;
    }

    .slide-content p,
    .products-list-slider .product-title {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .slide-content {
        bottom: 5%;
        padding: 8px;
        max-width: 100%;
    }

    .slide-content h1 {
        font-size: 20px;
    }

    .slide-content p {
        font-size: 10px;
    }
}

/* slider end */
/* Transparent Search Input */
.search-wrapper {
    padding: 6px 12px;
}

.search-input {
    background-color: transparent;
    /* Transparent background */
    border: none;
    /* Remove border */
    outline: none;
    /* Remove focus outline */
    box-shadow: none;
    /* Remove shadow */
    color: #fff;
    /* Text color */
    font-size: 14px;
    /* Font size */
    width: 374px;
    /* Full width */
    max-width: 80%;
    padding: 10px;
    /* Add padding */
}

/* Placeholder Text */
.search-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent placeholder */
    font-size: 14px;
    /* Font size for placeholder */
}

/* Remove hover and focus styles */
.search-input:hover,
.search-input:focus {
    background-color: transparent;
    /* Ensure background stays transparent */
    border: none;
    /* No border on hover or focus */
    outline: none;
    /* No outline on focus */
    box-shadow: none;
    /* No shadow on focus */
}

/* top banner  */
.top-banner .slick-next,
.top-banner .slick-prev {
    z-index: 9;
}

.top-banner .slick-next:before,
.top-banner .slick-prev:before {
    content: "";
    width: 19px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}

.top-banner .slick-next {
    right: 4%;
}

.top-banner .slick-next:before {
    right: 0;
    background-image: url('data:image/svg+xml,<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.70143 19.9997C2.22375 19.9997 2.56004 19.873 2.88443 19.6981C5.26915 18.409 7.65556 17.1231 10.0414 15.8355C12.6847 14.4095 15.3269 12.9808 17.9731 11.5586C18.4937 11.2784 18.8538 10.8924 18.9644 10.3299C19.1164 9.55724 18.7761 8.87337 18.04 8.47128C17.0555 7.93339 16.0659 7.40405 15.0785 6.8715C11.0061 4.67446 6.92852 2.48438 2.86345 0.27505C1.6918 -0.361763 0.590463 0.20768 0.193483 0.956242C-0.0600163 1.43372 -0.0486741 1.91226 0.142443 2.40792C0.965891 4.54132 1.78083 6.67794 2.59918 8.81295C2.72905 9.15087 2.86856 9.48612 2.98425 9.82832C3.01884 9.93151 3.02054 10.0657 2.98198 10.1673C2.0366 12.6488 1.09406 15.1314 0.128263 17.6059C-0.370797 18.8854 0.677795 20.0034 1.70143 19.9997Z" fill="white"/></svg>');
}

.top-banner .slick-prev {
    left: 4%;
}

.top-banner .slick-prev:before {
    left: 0px;
    background-image: url('data:image/svg+xml,<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.2986 9.22168e-06C16.7763 9.17602e-06 16.44 0.12673 16.1156 0.301573C13.7309 1.59071 11.3444 2.87663 8.9586 4.16416C6.31528 5.59017 3.6731 7.01885 1.02695 8.44112C0.506335 8.7213 0.14622 9.10735 0.0356322 9.66984C-0.116353 10.4425 0.223914 11.1263 0.960027 11.5284C1.94454 12.0663 2.93415 12.5956 3.92149 13.1282C7.99393 15.3252 12.0715 17.5153 16.1365 19.7246C17.3082 20.3615 18.4095 19.792 18.8065 19.0435C19.06 18.566 19.0487 18.0874 18.8576 17.5918C18.0341 15.4584 17.2192 13.3218 16.4008 11.1867C16.271 10.8488 16.1314 10.5136 16.0158 10.1714C15.9812 10.0682 15.9795 9.93397 16.018 9.83238C16.9634 7.3509 17.9059 4.86834 18.8717 2.39381C19.3708 1.1143 18.3222 -0.0037335 17.2986 9.22168e-06Z" fill="white"/></svg>');
}

@media screen and (max-width: 768px) {

    .top-banner .slick-prev,
    .top-banner .slick-next,
    .top-banner .slick-next:before,
    .top-banner .slick-prev:before {
        width: 9px;
        height: 10px;
    }
}

/* product listing slider  */
.products-list-slider {
    padding: 0 30px 20px 30px;
}

.products-list-slider .slick-next,
.products-list-slider .slick-prev {
    top: 40%;
}

.products-list-slider .slick-next:before,
.products-list-slider .slick-prev:before {
    content: "";
    width: 19px;
    height: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    opacity: 1;
}

.products-list-slider .slick-next:before {
    background: url('data:image/svg+xml,<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.70143 20C2.22375 20 2.56004 19.8733 2.88443 19.6984C5.26915 18.4093 7.65556 17.1234 10.0414 15.8358C12.6847 14.4098 15.3269 12.9811 17.9731 11.5589C18.4937 11.2787 18.8538 10.8927 18.9644 10.3302C19.1164 9.55754 18.7761 8.87367 18.04 8.47159C17.0555 7.93369 16.0659 7.40435 15.0785 6.8718C11.0061 4.67477 6.92852 2.48469 2.86345 0.275354C1.69179 -0.361458 0.59046 0.207985 0.19348 0.956547C-0.0600195 1.43402 -0.0486772 1.91257 0.14244 2.40822C0.965889 4.54163 1.78083 6.67824 2.59918 8.81325C2.72904 9.15117 2.86855 9.48642 2.98425 9.82862C3.01884 9.93182 3.02054 10.066 2.98198 10.1676C2.0366 12.6491 1.09406 15.1317 0.128262 17.6062C-0.370798 18.8857 0.677795 20.0037 1.70143 20Z" fill="%23C4C4C4"/></svg>');
}

.products-list-slider .slick-prev:before {
    background: url('data:image/svg+xml,<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.2985 20C16.7762 20 16.4399 19.8733 16.1155 19.6984C13.7308 18.4093 11.3444 17.1234 8.95854 15.8358C6.31522 14.4098 3.67304 12.9811 1.02689 11.5589C0.506275 11.2787 0.14616 10.8927 0.0355721 10.3302C-0.116413 9.55754 0.223854 8.87367 0.959967 8.47159C1.94448 7.93369 2.93409 7.40435 3.92143 6.8718C7.99387 4.67477 12.0714 2.48469 16.1365 0.275354C17.3081 -0.361458 18.4095 0.207985 18.8065 0.956547C19.06 1.43402 19.0486 1.91257 18.8575 2.40822C18.0341 4.54163 17.2191 6.67824 16.4008 8.81325C16.2709 9.15117 16.1314 9.48642 16.0157 9.82862C15.9811 9.93182 15.9794 10.066 16.018 10.1676C16.9633 12.6491 17.9059 15.1317 18.8717 17.6062C19.3707 18.8857 18.3221 20.0037 17.2985 20Z" fill="%23C4C4C4"/></svg>');
}

.products-list-slider .slick-next:hover:before {
    background: url('data:image/svg+xml,<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.70143 20C2.22375 20 2.56004 19.8733 2.88443 19.6984C5.26915 18.4093 7.65556 17.1234 10.0414 15.8358C12.6847 14.4098 15.3269 12.9811 17.9731 11.5589C18.4937 11.2787 18.8538 10.8927 18.9644 10.3302C19.1164 9.55754 18.7761 8.87367 18.04 8.47159C17.0555 7.93369 16.0659 7.40435 15.0785 6.8718C11.0061 4.67477 6.92852 2.48469 2.86345 0.275354C1.69179 -0.361458 0.59046 0.207985 0.19348 0.956547C-0.0600195 1.43402 -0.0486772 1.91257 0.14244 2.40822C0.965889 4.54163 1.78083 6.67824 2.59918 8.81325C2.72904 9.15117 2.86855 9.48642 2.98425 9.82862C3.01884 9.93182 3.02054 10.066 2.98198 10.1676C2.0366 12.6491 1.09406 15.1317 0.128262 17.6062C-0.370798 18.8857 0.677795 20.0037 1.70143 20Z" fill="%23737373"/></svg>');
}

.products-list-slider .slick-prev:hover:before {
    background: url('data:image/svg+xml,<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.2985 20C16.7762 20 16.4399 19.8733 16.1155 19.6984C13.7308 18.4093 11.3444 17.1234 8.95854 15.8358C6.31522 14.4098 3.67304 12.9811 1.02689 11.5589C0.506275 11.2787 0.14616 10.8927 0.0355721 10.3302C-0.116413 9.55754 0.223854 8.87367 0.959967 8.47159C1.94448 7.93369 2.93409 7.40435 3.92143 6.8718C7.99387 4.67477 12.0714 2.48469 16.1365 0.275354C17.3081 -0.361458 18.4095 0.207985 18.8065 0.956547C19.06 1.43402 19.0486 1.91257 18.8575 2.40822C18.0341 4.54163 17.2191 6.67824 16.4008 8.81325C16.2709 9.15117 16.1314 9.48642 16.0157 9.82862C15.9811 9.93182 15.9794 10.066 16.018 10.1676C16.9633 12.6491 17.9059 15.1317 18.8717 17.6062C19.3707 18.8857 18.3221 20.0037 17.2985 20Z" fill="%23737373"/></svg>');
}

.products-list-slider a {
    text-decoration: none;
    color: #404040;
}

.products-list-slider a:hover {
    color: #000000;
}

.products-list-slider .product-title {
    font-size: 16px;
    font-weight: 600;
    color: #404040;
    text-align: center;
    padding: 8px 0;
    margin-bottom: 0;
}

.slider-progress-bar {
    width: 168px;
    height: 4px;
    background: #d9d9d9;
    margin: 10px auto;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

.slider-progress {
    height: 100%;
    width: 0;
    background: #848484;
    transition: width 0.3s;
}

/* Tab Content */
.model-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #404040;
    font-weight: 600;
}

.model-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* Space between boxes */
    justify-content: center;
    /* Center the boxes */
}

.model-box {
    width: 16px;
    /* Width of each box */
    height: 16px;
    /* Height of each box */
    border-radius: 100%;
    /* Rounded corners */
}

#brandTabsContent .card {
    border: none;
}

#brandTabsContent .modal-image {
    border: 1px solid #c4c4c4;
    border-radius: 20px;
}

.family-row {
    /*display: flex;
  justify-content: start;*/
    gap: 25px;
    /* Space between items */
    flex-wrap: wrap;
    /* Allow wrapping to next line */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.family-row .family-item {
    width: 100%;
    /* Ensure full width of grid cell */
    min-width: 0;
    /* Prevent overflow */
    max-width: 100%;
    /* Prevent overflow */
    box-sizing: border-box;
}

.family-row .family-item .model-image-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    /* Hide overflow for zoom effect */
    border-radius: 20px;
    border: 1px solid #c4c4c4;
    margin-bottom: 10px;
    /* Space between image and text */
}

/*.family-row .family-item {
  flex: 0 1 auto; 
  width: 23.4%; 
}*/
.family-row .family-item img {
    width: 100%;
    height: auto;
    border-radius: 20px;

    transition: transform 0.3s ease-in-out;
    /* Smooth transition for zoom effect */
}

.family-row .family-item a {
    text-decoration: none;
    color: #404040;
    font-weight: 600;
}

.family-row .family-item p {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {

    /*.family-row .family-item {
    width: 47%; 
  }*/
    .family-row {
        grid-template-columns: repeat(2, 1fr);
        /* Two columns on smaller screens */
    }
}

/* Products Tab on Home Page end */
.brand img {
    width: 216px;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.tabrow {
    text-align: center;
    list-style: none;
    margin: 20px 0 0px;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    font-family: verdana;
    position: relative;
}

.nav-tabs {
    border: none;
}

.tabrow li.nav-item {
    border: 2px solid #fff;
    background: #fff;
    display: inline-block;
    position: relative;
    z-index: 0;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin: 0 1px;
    padding: 15px;
}

.tabrow li.nav-item:focus,
.tabrow li.nav-item:hover {
    border-color: none;
}

.tabrow a {
    color: #555;
    text-decoration: none;
}

.tabrow li.selected {
    background: #fff;
    color: #333;
    z-index: 2;
    border-color: var(--brand-border-color, #abc7c9);
    /*border-color: #abc7c9;*/
    border-bottom-color: #fff;
    border-bottom-width: 2px;
}

.tabrow li button.nav-link {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.tabrow li button.nav-link.active img {
    border-radius: 23px;
}

.tabrow li button.nav-link img {
    border-radius: 25px;
}

.tabrow .nav-link.active {
    position: relative;
    z-index: 2;
    border: none;
}

.tabrow:before {
    position: absolute;
    content: " ";
    width: 83%;
    bottom: 0;
    left: 10%;
    right: 10%;
    border-bottom: 2px solid var(--brand-border-color, #abc7c9);
    z-index: 1;
}

.tabrow li.selected:before,
.tabrow li.selected:after {
    border: 1px solid var(--brand-border-color, #abc7c9);
    position: absolute;
    bottom: -2px;
    width: 25px;
    height: 25px;
    content: " ";
    z-index: 0;
}

.tabrow li.selected:before {
    left: -25px;
    border-bottom-right-radius: 26px;
    border-width: 0 2px 2px 0;
    box-shadow: 8px 6px 1px 4px #fff;
}

.tabrow li.selected:after {
    right: -25px;
    border-bottom-left-radius: 26px;
    border-width: 0 0 2px 2px;
    box-shadow: -2px 2px 0 #d1d1d1;
}

.tabrow li.selected:after {
    box-shadow: -14px 13px 0px 13px #fff;
}

#brandTabsContent {
    min-height: 100px;
    border: 2px solid var(--brand-border-color, #abc7c9);
    border-radius: 30px;
    margin-top: -3px;
}

.nav-item.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

#brandTabsContent .card a {
    text-decoration: none;
}

.tab-content>.tab-pane {
    padding: 25px;
}

@media screen and (max-width: 1550px) {
    #brandTabsContent {
        margin-top: -2px;
    }
}

@media screen and (max-width: 768px) {
    .tabrow li button.nav-link {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .tabrow li button.nav-link img {
        border-radius: 15px;
    }

    .tabrow li button.nav-link.active img {
        border-radius: 13px;
    }

    .tab-content>.tab-pane {
        padding: 15px;
    }

    .family-row .family-item img {
        margin-bottom: 5px;
        /* Reduce space between image and text on smaller screens */
    }

    .family-row {
        gap: 15px;
        /* Reduce space between items on smaller screens */
    }

    .family-row .family-item p {
        font-size: 14px;
        /* Adjust font size for smaller screens */
    }
}

/*.tab-content {
  display: flex;
}

.tab-content > .tab-pane {
  display: block; 
  visibility: hidden;
  margin-right: -100%;
  width: 100%;
}

.tab-content > .active {
  visibility: visible;
}
*/
.creativeaccessories {
    padding: 40px 0 0 0;
}

.row-creativeaccessories {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    gap: 0px;
    /* Space between items */
    overflow-x: auto;
    /* Enable horizontal scrolling */
}

.row-creativeaccessories>div>div.card {
    margin-right: 20px;
}

.row-creativeaccessories>div {
    min-width: 150px;
}

.row-creativeaccessories>div>div.card {
    margin-right: 20px;
}

.row-creativeaccessories>div:last-child>div.card {
    margin-right: 0px;
}

.model-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.products-tab,
.block-action {
    padding: 40px 0;
}

.products-tab .nav-tabs .nav-item.show .nav-link,
.products-tab .nav-tabs .nav-link.active {
    border: none;
}

.products-tab h2 {
    text-transform: uppercase;
}

/* end of Products Tab on Home Page */
/* Creative accessories tab */

.creativeaccessories .card {
    border-radius: 30px;
    background: #c4c4c4;
    border: 1px solid #c4c4c4;
}

/*
.creativeaccessories .card:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.3);
}*/
.creativeaccessories .card img {
    border-radius: 30px;
}

.creativeaccessories .card-body p {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 600;
    color: #646464;
    text-align: center;
}

.creativeaccessories .card-body {
    padding: 12px;
    justify-content: center;
}

.creativeaccessories a {
    color: #646464;
    text-decoration: none;
}

/* end of Creative Accessories Tab */
/* Features Product sliders */
.gallery-slider {
    margin: 0 auto;
    width: 720px;
    max-width: 100%;
    padding: 0 20px;
    position: relative;
}

.gallery-slider .slick-next,
.product-categories .slick-next {
    right: 0;
}

.gallery-slider .slick-next:before,
.gallery-slider .slick-prev:before {
    content: "";
    width: 39px;
    height: 49px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}

.gallery-slider .slick-next:before {
    background-image: url('data:image/svg+xml,<svg width="39" height="49" viewBox="0 0 39 49" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.9213 38.7142C12.7433 38.4041 14.522 38.1383 16.2572 37.7839C21.8534 36.5877 27.1894 34.7269 31.918 31.3155C34.7378 29.2775 37.0804 26.7522 38.2517 23.3851C39.8568 18.8218 38.859 14.6573 35.9524 10.9358C33.3496 7.61297 29.879 5.48638 26.1482 3.75853C22.1137 1.89778 17.8623 0.790181 13.4808 0.0370163C11.8323 -0.228806 10.1838 0.967396 9.88014 2.65094C9.53309 4.42309 10.5742 6.10664 12.2661 6.50537C14.1315 6.94841 15.9969 7.25853 17.819 7.74588C21.5064 8.72056 25.0203 10.094 28.1004 12.4421C29.3584 13.4168 30.5298 14.613 31.4408 15.8978C32.9591 18.0244 32.8724 20.2839 31.4408 22.499C30.0526 24.6256 28.1004 26.0876 25.9313 27.2838C21.6799 29.6763 17.0815 30.9611 12.3095 31.7142C12.2227 31.7142 12.0926 31.7142 11.8757 31.7142C12.0492 31.4927 12.136 31.3598 12.2661 31.2269C13.2205 30.2522 14.2183 29.2775 15.1727 28.2585C16.5175 26.8408 16.5609 24.8028 15.3028 23.4737C14.0014 22.1446 12.0058 22.1889 10.6176 23.5623C7.45077 26.7965 4.24054 30.0307 1.07368 33.3092C-0.357906 34.7712 -0.357906 36.7206 1.07368 38.2269C4.24054 41.4611 7.40739 44.7395 10.6176 47.9737C12.0058 49.3914 14.0014 49.3914 15.3028 48.1066C16.6043 46.7775 16.5609 44.6952 15.1293 43.2332C13.7411 41.8155 12.3529 40.3535 10.9647 38.9357C10.9647 38.9357 10.9647 38.8471 10.8779 38.7142H10.9213Z" fill="%23C4C4C4"/></svg>');
}

.gallery-slider .slick-prev:before {
    background-image: url('data:image/svg+xml,<svg width="39" height="49" viewBox="0 0 39 49" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_705_584)"><path d="M28.0944 38.7142C26.2724 38.4041 24.4938 38.1383 22.7585 37.7839C17.1623 36.5877 11.8264 34.7269 7.09779 31.3155C4.27799 29.2775 1.93538 26.7522 0.764082 23.3851C-0.841035 18.8218 0.15674 14.6573 3.0633 10.9358C5.6662 7.61297 9.13672 5.48638 12.8675 3.75853C16.902 1.89778 21.1534 0.790181 25.5349 0.0370163C27.1834 -0.228806 28.8319 0.967396 29.1356 2.65094C29.4827 4.42309 28.4415 6.10664 26.7496 6.50537C24.8842 6.94841 23.0188 7.25853 21.1968 7.74588C17.5094 8.72056 13.9955 10.094 10.9154 12.4421C9.6573 13.4168 8.486 14.613 7.57498 15.8978C6.05663 18.0244 6.14339 20.2839 7.57498 22.499C8.96319 24.6256 10.9154 26.0876 13.0844 27.2838C17.3358 29.6763 21.9343 30.9611 26.7062 31.7142C26.793 31.7142 26.9231 31.7142 27.1401 31.7142C26.9665 31.4927 26.8798 31.3598 26.7496 31.2269C25.7952 30.2522 24.7975 29.2775 23.8431 28.2585C22.4982 26.8408 22.4548 24.8028 23.7129 23.4737C25.0144 22.1446 27.0099 22.1889 28.3981 23.5623C31.565 26.7965 34.7752 30.0307 37.9421 33.3092C39.3737 34.7712 39.3737 36.7206 37.9421 38.2269C34.7752 41.4611 31.6084 44.7395 28.3981 47.9737C27.0099 49.3914 25.0144 49.3914 23.7129 48.1066C22.4115 46.7775 22.4549 44.6952 23.8864 43.2332C25.2747 41.8155 26.6629 40.3535 28.0511 38.9357C28.0511 38.9357 28.0511 38.8471 28.1378 38.7142H28.0944Z" fill="%23C4C4C4"/></g><defs><clipPath id="clip0_705_584"><rect width="39" height="49" fill="white"/></clipPath></defs></svg>');
}

.gallery-slider .image-overlay {
    display: flex;
    justify-content: center;
    background-image: url("../images/buc.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
}

.gallery-slider .image-overlay img {
    padding-bottom: 45px;
}

.btn-cta-primary:hover {
    background-color: var(--button-color);
    color: var(--button-text-color);
}

.btn-cta-primary {
    background-color: var(--button-hover-color);
    color: var(--button_hover_text_color);
    border-radius: 20px;
    font-weight: 600;
    padding: 10px 20px;
}

.products-tab .btn-cta-primary {
    background: #404040;
    color: #fff;
    border-radius: 20px;
    padding: 8px 20px;
}

.btn-cta-unavailable {
    background-color: #c4c4c4;
    color: #fff;
    border-radius: 20px;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
}

.wrap-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    column-gap: 20px;
    flex-direction: row;
}

.brand .color-box {
    width: 26px;
    height: 26px;
    border-radius: 100%;
    display: inline-block;
}

.brand button {
    border: none;
    padding: 0;
}

.products-tab.products-tab-featured .nav-tabs {
    column-gap: 6px;
    row-gap: 6px;
}

.products-tab.products-tab-featured .nav-tabs .nav-link.active,
.products-tab.products-tab-featured .nav-tabs .nav-link:hover {
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);
    border-color: transparent;
}

.products-tab.products-tab-featured .nav-tabs .nav-link {
    height: 38px;
    width: 38px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.products-tab .nav-tabs {
    column-gap: 0px;
    row-gap: 0px;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-left: 0px;
}

.wp-block-latest-posts {
    padding-left: 15px;
    padding-right: 15px;
}

@media screen and (min-width: 1550px) {

    /*.tabrow:before {
    width: calc(100% - 60px);
    left: 40px;
    right: 40px;
  }*/
    #brandTabsContent {
        margin-top: -1px;
    }
}

@media screen and (min-width: 1700px) {
    #brandTabsContent {
        margin-top: -2px;
    }
}

@media screen and (min-width: 2100px) {
    #brandTabsContent {
        margin-top: -1px;
    }
}

@media screen and (min-width: 2500px) {
    #brandTabsContent {
        margin-top: -2px;
    }
}

@media screen and (max-width: 1366px) {
    .tabrow:before {
        width: calc(100% - 60px);
        left: 40px;
        right: 40px;
    }

    .tabrow li.nav-item {
        padding: 10px 15px;
    }

    .brand img {
        border-radius: 15px;
    }
}

@media screen and (max-width: 768px) {
    .creativeaccessories .card {
        border-radius: 15px;
    }

    .products-list-slider .slick-next:before,
    .products-list-slider .slick-prev:before {
        display: none;
    }

    .products-list-slider {
        padding: 0 0px 20px 0px;
    }

    .gallery-slider .slick-prev:before,
    .gallery-slider .slick-next:before {
        width: 19px;
        height: 24px;
    }

    .wrap-cta {
        column-gap: 10px;
    }

    .brand .color-box {
        width: 16px;
        height: 16px;
    }

    .row-creativeaccessories>div>div.card {
        margin-right: 10px;
    }

    .gallery-slider .image-overlay img {
        padding-bottom: 10px;
    }

    .wp-block-latest-posts li {
        flex: 0 1 auto !important;
        width: 46%;
    }

    .wp-block-latest-posts {
        flex-wrap: wrap;
    }

    .tabrow:before {
        width: calc(100% - 26px);
        left: 15px;
        right: 0;
    }

    .tabrow li.selected:before {
        box-shadow: 6px 6px 1px 4px #fff;
    }

    .brand img {
        border-radius: 0px;
    }

    .products-tab .nav-tabs {
        padding-left: 25px;
    }

    .tabrow li.nav-item {
        padding: 4px;
    }

    .tabrow li.nav-item {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    #brandTabsContent {
        border-radius: 15px;
    }

    .tabrow li:first-child.selected:before {
        border-bottom-right-radius: 15px;
    }

    .tabrow li.selected:before {
        border-bottom-right-radius: 15px;
        left: -15px;
    }

    .tabrow li.selected:after {
        border-bottom-left-radius: 15px;
        right: -15px;
    }

    .tabrow li.selected:before,
    .tabrow li.selected:after {
        width: 15px;
        height: 15px;
    }
}

/* Features Product sliders end */
/* Block action */
.row-action {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    column-gap: 30px;
    flex-direction: row;
}

.row-action .action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 15px;
    width: 168px;
    max-width: 100%;
    text-align: center;
    font-size: 14px;
    position: relative;
    color: #646464;
}

.row-action .action a.action-hyperlink {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.row-action .action p {
    margin-bottom: 0;
}

.row-action .action .action-title {
    text-transform: uppercase;
    font-weight: 900;
}

@media (max-width: 768px) {
    .row-action {
        flex-direction: column;
        row-gap: 20px;
    }

    .row-action .action {
        width: 100%;
    }
}

/* Block action end */
/* List Posts */
.wp-block-latest-posts {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.wp-block-latest-posts li {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.wp-block-latest-posts .wp-block-latest-posts__featured-image {
    margin-bottom: 0 !important;
}

.wp-block-latest-posts .wp-block-latest-posts__featured-image:hover img,
.family-row .family-item:hover img {
    cursor: pointer;
    transform: scale(1.1);
    /* Zoom in effect on hover */
    transition: transform 0.3s ease-in-out;
}

.wp-block-latest-posts__featured-image {
    overflow: hidden;
    border-radius: 8px;
}

.wp-block-latest-posts li img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 0;
}

.wp-block-latest-posts li a {
    color: #646464;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    width: 90%;
    margin: 0 auto;
}

/* CTA banner */
.cta-banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    position: relative;
    margin: 80px 0;
}

.cta-banner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg width="671" height="397" viewBox="0 0 671 397" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M671 0H0V397H502L671 0Z" fill="%23404040" fill-opacity="0.66"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    z-index: 1;
}

.cta-banner .cta-description {
    font-size: 14px;
    text-align: center;
    color: #fff;
    padding: 10% 0;
    width: 30%;
    text-align: left;
    z-index: 2;
    position: relative;
    font-size: 18px;
}

.cta-banner .cta-description h2 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px 0;
    line-height: 1.2;
    text-align: left;
    font-size: 64px;
}

.cta-banner .cta-description p:last-child {
    margin-bottom: 0;
}

.cta-banner .cta-button {
    margin-top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: #646464;
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid #646464;
    font-weight: 700;
    display: inline-block;
    text-decoration: none;
}

.cta-banner .cta-button:hover {
    background-color: #646464;
    color: white;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .cta-banner {
        margin: 40px 0;
    }

    .wp-block-latest-posts li a {
        font-size: 10px;
    }

    .wp-block-latest-posts {
        margin-bottom: 0px;
        margin-top: 30px;
    }

    .cta-banner .cta-description {
        font-size: 8px;
        width: 50%;
    }

    .cta-banner .cta-description h2 {
        font-size: 24px;
    }

    .cta-banner:before {
        width: 75%;
    }

    .cta-banner .cta-button {
        padding: 8px 16px;
        font-size: 14px;
    }

    .cta-banner .cta-description h2 {
        margin-bottom: 10px;
    }

    .cta-banner .cta-description {
        padding: 20px 0;
    }
}

/* footer */

.social-icon:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
}

footer {
    padding-top: 30px;
}

.partners {
    padding-top: 30px;
}

.partners .title {
    text-transform: uppercase;
    text-align: center;
}

.partners-slider {
    width: 935px;
    display: flex;
    gap: 15px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 auto;
}

.wrap-logo-partners {
    overflow-x: auto;
}

.partners-slider>div {
    flex: 0 1 auto;
    width: 150px;
    /* Set a fixed width for each item */
}

.partners-slider>div>img {
    width: 100%;
    height: auto;
}

.partners-slider:hover {
    cursor: pointer;
}

.partners-slider .slick-slide img {
    padding: 0 10px;
}

.footer-content {
    background: #f7f9f9;
    padding: 100px 0 30px 0;
    margin-top: 50px;
}

.footer-content li a {
    color: #646464;
    text-decoration: none;
}

.footer-content li a:hover {
    color: #000;
}

.footer-content p {
    margin-bottom: 16px;
}

.footer-content .company-information p {
    margin-bottom: 10px;
    color: #646464;
    font-size: 16px;
}

.footer-content p a {
    color: #000;
    text-decoration: none;
}

.footer-content p a:hover {
    text-decoration: underline;
}

.footer-content p strong {
    color: #000;
    font-weight: 700;
}

.footer-content .navigation-column p strong {
    margin-top: 0px;
    display: inline-block;
}

.footer-content ul {
    list-style: none;
    padding: 0;
}

.footer-content ul li {
    margin-bottom: 10px;
}

.footer-content .widget-area {
    margin-bottom: 35px;
}

.fixed-bottom {
    position: fixed;
    bottom: 30px;
    width: 50px;
    left: auto;
    top: auto;
    right: 10px;
    z-index: 1000;
}

.back-to-top {
    cursor: pointer;
    background-image: url('data:image/svg+xml,<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_950_1267)"><path d="M79.0001 39.4736C79.0001 61.2685 61.2687 79 39.4737 79C17.6788 79 -0.0526547 61.2158 0.00011749 39.4736C0.0528897 17.6787 17.6788 0 39.4737 0C61.2159 0 79.0001 17.6787 79.0001 39.4736ZM43.4316 32.2966C43.8538 32.7188 44.1177 32.9299 44.3815 33.1937C47.0729 35.8851 49.7115 38.5765 52.4557 41.2151C54.461 43.1677 57.4691 42.7455 58.7884 40.4763C59.6855 38.8403 59.4216 37.0461 57.944 35.5685C52.8251 30.4496 47.759 25.3307 42.6401 20.2645C40.6347 18.2592 38.4183 18.312 36.4129 20.2645C32.93 23.7475 29.447 27.2305 25.964 30.7134C24.3281 32.3494 22.6394 33.9853 21.0035 35.674C19.2092 37.521 19.5258 40.4235 21.6367 41.7428C23.2199 42.7455 25.1725 42.5344 26.6501 41.1096C29.3942 38.4182 32.0856 35.7268 34.777 32.9826C34.9881 32.7715 35.252 32.5605 35.6214 32.191V33.4576C35.6214 40.7929 35.6214 48.0755 35.6214 55.4108C35.6214 55.7275 35.6214 56.0969 35.6214 56.4135C35.7269 58.5244 37.4156 60.1603 39.5265 60.1603C41.7957 60.1603 43.4316 58.4188 43.4316 55.9385C43.4316 48.4449 43.4316 40.9512 43.4316 33.4576C43.4316 33.1409 43.4316 32.8243 43.4316 32.191V32.2966Z" fill="%23D2D2D2"/></g><defs><clipPath id="clip0_950_1267"><rect width="79" height="79" fill="white"/></clipPath></defs></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 45px;
    height: 45px;
    display: none;
    background-color: #fff;
    border-radius: 100%;
}

.back-to-top:hover {
    background-image: url('data:image/svg+xml,<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_950_1269)"><path d="M79.0001 39.4736C79.0001 61.2685 61.2687 79 39.4737 79C17.6788 79 -0.0526547 61.2158 0.00011749 39.4736C0.0528897 17.6787 17.6788 0 39.4737 0C61.2159 0 79.0001 17.6787 79.0001 39.4736ZM43.4316 32.2966C43.8538 32.7188 44.1177 32.9299 44.3815 33.1937C47.0729 35.8851 49.7115 38.5765 52.4557 41.2151C54.461 43.1677 57.4691 42.7455 58.7884 40.4763C59.6855 38.8403 59.4216 37.0461 57.944 35.5685C52.8251 30.4496 47.759 25.3307 42.6401 20.2645C40.6347 18.2592 38.4183 18.312 36.4129 20.2645C32.93 23.7475 29.447 27.2305 25.964 30.7134C24.3281 32.3494 22.6394 33.9853 21.0035 35.674C19.2092 37.521 19.5258 40.4235 21.6367 41.7428C23.2199 42.7455 25.1725 42.5344 26.6501 41.1096C29.3942 38.4182 32.0856 35.7268 34.777 32.9826C34.9881 32.7715 35.252 32.5605 35.6214 32.191V33.4576C35.6214 40.7929 35.6214 48.0755 35.6214 55.4108C35.6214 55.7275 35.6214 56.0969 35.6214 56.4135C35.7269 58.5244 37.4156 60.1603 39.5265 60.1603C41.7957 60.1603 43.4316 58.4188 43.4316 55.9385C43.4316 48.4449 43.4316 40.9512 43.4316 33.4576C43.4316 33.1409 43.4316 32.8243 43.4316 32.191V32.2966Z" fill="%23404040"/></g><defs><clipPath id="clip0_950_1269"><rect width="79" height="79" fill="white"/></clipPath></defs></svg>');
}

.wrap-socia a {
    position: relative;
    margin-top: 10px;
}

.wrap-social img {
    animation: ani-circle-fill 2s infinite ease-out;
}

.wrap-social .ani {
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: red; */
    border-radius: 50%;
    /* opacity: 0.6; */
    z-index: -1;

    left: 0;
    top: 0;
}

.wrap-social .ani:before {
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    content: "";
    border-radius: 50%;
    background: red;
    animation: pulse-ripple 2s .5s infinite ease-out;
}

.wrap-social .ani:after {
    position: absolute;
    left: -5%;
    top: -5%;
    width: 110%;
    height: 110%;
    content: "";
    border-radius: 50%;
    background: red;
    animation: pulse-ripple2 2s infinite ease-out;
}

@keyframes pulse-ripple {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes pulse-ripple2 {
    0% {
        transform: scale(1);
        opacity: 0.2;
    }

    100% {
        transform: scale(1.4);
        opacity: .4;
    }
}

@-webkit-keyframes ani-circle-fill {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
}

.wrap-social>* {
    display: block;
    position: relative;
    margin-top: 12px;
    width: 45px;
    height: 45px;
    border-radius: 50%;

}

.wrap-social>*:nth-child(1) {
    background: red;
}

.wrap-social>*:nth-child(2) {
    background: #2196f3;
    ;
}

.wrap-social>*:nth-child(2) .ani:before,
.wrap-social>*:nth-child(2) .ani:after {
    background: #2196f3;
}

.wrap-social>*:nth-child(3) {
    background: #008bfa;
}

.wrap-social>*:nth-child(3) .ani:before,
.wrap-social>*:nth-child(3) .ani:after {
    background: #2196f3;
}

.wrap-social>*:nth-child(4) {
    background: #008bfa;
}

.wrap-social>*:nth-child(4) .ani:before,
.wrap-social>*:nth-child(4) .ani:after {
    background: #2196f3;
}

.wrap-social>*:hover:after,
.wrap-social>*:hover:before {
    display: block;
}

.wrap-social>*:before {
    content: attr(title);
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    line-height: 1.4;
    white-space: nowrap;
    transform: translateY(-50%);
    background: black;
    padding: 2px 10px;
    color: white;
    font-size: 14px;
    border-radius: 4px;
    display: none;
}

.wrap-social>*:after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 5px);
    transform: translateY(-50%);
    width: 5px;
    height: 10px;
    background: black;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    display: none;
}

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

.wrap-social button.social-hyperlink {
    line-height: 0;
    /* border: 1px solid white !important; */
}

.wrap-social button.social-hyperlink img {
    filter: brightness(8.5);
}

.wrap-social .social-hyperlink img {
    width: 30px;
    height: 30px;
    margin-top: 0;
}

@media (max-width: 768px) {
    footer {
        padding-top: 10px;
    }

    .footer-content .company-information {
        width: 80%;
    }

    .footer-content {
        padding: 40px 0;
        margin-top: 20px;
        font-size: 14px;
    }

    .footer-content p {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .footer-content li {
        margin-bottom: 6px;
    }

    .footer-content .widget-area {
        margin-bottom: 20px;
    }
}

/* end of footer */
/* Family products */
#catTabList {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    column-gap: 20px;
    padding: 10px 0;
}

#catTabList .nav-item {
    flex: 0 0 auto;
    text-align: center;
}

#catTabList .nav-link {
    border: 1px solid #000;
    border-radius: 50px;
    background: #fff;
    color: black;
    text-align: center;
    font-weight: 700;
    padding: 12px 25px;
}

#catTabList .nav-link.active,
#catTabList .nav-link:hover {
    border: 1px solid #000;
    background-color: #000;
    color: #fff;
    border-radius: 50px;
}

@media screen and (max-width: 768px) {

    .footer-content p,
    .footer-content li,
    .footer-content a {
        font-size: 12px !important;
    }

    #catTabList .nav-link {
        padding: 8px 16px;
    }

    #catTabList {
        column-gap: 15px;
    }

    .slide-content .btn-primary,
    .btn-cta-primary,
    .btn-cta-unavailable {
        font-size: 12px;
        padding: 8px 16px;
    }

    .products-tab .btn-cta-primary {
        padding: 6px 12px;
        font-size: 10px;
    }

    #catTabList .nav-link,
    .creativeaccessories .card-body p {
        font-size: 12px;
    }

    .creativeaccessories .card-body p {
        text-align: center;
    }

    #catTabList {
        padding: 15px 0;
    }

    .creativeaccessories .card img {
        border-radius: 15px;
    }
}

@media screen and (max-width: 480px) {

    .slide-content .btn-primary,
    .btn-cta-primary,
    .btn-cta-unavailable,
    #catTabList .nav-link {
        font-size: 10px;
    }
}

/* Family products end */
/* Products Page */
.product-main {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding-top: 80px;
}

.product-main .product-info {
    color: rgba(0, 0, 0, 0.8);
}

.product-main .product-images {
    flex: 0 1 auto;
    width: 58%;
}

.product-main .product-info h1,
.product-main .product-info .price {
    color: #000;
    font-weight: 700;
}

.product-main .product-info .price {
    font-size: 40px;
}

.product-main .product-info h1 {
    font-size: 24px;
}

.product-main .product-info .color_name,
.product-main .product-info .capacity {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
}

.list_color-options,
.capacity-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-direction: row;
    margin-bottom: 20px;
}

.list_color-options .color_option.selected,
.list_color-options .color_option:hover {
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.list_color-options .color_option {
    width: 53px;
    height: 53px;
    border-radius: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.list_color-options .color_option span {
    width: 37px;
    height: 37px;
    border-radius: 100%;
    border: 1px solid lightgray;
}

.capacity-list {
    padding-left: 0;
    list-style: none;
}

.capacity-list li {
    flex: 0 1 auto;
    padding: 6px 12px;
    border-radius: 30px;
    background-color: #e5e5e5;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 700;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    width: 168px;
    max-width: 50%;
    text-align: center;
}

.product-main .product-info {
    flex: 0 1 auto;
    width: 39%;
}

.product-images img {
    border-radius: 25px;
    border: 1px solid #c4c4c4;
    width: 98%;
    height: auto;
}

.product-thumbnails-slider .slick-next:before,
.product-thumbnails-slider .slick-prev:before {
    content: "";
    width: 19px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}

.product-thumbnails-slider .slick-next {
    right: 0;
}

.product-thumbnails-slider .slick-next:before {
    right: 0;
    background-image: url('data:image/svg+xml,<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.70156 20C2.22387 20 2.56017 19.8733 2.88456 19.6984C5.26927 18.4093 7.65568 17.1234 10.0415 15.8358C12.6848 14.4098 15.327 12.9811 17.9732 11.5589C18.4938 11.2787 18.8539 10.8927 18.9645 10.3302C19.1165 9.55754 18.7762 8.87367 18.0401 8.47159C17.0556 7.93369 16.066 7.40435 15.0786 6.8718C11.0062 4.67477 6.92864 2.48469 2.86358 0.275355C1.69192 -0.361458 0.590585 0.207985 0.193606 0.956547C-0.0598942 1.43402 -0.048552 1.91257 0.142565 2.40822C0.966013 4.54163 1.78096 6.67824 2.5993 8.81325C2.72917 9.15118 2.86868 9.48642 2.98437 9.82862C3.01896 9.93182 3.02066 10.066 2.9821 10.1676C2.03672 12.6491 1.09418 15.1317 0.128385 17.6062C-0.370675 18.8857 0.677917 20.0037 1.70156 20Z" fill="%23C4C4C4"/></svg>');
}

.product-thumbnails-slider .slick-prev:before {
    left: 0;
    background-image: url('data:image/svg+xml,<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.2985 9.22168e-06C16.7762 9.17602e-06 16.4399 0.12673 16.1155 0.301573C13.7308 1.59071 11.3444 2.87663 8.95853 4.16416C6.31522 5.59017 3.67304 7.01885 1.02689 8.44112C0.506274 8.7213 0.146159 9.10735 0.0355712 9.66984C-0.116414 10.4425 0.223853 11.1263 0.959966 11.5284C1.94447 12.0663 2.93409 12.5956 3.92143 13.1282C7.99387 15.3252 12.0714 17.5153 16.1365 19.7246C17.3081 20.3615 18.4095 19.792 18.8065 19.0435C19.06 18.566 19.0486 18.0874 18.8575 17.5918C18.034 15.4584 17.2191 13.3218 16.4008 11.1867C16.2709 10.8488 16.1314 10.5136 16.0157 10.1714C15.9811 10.0682 15.9794 9.93397 16.018 9.83238C16.9633 7.3509 17.9059 4.86834 18.8717 2.39381C19.3707 1.1143 18.3221 -0.0037335 17.2985 9.22168e-06Z" fill="%23C4C4C4"/></svg>');
}

.product-thumbnails-slider .slick-prev {
    left: 0;
}

.product-thumbnails-slider .slick-slide {
    padding: 0 10px;
}

.product-images-slider {
    padding-bottom: 20px;
}

.product-thumbnails-slider {
    padding: 0 30px;
}

.product-info .accordion-button {
    font-size: 16px;
    font-weight: 600;
    border-radius: 0;
}

.product-featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
    gap: 20px;
    padding: 50px 0;
}

.product-featuredbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
    margin-top: 30px;
}

.product-featuredbox.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.product-featuredbox__image {
    position: relative;
    border-radius: 30px;
    border: 1px solid #c4c4c4;
    overflow: hidden;
    margin-bottom: 10px;
}

.product-featuredbox__image:before {
    content: "";
    padding-top: calc((5 / 4) * 100%);
    display: block;
}

.product-featuredbox__image img {
    position: absolute;
    left: 0;
    top;
    0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s;
}

.product-featuredbox__image:hover img {
    transform: scale(1.09);
}

.product-featured.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.product-featured.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.feature-item p {
    text-align: center;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
    padding: 10px 0;
    width: 90%;
    margin: 0 auto;
}

.feature-item .wrap-image {
    border-radius: 30px;
    border: 1px solid #c4c4c4;
    overflow: hidden;
}

.feature-item .wrap-image:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.product-banner-cta img {
    width: 100%;
    height: auto;
}

.product-banner-cta .container {
    position: relative;
}

.product-banner-cta__wbtn {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-banner-cta .product-banner-cta__wbtn .button-cta {
    position: relative;
    display: inline-block;
    inset: auto;
}

.product-banner-cta .button-cta {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    width: fit-content;
    text-transform: uppercase;
    font-weight: 700;
    background: #fff;
    border-radius: 30px;
    color: #000;
    text-transform: uppercase;
    padding: 10px 20px;
}

.product-banner-cta .button-cta:hover {
    background: #000;
    color: #fff;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    color: rgba(0, 0, 0, 0.8);
    background-color: transparent;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-item {
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    border-radius: 0 !important;
}

.accordion-button:focus,
.accordion-button {
    border: none;
}

.accordion-button,
.accordion-body {
    padding: 10px 0;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M128 469.34016l768 0q17.67424 0 30.16704 12.4928t12.4928 30.16704-12.4928 30.16704-30.16704 12.4928l-768 0q-17.67424 0-30.16704-12.4928t-12.4928-30.16704 12.4928-30.16704 30.16704-12.4928z" /></svg>');
}

.accordion-button::after {
    background-image: url('data:image/svg+xml,<svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 6.39437C10.9773 6.32768 10.9622 6.2577 10.9301 6.19476C10.7678 5.87562 10.4878 5.71076 10.0985 5.70959C9.06647 5.70677 8.03447 5.70865 7.00273 5.70865C6.96438 5.70865 6.92628 5.70865 6.87879 5.70865C6.87879 5.66591 6.87879 5.63162 6.87879 5.59733C6.87879 4.66574 6.8801 3.7339 6.87801 2.8023C6.87722 2.35775 6.49704 2.00667 6.01692 2.0001C5.52036 1.99329 5.12348 2.34343 5.12165 2.79784C5.11878 3.59464 5.12087 4.39168 5.12061 5.18848C5.12061 5.35804 5.12061 5.52759 5.12061 5.70888C5.07703 5.70888 5.03946 5.70888 5.00188 5.70888C3.96675 5.70888 2.93162 5.70771 1.89623 5.70935C1.4075 5.71006 1.01871 6.03953 1.0007 6.46248C0.981135 6.91782 1.37097 7.28769 1.88162 7.29004C2.5457 7.29333 3.20978 7.29098 3.87386 7.29098C4.25143 7.29098 4.62901 7.29098 5.00684 7.29098H5.12087V7.40253C5.12087 8.31064 5.12087 9.21899 5.12087 10.1271C5.12087 10.6024 5.35623 10.8753 5.86584 10.9911C5.87184 10.9925 5.87706 10.9969 5.88254 11H6.11686C6.12234 10.9969 6.12756 10.9927 6.13356 10.9913C6.64734 10.8706 6.87853 10.6024 6.87853 10.1271C6.87853 9.21899 6.87853 8.31064 6.87853 7.40253V7.29098H7.00247C8.03447 7.29098 9.06621 7.29169 10.0982 7.29051C10.5434 7.29004 10.8821 7.04393 10.982 6.65457C10.9862 6.6379 10.9937 6.6217 11 6.60526C11 6.53504 11 6.46459 11 6.39437Z" fill="black"/></svg>');
}

.product-specifications {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 50px 0;
}

.product-specifications .specifications-images,
.product-specifications .specifications-info {
    flex: 0 1 auto;
    width: 50%;
}

.specifications-images img {
    border-radius: 20px;
    border: 2px solid #e5e5e5;
}

.specification-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0px;
}

.specifications-title {
    text-align: center;
}

.specifications-title span {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    font-weight: 700;
    border-radius: 30px;
    margin: 20px 0;
    text-transform: uppercase;
}

.specification-info .specification_icon {
    flex: 0 1 auto;
    width: 60px;
    min-width: 40px;
    z-index: 1;
}

.specification-info .specification_content {
    flex: 0 1 auto;
    width: calc(100% - 60px);
    z-index: 0;
    position: relative;
}

.specification-info .specification_content .description {
    display: none;
    position: relative;
}

.specification-info.selected .specification_content .description:after {
    content: "";
    position: absolute;
    width: 1px;
    top: 20px;
    height: calc(100% - 20px);
    background-color: #000;
    bottom: 0;
    left: 0;
}

.specification-info .specification_content .title {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 700;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 0px;
    /*border-top: 1px solid #000;*/
    padding-top: 10px;
    padding-left: 20px;
    margin-bottom: 0px;
    position: relative;
    /*border-left: 1px solid #000;*/
    cursor: pointer;
}

.specification-info.selected .specification_content .title,
.specification-info:last-child .specification_content .title,
.specification-info:first-child .specification_content .title {
    border-left: none;
}

.specification-info .specification_content .title:before {
    content: "";
    position: absolute;
    width: calc(100% - 20px);
    bottom: 0;
    left: 20px;
    height: 1px;
    background-color: #000;
}

.specification-info:first-child .specification_content {
    border: 1px solid #000;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    padding: 8px 20px 0px 0px;
    position: relative;
}

.specification-info:first-child.selected .specification_content {
    border-top-left-radius: 0px;
}

.specification-info .specification_content:before {
    content: "";
    position: absolute;
    width: 1px;
    bottom: 9px;
    left: 0px;
    height: 100%;
    background-color: #000;
}

.specification-info.last-border .specification_content:before {
    bottom: 0;
    height: calc(100% + 9px);
}

.specification-info.next-border:not(.last-border) .specification_content:before,
.specification-info.last-border-custom .specification_content:before {
    bottom: 16px;
}

.specification-info:first-child .specification_content:before {
    top: 14px;
    bottom: auto;
    height: calc(100% - 22px);
}

.specification-info:first-child.border-custom .specification_content:before {
    height: calc(100% - 29px);
}

.specification-info:last-child .specification_content:before,
.specification-info.selected .specification_content:before {
    display: none;
}

.specification-info:first-child.selected .specification_content:before {
    top: 0px;
    bottom: 20px;
}

.specification-info:first-child.selected .specification_content:before {
    display: none;
}

.specification-info:first-child.selected .specification_content {
    border-left: 1px solid #000;
}

.specification-info:first-child.selected .specification_content {
    border-left: none;
}

.specification-info:first-child .specification_content .title {
    border-top: none;
    padding-top: 0;
    padding-left: 20px;
}

.specification-info:first-child .specification_content .description {
    padding-left: 20px;
}

.specification-info:last-child .specification_content {
    border: 1px solid #000;

    border-top: none;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 0px 20px 20px 0px;
}

.specification-info:last-child.selected .specification_content {
    border-left: none;
    position: relative;
}

.specification-info:last-child.selected .specification_content:before {
    content: "";
    position: absolute;
    width: 1px;
    bottom: 20px;
    left: 0px;
    height: calc(100% - 20px);
    background-color: #000;
    display: none;
}

.specification-info .specification_content {
    border: 1px solid #000;
    border-left: none;
    padding: 0px 20px 0px 0px;
    border-top: none;
    border-bottom: none;
    z-index: 2;
}

.specification-info .icon-wrapper {
    padding-left: 20px;
    padding-top: 10px;
    border: none;
    cursor: pointer;
}

.specification-info.selected .icon-wrapper {
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid #000;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-right: 1px solid #fff;
    margin-right: -1px;
    position: relative;
}

.specification-info.selected .icon-wrapper:after {
    content: "";
    position: absolute;
    top: 100%;
    right: -1px;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-top-right-radius: 20px;
    box-shadow: 20px -11px 0px 11px rgba(255, 255, 255, 1);
    border: 1px solid #000;
    border-left: none;
    border-bottom: none;
    z-index: 0;
}

.specification-info:first-child.selected .icon-wrapper:before {
    display: none;
}

.specification-info .icon-wrapper:before {}

.specification-info.selected .icon-wrapper:before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: -1px;
    width: 25px;
    height: 25px;
    background-color: transparent;
    border: 1px solid #000;
    border-left: none;
    border-top: none;
    z-index: 0;
    border-bottom-right-radius: 20px;
    box-shadow: 20px -11px 0px 11px rgba(255, 255, 255, 1);
}

.specification-info .specification_content p {
    margin-bottom: 0;
}

.specification-info .specification_content .title:after {
    content: "";
    width: 11px;
    height: 11px;
    background-image: url('data:image/svg+xml,<svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 6.39437C10.9773 6.32768 10.9622 6.2577 10.9301 6.19476C10.7678 5.87562 10.4878 5.71076 10.0985 5.70959C9.06647 5.70677 8.03447 5.70865 7.00273 5.70865C6.96438 5.70865 6.92628 5.70865 6.87879 5.70865C6.87879 5.66591 6.87879 5.63162 6.87879 5.59733C6.87879 4.66574 6.8801 3.7339 6.87801 2.8023C6.87722 2.35775 6.49704 2.00667 6.01692 2.0001C5.52036 1.99329 5.12348 2.34343 5.12165 2.79784C5.11878 3.59464 5.12087 4.39168 5.12061 5.18848C5.12061 5.35804 5.12061 5.52759 5.12061 5.70888C5.07703 5.70888 5.03946 5.70888 5.00188 5.70888C3.96675 5.70888 2.93162 5.70771 1.89623 5.70935C1.4075 5.71006 1.01871 6.03953 1.0007 6.46248C0.981135 6.91782 1.37097 7.28769 1.88162 7.29004C2.5457 7.29333 3.20978 7.29098 3.87386 7.29098C4.25143 7.29098 4.62901 7.29098 5.00684 7.29098H5.12087V7.40253C5.12087 8.31064 5.12087 9.21899 5.12087 10.1271C5.12087 10.6024 5.35623 10.8753 5.86584 10.9911C5.87184 10.9925 5.87706 10.9969 5.88254 11H6.11686C6.12234 10.9969 6.12756 10.9927 6.13356 10.9913C6.64734 10.8706 6.87853 10.6024 6.87853 10.1271C6.87853 9.21899 6.87853 8.31064 6.87853 7.40253V7.29098H7.00247C8.03447 7.29098 9.06621 7.29169 10.0982 7.29051C10.5434 7.29004 10.8821 7.04393 10.982 6.65457C10.9862 6.6379 10.9937 6.6217 11 6.60526C11 6.53504 11 6.46459 11 6.39437Z" fill="black"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.specification-info.selected .specification_content .description {
    padding-left: 20px;
    padding-top: 10px;
}

.specification-info.selected .specification_content .title {
    border-bottom: none;
    margin-bottom: 0;
    padding-left: 20px;
}

.specification-info.selected .specification_content .title:after {
    background-image: url('data:image/svg+xml,<svg width="11" height="2" viewBox="0 0 11 2" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="11" height="2" rx="1" fill="black"/></svg>');
}

.specification-info.selected .specification_content .description {
    display: block;
    padding-bottom: 10px;
}

.product-accessories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    place-items: center;
    gap: 20px;
}

.product-accessories>div {
    flex: 0 1 auto;
    width: 23.6%;
}

.accessories-title {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 40px;
}

.accessory-item {
    background: #c4c4c4;
    border-radius: 30px;
    text-align: center;
    color: #646464;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid #c4c4c4;
}

.accessory-item img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    transition: transform 0.3s ease-in-out;
    margin-bottom: 10px;
    aspect-ratio: 3/2;
}

.product-accessories.style2 .wrap-image {
    position: relative;
}

.accessory-item__ttl {
    font-size: 14px;
    color: #646464;
}

.accessory-item__ttl>* {
    color: inherit;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

}

.accessory-item__ct {
    padding: 5px 10px 10px;
}

.accessory-item__ct .listproductAccessories__action {
    justify-content: center;
    gap: 5px;
}

.accessory-item__ct .listproductAccessories__action .button {
    background: black;
    color: white;
    border-radius: 35px;
}

.related-products {
    padding-top: 50px;
    padding-bottom: 20px;
}

.related-products h2 {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 40px;
}

.related-products .product-item p.title {
    font-size: 14px;
    font-weight: 600;
}

.related-products .product-item .price {
    text-align: center;
    font-size: 14px;
}

.desktop-title {
    display: block;
}

.mobile-title {
    display: none;
}

.specifications-images-slider img {
    margin-bottom: 8px;
}

.specifications-thumbnails-slider img {
    padding: 0;
}

.specifications-thumbnails-slider .slick-slide {
    padding: 8px;
}

@media screen and (max-width: 768px) {
    .related-products {
        padding-top: 30px;
        padding-bottom: 10px;
    }

    .product-banner-cta .button-cta {
        left: 15px;
        padding: 10px 15px;
        font-size: 12px;
    }

    .mobile-title {
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        display: block;
    }

    .desktop-title {
        display: none;
    }

    .product-accessories>div {
        width: 48%;
    }

    .related-products h2 {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .accessories-title {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .product-accessories {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .product-specifications {
        padding: 20px 0;
        flex-direction: column;
    }

    .product-specifications .specifications-images,
    .product-specifications .specifications-info {
        width: 100%;
    }

    .product-featured {
        padding: 40px 0 20px 0;
        margin-bottom: 20px;
        display: flex;
        place-items: top;
        flex-direction: row;
        gap: 15px;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: start;
    }

    .product-featured .feature-item {
        flex: 0 1 auto;
        width: 210px;
        min-width: 210px;
        max-width: 60%;
    }

    .product-main {
        flex-direction: column;
        padding-top: 40px;
    }

    .product-main .product-images {
        width: 100%;
    }

    .product-main .product-info {
        width: 100%;
    }

    .product-thumbnails-slider .slick-next:before,
    .product-thumbnails-slider .slick-prev:before {
        display: none;
    }

    .product-thumbnails-slider .slick-next {
        right: 2%;
    }

    .product-thumbnails-slider .slick-prev {
        left: 2%;
    }

    .product-images img {
        border-radius: 15px;
    }
}

.tab-content-wrapper {
    width: 80%;
    margin: 50px auto;
}

.tab-content-wrapper .tab-content>.tab-pane {
    padding: 30px 0;
}

.tabcontent li {
    width: 50%;
    text-align: center;
}

.tabcontent li .nav-link {
    width: 100%;
    text-align: center;
    border: none;
    border-bottom: 2px solid #d9d9d9;
    border-radius: 0;
    box-shadow: none;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
}

.tabcontent li .nav-link.active {
    background: #fff;
    border: none;
    border-bottom: 2px solid #646464;
}

.tab-content-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.tab-content-inner>div {
    flex: 0 1 auto;
    width: calc(50% - 20px);
}

.tab-content-inner img {
    border-radius: 15px;
    width: 100%;
    height: auto;
}

.image-rounded img {
    border-radius: 30px;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .image-rounded img {
        border-radius: 15px;
    }

    .tabcontent li .nav-link {
        font-size: 10px;
    }

    .tab-content-inner {
        flex-direction: column;
        gap: 10px;
    }

    .tab-content-inner>div {
        width: 100%;
    }

    .tab-content-wrapper .tab-content>.tab-pane {
        padding: 20px 0;
    }

    .tab-content-wrapper {
        width: 100%;
        padding: 0 20px;
    }

    .tab-content-wrapper p {
        font-size: 12px;
    }
}

.page-banner {
    position: relative;
}

.page-title {
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
}

.page-title h1 {
    color: #fff;
}

.block-services {
    padding: 50px 0;
}

.block-services .service img {
    width: 74px;
    height: 74px;

}

.block-services h2 {
    padding-bottom: 30px;
    text-align: center;
}

.row-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.service {
    position: relative;
    flex: 0 1 auto;
    width: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    gap: 15px;
    color: #646464;
    font-weight: 700;
}

.service[data-bs-toggle="modal"] {
    cursor: pointer;
}

.service-link {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.buy-now-button a,
.button-now-cart {
    font-weight: 700;
    text-transform: uppercase;
    background-color: #000;
    color: #fff;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    display: inline-block;
    margin: 10px 0;
}


.buy-now-button a:hover,
.button-now-cart:hover {
    background-color: #646464;
    color: #fff;
}

.content-area {
    padding: 50px 0;
}

.home .content-area {
    padding: 0 0 50px 0;
}

.product-image:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .content-area {
        padding: 30px 0;
    }

    .home .content-area {
        padding: 0 030px 0;
    }

    .block-services h2 {
        padding-bottom: 20px;
    }

    .buy-now-button a {
        font-size: 12px;
        padding: 8px 16px;
    }

    .block-services {
        padding: 20px 0;
    }

    .page-title {
        top: 23%;
    }

    .service {
        width: 30%;
        font-size: 10px;
    }

    .service img {
        width: 35px;
        height: 35px;
    }

    .row-services {
        align-items: start;
        gap: 10px;
    }
}

.block-maintenance {
    margin: 30px 0 80px 0;
}

#maintenance-tabs .nav-link {
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.25);
    font-weight: 700;
    font-size: 20px;
    display: inline-block;
    padding: 0 10px 0 0;
    margin-bottom: 20px;
    position: relative;
    min-width: 150px;
}

#maintenance-tabs .nav-link.active,
#maintenance-tabs .nav-link:hover {
    color: #000;
    border: none;
    background: transparent;
}

#maintenance-tab-content {
    border: 1px solid #000;
    border-radius: 0 30px 30px 30px;
    margin-top: 12px;
    background: #fff;
    z-index: 2;
    position: relative;
}

#maintenance-tab-content.border-radius {
    border-radius: 30px;
}

#maintenance-tabs .nav-link.active:before {
    content: "";
    position: absolute;
    width: 200px;
    height: 1px;
    background-color: #000;
    top: 12px;
    left: 100%;
}

.divider-col {
    border-left: 2px solid rgba(0, 0, 0, 0.14);
    /* or your color */
    padding-left: 24px;
    /* adjust as needed */
}

@media screen and (max-width: 992px) {
    #maintenance-tabs .nav-link {
        min-width: 100px;
    }

    #maintenance-tabs .nav-link {
        font-size: 14px;
        margin-bottom: 8px;
    }
}

@media screen and (max-width: 768px) {
    #maintenance-tabs .nav-link {
        min-width: 50px;
    }

    .block-maintenance {
        margin: 20px 0 50px 0;
    }

    #maintenance-tabs .nav-link {
        font-size: 10px;
        margin-bottom: 10px;
    }

    #maintenance-tabs .nav-link.active:before {
        width: 100px;
        top: 8px;
    }

    #maintenance-tab-content {
        border-radius: 0 20px 20px 20px;
        margin-top: 8px;
    }

    #maintenance-tab-content.border-radius {
        border-radius: 20px;
    }

    #maintenance-tab-content {
        font-size: 10px;
    }

    #maintenance-tab-content p {
        margin-bottom: 8px;
    }
}

#infoAccordion {
    width: 915px;
    max-width: 100%;
    margin: 40px auto 80px auto;
}

#infoAccordion .accordion-item {
    border-bottom: none;
    padding-left: 60px;
    position: relative;
}

.info-icon {
    position: absolute;
    top: 6px;
    left: -60px;
}

.info-item {
    font-weight: 700;
    border-bottom: 1px solid #000;
    padding: 12px 0;
    border-radius: 0 !important;
}

.info-item.active {
    border-bottom: 1px solid #fff;
}

.img-rounded {
    border-radius: 15px;
}

.mobile-only {
    display: none;
}

.specifications-tab__list {
    gap: 0;
    padding: 0;
    border-bottom: 1px solid;
}

.specifications-tab__li {
    list-style: none;
}

.specifications-tab__li:first-child .specifications-tab__button {
    border-top-left-radius: 10px;
}

.specifications-tab__li:last-child .specifications-tab__button {
    border-top-right-radius: 10px;
}

.specifications-tab__li.is-active .specifications-tab__button {
    background-color: #000;
    border-color: #000;
    ;
    color: #fff;
}

.specifications-tab__button {
    display: inline-block;
    padding: 8px 20px;
    background-color: #b1b1b1;
    border: 1px solid #b1b1b1;
    color: #fff;
    font-weight: 700;
    border-radius: 0;
    text-transform: uppercase;
}

.specifications-tab__content {
    display: none;
}

.specifications-tab__content.is-active {
    display: block;
}

.specifications-tab__ck {
    overflow: hidden;
    transition: max-height 0.35s ease;
    max-height: 100px;
}

.specifications-tab__ck.expanded {
    max-height: none;
}

specifications-wrapper {
    position: relative;
    max-width: 100%;
}

.pecifications-tab__ck {
    overflow: hidden;
    transition: max-height 0.35s ease;
    max-height: 99px;
    /* Mặc định thu gọn */
}

.pecifications-tab__ck.expanded {
    max-height: 2000px;
    /* Đảm bảo đủ cao */
}

.spec-btn {
    margin-top: 10px;
    padding: 8px 14px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .mobile-only {
        display: block;
    }

    #infoAccordion .img-rounded {
        margin-bottom: 15px;
    }

    #infoAccordion {
        margin: 20px auto 60px auto;
    }

    .product-featuredbox {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .product-featuredbox.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

#promotionAccordion a {
    font-style: italic;
    color: #007bb9;
}

#promotionAccordion a:hover {
    color: #000;
}

.section-post {
    padding-top: 40px;
}

.article-card {}

.article-card__image {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    line-height: 0;
}

.article-card__image::before {
    content: "";
    display: block;
    padding-top: calc((205 / 350) * 100%);
}

.article-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s ease;
}

.article-card__content {
    margin-top: 15px;
}

.article-card__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.4;
}

.article-card__title a {
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.article-card__title a:hover {}

.article-card .mh-desc {
    margin-bottom: 20px;
}

.article-card__desc {
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
}

.article-card__btn {
    background: #e5e5e5;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    color: var(--color-text);
    text-align: center;
    padding: 5px 15px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 1px #e5e5e5;
    text-decoration: none;
    width: fit-content;
    min-width: 138px;
    margin: 0 auto;
    transition: all .3s ease;
}

.article-card__btn:hover {
    background: white;
    color: #333;
}

/* hover */
.hover-effect {
    position: relative;
    overflow: hidden;
    display: flex;
}

.hover-effect::after {
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: hsla(0, 0%, 100%, .3);
    transform: translate(-50%, -50%) rotate(-45deg);
    content: "";
    z-index: 1
}

.hover-effect:hover::after {
    height: 250%;
    transition: all .6s linear;
    background-color: transparent
}

.listproductAccessories__img {
    width: 68px;
}

.listproductAccessories__item {
    width: 100%;
    gap: 10px;
    border-bottom: 1px solid lightgray;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.listproductAccessories__info {
    flex: 1;
}

.listproductAccessories__action {
    /* border: 1px solid; */
    /* padding: 3px 15px; */
    /* font-size: 12px; */
    /* border-radius: 35px; */
}

.listproductAccessories__name {
    font-size: 15px;
    font-weight: 700;
}

.listproductAccessories__price {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}

.listproductAccessories__action {
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
}

.listproductAccessories__action>* {
    padding: 5px 15px;
    font-size: 14px;
    display: inline-flex;
    background: #e5e5e5;
    border-radius: 30px;
    background-color: #e5e5e5;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 700;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
}

h3.productAccessories-ttl {
    font-size: 20px;
    margin-top: 20px;
    border-bottom: 1px solid lightgray;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.posts-list>.row {
    gap: 20px 0;
}

.article-card__cate {
    position: absolute;
    left: 50%;
    z-index: 2;
    bottom: 0;
    transform: translate(-50%, 50%);
    background: white;
    padding: 2px 15px;
    color: black;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 0 3px #00000016;
}

.article-card__figure {
    position: relative;
    margin-bottom: 25px;
}

#test-drive-modal .btn-close {
    top: -19px;
    position: absolute;
    right: 6px;
}

#test-drive-modal .modal-header {
    border-bottom: 0;
    justify-content: center;
    padding: 7px;
}

#test-drive-modal .modal-body {
    border-top: 0
}

/* ==============================
   MODAL BASE
================================ */
#test-drive-modal .modal-content {
    border-radius: 16px;
    border: none;
    padding: 8px;
    background: #f3f3f5;
}

#test-drive-modal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

#test-drive-modal .modal-title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    width: 100%;
}

#test-drive-modal .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

/* ==============================
   FORM LAYOUT
================================ */
.modal-contact-form-7 .wpcf7-form {
    margin-top: 12px;
}

.modal-contact-form-7 p {
    margin-bottom: 0px;
    position: relative;
}

/* ==============================
   LABEL
================================ */
.modal-contact-form-7 label {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    display: block;
    margin-bottom: 6px;
}

.modal-contact-form-7 br {
    display: none;
}

/* ==============================
   INPUT / SELECT / TEXTAREA
================================ */
.modal-contact-form-7 .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    height: 38px;
    padding: 5px 14px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ddd;
    background: #fff;
    transition: all 0.25s ease;
    margin-top: 5px;
}

.modal-contact-form-7 textarea.wpcf7-textarea.wpcf7-form-control {
    height: 90px;
    resize: none;
}

/* Focus */
.modal-contact-form-7 .wpcf7-form-control:focus {
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
    outline: none;
}

/* Select arrow */
.modal-contact-form-7 select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

/* ==============================
   SUBMIT BUTTON
================================ */
.modal-contact-form-7 .wpcf7-submit {
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, #000 0%, #333 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-contact-form-7 .wpcf7-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* ==============================
   SPINNER + SUBMIT STATE
================================ */
.modal-contact-form-7 .wpcf7-spinner {
    display: block;
    margin: 12px auto 0;
    position: absolute;
    margin: 0;
    top: 15px;
    right: 96px;
}

.modal-contact-form-7 .wpcf7-form.submitting .wpcf7-submit {
    opacity: 0.6;
    pointer-events: none;
}

/* ==============================
   MESSAGE SUCCESS / ERROR
================================ */
.modal-contact-form-7 .wpcf7-response-output {
    margin-top: 14px;
    padding: 12px;
    font-size: 13px;
    border-radius: 10px;
    text-align: center;
}

/* Success */
.modal-contact-form-7 .wpcf7-mail-sent-ok,
.modal-contact-form-7 .wpcf7-response-output.wpcf7-mail-sent-ok {
    background: #e9f8f1;
    color: #0a7d44;
    border: 1px solid #0a7d44;
}

/* Error */
.modal-contact-form-7 .wpcf7-validation-errors,
.modal-contact-form-7 .wpcf7-response-output.wpcf7-validation-errors {
    background: #fff4e5;
    color: #b54708;
    border: 1px solid #b54708;
}

/* ==============================
   MOBILE FIX
================================ */
@media (max-width: 576px) {
    .modal-contact-form-7 .modal-content {
        padding: 4px;
    }
}

.menu-cart {
    width: 30px;
    height: 30px;
    margin-left: 20px;
    position: relative;
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: black;
    color: white;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 50%;
    min-width: 17px;
    text-align: center;
}

.cat-tags-links .cat-links svg.icon {
    width: 20px;
    height: 20px;
}

/* page cart */
.page-cart {}

.page-cart .wc-block-components-sidebar-layout {
    /* gap: 32px; */
    align-items: start;
}

.page-cart .wc-block-cart-items {
    border-collapse: separate;
    border-spacing: 0 16px;
}

.page-cart .wc-block-cart-items__row {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.page-cart .wc-block-cart-items__row td {
    padding: 20px;
    vertical-align: top;
}

.page-cart .wc-block-cart-item__image img {
    border-radius: 10px;
    max-width: 96px;
}

.page-cart .wc-block-components-product-name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
    display: inline-block;
}

.page-cart .wc-block-components-product-price__value {
    font-weight: 600;
    color: #dc2626;
}

.page-cart .wc-block-components-quantity-selector {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.page-cart .wc-block-components-quantity-selector__input {
    border: none;
    width: 60px;
    text-align: center;
    font-weight: 600;
}

.page-cart .wc-block-components-quantity-selector__button {
    background: #f3f4f6;
    border: none;
    transition: 0.2s;
}

.page-cart .wc-block-components-quantity-selector__button:hover {
    background: #e5e7eb;
}

.page-cart .wc-block-cart-item__remove-link {
    margin-top: 10px;
    color: #ef4444;
    font-size: 14px;
    font-weight: 500;
}

.page-cart .wc-block-cart-item__total {
    font-weight: 700;
    font-size: 16px;
    color: #111827;
    text-align: right;
}

.page-cart .wc-block-cart__sidebar {
    background: #fff;
    border-radius: 14px;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.page-cart .wc-block-cart__totals-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.page-cart .wc-block-components-totals-item {
    padding: 12px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.page-cart .wc-block-components-totals-footer-item {
    border-bottom: none;
    font-size: 18px;
    font-weight: 700;
}

.page-cart .wc-block-cart__submit-button {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-radius: 10px;
    padding: 14px;
    font-size: 16px;
    color: white;
    font-weight: 600;
    transition: 0.25s;
}

.page-cart .wc-block-cart__submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.35);
}

.page-cart .wc-block-cart__submit {
    margin-bottom: 0;
}

.page-cart .is-medium table.wc-block-cart-items .wc-block-cart-items__row,
.page-cart .is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.page-cart .is-small table.wc-block-cart-items .wc-block-cart-items__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
}

@media (max-width: 992px) {
    .page-cart .wc-block-cart-item__image {
        width: 30%;
    }

    .page-cart .is-medium table.wc-block-cart-items .wc-block-cart-items__row {
        padding: 20px;
    }

    .page-cart .is-medium table.wc-block-cart-items .wc-block-cart-items__row:not(:last-child),
    .page-cart .is-mobile table.wc-block-cart-items .wc-block-cart-items__row:not(:last-child),
    .page-cart .is-small table.wc-block-cart-items .wc-block-cart-items__row:not(:last-child) {
        margin-bottom: 15px;
    }

    .page-cart .is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
    .page-cart .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
    .page-cart .is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
        width: 100%;
    }

    .page-cart .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
        width: calc(70% - 20px);
    }

    .page-cart .is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .page-cart .is-medium .wc-block-cart-item__total-price-and-sale-badge-wrapper,
    .page-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
        justify-content: center;
        flex-direction: row;
        gap: 5px;
    }

    .page-cart .is-medium .wc-block-cart-item__total-price-and-sale-badge-wrapper:before,
    .page-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper:before {
        content: "Tổng tiền:";
    }

    .page-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
        text-indent: -9999px;
        /* background: lightgray; */
        width: 25px;
        height: 25px;
        border-radius: 50%;
        position: absolute;
        right: -5px;
        top: -5px;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><circle cx="12" cy="12" r="10" stroke="%231C274C" stroke-width="1.5"></circle><path d="M14.5 9.50002L9.5 14.5M9.49998 9.5L14.5 14.5" stroke="%231C274C" stroke-width="1.5" stroke-linecap="round"></path></g></svg>');
    }
}

@media (max-width: 768px) {
    .page-cart .wc-block-cart-items__row td {
        padding: 16px;
    }

    .page-cart .wc-block-cart-item__image img {
        max-width: 72px;
    }

    .page-cart .wc-block-cart__sidebar {
        margin-top: 24px;
        width: 100%;
    }
}

/* end page */
.required {
    color: red;
}


/*  */
#gom-all-in-one {
    display: flex;
    flex-direction: column-reverse;
}

#gom-all-in-one .viber-vr {
    transition: 1.3s all;
    -moz-transition: 1.3s all;
    -webkit-transition: 1.3s all;
}

.button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
}

.button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}

.viber-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196f3;
    background-color: rgba(33, 150, 243, 0.7);
}

.phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: 12px;
    position: absolute;
    box-shadow: 0 0 0 0 #c31d1d;
    background-color: rgba(230, 8, 8, 0.7);
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite;
}

#button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}

.phone-vr-img-circle a {
    display: block;
    line-height: 37px;
}

.phone-vr-img-circle img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

#gom-all-in-one .zalo-vr {
    transition: 1s all;
    -moz-transition: 1s all;
    -webkit-transition: 1s all;
}

.button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
}

.zalo-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196f3;
    background-color: rgba(33, 150, 243, 0.7);
}

#gom-all-in-one #phone-vr {
    transition: 0.7s all;
    -moz-transition: 0.7s all;
    -webkit-transition: 0.7s all;
}

#phone-vr .phone-vr-circle-fill {
    opacity: 0.7;
    box-shadow: 0 0 0 0 #dd2223;
}

.phone-bar a,
.phone-vr .phone-vr-circle-fill,
.phone-vr .phone-vr-img-circle,
.phone-vr .phone-bar a {
    background-color: #dd2223;
}

.phone-bar a,
.phone-vr .phone-vr-circle-fill,
.phone-vr .phone-vr-img-circle,
.phone-vr .phone-bar a {
    background-color: #dd2223;
}

.phone-vr .phone-vr-circle-fill {
    opacity: 0.7;
    box-shadow: 0 0 0 0 #dd2223;
}

.phone-vr-img-circle {
    background-color: #e60808;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out;
}

.zalo-vr .phone-vr-img-circle {
    background-color: #2196F3;
}

.viber-vr .phone-vr-img-circle {
    background-color: #2196f3;
}




@-webkit-keyframes phone-vr-circle-fill {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
}

@-webkit-keyframes zoom {
    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes zoom {

    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent
    }
}


/*  */
.related-posts {
   
}

.related-posts__title {
    font-size: 24px;
    font-weight: 700;
}

.related-posts__list {
    padding-left: 15px;
}

.related-posts__list a {
    color: inherit;
}

.related-posts__list a:hover {
    color: var(--link-color);
}
.related-posts .products-list-slider .slick-list{
    margin: 0 10px;
}
.related-posts .products-list-slider .slick-slide {
    margin: 0 10px;
}
.related-posts .products-list-slider .article-card__figure{
    margin-bottom: : 15px;
}