/* Custom utility for backdrop blur based on provided value */


/* Custom classes for precise font sizes and line heights if Tailwind defaults don't match */
.text-14px {
    font-size: 14px;
}

.leading-20px {
    line-height: 20px;
}

.text-16px {
    font-size: 16px;
}

.leading-19px {
    line-height: 19px;
}

.h-24px
{
    height:24px;
}
.w-46px {
    width: 46px;
}

.mbrandbox1 {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 8px;
    top: auto;
    bottom: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
}
.mbrandbox1 img{
    width:100%;
    border-radius:0px;
}

.membox {
    background-color: white;
/*    overflow: hidden;*/
    flex: none; /* Combines flex-grow: 0, flex-shrink: 0, flex-basis: auto */
    width: 100%;
    height: 231px;
}
.memimgbox {
    position: relative;
    width: 100%;
    height:auto;
}
    .memimgboximg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0.75rem; /* This corresponds to 'rounded-xl' in Tailwind */
    }

.memberpname {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600; /* For font-semibold */
    color: #222222; /* Or a similar dark gray color, typical for Tailwind's text-gray-900 */
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-transform: capitalize;
    height: 40px;
    width: 100%;
}

.mpointsvalue {
    font-size: 16px;
    line-height: 19px;
    font-weight: 700; /* For font-bold */
    color: #222222; /* A common color for Tailwind's text-gray-900 */
}

/* detail page container - acts as the main content wrapper */
.detail-page {
    position: relative;
    width: 100%; /* Make it responsive */
    /*background: #FFFFFF;*/
    /* Removed left and top as they are for design canvas positioning */
    min-height: 100vh; /* Ensure it takes full height initially */
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 18.6px rgba(0, 0, 0, 0.03); /* Applied here for overall card shadow */
    border-radius: 0; /* No explicit border-radius on the main page */
}

.detailcollboxlistlink a {
    border: none;
    display: block;
    color: #737373;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

@media only screen and (max-width: 1200px) {
    .detailcollboxlistlink {
        display: block;
        border-bottom: none;
        background: #ffffff;
        color: #9d9d9d !important;
        padding: 1px;
        border-radius: 15px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        padding-bottom: 5px;
        padding-top: 5px;
    }
}
/* Main Title: ITC Club Culinaire Select Hotel Membership (inside content area) */
.main-title {
    font-family: 'Inter';
    font-size: 20px;
    line-height: 23px;
    color: #000000;
    font-weight: 600;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-transform: capitalize;
    height: 47px;
    width: 100%;
    /* width: 335px; height: 48px; - handled by content wrapping */
}

/* Image section container (Frame 2087327047) */
.image-container {
    width: 100%; /* Explicit width as per CSS */
    height: auto; /* Explicit height as per CSS */
    border-radius: 12px;
    overflow: hidden; /* To keep image within rounded corners */
    position: relative; /* For absolutely positioned children */
}

    .image-container img {
        width: 100%;
        border-radius:0px;
    }
.memdimg {
    border-radius: 8px;
    object-fit: cover;
    display: block;
    object-position: center center;
    transform: scale(1);
    width: 100%;
    height: 100%;
}
/* ITC Culinaire Logo Overlay frame (Frame 2087327213) */
.logo-overlay {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 8px;
    bottom: 8px;
    top: auto;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Group 1832096209 - Logo content */
.logo-content {
/*    width: 88.17px;
    height: 45.85px;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    position: relative;*/
}

/* Bottom fixed bar (Frame 1707479790) */
.bottom-bar {
    position: fixed; /* Use fixed for bottom bar */
    bottom: 0;
    width: 100%; /* Explicit width */
    height: 77px;
    background: #FFFFFF;
    border-top: 1px solid #E6E6E6; /* Border from the original CSS "border: 1px solid #E6E6E6;" */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    z-index: 20;
}

/* Frame 1707482265 inside bottom bar */
.bottom-bar-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* To push items to ends */
    align-items: center;
    padding: 0px;
    gap: 82px; /* Large gap specified */
    width: 100%; /* Explicit width as per CSS */
    height: 45px; /* Explicit height as per CSS */
}
.bottom-bar-content span {
    display: flex;
    justify-content: center;
}
    .bottom-bar-content span {
    width: 100%;
}
    /* Price text (52,000 Pts) */
    .price-text {
        font-family: 'Inter';
        font-weight: 700;
        font-size: 16px;
        line-height: 19px;
        color: #23262F; /* Black color specified */
    }

/* Buy Now button (Frame 1707479789) */
.buy-now-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 29px; /* Precise padding */
    gap: 10px;
    width: 129px; /* Precise width */
    height: 45px; /* Precise height */
    background: #9D1D27;
    box-shadow: 0px 1.15461px 4.61842px rgba(0, 0, 0, 0.25);
    border-radius: 62px; /* Large border-radius for pill shape */
}

