:root {
    --blue: #322f78;
    --cyan: #60c0bb;
    --bright-blue: #38a1d7;
    --light-blue: #E8F4F8;
    --medium-blue: #3477b7;
    --panel-bg: #eeeeef; /* content background */
    --radius: 17px;
}


/******************Utilities*******************/
/******************Colorus*******************/

.blue {
    color: var(--blue);
}

.cayan {
    color: var(--cyan)
}

.light-blue {
    color: var(--light-blue);
}

.bright-blue {
    color: var(--bright-blue);
}

.bg-light-grey {
    background-color: #f2f2f2;
}


.bg-darkblue {
    background-color: #322f78;
    color: #fff
}


.bg-medium-blue {
    background-color: var(--medium-blue)
}

.bg-light-blue {
    background-color: var(--bright-blue)
}



/* ================================
   OPL Cards & Carousels — Styled
   ================================ */

/* ---- Grid card header colors (desktop) ---- */
#opl-cards-wrap .opl-layout-grid .col:nth-child(6n+1) .card .card-header {
    background-color: #000;
}

#opl-cards-wrap .opl-layout-grid .col:nth-child(6n+2) .card .card-header {
    background-color: #808080;
}

#opl-cards-wrap .opl-layout-grid .col:nth-child(6n+3) .card .card-header {
    background-color: var(--medium-blue);
}

#opl-cards-wrap .opl-layout-grid .col:nth-child(6n+4) .card .card-header {
    background-color: var(--bright-blue);
}

#opl-cards-wrap .opl-layout-grid .col:nth-child(6n+5) .card .card-header {
    background-color: var(--cyan);
}

#opl-cards-wrap .opl-layout-grid .col:nth-child(6n+6) .card .card-header {
    background-color: var(--cyan);
}



/* ---- Grid card header colors (Medium Screen sizes) ---- */

#opl-carousel-md .carousel-inner > .carousel-item:nth-of-type(1) .row > .col-4:nth-child(1) .card .card-header {
    background-color: var(--blue);
}

#opl-carousel-md .carousel-inner > .carousel-item:nth-of-type(1) .row > .col-4:nth-child(2) .card .card-header {
    background-color: #808080;
}

#opl-carousel-md .carousel-inner > .carousel-item:nth-of-type(1) .row > .col-4:nth-child(3) .card .card-header {
    background-color: var(--medium-blue);
}

/* Slide 2 (cards 4–6) */
#opl-carousel-md .carousel-inner > .carousel-item:nth-of-type(2) .row > .col-4:nth-child(1) .card .card-header {
    background-color: var(--bright-blue);
}

#opl-carousel-md .carousel-inner > .carousel-item:nth-of-type(2) .row > .col-4:nth-child(2) .card .card-header {
    background-color: var(--cyan);
}

#opl-carousel-md .carousel-inner > .carousel-item:nth-of-type(2) .row > .col-4:nth-child(3) .card .card-header {
    background-color: var(--cyan);
}

/* ---- Card text styling ---- */
#opl-cards-wrap .card {
    text-align: center;
    border: 0px;
}

#opl-cards-wrap .card-header {
    border-radius: 17px 17px 0px 0px;
}

.boxshadow {
    border-radius: 17px;
    background: #fff; /* or your bg */
    box-shadow: -1px -1px 23px -5px rgba(0,0,0,0.32);
}

    .boxshadow .card-body {
        border-radius: 17px 0px 17px 17px !important;
    }

#opl-cards-wrap .card .card-header {
    padding-top: 30px;
    padding-bottom: 30px;
    color: #fff;
}

#opl-cards-wrap .card h1 {
    font-weight: 700 !important;
    color: #fff !important;
    font-size: 40px;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 100%;
}

#opl-cards-wrap .card h5 {
    font-weight: 300;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 100%;
}

#opl-cards-wrap .card-header h5:first-of-type {
    font-weight: 700;
    margin-bottom: 10px;
}

#opl-cards-wrap .card-header h5:nth-of-type(2) {
    margin-bottom: 5px;
}

