/* Member Benefits Hero Section */
.section-member-benefits-hero{background-image:url(../../../uploads/2025/12/member-benefits-background-image.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;padding:40px 0 30px;}
.section-member-benefits-hero .content-div{position:relative;}
.section-member-benefits-hero .content-div .breadcrumb{position:absolute;top:-20px;left:0;}
.section-member-benefits-hero .content-div .breadcrumb ul li{color:#FFF;}
.section-member-benefits-hero .content-div .breadcrumb ul li a{color:#FFF;}
.section-member-benefits-hero .text-div{position:absolute;top:0;left:0;width:50%;height:100%;padding:50px 0 30px;}
.section-member-benefits-hero .text-div h1{font-family:"degular",sans-serif;font-size:56px;color:#FFF;margin:0 0 10px;}
.section-member-benefits-hero .text-div h1 strong{font-size:68px;font-weight:900;}
.section-member-benefits-hero .text-div h3{font-size:26px;color:#FFF;font-weight:700;}
.section-member-benefits-hero .text-div .link-div{margin:30px 0 0;}
.section-member-benefits-hero .text-div .link-div .btn{
    display: inline-flex;
    padding: 15px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background:  #EFDC77;
    color: #016F66;
    border: 1px solid #EFDC77;
    font-size: 22px;
}
.section-member-benefits-hero .img-div{display:block;width:65%;margin-left:auto;}
.section-member-benefits-hero .img-div img{}

/* Member Benefits Birthday Treats Section */
.section-member-benefits-birthday{background-color:#F1FAFD;padding:60px 0;border-top-left-radius:40px;border-top-right-radius:40px;margin:-60px 0 0;position:relative;z-index:1;}
.section-member-benefits-birthday .box-div{display:flex;border:5px solid #FFF;background-color:#DBF1F0;border-radius:20px;font-size:0;max-height: 350px; height: 350px; margin-bottom: 60px;}
.section-member-benefits-birthday .box-div.alt{background-color:#FFF0FB;}
.section-member-benefits-birthday .box-div .left-div{width:40%;display:flex;vertical-align:top;text-align:center;flex-direction: column; align-self: flex-end; gap: 10px;}
.section-member-benefits-birthday .box-div.alt .left-div{order:2;align-self: center;}
.section-member-benefits-birthday .box-div .left-div h2{font-family:"degular",sans-serif;font-size:40px;font-weight:700;color:#016F66;letter-spacing: 0;}

.section-member-benefits-birthday .box-div .left-div .img-div img{max-height: 185px;}


.section-member-benefits-birthday .box-div.alt .left-div h2{color:#D7018F;}
.section-member-benefits-birthday .box-div .left-div .link-div{
    margin-bottom: 10px;
}
.section-member-benefits-birthday .box-div .left-div .link-div a{
    background-color:#EFDC77;
    color:#016F66;
    border-radius:100px;
    padding:12px 17px;
    font-size: 18px;
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.section-member-benefits-birthday .box-div .right-div{width:60%;display:flex;vertical-align:top;justify-content: space-evenly;padding-top: 30px;}

.section-member-benefits-birthday .box-div .right-div .single-div{
    display: flex;
    flex-direction: column;
    justify-content: left;
    max-width: 300px;
    gap: 18px;
    flex-grow: 1;
}

.section-member-benefits-birthday .box-div .right-div .single-div > .img-div{
    display: flex;
    justify-content: center;
}

.section-member-benefits-birthday .box-div .right-div .single-div > .text-div{
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.section-member-benefits-birthday .box-div .right-div .img-div img{max-height: 150px;}

.section-member-benefits-birthday .box-div .right-div .single-div > .text-div h3{
    color: #000;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: .5rem;
}

.section-member-benefits-birthday .box-div .right-div .single-div>.text-div p {
    color: #707070;
    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 70%;
    margin: 0 auto;
}


.section-member-benefits-birthday .box-div.alt .right-div{order:1;}

/*Earn and Redeem*/

.section-member-benefits-birthday .bottom-div > h3{
    color: #047067;
    text-align: center;
    font-family: Degular;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal; 
}

.section-member-benefits-birthday .bottom-div .content-div{
    display: flex;
    gap: 20px;
    justify-content: space-evenly;   
    flex-wrap: wrap;

    h3 {
        color: #000;
        text-align: center;
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-top: .5rem;
    }

    p {
        color: #707070;
        text-align: center;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
}


.section-member-benefits-birthday .bottom-div .content-div .single-div{
    display: flex;
    flex-direction: column;
    flex: 1;
}

.section-member-benefits-birthday .bottom-div .content-div .single-div .img-div{
    text-align: center;

    img {
        max-width: 150px;
    }
}

.section-member-benefits-birthday .bottom-div .content-div .single-div .text-div{
    text-align: center;
}

/*Tier up section*/

.section-member-benefits-tiers .section-title {
    margin-top: 60px;
    text-align: center;
    margin-bottom: 65px;
}

@media screen and (max-width:767px) {
    .section-member-benefits-birthday .bottom-div .content-div .single-div .img-div > img {
        max-width: 96px;
    }

    .section-member-benefits-tiers .section-title {
        margin-bottom: 15px;
    }
    
}










/* Membership Table */ 

.membership-table{width:100%;max-width:985px;margin:0 auto;border-collapse:separate;background-color:#fff;margin-bottom: 50px;}
.membership-table th{text-align:left;padding:20px 15px 20px;font-size:14px;color:#555;vertical-align:middle;width:25%;border:none;}
.membership-table th:not(:first-child){padding:10px 15px 20px;}
.membership-table tbody th:nth-child(1){font-weight:normal;}
.membership-table th{font-weight:bold !important;color:#333;}

thead td.tier-silver {border-top-left-radius: 10px; border-top-right-radius: 10px;}
thead td.tier-gold {border-top-left-radius: 10px; border-top-right-radius: 10px;}
thead td.tier-platinum {border-top-left-radius: 10px; border-top-right-radius: 10px;}

tbody th {
    background: #FAFAFA;
}

tr.feature-qualifier th {
    background: #FAFAFA;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin: 60px;
}

span.head-description {

    color:  #222;
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.membership-table td{
    text-align:center;padding:10px 10px;font-size:14px;color:#333;vertical-align:middle;min-width:200px;border:none;
    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;}
.membership-table tr{height:60px;}
.membership-table tr:first-child{height:120px;}
.tier-silver{background-color:#FFF3ED;}
.tier-gold{background-color:#fffaf0;}
.tier-platinum{background-color:#DEFAF8;position:relative;}
.tier-header{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding-bottom:20px;}
td.tier-silver {color:#C77A59;border-left: 5px solid #fff;}
td.tier-gold {color:#B29708;border-left: 5px solid #fff;}
td.tier-platinum {color:#016F66;border-left: 5px solid #fff;}
.tier-logo{width:110px;height:110px;margin:0 auto;}
.qualifier-text{font-weight:bold;}
.tier-silver .qualifier-text{color:#333;}
.tier-gold .qualifier-text{color:#333;}
.tier-platinum .qualifier-text{color:#333;}
.points-text{font-weight:bold;}
.tier-silver .points-text{color:#c0c0c0;}
.tier-gold .points-text{color:#ffd700;}
.tier-platinum .points-text{color:#008080;}
.diamond-indicator{}  
.diamond{display:inline-block;width:10px;height:10px;transform:rotate(45deg);}
.tier-silver .diamond{background-color:#E79F81;}
.tier-gold .diamond{background-color:#D6BE3C;}
.tier-platinum .diamond{background-color:#008080;}
.tier-silver .diamond.inactive{background-color:#E79F81;}


/*Download App*/

/* --- Section Container --- */
.section-member-benefits-app {
    padding: 20px 0 80px;
    background-color: #fff;
    /* Important: allows the phone to stick out of the section if needed */
    overflow: visible; 
}

/* --- Green Banner Container --- */
.section-member-benefits-app .banner-div {
    background-color: #016F66;
    border-radius: 24px;
    padding: 40px 50px 40px 260px; /* Left padding makes room for the phone */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* Anchor for absolute phone */
    box-shadow: 0 10px 20px rgba(0, 92, 92, 0.1);
}

/* --- 1. Phone Image (Pop-out Effect) --- */
.section-member-benefits-app .phone-img-div {
    position: absolute;
    bottom: -20px; /* Moves image down to overlap bottom edge */
    left: 20px;    /* Adjusts horizontal position */
    width: 240px;  /* Set a fixed width for consistent layout */
    z-index: 10;
}

.section-member-benefits-app .phone-img-div img {
    width: 100%;
    height: auto;
    display: block;
    /* Optional: Slight rotation or scale if needed to match art */
    /* transform: rotate(-5deg); */
}

/* --- 2. Text Content --- */
.section-member-benefits-app .text-div {
    flex: 1; /* Takes up remaining space */
    padding-right: 30px;
    color: #fff;
}

.section-member-benefits-app .app-subtitle {
    display: block;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 8px;
    opacity: 0.9;
}

.section-member-benefits-app .app-title {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: #fff;
}

/* --- 3. Right Actions --- */
.section-member-benefits-app .download-action-div {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* QR Box */
.section-member-benefits-app .qr-box {
    background-color: #fff;
    border-radius: 12px;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-member-benefits-app .qr-box img {
    width: 100%;
    height: auto;
}

/* Store Buttons */
.section-member-benefits-app .store-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-member-benefits-app .store-btn img {
    height: auto; /* Matches standard store badge height */
    width: 115px;
    display: block;
}

/* --- Footer Links --- */
.section-member-benefits-app .app-footer-links {
    margin-top: 50px;
}

.section-member-benefits-app .app-footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 50px; /* Space between links */
}

.section-member-benefits-app .app-footer-links a {
    color: #047067;
    font-family: Inter;
    font-size: 12.276px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.section-member-benefits-app .app-footer-links a:hover {
    opacity: 0.7;
}

/* Circle Arrow Icon */
.section-member-benefits-app .circle-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #ccece8; /* Light teal bg */
    color: #005c5c;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
    padding-bottom: 0px; /* Visual center tweak */
    padding-left: 1px;
}

/* --- 1. Table Header Cell Adjustments --- */
/* We remove top padding so the "Tab" sits flush against the top edge */
.membership-table thead td {
    vertical-align: top;
    padding-top: 0 !important; 
    padding-bottom: 20px;
    position: relative;
    border: none;
    /* Optional: Rounded corners for the top of the whole column card */
    border-radius: 16px 16px 0 0; 
}

/* --- 2. The "Accent Bar" (The Tab) --- */
.tier-accent-bar {
    width: 80%;          
    height: 15px;
    margin: 0 auto 20px; 
    border-radius: 22px 22px 0px 0px;
    margin-top: -15px; 
}

/* --- 3. Specific Tab Colors --- */
/* Silver Tab (Gray) */
.tier-silver .tier-accent-bar {
    background: linear-gradient(180deg, #F4F4F4 0%, #E5E5E5 100%);
    
}

/* Gold Tab (Yellow/Gold) */
.tier-gold .tier-accent-bar {
   background: linear-gradient(180deg, #FFF1A6 0%, #EFDC77 100%);
   
}

/* Platinum Tab (Teal) */
.tier-platinum .tier-accent-bar {
    background: linear-gradient(180deg, #009387 0%, #016F66 100%);
    
}

/* --- 4. Column Background Colors --- */
/* Matches the light pastels in your design */
.membership-table .tier-silver {
    background-color: #fff5f0; /* Light Pinkish/Beige */
    border-left: 5px solid #fff;
}

.membership-table .tier-gold {
    background-color: #fff9e6; /* Light Yellow */
    border-left: 5px solid #fff;
}

.membership-table .tier-platinum {
    background-color: #e0f8f8; /* Light Cyan/Teal */
    border-left: 5px solid #fff;
}

/* --- 5. Logo Alignment --- */
.tier-header {
    text-align: center;
    width: 100%;
}

.tier-logo img {
    display: block;
    margin: 0 auto;
    max-width: 110px; /* Adjust size of medals if needed */
    height: auto;
}

/* --- 6. Table Body Backgrounds (to continue the color down) --- */
/* Ensure the body cells match the header background color */
.membership-table tbody td.tier-silver { background-color: #fff5f0; }
.membership-table tbody td.tier-gold   { background-color: #fff9e6; }
.membership-table tbody td.tier-platinum { background-color: #e0f8f8; }

/* Remove borders inside the colored columns to look seamless */
.membership-table tbody td {
    border-bottom: none; 
    border-top: none; 
}

.membership-table tbody tr:last-child td,
.membership-table tbody tr:last-child th {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* The SVG Icon */
.btn-arrow-svg {
    display: block;      
    transition: transform 0.2s ease;
}

/* Hover Effect: Slide Arrow Right */
.link-div .btn:hover .btn-arrow-svg {
    transform: translateX(4px);
}

/* --- Styling for links with the SVG arrow --- */
.link-div .arrow-link {
    display: inline-flex; /* Aligns text and SVG in a row */
    align-items: center;  /* Vertically centers them */
    text-decoration: none;
    font-weight: 700;     /* Matches your design style */
    color: #005c5c;       /* Theme color (adjust if needed) */
}

/* Re-use the hover effect from before */
.link-div .arrow-link:hover .btn-arrow-svg {
    transform: translateX(4px); /* Slide animation */
}

/* --- Responsive (Tablet & Mobile) --- */
@media (max-width: 1024px) {
    .section-member-benefits-app .banner-div {
        flex-direction: column;
        padding: 40px 30px;
        text-align: center;
    }

    .section-member-benefits-app .phone-img-div {
        position: static; /* No longer absolute */
        width: 180px;
        margin: 0 auto 30px; /* Center it */
    }

    .section-member-benefits-app .text-div {
        padding-right: 0;
        margin-bottom: 30px;
    }

    .section-member-benefits-app .download-action-div {
        flex-direction: row;
    }

    .section-member-benefits-app .store-buttons {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .section-member-benefits-app .app-footer-links ul {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .table-wrappers {overflow-x: auto;}

    .membership-table {
        margin: 18px auto 50px;
    }
    
    .section-member-benefits-birthday .bottom-div .content-div {
        padding: 0px 20px;

        h3 {
            font-size: 16px;
        }

        p {
            font-size: 14px;
        }
    }
}

@media screen and (max-width:767px) {
    .section-member-benefits-hero {
        padding: 40px 0 0;
    }

    .section-member-benefits-hero .text-div {
        position: relative;
        width: 100%;
        padding: 50px 0 0px;
    }

    .section-member-benefits-hero .text-div h1 {
        color: #FFF;
        font-family: Degular;
        font-size: 52px;
        font-style: normal;
        font-weight: 400;
        line-height: 66px;
    }

    .section-member-benefits-hero .text-div h3 {
        color:  #FFF;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-align: left;
    }

    .section-member-benefits-hero .text-div h1 strong {
        color: #FFF;
        font-family: Degular;
        font-size: 70px;
        font-style: normal;
        font-weight: 700;
        line-height: 46px;
    }

    .section-member-benefits-hero .text-div .link-div .btn {
        display: flex;
        width: 170px;
        height: 38px;
        padding: 10px 24px;
        justify-content: center;
        align-items: center;
        gap: 6px;
        border-radius: 60px;
        background: #EFDC77;
        color:  #016F66;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .section-member-benefits-hero .img-div {
        width: 100%;

        img {
            bottom: 0;
            position: relative;
        }
    }

    

    .section-member-benefits-birthday {
        margin: 0;
    }
    
    .section-member-benefits-birthday .box-div {
        display: flex;
        border: 5px solid #FFF;
        background-color: #DBF1F0;
        border-radius: 20px;
        font-size: 0;
        max-height: 100%;
        height: 100%;
        flex-direction: column-reverse;
        margin-bottom: 60px;
        padding: 10px 10px 0px 10px;
    }
    
    .section-member-benefits-birthday .box-div .left-div h2 {
        display: none !important;
    }

    .section-member-benefits-birthday .box-div .title-div h2 {
        color:#016F66;
        text-align: center;
        font-family: Degular;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding: 24px 0px;
        letter-spacing: 0;
    }

    .section-member-benefits-birthday .box-div .right-div .img-div img {
        max-height: 100px;
    }

    .section-member-benefits-birthday .box-div .left-div {
        width: 100%;
        display: flex;
        vertical-align: top;
        text-align: center;
        flex-direction: column;
        align-self: center;
        gap: 10px;
    }

    .section-member-benefits-birthday .box-div .right-div .single-div {
        display: flex;
        flex-direction: column;
        justify-content: unset;
        max-width: 100%;
        gap: 15px;
        flex: 1;
    }

    .section-member-benefits-birthday .box-div .right-div {
        width: 100%;
        display: flex;
        vertical-align: top;
        justify-content: space-evenly;
        margin-bottom: 40px;
    }

    .text-div h3 {
        color:  #000;
        text-align: center;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .text-div p {
        color: #707070;
        text-align: center;
        font-family: Inter;
        font-size: 14px !important;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        width: 72%; 
        margin: auto;
    }
    
    .section-member-benefits-birthday .box-div.alt {
        display: flex;
        border: 5px solid #FFF;
        border-radius: 20px;
        font-size: 0;
        max-height: 100%;
        height: 100%;
        flex-direction: column;
        margin-bottom: 60px;
        padding: 10px 10px 0px 10px;
    }

    .section-member-benefits-birthday .box-div .title-div.alt h2 {
        color:#D7018F;
        text-align: center;
        font-family: Degular;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding: 24px 0px;
        letter-spacing: 0;
    }

    .section-member-benefits-birthday .box-div.alt .left-div .img-div img {
        max-height: 185px;
        padding-bottom: 20px;
    }

    .section-member-benefits-birthday .bottom-div .content-div {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Creates 2 equal columns */
        gap: 15px; /* Adjust spacing between items */
    }

    .section-member-benefits-birthday .bottom-div .content-div .single-div:last-child:nth-child(odd) {
        grid-column: span 2; /* Make it take up the full row width */
        width: 50%;          /* Force it back to the size of a single column */
        margin: 0 auto;      /* Center it physically */
    }

    .membership-table {
        table-layout: fixed !important; 
        width: 700px !important;        
        min-width: 700px;
        border-collapse: separate;
        margin-top: 20px;
    }

    /* CONTROL COLUMN WIDTHS */
    .membership-table th {
        width: 180px !important;  /* Give this the most space for text */
        box-sizing: border-box;   /* Ensures padding doesn't add to width */
    }

    .membership-table td {
        width: 150px !important;
        box-sizing: border-box;
    }

    /*  CONTROL ROW HEIGHTS */
    .membership-table th, 
    .membership-table td {
        padding: 8px 5px 8px 15px !important;
        vertical-align: middle;
    }


    .membership-table tbody tr {
        height: 70px !important; /* Change this number to whatever you want */
    }

    .membership-table thead tr {
        height: 120px !important; 
    }
    
    .tier-header {
        padding-top: 0px;
    }

    .tier-logo {
        width: 66px;
        height: 66px;
        margin: 0 auto;
    }

    .tier-logo img {
        max-width: 66px;
    }


    .membership-table td{
        text-align:center;padding:10px 10px;font-size:14px;vertical-align:middle;min-width:200px;border:none;
        text-align: center;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

}

@media screen and (max-width:399px) {
    .section-member-benefits-hero .text-div h1 {
        color: #FFF;
        font-family: Degular;
        font-size: 38px;
        font-style: normal;
        font-weight: 400;
        line-height: 46px; 
    }

    .section-member-benefits-hero .text-div h1 strong {
        color: #FFF;
        font-family: Degular;
        font-size: 52px;
        font-style: normal;
        font-weight: 700;
        line-height: 46px;
    }
}