/* Buy Now text */
.buy-now-text {
    font-family: 'Inter';
    font-size: 13px;
    line-height: 15px;
    color: #FFFFFF!important;
    text-align: center;
}

/* Heart icon for favorite (Group 1171283235) */
.heart-icon-container {
    position: absolute;
    width: 24px;
    height: 24px;
    right: 5px; /* Relative to its parent .image-container */
    top: 5px; /* Relative to its parent .image-container */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D9D9D9; /* Ellipse 418 background */
    border-radius: 50%; /* Make it a circle */
}

    .heart-icon-container i {
        color: #737373; /* Vector color */
    }

.productdesc li {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: arabic-indic !important;
    list-style-type: disc !important;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.productdesc p {
    text-transform: initial;
    margin-left: -15px !important;
}


.buy-now-button-checkout {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 29px;
    gap: 10px;
    width: 28%;
    height: 45px;
    background: #9D1D27;
    box-shadow: 0px 1.15461px 4.61842px rgba(0, 0, 0, 0.25);
    border-radius: 62px;
}

.buy-now-button-checkout-disabled {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 29px;
    gap: 10px;
    width: 100%;
    height: 45px;
    background: #bfb0b1;
    box-shadow: 0px 1.15461px 4.61842px rgba(0, 0, 0, 0.25);
    border-radius: 62px;
}

.bg-white-checkout
{
    background-color:white;
    padding:10Px;
    border-radius:20px;
}

.bg-checkout-cards {
    background-color:white;
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 20px;
}

.checkout-address-text {
    font-size: 12px;
    font-weight: 700;
    color: #868686;
    margin-top: 10px;
}
.checkout-address {
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0%;
    vertical-align: middle;
}
.checkout-name {
    font-family: Inter;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
}
.chk-edit {
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #494949
}
.chk-remove {
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #9D1D27;
}
.regisis {
    font-family: Inter;
    font-weight: 700;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: uppercase;
    color: #868686;
}

.member-text {
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #000000;
}


/* Frame 1707478817 */
.voucher-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px 8px;
    gap: 12px;
    width: 335px; 
    border: 1px solid #E4E4E4;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* Frame 1707478785 */
.timage-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    isolation: isolate;
    width: 100px;
    height: 87px; /* Adjusted height to fit image better */
    border-radius: 8px;
    flex-shrink: 0; /* Prevent shrinking */
    position: relative; /* For absolute positioning of overlay */
}

/* image 12786 */
.hotel-image {
    width: 100px;
    height: 100px; /* Original size */
    object-fit: cover; /* Ensure image covers the area */
    border-radius: 12px;
    flex-shrink: 0;
    z-index: 0;
}

/* Frame 2087327213 - Overlay */
.overlay {
    position: absolute;
    width: 31px;
    height: 31px;
    left: 4px;
    bottom: 3px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(0.62px);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Group 1832096209 - SVG inside overlay */
.svg-icon {
/*    width: 27.33px;
    height: 13.99px;
    display: flex;
    justify-content: center;
    align-items: center;*/
}
    .svg-icon img {
        width: 100%;
    }
.overlay1 {
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
}
    /* Frame 1707478795 */
    .details-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 12px;
        flex-grow: 1; /* Allow to take available space */
    }