#opl-cards-wrap .card-header h5:nth-of-type(3) {
    margin-top: 5px;
}


/* ---- Buttons & Links -----*/

#opl-cards-wrap .btn-oneplan-light {
    background-color: var(--blue);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

    #opl-cards-wrap .btn-oneplan-light img {
        margin-right: 5px !important
    }

#opl-cards-wrap .btn-oneplan-dark {
    background-color: var(--cyan);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding-left: 10px;
    padding-right: 10px;
}

    #opl-cards-wrap .btn-oneplan-dark img {
        margin-right: 5px !important
    }


#opl-cards-wrap .footer-download img {
    display: inline-block;
    width: 20px;
    ;
}

#opl-cards-wrap .footer-download a {
    font-size: 14px;
    text-decoration: none;
    color: #000
}


#opl-cards-wrap .card-body .accordion .accordion-item {
    border: 0px;
}

#opl-cards-wrap .accordion-button::after {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: auto;
    content: "";
    background-repeat: no-repeat;
    background-size: 1.1rem;
    transition: transform .2s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.62 12.63'%3E%3Cpath fill='white' d='M15.2,3.9h0c0-1.66-2.06-2.44-3.16-1.19l-1.89,2.14c-.72.81-1.99.81-2.7,0l-1.89-2.14c-1.1-1.25-3.16-.47-3.16,1.19h0c0,.44.16.86.45,1.19l4.59,5.21c.72.81,1.99.81,2.7,0l4.59-5.21c.29-.33.45-.75.45-1.19Z'/%3E%3C/svg%3E");
}



#opl-cards-wrap .card-body .accordion-header {
}

#opl-cards-wrap .card-body .accordion-button {
    background-color: var(--blue);
    margin-top: 20px;
    border-radius: 10px;
    color: #fff;
    font-size: 18px
}


.pearl-text {
    display: inline; /* keep whole sentence as one flex item */
    line-height: 1.4;
    color: var(--blue);
}

.pearl {
    padding-bottom: 15px;
    padding-top: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    min-height: 10px;
}

#opl-acc-grid-1 .pearl {
    background-color: #d6d5e4;
}


#opl-acc-grid-2 .pearl {
    background-color: #e6e6e6;
}

#opl-acc-grid-3 .pearl {
    background-color: #d6e4f0;
}

#opl-acc-grid-4 .pearl {
    background-color: #d9eef8;
}

#opl-acc-grid-5 .pearl {
    background-color: #dff2f1;
}

#opl-acc-grid-6 .pearl {
    background-color: #dff2f1;
}

/* -------- medium screen sizes ---------- */

#opl-acc-md-1 .pearl {
    background-color: #d6d5e4;
}


#opl-acc-md-2 .pearl {
    background-color: #e6e6e6;
}

#opl-acc-md-3 .pearl {
    background-color: #d6e4f0;
}

#opl-acc-md-4 .pearl {
    background-color: #d9eef8;
}

#opl-acc-md-5 .pearl {
    background-color: #dff2f1;
}

#opl-acc-md-6 .pearl {
    background-color: #dff2f1;
}


/*------------Small screen sizes------------------*/


#opl-acc-sm-1 .pearl {
    background-color: #d6d5e4;
}


#opl-acc-sm-2 .pearl {
    background-color: #e6e6e6;
}

#opl-acc-sm-3 .pearl {
    background-color: #d6e4f0;
}

#opl-acc-sm-4 .pearl {
    background-color: #d9eef8;
}

#opl-acc-sm-5 .pearl {
    background-color: #dff2f1;
}

#opl-acc-sm-6 .pearl {
    background-color: #dff2f1;
}




