/* ----------------------------------------------------------------
	Responsive CSS
-----------------------------------------------------------------*/


@media (max-width: 1199px) {}


@media (min-width: 1092px) and (max-width: 1199px) {}

@media (max-width: 1091px) {}

@media (max-width: 991px) {
    /* 	.triangle {
		bottom: -8px;
		left: 50%;
		top: auto;
		clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
		transform: rotate(-45deg);

	} */

    .recommendMemberTitle {
        text-align: center;
        width: 100%;

    }

    .stepCardIcon {

        margin: 10px auto;

    }

    .stepCardText {
        text-align: center;
    }

    .footerinfoDetail {
        flex-direction: column;
    }

    .mapwrap {
        width: 100%;
    }

    .recommendMemberWrap {

        flex-direction: column;
    }

    body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu ul ul a,
    body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu>ul>li:hover ul a,
    body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu>ul>li.current ul a,
    body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu>div>ul>li:hover ul a,
    body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu>div>ul>li.current ul a {
        color: #666 !important;
    }

}

@media (min-width: 768px) {

    .filterMenu {
        position: sticky;
        top: 10px;
        z-index: 999;
    }


    .filterBtn {
        display: none;
    }

    .md-none {
        display: none;
    }

    .mobile-total {

        display: none;
    }
}

@media (max-width: 767px) {}

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

    .card-title {

        height: 4.5rem;

    }

}

@media (max-width: 479px) {}


/* ----------------------------------------------------------------
	Retina CSS
-----------------------------------------------------------------*/



@media (max-width: 1280px) {
    #primary-menu ul li>a {
        padding-right: 10px !important;
    }

    .home-logo .smelogo {
        padding-left: 100px;
    }
}

@media (max-width: 1199px) {
    .table thead th {
        font-size: 0.8rem;

    }

    .tableImg {
        width: 60px;
    }

    #primary-menu ul li>a {
        padding-right: 5px !important;
    }

    .blogImg {

        height: 154px;

    }
}

@media (max-width: 1091px) {
    .sidebar-item {
        display: none;
    }

    .blogImg {

        height: 210px;

    }

    .showSearch,
    .shopping_cart_button,
    .showLogin {
        font-size: 0.8rem;

    }

    .FooterLinks a {

        display: block;
        padding-bottom: 10px;

    }

    .list-wrapper .list-item {
        width: 50%;
    }

    #header .container {
        max-width: inherit;
        padding-left: 0;
        padding-right: 0;
    }

    .list-wrapper {

        padding: 0px;

    }


}



@media (max-width: 768px) {

    .accordion-header.sticky .accordion-button {
        border-radius: 0;
        margin: 0;
    }

    /* Add padding to body when header is sticky to prevent content jump */
    .accordion-body.sticky-offset {
        padding-top: 60px;
    }

    /* Ensure accordion content is visible when sticky */
    .accordion-collapse.show .accordion-body {
        position: relative;
    }

    .accordion-header.sticky {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 100;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin: 0;
    }

    .list-wrapper .list-item {
        margin-bottom: 0px;
        padding: 0px 10px;
    }

    .topMenuWrap {
        display: block;
    }

    .topMenuWrap a {
        color: #4c4c4c;
        width: 23%;
    }

    .steps-horizontal {

        margin: 20px auto;

    }

    footer {
        margin-bottom: 62px;
    }

    .mb_footermenu a {
        color: #fff;

    }

    .mb_footermenu {
        width: 100%;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        position: fixed;
        bottom: 0;
        color: #fff;
        z-index: 999;
        background-color: var(--secondary-color);
    }

    .fixwhatsapp {
        white-space: nowrap;
        font-size: 2rem;
        overflow: hidden;
        position: fixed;
        text-align: center;
        bottom: 80px;
        right: 12px;
        color: #fff;
        background-color: #1eb2bb;
        padding: 10px 15px;
        border-radius: 50px;
        z-index: 99;
        width: 66px;
    }

    .breadcrumb {
        padding-top: 10px;
    }

    .partnerLogo {
        padding: 10px 0px;
    }

    .h1 {
        padding: 0px;

    }

    .site-logo {
        max-width: 200px;
    }

    .flickity-prev-next-button {
        display: none;
    }

    .gallery-cell img {
        border-radius: 0px;
        opacity: 1;
        transform: scale(0.9);
        transition: all 0.5s ease-in-out;
    }

    .mobile-hide {
        display: none;
    }

    .filterWarp {
        display: flex;
    }

    .filterWarpFixed {
        position: fixed;
        width: 100%;
        top: 62px;
        z-index: 100;

    }

    .gallery-cell {
        width: 100%;
    }

    /* on small screens remove extra spacing so each cell spans viewport */
    .gallery-cell {
        margin: 0 !important;
        padding: 0 !important;
    }

    .gallery-cell img {
        width: 100%;
        height: auto;
    }

    /* allow gallery to stretch full width of viewport if inside a .container */
    .gallery {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
    }

    .fixedMobileSubMenu {
        position: fixed;
        top: 0;
    }

    .topWrap {
        margin-top: 20px;
    }

    .mianWrap {
        margin: 0px auto;
    }

    .table-price,
    .total-price {
        display: none;
    }

    .recommendMemberWrap {

        margin: 0px 20px 20px 20px;


    }

    .silderWrap {

        padding-bottom: 40px;
    }

    .flickity-viewport {

        padding-bottom: 56%;
    }

    .productImg {

        max-width: 30%;
    }


    .filterMenu {
        display: none;
        overflow-y: scroll;
        position: fixed;
        width: 100%;
        left: 0;
        height: 100%;
        z-index: 999;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        bottom: 0;
        padding: 30px;
        border-radius: 10px;
    }

    .filterlink:hover {
        -webkit-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        transform: scale(1);
    }

    .filterlink {
        padding: 20px 10px;

    }

    .accountContent {
        text-align: center;
    }

    .cardsPoint {
        margin: 0px auto;
    }

    .memberCoinWrap {
        justify-content: center;
    }

    .footerRowWrap {
        flex-direction: column;
    }

    .mobileNone {
        display: none;
    }

    .borderRightTodown {
        border-right: 0px solid #cdcdcd !important;
        border-bottom: 1px solid #cdcdcd;
    }

    .footerRowWrap,
    .FooterRowNew {
        text-align: center;

    }

    .stepCardWrap {

        padding: 0px 0px;

    }

    .stepCardWrap .stepCardText {
        font-size: 1rem;
        text-align: center;

    }

    .addToCart {
        display: block;
        opacity: 1;
        position: absolute;
        bottom: 0px;
        width: 100%;
        color: #fff;
        z-index: 20;
        text-align: center;
        padding: 10px 20px;
        background-color: rgba(30, 178, 187, 0.8);
        animation: fadeInSlideUp 0.3s ease-in-out;

    }

    /* Mobile sticky accordion adjustments */
    .accordion-header.sticky {
        z-index: 998;
        /* Below mobile menu but above content */
    }

    .accordion-body.sticky-offset {
        padding-top: 70px;
        /* Slightly more padding on mobile */
    }

}

@media (max-width: 479px) {
    .FooterRow .payment {
        position: relative;

    }

    #logo img {
        height: 34px;
    }

    /* 	.list-wrapper .list-item {
		width: 100%;
	}
 */

    #primary-menu-trigger,
    #page-submenu-trigger {
        opacity: 0;

        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
        line-height: 38px;

    }

    h4 {
        margin-bottom: 10px !important;
    }
}

@media screen and (max-width: 400px) {
    .form {
        padding: 20px 10px;
    }

}