/* Frame 1707478792 */
.title-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 0px;
    gap: 8px;
    align-self: stretch; /* Stretch to fill parent width */
}

/* ITC Club Culinaire Select Hotel Membership */
.title-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 140%; /* 20px */
    display: flex;
    align-items: center;
    color: #000000;
    flex-grow: 1; /* Allow text to take available space */
}

/* chevron-right */
.chevron-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0; /* Prevent shrinking */
}

    .chevron-icon svg {
        stroke: #222222;
        stroke-width: 1.33333px;
    }

/* Frame 1707479080 */
.info-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    align-self: stretch; /* Stretch to fill parent width */
}

/* Frame 1707478790 */
.info-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 4px;
    align-self: stretch;
}

/* Order Amount / Order No. / Qty */
.info-label {
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    color: #7F7F7F;
    flex-shrink: 0; /* Prevent shrinking */
    width: 90px; /* Fixed width for labels */
}

/* 52,000 Pts / Z15552 / 1 */
.info-value {
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    flex-grow: 1; /* Allow value to take remaining space */
    text-align: left; /* Align value to the left */
}

/* Adjustments for responsiveness using Tailwind's mobile-first approach */
@media (max-width: 640px) {
    .voucher-card {
        width: 100%; /* Make card full width on small screens */
        left: 0;
        right: 0;
        top: auto;
        bottom: auto;
        margin: 20px auto; /* Center with margin */
    }
}

.info-message-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    width: 100%;
    height: 52px;
    background: #ECFDE8;
    border: 1px solid #AFF0A3;
    border-radius: 5px;
    left: calc(50% - 100%/2);
    
    position: relative; /* Remove absolute positioning relative to body, let it flow */
    /* top: 728px; /* Removed fixed positioning */ */
    /* Centered horizontally  */
}

/* Group 1321314880 - Info icon container */
.info-icon-container {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* For nested absolute positioning */
}

/* Big green star / Star 65 */
.big-green-star {
    position: absolute;
    width: 23.94px;
    height: 23.94px;
    left: 0; /* Relative to parent */
    top: 0; /* Relative to parent */
    background: linear-gradient(137.5deg, #7ACC8C 14.87%, #45A059 96.04%);
    border-radius: 10.5187px;
}

/* Green small star animation / Star 66 */
.small-green-star {
    position: absolute;
    width: 18.94px;
    height: 18.94px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Center it within parent */
    background: #287A5B;
    border-radius: 10.5187px;
}

/* Frame 1707482691 / i icon group */
.i-icon-group {
    position: absolute;
    width: 2.69px;
    height: 10.89px;
    /* Center within the star */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex; /* To contain the 'i' paths */
    justify-content: center;
    align-items: center;
}

.i-icon-path-dark {
    position: absolute; /* Keep absolute within its group for overlapping */
    width: 2.31px;
    height: 10.89px;
    background: #184B38;
    border-radius: 1px; /* To make edges softer like the image */
}

.i-icon-path-white {
    position: absolute; /* Overlap for the white part of 'i' */
    width: 2.31px;
    height: 10.89px;
    background: #FFFFFF;
    border-radius: 1px;
}

/* You will receive your membership details... */
.info-message-text {
    width: 281px; /* Fixed width as per design */
    height: 32px; /* Fixed height for two lines */
    font-weight: 700;
    font-size: 12px;
    line-height: 16px; /* 133% */
    color: #303030;
    flex-grow: 1; /* Allow text to take remaining space */
}


/* Frame 2087327076 - Main container */
.frame-2087327076 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width: 335px;
    height: 72px;
    /* flex: none; order: 4; align-self: stretch; flex-grow: 0; */
    /* Removed flex properties that might conflict with centering and responsiveness */
    background-color: #ffffff; /* Added for visibility */
    border-radius: 8px; /* Added for better appearance */
    box-sizing: border-box;
    padding: 10px 16px; /* Added some padding for content inside */
}

/* Frame 2087327074 - Image and text container */
.frame-2087327074 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
    width: 295px; /* This will be overridden by flex-grow: 1 on small screens */
    height: 72px;
    flex: none;
    order: 0;
    flex-grow: 1; /* Allows it to take available space */
}