/* ---- Mobile only (<768px) — SM carousel headers ---- */
@media (max-width: 767.98px) {
    #opl-cards-wrap #opl-carousel-sm .carousel-inner .carousel-item:nth-child(1) .card .card-header {
        background-color: var(--blue);
    }

    #opl-cards-wrap #opl-carousel-sm .carousel-inner .carousel-item:nth-child(2) .card .card-header {
        background-color: #808080;
    }

    #opl-cards-wrap #opl-carousel-sm .carousel-inner .carousel-item:nth-child(3) .card .card-header {
        background-color: var(--medium-blue);
    }

    #opl-cards-wrap #opl-carousel-sm .carousel-inner .carousel-item:nth-child(4) .card .card-header {
        background-color: var(--bright-blue);
    }

    #opl-cards-wrap #opl-carousel-sm .carousel-inner .carousel-item:nth-child(5) .card .card-header {
        background-color: var(--cyan);
    }

    #opl-cards-wrap #opl-carousel-sm .carousel-inner .carousel-item:nth-child(6) .card .card-header {
        background-color: var(--cyan);
    }
}

/* ---- Shared card/carousel defaults ---- */
#opl-cards-wrap .card {
    height: 100%;
}

#opl-cards-wrap .card-title {
    margin-bottom: 0.25rem;
}

#opl-cards-wrap .card-body {
    display: flex;
    flex-direction: column;
}

#opl-cards-wrap .card .btn-collapse {
    margin-top: auto;
}

#opl-cards-wrap .card-header {
    min-height: 3rem;
    align-items: center;
}

/* ---- Layout visibility ---- */
#opl-cards-wrap .opl-layout-grid {
    display: none;
}

@media (max-width: 1440.98px) {
    .health-plan-cards, .expandable-section {
        display: none;
    }
}

@media (min-width: 992px) {
    #opl-cards-wrap .opl-layout-grid {
        display: block;
    }
}

#opl-cards-wrap .opl-layout-carousel-md {
    display: none;
}

@media (min-width: 768px) and (max-width: 1440.98px) {
    #opl-cards-wrap .opl-layout-carousel-md {
        display: block;
    }
}


@media (max-width: 1440.98px) {
    .health-plan-cards, .expandable-section {
        display: none;
    }
}

#opl-cards-wrap .opl-layout-carousel-sm {
    display: block;
}

@media (min-width: 768px) {
    #opl-cards-wrap .opl-layout-carousel-sm {
        display: none;
    }
}

/* ---- Carousel styling ---- */
#opl-cards-wrap .carousel {
    position: relative;
    z-index: 1;
    overflow: visible;
}

#opl-cards-wrap .carousel-indicators {
    position: static;
    margin: 0.75rem 0 0;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 20px
}

    #opl-cards-wrap .carousel-indicators [data-bs-target] {
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 50%;
        background-color: #000;
        padding: 0;
        margin: 0;
        border: 0;
    }

        #opl-cards-wrap .carousel-indicators [data-bs-target]:focus {
            outline: 2px solid #000;
            outline-offset: 2px;
        }

/* ---- Compact arrows ---- */
#opl-cards-wrap .carousel-control-prev,
#opl-cards-wrap .carousel-control-next {
    position: absolute;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    padding: 0;
    opacity: 1;
    background: transparent;
    z-index: 1050;
}

#opl-cards-wrap .carousel-control-prev-icon,
#opl-cards-wrap .carousel-control-next-icon {
    display: none;
}

#opl-cards-wrap .carousel-control-prev::after,
#opl-cards-wrap .carousel-control-next::after {
    content: "";
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: -1px -1px 23px -5px rgba(0,0,0,0.80);
    background: #3276b2 center/1rem no-repeat;
}

/* Prev icon (custom chevron, color via fill) */
/* Prev icon (white chevron) */
#opl-cards-wrap .carousel-control-prev::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* Next icon (white chevron) */
#opl-cards-wrap .carousel-control-next::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

#opl-cards-wrap #opl-carousel-md .carousel-control-prev {
    left: -5px;
}

#opl-cards-wrap #opl-carousel-md .carousel-control-next {
    right: 5px;
}

#opl-cards-wrap #opl-carousel-sm .carousel-control-prev {
    left: -5px;
}

#opl-cards-wrap #opl-carousel-sm .carousel-control-next {
    right: -5px;
}

@media (max-width: 575.98px) {
    #opl-cards-wrap .carousel-control-prev::after,
    #opl-cards-wrap .carousel-control-next::after {
        width: 2.5rem;
        height: 2.5rem;
    }
}