﻿.table {
    background: #D0E9FF;
    margin-bottom: 0px !important;
}

.contain {
    width: 1150px;
    margin: 0 auto;
}

.old-price {
    position: relative;
}

    .old-price::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 2px;
        background-color: red; /* Line-through color */
    }

.new-price {
}

.promo-text {
    padding-top: 10px;
    color: #FFF;
}

.back {
    font-family: 'Source Sans Pro';
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.11em;
    text-align: left;
    color: #00008F;
}

.home_btn {
    padding: 39px 0px 44px;
}

.arrow-button {
    width: 32px
}

.margin-right-5 {
    margin-right: 5px;
    margin-left: 5px;
}


.prices {
    display: flex;
    gap: 27px;
    width: 1150px;
    margin: 0 auto;
    overflow-x: scroll;
    cursor: pointer;
}

.prices-imed {
    display: flex;
    width: 1150px;
    margin: 0 auto;
    padding-bottom: 100px;
}

.bronze, .silver, .gold, .platinum, .platinum-plus, .rhodium, .detty-december {
    width: 324px;
    background: white;
}

.standard, .classic, .prime, .benefit {
    background: white;
}

.easy-care {
    background: white;
}

.header {
    text-align: center;
    height: 188px;
    color: white;
    padding: 29px 94px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.header-imed {
    text-align: center;
    height: 150px;
    color: white;
    padding: 15px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.benefit-head-tweak {
    margin-top: 65px;
}

.benefit .header-imed {
    background: #00a4c6;
    height: 85px;
}

.standard .header-imed {
    background: linear-gradient(150deg, #914146 50%, #7e3539 50%);
}

.classic .header-imed {
    background: linear-gradient(150deg, #00a4c6 50%, #00ADC6 50%);
}

.prime .header-imed {
    background: linear-gradient(150deg, #ddbe65 50%, #d7b252 50%);
}

.bronze .header {
    background: linear-gradient(150deg, #00a4c6 50%, #00ADC6 50%);
}

.detty-december .header {
    position: relative; /* allow the ::before layer */
    background-color: #04895C;
    /* keep fallback/background-color if image is transparent or fails */
    overflow: hidden;
}

    /* confetti image in its own layer so we can set opacity independently */
    .detty-december .header::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('/images/slim-confetti.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: var(--detty-bg-opacity, 0.28); /* change this value as needed */
        pointer-events: none;
        z-index: 0;
    }

    /* ensure header content sits above the decorative layer */
    .detty-december .header > * {
        position: relative;
        z-index: 1;
    }

.detty-december .body {
    position: relative; /* allow the ::before layer */
    background-color: #FFF;
    /* keep fallback/background-color if image is transparent or fails */
    overflow: hidden;
}

    /* confetti image in its own layer so we can set opacity independently */
    .detty-december .body::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('/images/confetti.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: var(--detty-bg-opacity, 0.28); /* change this value as needed */
        pointer-events: none;
        z-index: 0;
    }

    /* ensure header content sits above the decorative layer */
    .detty-december .body > * {
        position: relative;
        z-index: 1;
    }

.silver .header {
    background: linear-gradient(150deg, #027180 50%, #006480 50%);
}

.gold .header {
    background: linear-gradient(150deg, #ddbe65 50%, #d7b252 50%);
}

.platinum .header {
    background: linear-gradient(150deg, #914146 50%, #7e3539 50%);
}

.platinum-plus .header {
    background: linear-gradient(151deg, #4d1014 50%, #400d10 50%);
}

.rhodium .header {
    background: linear-gradient(151deg, #004A9A 50%, #00008f 50%);
}

.header h2 {
    font-size: 36px;
    font-weight: 900;
}

.header-imed h2 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 3px;
}

.header-imed p {
    font-size: 14px;
    font-weight: 700;
}

.header p {
    font-size: 14px;
    font-weight: 700;
}

.body {
    padding: 22px 28px;
}

li:first-child {
    font-weight: 700;
}

.body ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.plan-links {
    text-decoration: underline;
    font-size: 18px;
    margin-top: 20px;
    width: 227px;
    margin: 0 auto;
    margin-bottom: 40px;
    text-align: center
}

.btns {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.view-list {
    width: 1150px;
    margin: 0 auto;
    padding: 22px 30px;
    font-size: 18px;
    /**margin-bottom: 75px;**/
    display: flex;
    justify-content: center;
    gap: 24px;
}

.view-list_white {
    background: #fff;
    color: #00008F;
    padding: 0 45px;
}

.view-list_blue {
    background: #00008F;
    color: #FFF;
    padding: 0 45px;
}

.view-list-details {
    width: 1150px;
    margin: 0 auto;
    padding: 22px 30px;
    font-size: 18px;
    /**margin-bottom: 75px;**/
    justify-content: center;
    position: absolute
}

.plan-box {
    background: #00adc6;
}

.plan-detail-box {
    background: linear-gradient(90deg, #FFF 60%, #f9f9f9 40%);
}

.button-container {
    display: flex; /* Use flexbox to make the buttons display side by side */
    justify-content: space-around; /* Adjust this to control the space between the buttons */
    align-items: center; /* Vertically center the buttons if needed */
}


.plan-text-header {
    color: #FFF;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    font-size: 14px;
    font-weight: 700;
}

    .plan-text-header h2 {
        font-size: 54px;
        font-weight: 700;
        letter-spacing: 6px;
        color: #FFF;
        padding-bottom: 16px;
    }

    .plan-text-header h6 {
        font-size: 16px;
        font-weight: 300;
        color: #FFF;
        padding: 50px 30px;
        line-height: 20px;
    }

    .plan-text-header p {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 1px;
    }

.close-button {
    width: 25px;
    padding: 15px 0 15px 0;
}

.heading-bg {
    background: #e9f5ff;
    margin-left: 14px;
    margin-right: 14px;
}

    .heading-bg p {
        padding: 6px 20px;
        color: #444444;
        font-size: 17px;
        font-weight: bold;
    }

.plan-text-alignment {
    margin: 8px 0 27px 35px
}

.details-margin {
    margin-top: 56px;
}

.icon-fix-details {
    margin-left: 9%;
    width: 16px;
    position: absolute
}

.td-padding {
    padding: 3px 0 8px 0;
    padding-left: 10%;
    width: 45%
}

.td-padding-text {
    padding: 3px 0 8px 0;
}

.plan-detail-fix {
    background: #D0E9FF;
    height: 1900px;
}

.button-box {
    width: 200px;
    height: 50px;
    margin: auto;
}

.rel {
    position: relative;
    width: 275px;
    height: 90px;
    background-color: #f9f9f9;
    display: flex;
    margin-left: auto;
}

.larger-button {
    width: 200px;
}

.silver-box {
    background-color: #027180;
}

.gold-box {
    background-color: #ddbe65;
}

.platinum-box {
    background-color: #7e3539;
}

.platinum-plus-box {
    background-color: #400d10;
}

.rhodium-box {
    background-color: #00008f;
}

.table-heading {
    color: white;
    padding: 15px;
}

.plan-header {
    background: #00adc6;
    text-align: center
}

.benefit-header {
    background: #045e71;
    text-align: center;
    width: 44%
}

.easy-care-background {
    background-color: #e9f5ff;
    padding-left: 50px;
}

.pl-40 {
    padding-left: 40px
}

.pt-40 {
    padding-top: 40px;
}

.pb-40 {
    padding-bottom: 40px;
}

.easy-care-buynow-tweak {
    position: relative;
    width: 506px;
    height: 90px;
    background-color: #fff;
    display: flex;
    margin-left: auto;
}

@media only screen and (min-width: 360px) and (max-width: 426px) {
    .plan-detail-fix {
        background: #D0E9FF;
        height: 2747px;
    }

    .plan-detail-box {
        padding-bottom: 3px;
    }

    .easy-care-buynow-tweak {
        position: relative;
        width: 376px;
        height: 90px;
        background-color: #fff;
        display: flex;
        margin-left: auto;
    }


    .view-list {
        width: 736px;
        margin: 0 auto;
        padding: 22px 15px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        gap: 24px;
    }

    .plan-text-header h6 {
        font-size: 14px;
        font-weight: 300;
        color: #FFF;
        padding: 27px 15px;
        line-height: 20px;
    }
    /*.plan-detail-box {
        padding-bottom: 133px;
    }*/

    .prices {
        display: flex;
        gap: 27px;
        width: auto;
        margin: 0 auto;
        overflow-x: scroll;
        cursor: pointer;
    }



    .contain {
        width: 100%;
        margin: 0 auto;
    }

    .wrapper-pad {
        padding-left: 15px;
        padding-right: 15px
    }

    .header {
        padding: 29px 76px;
    }

    .footer__wrapperStyle {
        background: #4976ba;
    }

    .rel {
        position: relative;
        height: 90px;
        display: flex;
        margin-left: auto;
        background-color: transparent;
        margin-right: auto;
    }

    .easy-care-buynow-tweak {
        position: relative;
        width: 415px;
        height: 94px;
        background-color: #e9f5ff;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }

    .easy-care-background {
        background-color: #e9f5ff;
        padding-left: 0px
    }

    .hosp-padding {
        padding-bottom: 155px;
    }

    .button-alignment {
        position: absolute;
        left: 4%;
        margin-top: 10px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .button-alignment-blue {
        position: absolute;
        left: 4%;
        margin-top: 85px;
        padding-left: 56px;
        padding-right: 60px;
    }

    .button-tweak {
        border: 1px solid #ddd;
    }
}

@media only screen and (max-width: 480px) and (max-height: 926px) {
    .button-alignment {
        position: absolute;
        left: 4%;
        margin-top: 10px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .button-alignment-blue {
        position: absolute;
        left: 4%;
        margin-top: 85px;
        padding-left: 56px;
        padding-right: 60px;
    }
}

@media only screen and (max-width: 600px) {
    .mobile-version {
        display: block;
    }

    .web-view {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .contain {
        width: 100%;
        margin: 0 auto;
    }

    .wrapper-pad {
        padding-left: 15px;
        padding-right: 15px;
    }

    .view-list {
        width: 736px;
        margin: 0 auto;
        padding: 22px 15px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        gap: 24px;
    }

    .easy-care-buynow-tweak {
        position: relative;
        width: 338px;
        height: 90px;
        background-color: #fff;
        display: flex;
        margin-left: auto;
    }
}

@media only screen and (max-width:1024px) {

    .corporate_inset_header {
        font: 700;
        font-size: 30px;
        line-height: 35px;
        font-family: 'Publico', 'Source Sans Pro', Arial, sans-serif;
        width: 263px;
        color: #00008F;
        margin-right: 27px;
    }

    .mobile-version {
        display: flex;
    }

    .corporate_inset_para {
        font-family: 'Source Sans Pro', Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0em;
        text-align: left;
        color: #595757;
    }

    .easy-care-buynow-tweak {
        position: relative;
        width: 451px;
        height: 90px;
        background-color: #fff;
        display: flex;
        margin-left: auto;
    }

    .corporate_inset {
        background: rgba(255, 255, 255, 0.9);
        height: 220px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -66px;
        padding-bottom: 20px;
    }

    /*.corporate {
        height: 265px;
        padding: 86px 295px;
    }*/

    .wrapper-pad {
        padding-left: 15px;
        padding-right: 15px;
    }

    .view-list {
        width: 1150px;
        margin: 0 auto;
        padding: 22px 30px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        gap: 24px;
        padding-right: 184px;
    }

    .contain {
        margin: 0 auto;
    }

    .plan-detail-fix {
        background: #D0E9FF;
        height: 100%;
    }

    .rel {
        position: relative;
        width: 258px;
        height: 90px;
        background-color: #f9f9f9;
        display: flex;
        margin-left: auto;
    }




    .mob-view-iconfix {
        width: 17px;
        float: right;
    }

    .pb-10 {
        padding-bottom: 15px;
        font-size: 13px;
    }

    .fr {
        float: right
    }



    .table-padding {
        padding: 0px 10px 0px 10px;
    }

    .scroller {
        overflow-x: scroll;
    }
}

/* Desktop default */
.mobile-version {
    display: none;
}

/*.web-view {
    display: block;
}*/

/* Tablet (601px to 1024px) */
/*@media (max-width: 1024px) {
    .web-view {
        display: none;
    }
}*/
@media (max-width: 768px) {
    .mobile-version {
        display: block;
    }
}

/* Mobile (up to 600px) */
@media (max-width: 1024px) {
    .mobile-version {
        display: block;
    }

    .web-view {
        display: none;
    }
}

@media (max-width: 768px) {
    .mobile-version {
        display: block;
    }

    .web-view {
        display: none;
    }
}

/*.mobile-version {
    display: block;
}*/

/*.web-view {
    display: block;
}*/