/* Frame 1707478785 - Image wrapper */
.frame-1707478785 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    isolation: isolate;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    flex: none;
    order: 0;
    flex-grow: 0;
    position: relative; /* For positioning the overlay */
    overflow: hidden; /* Ensures image respects border-radius */
}

/* image 12786 */
.image-12786 {
    width: 100px; /* Original width */
    height: 100px; /* Original height */
    /* The image provided is smaller, so we'll adjust object-fit */
    object-fit: cover; /* Cover the container */
    border-radius: 12px; /* From the original CSS */
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
    position: absolute; /* To center and adjust within the 72x72 frame */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Frame 2087327213 - Overlay on image */
.frame-2087327213 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 3.1px;
    position: absolute; /* Absolute positioning relative to .frame-1707478785 */
    width: 31px;
    height: 31px;
    left: 4px;
    bottom: 3px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(0.62px);
    border-radius: 4px;
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
}

/* Group 1832096209 - SVG container */
.group-1832096209 {
    width: 27.33px;
    height: 13.99px;
    /* Center the SVG within its container */
    display: flex;
    justify-content: center;
    align-items: center;
}

    .group-1832096209 img{
        width:31px;
        height:31px;
    }
    /* ITC Club Culinaire Select Hotel Membership */
.ttitle-text {
    width: 100%;
    height: 44px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    display: -webkit-box;
    align-items: center;
    color: #000000;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-transform: capitalize;
}

/* Order Date: 16 JAN 2024 */
.order-date-text {
    width: 100%; /* Changed from fixed 211px for responsiveness */
    height: 17px; /* Fixed height from CSS */
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px; /* identical to box height */
    color: #000000;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Frame 2087327073 - Text container */
.frame-2087327073 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;
    width: 211px; /* This will be overridden by flex-grow: 1 */
    height: 71px;
    flex: none;
    order: 1;
    flex-grow: 1; /* Allows it to take available space */
}

/* arrow-left - Right arrow icon */
.arrow-right { /* Changed from arrow-left to arrow-right to match image */
    width: 24px;
    height: 24px;
    flex: none;
    order: 1;
    flex-grow: 0;
    display: flex; /* To center the SVG */
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* General responsive adjustments */
@media (max-width: 375px) {
    .frame-2087327076 {
        width: 100%; /* Make the banner full width on smaller screens */
        height: auto; /* Allow height to adjust */
        padding: 8px 12px;
        gap: 10px;
    }

    .frame-2087327074, .frame-2087327073 {
        height: auto;
    }

    .ttitle-text {
        font-size: 14px; /* Adjust font size for smaller screens */
        line-height: 130%;
        height: auto;
    }

    .order-date-text {
        font-size: 12px; /* Adjust font size for smaller screens */
        line-height: 15px;
    }
}

.mem-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 20px 40px;
    gap: 30px;
    isolation: isolate;
    width: 100%;
    background: linear-gradient(160.01deg, #E8D9FB 13.3%, #DAF6EA 80.05%);
    position: relative;
    overflow: hidden; /* To contain the pseudo-element */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added for depth */
}

/* Background gradient element, similar to the "Vector" in your CSS */
/*.mem-container::before {
    content: '';
    position: absolute;
    width: 324.44px;
    height: 164.44px;
    right: -100px;*/ /* Adjusted to visually match the image */
    /*top: -26px;
    border-radius: 50%;*/ /* Making it a circle or oval for a softer blend */
    /*z-index: 0;
}*/

.memslider{justify-content:center; display:flex!important;}

.mem-header {
    width: 100%;
    text-align: center;
    z-index: 1; /* Ensure header is above background element */
}

    .mem-header h1 {
        margin: 0 auto;
        width: 100%; /* Adjusted to fit the container width, assuming it's responsive */
        font-family: 'Inter';
        font-style: normal;
        font-weight: 900;
        font-size: 21px;
        line-height: 32px;
        text-align: center;
        color: #7B40B2;
    }

.mem-cards-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start; /* Changed to flex-start for top alignment of cards */
    padding: 0px;
    gap: 16px;
    width: 100%; /* Make it full width */
    overflow-x: auto; /* Enable horizontal scrolling if cards exceed width */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    z-index: 1; /* Ensure cards are above background element */
}

.mem-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    min-width: 156px; /* Ensure cards don't shrink too much */
    max-width: 100%; /* Keep consistent width */
    height: auto; /* Adjust height based on content */
    border-radius: 12px; /* Rounded corners for cards */
    padding-bottom: 15px; /* Add some padding at the bottom */
}

.mem-image-container {
    width: 100%;
    height:auto;
    position: relative;
    border-radius: 12px;
    overflow: hidden; /* Ensure image and overlay stay within bounds */
}

    .mem-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Cover the container without distortion */
        border-radius: 12px;
    }

.mem-logo-overlay {
    position: absolute;
    position: relative;
    position: absolute;
    bottom: 8px; /* 8px from bottom of image-container */
    left: 8px; /* 8px from left of image-container */
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
}

.mem-overlay-logo {
/*    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0px;*/
}

    .mem-card h2 {
        width: 100%; /* Take full width of card */
        padding: 0 8px; /* Padding for text inside card */
        box-sizing: border-box; /* Include padding in width */
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        display: flex;
        align-items: center;
        color: #1A1A1A;
        margin: 0; /* Remove default margin */
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-transform: capitalize;
        height: 40px;
    }

    .mem-points {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px 8px; /* Padding for text inside card */
        gap: 8px;
        width: 100%; /* Take full width of card */
        box-sizing: border-box; /* Include padding in width */
    }

    .mem-points-value {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 800;
        font-size: 16px;
        line-height: 15px;
        display: flex;
        align-items: center;
        color: #7B40B2;
    }
.mknow {
    color: #1948AA !important;
    border-bottom: 1px solid #1948AA !important;
}


.orderhm {
    position: relative;
    width: 100px;
    height: 113px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
.myorderimage .orderhm img {
    object-fit: fill;
    /*    border-radius: 10px;*/
    /*object-fit: fill;
    border-radius: 8px;*/
}
.myorderimage .orderhm .largeimgsize {
    width: 100px;
    border-radius: 8px;
}

.myorderimage .orderhm .orderlogo-overlay {
    position: absolute;
    position: relative;
    position: absolute;
    bottom: 22px;
    left: 3.1px;
    width: 31px;
    height: 31px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    box-sizing: border-box;
    overflow:hidden;
}



@media screen and (max-width: 844px) and (min-width: 320px) {
    .mem-image-container {
        width: 100%;
        height: 156px;
        position: relative;
        border-radius: 12px;
        overflow: hidden; /* Ensure image and overlay stay within bounds */
    }

    .memimgbox {
        position: relative;
        width: 100%;
        height: 156px;
    }
    .buy-now-button-checkout {
        width: 100%;
    }
    .image-container {
        height: 187px;
        object-fit: cover;
        display: block;
        object-position: center center;
        transform: scale(1);
        width: 100%;
    }
    .productdesc ul {
        margin-left: 15px;
    }

    #mbdescription {
        margin-left: 0px;
    }

    .detailtabswidth {
        width: 100%;
        padding: 4px 7px;
    }


}

.mnavbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 16px;
    gap: 10px;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 96px;
    background: #FFFFFF;
    margin-bottom: 5px;
    box-shadow: 0px 4px 18.6px rgba(0, 0, 0, 0.03);
}

.thefixback .clr-black-blk {
    font-size: 20px;
}



/* Frame 1171281486 */
.micon-frame {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    width: 24px;
    height: 24px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* arrow-left container */
.marrow-left {
    width: 24px;
    height: 24px;
    position: relative;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Vector (arrow) */
.mvector {
    position: absolute;
    left: 50%;
    top: 20.83%;
    width: 14px;
    height: 14px;
    border-left: 3px solid #000000;
    border-bottom: 3px solid #000000;
    transform: rotate(45deg);
}


.no-transform {
    text-transform: none !important;
}