::-webkit-scrollbar {
    width: 5px !important;
    height: 2px;
}
::-webkit-scrollbar:hover {
    width: 10px !important;
}
::-webkit-scrollbar-track {
    background: none;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
    background: #afb1b3;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, table, tr, td {
    margin: 0px;
}

body, html {
    font-family: Poppins, sans-serif;
}

.widthCenter {
    position: relative;
    max-width: 1600px;
    margin: 0 auto
}

main {
    margin-top: 68px;
    position: relative;
    border-right: 1px solid #e3e3e3;
    border-left: 1px solid #e3e3e3;
}

.container {
    max-width: 1060px;
    width: 100%;
}

.section {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    clear: both;
    overflow: hidden;
    padding-top: 85px;
    padding-bottom: 72px;
}

.bggrey {
    background-color: #F9F9F9;
}

.colorblk {
    color: #000 !important;
    padding-bottom: 18px;
    font-weight: 500;
}

.bgwhite {
    background-color: #FFFFFF !important
}

.oh {
    overflow: hidden !important
}

.greyheading {
    font-size: 22px;
    line-height: 22px;
    font-weight: 700;
    color: #8A93A5;
    padding-bottom: 10px;
}

h3.homeheader2 {
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    color: #233253;
}
h2.homeheader2 {
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    color: #233253;
}

h3.homeheader2+span+p, h3.homeheader2+p {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #8A93A5;
    padding-bottom: 21px;
}
h2.homeheader2+span+p, h2.homeheader2+p {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #8A93A5;
    padding-bottom: 21px;
}

/*  30-12-2020 hover shadow Starts */

.btnred {
    background: #ED1C24;
    color: #FFFFFF;
    border-radius: 4px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    border: 1px solid #ED1C24;
    height: 34px;
    padding: 7px 21px 7px 21px;
    min-width: 135px;
}

.btnred:hover, .btnred:focus, .btnred:active {
    background: #FF3038 !important;
    color: #FFFFFF;
    box-shadow: 0px 8px 12px rgba(237, 28, 36, 0.2);
    border-radius: 4px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    border: 1px solid #ED1C24;
    height: 34px;
    padding: 7px 21px 7px 21px;
    min-width: 135px;
    outline: none;
    outline-style: none;
    outline-width: 0px;
}

.btnred:not(:disabled):not(.disabled).active:focus, .btnred:not(:disabled):not(.disabled):active:focus, .show>.btnred.dropdown-toggle:focus:not(:disabled):not(.disabled).active:focus, .btnred:not(:disabled):not(.disabled):active:focus, .show>.btnred.dropdown-toggle:focus {
    background: #FF3038 !important;
    outline: none;
    outline-style: none;
    outline-width: 0px;
}

.life-ai-iframe-service-class{
    height: 70px;
    width: 260px;
    border: none;
    position: fixed;
    z-index: 99999;
    bottom: 0;
    right: 10px;
}

.btnwhite {
    background: #FFFFFF;
    color: #ED1C24;
    border-radius: 4px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    border: 1px solid #ED1C24;
    height: 30px;
    padding: 5px 18px 5px 18px;
    min-width: 104px;
}

.btnwhite:hover {
    background: #FFFFFF;
    color: #ED1C24;
    border-radius: 4px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    border: 1px solid #FF3038;
    height: 30px;
    padding: 5px 18px 5px 18px;
    min-width: 104px;
    box-shadow: 0px 5px 7px rgba(228, 24, 32, 0.4);
}

/*  30-12-2020 hover shadow  Ends*/

.abtboxholder {
    border: 1px solid #C7CACC;
    background: #FFFFFF;
    padding: 24px 22px 24px 22px;
    margin-bottom: 10px;
}

.abtboxholder:hover {
    box-shadow: 0px 4px 20px rgba(0, 94, 158, 0.05), 3px 6px 10px rgba(50, 130, 196, 0.08);
}

.abtboxholder:before {
    width: 4px;
    height: 100px;
    background-color: red;
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
}

.abtboxholder h6, .mob-abt h6 {
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    color: #8A93A5;
    text-transform: uppercase;
    padding-bottom: 8px;
}

.col-sm-4 .abtboxholder h6, .mob-abt h6 {
    padding-top: 18px;
}

.abtboxholder h4, .mob-abt h4 {
    font-size: 26px;
    line-height: 28px;
    font-weight: 800;
    color: #233253;
    padding-bottom: 2px;
}

.abt-txt {
    float: left;
    margin-top: 20px;
    margin-left: 4px;
}

.left {
    float: left;
}

.abtboxholder p, .mob-abt p {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #233253;
}

.abtboxbig {
    border: 1px solid #C7CACC;
    background: #FFFFFF;
    padding: 0px;
    display: block;
    clear: both;
    overflow: hidden;
}

.abtboxbig.after:after {
    width: 4px;
    height: 100px;
    background-color: red;
    content: "";
    position: absolute;
    right: 15px;
    top: 0;
}

.abtboxbig.before:before {
    width: 4px;
    height: 100px;
    background-color: red;
    content: "";
    position: absolute;
    left: 15px;
    top: 0;
}

.abtboxbig .imgholder {
    float: left;
    width: 48% !important;
    overflow: hidden;
}

.abtboxbig .imgholder {
    height: 240px;
    overflow: hidden;
}

.abtboxbig:hover {
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 94, 158, 0.05), 3px 6px 10px rgba(50, 130, 196, 0.08);
}

.abtboxbig img {
    transition: transform .5s ease;
}

.abtboxbig:hover img {
    transform: scale(1.1);
}

.abtboxbig .abtbigrt {
    float: left;
    width: 52% !important;
    padding: 20px;
}

.abtboxbig h6 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #8A93A5;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.abtboxbig h4 {
    font-size: 26px;
    line-height: 33px;
    font-weight: 800;
    color: #233253;
    padding-bottom: 10px;
    padding-right: 10px;
}

.abtboxbig p {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #8A93A5;
}

.abtboxRt {
    background-color: grey;
    height: 100%;
}

.settle {
    padding-top: 25px !important;
    padding-bottom: 40px !important;
}

.settle h4 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 800;
    color: #233253;
    padding-top: 30px;
}

.settle p {
    font-size: 14px;
    line-height: 20px;
    color: #8a93a5;
}

.bg1 {
    padding: 20px;
    position: relative;
}

.bg1 * {
    color: #FFF;
}

.bg1h4 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    color: #FFFFFF;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 9;
}

.bg1 h6 {
    font-size: 16px;
    line-height: 22px;
    padding-bottom: 10px;
}

.bg1 div {
    bottom: 20px;
    position: absolute;
}

.bg2 {
    padding: 20px;
    position: relative;
}

.bg2 * {
    color: #FFF;
}

.bg2h4 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    color: #FFFFFF;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 9;
    padding-left: 17px;
    padding-right: 17px;
}

.bg2 h6 {
    font-size: 16px;
    line-height: 22px;
    padding-bottom: 10px;
}

.bg2 div {
    bottom: 20px;
    position: absolute;
}

.panel-title a {
    font-size: 22px;
    line-height: 22px;
    font-weight: 400;
    color: #767676;
    display: block;
    background-image: url('../../../content/dam/hdfclifeinsurancecompany/home/icons/arrow-up.png');
    background-repeat: no-repeat;
    background-position:100%;
    margin-top: 78px;
    text-decoration: none;
}

.panel-title a.collapsed {
    font-size: 22px;
    line-height: 22px;
    font-weight: 400;
    color: #767676;
    display: block;
    background-image: url('../../../content/dam/hdfclifeinsurancecompany/home/icons/arrow-down.png');
    background-repeat: no-repeat;
    background-position: right bottom;
}

.swiper-slide {
    /* padding-left: 15px !important; */
}

.disc-txt {
    font-size: 12px;
    line-height: 20px;
    color: #767676;
    margin-top: 8px;
}

#carouselExampleIndicators {
    max-width: 1600px;
    margin: 0 auto;
}

.hght100 {
    height: 100%;
}

.width100 {
    width: 100%;
}

.padtop10 {
    padding-top: 10px !important;
}

.padtop0 {
    padding-top: 0px !important;
}

.padtop15 {
    padding-top: 15px !important;
}

.padtop30 {
    padding-top: 30px !important;
}

.padbot30 {
    padding-bottom: 30px !important;
}

.padbot0 {
    padding-bottom: 0px !important;
}

.mtop0 {
    margin-top: 0px !important;
}

.mtp10 {
    margin-top: 10px !important;
}

.mtp15 {
    margin-top: 15px !important;
}

.mtop30 {
    margin-top: 30px;
}

.mbot50 {
    margin-bottom: 50px !important;
}

.mtop20 {
    margin-top: 20px !important;
}

.carousel-item {
    min-height: 550px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.mouse {
    text-align: center;
    position: relative;
    bottom: -94px;
    z-index: 999;
}

.mouse a {
    animation: MoveUpDown 1s linear infinite;
    position: absolute;
    left: 50%;
    bottom: -20px;
    margin-top: 100px;
}

@keyframes MoveUpDown {
    0%, 100% {
        bottom: 0;
    }
    50% {
        bottom: 10px;
    }
}

#carouselExampleIndicators .carousel-indicators {
    right: 80px !important;
    left: auto;
    bottom: auto;
    top: 23%;
    margin: 0px;
    width: auto;
    display: block;
}

/* 30-12-20 space adjustment starts */

.carousel-indicators li {
    background-color: transparent;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    margin-bottom: 20px !important;
    border: 1px solid #005E9E !important
}

/* 30-12-20 space adjustment ends */

.carousel-indicators li.active {
    background-color: #005E9E;
}

.carousel-caption {
    bottom: auto;
    bottom: 45%;
    left: 5%;
    text-align: left;
    z-index:100;
}

.carousel-indicators li {
    margin-bottom: 8px;
}

.settle-top {
    padding-top: 0px;
}

.plans-wrapper {
    text-align: center;
    width: 100%
}

.plans-holder {
    background-color: #FFFFFF;
    display: inline-block;
    border-radius: 10px;
    padding: 15px;
    margin: 0px 3px 12px 3px;
}

.plans-holder:hover {
    cursor: pointer
}

.plans-holder h5, .swiper-slide .h5 {
    margin-top: 12px;
    font-weight: 600;
    line-height: 14px;
    font-size: 18px;
    color: #ED1C24;
}

.plans-holder h5 span, .swiper-slide .h5 span {
    color: #005e9e;
    font-size: 14px;
}

.bannerh2+p {
    font-size: calc(16px + 3.2vw) !important;
    line-height: normal;
    font-weight: 700;
    color: #233253;
    padding-bottom: 0;
}

.bannerh2 {
    font-size: calc(16px + 2.9vw) !important;
    line-height: normal;
    font-weight: 700;
    color: #233253;
    padding-bottom: 0;
}

.bannerh5 {
    font-size: calc(10px + 0.9vw) !important;
    line-height: normal;
    font-weight: 700;
    color: #8a93a5;
    padding-bottom: 0;
}

.sar-logo img {
    width: 20%
}

.ban-logo img {
    width: 11%
}

.bottom-scroll {
    clear: both;
    /*width: 855px;
    height: 300px;*/
    width: 940px;
    height: 300px !important;
    padding-top: 50px;
    position: absolute;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    bottom: 10px;
    z-index: 99;
    padding-left: 50px;
    padding-right: 50px;
}

.swiper-container1 {
    height: 94%;
    overflow: hidden;
    padding-top: 20px;
}

.swiper-wrapper {
    height: 100%
}

.bottom-scroll .h5 {
    text-align: left;
    display: block;
    line-height: 20px;
}

.chkbx {
    display: inline-block;
    width: 94%;
    padding-left: 8px;
    padding-top: 0;
}

.bottom-scroll .plans-holder {
    width: 100%;
    text-align: left;
    padding-left: 12px;
}

/* // .bottom-scroll .swiper-slide:hover {
//     animation: MoveUpDown1 2s linear;
// }
// @keyframes MoveUpDown1 {
//     0%,
//     100% {
//         bottom: 0px;
//     }
//     50% {
//         bottom: 30px;
//     }
// } */

.product-cateogry .tile {
    display: block;
    padding: 0;
    outline: 0;
    transition: all 1s ease-in-out;
    background: 0 0;
    height: 100%;
    word-break: break-all;
    border-radius: 10px;
}

.product-cateogry .tile:hover {
    background: linear-gradient(242deg, #ED1C24, #ED1C24), #ED1C24;
    box-shadow: -3px -1px 14px rgba(32, 40, 52, .2);
}

.product-cateogry .tile:hover>div {
    background: #fff;
    transform: translate3d(-10px, -10px, 0);
}

/* 30-12-20 shadow effect starts */

.product-cateogry .tile>div {
    padding: 12px;
    background: linear-gradient(62deg, #fff, #f4f4f4), #fff;
    transition: all .3s ease-in-out;
    height: 100%;
    display: block;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(000, 000, 000, 0.4);
    -webkit-box-shadow: 0px 2px 10px rgba(000, 000, 000, 0.4);
    -moz-box-shadow: 0px 2px 10px rgba(000, 000, 000, 0.4);
}

.product-cateogry .tile>div:hover {
    box-shadow: none
}

.progress.active .progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

/* 30-12-20 shadow effect ends */

.bottom-scroll .swiper-slide {
    background: transparent;
    height: 180px !important;
    margin-right: 10px;
    width: 160px !important
}

.swiper-button-next::after, .swiper-button-prev::after {
    opacity: 1.0 !important;
    font-size: 0px !important;
    font-family: none !important;
    width: 80px !important;
}

.bottom-scroll .swiper-button-next {
    right: 3% !important;
}

.swiper-button-next {
    right: 17% !important;
    top: 150px !important;
    left: auto !important
}

/* 30-12-20 Width adjustment starts */

.viewall {
    float: left;
    position: absolute;
    bottom: 23%;
    width: 70px;
    z-index: 999;
    left: 855px
}

/* 30-12-20 Width adjustment ends */

.viewall img {
    width: 100%;
}

.swiper-button-next img {
    width: 200%;
    max-width: 160%;
    outline: none;
}

.swiper-button-prev {
    left: 40px !important;
    top: 150px !important;
    outline: none;
}

.swiper-button-prev img {
    max-width: 160%;
    width: 200%;
    box-shadow: 0px 10px 16px rgba(237, 28, 36, 0.2) !important;
    border-radius: 25px;
    margin-bottom: 35px;
}

.swiper-button-next img {
    box-shadow: 0px 10px 16px rgba(237, 28, 36, 0.2) !important;
    border-radius: 25px;
    margin-bottom: 35px;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 0.45 !important;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.sub.swiper-button-next {
    top: auto !important;
    width: 40px;
    left: 68%;
    bottom: 23px !important;
    display: block;
}

.sub.swiper-button-prev {
    top: auto !important;
    width: 40px !important;
    left: 17% !important;
    bottom: 23px !important;
    display: block;
}

/* .swiper-pagination-bullet-active {
    background-color: #005e9e !important
} */

.padtopgrtxt {
    padding-top: 38px;
}

.panel.panel-default {
    padding-bottom: 16px;
}

.panel.panel-default .panel-collapse {
    padding-top: 20px;
    line-height: 22px;
    font-size: 12px;
    font-weight: 400;
    color: #5A5A5A;
}

.panel-collapse p {
    position: relative;
    margin-top: 12px;
    padding-left: 7px;
}

.panel-collapse p span {
    font-size: 8px;
    line-height: 6px;
    color: #5a5a5a;
    position: absolute;
    top: 8px;
    left: 0;
    font-weight: 700;
}

.panel-collapse p:first-child {
    margin-top: 0px;
}

.disktext {
    line-height: 22px;
    font-size: 12px;
    font-weight: 400;
    color: #8A93A5;
    padding-top: 20px;
    padding-bottom: 20px;
}

.ban-logo {
    padding-bottom: 10px;
}

.abt-sec .col-sm-6, .abt-sec .col-sm-4 {
    padding-left: 5px;
    padding-right: 5px;
}

.claimsettle {
    float: left;
    margin-right: 15px;
    margin-top: 10px;
}

.sel-type {
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 15px;
    line-height: 22px;
    padding-left: 20px;
    padding-right: 20px;
}

.webservices {
    h5 {
        position: relative;
        font-weight: normal;
        font-size: 16px;
        line-height: 22px;
        color: #233253;
        padding-left: 12px;
        padding-bottom: 15px;
    }
    ::before {
        width: 3px;
        height: 24px;
        background-color: red;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
    }
    p {
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 10px;
        color: #233253;
        padding-left: 12px;
        a {
            color: #005E9E;
        }
    }
}

.claimsettle+h4 {
    font-size: 38px;
    padding-top: 43px;
    padding-bottom: 15px;
}

.claimsettle+h4 small {
    font-size: 24px;
    line-height: 55px;
    font-weight: 600;
}

.font-12 {
    font-size: 12px !important;
}

.claimsicon1, .claimsicon2 {
    position: relative;
    padding-left: 70px;
    margin-bottom: 50px;
}

.claimsicon1 h6, .claimsicon2 h6 {
    padding-bottom: 7px;
}

.claimsicon1:before {
    position: absolute;
    left: 0;
    width: 60px;
    height: 57px;
    content: "";
    background: no-repeat 0 0;
}

.claimsicon2:before {
    position: absolute;
    left: 0;
    width: 60px;
    height: 57px;
    content: "";
    background: no-repeat 0 0;
}

.claim-settle-sec {
    padding-top: 33px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* width: auto !important; */
    padding-left: 20px;
}

.swiper-container {
    padding-bottom: 72px !important;
}

.swiper-holder {
    width: 291px;
    height: 354px;
    display: table-cell;
    vertical-align: middle;
    border-top: 1px solid #ced1d3;
    border-bottom: 1px solid #ced1d3;
    border-right: 1px solid #ced1d3;
    border-left: 8px solid red;
    border-radius: 15px;
    overflow: hidden;
    background-color: #FFFFFF;
    padding-left: 20px;
    padding-right: 20px;
}

.sar-logo {
    display: block;
}

.sar-logo-mob {
    display: none;
}

.prod-img-sh-dt {
    display: block;
}

.prod-img-sh-mob {
    display: none;
}

@media (min-width:768px) {
    .icon-wrap:hover .hover-drop-down {
        display: block;
    }
    .mob-hide {
        display: block !important;
    }
    .desk-block {
        display: none !important;
    }
}

.error-page {
    height: 700px;
    position: relative;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 30%;
    text-align: center;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mrgn-space {
    margin-top: 70px;
    margin-bottom: 16px;
}

.mb-none {
    display: block;
    margin: 0 auto;
}

.mb-shw {
    display: none;
    margin: 0 auto;
}

.info-icon {
    position: relative;
    font-weight: normal;
    font-size: 12px;
    line-height: 22px;
    color: #767676;
    padding-left: 25px;
}

.info-icon:before {
    background: no-repeat 0 0;
    width: 16px;
    height: 16px;
    background-color: red;
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
}

.wp-sec {
    display: none;
    font-size: 16px;
    text-transform: uppercase;
    color: #005e9e;
    font-weight: 700;
    text-align: center;
    img {
        position: relative;
        top: -2px;
        margin-right: 4px;
    }
}

.health-desk {
    display: block;
}

.health-mob {
    display: none;
}

.contact-section-wrapper {
    .tabAccordContent {
        padding-bottom: 20px !important;
    }
    .lst {
        border: none !important;
        line-height: 46px;
        font-size: 14px;
        flex-grow: 1;
        flex-basis: 0;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        width: 100%;
    }
    .lst.active {
        background-color: #FFFFFF !important;
    }
    .articleBulletLists li:last-child {
        padding-bottom: 0px !important;
    }
    .lst.active:hover {
        background-color: #FFFFFF !important;
    }
    .lst.active:active {
        background-color: #FFFFFF !important;
    }
    .lst.active:focus {
        background-color: #FFFFFF !important;
    }
    .lst.active:active {
        background-color: #FFFFFF !important;
    }
    .dropbtn {
        background-color: transparent;
        padding: 0;
        border: none;
        cursor: pointer;
    }
    /* Dropdown button on hover & focus */
    .dropbtn:hover, .dropbtn:focus {
        background-color: transparent;
    }
    /* The container <div> - needed to position the dropdown content */
    .dropdown {
        position: relative;
        display: inline-block;
    }
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #FFFFFF;
        min-width: 288px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        right: -19px;
        text-align: left;
    }
    .dropdown-content li {
        padding-left: 20px;
        padding-right: 20px;
        color: #233258 !important
    }
    .dropdown-content li:hover, .dropdown-content li.active {
        color: #FFFFFF !important
    }
    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 7px 16px;
        text-decoration: none;
        display: block;
        line-height: 40px;
        color: #233253
    }
    .dropdown-content a:hover {
        background-color: #FFF
    }
    .show {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .abtboxRt.bg1:after{
        background: rgba(0,0,0,.4) !important;
    }

    .space{
        display:none !important;
    }
    .cs-mobtoppad {
        padding-top: 0px !important;
    }
    .cs-table {
        overflow-x: scroll;
    }
    #mtop0mob {
        margin-top: 0px !important;
    }
    .claim-tabaddjust {
        width: 320px !important;
        margin: 0 auto;
    }
    .claim-online-wrapper .vsteps li {
        padding-right: 0px !important;
    }
    .claim-online-wrapper .vsteps li:last-child {
        padding-bottom: 0px !important;
        height: 76px !important;
    }
    .claim-online-wrapper .vsteps li:last-child:after {
        height: 0px !important;
        display: none !important;
    }
    .health-mob {
        display: block;
        width: 95%;
        background-color: #FFFFFF;
        margin: 0 auto;
        padding: 30px 20px 30px 20px;
        .toggleIcon {
            margin-left: 0px !important;
            margin-right: 10px !important;
        }
        h2 {
            display: none;
        }
        .vsteps {
            margin: 0px !important;
            padding: 0px !important;
            border: none !important;
            li {
                font-size: 12px !important;
                line-height: 18px !important;
                font-weight: normal !important;
            }
        }
        .tabAccordSection .tabAccordMenu.opened a strong {
            font-weight: normal !important;
        }
        h2+p {
            font-size: 15px !important;
            padding-bottom: 20px !important;
        }
    }
    .health-desk {
        display: none;
    }
    .cs-workarea1 .aboutSectionTabMenuWrp {
        overflow-x: unset !important;
    }
    .wp-sec {
        display: block;
    }
    .clform .form-group {
        margin-bottom: 0px !important;
    }
    .cs-banner-section {
        margin-top: 56px !important;
    }
    .orpad {
        padding-top: 24px !important;
    }
    .claim-online-wrapper .downloads li span {
        width: 73% !important;
    }
    .orpad {
        padding-top: 19px;
    }
    .prod-img-sh-dt {
        display: none;
    }
    .prod-img-sh-mob {
        display: block;
        margin: 0 auto;
    }
    .popularMenuList {
        border-right: 0px solid #889e9e !important;
        padding-right: 40px;
    }
    .popularMenuList {
        margin-left: 9px;
    }
    footer .wrapper.footerMenuSec .productMenuSec {
        margin-left: 9px !important
    }
    .mb-none {
        display: none;
    }
    .mb-shw {
        display: block;
    }
    .error-page {
        height: auto;
        min-height: 400px;
        position: relative;
    }
    .vertical-center {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 0%;
        text-align: center;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .vertical-center img {
        width: 80%
    }
    .swiper-button-prev img, .swiper-button-next img {
        max-width: 100%;
    }
    .mob-hide {
        display: none !important;
    }
    .desk-block {
        display: block !important;
    }
    .mtop10 {
        margin-top: 5px !important;
    }
}

@media (max-width:767px) {
    .rupee {
        position: absolute !important;
        left: 21px !important;
        top: 75px !important;
        right: -16px;
        z-index: 99;
        font-family: arial;
    }
    
    .rupee+input {
        margin-left: 0px !important
    }
    .settle-top h4, .settle-top p {
        width: 93%;
        margin: 0 auto;
    }
    .mresptop15 {
        margin-top: 15px;
    }
    .aboutus-sec .col-sm-4 {
        margin-top: 0px;
    }
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 34px !important;
        left: -3px !important;
        width: 100%;
    }
    .swiper-container {
        padding-left: 15px !important;
    }
    #abtpad {
        padding-bottom: 0px !important;
    }
    .pad-top57 {
        padding-top: 57px !important;
    }
    .mob-abt h4 {
        font-size: 24px;
        line-height: 28px;
        padding-bottom: 0;
    }
    .mob-abt h6 {
        font-size: 14px;
        line-height: 22px;
        padding-bottom: 0;
    }
    .mob-abt p {
        font-size: 14px;
        line-height: 22px;
    }
    .bg-mob.section {
        padding-top: 32px !important;
        padding-bottom: 27px !important;
        padding-left: 0;
        padding-right: 0;
    }
    .section {
        padding-top: 56px !important;
        padding-bottom: 60px !important;
    }
    .carousel-item {
    }
    .bg-mob {
        background-color: #f5f8f8
    }
    .vhid {
        visibility: hidden;
    }
    .vhid+h5 {
        top: -54px !important;
    }
    
    .mb .plans-holder {
        height: 108px;
        padding: 0px;
        width: 100px;
        margin: 0 4px 8px!important;
        box-shadow: 3px 3px 8px 1px #e4e3e3;
    }
    .mb .plans-holder h5 {
        font-size: 14px !important;
        line-height: 13px;
        position: relative;
        top: -30px;
    }
    .viewall {
        display: none;
    }
    .claimsettle {
        float: none;
        margin: 0 auto;
        display: block;
        width: 100px;
    }
    .padtopgrtxt {
        padding-top: 0px;
    }
    .section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .sar-logo {
        display: none;
    }
    .sar-logo-mob {
        text-align: center;
        display: block;
    }
    .bannerh5 {
        font-size: 16px;
        line-height: 22px;
        text-align: center;
        padding-bottom: 0px !important
    }
    .bannerh2 {
        font-size: 34px !important;
        line-height: 45px;
        text-align: center;
        padding-bottom: 0px !important
    }
    .carousel-caption {
        bottom: auto;
        width: 90% !important;
        top: 5%;
        padding-top: 0px;
    }
    .carousel-item {
        background-size: 100% !important
    }
    .ban-logo1 {
        text-align: right;
    }
    .ban-logo1 img {
        width: 25%;
    }
    .greyheading {
        font-size: 16px;
        line-height: 22px;
        padding-bottom: 4px;
        text-align: center
    }
    h3.homeheader2 {
        font-size: 24px;
        text-align: center;
        line-height: 30px;
        padding-top: 4px;
        padding-bottom: 9px;
    }
    h2.homeheader2 {
        font-size: 24px;
        text-align: center;
        line-height: 30px;
        padding-top: 4px;
        padding-bottom: 9px;
    }
    h3.homeheader2+span+p, h3.homeheader2+span+p+p, h3.homeheader2+p {
        text-align: center;
        font-size: 14px !important;
        line-height: 22px;
        padding-top: 0px;
        width: 80%;
        margin: 0 auto;
    }
    h2.homeheader2+span+p, h2.homeheader2+span+p+p, h2.homeheader2+p {
        text-align: center;
        font-size: 14px !important;
        line-height: 22px;
        padding-top: 0px;
        width: 80%;
        margin: 0 auto;
    }
    h3.homeheader2+span+p+button, h3.homeheader2+span+p+p+button {
        margin: 0 auto;
        display: block
    }
    h2.homeheader2+span+p+button, h2.homeheader2+span+p+p+button {
        margin: 0 auto;
        display: block
    }
    .settle-top {
        padding-top: 0px;
    }
    .settle h4 {
        font-size: 16px;
        line-height: 16px;
        text-align: center;
        padding-bottom: 5px;
        font-weight: 700;
        color: #233253;
    }
    .settle h4+p {
        font-size: 14px;
        line-height: 14px;
        text-align: center;
        font-weight: 500;
        padding-bottom: 3px;
        color: #8A93A5;
    }
    .claimsettle+h4 {
        padding-top: 10px;
    }
    .font28 {
        font-size: 28px !important;
        line-height: 34px;
    }
    .abtboxbig .imgholder {
        margin-bottom: 0px;
        min-height: 249px;
        width:100% !important;
    }
    .bg1 {
        margin-bottom: 9px;
        margin-left: 10px;
    }
    .bg2 {
        margin-bottom: 16px;
        margin-left: 10px;
        width: 95% !important;
    }
    .abtboxbig.after::after {
        background-color: transparent !important;
    }
    .abtboxbig {
        border: none;
        box-shadow: none;
    }
    .panel-title a.collapsed {
        font-size: 14px;
    }
    .disclaimers-sec .panel-title a {
        /* font-size: 22px !important; */
        margin-top: 0px;
    }
    .imgholder {
        width: 100% !important
    }
    .imgholder .desk-block {
        padding: 20px 20px 15px 20px !important;
    }
    .imgholder .db1 {
        padding: 20px 20px 36px 20px !important;
    }
    .abtboxbig::before {
        display: none;
    }
    .imgholder .desk-block {
        position: absolute;
        bottom: 0;
        padding: 20px;
    }
    .abtboxbig h4, .abtboxbig h6 {
        color: #FFFFFF;
        text-align: left;

    }
.articles .abtboxbig h4{
background-color: rgba(0,0,0,0.6);
            }
    .abtboxbig h4 {
        font-size: 16px;
        line-height: 19px;
        font-weight: 800;
    }
    .abtboxbig h6 {
        font-size: 16px;
        line-height: 17px;
    }
    .bg1, .bg2 {
        height: 200px !important;
        padding: 0;
        margin: 0;
    }
    .bg1 h4, .bg2 h4 {
        font-size: 16px;
        line-height: 19px;
    }
    .mob-abt {
        text-align: center !important
    }
    .carousel-item {
        min-height: auto !important;
        height: 430px !important;
        background-position: bottom center !important
    }
    #carouselExampleIndicators .carousel-indicators {
        bottom: 0;
        top: auto;
        margin: 0px;
        width: 100% !important;
        right: auto !important;
        text-align: center;
        display: block;
    }
    .carousel-indicators li {
        background-color: transparent;
        width: 6px;
        height: 6px;
        border-radius: 8px;
        border: 1px solid #ffffff !important;
    }
    .carousel-indicators li {
        display: inline-block;
    }
    .carousel-indicators li.active {
        background-color: #FFFFFF;
    }
    .carousel-caption {
        bottom: auto;
        bottom: 45%;
        left: 5%;
        text-align: left;
    }
    .carousel-indicators li {
        margin-bottom: 8px;
    }
    .bottom-scroll {
        display: none;
    }
    .bg-Term_plans, .bg-Ulip, .bg-Savings, .bg-pos, .bg-combo, .bg-Retirement, .bg-Health, .bg-Term_plans, .bg-Group, .bg-Childrens {
        transform: scale(0.6);
        position: relative;
        margin-top: -14px;
    }
    .bg-Talk_to_an_Advisor_right_away, .bg-Do_you_need, .bg-Covid_19_Coverage, .bg-BFSI_Awards {
        margin: 0 auto;
        transform: scale(0.8, 0.8);
        margin-top: -25px !important;
    }
    .bg-Covid_19_Coverage {
        position: relative;
        top: 20px;
        margin-bottom: 6px;
    }
    .pbot56 {
        padding-bottom: 56px;
    }
    /* .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        background: #FFFFFF !important;
        opacity: 1.0 !important;
        border: 1px solid #005e9e !important;
    }
    .swiper-pagination-bullet-active {
        background-color: #005e9e !important;
    } */
    .btnred {
        width: 174px;
    }
    .font-28 {
        font-size: 28px !important;
    }
    .font-16 {
        font-size: 16px !important;
    }
    .font-14 {
        font-size: 14px !important;
    }
    .font-12 {
        font-size: 12px !important;
    }
    .font-12 {
        font-size: 12px !important;
    }
    .color000 {
        color: #000000 !important
    }
    .color85 {
        color: #858686 !important
    }
    .calculator-section .select-holder1 {
        max-width: 100% !important;
    }
    .calculator-section .form-group input {
        width: 100% !important;
    }
    .calculator-section .close-icon {
        right: 20px !important;
    }
    .liabilities-sec .form-select, .calculator-section .select-holder1 select {
        width: 110%!important;
    }
    .plans-wrapper {
        line-height: 17px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 440px;
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-device-width: 767px) and (orientation: landscape) {
    .carousel-item {
        background-size: 68% !important;
    }
}

/*Illustration css */

.bg-Do_you_need {
    display: inline-block;
    width: 359px;
    height: 332px;
    background: -46px -10px;
}

.bg-Covid_19_Coverage {
    display: inline-block;
    width: 365px;
    height: 253px;
    background: -10px -362px;
}

.bg-Talk_to_an_Advisor_right_away {
    display: inline-block;
    width: 376px;
    height: 330px;
    background: -476px -10px;
    animation: MoveRight 1s linear infinite;
}

@keyframes MoveUpDown {
    0%, 100% {
        bottom: 0;
    }
    50% {
        bottom: 10px;
    }
}

/* Home Spriteicons */

.bg-About_Us {
    display: inline-block;
    width: 78px;
    height: 78px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -508px -310px;
}

.bg-Android {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -10px -527px;
}

.bg-Apple {
    display: inline-block;
    width: 28px;
    height: 29px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -552px -429px;
}

.bg-Asset_management {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -236px -316px;
}

.bg-BFSI_Awards {
    display: inline-block;
    width: 173px;
    height: 173px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -10px -10px;
}

.bg-Branches {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -508px -10px;
}

.bg-Bullet {
    display: inline-block;
    width: 21px;
    height: 21px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -359px -527px;
}

.bg-call_header_hover {
    display: inline-block;
    width: 46px;
    height: 46px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -429px -139px;
}

.bg-call_header {
    display: inline-block;
    width: 46px;
    height: 46px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -429px -205px;
}

.bg-Cancel {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -608px -50px;
}

.bg-Chat {
    display: block;
    float: right;
    position: fixed;
    bottom: 20px;
    right: 0;
    z-index: 999;
}

.bg-Chat a {
    display: block;
    clear: both;
    width: 63px;
    height: 66px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -336px -316px;
}

.floater {
    position: absolute;
    right: 30px;
    bottom: 0px;
    width: 63px;
}

.bg-Chat1 {
    display: block;
    float: right;
    clear: both;
    margin-bottom: 10px;
}

.bg-Chat1 a {
    display: block;
    width: 38px;
    height: 38px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/home/icons/message.png') 0 0 no-repeat;
    background-size: 99%;
    margin-top: 4px;
}

.bg-cll {
    display: block;
    float: right;
    clear: both;
    margin-bottom: 10px;
}

.bg-cll a {
    display: block;
    width: 38px;
    height: 37px;
    background: 0px 0px;
}

.bg-Childrens {
    display: inline-block;
    width: 93px;
    height: 93px;
    background: 0 0;
}

.bg-Customer {
    display: inline-block;
    width: 21px;
    height: 18px;
    background: -442px -527px;
}

.bg-Employee {
    display: inline-block;
    width: 17px;
    height: 20px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -608px -10px;
}

.bg-FB {
    display: inline-block;
    width: 42px;
    height: 42px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -203px -123px;
}

.bg-Fund_Performance {
    display: inline-block;
    width: 78px;
    height: 78px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -10px -429px;
}

.bg-Group {
    display: inline-block;
    width: 93px;
    height: 93px;
    background: 0 0;
}

.bg-HDFC_logo {
    display: inline-block;
    width: 87px;
    height: 57px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -316px -236px;
}

.bg-Health {
    display: inline-block;
    width: 93px;
    height: 93px;
    background: 0 0;
}

.bg-Instagram {
    display: inline-block;
    width: 42px;
    height: 42px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -236px -203px;
}

.bg-Knowledge_Center {
    display: inline-block;
    width: 78px;
    height: 78px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -108px -429px;
}

.bg-Language {
    display: inline-block;
    width: 53px;
    height: 34px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -429px -271px;
}

.bg-Language_1 {
    display: inline-block;
    width: 52px;
    height: 34px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -429px -325px;
}

.bg-Linkedin {
    display: inline-block;
    width: 42px;
    height: 42px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -304px -429px;
}

.bg-Lives_insured {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -508px -110px;
}

.bg-Login_hover {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -429px -379px;
}

.bg-Login {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -265px -123px;
}

.bg-menu {
    display: inline-block;
    width: 24px;
    height: 14px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -350px -491px;
}

.bg-mouse_cursor {
    display: inline-block;
    width: 59px;
    height: 109px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -429px -10px;
}

.bg-Online_Call {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -233px -527px;
}

.bg-Online_Email {
    display: inline-block;
    width: 20px;
    height: 17px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -483px -527px;
}

.bg-Online_Request_call_back {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -275px -527px;
}

.bg-Online_sms {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -317px -527px;
}

.bg-Partner {
    display: inline-block;
    width: 26px;
    height: 15px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -304px -491px;
}

.bg-Policy_Whatsapp {
    display: inline-block;
    width: 23px;
    height: 24px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -190px -527px;
}

.bg-Retirement {
    display: inline-block;
    width: 93px;
    height: 93px;
    background: 0 0;
}

.bg-Savings {
    display: inline-block;
    width: 93px;
    height: 93px;
    background: 0 0;
}

.bg-pos {
    display: inline-block;
    width: 93px;
    height: 93px;
    background: 0 0;
}

.bg-combo {
    display: inline-block;
    width: 93px;
    height: 93px;
    background: 0px 0px;
}

.bg-search_hover {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -608px -84px;
}

.bg-search {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -236px -265px;
}

.bg-hand_cursor {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -58px -527px;
}

.bg-see_more_arrow {
    display: inline-block;
    width: 17px;
    height: 8px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -608px -117px;
}

.bg-Slideshare {
    display: inline-block;
    width: 42px;
    height: 42px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -366px -429px;
}

.bg-Speaker {
    display: inline-block;
    width: 22px;
    height: 19px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -400px -527px;
}

.bg-Star_no_filled {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -608px -145px;
}

.bg-star_filled {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -608px -177px;
}

.bg-Subscripe_failed {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -102px -527px;
}

.bg-Subscripe_sucess {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -146px -527px;
}

.bg-Sum_assuredsvg {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -508px -210px;
}

.bg-Term_plans {
    display: inline-block;
    width: 93px;
    height: 93px;
    background: 0 0;
}

.bg-Tools_and_Calculators {
    display: inline-block;
    width: 78px;
    height: 78px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -206px -429px;
}

.bg-Twitter {
    display: inline-block;
    width: 42px;
    height: 42px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -428px -429px;
}

.bg-Ulip {
    display: inline-block;
    width: 93px;
    height: 93px;
    background: 0 0;
}

.bg-Youtube {
    display: inline-block;
    width: 42px;
    height: 42px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/homeiconSprite.png') -490px -429px;
}

.bg1 {
    display: inline-block;
    width: 100%;
    background: 0px 0px;
    background-size: cover;
    background-position:50%;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}


.bg1:hover {
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.bg2 {
    display: inline-block;
    width: 100%;
    background: 0px 0px;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    background-size: 100%;
}

.bg2:hover {
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.swiper-slide span {
    margin: 0 auto !important
}

.calculator-section {
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    display: none;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #bfc0c1;
    background-color: #FFFFFF;
    margin: 68px auto;
}

.calculator-section .close-icon {
    position: absolute;
    top: 26px;
    right: 26px;
    cursor: pointer;
    font-size: 23px;
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/pop-close.png') no-repeat 0px 0px;
}

.calculator-section h3 {
    color: #233253;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 16px;
}

.calculator-section .calc-btn {
    display: block;
    text-transform: uppercase;
    margin: 0 auto 49px;
}

.calculator-section .form-group label {
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    color: #8a93a5;
    display: block;
}

.calculator-section .select-holder1 select {
    width: 110%;
    border: 0px solid transparent;
    background-color: transparent !important;
    font-size: 14px;
    color: #233253;
    line-height: 22px;
    font-weight: 500;
    outline: none;
}

.calculator-section .select-holder1 {
    background: url('../../../content/dam/hdfclifeinsurancecompany/select-arrow.png') no-repeat right center;
    max-width: 200px;
    width: 100%;
    overflow: hidden;
    padding-top: 4px;
    border: 1px solid #c7cacc;
    height: 34px;
    padding-left: 5px;
}

.select-holder2 {
    background: no-repeat right center;
    max-width: 187px;
    width: 100%;
    overflow: hidden;
    padding-top: 4px;
    border: 1px solid #ed1c24;
    height: 34px;
    padding-left: 5px;
    background-color: #FFFFFF;
    border-radius: 3px;
    margin: 0 auto;
}

.select-holder2 select {
    width: 110%;
    border: 0px solid transparent;
    background-color: transparent !important;
    font-size: 14px;
    color: #ed1c24;
    line-height: 22px;
    font-weight: 500;
    outline: none;
}

.rupee {
    position: relative;
    left: 8px;
    top: 3px;
    right: -16px;
    top: 1px;
    z-index: 99;
    width: 15px;
    font-family: arial;
}

.rupee+input {
    padding-left: 18px !important;
    margin-left: -8px;
}

.calculator-section .form-group input
/*,
.calculator-section .form-group select*/

    {
    width: 200px;
    height: 32px;
    box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid #c7cacc;
    font-size: 14px;
    color: #233253;
    line-height: 22px;
    font-weight: 500;
    position: relative;
    outline: none;
}

@media only screen and (max-width: 640px) {
    .calculator-section .form-group input, .calculator-section .form-group select {
        width: 100%;
    }
}

.calculator-section .calculate-bottom-section {
    border-top: 1px solid #e7e7e7;
    text-align: center;
    padding-top: 40px;
    display: none;
}

.calculator-section .calculate-bottom-section h6 {
    color: #233253;
    font-size: 28px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 12px;
}

.calculator-section .calculate-bottom-section p {
    font-size: 16px;
}

.calculator-section .calculate-bottom-section h1 {
    font-size: 40px;
    line-height: 40px;
    color: #233253;
    margin-top: 16px;
    margin-bottom: 40px;
    font-weight: 700;
}

.calculator-section .calculate-bottom-section small {
    font-size: 12px;
    line-height: 20px;
    text-align: left;
    display: block;
}

.calculator-section #range-slider-wrapper {
    width: 257px;
    height: 67px;
    box-sizing: border-box;
    padding-top: 37px;
    position: relative;
}
.calculateSection input.years[type=number] {
    width: 55px!important;
    padding: 0 14px!important;
}
.side-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #666;
    margin-left: 12px;
}

@media only screen and (max-width: 640px) {
    .calculator-section #range-slider-wrapper {
        width: 100%;
    }
}

.calculator-section #range-slider-wrapper .range-limit {
    font-size: 16px;
    line-height: 22px;
    color: #e5e5e5;
    position: absolute;
    bottom: -5px;
}

.calculator-section #range-slider-wrapper .range-limit.max {
    right: 0;
}

.calculator-section .rangeslider__fill {
    box-shadow: none;
    background: #ed1c24;
    height: 6px;
}

.calculator-section .rangeslider {
    height: 8px;
    border-radius: 3px;
    background: #e5e5e5;
    box-shadow: none;
}

.calculator-section .rangeslider__handle {
    width: 16px;
    height: 16px;
    box-shadow: none;
    margin-top: 4px;
    background: #fff;
    background-image: none !important;
    border: 2px solid #ed1c24;
    box-shadow: 0 2px 3px rgba(237, 28, 36, 0.16);
}

.calculator-section .rangeslider__handle:after {
    background: none;
}

.calculator-section .live-range-val {
    position: absolute;
    top: 11px;
    left: 7%;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    transform: translateX(-30%);
}



@media (max-width:1024px) {
    .fmob {
        text-align: center !important
    }
    main {
        margin-top: 68px !important;
    }
    .mb0 {
        margin-bottom: 0px !important;
    }
    .side-strip img {
        display: none;
    }
    footer .footerFormSec .stayUpdatedSec {
        display: block;
    }
    footer .footerFormSec .footerFormBlk {
        display: none;
    }
    footer .appDwnldSec, footer .stayUpdatedSec {
        max-width: 600px;
    }
    /*
    #carouselExampleIndicators {
        margin-top: 109px;
    }*/
}

.side-strip {
    position: absolute;
    width: 60px;
    height: 100%;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 999;
    border-right: 1px solid #F9F9F9;
}

.search-suggestions {
    height: 100px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 41px;
    z-index: 99999;
    display: none;
}

.search-suggestions-selectOption li {
    color: #233253;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    padding: 16px 0px 16px 45px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.search-suggestions-selectOption li span {
    color: #808285;
    font-size: 10px;
    line-height: 14px;
    right: 30px;
    position: absolute;
}

.search-suggestions-selectOption li:hover {
    background: #EBF5F9;
}

ul.search-suggestions-selectOption {
    border: 1px solid rgba(0, 0, 0, 0.08);
    height: 130px;
    overflow-y: auto;
    background: #fff;
    border-radius: 7px;
}

#carouselExampleIndicators .carousel-item {
    background: no-repeat 20% scroll;
}

.pad-top-fd {
    padding-top: 54px;
}

@media (min-width:1025px) {
    .container.aboutus-sec {
        padding: 0;
    }
}

/* scedule a call */

.modal.sac {
    width: 100%;
    /* margin-left: 5% */
}

.modal.sac .modal-dialog.modal-lg {
    margin: 0 auto;
    margin-top: 100px;
}

.modal-content {
    border-radius: 0px;
    padding: 40px 20px 40px 20px;
}

.sac input {
    background-color: #f4f4f4;
    font-size: 12px;
    font-style: italic;
    color: #767676;
    height: 47px;
    outline-style: none;
    outline-width: 0px;
    border: 0px solid transparent;
    box-shadow: none !important
}

.sac input:focus {
    background-color: #f4f4f4;
}

.sac label {
    font-size: 14px;
    color: #233253;
}

.select-holder {
    background-color: #f4f4f4;
    background: url(../../../content/dam/hdfclifeinsurancecompany/images/home-images/select-arrow.png) no-repeat right center #f4f4f4 !important;
    height: 38px;
    width: 100%;
    OVERFLOW: HIDDEN;
    padding-top: 7px;
    padding-left: 10px;
    cursor: pointer;
}

.select-holder select {
    cursor: pointer;
    width: 100%;
    border: 0px solid transparent;
    background-color: transparent !important;
    font-size: 12px;
    font-style: italic;
    outline: none;
    color: #767676;
    -webkit-appearance: none;
    appearance: none;
}

.sac .row {
    padding-bottom: 10px;
}

.sac .row:last-child {
    padding-bottom: 0px;
}

.sac .carousel-item {
    min-height: 65px !important;
    height: auto !important;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
}

.sac .carousel-item .col-3, .sac .carousel-item .col-4, .sac .carousel-item .col-12 {
    font-size: 14px;
    color: #233253;
}

.sac .carousel-item .col-3 a, .sac .carousel-item .col-4 a, .sac .carousel-item .col-12 a {
    font-size: 14px;
    color: #9098a8;
}

.sac .carousel-item .col-3 a.active, .sac .carousel-item .col-4 a.active, .sac .carousel-item .col-12 a.active {
    font-size: 14px;
    color: #233253;
}

.sac .carousel-control-next, .sac .carousel-control-prev {
    height: 80px;
}

.sac .carousel-control-prev {
    left: -46px;
}

.sac .carousel-control-next {
    right: -46px;
}

.sac .drop-section {
    position: absolute;
    border: 1px solid red;
    width: 558px;
    border: 1px solid #c7cacc;
    background-color: #FFFFFF;
    z-index: 99999;
    padding: 30px 30px 30px 30px;
    display: none;
    top: 81px;
    z-index: 99999 !important;
}

.sac .drop-section h6 {
    font-size: 16px;
    line-height: 22px;
    color: #233253;
}

.sac .time {
    width: 100%;
    display: table;
    border-collapse: collapse;
    margin: 0 auto;
}

.sac .time li {
    width: 25%;
    display: table-cell;
    border: 1px solid #c7cacc;
    vertical-align: middle;
}

.sac .time li a {
    width: 100%;
    display: block;
    text-align: center;
    padding-top: 10px !important;
    font-size: 12px !important;
    height: 40px;
    color: #233253;
}

.sac .time li a:hover {
    background-color: #005E9E;
    color: #FFFFFF;
}

.sac .time li a.active {
    background-color: #005E9E;
    color: #FFFFFF;
}

.sac p a {
    font-size: 14px;
    color: #233253;
}

.sac p {
    padding-top: 10px;
}

.sac .time li a {
    width: 100%;
    display: block;
    text-align: center;
    padding-top: 8px;
    font-size: 14px;
    height: 40px;
    color: #233253;
}

.sac #ok .btnred {
    min-width: 80px !important
}

.blankRTE .fontsizesmall{
	font-size:13px !important;
    }

.blankRTE-op .fontsizesmall{
    font-size:13px !important;
}

footer .footerInfo h4, .footerInfo h4 p {
    font-size: 16px;
    line-height: 23px;
    font-weight: 400;
}

footer .stayUpdatedSec {
    max-width: 300px
}

footer .appDwnldSec {
    max-width: 322px
}

footer .custom-check-box , .appDwnldForm .custom-check-box{
    margin-top: 12px !important;
}

/* Custom check box start */

.custom-check-box {
    display: block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #5a5a5a !important;
}

.custom-check-box input {
    position: absolute;
    opacity: 0;
    left:0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-check-box input:checked~.checkmark {
    background-color: #fff;
}

.custom-check-box input:checked~.checkmark:after {
    display: block;
}

.custom-check-box .checkmark {
    position: absolute;
    top: 5px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 1px;
}

.custom-check-box .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-check-box .checkmark:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #ed1c24;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.slidedesc {
    display: block
}

.slidemob {
    display: none !important
}

.drop-section:before {
    content: "";
    position: absolute;
    width: 24px;
    height: 12px;
    top: -12px;
    background: no-repeat;
}

.colorred>span {
    color: #ED1C24 !important;
}

.colorred a {
    color: #233253!important;
}

.drop-section .carousel-item .text-center {
    cursor: pointer;
}

.btn-close {
    width: 102px;
    height: 102px;
    left: 50%;
    position: absolute;
    top: -38px;
    transform: translateX(-50%);
}

.curve-container {
    background-color: #FFFFFF;
    position: relative;
    margin-top: -200px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 30px;
}

.headh4 {
    display: inline-block;
    position: relative;
    font-size: 22px;
    font-weight: 600;
    color: #ED1C24;
    top: -34px;
    left: -15px;
}

.headh4 span {
    color: #005e9e
}

.curve-container h4+P {
    font-size: 12px;
    color: #555555;
    line-height: 17px;
    padding-bottom: 12px;
}

.swip-section {
    width: 90%;
    height: 330px;
    position: relative;
    overflow: scroll;
    padding: 40px 0px 40px 16px;
}

.swip-section .swip-section-inner {
    position: absolute;
    width: 890px;
}

.bot-box-holder {
    background-color: #fff;
    padding: 20px 25px 20px 25px;
    padding-left: 15px;
    margin: 0 3px 12px;
    width: 262px;
    height: 268px;
    float: left !important;
    /* border: 1px solid #D9D9D9;*/
    box-shadow: 0px 10px 18px rgba(18, 89, 157, 0.12);
    border-radius: 20px;
    margin-right: 30px;
    border: 1px solid #e1e1e1;
    overflow: hidden;
}

.rt-arrow {
    position: relative;
    right: -25px;
    bottom: 29px;
}

.viewmre {
    display: none !important;
}

html, body {
    height: 100%;
}

.h5 {
    display: inline-block;
    position: relative;
    font-size: 18px;
    color: #ED1C24;
    font-weight: 600;
    padding-bottom: 0px;
    margin-bottom: 0px !important;
}

.h5 span {
    color: #005e9e
}

.colorred {
    color: #ED1C24
}

.colorblue{
    color: #005e9e;
}

.fontWeight600{
    font-weight: 600 !important;
}

.fontWeight700{
    font-weight: 700 !important;
}
.font-17 {
    font-size: 17px !important;
}

.marginBottom10{
    margin-bottom: 10px !important;
}
.h5+p {
    font-size: 12px;
    line-height: 15px;
    color: #bbbbbb;
    padding-top: 13px;
    padding-bottom: 15px;
}

.bot-box-holder ul {
    clear: both;
    overflow: hidden;
    margin: 0px !important;
    padding: 0px;
    width: 100%;
}

.bot-box-holder ul li {
    clear: both;
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    line-height: 16px;
    color: #555555;
    padding-bottom: 8px;
}

.pad-top-fd {
    padding-top: 54px;
}

.disclaimers-sec .panel-collapse li {
    /* padding-bottom: 10px; */
    margin-top:15px;
}

.disclaimers-sec .panel-collapse ul li{
    list-style:disc;
}

.disclaimers-sec .panel-collapse ul{
    padding:revert;
}

.disclaimers-sec .panel-collapse ol {
    margin: 0 0 0 12px;
    padding: 0px;
}

.reach-out-to-us-inner .verticalTab li .active {
    color: #ed1c24;
    background: #eaf1f8;
}

@media only screen and (max-width: 767px) {
    .claim-settle-sec {
        text-align: center !important;
        padding-top: 10px
    }
    footer .stayUpdatedSec {
        max-width: 600px;
    }
    .modal.sac {
        width: 92%;
        margin-left: 5%
    }
    .recomendPlans>div a {
        margin-bottom: 20px !important;
    }
    .floater {
        position: fixed !important;
        bottom: 20px;
        right: 20px;
        z-index: 99999 !important
    }
    .calculator-section .form-group {
        margin-bottom: 1.6rem;
    }
    .calculator-section {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 0px;
        border: 0px solid red;
    }
    .calculator-section .close-icon {
        position: absolute;
        top: 32px;
        font-size: 23px;
        right: 40px !important;
    }
    .carousel-item {
        background-size: 100% !important
    }
    .sac .drop-section {
        width: 90% !important
    }
    .sac .carousel-item {
        min-height: 65px !important;
        height: 65px !important;
        background-image: none !important;
    }
    .sac .time {
        width: 100%;
        display: table;
        border-collapse: collapse;
        margin: 0 auto;
        padding: 0;
    }
    .sac .time li {
        width: 100%;
        display: block !important;
        border: 1px solid #c7cacc;
    }
    .mob-show {
        display: none !important
    }
    .slidedesc {
        display: none
    }
    .slidemob {
        display: block !important
    }
    .bg-mob .plans-holder {
        position: relative;
    }
    .disclaimers-sec .panel-group {
        padding-left: 10px;
        padding-right: 10px;
    }
    .sac .row {
        padding-bottom: 0px;
    }
    .sac .form-group {
        margin-bottom: 21px;
    }
    .sac .carousel-control-prev {
        left: -12px;
    }
    .sac .carousel-control-next {
        right: -12px;
    }
    .mreshw {
        display: block !important;
    }
    .bg-mob {
        background-color: #f5f8f8 !important;
    }
    .mob-cent {
        text-align: center !important;
        margin-top: 20px;
    }
    .mob-cent .btnred {
        width: 100px !important
    }
    .padtop40 {
        text-align: center !important;
        padding-top: 10px !important;
    }
}

.modal-dialog.modal-lg {
    margin: 0px;
}

.modal-dialog {
    pointer-events: unset;
}

@media (min-width: 1500px) {
    .bottom-scroll .swiper-slide {
        background: transparent;
        height: 180px !important;
        margin-right: 10px;
    }
    .swiper-wrapper {
        margin-top: 25px;
    }
    .viewall {
        bottom: 20%;
    }
    .swiper-button-next, .swiper-button-prev {
        top: 188px !important
    }
}

.width100 {
    width: 100%;
}

.close-icon1 {
    position: absolute;
    top: 26px;
    right: 26px;
    cursor: pointer;
    font-size: 23px;
    z-index: 999;
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url('../../../content/dam/hdfclifeinsurancecompany/images/home-images/pop-close.png') no-repeat 0px 0px;
}

.getQuoteSec {
    display: flex;
    justify-content: center;
    margin: 50px;
}

.recomendPlans>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.recomendPlans h3 {
    font-weight: 700;
}

.recomendPlans>div a {
    background: #fff;
    border: 1px solid #c7cacc;
    box-shadow: 0 4px 20px rgba(0, 94, 158, .05), 3px 6px 10px rgba(50, 130, 196, .08);
    font-weight: 600;
    font-size: 16px;
    line-height: 51px;
    color: #005e9e;
    min-width: 262px;
    height: 51px;
    position: relative;
    display: block;
    padding: 0 18px;
    margin: 0 16px;
}

.recomendPlans>div a:after {
    content: "";
    position: absolute;
    left: 0;
    background: #ed1c24;
    top: 0;
    width: 4px;
    height: 100%;
}

.arial {
    font-family: arial !important;
}

.padtop40 {
    padding-top: 40px
}

/*@media screen and (max-width: 1100px) and (min-width: 768px) {*/

@media (min-device-width:768px) and (max-device-width:1100px) {
    .bottom-scroll {
        width: 553px
    }
    .viewall {
        left: 514px;
        bottom: 21%;
    }
    #carouselExampleIndicators .carousel-item {
        background-position: bottom center !important;
        min-height: 650px !important
    }
}

.ratingStar path {
    /* fill: #ed1c24 !important;
    stroke: #ed1c24 !important; */
}

.heart path {
    fill: #ffffff;
    stroke: #233253;
}

.rated path {
    fill: rgb(237, 191, 28);
    stroke: rgb(237, 191, 28);
    opacity: 1;
}

.success-form {
    display: none;
    text-align: center;
    padding: 70px;
}

.disclaimers-sec .panel.panel-default {
    padding-bottom: 20px;
    border-bottom: .5px solid #c7cacc;
}

/* Customer css */

.cs-workarea {
    max-width: 1090px;
    clear: both;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    padding-top: 56px;
    padding-left: 15px;
    padding-right: 15px;
}

.product-search-autofill {
    display: none;
    position: absolute;
    left: 0;
    top: 40px;
    background: #fff;
    border: 1px solid #89949b;
    box-sizing: border-box;
    box-shadow: 0px 0px 8px rgba(0, 94, 158, 0.05), 1px 2px 4px rgba(50, 130, 196, 0.08);
    padding: 5px 16px;
    z-index: 9;
    width: 100%;
    ul {
        li {
            font-size: 12px;
            line-height: 23px;
            color: #233253;
            border-top: 1px solid #ddd;
            padding: 4px 25px;
            cursor: pointer;
            &:first-child {
                border-top: 0;
            }
            &:hover {
                color: #ed1c24;
            }
        }
    }
}

.cs-workarea .cs-box-holder {
    border: 1px solid #C7CACC;
    padding: 32px;
    position: relative;
    margin-bottom: 24px;
}

.cs-workarea .cs-box-holder:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.cs-workarea .cs-box-holder:before {
    width: 4px;
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    z-index: 1;
    background-color: #ED1C24
}

.cs-workarea .cs-box-holder h3 {
    font-family: Poppins, sans-serif;
    font-size: 28px;
    line-height: 28px;
    font-weight: 700;
    color: #005E9E;
    padding-bottom: 24px;
}

.cs-workarea .cs-box-holder ul {
    clear: both;
    overflow: hidden;
    min-height: 190px;
}

.cs-workarea .cs-box-holder ul li:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 6px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -37px -88px;
    width: 6px;
    height: 10px;
    z-index: 9;
}

.cs-workarea .cs-box-holder ul li {
    position: relative;
    clear: both;
    font-size: 16px;
    color: #233253;
    line-height: 22px;
    padding-bottom: 16px;
    padding-left: 18px;
}

.cs-workarea .cs-box-holder ul li a {
    color: #233253;
    text-decoration: none
}

.cs-workarea .cs-box-holder ul li a:hover {
    color: #233253;
    text-decoration: none
}

.policy-bg {
    position: relative;
    height: 100%;
    background: no-repeat left top;
    background-size: 100% 100%;
    margin-bottom: 24px;
}

.pb24 {
    padding-bottom: 24px !important;
}

.policy-layer {
    background-color: rgba(0, 0, 0, .50);
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 30px;
    text-align: center;
}

.policy-layer h2 {
    font-size: 32px;
    line-height: 46px;
    color: #FFFFFF;
    font-weight: 700;
    padding-bottom: 15px;
}

.help-bg {
    position: relative;
    height: 370px;
    background: no-repeat left top;
    background-size: 100% 100%;
    margin-bottom: 24px;
}

.help-layer {
    background-color: rgba(0, 0, 0, 0.40);
    height: 100%;
    width: 100%;
    position: absolute;
    padding: 30px;
    text-align: center;
}

.help-layer h2 {
    font-size: 32px;
    line-height: 46px;
    color: #FFFFFF;
    font-weight: 700;
    padding-bottom: 15px;
}

.help-layer h2+p {
    font-size: 16px;
    line-height: 18px;
    color: #FFFFFF;
    padding-bottom: 24px;
}

.login-btn {
    background: #0083C3;
    color: #FFFFFF;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    line-height: 20px;
    padding: 7px 25px 7px 25px;
}

.login-btn:hover {
    background: #005e9e !important;
    border-color: #005e9e !important;
}

.rt-blue-bg {
    width: 100%;
    padding: 3px;
    background-color: #80c1e1;
}

.rt-blue-bg h5 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: #233253;
    padding: 24px 0px 21px 44px;
    position: relative;
}

.rt-blue-bg h5:before {
    position: absolute;
    left: 18px;
    top: 27px;
    content: "";
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -157px -90px;
    width: 17px;
    height: 16px;
}

.rt-blue-bg ul {
    clear: both;
    overflow: hidden;
}

.rt-blue-bg ul .range-limit {
    clear: both;
    overflow: hidden;
}

.rt-blue-bg ul li a {
    clear: both;
    background-color: #FFFFFF;
    padding: 19px 30px 19px 22px;
    font-size: 14px;
    line-height: 14px;
    color: #2C6698;
    font-weight: 500;
    display: block;
    width: 100%;
    margin-top: 3px;
    position: relative;
}

.rt-blue-bg ul li a:hover {
    color: #ed1c24
}

.rt-blue-bg ul li a:after {
    position: absolute;
    right: 18px;
    top: 22px;
    content: "";
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -178px -92px;
    width: 6px;
    height: 11px;
}

.rt-blue-bg ul li a:hover:after {
    position: absolute;
    right: 18px;
    top: 22px;
    content: "";
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -37px -88px;
    width: 6px;
    height: 10px;
}

.rt-blue-bg1 {
    width: 100%;
    padding: 3px;
    background-color: #0083C3;
    margin-top: 26px;
}

.rt-blue-bg1 h5 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: #FFFFFF;
    padding: 24px 0px 0px 44px;
    position: relative
}

.rt-blue-bg1 h5:before {
    position: absolute;
    left: 18px;
    top: 27px;
    content: "";
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -204px -94px;
    width: 18px;
    height: 18px;
}

.rt-blue-bg1 ul {
    clear: both;
    overflow: hidden;
}

.rt-blue-bg1 ul .range-limit {
    clear: both;
    overflow: hidden;
}

.cs-bonus.recommend-search-me {
    padding-bottom: 0px !important;
    background-color: #FFFFFF !important
}

.cs-bonus.recommend-search-me select {
    border: 1px solid #ED1C24;
    color: #ED1C24;
}

.cs-bonus.recommend-search-me select option {
    font-style: normal !important;
}

.rt-blue-bg1 ul li a {
    clear: both;
    overflow: hidden;
    padding: 19px 30px 19px 34px;
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
    font-weight: 500;
    display: block;
    width: 100%;
    margin-top: 3px;
    border-bottom: 1px solid #FFF;
    position: relative;
}

.rt-blue-bg1 ul li a:hover {
    color: #233253
}

.rt-blue-bg1 ul li a:before {
    position: absolute;
    left: 18px;
    top: 22px;
    content: "";
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -188px -92px;
    width: 6px;
    height: 11px;
}

.rt-blue-bg1 ul li:last-child a {
    border-bottom: 0px !important;
}

.Searchsection {
    background: #F9F9F9;
    padding: 48px 0px 48px 0px;
}

.Searchsection .search {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
}

.Searchsection .search label {
    font-size: 14px;
    line-height: 22px;
    color: #233253;
    font-weight: normal;
}

.Searchsection .search .search-sec {
    position: relative;
    max-width: 420px;
    width: 100%;
    background: #F4F4F4;
    border: 1px solid #C7CACC;
    height: 41px;
    border-radius: 4px;
}

.Searchsection .search .search-sec:before {
    position: absolute;
    content: "";
    left: 14px;
    top: 13px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -107px -86px;
    width: 14px;
    height: 14px;
}

.Searchsection .search .search-sec input {
    float: left;
    width: 74%;
    background-color: transparent;
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 28px;
    color: #767676;
    height: 39px;
    padding-left: 37px;
}

.Searchsection .search .search-sec input:focus {
    background-color: #FFF
}

.Searchsection .search .search-sec button {
    float: right;
    background: #ED1C24;
    border-radius: 0px 4px 4px 0px;
    Width: 26%;
    height: 39px;
    border: none !important;
    font-size: 12px;
    color: #FFFFFF;
}

.Searchsection .search .search-sec button:hover {
    color: #fff;
    box-shadow: 0 8px 12px rgba(237, 28, 36, .2);
}

.Searchsection .search .search-sec label {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #233253;
}

.hmbreadcrumb {
    background: repeat-x 0 0;
    height: 39px;
    padding: 0px 0px 0px 30px;
}

.hmbreadcrumb ul {
    clear: both;
    overflow: hidden;
}

.hmbreadcrumb ul li {
    display: inline-block;
    font-size: 12px;
    line-height: 22px;
    font-weight: normal;
    padding-top: 7px;
    padding-right: 5px;
    padding-left: 10px;
    position: relative;
}

.hmbreadcrumb ul li:first-child:before {
    display: none;
}

.hmbreadcrumb ul li:first-child {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-right: 5px;
}

.hmbreadcrumb ul li:before {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -91px -89px;
    width: 7px;
    height: 8px;
    position: absolute;
    content: "";
    left: 0;
    top: 14px;
}

.hmbreadcrumb ul .level0 {
    color: #233253 !important
}

.hmbreadcrumb ul .level1 {
    color: #717a8d !important
}

.hmbreadcrumb ul .level2 {
    color: #233253 !important
}

.hmbreadcrumb ul li a {
    color: #233253;
}

.hmbreadcrumb ul li a:hover {
    color: #233253;
}

.background-white {
    background-color: #FFFFFF !important
}

.bread-home {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -60px -87px;
    width: 9px;
    height: 10px;
    display: inline-block;
}

h1 .bgwhite {
    background-color: #FFFFFF;
    line-height: 48px;
    height: 50px;
    display: inline-block;
}

.cs-banner-section {
    margin-top: 98px;
    padding-top: 50px;
}

.cs-banner-section h1 {
    position: relative;
    line-height: 48px;
    font-weight: 700;
    font-size: 48px;
    color: #ED1C24;
}

.cs-banner-section h1:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 82px;
    height: 82px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat 0px 0px;
    z-index: -1;
    left: -44px;
    top: -18px;
}

.cs-banner-section h1 .bluetxt {
    color: #233253;
}

.cs-banner-section h1+p {
    font-size: 14px;
    line-height: 20px;
    color: #233253;
    padding-top: 14px;
}

.cs-banner-section ul {
    display: block;
    margin-top: 15px;
}

.cs-banner-section ul li {
    display: inline-block;
    padding-right: 26px;
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    line-height: 20px;
}

.cs-banner-section ul li:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 2px;
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat 0 -84px;
}

.cs-banner-section ul li.services:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 13px;
    left: 0;
    top: 4px;
    background: no-repeat 0px 0px !important;
}

.cs-banner-section ul li a, .cs-banner-section ul li a:hover {
    color: #233253;
    text-decoration: none;
}

.cs-banner-section ul li a span {
    color: #005E9E;
    font-weight: 600;
}

.cs-profile {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -87px 0;
    width: 73px;
    height: 70px;
    display: inline-block
}

.cs-help {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -170px 0;
    width: 72px;
    height: 89px;
    display: inline-block
}

.payins {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -256px 0;
    width: 56px;
    height: 56px;
    display: inline-block;
}

.manage {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -249px -64px;
    width: 56px;
    height: 56px;
    display: inline-block;
}

.ps {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -249px -64px;
    width: 56px;
    height: 56px;
    display: inline-block;
}

.demat {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -4px -112px;
    width: 56px;
    height: 56px;
    display: inline-block;
}

.claims {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -391px -69px;
    width: 56px;
    height: 56px;
    display: inline-block;
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
    /* background: #005e9e; */
}

.ui-datepicker .ui-datepicker-prev {
    left: 0!important;
}

.ui-datepicker .ui-datepicker-next {
    right: 0!important;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
    color: #005e9e;
    background: #FFFFFF;
    font-size: 14px;
    font-family: arial;
}

.ui-datepicker table {
    width: 100%;
    font-size: .7em;
    border-collapse: collapse;
    font-family: verdana;
    margin: 0 0 .4em;
    color: #000000;
    background: #FFFFFF;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}

.grp {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -324px -65px;
    width: 56px;
    height: 56px;
    display: inline-block;
}

.manage-online {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -249px -64px;
    width: 56px;
    height: 56px;
    display: inline-block;
}

.specimen {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -385px 0;
    width: 56px;
    height: 56px;
    display: inline-block;
}

.escalation {
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -324px 0;
    width: 56px;
    height: 56px;
    display: inline-block;
}

.claim-tabaddjust li {
    margin-left: 50px !important;
    margin-right: 50px !important;
}

@media only screen and (max-width: 1020px) {
    .claim-tabaddjust li {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    body.cs {
        padding-top: 200px;
    }
    .banner-mob {
        display: block;
        text-align: center;
        padding-bottom: 40px;
    }
    .cs-banner-section h1 {
        font-size: 26px;
        display: inline-block;
    }
    .cs-banner-section h1+p {
        padding-top: 20px !important;
    }
    .mauto {
        margin: 0 auto;
        display: block;
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .prog-left {
        font-size: 12px !important;
    }
    .bg1h4 {
        bottom: 28px;
        font-size: 16px !important;
        line-height: 19px;
        font-weight: 800;
    }
    .bg2h4 {
        bottom: 40px;
        font-size: 16px !important;
        line-height: 19px;
        font-weight: 800;
    }
    .abtboxbig h4 {
        padding-bottom: 0px;
    }
    body.cs {
        padding-top: 120px;
    }
    .Searchsection .search {
        padding: 0 50px;
    }
    .policy-bg, .help-bg {
        height: 286px;
    }
    .cs-help, .cs-profile {
        display: none;
    }
    .cs-workarea .cs-box-holder span {
        float: left;
    }
    .cs-workarea {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 40px;
        .haveQuesSec {
            padding-left: 0px;
            padding-right: 0px;
        }
        .aboutSectionTabMenu {
            justify-content: space-evenly !important;
        }
        .tabAccordContent {
            padding: 0 20px 20px 20px !important
        }
        .whiteheadtxt {
            bottom: 14px !important;
            font-size: 14px !important;
            line-height: 18px !important;
        }
        .pay-vid {
            width: 50px;
            height: 50px;
            svg {
                width: 100%;
            }
        }
    }
    .cs-workarea .cs-box-holder {
        padding: 16px 24px 16px 24px;
        clear: both;
        overflow: hidden;
        box-shadow: 0px 2px 8px rgba(0, 94, 158, 0.05), 1px 2px 4px rgba(50, 130, 196, 0.08);
    }
    .cs-workarea .cs-box-holder h3 {
        float: left;
        padding-top: 17px;
        padding-left: 20px;
        font-size: 18px;
        line-height: 24px;
        font-weight: 500;
        width: 70%;
        padding-bottom: 0px;
    }
    .cs-workarea .cs-box-holder ul, .cs-workarea .cs-box-holder ul+div, .cs-workarea .cs-box-holder::before {
        display: none;
    }
    .Searchsection .search .search-sec input {
        width: 60%
    }
    .cs-workarea .cs-box-holder::after {
        position: absolute;
        content: "";
        right: 38px;
        top: 50%;
        transform: translateY(-50%);
        background: url('../../../content/dam/hdfclifeinsurancecompany/icons/cs-sprite.png') no-repeat -137px -88px;
        display: inline-block;
        width: 8px;
        height: 14px;
    }
}

.dbl {
    padding-top: 3px !important;
}

.pay:before {
    display: none;
}

.cs-ban {
    .banner-mob {
        padding-bottom: 50px;
    }
    /*
    .payins {
        position: relative;
        bottom: -10px;
        transform: scale(1.2)
    }*/
    p {
        padding-left: 68px;
    }
}

.cs-workarea {
    .bannerAdSection {
        margin-top: 0px;
        .bannerAdContent {
            width: 600px;
        }
    }
    .nav-tabs {
        display: block !important;
        text-align: center;
        li {
            float: none !important;
            display: inline-block;
        }
    }
    .tabAccordSection {
        .tabAccordMenu {
            .counter {
                display: none;
            }
            a {
                .toggleIcon {
                    margin-left: 0 !important;
                    margin-right: 24px;
                }
            }
        }
    }
    .tabAccordContent {
        p {
            font-size: 14px;
            line-height: 22px;
            color: #5A5A5A;
            font-weight: 400;
            padding-bottom: 20px;
            a {
                color: #ED1C24;
            }
        }
        p.note {
            font-size: 12px;
            span {
                color: #233253;
            }
        }
        .key {
            font-size: 14px;
            line-height: 22px;
            color: #005E9E;
            font-weight: 500;
            padding-bottom: 12px;
        }
        .keyul {
            clear: both;
            overflow: hidden;
            list-style: non;
            margin: 0px;
            padding: 0px;
            li {
                clear: both;
                overflow: hidden;
                list-style: non;
                margin: 0px;
                padding: 0px 0px 18px 30px;
                position: relative;
                font-size: 14px;
                line-height: 22px;
                color: #5A5A5A;
                font-weight: 400;
                a {
                    color: #ED1C24;
                }
            }
            li:before {
                background: no-repeat 0 0;
                width: 22px;
                height: 22px;
                content: "";
                position: absolute;
                display: inline-block;
                left: 0px;
                top: 0px;
            }
        }
        .video-holder {
            width: 100%;
            position: relative;
            margin-bottom: 32px;
            .whiteheadtxt {
                font-size: 32px;
                line-height: 32px;
                color: #FFFFFF;
                font-weight: 700;
                position: absolute;
                left: 45px;
                bottom: 32px;
            }
            .pay-vid {
                position: absolute;
                left: 45%;
                top: 50%;
                transform: translate(-50%, -50% !important);
            }
        }
        .note {
            font-size: 12px;
            color: #989898
        }
    }
}

/* Claims */

.wrap-end {
    padding-left: 0px;
    padding-right: 0px;
    background-color: #f9f9f9
}

.clainm {
    margin: 19px 0px 40px 0px;
    button {
        border-radius: 36px;
        font-size: 14px;
        background-color: #FFFFFF !important;
        color: #233253 !important;
        border-color: #FFFFFF;
        height: 56px;
        padding: 0px 50px;
        border-left: 1px solid #e9e9e9;
    }
    button:first-child {
        border-left: 0px solid #e9e9e9;
    }
    button:hover {
        border-color: #FFFFFF !important;
    }
}
.claim-online-wrapper {
    background-color: #fff;
    max-width: 1050px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 48px 48px 48px;
    margin-bottom: 40px;
}
.claim-online-wrapper .reach-out-to-us-section {
    padding-top: 0px !important;
}
.claim-online-wrapper .reach-out-tabs-title-section {
    padding-left: 0px !important;
}
.claim-online-wrapper .reach-out-tabs-title-section li {
    line-height: 19px !important;
    font-size: 14px !important;
    margin-bottom: 10px;
    padding-top: 10px;
}
.claim-online-wrapper li:nth-child(3) {
    padding-top: 19px;
}
.claim-online-wrapper li:nth-child(4) {
    padding-top: 19px;
}
.claim-online-wrapper h2 {
    font-size: 38px;
    line-height: 48px;
    text-align: center;
    font-weight: 700;
    color: #233253;
    padding-bottom: 24px;
}
.claim-online-wrapper h2 + p {
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #8a93a5;
    font-weight: 500;
    padding-bottom: 10px;
}
.claim-online-wrapper .steps {
    clear: both;
    overflow: hidden;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.claim-online-wrapper .steps li {
    display: inline-block;
    position: relative;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
    font-weight: 500;
    padding-bottom: 30px;
    padding-left: 65px;
    padding-right: 75px;
}
.claim-online-wrapper .steps .step1 {
    color: #005e9e;
}
.claim-online-wrapper .steps .step2 {
    color: #005e9e;
}
.claim-online-wrapper .steps .step3 {
    color: #005e9e;
}
.claim-online-wrapper .steps .step1:before {
    position: absolute;
    left: 0;
    width: 58px;
    height: 58px;
    content: "";
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/step-1.png') no-repeat 0 0;
}
.claim-online-wrapper .steps .step2:before {
    position: absolute;
    left: 0;
    width: 58px;
    height: 58px;
    content: "";
    background: url('../../../content/dam/hdfclifeinsurancecompany/icons/step-2.png') no-repeat 0 0;
}
.claim-online-wrapper .steps .step3:before {
    position: absolute;
    left: 0;
    width: 58px;
    height: 58px;
    content: "";
    /* background: url('../../../content/dam/hdfclifeinsurancecompany/icons/step-3.png') no-repeat 0 0; */
}
.claim-online-wrapper .steps .step1:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 62px;
    height: 58px;
    content: "";
    /* background: url('../../../content/dam/hdfclifeinsurancecompany/icons/rt-arrow.png') no-repeat 0 0; */
}
.claim-online-wrapper .steps .step2:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 62px;
    height: 58px;
    content: "";
    /* background: url('../../../content/dam/hdfclifeinsurancecompany/icons/rt-arrow.png') no-repeat 0 0; */
}
.claim-online-wrapper .vsteps {
    clear: both;
    overflow: hidden;
    width: 100%;
    text-align: center;
   /* border-bottom: 1px solid #e9e9e9;
   */
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.claim-online-wrapper .vsteps li {
    display: block;
    position: relative;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    font-weight: 500;
    padding-bottom: 30px;
    padding-left: 85px;
    padding-right: 75px;
    color: #2c6698;
    height: 114px;
    font-size: 13px !important;
    line-height: 22px !important;
    font-weight: normal !important;
}
.claim-online-wrapper .vsteps :before {
    position: absolute;
    left: 0;
    width: 58px;
    height: 58px;
    content: "";
}
.claim-online-wrapper .vsteps1 {
    color: #1068a4;
}
.claim-online-wrapper .vsteps1:after {
    background: no-repeat 0 0;
    position: absolute;
    left: 0;
    width: 58px;
    height: 58px;
    top: 59px;
    content: "";
}
.claim-online-wrapper .vsteps2 {
    color: #005e9e;
}
.claim-online-wrapper .vsteps2:after {
    background: no-repeat 0 0;
    position: absolute;
    left: 0;
    width: 58px;
    height: 58px;
    top: 59px;
    content: "";
}
.claim-online-wrapper .vsteps3 {
    color: #005e9e;
    padding-top: 0px !important;
}
.claim-online-wrapper .vsteps3:after {
    background: no-repeat 0 0;
    position: absolute;
    left: 0;
    width: 58px;
    height: 58px;
    top: 59px;
    content: "";
}
.claim-online-wrapper .vsteps4 {
    color: #005e9e;
    padding-top: 0px !important;
}
.claim-online-wrapper .vsteps4:after {
    background: no-repeat 0 0;
    position: absolute;
    left: 0;
    width: 58px;
    height: 58px;
    top: 59px;
    content: "";
}
.claim-online-wrapper .vsteps5 {
    color: #005e9e;
}
.claim-online-wrapper .vsteps5:after {
    background: no-repeat 0 0;
    position: absolute;
    left: 0;
    width: 58px;
    height: 58px;
    top: 59px;
    content: "";
}
.claim-online-wrapper .vsteps6 {
    color: #005e9e;
}
.claim-online-wrapper .vsteps6:after {
    background: no-repeat 0 0;
    position: absolute;
    left: 0;
    width: 58px;
    height: 58px;
    top: 59px;
    content: "";
}
.claim-online-wrapper .vsteps1:before {
    background: no-repeat 0 0;
}
.claim-online-wrapper .vsteps2:before {
    background: no-repeat 0 0;
}
.claim-online-wrapper .vsteps3:before {
    background: no-repeat 0 0;
}
.claim-online-wrapper .vsteps4:before {
    background: no-repeat 0 0;
}
.claim-online-wrapper .vsteps5:before {
    background: no-repeat 0 0;
}
.claim-online-wrapper .vsteps6:before {
    background: no-repeat 0 0;
}
.claim-online-wrapper .vsteps6:after {
    background: none !important;
}

.form-group label {
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #233253;
    margin-top: 30px;
}
.form-group .form-control {
    height: 40px;
    background-color: #f4f4f4;
    border: none;
    font-size: 12px;
    line-height: 23px;
    color: #767676;
    font-weight: 300;
}
.form-control, input[type=text].isd {
    width: 15%!important;
    -webkit-text-fill-color: #424040;
    opacity: .6;
    font-style: normal!important;
}
.form-group :focus {
    outline: none;
    outline-width: 0px;
    outline-style: none;
}
.articleBulletLists {
    padding-left: 20px;
}
.articleBulletLists li {
    font-size: 14px;
    padding-bottom: 20px;
}


.downtop {
    margin-top: 64px;
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    color: #005E9E !important;
}

.downtop1 {
    margin-top: 68px;
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    color: #005E9E !important;
}

.downloads {
    clear: both;
    overflow: hidden;
}

.downloads li {
    clear: both;
    overflow: hidden;
    border-bottom: 1px solid #ececec;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
}

.downloads li span {
    width: 80%;
    display: inline-block;
}

.downloads li a {
    margin-left: 10px;
}

.rupee+input {
    margin-left: -13px;
}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */

input[type=number] {
    -moz-appearance: textfield;
}

.headbold {
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: #005E9E !important;
    padding-bottom: 10px !important;
}

.mrgn-bot40 {
    margin-bottom: 40px !important;
}

.claim-track-wrapper {
    background-color: #EAF1F8;
    max-width: 1050px;
    width: 100%;
    margin: 0 auto;
    padding: 48px;
    margin-bottom: 40px;
    display: none;
}

.table-struct table tr td table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
}
.table-struct table tr td table tr td:first-child {
    background-color: #edf7fc;
}
.table-struct table tr td table tr td {
    font-size: 12px;
}
.table-struct table tr td table tr th {
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    background-color: #005e9e;
}
.table-struct table tr td table td, .table-struct table tr td table th {
    border: 1px solid #e3e4e5;
    padding: 13px 20px;
}
.info-list {
    padding-left: 15px;
}
.info-list li {
    padding-bottom: 10px;
    list-style-type: disc;
}
.cs-workarea1 {
    max-width: 1600px;
    clear: both;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    padding-top: 56px;
}
.cs-workarea1 .curved-tab-titles {
    background-color: #fff !important;
    width: 1000px !important;
}


.qr {
    margin-left: 100px;
}
.input-radio {
    margin-right: 20px;
    margin-left: 0px;
    position: relative;
}
.input-radio span {
    padding-left: 7px;
    display: inline-block;
}
.input-radio input {
    display: none;
}
.input-radio label {
    position: relative;
    width: 12px;
    height: 12px;
    left: 0;
    border-radius: 50%;
    border: 1px solid #233253;
    margin: 0px 0px 0px 0px !important;
}
.input-radio input + label:before {
    border-radius: 50%;
    position: absolute;
    content: "";
    margin: 0px 0px 0px 0px;
    background: #233253;
    left: 3px;
    top: 3px;
}
.input-radio input:checked + label + span {
    color: #ed1c24;
}
.input-radio input:checked + label {
    position: relative;
    width: 12px;
    height: 12px;
    left: 0;
    border-radius: 50%;
    border: 1px solid #ed1c24;
    margin: 0px 0px 0px 0px !important;
}
.input-radio input:checked + label:before {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    position: absolute;
    content: "";
    margin: 0px 0px 0px 0px;
    background: #ed1c24;
    left: 3px;
    top: 3px;
}


.cl-adjust li {
    padding-top: 0px !important;
}

.orpad {
    padding-top: 67px
}
.claims-accord .accordion-lists .cust-accordion {
    padding: 24px 0;
    position: relative;
}
.claims-accord .accordion-lists .cust-accordion:after {
    content: "";
    position: absolute;
    height: 1px;
    width: calc(100% - 70px);
    background: rgba(0, 0, 0, .1);
    left: 34px;
    top: 0;
}
.claims-accord .accordion-lists .cust-accordion:first-child {
    padding-top: 0;
}
.claims-accord .accordion-lists .cust-accordion:first-child:after {
    display: none;
}
.claims-accord .accordion-lists .cust-accordion .accordion-head {
    padding: 0 55px 0 24px;
    position: relative;
    cursor: pointer;
}
.claims-accord .accordion-lists .cust-accordion .accordion-head h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #005e9e;
    padding-bottom: 10px;
}
.claims-accord .accordion-lists .cust-accordion .acc-arrow {
    position: absolute;
    top: 2px;
    left: 0px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #ed1c24;
}
.claims-accord .accordion-lists .cust-accordion.open .acc-arrow {
    left: 0px;
    top: 7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ed1c24;
}
.claims-accord .accordion-lists .cust-accordion.open h3 {
    color: #ed1c24;
}
.claims-accord .accordion-lists .cust-accordion .accordion-content {
    padding-top: 8px;
    padding-left: 15px;
}


#Death {
    display: block
}

.select-holder-mobile {
    display: none;
    margin-bottom: 0px;
}

.siteButton{
    cursor: pointer;
}

.contacts-tab-section {
    display: block;
}

.claimsblue {
    background-color: #EAF1F8
}

.climlink {
    color: #9098a8;
}

.climlink a {
    color: #005e9e;
}

.claimslide .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.claimshealth h2 {
    font-weight: bold !important;
    font-size: 24px !important;
    line-height: 36px !important;
    color: #233253 !important;
}

.claimshealth h2+p {
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #8A93A5;
    padding-bottom: 30px;
}

.datepic {
    position: absolute;
    right: 33px !important;
    bottom: 26px;
}

.claim-mob {
    display: block;
}

.lstactive, .lstactive:hover {
    background-color: #005e9e !important;
    color: #FFFFFF !important
}

.lstactive .dropdown button {
    color: #FFFFFF !important;
}

.cform {
    padding-left: 0px;
    padding-right: 0px;
}

#myModalthankyou .branch-locator, #myModalthankyou .branch-locator:hover {
    border: 1px solid #ed1c24;
    width: 186px;
    height: 35px;
    line-height: 34px;
    text-align: center;
    color: #ed1c24;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    margin-top: 24px;
    cursor: pointer;
    float: none;
    display: block;
    margin: 0 auto;
}

.thankyoutxt {
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    color: #233253;
    padding-bottom: 24px;
}

.discstar {
    position: relative;
    line-height: 20px;
    color: #8a93a5;
    font-size: 12px;
    padding-left: 8px;
    display: block;
}

.discstar:before {
    position: absolute;
    content: "*";
    left: 0;
    top: 0;
}

@media only screen and (max-width: 767px) {
    .cs-tab li a {
        font-size: 14px;
        line-height: 18px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .faq .accordion-head {
        padding-left: 70px !important;
        padding-right: 50px !important;
    }
    .faq .cust-accordion {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .datepic {
        bottom: 11px !important;
    }
    .claim-mob {
        display: none;
    }
    .claimsac .accordion-head h3 {
        font-size: 13px !important;
        line-height: 18px !important;
        font-weight: normal !important;
    }
    .stle {
        padding-left: 10px;
        padding-right: 10px;
    }
    .accordion-head h3 {
        font-size: 12px;
    }
    .articleBulletLists li .listBullet {
        float: left;
        padding-right: 10px;
    }
    .claim-online-wrapper {
        padding: 48px 20px 48px 20px !important;
    }
    .clims .select-holder2 {
        max-width: 80%;
    }
    .select-holder-mobile .sel-type {
        width: 80%;
        margin: 0 auto;
        text-align: left !important;
    }
    .mobbgnone {
        background-color: transparent !important;
    }
    .cl0 {
        padding: 0px !important;
    }
    .claim-online-wrapper .reach-out-to-us-inner {
        padding-top: 40px;
    }
    .claim-online-wrapper .select-holder2 {
        background-color: transparent;
    }
    .show-mob-camp {
        display: block !important;
    }
    .show-mob-camp img {
        width: 70%;
    }
    .camp-banner {
        background: none !important;
        height: auto !important;
    }
    .mb-0 {
        margin-bottom: 0px !important;
    }
    .table-struct {
        overflow-x: hidden;
    }
    .table-struct .table-scroll {
        overflow: scroll;
        width: 50%;
    }
    .steps {
        display: none;
    }
    .contacts-tab-section {
        display: block !important;
    }
    .tab-title {
        display: none;
    }
    .select-holder-mobile {
        display: block !important;
    }
    .contact-section-wrapper {
        margin-top: 40px;
    }
    .cs-ban .banner-mob {
        padding-bottom: 50px;
    }
    .cs-ban .payins {
        position: relative;
        transform: scale(0.9);
    }
    .cs-ban .payinstxt {
        display: inline-block;
        width: 50%;
        text-align: left;
    }
    .cs-ban p {
        padding-left: 0;
    }
    .cs-ban h1 .bgwhite {
        line-height: 30px;
    }
    .cs-workarea .catBannerAdSection {
        display: block;
        text-align: center;
    }
    .cs-workarea .catBannerAdSection .bannerAdContent {
        width: 100% !important;
    }
    .cs-workarea .catBannerAdSection .siteButton {
        display: inline-block;
    }
    .cs-workarea .aboutSectionTabMenu li a {
        width: 80px;
        text-align: center;
    }
    .cs-workarea .tabAccordSection .tabAccordMenu .counter {
        display: block;
        padding-top: 10px;
    }
    .cs-workarea .tabAccordSection .tabAccordMenu a {
        position: relative;
    }
    .cs-workarea .tabAccordSection .tabAccordMenu a .toggleIcon {
        position: absolute;
        right: 0px;
    }
    .cs-workarea .tabAccordSection .tabAccordMenu a strong {
        position: absolute;
        left: 30px;
        padding-left: 50px;
    }
    .cs-workarea .tabAccordSection .cornerBg {
        display: none;
    }
    .mobileDNone {
        display: none !important;
    }
}

.cs-table {
    padding-bottom: 15px;
}

.cs-table table {
    width: 100%;
    border-collapse: collapse;
}

.cs-table table tr td {
    background-color: #edf7fc;
    font-size: 14px;
    color: #2c6698;
}

.cs-table table tr th {
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    background-color: #005e9e;
}

.cs-table table td, .cs-table table th {
    border: 1px solid #e3e4e5;
    padding: 13px 20px;
}

/* Campaign css */

.exite {
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 30px !important;
    color: #233253 !important;
}

.products-custom-listnew {
    margin-bottom: 38px;
}

.products-custom-listnew li {
    font-size: 16px;
    line-height: 26px;
    /*color:$grayDisclaimer;*/
    position: relative;
    padding-left: 34px;
    padding-top: 2px;
}

.products-custom-listnew li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0px;
    width: 21px;
    height: 20px;
    background: url(../../../content/dam/hdfclifeinsurancecompany/products-sprite-icons.png) -236px -435px;
}

@media only screen and (max-width:680px) {
    li {
        font-size: 14px;
        line-height: 20px;
    }
}

.chk-break {
    border: none !important;
    width: 100% !important;
    font-size: 10px !important;
    color: #666666;
    text-align: left !important;
    line-height: 14px;
}

.camp-banner {
    background: repeat-x center;
    height: 300px
}

.wrap-bg-white {
    background-color: #FFF;
    padding: 0 0 50px 0;
}

.quick-guide {
    background: #f1f5f6;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f1f5f6 0%, #fdfdfe 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f1f5f6 0%, #fdfdfe 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f1f5f6 0%, #fdfdfe 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* IE6-9 */
    padding: 40px 20px 40px 20px;
}

.quick-guide h6 {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    color: #233253;
    padding-bottom: 10px;
}

.quick-guide p {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #666;
    padding-bottom: 30px;
}

.quick-guide .img-hold {
    clear: both;
    overflow: hidden;
    width: 100%;
    padding-bottom: 15px;
    text-align: center;
}

.quick-guide .click {
    font-style: normal;
    font-weight: 500;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #1068a4;
}

.quick-guide .click a {
    color: #ef5258;
}

.quick-guide .strip-holder {
    width: 288px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    padding-bottom: 20px;
}

.quick-guide .strip-holder .circle-holder {
    background: repeat-x top center;
    height: 70px;
    width: 90px;
    text-align: center;
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    line-height: 33px;
    color: #233253;
    padding-top: 25px;
    display: inline-block;
}

.quick-guide .strip-holder .strip {
    background: repeat-x top center;
    height: 40px;
    width: 284px;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    padding-top: 8px;
    display: inline-block;
}

.checktxt {
    display: inline-block;
    width: 94%;
    line-height: 14px;
    position: relative;
    bottom: -20px;
}

.cb-btn {
    clear: both;
    overflow: hidden;
    padding-top: 20px;
    text-align: center !important;
    button {
        margin: 0px !important;
        display: inline-block !important;
    }
}

.campaign2 label {
    display: inline-block !important;
}

.campaign2 h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 38px !important;
    line-height: 48px !important;
    color: #233253 !important;
    text-align: left !important;
}

.campaign2 .disktt {
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 15px;
    color: #999;
}

.campaign2 .form-row {
    margin-bottom: 10px !important;
}

.show-mob {
    display: none;
}

.scroll {
    position: absolute;
    width: 100%;
    left: 0;
    background-color: rgba(76, 90, 120, 0.9);
    padding: 8px 30px 8px 30px;
    bottom: 0px;
    z-index: 99;
    overflow: hidden;
}

.scroll .marquee {
    font-size: 14px;
    line-height: 14px;
    color: #FFFFFF;
    font-weight: 400;
    padding-left: 20px;
    width: 100%;
}

.scroll .marquee:before {
    width: 39px;
    height: 44px;
    background: repeat-x top center;
    position: absolute;
    left: 0px;
    top: 4px;
    content: ""
}

.progress {
    background: transparent;
}

.progress .bg-success {
    background-color: #8A93A5 !important;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-top-left-radius: 0px !important;
    -webkit-border-bottom-left-radius: 0px !important;
    -moz-border-radius-topleft: 0px !important;
    -moz-border-radius-bottomleft: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.prog-left {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 12px;
    color: #233253;
    text-align: right;
}

.prog-mid {
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative;
    min-height: 85px;
}

.prog-mid:before {
    position: absolute;
    content: "";
    left: 15px;
    top: 0px;
    width: 1px;
    background-color: #c5cad1;
    height: 100%;
}

.prog-mid p {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    padding: 15px 15px 0px 15px;
    line-height: 22px;
    color: #878787;
    text-align: left;
    padding-top: 0px;
}

.prog-mid p span {
    color: #233253;
}

.prog-right {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    padding-left: 15px;
    width: 100px;
    top: -2px;
    position: relative;
    line-height: 18px;
    color: #ED1C24;
    text-align: right;
}

.pgrs .row {
    padding-bottom: 0px !important;
}

.disc-text, .disc-text p {
    line-height: 22px;
    font-size: 12px;
    font-weight: 400;
    color: #5a5a5a;
}

.disc-text p b {
    font-weight: 400;
    line-height: 22px;
    font-size: 12px;
    color: #5a5a5a;
}

.disc-text {
    padding-bottom: 20px;
}

.settle h5 {
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 28px;
    color: #233253;
}

.settle h5+p {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    padding-bottom: 20px;
    color: #233253;
}

.logo-holder {
    clear: both;
    overflow: hidden;
    padding-bottom: 15px;
    border-bottom: 1px solid #ececec;
}

.settle li {
    font-size: 14px !important;
    line-height: 32px !important;
    color: #838383 !important;
}

.km, .km:hover {
    color: #ed1c24;
    font-size: 12px;
}

.calcQuoate {
    color: rgba(000, 000, 000, 0.6);
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px;
}

.calcQuoate:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: 21px;
    height: 20px;
    background: url(../../../content/dam/hdfclifeinsurancecompany/images/product/products-sprite-icons.png) -236px -435px;
}

.pb15 {
    padding-bottom: 15px !important;
}

.popularMenuList {
    border-right: 1px solid #cfd6d6;
    padding-right: 40px;
}

@media screen and (min-height: 800px) {
    .viewall {
        bottom: 17%;
    }
}

.icons-wrap1:hover .hover-drop-down {
    opacity: 1 !important;
    top: 52px !important;
    display: block;
}

.rate .hover-drop-down span {
    content: "";
    position: absolute;
    top: -15px;
    left: 32px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
}

.prod .modal-content, .prod .modal-body {
    padding: 0px !important;
}

.prodbluebg {
    background-color: #31539a;
    color: #FFFFFF;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
}

.prodbluebg .row {
    padding-bottom: 0px !important;
}

.prodgreybg {
    background-color: #faf9f7;
    text-align: center;
    padding: 20px;
}

.prodgreybg h4 {
    font-size: 20px;
    text-transform: uppercase;
    color: #494641;
    text-align: center;
    letter-spacing: 4px;
}

.prodgreybg .prodwhitebg {
    background-color: #FFFFFF;
    text-align: center;
    padding: 30px 20px 30px 20px;
}

.prodgreybg .prodwhitebg h5 {
    font-size: 15px;
    color: #494641;
    padding-bottom: 15px;
    text-align: center;
}

.close-iconprod {
    position: absolute;
    top: -30px;
    right: 0px;
    cursor: pointer;
    font-size: 23px;
    z-index: 999;
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(../../../content/dam/hdfclifeinsurancecompany/images/category/prod-close.png) no-repeat 0 0;
}

.close-iconprod:hover {
    background:url(../../../content/dam/hdfclifeinsurancecompany/images/category/prod-close-over.png) no-repeat 0 0;
}

.prod.modal.sac {
    width: 100%;
    margin-left: 0%;
}

#prodmodal.modal.sac .modal-dialog.modal-lg, #prodmodal2.modal.sac .modal-dialog.modal-lg {
    margin: 50px auto 0;
    width: 100% !important;
    max-width: 94%;
}

.mar33 {
    margin-left: 33px;
}

.modal-backdrop {
    z-index: 9999;
}

.modal {
    z-index: 99995;
}

.disclaimerSec .disclaimer-wrap {
    display: block !important;
    padding-top: 15px !important;
}

/* contact us css */

.contcaptcha {
    padding-bottom: 30px;
}

.icon-active svg .non {
    fill: #ed1c24 !important;
    stroke: #ed1c24 !important;
}

.cont .lke {
    position: relative;
    display: block;
}

.cont .hover-drop-down {
    opacity: 0;
    width: 214px;
    height: 108px;
    color: #233253;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    position: absolute;
    top: -100px;
    left: -30px;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 32px;
    z-index: 99999;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.cont .hover-drop-down p {
    margin-bottom: 0;
}

@media only screen and (max-width: 640px) {
    .cont .hover-drop-down {
        left: -80px;
    }
}

.cont .hover-drop-down::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 32px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
}

.cont .effectshow {
    opacity: 1;
    top: 0;
}

.contus .default-select-cust-arrow svg {
    top: 35px;
}

.form-select-holder {
    position: relative;
    margin: 0 auto;
    -webkit-border-radius: 7px;
    overflow: hidden;
    background-image: url('../../../content/dam/hdfclifeinsurancecompany/icons/dd-arrow.png');
    background-repeat: no-repeat;
    background-position: 240px center;
    -moz-border-radius: 7px;
    border-radius: 7px;
    width: 272px;
    border: 1px solid #ed1c24;
    display: none;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

.form-select-holder select {
    border: none !important;
    width: 110% !important;
}

.contact-section-wrapper .info-cards-wrapper .info-card small {
    font-size: 16px !important;
}

.contact-section-wrapper .info-cards-wrapper .info-card small.font12 {
    font-size: 12px !important;
}

.font-blue {
    color: #005E9E !important;
}

.contrate {
    /* .hover-drop-down::before {
		 content: "";
		 position: absolute;
		 top: -15px;
		 left: 32px;
		 width: 0;
		 height: 0;
		 border-left: 15px solid transparent;
		 border-right: 15px solid transparent;
		 border-bottom: 15px solid #fff;
	}
	*/
}

.contrate .icons-wrap {
    display: flex;
    justify-content: space-between;
}

.contrate .icons-wrap .icon-wrap {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    cursor: pointer;
    font-size: 10px;
    line-height: 14px;
    color: #8a93a5;
}

.contrate .icons-wrap .icon-wrap.active>.icon>svg path, .contrate .icons-wrap .icon-wrap:hover>.icon>svg path {
    stroke: #ed1c24;
}

@media only screen and (max-width: 768px) {
    .contrate .icons-wrap .bg1, .contrate .icons-wrap .bg2 {
        height: 200px !important;
        padding: 0;
        margin: 0;
    }
    .contrate .icons-wrap .icon-wrap.share {
        margin-right: 0px;
    }
}

.contrate .rt.hover-drop-down {
    left: auto !important;
    right: 0px !important;
}

.contrate .hover-drop-down {
    opacity: 0;
    width: 214px;
    height: 90px;
    color: #233253;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 18px;
    z-index: 99999;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.contrate .hover-drop-down p {
    margin: 0 !important;
    padding: 0px !important;
}

@media only screen and (max-width: 640px) {
    .contrate .hover-drop-down {
        left: -80px;
    }
}

.contrate .icon-wrap.active>.hover-drop-down {
    top: 20px;
    opacity: 1;
    pointer-events: initial;
}

.contrate .star-rate {
    margin-top: 8px;
}

.contrate .star-rate i {
    display: inline-block;
    width: 18px;
    height: 17px;
    background: url(../../../content/dam/hdfclifeinsurancecompany/products-sprite-icons.png) -516px -88px;
}

.contrate .rating-wrapper {
    display: flex !important;
    margin-top: 10px;
    margin-left: 24px;
    align-items: end;
}

.contrate .social-icons-link {
    display: flex;
}

.contrate .social-icons-link svg {
    margin-right: 8px;
    margin-top: 8px;
}

.cntscrl .owl-stage-outer {
    padding-bottom: 60px !important;
}

.map {
    display: inline-block !important;
    position: relative;
    top: -2px;
}

.map .icons-wrap {
    display: flex;
}

.map .icons-wrap .icon-wrap {
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 4px 4px rgba(0, 94, 158, 0.1);
    margin-right: 8px;
    position: relative;
    cursor: pointer;
}

.map .icons-wrap .icon-wrap.active, .map .icons-wrap .icon-wrap:hover {
    background-color: #ed1c24;
}

.map .icons-wrap .icon-wrap.active>.icon>svg path, .map .icons-wrap .icon-wrap:hover>.icon>svg path {
    stroke: #fff;
}

@media only screen and (max-width: 768px) {
    .map .icons-wrap .bg1, .map .icons-wrap .bg2 {
        height: 200px !important;
        padding: 0;
        margin: 0;
    }
    .map .icons-wrap .icon-wrap {
        margin-right: 32px;
    }
    .map .icons-wrap .icon-wrap.share {
        margin-right: 0px;
    }
}

.map .hover-drop-down {
    opacity: 0;
    width: 214px;
    height: 108px;
    color: #233253;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    position: absolute;
    top: 0px;
    left: -30px;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 32px;
    z-index: 99999;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.map .hover-drop-down p {
    margin-bottom: 0;
}

@media only screen and (max-width: 640px) {
    .map .hover-drop-down {
        left: -80px;
    }
}

.map .hover-drop-down::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 32px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
}

.map .icon-wrap.active>.hover-drop-down {
    top: 60px;
    opacity: 1;
    pointer-events: initial;
}

.ui-autocomplete{
    display: none;
}

.ui-menu {
    max-width: 300px !important;
    width: 100% !important;
    border: 1px solid red;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #89949b;
    box-sizing: border-box;
    box-shadow: 0 0 8px rgba(0, 94, 158, .05), 1px 2px 4px rgba(50, 130, 196, .08);
    padding: 5px 16px;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.ui-menu-item {
    font-size: 12px;
    line-height: 23px;
    color: #233253;
    border-top: 1px solid #ddd;
    padding: 4px 0px !important;
    cursor: pointer;
}

.ui-menu-item:hover {
    color: #ed1c24 !important;
}

.ui-menu-item:first-child {
    border-top: 0px solid transparent !important
}

.btnimg {
    display: inline !important;
    width: 14px !important;
    position: relative !important;
    top: -2px !important;
    left: -4px !important;
}

#contowl .owl-stage {
    margin: 0px auto !important
}

@media only screen and (max-width:768px) {
    .contact-section-wrapper .reach-out-to-us-section .reach-out-to-us-inner .reach-out-tabs-content-section h2.plus-title::before {
        display: none !important;
    }
    .bg1 {
        height: 200px !important;
        margin-top: 15px !important;
    }
    .bg2 {
        margin-bottom: 20px !important;
        height: 200px !important;
    }
    .bg2h4 {
        bottom: 40px !important;
    }
    #group select {
        width: 100% !important
    }
}

#custCarouselNavtwit button, #twittertwit button {
    margin-top: 0px !important;
}

@media only screen and (max-width:767px) {
    .form-select-holder {
        display: block;
    }
    .conttabtitlemob {
        display: block;
    }
    .conttabtitlemob ul.curved-tab-titles li {
        font-size: 14px !important;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 18px !important
    }
    .conttabtitlemob ul {
        display: table !important;
    }
    .conttabtitlemob ul li {
        display: table-cell !important;
        width: auto !important;
        vertical-align: middle !important;
    }
    .contact-section-wrapper .reach-out-to-us-section .reach-out-to-us-inner .reach-out-tabs-content-section .reach-out-tabs-contents {
        padding: 48px 20px !important
    }
    .contact-section-wrapper .join-the-conversation {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
    .contact-section-wrapper .join-the-conversation .join-the-conversation-inner .social-tab-contents .info-card-bg {
        width: 287px !important;
    }
    .contact-section-wrapper .join-the-conversation .join-the-conversation-inner .social-tab-contents .info-card-bg {
        height: 667px !important;
    }
}

@media only screen and (max-width:380px) {
    .contact-section-wrapper .info-cards-wrapper .info-card {
        width: 265px !important;
    }
    .contact-section-wrapper .join-the-conversation .join-the-conversation-inner .social-tab-contents .info-card-bg {
        width: 247px !important
    }
}

.section.disclaimer-pb {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* .section.disclaimer-pb.discpad{
    padding-top:0px!important;
} */

.disclaimer-pb .panel-title a{
    margin-top:0px!important;
}

.articles-mb p {
    margin-bottom: 18px;
    padding-bottom: 21px;
    }

.articles-mb p {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #8a93a5;
    padding-bottom: 10px;
}

.disc-text, .disc-text p {
    line-height: 22px;
    font-size: 12px;
    font-weight: 400;
    color: #5a5a5a;
}

.sac p {
    padding-top: 10px;
    margin-bottom: 18px;
}

.disclaimers-sec li, .disclaimers-sec p{
    font-family: Arial, Helvetica, sans-serif;
}

/*Schedule Pop UP*/

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-lg-4, .col-sm-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

input.isd {
    width: 15% !important
}

.geta-callback-inner .modilewidth, .modilewidth {
    width: 83% !important
}
.inputGroup textarea {
    height: 100px;
    background-color: #f4f4f4!important;
    border: none;
    font-size: 12px;
    line-height: 23px;
    color: #424040;
    font-weight: 300;
    resize: none;
    padding: .375rem .75rem;
    width: 100%;
}
#the-count{font-size:12px;}

@media (min-width: 576px) {
    .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
}

.geta-callback-component-popup {
    box-sizing: border-box;
}

.geta-callback-component-popup .geta-callback-inner {
    background: #fff;
    width: 100%;
    margin: 0 auto;
}

.geta-callback-component-popup h2 {
    font-size: 38px;
    line-height: 48px;
    text-align: center;
    font-weight: 700;
    color: #233253;
    margin-bottom: 24px;
}

.geta-callback-component-popup h4 {
    color: #233253;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    margin-bottom: 8px;
}

.geta-callback-component-popup p.subtext, .geta-callback-component-popup .subtext {
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #8a93a5;
    margin-bottom: 46px;
}

.geta-callback-component-popup form .row {
    margin-bottom: 0px;
}

.geta-callback-component-popup .inputGroup label {
    color: #233253;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
    margin-top:0px;
}

.geta-callback-component-popup .disc-text {
    padding-bottom: 0;
}

.geta-callback-component-popup small {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #5a5a5a;
}

.geta-callback-component-popup .inputGroup input {
    height: 40px;
    background-color: #f4f4f4;
    border: none;
    font-size: 12px;
    line-height: 23px;
    color: #767676;
    font-weight: 300;
    width: 100%;
    padding: 0.375rem 0.75rem;
}

.geta-callback-component-popup .inputGroup input[type="date"] {
    cursor: pointer;
}

.geta-callback-component-popup .time-range {
    display: flex;
    margin-bottom: 46px;
}

.geta-callback-component-popup .time-range li {
    font-size: 11px;
    line-height: 14px;
    border: 1px solid #c7cacc;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    border-radius: 20px;
}

.geta-callback-component-popup .time-range li a {
    text-align: center;
    display: inline-block;
    padding: 6px 12px;
    color: #767676;
    border-radius: 20px;
    cursor: pointer;
}

.geta-callback-component-popup .time-range li a:hover {
    background: rgba(0, 94, 158, 0.1);
    color: #005e9e;
    cursor: pointer;
}

.geta-callback-component-popup .time-range li.active {
    color: #005e9e;
    padding: 6px 12px;
    background: rgba(0, 94, 158, 0.1);
    border: 1px solid rgba(0, 94, 158, 0.2);
}

.geta-callback-component-popup .disc-text .chkbx {
    padding-top: 0;
}

.geta-callback-component-popup .disc-text input[type="checkbox"] {
    margin-top: -1px;
}

@media only screen and (max-width: 1000px) {
    .geta-callback-component-popup {
        padding-top: 0;
        padding-bottom: 0;
    }
    .geta-callback-component-popup .geta-callback-inner {
        width: 100%;
        padding-top: 40px;
        padding-bottom: 0;
    }
    .geta-callback-component-popup h2 {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 12px;
    }
    .geta-callback-component-popup p.subtext {
        font-size: 14px;
        padding-bottom: 24px;
        border-bottom: 1px solid #e5e5e5;
    }
    .geta-callback-component-popup .inputGroup {
        margin-bottom: 32px;
    }
    .geta-callback-component-popup .inputGroup input {
        width: 100%;
    }
    .geta-callback-component-popup .time-range {
        display: block;
        margin-bottom: 34px;
    }
    .geta-callback-component-popup .time-range li {
        width: 124px;
        display: block;
        margin-bottom: 16px;
        font-size: 11px;
    }
    .modal-body{
        padding:0px;
    }
    .btnred{
        width: auto !important;
    }
    .geta-callback-component-popup .subtext {
        font-size: 14px;
        padding-bottom: 0px; margin-bottom:26px;
        border-bottom: 1px solid #e5e5e5;
    }
    .geta-callback-component-popup .subtext p{
        padding-top:0px
    }
    .geta-callback-component-popup .disc-text {
        padding-bottom: 30px;
    }
    .geta-callback-component-popup .row {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .geta-callback-component-popup small {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        color: #5a5a5a;
        margin-top: 30px;
        float: left;
    }
}

/**added by dhawal**/

.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li .megaMenuSec.opened {
    top: 100%;
    opacity: 1;
    visibility: visible;
    box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.1);
}

.megaMenuSec .arrowUp {
    position: absolute;
    left: 460px;
    top: -10px;
    background: url(../../../content/dam/hdfclifeinsurancecompany/top-arrow.png) no-repeat -6px 0;
    border: 0;
    width: 30px;
    height: 20px;
}

.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li>a.opened .caretIcon svg path {
    stroke: #ed1c24;
}

.siteButton:hover {
    background: #ff3038 !important;
}

/* error css */

.error-txt {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 32px;
    color: #ed1c24;
}

.checkSubscribeError, .checkAppLinkError {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #ed1c24;
}

/* HDFC breadcrum */

/* breadcrum css */

.breadcrumbSection.cat {
    background: transparent;
    position: absolute;
    bottom: 0;
}

.breadcrumbSection {
    background: linear-gradient(0deg, #ebf5f9, rgba(235, 245, 249, 0));
    /* background: transparent; */
    /* position: absolute;
    top: -40px; */
    /* padding: 8px 0 8px 35px; */
    width: 100%;
}

.breadcrumbSection a, .breadcrumbSection span {
    display: inline-flex;
}

.breadcrumbSection label {
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    color: #233253;
    margin: 0;
    display: inline-flex;
    margin-right: 4px;
    cursor: pointer;
}

.breadcrumbSection .homeIcon, .breadcrumbSection .arrowCaret {
    margin-right: 5px;
    /* height: 22px; */
}

.homeIconImg {
    width: 10px;
}

.homeIcon .hide-for-mob {
    display: none !important;
}

.breadcrumbSection .breadcrumb-item a {
    cursor: pointer;
}

@media screen and (min-width: 100px) and (max-width: 768px) {
    .breadcrumbSection.cat {
        position: unset;
        bottom: unset;
    }
    .breadcrumbSection {
        order: 0;
        background: #fff;
    }
    .homeIconImg {
        width: 9px;
    }
    .hide-for-mob {
        display: none;
    }
}

.breadcrumbSection ul {
    display: flex;
}

.accountDropDown .accountMenuLink.opened::before {
    display: none;
}
.max1000{
    max-width:1060px;
}

.g-recaptcha div{
    width:100% !important;
    z-index: -1;
}
.siteButton.outlinedBtn{
    cursor: pointer;
}

/* footer .footerFormSec .stayConnectedSec>div a:nth-child(5){
    margin-left: 0;
} */

/* footer .footerFormSec .stayConnectedSec>div a:nth-child(n+5){
    margin-top: 10px;
} */

footer .footerFormSec .stayConnectedSec>div a.whatsapp:hover{
    background: #5af576;
    border-color: #2cd449;
}

footer .footerFormSec .stayConnectedSec>div a.avatar:hover{
    background-image: url("../../../content/dam/hdfclifeinsurancecompany/home/color.png") ;
    background-repeat: no-repeat;
}

footer .footerFormSec .stayConnectedSec>div a.avatar img{
    transition: all 0.25s ease-in;
}
footer .footerFormSec .stayConnectedSec>div a.avatar:hover img {
    display: none;
}

footer .footerFormSec .stayConnectedSec>div a:hover:last-child img{
    /* filter:invert(100%) sepia(100%) saturate(100%) hue-rotate(100deg) brightness(1000%) contrast(100%); */
    filter: none;
}

footer .footerFormSec .stayConnectedSec>div a:hover img{
    filter:invert(100%) sepia(100%) saturate(100%) hue-rotate(100deg) brightness(1000%) contrast(100%);
}

.kc-btn-cta{
    background: #ed1c24;
    border: 1px solid #ed1c24;
    color: #fff;
    padding: 5px 20px;
    text-transform: uppercase;
    border-radius: 4px;
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    outline: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.kc-btn-cta:hover {
    background: #ff3038 !important;
}

.btnWidth{
    margin: 30px auto 0px;
    text-align: center;
}
.btnWidth .btnInline{
    display: inline-block;
}

@media screen and (max-width : 768px) {   
    footer .footerFormSec .footerFormBlk {
        display: none;
    }

    footer .footerFormSec .stayConnectedSec>div{
        max-width: 70%;
    }

    .mwlinks {
        padding-bottom: 20px!important;
    }
}

/* header new provision css */
.quickPara{
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #8a93a5;
}

.mwlinks{
    padding-top:10px;
    /* color: #005e9e; */
    font-style: normal;
    font-size: 13px;
    line-height: 14px;
    font-weight: 500;
    padding-bottom:15px;
}

.mwlinks a{
    color: #005e9e;
}

.appDownloadForm p,.mobileHeader .mobPlanMenuAccordCont p{
    margin-bottom: 0px!important;
    font-size: 13px !important;
    padding-bottom: 12px!important;
}
.quickPara p{
    margin-bottom: 0px !important;
}
.hamMenuWrp .quickLinkSection h3{
    margin-bottom: 24px!important;
    font-weight: 700!important;
    font-size: 14px!important;
    line-height: 22px!important;
    color: #8a93a5!important;
}

.hamMenuWrp .quickLinkSection{
    padding:25px!important;
}
.hamMenuWrp .quickLinkSection .appDownloadForm,.mobileHeader .hamMenuSection .appDwnldForm.appLink.hamLinkAcc{
    margin-top:auto!important;
    border: 1px solid #005e9e!important;
    padding: 10px!important;
    border-radius: 5px!important;
    background: #fff!important;
}

.mobileHeader .hamMenuSection .appDwnldForm.appLink.hamLinkAcc .mobPlanMenuAccordCont .formBtn img{
    margin-right:10px;
}

.hamMenuWrp .quickLinkSection .appDownloadForm .formBtnSubmit {
    display: flex!important;
    flex-wrap: wrap!important;
    justify-content: flex-start!important;
}

.formBtnSubmit a {
    margin-right: 10px!important;
}

#appLink h3,.mobileHeader .hamMenuSection .appDwnldForm.appLink.hamLinkAcc h3{
    color: #ed1c24!important;
}

.hamMenuWrp .hamMenuInnerWrp .hamMenuSection h3 a{
    color:#005e9e;
}
/* End of New provision Css */

.mcheck{
    display: none;
}

.wcheck{
    display:none;
}

/* header Contact button animation css */


.pulse {
  /* margin:100px; */
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff url("../../../content/dam/hdfclifeinsurancecompany/red.svg") no-repeat center center;
  cursor: pointer;
  /*box-shadow: 0 0 0 rgba(237, 28, 36, 0.4);*/
  box-shadow: 0px 5px 5px #e1e1e1;
  animation: pulse 1.5s 55 ease-out;
  animation-iteration-count: 10;
  animation-timing-function: ease;
  border:1px solid #e1e1e1;
  padding:10px;
}

.pulse:hover {
 animation: none;
 /*background: #ed1c24 url("../../../content/dam/hdfclifeinsurancecompany/white.svg") no-repeat center center;*/
 z-index:9;

}


@-webkit-keyframes pulse {
  1% {
    -webkit-box-shadow: 0 0 0 0 rgba(237, 28, 36, 0.4);
	background: #ed1c24 url("../../../content/dam/hdfclifeinsurancecompany/white.svg") no-repeat center center;
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(237, 28, 36, 0);
	  background: #ffffff url("../../../content/dam/hdfclifeinsurancecompany/red.svg") no-repeat center center;
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(237, 28, 36, 0);
	  background: #ffffff url("../../../content/dam/hdfclifeinsurancecompany/red.svg") no-repeat center center;
  }
}
@keyframes pulse {
  1% {
    -moz-box-shadow: 0 0 0 0 rgba(237, 28, 36, 0.4);
    box-shadow: 0 0 0 0 rgba(237, 28, 36, 0.4);
	background: #ed1c24 url("../../../content/dam/hdfclifeinsurancecompany/white.svg") no-repeat center center;
	
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(237, 28, 36, 0);
      box-shadow: 0 0 0 10px rgba(237, 28, 36, 0);
	  background: #ffffff url("../../../content/dam/hdfclifeinsurancecompany/red.svg") no-repeat center center;
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(237, 28, 36, 0);
      box-shadow: 0 0 0 0 rgba(237, 28, 36, 0);
	 background: #ffffff url("../../../content/dam/hdfclifeinsurancecompany/red.svg") no-repeat center center;
  }
}
/* End of Contact Button Css */

.listbulletElibility{
    list-style-type: disc !important;
}

.listbulletElibilityol li{
    list-style-type: decimal !important;
}

.listLeftAlign{
    text-align: left !important;
}

.leftPadding20{
    padding-left: 20px !important;
}

.tablescroll{
    overflow-x: scroll !important;
}

/* custome table css */

.tabAccordSection table.setTable tr:first-child {
    background-color: #063970!important;
}

.tabAccordSection table.setTable tr:first-child p {
    color: white;
    font-weight: 500;
}


.tabAccordSection table.setTable tr {
    background: white!important;
}

.tabAccordSection table.setTable td{
	border: 1px solid #000;
}

.centerHead{
    text-align: center !important;
}

.alignLeft{
    text-align: left !important;
}


@media only screen and (max-width: 767px) {
    .tabAccordSection table.setTable tr:nth-child(1) td {
        background: #063970 !important;
    }

    .maxWidthTable {
        width: max-content !important;
    }

}

/* end of custome tabel css */


/*  Product custome table css */



.products-wrapper .eligibility-criteria-section table.setProTable tr:first-child p {
    font-weight: 500;
    font-size: 16px;
}

.products-wrapper .eligibility-criteria-section table.setProTable td {
    background-color: unset !important;
    font-weight: 500;
    color: unset!important;
}

.products-wrapper .eligibility-criteria-section table.setProTable tr:first-child {
    background-color: #005e9e!important;
    /* color:white !important; */
}
.products-wrapper .eligibility-criteria-section table.setProTable tr:first-child p{
    color:#fff !important;
}

table.setProTable tr:not(:first-child) td:first-child,
table.setProTable tr:nth-child(4) td:nth-child(2),
table.setProTable tr:nth-child(6) td:nth-child(2){
    background-color: #eaf1f8 !important;
}

.table-freeze-wrapper tbody tr td p .setTextBlue{
    color: #005e9e;
}

.table-freeze-wrapper tbody tr td p .setTextBlack{
    color: #000;
}

/* .table-freeze-wrapper tbody tr td .setBoxBlue{
    background-color: #eaf1f8;
}

.table-freeze-wrapper tbody tr td.setBoxTransparent{
    background: unset;
} */

table.setProTable tr:not(:first-child) td:first-child p,
table.setProTable tr:nth-child(4) td:nth-child(2) p,
table.setProTable tr:nth-child(6) td:nth-child(2) p{
    color: #005e9e !important;
}   

.products-wrapper .eligibility-criteria-section table.setProTable p{
    color:#000 !important;
}

.products-wrapper .eligibility-criteria-section table.setProTable td{
    border: 1px solid #000 !important;
}

 table.setProTable tr {
    background: white!important;
}

 table.setProTable td{
	border: 1px solid #000;
}

@media only screen and (max-width: 767px) {
     table.setProTable tr:nth-child(1) td {
        background: #063970!important;
      }
}

/* end of custome Product tabel css */

/* Css of Iframe in Faq */

.lifevideo iframe{
    width:60%;
}

@media only screen and (max-width: 767px) {
    .lifevideo iframe{
        width:100%;
    }
}

/* End of Iframe in Faq */

.stickyTermBtn{
    width: 182px; 
    position: fixed; 
    bottom: 80px; 
    font-size: 14px; 
    right: 14px; 
    transition: all 0.1s ease-in-out 0s; 
    text-align: center; 
    cursor: pointer; 
    height: 50px; 
    background: rgb(237, 28, 36); 
    border-radius: 13px; 
    padding: 13px; 
    color: rgb(255, 255, 255); 
    font-weight: 500; 
    z-index: 9999;
    display: none;
    color: #fff;
}

.stickyTermBtn:hover{
    color: #fff;
}

@media only screen and (max-width: 767px) {
    .stickyTermBtn{
    position:fixed;
    bottom: 8px;
    left: 9%;
    background: rgb(237, 28, 36);
    color: rgb(255, 255, 255);
    border-radius: 10px;
    font-size: 14px;
    line-height: 28px;
    font-weight: 600;
    border: 1px solid rgb(237, 28, 36);
    height: 40px;
    min-width: 135px;
    z-index: 99998;
    padding: 5px 10px !important;
    outline: none !important;
    width:160px;
    right:unset;
    }

}

/* For all calculate popup modal css for safari scroll issue */

.example-open {
    bottom: 0;
    left: 0;
    position: fixed !important;
    right: 0;
    top: 0;
}

/* end of calculate popup css */

footer .footerFormBlk .singleInputForm .awesomplete{
    width:70% !important;
}

/* PADDING FIXES START */
.sec-padding{
    padding-block: 50px;
}

@media screen and (max-width:768px){
    .sec-padding{
        padding-block: 25px;
    }    
}

/* PADDING FIXES END */
/* CSS of Modal */

.toggle-image-with-text .geta-callback-inner .schedule-a-call-back small {
    text-transform: none;
}

.termbanner .geta-callback-inner .schedule-a-call-back small {
    text-transform: none;
}

.category-banner .geta-callback-inner .schedule-a-call-back small {
    text-transform: none;
}

.benefits-section .geta-callback-inner .schedule-a-call-back small {
    text-transform: none;
}

.schedule-a-call .geta-callback-inner .schedule-a-call-back small{
    text-transform: none;
}

.knowmoresection .geta-callback-inner .schedule-a-call-back small{
    text-transform: none;
}

.toggle-image-with-text .modal.sac .modal-dialog.modal-lg {
    margin: 20px auto 20px;
}

.termbanner .modal.sac .modal-dialog.modal-lg {
    margin: 20px auto 20px;
}

.category-banner .modal.sac .modal-dialog.modal-lg {
    margin: 20px auto 20px;
}

.schedule-a-call .modal.sac .modal-dialog.modal-lg {
    margin: 20px auto 20px;
}

.benefits-section .modal.sac .modal-dialog.modal-lg {
    margin: 20px auto 20px;
}


.knowmoresection .modal.sac .modal-dialog.modal-lg {
    margin: 20px auto 20px;
}

.toggle-image-with-text .modal-content {
    padding-bottom: 0px !important;
}

.termbanner .modal-content {
    padding-bottom: 0px !important;
}

.schedule-a-call .modal-content {
    padding-bottom: 0px !important;
}

.category-banner .modal-content {
    padding-bottom: 0px !important;
}

.benefits-section .modal-content {
    padding-bottom: 0px !important;
}

@media screen and (min-width: 100px) and (max-width: 768px)
{
    .benefitssection .annualReport .modal-content{
        padding: 40px 20px 40px 20px !important;
    }
}

.knowmoresection .modal-content {
    padding-bottom: 0px !important;
}

.toggle-image-with-text .sac p a {
    font-size: 14px;
    color: #233253;
}

.toggle-image-with-text .sac .disc-text input{
    height:47px !important;
}

.knowmoresection .sac .disc-text input{
    height:47px !important;
}

.termbanner .sac p a {
    font-size: 14px;
    color: #233253;
}

.category-banner .sac p a {
    font-size: 14px;
    color: #233253;
}

.benefits-section .sac p a {
    font-size: 14px;
    color: #233253;
}


.knowmoresection .sac p a {
    font-size: 14px;
    color: #233253;
}

.toggle-image-with-text .geta-callback-component-popup .disc-text input[type="checkbox"] {
    margin-top: -1px !important;
}

.termbanner .geta-callback-component-popup .disc-text input[type="checkbox"] {
    margin-top: -1px !important;
}

.category-banner .geta-callback-component-popup .disc-text input[type="checkbox"] {
    margin-top: -1px !important;
}

.benefits-section .geta-callback-component-popup .disc-text input[type="checkbox"] {
    margin-top: 4px !important;
}

.toggle-image-with-text-op .geta-callback-inner .schedule-a-call-back small {
    text-transform: none;
}
.toggle-image-with-text-op .modal.sac .modal-dialog.modal-lg {
    margin: 20px auto 20px;
}
.toggle-image-with-text-op .modal-content {
    padding-bottom: 0px !important;
}
.toggle-image-with-text-op .sac p a {
    font-size: 14px;
    color: #233253;
}
.toggle-image-with-text-op .geta-callback-component-popup .disc-text input[type="checkbox"] {
    margin-top: 4px !important;
}

/* css for modal */


/* CSS TO HIDE SIDE STRIP START */

.category-banner .side-strip, .productbanner .side-strip{
    display: none;
}

/* CSS TO HIDE SIDE STRIP END */

/* Css for header Breaking */

.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li {
    padding: 0 5px !important;
}

@media screen and (max-width: 1920px) and (min-width: 1280px) {
    .deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li {
        padding: 0 16px !important;
    }
}

.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li>a{
	font-size: 13px!important;
 }

/*  class for scroll margin */

.sm{
    scroll-margin-top: 80px;
}

/* CSS FOR BOX DESIGN HEADING START */

.redtext{
    color: #ed1c24 !important;
}

.bluetext{
    color: #233253 !important;
}

.bluetextv2{
    color: #0056a5 !important;
}

/* CSS FOR BOX DESIGN HEADING START */

/* API FALL SCREEN CSS START */

.api-container{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    background-color: #ffffffcc;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 100;
}

.api-container .api-response-msg{
    font-weight: 600 !important;
    color: #233253 !important;
    font-size: 26px !important;
    text-align: center;
    line-height: 1.2;
}

.api-container .close-icon{
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
}

@media screen and (max-width:768px) {
    .api-container .api-response-msg{
        font-size: 20px !important;
    }
}

/* API FALL SCREEN CSS END */
.lightG{
    color: #5a5a5a;
}

.graycolor{
    color: #8a93a5 !important;
}

.fw-500{
    font-weight: 500;
}

.fw-600{
    font-weight: 600;
}

/* scroll margin css */

@media screen and (max-width:768px){
    .scroll-margin-mob-80{
        scroll-margin-top: 80px;
    }
}

/* Read More and Read Less css start*/
.ReadMore, .ReadLess {
    color: #0056A5 !important;
    font-weight: 500 !important;
}
.ReadMore:hover, .ReadLess:hover {
    text-decoration: none !important;
}
/* Read More and Read Less css end*/
/* 31940 Tooltip addition on category lead forms css Start */
.global-tooltip,
.global-tooltip-mobileOtp {
    border: 1px solid #BDDCF8;
    background-color: #EAF4FD;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    position: absolute;
    z-index: 99;
    padding: 5px;
    font-size: 11px;
    font-weight: 300;
    line-height: 18px;
    color: #000000;
    bottom: 65%;
    left: 0;
    border-radius: 5px;
    width: max-content;
    max-width: 245px;
}
.global-tooltip-mobileOtp {
    bottom: 66%;
    left: 15px;
    max-width: 230px;
}
.global-tooltip::after,
.global-tooltip-mobileOtp::after {
    content: "";
    width: 15px;
    height: 15px;
    transform: rotate(-226deg);
    background-color: #EAF4FD;
    position: absolute;
    box-shadow: 4px -2px 4px rgb(190 186 186 / 50%);
    z-index: 0;
    bottom: -8px;
    left: calc(10% - 10px);
    border-bottom: 0;
    border-top: 1px solid #BDDCF8;
    border-right: 1px solid #BDDCF8;

}
/* 31940 Tooltip addition on category lead forms css Start */

a.hyperlink{
    cursor: pointer;
}

a.cursor-pointer {
    cursor: pointer;
}


 a.link-cta, button.link-cta {
 font-size: 14px;
  font-weight: 400;
  background: #ed1c24;
  border: 1px solid #ed1c24;
  color: #fff;
  padding: 5px 20px;
  transition: all 0.3s ease;
  border-radius: 0.25rem;
  text-align: center;
  margin-top: 21px;
  cursor: pointer;
}

 a.link-cta:hover, button.link-cta:hover {
  box-shadow: 0 8px 12px rgba(237, 28, 36, 0.2);
  background: #ff3038;
}

.flex-center-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.mb-10{
    margin-bottom: 10px !important;
}
.mb-15{
    margin-bottom: 15px !important;
}
.mb-18{
    margin-bottom: 18px !important;
}

.mt-10{
    margin-top: 10px !important;
}
.mt-15{
    margin-top: 15px !important;
}
.mt-18{
    margin-top: 18px !important;
}

.mt-20{
    margin-top: 20px !important;
}

.pb-10{
    padding-bottom: 10px;
}

.mr-8 {
    margin-right: 8px;
}

.style-border{
    border: 1px solid #6a6a6a;
    width: fit-content;
    margin: 0 auto;
    padding: 15px;
}

.style-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 40px
}

@media screen and (min-width:767px) {
    .desk-mb-50{
     margin-bottom: 50px !important;
    }

    .desk-pt-10{
        padding-top: 10px;
    }
    .desk-pt-15{
        padding-top: 10px;
    }
    .desk-pt-18{
        padding-top: 10px;
    }
     .desk-pt-20{
        padding-top: 10px;
    }
}

@media screen  and (max-width:767px){
    .mob-flex-content-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mob-mb-25{
        margin-bottom: 25px !important;
    }
    .mob-pt-10{
        padding-top: 10px;
    }
    .mob-pt-15{
        padding-top: 10px;
    }
    .mob-pt-18{
        padding-top: 10px;
    }
     .mob-pt-20{
        padding-top: 10px;
    }
}
/* For scrollable tabs*/

.scroll-mt-80 {
    scroll-margin-top: 80px;
  }
  
  .scroll-mt-100 {
    scroll-margin-top: 100px;
  }
  
  .scroll-mt-120 {
    scroll-margin-top: 120px;
  }
  
  .scroll-mt-150 {
    scroll-margin-top: 150px;
  }
  .scroll-mt-200 {
    scroll-margin-top: 200px;
  }

  @media screen and (max-width:768px) {
    .scroll-mt-mob-100{
        scroll-margin-top: 100px;
    }
    .scroll-mt-mob-120{
      scroll-margin-top: 120px;
  }
  .scroll-mt-mob-150{
    scroll-margin-top: 150px;
  }
  }
/* select2 dropdown */

.select2-container{
    width: 23% !important;
    height: 40px !important;
    color: #000 !important;
    border: 1px solid #005e9e !important;
    border-radius: 5px 0 0 5px !important;
    font-style: normal !important;
    text-align: center;
}

.select2-selection{
    width: 100%;
    border-radius: 5px 0 0 5px !important;
}

.select2-selection--single{
    border: none !important;
}

.select2-selection__rendered{
    color: #000 !important;
    padding: 5px 0 !important;
    margin-right: 7px !important;
}

.select2-selection__arrow{
    top: 5px !important;
    right: -5px !important;
}

.select2-dropdown{
    width: 210px !important;
    max-height: 180px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: #005e9d !important;
}

.select2-results__options{
    width: 100%;
    max-height: 135px !important;
    font-size: 14px;
}

.select2-results__option{
    text-align: left;
}

.select2-container:has(.select2-dropdown) {
    width: 100% !important;
}

.select2-dropdown{
    width: 100% !important;
}

.select2-container--open .select2-search__field::placeholder {
    color: #999;
    font-size: 14px;
    font-style: normal;
  }

/* @media screen and (max-width: 767px){
    .select2-container:has(.select2-dropdown) {
        width: 100% !important;
    }
    .select2-dropdown{
        width: 100% !important;
    }
} */

@media screen and (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

button.draw {
    background: none;
    border: 0;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 3px #fff;
    color: #f45e61;
    font-size: inherit;
    font-weight: 700;
    padding: 1em 2em;
    text-align: center;
    text-transform: capitalize;
    vertical-align: middle;
    width: 90px;
    height: 90px;
}
.draw {
    overflow: hidden;
    position: relative;
}
.draw:after,
.draw:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 3px solid transparent;
    width: 0;
    height: 0;
}
.draw:before {
    top: 0;
    left: 0;
    border-top-color: #125a9e;
    border-right-color: #125a9e;
    animation: border 2s infinite;
}
.draw:after {
    bottom: 0;
    right: 0;
    animation: border 2s 1s infinite, borderColor 2s 1s infinite;
}
@keyframes border {
    0% {
        width: 0;
        height: 0;
    }
    25% {
        width: 100%;
        height: 0;
    }
    50% {
        width: 100%;
        height: 100%;
    }
    to {
        width: 100%;
        height: 100%;
    }
}
@keyframes borderColor {
    0% {
        border-bottom-color: #125a9e;
        border-left-color: #125a9e;
    }
    50% {
        border-bottom-color: #125a9e;
        border-left-color: #125a9e;
    }
    51% {
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    to {
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}
@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }
}
.cardcontainer {
    position: absolute;
    top: 20px;
    /* left: 20px; */
}
.cardcontainer img {
    animation: zoominoutsinglefeatured 1.5s infinite;
}
#rdmore {
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
    background-color: #fff;
    z-index: 99999;
}

.customloader.rdmore{
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    background-color: #ffffffcc;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 100;
}

.customloader .rdmore-loader-text{
    /* white-space: nowrap; */
    /* transform: translateX(-80%); */
    text-align: center;
    margin-top: 20px;
    font-weight: 400;
    color: #000;
}

.rdmore-inner {
    position: relative;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    /* width: 90%; */
    /* height: 90px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
select:focus {
    outline: none;
    border: 0;
}
h1,
h3,
h4,
li,
p,
ul {
    margin: 0;
}
body,
html {
    font-family: Poppins, sans-serif;
}
.btnred:not(:disabled):not(.disabled).active:focus,
.btnred:not(:disabled):not(.disabled):active:focus,
.show > .btnred.dropdown-toggle:focus:not(:disabled):not(.disabled).active:focus {
    background: #ff3038 !important;
    outline: none;
    outline-style: none;
    outline-width: 0;
}
.search-suggestions {
    height: 100px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 41px;
    z-index: 99999;
    display: none;
}
.search-suggestions-selectOption li {
    color: #233253;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    padding: 16px 0 16px 45px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}
.search-suggestions-selectOption li span {
    color: #808285;
    font-size: 10px;
    line-height: 14px;
    right: 30px;
    position: absolute;
}
.search-suggestions-selectOption li:hover {
    background: #ebf5f9;
}
ul.search-suggestions-selectOption {
    border: 1px solid rgba(0, 0, 0, 0.08);
    height: 130px;
    overflow-y: auto;
    background: #fff;
    border-radius: 7px;
}
body,
html {
    height: 100%;
}
.arial {
    font-family: arial !important;
}
/* .ratingStar path {
    fill: #f9f9f9;
    /* stroke: #ccc; 
} */
.rated path {
    fill: #edbf1c !important;
    stroke: #edbf1c !important;
    opacity: 1;
}
.mobileHeader {
    display: none;
}
html {
    scroll-behavior: smooth;
}
.deskTopHeader {
    background: #f1f5f6;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    position: fixed;
    top: 0;
    z-index: 9999;
}
.deskTopHeader .deskTopHeaderWrap {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 35px;
    height: 68px;
    flex: 1;
    background: #fff;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap .logo {
    margin: 0;
}

.logo{
    font-size:2.5rem;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom:0.5rem;
}

.deskTopHeader .deskTopHeaderWrap .headerWrap .logo a {
    cursor: pointer;
    padding: 0 10px;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap .logo a img{
    height: auto;
    margin: 1px 0;
    width: 100px;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap .navBarWrap {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar {
    height: 100%;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar > ul {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar > ul > li {
    padding: 0 21.5px;
    height: 100%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar > ul > li > a {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #233253;
    text-decoration: none;
    outline: none;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar > ul > li > a .caretIcon {
    margin-left: 4px;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar > ul > li > a .caretIcon svg {
    transform: rotate(0deg);
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}
.langSwitch {
    position: relative;
}
.langSwitch {
    width: 53px;
    height: 28px;
    font-size: 1.5em;
    margin-left: 37px;
}
.langSwitch input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 0;
    font-size: 1em;
    left: 0;
    line-height: 0;
    outline: none;
    position: absolute;
    top: 0;
    width: 0;
}
.langSwitch input:after {
    content: "";
    font-size: 1em;
    position: absolute;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    -webkit-transform: translate(0);
    transform: translate(0);
    -webkit-transition: -webkit-transform 0.25s ease-out 0.1s;
    transition: -webkit-transform 0.25s ease-out 0.1s;
    transition: transform 0.25s ease-out 0.1s;
    transition: transform 0.25s ease-out 0.1s, -webkit-transform 0.25s ease-out 0.1s;
}
.langSwitch input:checked:after {
    -webkit-transform: translate(30px);
    transform: translate(26px);
}
.langSwitch input:checked ~ .langHindi {
    color: #ed1c24;
}
.langSwitch input:checked ~ .langEng {
    color: #fff;
}
.langSwitch input:before {
    content: "";
    font-size: 1em;
    position: absolute;
    border-radius: 30px;
    background: #005e9e;
    height: 28px;
    -webkit-transition: background-color 0.25s ease-out 0.1s;
    transition: background-color 0.25s ease-out 0.1s;
    width: 53px;
}
.langSwitch label {
    font-size: 10px;
    line-height: 16px;
    margin: 0;
    color: hsla(0, 0%, 100%, 0.8);
    cursor: pointer;
    display: block;
    position: absolute;
    -webkit-transition: opacity 0.25s ease-out 0.1s;
    transition: opacity 0.25s ease-out 0.1s;
    text-transform: uppercase;
}
.langSwitch label.langEng {
    color: #ed1c24;
    left: 0px !important;
    top: 1px !important;
    padding: 5px 6px 5px 7px !important;
}
.langSwitch label.langHindi {
    right: 0px !important;
    top: 1px !important;
    padding:5px 8px 5px 5px !important;
    font-weight: 600;
    color: #fff;
}
.arrowUp {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 10px solid #fff;
}
.megaMenuSec {
    padding: 41px 50px 8px;
    display: grid;
    grid-template-columns: 1fr 295px;
    grid-column-gap: 40px;
    position: absolute;
    background-color: #fff;
    z-index: 999999;
    top: 150%;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.megaMenuSec .arrowUp {
    position: absolute;
    left: 642px;
    top: -11px;
}
.megaMenuSec .megaMenuLinkSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    width: 33%!important;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner:nth-last-child(-n + 3) {
    border-bottom: 0;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner h3 ,.megaMenuSec .megaMenuLinkSec .menuLinkInner h3 a {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: #005e9e;
    margin-bottom: 16px;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner ul li {
    margin-bottom: 0;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner ul li a {
    font-size: 13px;
    line-height: 14px;
    color: #233253;
    text-transform: capitalize;
    margin-left: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner ul li a:hover {
    color: #ed1c24;
    margin-left: 10px;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner ul li span {
    font-size: 9px;
    line-height: 14px;
    border: 1px solid #ed1c24;
    border-radius: 20px;
    padding: 1px 8px;
    color: #ed1c24;
    margin-left: 5px;
    display: inline-block;
    text-transform: capitalize;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner .moreMenuLink {
    font-weight: 600;
    font-size: 10px;
    line-height: 20px;
    color: #233253;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner .moreMenuLink span {
    margin-left: 10px;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner .moreMenuLink:hover {
    margin-left: 15px;
    color: #ed1c24;
}
.megaMenuSec .keyFeatureSec {
    align-self: flex-start;
    padding: 21px 26px 44px;
    margin-top: 25px;
    border: 1px solid #c7cacc;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 94, 158, 0.05), 3px 6px 10px rgba(50, 130, 196, 0.08);
    position: relative;
}
.megaMenuSec .keyFeatureSec:after {
    content: "";
    position: absolute;
    width: 4px;
    height: 85px;
    right: -1px;
    top: -1px;
    background: #ed1c24;
}
.megaMenuSec .keyFeatureSec .ratingStarWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    padding-right: 8px;
    margin-bottom: 10px;
}
.megaMenuSec .keyFeatureSec .ratingStarWrap label {
    font-size: 11px;
    line-height: 11px;
    color: rgba(35, 50, 83, 0.8);
    margin: 0;
}
.megaMenuSec .keyFeatureSec h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #005e9e;
    margin-bottom: 7px;
}
.megaMenuSec .keyFeatureSec h3 .highlight {
    color: #ed1c24;
}
.megaMenuSec .keyFeatureSec h4 {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #233253;
    margin-bottom: 20px;
}
.megaMenuSec .keyFeatureSec .keyFeatureTag {
    padding: 2px 11px 2px 9px;
    background: #59647d;
    border-radius: 20px;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px;
}
.megaMenuSec .keyFeatureSec .featureContent {
    font-size: 14px;
    line-height: 20px;
    color: #767676;
    max-width: 100%;
    margin-bottom: 20px;
}
.megaMenuSec .keyFeatureSec .featureContent strong {
    display: block;
    font-weight: 400;
}
.megaMenuSec .keyFeatureSec .featureContent .priceStrike {
    color: #233253;
    text-decoration: line-through;
}
.megaMenuSec .keyFeatureSec .featureContent .priceHighlight {
    color: #ed1c24;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    margin-left: 1px;
}
.megaMenuSec .keyFeatureSec .featureContent .limitedOfferLbl {
    color: #233253;
    font-size: 12px;
    line-height: 18px;
}
.megaMenuSec .keyFeatureSec .featureLists {
    font-size: 12px;
    line-height: 18px;
    color: #5a5a5a;
    margin-bottom: 25px;
    margin-top: 5px;
}
.megaMenuSec .keyFeatureSec .featureLists li {
    margin-bottom: 5px;
    padding-left: 28px;
    padding-top: 3px;
    position: relative;
}
.megaMenuSec .keyFeatureSec .featureLists li .listBullet {
    position: absolute;
    left: 0;
    top: 2px;
}
.megaMenuSec .keyFeatureSec .featureBtn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.megaMenuSec .keyFeatureSec .featureBtn .learnMoreLink {
    margin-left: 10px;
}
.headerBtnWrp {
    display: flex;
    flex-wrap: wrap;
    padding-left: 22px;
}
.headerBtnWrp .payPremiumBtn {
    margin: 0 10px;
}
.siteButton {
    background: #ed1c24;
    border: 1px solid #ed1c24;
    color: #fff;
    padding: 5px 20px;
    border-radius: 4px;
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.siteButton:hover {
    background: #ed1c24;
}
.siteButton:active,
.siteButton:hover {
    color: #fff;
    box-shadow: 0 8px 12px rgba(237, 28, 36, 0.2);
}
.siteButton:active {
    background: #ff373f;
    border: 1px solid #ff373f;
}
.siteButton.outlinedBtn {
    background: transparent;
    color: #ed1c24;
    border-color: #ed1c24;
}
.siteButton.outlinedBtn:hover {
    background: #fff !important;
    box-shadow: 0 5px 7px rgba(228, 24, 32, 0.4);
    color: #ed1c24;
}
.siteButton.outlinedBtn:active {
    background: #fff;
    border: 1px solid #ff373f;
    color: #ff373f;
    box-shadow: 0 5px 7px rgba(228, 24, 32, 0.4);
}
div.siteSearchForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -ms-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    overflow: hidden;
}
div.siteSearchForm .searchInput {
    width: 80%;
    position: relative;
}
div.siteSearchForm .searchInput input {
    border: 0;
    height: 38px;
    line-height: 38px;
    border-radius: 30px 0 0 30px;
    background: #fff;
    border-right: 0.5px solid #c7cacc;
    padding: 0 40px;
    width: 100%;
    font-size: 12px;
}
div.siteSearchForm .searchInput .searchIcon {
    position: absolute;
    left: 18px;
    top: 6px;
}
div.siteSearchForm .searchSelect {
    width: 20%;
    position: relative;
}
div.siteSearchForm .searchSelect .searchSelectBox {
    width: 100%;
    height: 38px;
    line-height: 38px;
    border-radius: 0 30px 30px 0;
    background: #fff;
    padding: 0 25px 0 11px;
    cursor: pointer;
    position: relative;
}
div.siteSearchForm .searchSelect .searchSelectBox label {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    color: #233253;
    margin: 0;
    cursor: pointer;
}
div.siteSearchForm .searchSelect .searchSelectBox .dropIcon {
    position: absolute;
    right: 15px;
}
div.siteSearchForm .searchSelect .searchSelectBox .dropIcon svg {
    transform: rotate(0deg);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
div.siteSearchForm .searchSelect ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background: #fff;
    border-radius: 8px;
    width: 100%;
    left: 0;
    top: 60px;
    z-index: 99;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
div.siteSearchForm .searchSelect ul li {
    padding: 15px 10px 17px;
    font-size: 12px;
    line-height: 14px;
    color: #233253;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
}
div.siteSearchForm .searchSelect ul li:last-child {
    border-bottom: 0;
}
div.siteSearchForm .searchSelect ul li:hover {
    background: #ebf5f9;
}
.campaignHeader .mobHeaderWrap{
    justify-content:left !important;
}

.campaignHeader{
    padding-bottom:0px !important;
}

.siteSearchInput {
    margin: 0 11px;
    position: relative;
    /* display:none !important; */
}
.siteSearchInput.expand {
    margin-left: auto;
}
.siteSearchInput.expand div.siteSearchForm {
    width: 720px;
    overflow: visible;
    border: 1px solid #ddd;
    border-radius: 20px;
}
.siteSearchInput a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 0;
    background: #657d93;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -ms-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}
.siteSearchInput a:hover {
    background: #233253;
}

.mobileSeeMore .moreMenuLink{
    font-size: 11px !important;
    font-weight: bold;
    margin-top: 9px;
    display: block;
}

a.searchBtnIcon.active {
    visibility: hidden;
}

.headerLoginIcon {
    margin: 0 11px 0 0;
    position: relative;
}
.headerLoginIcon > a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #657d93;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -ms-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}
.headerLoginIcon > a:hover {
    background: #233253;
}
.headerLoginIcon .accountDropDown {
    background: #fff;
    border-radius: 8px;
    width: 345px;
    padding: 25px 0;
    position: absolute;
    top: 100px;
    right: -35px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 99;
}
.headerLoginIcon .accountDropDown .arrowUp {
    position: absolute;
    top: -9px;
    right: 37px;
}
.headerLoginIcon .accountDropDown > ul > li > a {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: #2c6698;
    padding: 16px 62px;
    display: block;
    position: relative;
}
.headerLoginIcon .accountDropDown > ul > li > a:before {
    content: "";
    position: absolute;
    width: 280px;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.headerLoginIcon .accountDropDown > ul > li > a span {
    position: absolute;
}
.headerLoginIcon .accountDropDown > ul > li > a .menuIcon {
    left: 30px;
    top: 12px;
}
.headerLoginIcon .accountDropDown > ul > li > a .dropIcon {
    right: 37px;
}
.headerLoginIcon .accountDropDown > ul > li > a .dropIcon svg {
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}
.headerLoginIcon .accountDropDown>ul>li>a.opened .dropIcon svg {
    transform: rotate(180deg);
}
.headerLoginIcon .accountDropDown > ul > li:last-child a:before {
    display: none;
}
.headerLoginIcon .accountDropDown > ul > li ul {
    background: #fff;
    display: none;
}
.headerLoginIcon .accountDropDown > ul > li ul li a,
.headerLoginIcon .accountDropDown > ul > li ul li span.accountLi {
    font-size: 12px;
    line-height: 14px;
    color: #233253;
    display: block;
    padding: 16px 35px 16px 60px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: relative;
}
.headerLoginIcon .accountDropDown > ul > li ul li a > span,
.headerLoginIcon .accountDropDown > ul > li ul li span.accountLi > span {
    margin-right: 5px;
}
.headerLoginIcon .accountDropDown > ul > li ul li a:before {
    content: "";
    position: absolute;
    width: 255px;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.headerLoginIcon .accountDropDown > ul > li ul li a:hover,
.headerLoginIcon .accountDropDown > ul > li ul li span.accountLi:hover {
    background: #ebf5f9;
    cursor: pointer;
}
.headerLoginIcon .accountDropDown > ul > li ul li:last-child a {
    border-bottom: 0;
}
.headerContactIcon {
    margin: 0 11px 0 0;
    position: relative;
}
.headerContactIcon > a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* background: #fff; */
    box-shadow: 0 4px 4px rgba(0, 94, 158, 0.1);
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -ms-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}
/* .headerContactIcon > a:hover {
    background: #ed1c24;
} */
.headerContactIcon > a:hover svg path {
    stroke: #fff;
}
.headerContactIcon > a:hover svg path.phonePath {
    fill: #ed1c24;
}
.headerContactIcon .contactInfoPopOver {
    position: absolute;
    right: 0;
    top: 150px;
    width: 575px;
    padding: 26px 50px;
    border-radius: 8px;
    background: #fff;
    display: grid;
    grid-template: auto auto/1fr 1fr;
    grid-column-gap: 50px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 999999;
}
.headerContactIcon .contactInfoPopOver .arrowUp {
    position: absolute;
    right: 10px;
    top: -10px;
}
.headerContactIcon .contactInfoPopOver .contactInfoSection h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #9198a9;
    margin-bottom: 22px;
}

.contactInfoSection h5 {
    color: #ed1c24;
    font-size: 13px;
    margin: 0;
    padding: 0;
    position: relative;
    top: -16px;
}

.contactInfoSection:nth-child(1) {
    padding-right: 14px;
    border-right: 1px solid #919191;
}
    
.headerContactIcon .contactInfoPopOver .contactInfoSection ul li h4 {
    line-height: 19px !important;
}

.headerContactIcon .contactInfoPopOver .contactInfoSection ul li {
    padding: 11px 0 9px 53px;
    margin-bottom: 11px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
}
.headerContactIcon .contactInfoPopOver .contactInfoSection ul li:hover {
    background: #eaf1f8;
}
.headerContactIcon .contactInfoPopOver .contactInfoSection ul li .menuIcon {
    position: absolute;
    left: 20px;
    align-items: center;
    display: flex;
    top: 0;
    bottom: 0;
}
.headerContactIcon .contactInfoPopOver .contactInfoSection ul li h4 {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: #2c6698;
    padding-bottom: 6px;
}
.headerContactIcon .contactInfoPopOver .contactInfoSection ul li p {
    color: #233253;
    margin: 0;
    font-size: 12px !important;
    line-height: 14px;
}
.headerContactIcon .contactInfoPopOver .contactInfoSection ul li p a {
    color: #233253;
    font-size: 12px !important;
}
.headerContactIcon .contactInfoPopOver .contactInfoSection hr {
    width: 217px;
    height: 0;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0 0 26px;
}
.headerContactIcon .contactInfoPopOver .contactViewMore {
    text-align: center;
    grid-column: 1/3;
    margin-top: 30px;
}
.headerContactIcon .contactInfoPopOver .contactViewMore a {
    display: inline-flex;
}
.headerHamburgerMenu {
    background: #fff;
    width: 60px;
    border-right: 1px solid #f9f9f9;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.headerHamburgerMenu > a {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.headerHamburgerMenu > a .line {
    fill: none;
    stroke: #233253;
    stroke-width: 6;
    transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.headerHamburgerMenu > a .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.headerHamburgerMenu > a .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}
.headerHamburgerMenu > a .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

.productListDisclaimer p{
    font-size: 11px;
    padding-top: 17px;
    margin-bottom: 0;
}

.nriContent p{
    padding-bottom: 15px;
    font-size: 12px;
    line-height: 16px;
    color: #ed1c24;
    position: relative;
    padding-left: 10px;
}
.hamMenuWrp {
    position: absolute;
    background-color: #fff;
    display: grid;
    grid-template-columns: 1fr 250px;
    width: 100%;
    z-index: 999999;
    top: 150%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.hamMenuWrp .hamMenuInnerWrp {
    padding: 47px 72px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.hamMenuWrp .hamMenuInnerWrp .hamMenuSection {
    width: 25%;
}
.hamMenuWrp .hamMenuInnerWrp .hamMenuSection .hamMenuIcon {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, #edf8ff, rgba(237, 248, 255, 0));
    margin-bottom: 24px;
}
.hamMenuWrp .hamMenuInnerWrp .hamMenuSection h3 {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: #005e9e;
    margin-bottom: 15px;
}
.hamMenuWrp .hamMenuInnerWrp .hamMenuSection nav ul li {
    margin-bottom: 7px;
}
.hamMenuWrp .hamMenuInnerWrp .hamMenuSection nav ul li a {
    color: #233253;
    font-size: 13px;
    line-height: 14px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.hamMenuWrp .hamMenuInnerWrp .hamMenuSection nav ul li a:hover {
    color: #ed1c24;
    margin-left: 4px;
}
.hamMenuWrp .quickLinkSection {
    background: #eaf1f8;
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.hamMenuWrp .quickLinkSection .custom-check-box{
    max-height:150px;
    overflow: scroll;
}
.hamMenuWrp .quickLinkSection h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #8a93a5;
    margin-bottom: 24px;
}
.hamMenuWrp .quickLinkSection nav ul li {
    margin-bottom: 7px;
}
.hamMenuWrp .quickLinkSection nav ul li a {
    color: #005e9e;
    font-style: normal;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
}
.hamMenuWrp .quickLinkSection .appDownloadForm ,.mobileHeader .hamMenuSection .appDwnldForm.appLink.hamLinkAcc{
    margin-top:auto!important;
    border: 1px solid #005e9e!important;
    padding: 10px!important;
    border-radius: 5px!important;
    background: #fff!important;
}
.hamMenuWrp .quickLinkSection .appDownloadForm h3 {
    margin-bottom: 16px;
}
.hamMenuWrp .quickLinkSection .appDownloadForm .formInput {
    margin-bottom: 10px;
}
.hamMenuWrp .quickLinkSection .appDownloadForm .formInput input {
    background: #fff;
    border: 0;
    width: 100%;
    height: 42px;
    font-style: italic;
    font-weight: 300;
    font-size: 12px;
    line-height: 12px;
    padding: 15px;
}
.hamMenuWrp .quickLinkSection .appDownloadForm .formBtnSubmit {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.hamMenuWrp .quickLinkSection .appDownloadForm .formBtnSubmit button {
    background: #767676;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    padding: 5px 16px;
    border-radius: 4px;
    border: 0;
}
.hamMenuWrp .quickLinkSection .appDownloadForm.focused .formBtnSubmit button {
    background: #ed1c24;
}
.hamMenuWrp .quickLinkSection .appDownloadForm .formBtnSubmit a svg path {
    transition: all 0.3s ease-in-out;
}
.hamMenuWrp .quickLinkSection .appDownloadForm .formBtnSubmit a.appleStore {
    margin: 0 10px 0 auto;
}
.hamMenuWrp .quickLinkSection .appDownloadForm .formBtnSubmit a.appleStore:hover svg path[fill="#808285"] {
    fill: #000;
}
.hamMenuWrp .quickLinkSection .appDownloadForm .formBtnSubmit a.andriodStore:hover svg path[fill="#808285"] {
    fill: #9fc037;
}
.highlight {
    color: #ed1c24;
}
span.message-success {
    color: #ed1c24;
    font-size: 12px;
}
.ratingStarWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    padding-right: 8px;
    margin-bottom: 10px;
}
.ratingStarWrap label {
    font-size: 11px;
    line-height: 11px;
    color: rgba(35, 50, 83, 0.8);
    margin: 0;
}
.searchSelectOption-container.opened .searchSelectOption {
    opacity: 1;
    visibility: visible;
    top: 41px;
    z-index: 99999;
}
div.siteSearchForm .searchSelect.opened .searchSelectBox .dropIcon svg, div.siteSearchForm .searchSelect .searchSelectBox.opened .dropIcon svg {
    transform: rotate(180deg);
}

.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li>a.opened {
    color: #ed1c24;
    outline: none;
}

.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li>a.opened .caretIcon svg {
    transform: rotate(180deg);
}
.headerLoginIcon .accountDropDown.opened {
    top: 45px;
    opacity: 1;
    visibility: visible;
    z-index: 99999;
}
.headerContactIcon .contactInfoPopOver.opened {
    top: 55px;
    opacity: 1;
    visibility: visible;
}

.blurOverlayBg {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    background: rgba(0,0,0,.3);
    -webkit-backdrop-filter: blur(30px);
    -moz-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    z-index: 9990;
    display: none;
    top: 0;
}

@media screen and (max-width: 1024px) {
    .deskTopHeader {
        display: none;
    }
    .mobileHeader {
        display: block;
        background: #fff;
        padding: 15px 25px;
        position: fixed;
        width: 100%;
        z-index: 999;
        top: 0;
        left: 0;
    }
    .mobileHeader .mobHeaderWrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .mobileHeader .mobHeaderWrap .logo img, .logoSection .logo img{
        width: 65px; height:45px;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec {
        margin-left: auto;
        display: flex;
        flex-wrap: wrap;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .searchButton {
        margin-right: 13px;
        /* display:none !important; */
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .searchButton a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 5px 20px rgba(90, 90, 90, 0.2);
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton {
        margin-right: 13px;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton > a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 5px 20px rgba(90, 90, 90, 0.2);
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown {
        background: #fff;
        border-radius: 8px;
        width: 90%;
        padding: 25px 0;
        position: fixed;
        left: 0;
        right: 0;
        margin: 100px auto 0;
        opacity: 0;
        visibility: hidden;
        z-index: 999;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li > a {
        font-weight: 500;
        font-size: 14px;
        line-height: 14px;
        color: #2c6698;
        padding: 16px 62px;
        display: block;
        position: relative;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li > a:before {
        content: "";
        position: absolute;
        width: 280px;
        height: 1px;
        background: rgba(0, 0, 0, 0.08);
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li > a span {
        position: absolute;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li > a .menuIcon {
        left: 30px;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li > a .dropIcon {
        right: 37px;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li > a .dropIcon svg {
        -webkit-transition: transform 0.3s ease-in-out;
        -moz-transition: transform 0.3s ease-in-out;
        -ms-transition: transform 0.3s ease-in-out;
        -o-transition: transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out;
        transform: rotate(0deg);
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>a.opened .dropIcon svg {
        transform: rotate(180deg);
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li:first-child .menuIcon {
        top: 13px;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li:nth-child(2) .menuIcon {
        top: 12px;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li:nth-child(3) .menuIcon {
        top: 15px;
        left: 27px;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li:last-child a:before {
        display: none;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li ul {
        background: #fff;
        display: none;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li ul li a {
        font-size: 12px;
        line-height: 14px;
        color: #233253;
        display: block;
        padding: 16px 35px 16px 60px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        position: relative;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li ul li a:before {
        content: "";
        position: absolute;
        width: calc(100% - 95px);
        height: 1px;
        background: rgba(0, 0, 0, 0.08);
        bottom: 0;
        left: 60px;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li ul li a:hover {
        background: #ebf5f9;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown > ul > li ul:last-child a {
        border-bottom: 0;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .hamBurgerMenu {
        width: 35px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .hamBurgerMenu > a {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }
    .mobileHeader .hamMenuSection {
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        -webkit-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        -ms-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        transition: left 0.3s ease;
        z-index: 999;
    }
    .mobileHeader .hamMenuSection h3 {
        font-weight: 700;
        font-size: 16px;
        line-height: 22px;
        color: #9198a9;
    }
    .mobileHeader .hamMenuSection .logoSection {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 55px 24px 20px;
    }
    .mobileHeader .hamMenuSection .subMenuSection {
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        z-index: 9;
        padding: 0 0 50px;
        -webkit-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        -ms-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        transition: left 0.3s ease;
    }
    .mobileHeader .hamMenuSection .subMenuSection.opened {
        left: 0;
    }
    .mobileHeader .hamMenuSection .subMenuSection.opened .subMenuBC a svg {
        height: 18px;
        width: 13px;
    }
    .mobileHeader .hamMenuSection .subMenuSection .subMenuBC {
        margin: 0 0 40px;
        padding: 0 24px;
    }
    .mobileHeader .hamMenuSection .subMenuSection .subMenuBC a {
        font-size: 13px;
        line-height: 22px;
        color: #233253;
    }
    .mobileHeader .hamMenuSection .subMenuSection nav {
        padding: 0 24px;
    }
    .mobileHeader .hamMenuSection .subMenuSection nav > ul {
        margin-bottom: 52px;
    }
    .mobileHeader .hamMenuSection .subMenuSection nav .plansNote {
        font-size: 12px;
        line-height: 16px;
        color: #ed1c24;
        position: relative;
        padding-left: 10px;
    }
    .mobileHeader .hamMenuSection .subMenuSection nav .plansNote sup {
        position: absolute;
        left: 0;
        top: 7px;
    }
    .mobileHeader .hamMenuSection .hamBtnSection {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px 40px;
    }
    .mobileHeader .hamMenuSection .hamBtnSection a {
        width: 48%;
        text-align: center;
        padding: 5px 8px;
    }
    .mobileHeader .hamMenuSection .hamMenuLinks {
        padding: 0 24px 48px;
    }
    .mobileHeader .hamMenuSection .hamMenuLinks h3,
    .mobileHeader .hamMenuSection .hamMenuLinks nav > ul > li {
        margin-bottom: 24px;
    }
    .mobileHeader .hamMenuSection .hamMenuLinks nav > ul > li > a ,
    .mobileHeader .hamMenuSection .hamMenuLinks nav > ul > li > span > a{
        font-weight: 500;
        font-size: 15px;
        line-height: 15px;
        color: #2c6698;
    }
    .mobileHeader .hamMenuSection .hamMenuLinks nav > ul > li > a svg {
        width: 12px;
        height: 13px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li>a.opened svg {
        transform: rotate(90deg);
    }
    .mobileHeader .hamMenuSection .hamMenuLinks nav > ul > li:last-child {
        margin: 0;
    }
    .mobileHeader .hamMenuSection .hamMenuLinks nav > ul > li ul.hamSubMenu {
        display: none;
        padding: 10px 10px 0 17px;
    }
    .mobileHeader .hamMenuSection .hamMenuLinks nav > ul > li ul.hamSubMenu li {
        margin-bottom: 5px;
    }
    .mobileHeader .hamMenuSection .hamMenuLinks nav > ul > li ul.hamSubMenu li a {
        font-size: 13px;
        line-height: 22px;
        color: #233253;
    }
    .mobileHeader .hamMenuSection .hamMenuLinks nav > ul > li ul.hamSubMenu li:last-child {
        margin: 0;
    }
    .mobileHeader .hamMenuSection .hamQuickLinkSection {
        background: #ebf5f9;
        padding: 40px 24px 60px;
    }
    .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink h3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 25px;
    }
    .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink h3 a {
        width: 23px;
        height: 23px;
        border-radius: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border: 1px solid rgba(237, 28, 36, 0.6);
        transform: rotate(0deg);
        -webkit-transition: rotate 0.3s ease-in-out;
        -moz-transition: rotate 0.3s ease-in-out;
        -ms-transition: rotate 0.3s ease-in-out;
        -o-transition: rotate 0.3s ease-in-out;
        transition: rotate 0.3s ease-in-out;
    }
    .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink h3 a.opened {
        background: #ed1c24;
        transform: rotate(180deg);
    }
    /* .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink .mobPlanMenuAccordCont {
        display: none;
    } */
    .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink nav {
        /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
        padding: 0 0 32px;
    }
    .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink nav ul li {
        margin-bottom: 24px;
    }
    .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink nav ul li a {
        font-weight: 500;
        font-size: 14px;
        line-height: 14px;
        color: #2c6698;
    }
    .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink nav ul li:last-child {
        margin: 0;
    }
    .mobileHeader .hamMenuSection .appDwnldForm {
        padding-top: 23px;
    }
    .mobileHeader .hamMenuSection .appDwnldForm h3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 17px;
    }
    .mobileHeader .hamMenuSection .appDwnldForm h3 a {
        width: 23px;
        height: 23px;
        border-radius: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border: 1px solid rgba(237, 28, 36, 0.6);
        transform: rotate(0deg);
        -webkit-transition: rotate 0.3s ease-in-out;
        -moz-transition: rotate 0.3s ease-in-out;
        -ms-transition: rotate 0.3s ease-in-out;
        -o-transition: rotate 0.3s ease-in-out;
        transition: rotate 0.3s ease-in-out;
    }
    /* .mobileHeader .hamMenuSection .appDwnldForm .mobPlanMenuAccordCont {
        display: none;
    } */
    .mobileHeader .hamMenuSection .appDwnldForm .formInput {
        margin-bottom: 18px;
    }
    .mobileHeader .hamMenuSection .appDwnldForm .formInput input {
        width: 100%;
        background: #fff;
        border-radius: 4px;
        height: 44px;
        line-height: 44px;
        border: 0;
        padding: 0 14px;
        font-style: italic;
        font-weight: 300;
        font-size: 12px;
        line-height: 23px;
    }
    .mobileHeader .hamMenuSection .appDwnldForm .formBtn {
        display: flex;
        flex-wrap: wrap;
    }
    .mobileHeader .hamMenuSection .appDwnldForm .formBtn button {
        background: #767676;
        color: #fff;
        font-weight: 600;
        font-size: 12px;
        line-height: 20px;
        padding: 8px 16px;
        border-radius: 4px;
        border: 0;
    }
    .mobileHeader .hamMenuSection .appDwnldForm .formBtn .appleStore {
        margin-left: auto;
        margin-right: 10px;
    }
    .mobileHeader div.siteSearchForm .searchInput .searchIcon {
        top: 7px;
    }
    .mobileHeader div.siteSearchForm .searchInput input,
    .mobileHeader div.siteSearchForm .searchSelect .searchSelectBox {
        height: 38px;
        line-height: 38px;
    }

    .mobileHeader .searchSelect .siteButton{
        padding: 8px 20px 8px 15px;
        border-radius: 0px 20px 20px 0px;
    }
    .mobHeaderSearchWrp {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        -webkit-backdrop-filter: blur(10px);
        -moz-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        padding: 105px 24px 0;
        background-color: rgb(129 129 129 / 30%);
    }
    .mobHeaderSearchWrp .mobHeaderSearchOverlay {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .mobHeaderSearchWrp a.mobSearchClose {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 34px;
        right: 24px;
        background: #fff;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.19);
    }
    .mobHeaderSearchWrp div.siteSearchForm {
        width: 100%;
        position: static;
        overflow: visible;
    }
    .mobHeaderSearchWrp div.siteSearchForm .searchInput {
        width: 68%;
    }
    .mobHeaderSearchWrp div.siteSearchForm .searchSelect {
        width: 32%;
    }
    .langSwitch {
        margin-left: 23px;
    }
    .mobileHeader .hamMenuSection.opened {
        left: 0;
    }
    .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown.opened {
        margin: 17px auto 0;
        opacity: 1;
        visibility: visible;
    }
}
@media screen and (device-width: 1024px) {
    .mobileHeader {
        top: 0;
        left: 0;
    }
}
@media screen and (min-width: 100px) and (max-width: 768px) {
    .ratingStarWrap {
        width: 100%;
    }
    .logo{
        margin-bottom:unset;
    }
}


.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li .megaMenuSec.opened {
    top: 100%;
    opacity: 1;
    visibility: visible;
}
.headerHamburgerMenu .hamMenuWrp.opened {
    top: 100%;
    opacity: 1;
    visibility: visible;
}

.headerHamburgerMenu .hamMenuWrp.opened {
    top: 100%;
    opacity: 1;
    visibility: visible;
}
.headerHamburgerMenu > a.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
.headerHamburgerMenu > a.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}
.headerHamburgerMenu > a.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

.slide-contact-info-wrap {
    background: rgba(0,0,0,.3);
    backdrop-filter: blur(30px);
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    z-index: 999;
    padding-top: 141px;
    overflow: auto;
}
.slide-contact-info-wrap .slide-contact-info-cont {
    background: #fff;
    padding: 56px 0 52px;
    position: relative;
    height: 730px;
}
.slide-contact-info-wrap .slide-contact-info-cont .close-slide-contact-info {
    background: #fff;
    box-shadow: 0 12px 34px rgb(0 0 0 / 19%);
    height: 34px;
    width: 34px;
    border-radius: 50%;
    display: block;
    margin-left: -17px;
    position: absolute;
    top: -17px;
    left: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 34px;
}
.slide-contact-info-wrap .slide-contact-info-cont .close-slide-contact-info svg {
    width: 11px;
}
svg {
    overflow: hidden;
}
svg{
    vertical-align: middle;
}
.slide-contact-info-wrap .accordion-lists .cust-accordion:first-child {
    padding-top: 0;
}
.slide-contact-info-wrap .accordion-lists .cust-accordion {
    padding: 24px 0;
    position: relative;
}
.slide-contact-info-wrap .accordion-lists .cust-accordion .accordion-head {
    padding: 0 55px 0 34px;
    position: relative;
}
.slide-contact-info-wrap .accordion-lists .cust-accordion .accordion-head h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #233253;
    opacity: .5;
}.slide-contact-info-wrap .accordion-lists .cust-accordion.open .acc-arrow {
    right: 34px;
    top: 7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ed1c24;
    border-bottom: 7px solid transparent;
}
.slide-contact-info-wrap .accordion-lists .cust-accordion .accordion-content {
    padding-top: 8px;
}
.slide-contact-info-wrap .contact-lists li {
    padding: 16px 36px 16px 69px;
    position: relative;
    font-size: 12px;
    line-height: 14px;
    color: #233253;
    background: #fff;
}
.slide-contact-info-wrap .contact-lists li img {
    position: absolute;
    top: 25px;
    left: 37px;
    width: 20px;
}
.slide-contact-info-wrap .contact-lists li label {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: #2c6698;
    margin-bottom: 8px;
    display: block;
}
.slide-contact-info-wrap .contact-lists li a {
    color: #233253;
}
.slide-contact-info-wrap .contact-lists li.call-req-box {
    background: #ebf5f9;
}
.slide-contact-info-wrap .slide-contact-info-btn {
    margin-top: 40px;
}
.slide-contact-info-wrap .slide-contact-info-btn a {
    width: 150px;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
}
.siteButton.outlinedBtn {
    background: transparent;
    color: #ed1c24;
    border-color: #ed1c24;
}
.slide-contact-info-wrap .accordion-lists .cust-accordion .acc-arrow {
    position: absolute;
    top: 2px;
    right: 36px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #ed1c24
  }
.slide-contact-info-wrap .accordion-lists .cust-accordion.open .acc-arrow {
    right: 34px;
    top: 7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ed1c24
}
.siteSearchInput a svg path {
    fill: #fff;
}

/* Added by Komal */
.mobileHeader .hamMenuSection .hamQuickLinkSection h3 a.opened {
    background: #ed1c24;
    transform: rotate(180deg);
}

.mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink h3 a.opened path {
    stroke: #fff;
}

.mobileHeader .hamMenuSection .hamQuickLinkSection h3 a.opened path {
    stroke: #fff;
}

/* Added by Komal */
.hamQuickLinkSection .appDwnldForm.focused .formBtn button {
    background: #ed1c24 !important;
}

.checkAppLinkHeaderError {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #ed1c24;
}
#justifySpaceBetween{
    justify-content: space-between !important;
}
.width100{
    width: 100% !important;
}
.widthAuto{
    width: auto !important;
}

.pwaSection{
    height: 70px;
    position: fixed;
    bottom: 0%;
    width: 100%;
    background-color: rgba(255,255,255,0.9);
    opacity: 1;
    box-shadow: 0px -2px 4px 0px rgb(0 0 0 / 10%);
    padding: 20px;
    z-index: 10000;
}

footer {
    background: #f0f2f2;
    padding: 80px 0 34px;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}
footer .footerMenu {
    border-top: 1px solid rgba(31, 34, 35, 0.1);
    border-bottom: 1px solid rgba(31, 34, 35, 0.1);
    margin: 0 0 54px;
}
footer .footerMenu ul {
    max-width: 1060px;
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
footer .footerMenu ul li {
    padding: 17px 0;
}
footer .footerMenu ul li a {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #1f2223;
    text-transform: uppercase;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}
footer .footerMenu ul li a:hover {
    color: #ed1c24;
}
footer .footerMenu .footerLogo {
    display: none;
}
footer .wrapper.footerMenuSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
}
footer .wrapper.footerMenuSec .productMenuSec {
    flex: 1;
    /* margin-left: 48px; */
}
footer .wrapper.footerMenuSec .productMenuSec > h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    color: #233253;
    /* margin-bottom: 15px; */
}
footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList {
    max-width: 23%;
    width: 100%;
}
footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList h3 {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #8a93a5;
    margin-bottom: 5px;
}
footer .wrapper.footerMenuSec .menuSecList {
    margin-bottom: 20px;
}
footer .wrapper.footerMenuSec .menuSecList h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    color: #233253;
    /* margin-bottom: 15px; */
}
/* footer .wrapper.footerMenuSec .menuSecList ul li {
    margin-bottom: 5px;
} */
footer .wrapper.footerMenuSec .menuSecList ul li a {
    font-size: 11px;
    line-height: 15px;
    color: #1f2223;
    max-width: 60%;
    margin: auto;
}

footer .wrapper.footerMenuSec .menuSecList.open ul li a {
    color: #FF3E3E;
}

footer .wrapper.footerMenuSec .menuSecList ul li a:hover {
    color: #233253;
}
footer .wrapper.footerMenuSec .menuSecList > a {
    font-weight: 600;
    font-size: 10px;
    line-height: 20px;
    color: #233253;
    text-transform: uppercase;
    margin: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
footer .wrapper.footerMenuSec .menuSecList > a:hover {
    margin-left: 5px;
    color: #FF3E3E;
}
footer .wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
footer .mobileFooterMenu {
    display: none;
}
footer .footerFormSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 56px;
}
footer .footerFormSec h3 {
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    color: #233253;
    margin-bottom: 12px;
}
footer .footerFormSec .appDwnldSec > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
footer .footerFormSec .appDwnldSec > div a svg path {
    transition: all 0.3s ease-in-out;
}
footer .footerFormSec .appDwnldSec > div a:hover svg path[fill="#808285"] {
    fill: #9fc037;
}
footer .footerFormSec .appDwnldSec > div a.appleIcon {
    margin: 0 17px 0 auto;
}
footer .footerFormSec .appDwnldSec > div a.appleIcon:hover svg path[fill="#808285"] {
    fill: #000;
}
footer .footerFormSec form {
    display: flex;
    flex-wrap: wrap;
}
footer .footerFormSec form input {
    width: 210px;
    line-height: 40px;
    padding: 0 15px;
    background: #dbdddd;
    border-radius: 4px 0 0 4px;
    border: 0;
    font-style: italic;
    font-weight: 300;
    line-height: 23px;
    color: #767676;
}
footer .footerFormSec form button,
footer .footerFormSec form input {
    height: 40px;
    font-size: 12px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
footer .footerFormSec form button {
    line-height: 40px;
    padding: 0 17px;
    background: #808285;
    border-radius: 0 4px 4px 0;
    border: 0;
    font-weight: 600;
    color: #fff;
}
footer .footerFormSec form.focused input {
    background: #fff;
}
footer .footerFormSec form.focused button {
    background: #ed1c24;
}
footer .footerFormSec .stayConnectedSec > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
footer .footerFormSec .stayConnectedSec > div a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 500px;
    border: 1px solid #808285;
    /* margin-left: 10px; */
    background: transparent;
}
footer .footerFormSec .stayConnectedSec > div a,
footer .footerFormSec .stayConnectedSec > div a svg path {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
footer .footerFormSec .stayConnectedSec > div a:first-child {
    margin-left: 0;
}
footer .footerFormSec .stayConnectedSec > div a.facebook:hover {
    background: #4867aa;
    border-color: #4867aa;
}
footer .footerFormSec .stayConnectedSec > div a.linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
}
footer .footerFormSec .stayConnectedSec > div a.twitter:hover {
    background: #50abf1;
    border-color: #50abf1;
}
footer .footerFormSec .stayConnectedSec > div a.youtube:hover {
    background: #fe0000;
    border-color: #fe0000;
}
footer .footerFormSec .stayConnectedSec > div a.instagram:hover {
    border-color: #f09433;
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
    background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}
footer .footerFormSec .stayConnectedSec > div a.slideshare:hover {
    background: #129494;
    border-color: #129494;
}
footer .footerFormSec .stayConnectedSec > div a:hover svg path {
    fill: #fff;
}
footer .mobileFooterInfo {
    display: none;
}
footer .footerInfo,
footer .footerInfo h4 {
    color: #1f2223;
    margin-bottom: 22px;
}
footer .footerInfo h4, footer .footerInfo h4 p {
    font-size: 16px;
    line-height: 23px;
    font-weight: 400;
}
footer .footerInfo h5 {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 12px;
    font-weight: 400;
}
footer .footerInfo p {
    font-size: 11px;
    line-height: 13px;
    margin-bottom: 10px;
}
footer .bewareAlert div {
    background: #fff;
    padding: 18px 0;
    text-align: center;
    margin-bottom: 32px;
}
footer .bewareAlert div h3 {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #1f2223;
    margin: 0 0 8px;
}
footer .bewareAlert div p {
    font-size: 12px;
    line-height: 15px;
    color: #1f2223;
    max-width: 60%;
    margin: auto;
}
footer .externalLinks h3 {
    font-size: 14px;
    line-height: 18px;
    color: #1f2223;
    margin: 0 0 5px;
    font-weight: 400;
}
footer .externalLinks nav {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
footer .externalLinks nav a {
    font-size: 10px;
    line-height: 13px;
    color: #1f2223;
    position: relative;
    padding: 0 14px 0 0;
}
footer .externalLinks nav a:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 12px;
    background: #1f2223;
    margin-right: 7px;
}
footer .externalLinks nav a:last-child:before,
footer .footerViewMore {
    display: none;
}

@media screen and (max-width: 1024px) {
    footer {
        padding: 40px 0 56px;
    }
    footer .wrapper {
        width: 100%;
        padding: 0 24px;
    }
    footer .footerMenu {
        padding: 36px 38px 39px;
        margin-bottom: 0;
        display: flex;
    }
    footer .footerMenu ul {
        width: 100%;
        flex-direction: column;
    }
    footer .footerMenu ul li {
        padding: 0;
        margin: 0 0 18px;
    }
    footer .footerMenu ul li a {
        font-weight: 600;
        font-size: 14px;
        line-height: 18px;
        color: #231f20;
    }
    footer .footerMenu ul li:last-child {
        margin-bottom: 0;
    }
    footer .footerMenu .footerLogo {
        display: block;
    }
    footer .wrapper.footerMenuSec {
        margin-bottom: 0;
    }
    footer .wrapper.footerMenuSec .productMenuSec {
        margin-left: 0;
        width: 100%;
    }
    footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList {
        max-width: 100%;
        width: 100%;
    }
    footer .wrapper.footerMenuSec .menuSecList {
        margin-bottom: 10px;
    }
    footer .footerFormSec {
        padding: 38px 38px 40px;
        flex-direction: column;
        margin: 0;
    }
    footer .footerFormSec .footerFormBlk {
        display: none;
    }
    footer .footerFormSec .stayUpdatedSec {
        display: block;
    }
    footer .footerFormSec h3 {
        font-size: 16px;
        margin-bottom: 16px;
    }
    footer .footerFormSec form input {
        height: 44px;
        line-height: 44px;
        width: 100% !important;
    }
    footer .footerFormSec form button {
        height: 44px;
        line-height: 44px;
        width: 30%;
    }
    footer .mobileFooterMenu {
        display: block;
        padding: 0 0px 30px;
    }
    footer .mobileFooterMenu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    footer .mobileFooterMenu ul li a {
        font-size: 12px;
        line-height: 18px;
        color: #231f20;
    }
    footer .externalLinks,
    footer .footerInfo {
        display: none;
    }
    footer .mobileFooterInfo {
        display: block;
        padding: 0 0 15px;
    }
    footer .mobileFooterInfo h4 {
        font-weight: 400;
        font-size: 12px;
        line-height: 17px;
        color: #666;
        margin: 0 0 15px;
    }
    
    footer .mobileFooterInfo h4 a{
        font-size:12px;
        color:#007bff;
    }
    /* footer .bewareAlert {
        padding: 0 24px;
    } */
    footer .bewareAlert div {
        padding: 0 9px;
    }
    footer .bewareAlert div h3 {
        font-size: 13px;
        margin: 0 0 11px;
    }
    footer .bewareAlert div p {
        font-size: 11px;
        max-width: 100%;
    }
    footer .footerViewMore {
        display: block;
        text-align: center;
        /* padding: 0 38px; */
    }
    footer .footerViewMore .viewMoreBtn {
        font-size: 12px;
        font-weight: 600;
        line-height: 20px;
        color: #233253;
        text-transform: uppercase;
    }
    .viewMoreBtn span {
        display: inline-flex;
        position: relative;
        top: 1px;
        margin-left: 8px;
    }
}

@media screen and (min-width: 100px) and (max-width: 1023px) {
    footer .footerMenuSec>.menuSecList>h3:after{
        position: absolute;
        width: 20px;
        height: 20px;
        content: "";
        background: url(../../../content/dam/hdfclifeinsurancecompany/images/home-images/dd-arrow.png) no-repeat;
        left: 0;
        top: -5px;
        transform: rotate(-90deg);
        background-size: 60%;
    }
    footer .footerMenuSec>.menuSecList ul {
        display: none;
        padding-left: 20px;
    }
    footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp {
        display: none;
        padding-left: 20px;
    }
    footer .footerMenuSec>.menuSecList>h3, footer .footerMenuSec>.productMenuSec>h3 {
        position: relative;
        padding-left: 18px;
    }
    footer .footerMenuSec>.menuSecList>h3:after, footer .footerMenuSec>.productMenuSec>h3:after {
        position: absolute;
        width: 20px;
        height: 20px;
        content: "";
        background: url(../../../content/dam/hdfclifeinsurancecompany/images/home-images/dd-arrow.png) no-repeat;
        left: 0;
        top: -5px;
        transform: rotate(-90deg);
        background-size: 60%;
    }
    footer .footerMenuSec>.menuSecList>h3, footer .footerMenuSec>.productMenuSec>h3 {
        position: relative;
        padding-left: 18px;
    }
    footer .footerMenuSec>.menuSecList .productMenuWrp .menuSecList>h3:after, footer .footerMenuSec>.productMenuSec .productMenuWrp .menuSecList>h3:after {
        position: absolute;
        width: 20px;
        height: 20px;
        content: "";
        background: url(../../../content/dam/hdfclifeinsurancecompany/images/home-images/dd-arrow.png) no-repeat;
        left: 0;
        top: -5px;
        transform: rotate(-90deg);
        background-size: 50%;
    }
    footer .footerMenuSec>.menuSecList .productMenuWrp .menuSecList>h3, footer .footerMenuSec>.productMenuSec .productMenuWrp .menuSecList>h3 {
        position: relative;
        padding-left: 15px;
    }


    footer .footerMenuSec>.menuSecList.open h3:after, 
    footer .footerMenuSec>.productMenuSec.open h3:after {
        transform: none;
        top: 5px;
    }
}


  use:nth-child(2) {
    transform: translate(20px);
  }
  use:nth-child(3) {
    transform: translate(40px);
  }
  use:nth-child(4) {
    transform: translate(60px);
  }
  use:nth-child(5) {
    transform: translate(80px);
  }
  .rating {
    display: inline-block;
    height: 25px;
    margin: 0 auto;
    width: 100px;
  }
  .products-wrapper .downloads-section .rating-wrapper{
    align-items: flex-start !important;
  }
  
.autoEmailSuggestionList {
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.05);
  margin-top: 15px;
  margin-left: 0px !important;
  position: absolute;
  top: 65px;
  left: 0;
  width: 100%;
  list-style: none;
  /* max-height: 170px;
    min-height: 30px;
    height: auto;
    overflow-y: auto; */
  z-index: 99999 !important;
}

.autoEmailSuggestionList .emailSuggestionListItem {
  color: #000000;
  padding: 4px 10px;
  margin: 0;
  margin-top: 5px;
  cursor: pointer;
  width: 100%;
  float: none;
  list-style: none;
  text-align: left;
  margin-left: 0px !important;
  margin-bottom: 0px !important;
}

.highlighted {
  color: white !important;
  background-color: #3d6d8f;
}

.suggestion-end {
  background: rgba(255, 255, 7, 0.555);
}

.font-w-500 {
  font-weight: 500;
}

.font-w-600 {
  font-weight: 600;
}

.font-w-700 {
  font-weight: 700;
}

.button-wrap {
  display: flex;
  align-items: center;
  gap: 15px;
}

.solid-red-button {
  width: max-content;
  background: #ed1c24;
  border: 1px solid #ed1c24;
  color: #fff;
  padding: 5px 20px;
  border-radius: 4px;
  text-align: center;
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  outline: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.border-red-button {
  width: max-content;
  background: #ffffff;
  border: 1px solid #ed1c24;
  color: #ed1c24;
  padding: 5px 20px;
  border-radius: 4px;
  text-align: center;
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  outline: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.solid-red-button:hover {
  color: #ffffff;
  box-shadow: rgba(228, 24, 32, 0.4) 0px 5px 7px;
}

.border-red-button:hover {
  color: #ed1c24;
  box-shadow: rgba(228, 24, 32, 0.4) 0px 5px 7px;
}

.scrollar-bar::-webkit-scrollbar {
  height: 8px;
}

.scrollar-bar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px #00000040;
}

.scrollar-bar::-webkit-scrollbar-thumb {
  background: #547ED4;
  border-radius: 10px;
}

.error-text {
  font-size: 11px;
  font-weight: 400;
  line-height: 32px;
  color: #ed1c24;
}

.disclaimer {
  font-size: 10px;
  line-height: 12px;
  color: #454545;
  font-weight: 300;
}

.video-container--RT {
  position: relative;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
}

.video-container--RT .video-thumbnail,
.video-container--RT iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-container--RT .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 3;
}
/* Marquee container */
.marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 21px;
    display: flex;
    align-items: center;
    contain: layout paint size;
}

/* Moving track */
.marquee-track {
    position: absolute;
    white-space: nowrap;

    /* GPU optimization */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;

    font-size: 14px;
    line-height: 21px;
    color: #fff;
    font-weight: 400;
    padding-left: 20px;
}
/*
== malihu jquery custom scrollbar plugin ==
Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
*/



/*
CONTENTS: 
	1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 
	2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 
	3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
	4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 
	5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 
	6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 
		6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
*/



/* 
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE  
------------------------------------------------------------------------------------------------------------------------
*/

	.mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ }
	.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; }
	
	.mCustomScrollBox{ /* contains plugin's markup */
		position: relative;
		overflow: hidden;
		height: 100%;
		max-width: 100%;
		outline: none;
		direction: ltr;
	}

	.mCSB_container{ /* contains the original content */
		overflow: hidden;
		width: auto;
		height: auto;
	}



/* 
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR 
y-axis
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_inside > .mCSB_container{ margin-right: 30px; }

	.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */
		margin-right: 0;
		margin-left: 30px;
	}
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */

	.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
		position: absolute;
		width: 16px;
		height: auto;
		left: auto;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, 
	.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */
		right: auto;
		left: 0;
	}
	
	.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */

	.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0; 
		height: auto;
	}

	.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }

	.mCSB_scrollTools .mCSB_draggerRail{
		width: 2px;
		height: 100%;
		margin: 0 auto;
		-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
	}

	.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */
		cursor: pointer;
		width: 100%;
		height: 30px; /* minimum dragger height */
		z-index: 1;
	}

	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */
		position: relative;
		width: 4px;
		height: 100%;
		margin: 0 auto;
		-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
		text-align: center;
	}
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }

	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown{
		display: block;
		position: absolute;
		height: 20px;
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		cursor: pointer;
	}

	.mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
3. HORIZONTAL SCROLLBAR 
x-axis
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_horizontal.mCSB_inside > .mCSB_container{
		margin-right: 0;
		margin-bottom: 30px;
	}
	
	.mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; }

	.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */

	.mCSB_scrollTools.mCSB_scrollTools_horizontal{
		width: auto;
		height: 16px;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
	.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */

	.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; }

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 2px;
		margin: 7px 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{
		width: 30px; /* minimum dragger width */
		height: 100%;
		left: 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 4px;
		margin: 6px auto;
	}
	
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
		height: 12px; /* auto-expanded scrollbar */
		margin: 2px auto;
	}
	
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		height: 8px; /* auto-expanded scrollbar */
		margin: 4px 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{
		display: block;
		position: absolute;
		width: 20px;
		height: 100%;
		overflow: hidden;
		margin: 0 auto;
		cursor: pointer;
	}
	
	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; }

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
4. VERTICAL AND HORIZONTAL SCROLLBARS 
yx-axis 
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_container_wrapper{
		position: absolute;
		height: auto;
		width: auto;
		overflow: hidden;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin-right: 30px;
		margin-bottom: 30px;
	}
	
	.mCSB_container_wrapper > .mCSB_container{
		padding-right: 30px;
		padding-bottom: 30px;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	}
	
	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; }
	
	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; }
	
	/* non-visible horizontal scrollbar */
	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; }
	
	/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; }
	
	/* RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; }
	
	/* non-visible scrollbar/RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; }
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */
		margin-right: 0;
		margin-left: 30px;
	}
	
	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; }
	
	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; }
	
	.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{
		margin-right: 0; /* non-visible scrollbar */
		margin-left: 0;
	}
	
	/* non-visible horizontal scrollbar */
	.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS  
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_scrollTools, 
	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown,
	.mCSB_scrollTools .mCSB_buttonLeft,
	.mCSB_scrollTools .mCSB_buttonRight{
		-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
	}
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
		-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-o-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
	}



/* 
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS  
------------------------------------------------------------------------------------------------------------------------
*/

	/* 
	----------------------------------------
	6.1 THEMES 
	----------------------------------------
	*/
	
	/* default theme ("light") */

	.mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }
	
	.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
	.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; }
	
	.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
	.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
	.mCustomScrollBox:hover > .mCSB_scrollTools,
	.mCustomScrollBox:hover ~ .mCSB_scrollTools,
	.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
	.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }

	.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.4);
		filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
	}

	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; 
	}

	.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.85);
		filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; 
	}
	.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.9);
		filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; 
	}

	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown,
	.mCSB_scrollTools .mCSB_buttonLeft,
	.mCSB_scrollTools .mCSB_buttonRight{
		background-image: url(clientlib-scrollbar/css/mCSB_buttons.png); /* css sprites */
		background-repeat: no-repeat;
		opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
	}

	.mCSB_scrollTools .mCSB_buttonUp{
		background-position: 0 0;
		/* 
		sprites locations 
		light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
		dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonDown{
		background-position: 0 -20px;
		/* 
		sprites locations
		light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px
		dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonLeft{
		background-position: 0 -40px;
		/* 
		sprites locations 
		light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px
		dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonRight{
		background-position: 0 -56px;
		/* 
		sprites locations 
		light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px
		dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonUp:hover,
	.mCSB_scrollTools .mCSB_buttonDown:hover,
	.mCSB_scrollTools .mCSB_buttonLeft:hover,
	.mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }

	.mCSB_scrollTools .mCSB_buttonUp:active,
	.mCSB_scrollTools .mCSB_buttonDown:active,
	.mCSB_scrollTools .mCSB_buttonLeft:active,
	.mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; }
	

	/* theme: "dark" */

	.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }

	.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

	.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); }

	.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }
	
	/* ---------------------------------------- */
	


	/* theme: "light-2", "dark-2" */

	.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.1);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 4px;
		margin: 6px auto;
	}

	.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }

	.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{	background-position: -32px -20px; }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{	background-position: -40px -40px; }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; }
	
	
	/* theme: "dark-2" */

	.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.1);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.75);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -56px; }
	
	/* ---------------------------------------- */
	


	/* theme: "light-thick", "dark-thick" */

	.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.1);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 6px;
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 4px;
		margin: 6px 0;
	}

	.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 6px;
		margin: 5px auto;
	}
    ..mCSB_scrollTools{cursor: pointer;}
	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }

	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; cursor: pointer;}

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{	background-position: -16px -20px; cursor: pointer; }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{	background-position: -20px -40px; }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; }


	/* theme: "dark-thick" */
	
	.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.1);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.75);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{	background-position: -100px -56px; }
	
	/* ---------------------------------------- */
	


	/* theme: "light-thin", "dark-thin" */
	
	.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); }

	.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; }

	.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; }

	.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 2px;
		margin: 7px auto;
	}


	/* theme "dark-thin" */
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{	background-position: -80px 0; }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */
	
	.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 14px;
		margin: 0 1px;
	}
	
	.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; }
	
	.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		height: 14px;
		margin: 1px 0;
	}
	
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
		width: 16px; /* auto-expanded scrollbar */
		height: 16px;
		margin: -1px 0;
	}
	
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ }
	
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
		height: 16px; /* auto-expanded scrollbar */
		width: 16px;
		margin: 0 -1px;
	}
	
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		height: 4px; /* auto-expanded scrollbar */
		margin: 6px 0;
	}
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; }
	
	
	/* theme "rounded-dark", "rounded-dots-dark" */
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; }
	
	
	/* theme "rounded-dots", "rounded-dots-dark" */
	
	.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		background-color: transparent;
		background-position: center;
	}
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
		background-repeat: repeat-y;
		opacity: 0.3;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		height: 4px;
		margin: 6px 0;
		background-repeat: repeat-x;
	}
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; }
	
	
	/* theme "rounded-dots-dark" */
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=");
	}
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; }
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; }
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; }
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */
	
	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-repeat: repeat-y;
		background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
	}
	
	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		background-repeat: repeat-x;
		background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
	}
	
	
	/* theme "3d", "3d-dark" */
	
	.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, 
	.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; }
	
	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; }
	
	.mCS-3d.mCSB_scrollTools, 
	.mCS-3d-dark.mCSB_scrollTools{
		opacity: 1;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
		width: 8px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
		box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2);
	}
	
	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 	 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }

	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; }

	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 8px;
		margin: 4px 0;
		box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2);
	}

	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 8px;
		margin: 4px auto;
	}
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
	
	
	/* theme "3d-dark" */
	
	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.1);
		box-shadow: inset 1px 0 1px rgba(0,0,0,0.1);
	}
	
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); }
	
	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme: "3d-thick", "3d-thick-dark" */
	
	.mCS-3d-thick.mCSB_scrollTools, 
	.mCS-3d-thick-dark.mCSB_scrollTools{
		opacity: 1;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-3d-thick.mCSB_scrollTools, 
	.mCS-3d-thick-dark.mCSB_scrollTools, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
	
	.mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, 
	.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; }
	
	.mCS-3d-thick.mCSB_scrollTools_vertical, 
	.mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); }
	
	.mCS-3d-thick.mCSB_scrollTools_horizontal, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{
		bottom: 1px;
		box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5);
	}
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		box-shadow: inset 1px 0 0 rgba(255,255,255,0.4);
		width: 12px;
		margin: 2px;
		position: absolute;
		height: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,  
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }
	
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		height: 12px;
		width: auto;
	}
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{
		background-color: #000; background-color: rgba(0,0,0,0.05);
		box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
	}
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }

	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }

	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{	background-position: -40px -128px; }
	
	
	/* theme: "3d-thick-dark" */
	
	.mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); }
	
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); }
	 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,  
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{
		background-color: #fff; background-color: rgba(0,0,0,0.05);
		box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
	}
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme: "minimal", "minimal-dark" */
	
	.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
	.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
		right: 0; 
		margin: 12px 0; 
	}
	
	.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{
		bottom: 0; 
		margin: 0 12px; 
	}
	
	/* RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
		left: 0; 
		right: auto;
	}
	
	.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, 
	.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; }
	
	.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; }
	
	.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.2);
		filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 
	}
	
	.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.5);
		filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
	}
	
	
	/* theme: "minimal-dark" */
	
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.2);
		filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 
	}
	
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.5);
		filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
	}
	
	/* ---------------------------------------- */
	
	
	
	/* theme "light-3", "dark-3" */
	
	.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{
		width: 6px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
	}

	.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; }

	.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 6px;
		margin: 5px 0;
	}
	
	.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		width: 12px;
	}
	
	.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		height: 12px;
		margin: 2px 0;
	}
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
	
	
	/* theme "dark-3" */
	
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
	
	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */
	
	.mCS-inset.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{
		width: 12px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
	}

	.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 
		width: 6px;
		margin: 3px 5px;
		position: absolute;
		height: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		height: 6px;
		margin: 5px 3px;
		position: absolute;
		width: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 12px;
		margin: 2px 0;
	}
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
	
	
	/* theme "inset-dark", "inset-2-dark", "inset-3-dark" */
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	
	/* theme "inset-2", "inset-2-dark" */
	
	.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-color: transparent;
		border-width: 1px;
		border-style: solid;
		border-color: #fff;
		border-color: rgba(255,255,255,0.2);
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	}
	
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); }
	
	
	/* theme "inset-3", "inset-3-dark" */
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); }
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }
	
	/* ---------------------------------------- */
#content-3{ height: 420px; }

#content-3 .content{
	background-color: #412626;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJ0lEQVQIW2NkwA7+M2IR/w8UY0SXAAuCFCNLwAWRJVAEYRIYgiAJALsgBgYbCawOAAAAAElFTkSuQmCC");
	margin-right: 40px;
	width: 310px;
}
.scroll-adjust1 {  position:relative; padding-left:30px; padding-right:0px; width:550px; }
.scroll-adjust { width:450px;padding-top:10px; display:grid;grid-template: auto auto/1fr 1fr; grid-column-gap: 10px;}

.mCSB_scrollTools .mCSB_buttonUp {
    background-image: url(../../../content/dam/hdfclifeinsurancecompany/dropmenuup.png)!important;
}

.mCSB_scrollTools .mCSB_buttonDown {
    background-image: url(../../../content/dam/hdfclifeinsurancecompany/dropmenudown.png)!important;
    bottom: -10px!important;
}

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonUp {
    background-size: 100%!important;
    background-position: 0 0!important;
    opacity: 1!important;
    cursor: pointer;
}
.headerContactIcon .contactInfoPopOver{
    padding-left:0px!important;
}

.mCSB_dragger_bar {
    background: grey!important;
    opacity: .9;
}
.mCSB_dragger_bar:focus {
    outline: 0!important;
    outline: none!important;
}


.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { opacity:1 !important }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width:2px !important }
.mCustomScrollbar:hover .mCSB_dragger_bar ,.mCustomScrollbar:hover .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,.mCustomScrollbar:hover .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
    width: 8px!important;
}
.popdownarrow{ cursor:pointer; position: absolute; bottom:12px; left: 50%; }
.scroll-adjust1 {  position:relative; padding-left:30px; padding-right:0px; width:550px; }
.ppdwn2 svg { transform:rotate(180deg) }
.ppdwn2 { display:none; } 

#content-3.content{
	background-color: #412626;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJ0lEQVQIW2NkwA7+M2IR/w8UY0SXAAuCFCNLwAWRJVAEYRIYgiAJALsgBgYbCawOAAAAAElFTkSuQmCC");
	margin-right: 40px;
	width: 310px;
}
.mCSB_dragger_bar { background: gray  !important; opacity:0.90; }
.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { background: gray  !important; opacity:0.10; width:8px !important; }
.mCSB_scrollTools .mCSB_buttonUp {     
    background-image: url('../../../content/dam/hdfclifeinsurancecompany/dropmenuup.png')  !important; 
    background-size: 100% !important;
    background-position: 0px 0px !important;
    opacity:1.0 !important
}

.mCSB_scrollTools .mCSB_buttonDown { 
    background-image: url('../../../content/dam/hdfclifeinsurancecompany/dropmenudown.png') !important; 
    background-size: 100% !important;
    background-position: 0px 0px !important;
    opacity:1.0 !important;
    bottom: -10px !important; 
}
.fnt12 { font-size:11px !important; }

.mCSB_container { overflow:unset !important }

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    transition: width .2s!important;
}

.mCSB_scrollTools .mCSB_buttonDown {
    bottom: -10px!important;margin-top:20px!important;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
    background: grey!important;
    opacity: .1;
    width: 2px!important;
    transition: width .2s!important;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
    background: grey!important;
    opacity: .1;
    width: 2px!important;
    transition: width .2s!important;
}



.new-hdfc-life-insurance-header .headerContactIcon .contactInfoPopOver .contactInfoSection ul li p a{
    cursor: pointer;
}
.new-hdfc-life-insurance-header .headerContactIcon .contactInfoPopOver{
    width: auto;
    display: block;
    grid-template: unset;
    grid-column-gap: unset;
    padding: 26px 20px;
    right: 58px;
}

.new-hdfc-life-insurance-header .contactInfoSection{
    padding-right: 14px;
    border-right: 1px solid #919191;
}
.new-hdfc-life-insurance-header .headerContactIcon .contactInfoPopOver .contactInfoSection ul li p{
    margin-bottom: 0 !important;
}

.new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec .menuslideList {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 1366px) {
    .new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec .slider-container {
        scrollbar-width: unset;
        scrollbar-color: unset;
    }
    
    .new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec::-webkit-scrollbar {
        width: 6px;
    }
    
    .new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec::-webkit-scrollbar-track {
        background: #C0E3FF;
        border-radius: 10px;
    }
    
    .new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec::-webkit-scrollbar-thumb {
        background: #547ED4;
        border-radius: 10px;
    }
    
    .new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec::-webkit-scrollbar-thumb:hover {
        background: #3F66C4;
    }

    .new-hdfc-life-insurance-header .headerHamburgerMenu .hamMenuWrp::-webkit-scrollbar {
        width: 6px;
    }
    
    .new-hdfc-life-insurance-header  .headerHamburgerMenu .hamMenuWrp::-webkit-scrollbar-track {
        background: #C0E3FF;
        border-radius: 10px;
    }
    
    .new-hdfc-life-insurance-header  .headerHamburgerMenu .hamMenuWrp::-webkit-scrollbar-thumb {
        background: #547ED4;
        border-radius: 10px;
    }
    
    .new-hdfc-life-insurance-header  .headerHamburgerMenu .hamMenuWrp::-webkit-scrollbar-thumb:hover {
        background: #3F66C4;
    }
}

.hamMenuWrp .hamMenuInnerWrp .hamMenuSection nav ul li > span {
    font-size: 9px;
    line-height: 14px;
    border: 1px solid #ed1c24;
    border-radius: 20px;
    padding: 1px 8px;
    color: #ed1c24;
    margin-left: 5px;
    display: inline-block;
    text-transform: capitalize;
}

.new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec .swiffy-slider button{
    width: 40px;
    height: 40px;
    visibility: visible;
    margin: auto 0;
    top: 0;
    padding: 0 0;
    opacity: 1;
    filter: unset;
    -webkit-filter: unset;
    border-radius: 20px;
    animation: swiffy-nav-pulse 1.5s 55 ease-out;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

.new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec .swiffy-slider button::before, .new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec .swiffy-slider button::after{
    width: unset;
    height: unset;
}

.new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec .swiffy-slider button img{
    width: 40px;
    height: auto;
}

.new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec .swiffy-slider button.prevBtn{
    left: -20px;
}

.new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec .swiffy-slider button.active{
    display: block;
}

.new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec .swiffy-slider button.swiper-button-disabled{
    box-shadow: none;
    cursor: auto;
    pointer-events: none;
    filter: grayscale(100%);
    opacity: .45;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
}

.new-hdfc-life-insurance-header .contactInfoSection:last-child{
    padding-right: 0;
    border-right: none;
}

.new-hdfc-life-insurance-header .menu-alert p{
    color: red;
    font-size: 14px;
    margin-top: -20px;
    margin-bottom: 15px
}

.new-hdfc-life-insurance-header .contactInfoSection:first-child hr:nth-child(4){
    display: none;
}

.new-hdfc-life-insurance-header .contactInfoSection:last-child ul:nth-child(3){
    margin-bottom: 43px;
}
    .new-hdfc-life-insurance-header .contactInfoPopOver .scroll-adjust1{
    width: 775px;
    overflow-x: scroll;
}

.new-hdfc-life-insurance-header .contactInfoPopOver .scroll-adjust1 .scroll-adjust{
    width: auto;
    display: grid;
    grid-template: auto auto auto/1fr 1fr 1fr;
    grid-column-gap: 10px;
}

.new-hdfc-life-insurance-header .contactInfoPopOver .scroll-adjust1 .scroll-adjust .mCSB_inside>.mCSB_container{
    margin-right: 20px;
}

span.countStars{
    display: inline-block;
    margin-left: 10px;
    color: #233253;
    font-size: 11px;
    line-height: 22px;
    margin-top: 0;
}

.new-hdfc-life-insurance-header .blurOverlayBg{
    z-index: 999;
}

.new-hdfc-life-insurance-header .siteButton.outlinedBtn, .new-hdfc-life-insurance-header .headerBtnWrp .payPremiumBtn{
    text-decoration: none;
}

.hamMenuWrp .hamMenuInnerWrp .hamMenuSection .hamMenuIcon img{
    width: auto;
    height: auto;
}

.new-hdfc-life-insurance-header .headerContactIcon .pulse{
    padding: 0;
}

.megaMenuSec .keyFeatureSec .ratingStarWrap{
    flex-direction: row;
}

.new-hdfc-life-insurance-header .hamMenuIcon{
    width: 78px;
    height: auto;
}

.new-hdfc-life-insurance-header .deskTopHeaderWrap .megaMenuSec .keyFeatureSec .featureBtn .siteButton{
    font-size: 11px !important;
}


/* Without Bootstrap Code Started */

.new-hdfc-life-insurance-header .deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul, .new-hdfc-life-insurance-header .megaMenuSec .megaMenuLinkSec .menuLinkInner ul, .new-hdfc-life-insurance-header .megaMenuSec .keyFeatureSec .featureLists, .new-hdfc-life-insurance-header .mCustomScrollBox .contactInfoSection ul, .new-hdfc-life-insurance-header .headerHamburgerMenu .hamMenuWrp .hamMenuSection nav ul, .new-hdfc-life-insurance-header .headerHamburgerMenu .hamMenuWrp .quickLinkSection nav ul, .new-hdfc-life-insurance-header .mobileHeader .accountButton .accountDropDown ul, .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection nav ul{
    list-style-type: none;
}
.megaMenuSec .megaMenuLinkSec .menuLinkInner ul, .megaMenuSec .keyFeatureSec .featureLists, .new-hdfc-life-insurance-header .mCustomScrollBox .contactInfoSection ul, .new-hdfc-life-insurance-header .headerHamburgerMenu .hamMenuWrp .hamMenuSection nav ul, .new-hdfc-life-insurance-header .headerHamburgerMenu .hamMenuWrp .quickLinkSection nav ul, .new-hdfc-life-insurance-header .mobileHeader .accountButton .accountDropDown ul, .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection nav ul{
    padding-inline-start: 0;
}

.new-hdfc-life-insurance-header .headerHamburgerMenu{
    background: #fff;
    width: 60px;
    border-right: 1px solid #f9f9f9;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    cursor: pointer;
}

.new-hdfc-life-insurance-header .headerHamburgerMenu>a,
.new-hdfc-life-insurance-header .headerHamburgerMenu>button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    padding-left: 5px;
}

.homepage{
    margin: 0;
}

.new-hdfc-life-insurance-header .contactInfoSection h5{
    font-weight: 500;
    line-height: 15.6px;
}

.new-hdfc-life-insurance-header .mCSB_1 .mCSB_container{
    top: -1px !important;
}

.appDownloadForm p, .mobileHeader .mobPlanMenuAccordCont p{
    line-height: 1.5;
}

.new-hdfc-life-insurance-header .deskTopHeader, .new-hdfc-life-insurance-header .mobileHeader{
	z-index : 999;
}

/* Satish Newly added for megamenu hover condition*/
.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar  ul li:hover .megaMenuSec{
    /* top: 100%; */
    opacity: 1;
    visibility: visible;
    box-shadow: 0 -1px 5px 0 #e3e3e3;
    -webkit-box-shadow: 0 -1px 5px 0 hsla(0, 0%, 89%, .75);
    -moz-box-shadow: 0 -1px 5px 0 hsla(0, 0%, 89%, .75); }

.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar ul li:hover .caretIcon svg
{transform: rotate(180deg); color: #ed1c24;}

.megaMenuSec .megaMenuLinkSec{height: fit-content !important;padding-top: 20px;}
.hamMenuWrp{z-index: 9999 !important}
.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar ul li:hover a.megaMenuLink{color:#ed1c24 !important;}

.new-hdfc-life-insurance-header .megaMenuSec {
    padding: 21px 50px 60px;
    display: grid;
    grid-template-columns: 1fr 325px;
    grid-column-gap: 40px;
    position: absolute;
    background-color: #fff;
    z-index: 99999;
    top: 100%;
    left: -1px;
    width: calc(100% + 1px);
    height: auto;
    min-height: 600px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    max-height: 90vh;
    overflow-y: scroll;
}
/* Satish Newly added for megamenu hover condition*/

/* Satish Newly added for megamenu hover condition*/
.megaMenuSec.arw .arrowUp{
    position: absolute;
    left: 42%;
    top: -20px;
    background: url(../../../content/dam/hdfclifeinsurancecompany/top-arrow.png) no-repeat -6px 0;
    border: 0;
    width: 58px;
    height: 20px;
}

.megaMenuSec.arw1 .arrowUp{
    position: absolute;
    left: 33%;
    top: -20px;
    background: url(../../../content/dam/hdfclifeinsurancecompany/top-arrow.png) no-repeat -6px 0;
    border: 0;
    width: 58px;
    height: 20px;
}
.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar ul li:hover .caretIcon svg path {
    stroke: #ed1c24;
}


.new-hdfc-life-insurance-header .swiffy-slider .slider-container {
    margin-left: 42px;
}
/*.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li:hover .megaMenuSec.arw1 .arrowUp {
    position: absolute;
    left: 33%;
    top: -20px;
    background: url(../../../content/dam/hdfclifeinsurancecompany/top-arrow.png) no-repeat -6px 0;
    border: 0;
    width: 58px;
    height: 20px;
}*/
/* Satish Newly added for megamenu hover condition*/

.new-hdfc-life-insurance-header .megaMenuSec .keyFeatureSec {
    margin-top: 0;
    margin-bottom: 20px;
}

.new-hdfc-life-insurance-header .productListDisclaimer p{
    margin-bottom: 0 !important;
}

.new-hdfc-life-insurance-header .headerLoginIcon, .new-hdfc-life-insurance-header .headerContactIcon{
    margin: 0 11px;
}

.new-hdfc-life-insurance-header .headerLoginIcon .accountDropDown{
    background: #fff;
    border-radius: 8px;
    width: 345px;
    padding: 25px 0;
    position: absolute;
    top: 100px;
    right: 60px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 99;
}

.new-hdfc-life-insurance-header .headerLoginIcon .accountDropDown.opened {
    top: -68px;
    opacity: 1;
    visibility: visible;
    z-index: 99999;
}

.new-hdfc-life-insurance-header .headerLoginIcon .accountDropDown .arrowUp {
    position: absolute;
    top: 82px;
    right: -15px;
    transform: rotate(90deg);
}

.new-hdfc-life-insurance-header .headerContactIcon .contactInfoPopOver.opened {
    top: -125px;
    opacity: 1;
    visibility: visible;
    right: 60px;
}

.new-hdfc-life-insurance-header .headerContactIcon .contactInfoPopOver .arrowUp {
    position: absolute;
    right: -15px;
    top: 140px;
    transform: rotate(90deg);
}
.new-hdfc-life-insurance-header .siteSearchInput.expand div.siteSearchForm {
    width: 720px;
    overflow: visible;
    border: 1px solid #ddd;
    border-radius: 20px;
}

.new-hdfc-life-insurance-header div.siteSearchForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: width .3s ease-in-out;
    -moz-transition: width .3s ease-in-out;
    -ms-transition: width .3s ease-in-out;
    -o-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    overflow: hidden;
}

.new-hdfc-life-insurance-header div.siteSearchForm .searchSelect ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background: #fff;
    border-radius: 8px;
    width: 69%;
    left: 0;
    top: 60px;
    z-index: 99;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.new-hdfc-life-insurance-header .searchSelectOption-container.opened .searchSelectOption {
    opacity: 1;
    visibility: visible;
    top: 41px;
    z-index: 99999;
}
.new-hdfc-life-insurance-header div.siteSearchForm .searchInput{
    width: 75%;
    position: relative;
}

.new-hdfc-life-insurance-header div.siteSearchForm .searchSelect {
    width: 25%;
    position: relative;
}
.new-hdfc-life-insurance-header .rightmenubar{
    position: absolute;
    right: 0;
    top: auto;
    background: white;
    border-radius: 0 0 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 15px 5px;
    box-shadow: 0px 5px 6px gray;
    gap: 20px;
    z-index: 9999;
}

.new-hdfc-life-insurance-header .siteSearchForm .searchSelect ul li:first-child:hover{
    border-radius: 10px 10px 0 0;
}
.new-hdfc-life-insurance-header .siteSearchForm .searchSelect ul li:last-child:hover{
    border-radius: 0 0 10px 10px;
}

.new-hdfc-life-insurance-header .hamMenuWrp .quickLinkSection nav ul li{
    width: 70%;
}
/* Without Bootstrap code end */

@media screen and (min-width: 1160px) and (max-width: 1361px) {
    .new-hdfc-life-insurance-header .deskTopHeader .deskTopHeaderWrap .headerWrap {
        padding-left: 20px;
    }

    .new-hdfc-life-insurance-header .hamMenuWrp .hamMenuInnerWrp{
        padding: 10px 72px;
    }

    .new-hdfc-life-insurance-header .deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li>a {
        font-size: 12px !important;
    }
    .new-hdfc-life-insurance-header .siteButton{
        padding: 5px 10px;
    }
    .new-hdfc-life-insurance-header .headerBtnWrp {
        padding-left: 20px;
    }
}

.deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li {
    padding: 0 5px !important;
}

@media screen and (max-width: 1920px) and (min-width: 1280px) {
    .deskTopHeader .deskTopHeaderWrap .headerWrap nav.site_navBar>ul>li {
        padding: 0 16px !important;
    }
}

@media only screen and (max-width: 768px){
    span.countStars{
        margin-left: 0;
    }
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec{
        width : 129px;
        height: 34px;
    }
    .mobileHeader .hamMenuSection .subMenuSection nav>ul{
        margin-bottom: 24px;
    }
    .mobileHeader .hamMenuSection .subMenuSection nav>ul:last-child{
        margin-bottom: 52px;
    }
}
@media screen and (max-width: 480px){
ul.hamMenuList .menuBullet{
    float: right;
}
}

/* button padding reduced start */

.new-hdfc-life-insurance-header .headerBtnWrp .siteButton{
    padding: 5px 10px;
}

/* button padding reduced end */

/* swiffy nav blink animation start */

@keyframes swiffy-nav-pulse {
    1% {
        -moz-box-shadow: 0 0 0 0 rgba(237,28,36,0.4);
        box-shadow: 0 0 0 0 rgba(237,28,36,0.4);
        /* background: #ed1c24 url("../components/structure/content/dam/hdfclifeinsurancecompany/white.svg") no-repeat center center */
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(237,28,36,0);
        box-shadow: 0 0 0 10px rgba(237,28,36,0);
        /* background: #fff url("../components/structure/content/dam/hdfclifeinsurancecompany/red.svg") no-repeat center center */
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(237,28,36,0);
        box-shadow: 0 0 0 0 rgba(237,28,36,0);
        /* background: #fff url("../components/structure/content/dam/hdfclifeinsurancecompany/red.svg") no-repeat center center */
    }
}

/* swiffy nav blink animation end */
/* Header hindi dropdown START*/
.site_navBar .megaMenuSec .megaMenuLinkSec .menuLinkInner h3 a{
    line-height: 20px;
}
/* Header hindi dropdown END*/
/* 28658 - Add Ulip Sub- Copy START */
.new-hdfc-life-insurance-header .offertext{
    position: absolute;
    top: -1px;
    right: -1px;
    width: max-content;
    background: #98d8e8;
    padding: 2px 22px;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    font-weight: 500;
    color: #000;
    border-radius: 2px;
    border-radius: 0 0 0 19px;
}
.new-hdfc-life-insurance-header .megaMenuSec .keyFeatureSec{
    padding: 40px 20px 10px 20px;
}
.new-hdfc-life-insurance-header .keyFeatureSec .p-mod {
    font-size: 11px;
    line-height: 18px;
    font-weight: 400;
    color: #444;
    padding-bottom: 12px;
    margin-top: -7px;
}
.new-hdfc-life-insurance-header .megaMenuSec .keyFeatureSec .featureLists{
    max-height: 150px;
    overflow-y: scroll;
    margin-top: 6px;
}
.new-hdfc-life-insurance-header .megaMenuSec .keyFeatureSec .featureLists li p,
.new-hdfc-life-insurance-header .keyFeatureSec .p-mod,
.new-hdfc-life-insurance-header .deskTopHeader .headerWrap .navBarWrap nav ul li .keyFeatureSec h4 p {
    margin-bottom: unset !important;
}
/* 28658 - Add Ulip Sub- Copy END */

/* 29219 - new card UI START */


.new-hdfc-life-insurance-header .text-red{color: #ED1C24;}
.new-hdfc-life-insurance-header .card-main{
    background: #eff9ff;
    /* margin-top: 50px; */
    border: 1px solid #7bc0ee;
    border-radius: 6px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.09);
    position: relative;
    text-align:center;
}

.new-hdfc-life-insurance-header .get-now,
.new-hdfc-life-insurance-header .get-now:hover,
.new-hdfc-life-insurance-header .get-now:visited{
    background-color: #ED1C24;
    border-radius: 0 0 4px 4px;
    color: #fff;
    padding: 3px 15px;
    position: absolute;
    bottom: -27px;
    left: 27%;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.new-hdfc-life-insurance-header .get-now img{margin-right: 8px}

    .new-hdfc-life-insurance-header .discount-badge,
    .new-hdfc-life-insurance-header .discount-badge:hover,
    .new-hdfc-life-insurance-header .discount-badge:visited{background: #005E9E;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
        color: #EEF8FF;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px; 
        padding: 6px 10px;
        border-radius: 0px 0px 6px 6px;
        display: -webkit-inline-box;
        text-decoration: none;
        /* margin: 0 15px 0 15px; */
        }

        .new-hdfc-life-insurance-header .card-top{
        margin: 15px 15px;
    }

    .new-hdfc-life-insurance-header .card-top p{
        color: #59647D;
        font-size: 15px;
        font-weight: 500;
        line-height: 21px;
        margin-top: 0.25rem;
        margin-bottom: 0;
    }


    .new-hdfc-life-insurance-header .prod-name {
        font-weight: 700;
        font-size: 24px;
        line-height: 30px;
        color: #005e9e;
        margin-bottom: 7px;
    }

    .new-hdfc-life-insurance-header .card-middle{
        margin: 4px 15px 10px 15px;
        text-align: left;
        display: inline-block;
        width: -webkit-fill-available;
        border-bottom: 1px dashed #41A4E7;
        border-top: 1px dashed #41A4E7;
        padding-top: 10px;
    }


.new-hdfc-life-insurance-header .key-features  {
    text-transform: uppercase;
    border: 1px solid #71c2fa;
    padding: 4px 6px;
    background: #fff;
    border-radius: 50px;
    color: #005E9E;
    font-weight: 700;
    display: inline-flex;
    margin-bottom: 10px;
}

.new-hdfc-life-insurance-header .key-features img{
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.new-hdfc-life-insurance-header .card-list{
    list-style: none;
    padding: 0;
    width: 95%;
    height: 125px;
    overflow-y: auto;
    /* margin-bottom: 16px; */
}

.new-hdfc-life-insurance-header .card-list img{
    background-color: #ED1C24;
    padding: 3px 4px;
    border-radius: 20px;
    margin: 0 auto;
    display: inline-block;
    float: left;

}

.new-hdfc-life-insurance-header .card-list li{margin-bottom: 10px;
    display: flow-root;}

.new-hdfc-life-insurance-header .card-list span{
    float: left;
    width: 90%;
    margin-top: -4px;
    margin-left: 8px;
    font-size: 14px;
}


.new-hdfc-life-insurance-header .card-bottom{
    margin: 0 10px;
    padding-bottom: 10px;}

.new-hdfc-life-insurance-header .red-btn {
    background: #ed1c24;
    border: 1px solid #ed1c24;
    color: #fff;
    padding: 5px 20px;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

.new-hdfc-life-insurance-header .red-btn:hover {
    background: #ed1c24;
    border: 1px solid #ed1c24;
    color: #fff;
    padding: 5px 20px;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: 0 8px 12px rgba(237,28,36,.2)
}


.new-hdfc-life-insurance-header .white-btn{
    background: #fff;
    border: 1px solid #ed1c24;
    color: #ed1c24;
    padding: 5px 20px;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: 500;
    margin-left: 15px;
    font-size: 14px;
}


.new-hdfc-life-insurance-header .white-btn:hover{
    background: #fff;
    border: 1px solid #ed1c24;
    color: #ed1c24;
    padding: 5px 20px;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 8px 12px rgba(237,28,36,.2);
    margin-left: 15px;
}

.new-hdfc-life-insurance-header .bottom-copy{
    color: #474747;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    text-align: left;
    margin-top: 10px;
}


.new-hdfc-life-insurance-header .card-buttons{
display: flex;
justify-content: center;
align-items: center;

}

.new-hdfc-life-insurance-header .font-10{font-size: 10px;
    font-weight: 500;
    position: relative;
    top: -10px;}

/* width */
.new-hdfc-life-insurance-header .card-list::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  .new-hdfc-life-insurance-header .card-list::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  .new-hdfc-life-insurance-header .card-list::-webkit-scrollbar-thumb {
    background: #ccc;
  }

  /* Handle on hover */
  .new-hdfc-life-insurance-header .card-list::-webkit-scrollbar-thumb:hover {
    background: #005e9e;
  }

/* animation code start */

@keyframes blink {  
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
  }
  @-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3;}
    100% { opacity: 1; }
  }

  .new-hdfc-life-insurance-header .blink {
    -webkit-animation: blink 1.8s linear infinite;
    -moz-animation: blink 1.8s linear infinite;
    animation: blink 1.8s linear infinite;
  } 

@keyframes shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(0eg); transform: scale(1.2);}
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg) ; transform: scale(1.3);}
  }

  .new-hdfc-life-insurance-header .shaking {
    -webkit-animation: shaking 1.5s linear infinite;
    -moz-animation: shaking 1.5s linear infinite;
    animation: shaking 1.5s linear infinite;
  } 
  @keyframes bg-change {  
    0% { background-color: #005E9E; }
    50% { background-color: #ed1c24; }
    100% { background-color: #005E9E; }
  }
  @-webkit-keyframes bg-change {
    0% { background-color: #005E9E; }
    50% { background-color: #ed1c24; }
    100% { background-color: #005E9E; }
  }
  .new-hdfc-life-insurance-header .bg-change {
    -webkit-animation: bg-change .8s linear infinite;
    -moz-animation: bg-change .8s linear infinite;
    animation: bg-change .8s linear infinite;
  } 
/* animation code end */

/* Media query start */

@media screen and (max-width: 1159px) {
    .new-hdfc-life-insurance-header .deskTopHeader {
        display: none;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown.opened {
        margin: 17px auto 0;
        opacity: 1;
        visibility: visible;
    }

    .new-hdfc-life-insurance-header .mobileHeader {
        display: block;
        background: #fff;
        padding: 15px 25px;
        position: fixed;
        width: 100%;
        z-index: 999;
        top: 0;
        left: 0;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .logo img, .new-hdfc-life-insurance-header .logoSection .logo img {
        width: 100px;
        height: auto;
    }

    .new-hdfc-life-insurance-header .langSwitch {
        margin-left: 23px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec {
        margin-left: auto;
        display: flex;
        flex-wrap: wrap;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .searchButton {
        margin-right: 13px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .searchButton button,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .searchButton a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 5px 20px rgba(90,90,90,0.2);
        border: none;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton {
        margin-right: 13px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton>button,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton>a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 5px 20px rgba(90,90,90,0.2);
        border: none;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown {
        background: #fff;
        border-radius: 8px;
        width: 90%;
        padding: 25px 0;
        position: fixed;
        left: 0;
        right: 0;
        margin: 100px auto 0;
        opacity: 0;
        visibility: hidden;
        z-index: 999;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>p,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>a {
        font-weight: 500;
        font-size: 14px;
        line-height: 14px;
        color: #2c6698;
        padding: 16px 62px;
        margin-bottom: 0px !important;
        display: block;
        position: relative;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>p:before,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>a:before {
        content: "";
        position: absolute;
        width: 280px;
        height: 1px;
        background: rgba(0,0,0,0.08);
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li:last-child>p:before {
        content: unset;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li:first-child .menuIcon {
        top: 13px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>p .menuIcon,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>a .menuIcon {
        left: 30px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>p span,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>a span {
        position: absolute;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>p .dropIcon,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>a .dropIcon {
        right: 37px;
    }
    
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>p span,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>a span {
        position: absolute;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>p .dropIcon svg,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li>a .dropIcon svg {
        -webkit-transition: transform .3s ease-in-out;
        -moz-transition: transform .3s ease-in-out;
        -ms-transition: transform .3s ease-in-out;
        -o-transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transform: rotate(0);
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li ul {
        background: #fff;
        display: none;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li ul:last-child p,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li ul:last-child a {
        border-bottom: 0;
    }
    
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li ul li p,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .accountButton .accountDropDown>ul>li ul li a {
        font-size: 12px;
        line-height: 14px;
        color: #233253;
        display: block;
        padding: 16px 35px 16px 60px;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        position: relative;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .hamBurgerMenu {
        width: 35px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .hamBurgerMenu>button,
    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .mobHeaderBtnSec .hamBurgerMenu>a {
        background-color: transparent;
        border: 0;
        cursor: pointer;
        padding: 0;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection.opened {
        left: 0;
    }
    
    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection {
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        -webkit-transition: left .3s ease;
        -moz-transition: left .3s ease;
        -ms-transition: left .3s ease;
        -o-transition: left .3s ease;
        transition: left .3s ease;
        z-index: 999;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .logoSection {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 55px 24px 20px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .logo img, .logoSection .logo img {
        width: 65px;
        height: 45px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamBtnSection {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px 40px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamBtnSection a {
        width: 48%;
        text-align: center;
        padding: 5px 8px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks {
        padding: 0 24px 48px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks h3, .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li {
        margin-bottom: 24px;
    }
    
    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection h3 {
        font-weight: 700;
        font-size: 16px;
        line-height: 22px;
        color: #9198a9;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks h3, .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li {
        margin-bottom: 24px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li>a, .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li>span>a {
        font-weight: 500;
        font-size: 15px;
        line-height: 15px;
        color: #2c6698;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .subMenuSection {
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        z-index: 9;
        padding: 0 0 50px;
        -webkit-transition: left .3s ease;
        -moz-transition: left .3s ease;
        -ms-transition: left .3s ease;
        -o-transition: left .3s ease;
        transition: left .3s ease;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li:last-child {
        margin: 0;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .subMenuSection nav>ul {
        margin-bottom: 24px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .subMenuSection.opened {
        left: 0;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .logoSection {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 55px 24px 20px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .mobHeaderWrap .logo img, .new-hdfc-life-insurance-header .logoSection .logo img {
        width: 100px;
        height: auto;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .subMenuSection .subMenuBC {
        margin: 0 0 40px;
        padding: 0 24px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .subMenuSection .subMenuBC button,
    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .subMenuSection .subMenuBC a {
        font-size: 13px;
        line-height: 22px;
        color: #233253;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .subMenuSection nav {
        padding: 0 24px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li>a, .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li>span>a {
        font-weight: 500;
        font-size: 15px;
        line-height: 15px;
        color: #2c6698;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li>a svg {
        float: right;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li>a.opened svg {
        transform: rotate(90deg);
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li>a svg {
        width: 12px;
        height: 13px;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li ul.hamSubMenu {
        display: none;
        padding: 10px 10px 0 17px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li ul.hamSubMenu li {
        margin-bottom: 5px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li ul.hamSubMenu li a {
        font-size: 13px;
        line-height: 22px;
        color: #233253;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuLinks nav>ul>li ul.hamSubMenu li:last-child {
        margin: 0;
    }

    .new-hdfc-life-insurance-header .mobileSeeMore .moreMenuLink {
        font-size: 11px !important;
        font-weight: bold;
        margin-top: 9px;
        display: block;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamQuickLinkSection {
        background: #ebf5f9;
        padding: 40px 24px 60px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink {
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink h3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 25px;
    }
    
    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection h3 {
        font-weight: 700;
        font-size: 16px;
        line-height: 22px;
        color: #9198a9;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink nav {
        padding: 0 0 32px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink nav ul li {
        margin-bottom: 24px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamQuickLinkSection .hamQuickLink nav ul li a {
        font-weight: 500;
        font-size: 14px;
        line-height: 14px;
        color: #2c6698;
    }

    .new-hdfc-life-insurance-header .mwlinks {
        padding-top: 10px;
        font-style: normal;
        font-size: 13px;
        line-height: 14px;
        font-weight: 500;
        padding-bottom: 15px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .appDwnldForm h3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 17px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .appDwnldForm .formInput {
        margin-bottom: 18px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .appDwnldForm .formInput input {
        width: 100%;
        background: #fff;
        border-radius: 4px;
        height: 44px;
        line-height: 44px;
        border: 0;
        padding: 0 14px;
        font-style: italic;
        font-weight: 300;
        font-size: 12px;
        line-height: 23px;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .appDwnldForm .formBtn {
        display: flex;
        flex-wrap: wrap;
    }

    .new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .appDwnldForm .formBtn button {
        background: #767676;
        color: #fff;
        font-weight: 600;
        font-size: 12px;
        line-height: 20px;
        padding: 8px 16px;
        border-radius: 4px;
        border: 0;
    }

    .new-hdfc-life-insurance-header .mobHeaderSearchWrp {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        -webkit-backdrop-filter: blur(10px);
        -moz-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        padding: 105px 24px 0;
        background-color: rgb(129 129 129 / 30%);
    }

    .new-hdfc-life-insurance-header .mobHeaderSearchWrp .mobHeaderSearchOverlay {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .new-hdfc-life-insurance-header .mobHeaderSearchWrp a.mobSearchClose {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 34px;
        right: 24px;
        background: #fff;
        box-shadow: 0 12px 34px rgba(0,0,0,0.19);
    }

    .new-hdfc-life-insurance-header .mobHeaderSearchWrp div.siteSearchForm {
        width: 100%;
        position: static;
        overflow: visible;
    }

    .new-hdfc-life-insurance-header .mobHeaderSearchWrp div.siteSearchForm .searchInput {
        width: 68%;
    }

    .new-hdfc-life-insurance-header .mobileHeader div.siteSearchForm .searchInput .searchIcon {
        top: 7px;
    }

    .new-hdfc-life-insurance-header .mobileHeader div.siteSearchForm .searchInput input, .new-hdfc-life-insurance-header .mobileHeader div.siteSearchForm .searchSelect .searchSelectBox {
        height: 38px;
        line-height: 38px;
    }

    .new-hdfc-life-insurance-header .mobHeaderSearchWrp div.siteSearchForm .searchSelect {
        width: 32%;
    }

    .new-hdfc-life-insurance-header .mobileHeader .searchSelect .siteButton {
        padding: 8px 20px 8px 15px;
        border-radius: 0 20px 20px 0;
    }

}

@media screen and (max-width: 1159px) and (min-width: 768px)  {
    .new-hdfc-life-insurance-header .card-dektop-only{display: none;}
    .new-hdfc-life-insurance-header .card-buttons{flex-direction: column;}
    .new-hdfc-life-insurance-header .white-btn,
    .new-hdfc-life-insurance-header .white-btn:hover{margin-left: 0;margin-top: 15px;} 
    .new-hdfc-life-insurance-header .get-now, 
    .new-hdfc-life-insurance-header .get-now:hover,
    .new-hdfc-life-insurance-header  .get-now:visited{bottom: -30px;
        left: 22%;}
    
}

@media screen and (max-width:820px){
    .new-hdfc-life-insurance-header .get-now,
    .new-hdfc-life-insurance-header .get-now:hover,
    .new-hdfc-life-insurance-header .get-now:visited {
        bottom: -32px;
        left: 10%;
    }
}

@media screen and (max-width:480px)  {
    .new-hdfc-life-insurance-header .card-buttons{flex-direction: column;}
    .new-hdfc-life-insurance-header .white-btn,
    .new-hdfc-life-insurance-header .white-btn:hover{margin-left: 0;margin-top: 15px;}
    .new-hdfc-life-insurance-header .get-now,
    .new-hdfc-life-insurance-header .get-now:hover,
    .new-hdfc-life-insurance-header .get-now:visited {
        bottom: -30px;
        left: 27%;
    }
    
}

@media screen and (max-width:281px){
    .new-hdfc-life-insurance-header .get-now,
    .new-hdfc-life-insurance-header .get-now:hover,
    .new-hdfc-life-insurance-header .get-now:visited {
        left: 17%;
    }

    .new-hdfc-life-insurance-header .card-list span {
        float: left;
        width: auto;
        margin-top: -22px;
        margin-left: 22px;
    }

    .new-hdfc-life-insurance-header .prod-name {
        font-weight: 700;
        font-size: 20px;
    }

    .new-hdfc-life-insurance-header .discount-badge,
    .new-hdfc-life-insurance-header .discount-badge:hover,
    .new-hdfc-life-insurance-header .discount-badge:visited{
        font-size: 14px;line-height: 24px;
    }

}
.new-hdfc-life-insurance-header .card-main p{
    margin-bottom: unset !important;
}
    /* Media query end */
/* 29219 - new card UI END */
.siteSearchInput a, .headerLoginIcon>a {
    cursor: pointer;
}
/* 33310 - Ashish heading tag changes css Start */
.new-hdfc-life-insurance-header .megaMenuSec .megaMenuLinkSec .menuLinkInner p,
.new-hdfc-life-insurance-header .megaMenuSec .megaMenuLinkSec .menuLinkInner p a {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: #005e9e;
    margin-bottom: 10px;
}
.new-hdfc-life-insurance-header .hamMenuWrp .hamMenuInnerWrp .hamMenuSection p {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 15px !important;
}
.new-hdfc-life-insurance-header .hamMenuWrp .hamMenuInnerWrp .hamMenuSection p a {
    color: #005e9e;
}
.new-hdfc-life-insurance-header .hamMenuWrp .quickLinkSection .quicklinksheading,
.new-hdfc-life-insurance-header .appDownloadForm.appLink .appDownloadHeading {
    margin-bottom: 24px !important;
    font-weight: 700 ;
    font-size: 14px !important;
    line-height: 22px ;
    color: #8a93a5 !important;
}
.new-hdfc-life-insurance-header .appDownloadForm.appLink .appDownloadHeading {
    color: #ed1c24 !important;
    padding: 0 !important;
}
.new-hdfc-life-insurance-header .headerContactIcon .contactInfoPopOver .contactInfoSection .contactinfomainheading {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #9198a9;
    margin-bottom: 22px;
}
.new-hdfc-life-insurance-header .headerContactIcon .contactInfoPopOver .contactInfoSection .contactinfosubheading {
    color: #ed1c24;
    font-size: 13px;
    /* margin: 0 !important; */
    padding: 0;
    position: relative;
    top: -16px;
    font-weight: 500;
    line-height: 15.6px;
    margin-top: 20px !important;
}
.new-hdfc-life-insurance-header .headerContactIcon .contactInfoPopOver .contactInfoSection ul li .contactheading {
    font-weight: 500;
    font-size: 14px !important;
    line-height: 19px;
    color: #2c6698;
    padding-bottom: 6px;
}
@media screen and (max-width: 768px) {
.new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .hamMenuMainHeading {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #9198a9;
    margin-bottom: 24px;
}
.new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .quicklinksheadingMob,
.new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .appDwnldForm .downloadheadingMob {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #9198a9;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 25px;
}
.new-hdfc-life-insurance-header .mobileHeader .hamMenuSection .appDwnldForm .downloadheadingMob {
    margin-bottom: 17px;
    padding-bottom: 0;
    color: #ed1c24 !important;
}
}
/* 33310 - Ashish heading tag changes css End */
.mobHeaderSearchWrp {
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.mobHeaderSearchWrp.visible {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease;
}

.mobHeaderSearchWrp.hidden {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.new-hdfc-life-insurance-header .headerHamburgerMenu>button .line {
    fill: none;
    stroke: #233253;
    stroke-width: 6;
    transition: stroke-dasharray .6s cubic-bezier(.4, 0, .2, 1), stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1)
}

.new-hdfc-life-insurance-header .headerHamburgerMenu>button .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6
}

.new-hdfc-life-insurance-header .headerHamburgerMenu>button .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6
}

.new-hdfc-life-insurance-header .headerHamburgerMenu>button .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6
}

.new-hdfc-life-insurance-header .headerHamburgerMenu>button.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6
}

.new-hdfc-life-insurance-header .headerHamburgerMenu>button.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6
}

.new-hdfc-life-insurance-header .headerHamburgerMenu>button.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6
}

.new-hdfc-life-insurance-header button {
    border: none;
    outline: none;
    background-color: transparent;
}

.new-hdfc-life-insurance-header .mobile-search-icon.siteButton {
    background: #ed1c24;
    border: 1px solid #ed1c24;
}

@media screen and (max-width: 1024px) {
    .mobileHeader .hamMenuSection .subMenuSection.opened .subMenuBC button svg {
        height: 18px;
        width: 13px;
    }
}
.new-hdfc-life-insurance-header .megaMenuSec .megaMenuLinkSec .menuLinkInner .moreMenuLink .moreMenuLinkText {
    margin-left:0px;
}

.new-hdfc-life-insurance-header .moreMenuLink.hide-show-toggle-enabled {
    color: #ed1c24 !important;
}

.new-hdfc-life-insurance-header .moreMenuLink.hide-show-toggle-enabled .moreMenuLinkText {
    color: #ed1c24 !important;
    cursor: pointer;
}

.new-hdfc-life-insurance-header .moreMenuLink.hide-show-toggle-enabled > span:not(.moreMenuLinkText) {
    display: none;
}
/**
 * Swiper 6.4.11
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2021 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 6, 2021
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;-webkit-filter:blur(50px);filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rangeslider,.rangeslider__fill{display:block;-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,.3);-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.3);box-shadow:inset 0 1px 3px rgba(0,0,0,.3);-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}.rangeslider{background:#e6e6e6;position:relative}.rangeslider--horizontal{height:20px;width:100%}.rangeslider--vertical{width:20px;min-height:150px;max-height:100%;height:100%}.rangeslider--disabled{opacity:.4}.rangeslider__fill{background:#0f0;position:absolute}.rangeslider--horizontal .rangeslider__fill{top:0;height:100%}.rangeslider--vertical .rangeslider__fill{bottom:0;width:100%}.rangeslider__handle{background:#fff;border:1px solid #ccc;cursor:pointer;display:inline-block;width:40px;height:40px;position:absolute;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);background-size:100%;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,rgba(0,0,0,.1)));background-image:-moz-linear-gradient(rgba(255,255,255,0),rgba(0,0,0,.1));background-image:-webkit-linear-gradient(rgba(255,255,255,0),rgba(0,0,0,.1));background-image:linear-gradient(rgba(255,255,255,0),rgba(0,0,0,.1));-moz-box-shadow:0 0 8px rgba(0,0,0,.3);-webkit-box-shadow:0 0 8px rgba(0,0,0,.3);box-shadow:0 0 8px rgba(0,0,0,.3);-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%}.rangeslider__handle:after{content:"";display:block;width:18px;height:18px;margin:auto;position:absolute;top:0;right:0;bottom:0;left:0;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);background-size:100%;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(0,0,0,.13)),color-stop(100%,rgba(255,255,255,0)));background-image:-moz-linear-gradient(rgba(0,0,0,.13),rgba(255,255,255,0));background-image:-webkit-linear-gradient(rgba(0,0,0,.13),rgba(255,255,255,0));background-image:linear-gradient(rgba(0,0,0,.13),rgba(255,255,255,0));-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%}.rangeslider--active .rangeslider__handle,.rangeslider__handle:active{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);background-size:100%;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(0,0,0,.1)),color-stop(100%,rgba(0,0,0,.12)));background-image:-moz-linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.12));background-image:-webkit-linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.12));background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.12))}.rangeslider--horizontal .rangeslider__handle{top:-10px;touch-action:pan-y;-ms-touch-action:pan-y}.rangeslider--vertical .rangeslider__handle{left:-10px;touch-action:pan-x;-ms-touch-action:pan-x}input[type=range]:focus+.rangeslider .rangeslider__handle{-moz-box-shadow:0 0 8px rgba(255,0,255,.9);-webkit-box-shadow:0 0 8px rgba(255,0,255,.9);box-shadow:0 0 8px rgba(255,0,255,.9)}
/*# sourceMappingURL=rangeslider.min.css.map */
footer .wrapper.disclaimerTxtParent p {
	font-size: 15px !important;
	color: #1f2223;
	margin-bottom: 18px;
}

.hdfc-life-insurance-footer footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 1532px;
	background: #FFF6F6;
}

.hdfc-life-insurance-footer .disclaimerTxtParent {
	padding-inline: 12px !important;
}

/* .hdfc-life-insurance-footer .wrapper.footerMenuSec .menuSecList {
	margin-bottom: 20px;
} */

.hdfc-life-insurance-footer .wrapper.footerMenuSec .menuSecList a {
	font-size: 14px;
	line-height: 28px;
	font-weight: 400;
}

.hdfc-life-insurance-footer .wrapper.footerMenuSec .menuSecList.open a {
	color: #FF3C43;
}

.hdfc-life-insurance-footer p {
	margin-bottom: 0;
}

.hdfc-life-insurance-footer .popularMenuList {
	border-right: none;
	padding-right: unset;
}

/* popularMenuList collapsable panel — hidden by default on all screen sizes */
.hdfc-life-insurance-footer .popularMenuList ul {
	display: none;
	padding-left: 20px;
}

.hdfc-life-insurance-footer .popularMenuList.open ul {
	display: block;
}

.hdfc-life-insurance-footer .popularMenuList h3 {
	display: flex;
	align-items: center;
	gap: 4px;
}

.hdfc-life-insurance-footer .popularMenuList h3 a {
	color: #233253;
	font-weight: 500;
}

.hdfc-life-insurance-footer .popularMenuList.menuSecList.open .popularMenuList__heading-text,
.hdfc-life-insurance-footer .popularMenuList.menuSecList .popularMenuList__heading-text:hover {
	color: #FF3C43;
}

.hdfc-life-insurance-footer .popularLinks {
	border-right: 1px solid #cfd6d6;
	padding-right: 26px;
	max-width: 30%;
}

.hdfc-life-insurance-footer .productList {
	flex: 1;
	padding-left: 26px;
}

/* .hdfc-life-insurance-footer .wrapper.footerMenuSec {
	gap: 16px
} */

.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec {
	margin-top: 20px;
	margin-left: 0px;
}


.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec:first-child {
	margin-top: 0;
}


/* .ewidth .stayUpdatedSec {
	max-width: 310px;
} */

.hdfc-life-insurance-footer .stayUpdatedSec {
	max-width: 100%;
}

.hdfc-life-insurance-footer .stayUpdatedSec .form-group {
	display: flex;
	width: 100%;
	margin-bottom: 0px;
}

.hdfc-life-insurance-footer .stayUpdatedSec .form-group .awesomplete {
	flex: 1;
}

.hdfc-life-insurance-footer .stayUpdatedSec .emailAddress {
	width: 100%;
}

.hdfc-life-insurance-footer .stayUpdatedSec .error-txt {
	line-height: 24px;
}

.hdfc-life-insurance-footer .stayUpdatedSec .recaptcha {
	margin-top: 16px;
	transform: scale(0.8);
	transform-origin: 0 0;
}

.ewidth .form-group>label {
	line-height: 16px;
}

.hdfc-life-insurance-footer .footerFormSec .footerFormBlk a img {
	width: auto;
	height: auto;
}

footer .footerFormSec .stayConnectedSec>div a.twitter img {
	width: 23px;
}

.hdfc-life-insurance-footer footer .footerMenuSec .productMenuSec .productMenuWrp .menuSecList a:hover {
	color: #FF3C43;
}

.hdfc-life-insurance-footer footer .footerMenuSec .productMenuSec .productMenuWrp .menuSecList .viewalllink:hover {
	margin-left: 5px;
}


.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	column-gap: 8px;

	padding-block: 16px;
}


.hdfc-life-insurance-footer .footerFormSec .stayConnectedSec>div a.twitter:hover {
	/* background: #50abf1; */
	/* border-color: #50abf1; */
	background: #000000;
	border-color: #000000;
}

/* menuSecList collapsable panel — hidden by default on all screen sizes */
.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList .menuSecListSection {
	display: none;
	padding-left: 20px;
	padding-bottom: 20px;
}

.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList.open .menuSecListSection {
	display: block;
}

.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList.noPlanName .menuSecListSection {
	padding-left: 0;
	padding-bottom: 0;
}

.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList.noPlanName .menuSecListSection a {
	color: #1F2223;
}

.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList.noPlanName .menuSecListSection a:hover {
	color: #ED1C24;
}

/* Toggle button */
.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList h3 {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	/* justify-content: space-between; */
}

.hdfc-life-insurance-footer .menuSecToggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: #233253;
	flex-shrink: 0;
	transition: color 150ms ease-in-out;
}

.hdfc-life-insurance-footer .menuSecToggle:hover {
	color: #FF3C43;
}

.hdfc-life-insurance-footer .menuSecToggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Plus icon shown when collapsed, minus icon shown when expanded */
.hdfc-life-insurance-footer .menuSecToggle__icon-collapsed {
	display: inline-block;
}

.hdfc-life-insurance-footer .menuSecToggle__icon-expanded {
	display: none;
}

.hdfc-life-insurance-footer .menuSecList.open .menuSecToggle__icon-collapsed {
	display: none;
}

.hdfc-life-insurance-footer .menuSecList.open .menuSecToggle__icon-expanded {
	display: inline-block;
}

.hdfc-life-insurance-footer .menuSecList.open .menuSecToggle {
	color: #FF3C43;
}

.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList h3 a,
.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList h3 .nonLinkedProduct {
	color: #233253;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
}

.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList h3 a:hover {
	color: #FF3C43;
}

.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList.open h3 a:hover {
	color: #233253;
}

.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList.open h3 a,
.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList.open h3 .nonLinkedProduct {
	color: #FF3C43;
}

.hdfc-life-insurance-footer .menuSecListSection .viewalllink {
	font-weight: 600;
	font-size: 10px;
	line-height: 20px;
	color: #233253;
	text-transform: uppercase;
	margin: 0;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

@media screen and (min-width : 768px) {
	.hdfc-life-insurance-footer .paymentPartnersSec,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp {
		position: relative;
	}

	.hdfc-life-insurance-footer footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList {
		/* max-width: 25%; */
		width: 100%;
		/* padding-top: 15px;
		padding-right: 20px;
		border-bottom: 1px solid #8a93a5;
		padding-bottom: 20px; */
		margin-bottom: 0;
	}

	.hdfc-life-insurance-footer .paymentPartnersSec::after,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp::after {
		content: '';
		width: 100%;
		border-bottom: 1px solid #8a93a5;
		position: absolute;
		bottom: 0;
	}

	.hdfc-life-insurance-footer footer .wrapper.footerMenuSec .productMenuSec>h3 {
		margin-bottom: 0;
	}

}

@media screen and (max-width: 1024px) {
	footer {
		contain-intrinsic-size: auto 1270px;
	}
}

@media screen and (max-width : 768px) {

	.hdfc-life-insurance-footer .footerFormSec .stayUpdatedSec {
		display: block !important;
		padding-top: 16px;
		/* padding: 38px 0; */
	}

	.hdfc-life-insurance-footer .footerFormSec .stayUpdatedSec h3 {
		text-align: center;
	}

	.hdfc-life-insurance-footer .footerFormSec {
		padding: 0px !important;
	}

	.hdfc-life-insurance-footer .footerFormSec .footerFormBlk {
		display: none;
	}

	/* .hdfc-life-insurance-footer .wrapper {
		padding-inline: 24px !important;
	} */
}

@media screen and (max-width: 1024px) {
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList {
		max-width: 100%;
		width: 100%;
	}

	.ewidth form input {
		width: 68% !important;
	}

	.ewidth form button {
		width: 32% !important;
	}

	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec {
		width: auto;
	}
}

@media screen and (max-width: 768px) {

	.hdfc-life-insurance-footer .popularLinks {
		padding-right: 0;
		width: 100%;
		border-right: none;
	}

	.hdfc-life-insurance-footer .productList {
		flex: auto;
		padding-left: 0;
	}

	.hdfc-life-insurance-footer .popularMenuList ul,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp {
		padding: 12px;
	}

	/* footer .wrapper.footerMenuSec .menuSecList ul{
		padding-left: 20px;
	} */

	.hdfc-life-insurance-footer .popularLinks h3,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec h3 {
		font-weight: 600;
		font-size: 16px;
		line-height: 20px;
		/* margin-bottom: 15px; */
		position: relative;
	}

	.hdfc-life-insurance-footer .wrapper.footerMenuSec .menuSecList h3 {
		font-size: 16px;
	}

	/* .hdfc-life-insurance-footer .popularLinks h3,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec>h3 {
		width: 95%;
	} */

	.hdfc-life-insurance-footer .footerMenuSec {
		padding-inline: 12px !important;
		gap: 8px;
	}

	.hdfc-life-insurance-footer .popularLinks .popularMenuList {
		margin-bottom: 0px !important;
	}

	.hdfc-life-insurance-footer .popularLinks .popularMenuList,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec {
		position: relative;
		margin-top: 0px;
		margin-left: 0px !important;
	}

	.hdfc-life-insurance-footer .popularMenuList .mobileAccordion,
	.hdfc-life-insurance-footer .productMenuSec .productMenuWrp {
		background: #FFE7E7;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.hdfc-life-insurance-footer footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList h3 {
		display: flex;
		/* justify-content: space-between; */
	}

	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList .planNameHead,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList .nonLinkedProduct {
		display: block;
		width: 80%;
	}

	.hdfc-life-insurance-footer .popularLinks .popularMenuList h3::after,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec>h3::after {
		content: "";
		position: absolute;
		right: 4px;
		width: 20px;
		height: 20px;
		background: url(../../../content/dam/hdfclifeinsurancecompany/images/home-images/dd-arrow-white.svg) no-repeat center;
		background-size: 60%;
		transform-origin: center;
	}

	.hdfc-life-insurance-footer .popularLinks .popularMenuList.open h3::after,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec.open>h3::after {
		transform: rotate(-180deg);
		/* top: 5px; */
	}

	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList .planNameHead,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec .productMenuSec .productMenuWrp .menuSecList .planNameHead h3 {
		display: inline;
	}

	.hdfc-life-insurance-footer .popularMenuList.menuSecList.open .popularMenuList__heading-text,
	.hdfc-life-insurance-footer .popularMenuList.menuSecList .popularMenuList__heading-text:hover {
		color: #fff;
	}

	.hdfc-life-insurance-footer .footerMobileAccordion {
		width: 100%;
		background: #025289;
		color: #fff !important;
		padding: 8px 12px;
		border-radius: 4px;
	}

	.hdfc-life-insurance-footer .popularMenuList.open .footerMobileAccordion,
	.hdfc-life-insurance-footer .productMenuSec.open .footerMobileAccordion {
		background: #ED1C24;
	}

	.hdfc-life-insurance-footer .popularMenuList .menuSecToggle {
		width: 100%;
		justify-content: flex-start;
	}

	.hdfc-life-insurance-footer .popularMenuList .menuSecList {
		margin-bottom: 0px;
	}

	.hdfc-life-insurance-footer .popularMenuList .menuSecToggle__icon {
		display: none;
	}

	.hdfc-life-insurance-footer .bewareAlert>div {
		padding: 24px 8px;
	}

	/* Mobile section ordering via display:contents + flex order */
	.hdfc-life-insurance-footer .wrapper.footerMenuSec {
		display: flex;
		flex-direction: column;
	}

	.hdfc-life-insurance-footer .wrapper.footerMenuSec>.popularLinks,
	.hdfc-life-insurance-footer .wrapper.footerMenuSec>.productList {
		display: contents;
	}

	.hdfc-life-insurance-footer .productMenuSec {
		order: 1;
	}

	.hdfc-life-insurance-footer .popularMenuList {
		order: 2;
	}

	.hdfc-life-insurance-footer .paymentPartnersSec {
		order: 3;
	}

	.hdfc-life-insurance-footer .footerFormSec {
		order: 4;
	}

	.hdfc-life-insurance-footer .mobileFooterMenu {
		font-weight: 600;
		order: 5;
		padding: 16px 0;
	}

	.hdfc-life-insurance-footer .mobileFooterMenu ul {
		justify-content: center;
		gap: 16px;
	}

	.hdfc-life-insurance-footer .footerInfo {
		order: 6;
	}

	.hdfc-life-insurance-footer .mobileFooterInfo {
		order: 7;
	}

	.hdfc-life-insurance-footer .bewareAlert {
		order: 8;
	}

	.hdfc-life-insurance-footer .externalLinks {
		order: 9;
	}

	.hdfc-life-insurance-footer .footerViewMore {
		order: 10;
	}
}

/* 29247 footer Regulatory Header Tag change START */
.hdfc-life-insurance-footer .footerInfo>div p {
	font-size: 16px;
	line-height: 23px;
	font-weight: 400;
}

.hdfc-life-insurance-footer .footerInfo {
	margin-top: 22px;
}

.hdfc-life-insurance-footer .footerInfo>div {
	margin-top: 22px;
	margin-bottom: 22px;
}

@media screen and (max-width: 768px) {
	.hdfc-life-insurance-footer .mobileFooterInfo>div {
		font-weight: 400;
		font-size: 12px;
		line-height: 17px;
		color: #666;
		margin: 0 0 15px;
	}
}

/* 29247 footer Regulatory Header Tag change END */

.hdfc-life-insurance-footer footer .footerFormSec {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	margin-inline-start: 18px;
}

.hdfc-life-insurance-footer .appDwnldSec h3 {
	text-align: center;
}

.hdfc-life-insurance-footer .appDwnldSec .footerAppLinkWrapper,
.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerDownloadButton {
	display: none;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerDownloadButton a {
	min-width: 165px;
	font-size: 14px;
	color: rgb(255, 255, 255);
	background: rgb(237, 28, 36);
	padding: 13px;
	border-radius: 13px;
	text-align: center;
	cursor: pointer;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerQRCode {
	/* background-color: #DBDDDD; */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	margin-top: 15px;
	padding: 12px 18px;
	border-radius: 20px;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerQRCode .qrCodeTitle {
	color: #F0202A;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerQRCode .qrCodeImgWrapper {
	position: relative;
	width: 100%;
	height: auto;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerQRCode img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerAppLink {
	justify-content: start;
	gap: 5px;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerAppLink .appleIcon img,
.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerAppLink .androidIcon img {
	position: absolute;
	bottom: 16px;
	width: 48px;
	height: 48px;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerAppLink .appleIcon img {
	left: 0;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerAppLink .androidIcon img {
	right: 0;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerAppLink .title {
	display: none;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 0 !important;
}

.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec>div a.appleIcon {
	margin: 0px;
}

.hdfc-life-insurance-footer footer .footerFormSec .stayConnectedSec {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hdfc-life-insurance-footer footer .footerFormSec .stayConnectedSec>div {
	justify-content: center;
}

@media screen and (min-width: 768px) {
	.hdfc-life-insurance-footer footer .footerFormSec .stayConnectedSec>div {
		justify-content: center;
		max-width: 70%;
	}
}

@media screen and (max-width: 768px) {

	.hdfc-life-insurance-footer footer .footerFormSec {
		margin-inline-start: 0;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec {
		max-width: 100%;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerDownloadButton {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 25px;
		padding: 15px;
		border: 1px dashed #ED1C24;
		border-left: 0px;
		border-right: 0px;
		/* border-radius: 15px; */
		/* margin-bottom: 15px; */
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerDownloadButton .points {
		display: flex;
		justify-content: space-around;
		align-items: center;
		gap: 10px;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerDownloadButton .points img {
		object-fit: contain;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerDownloadButton .points p {
		font-size: 16px;
		font-weight: 500;
		color: #054E88;
		text-align: center;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerDownloadButton .points span {
		align-self: flex-end;
		display: block;
		width: 2px;
		height: 15px;
		background: #054E88;
		margin-bottom: 5px;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerDownloadButton .points span:last-child {
		display: none;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec,
	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerAppLink .title {
		display: block;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec {
		padding: 20px 0px;
		/* margin-inline: auto;
		border-top: 1px solid #9F9999;
		border-bottom: 1px solid #9F9999; */
	}

	.hdfc-life-insurance-footer footer .footerFormSec .stayConnectedSec h3,
	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec h3 {
		width: 100%;
		text-align: center;
	}

	.hdfc-life-insurance-footer .appDwnldSec .footerAppLinkWrapper {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.hdfc-life-insurance-footer .appDwnldSec .footerAppLinkWrapper .footerAppLink {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerAppLink .appleIcon img,
	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerAppLink .androidIcon img {
		position: static;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerQRCode {
		display: none;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .appDwnldSec .footerAppLink {
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	.hdfc-life-insurance-footer footer .footerFormSec .stayConnectedSec>div {
		max-width: 238px;
	}
}

/* Payment Partners Section */
.hdfc-life-insurance-footer .paymentPartnersSec {
	padding: 16px 0;
}

/* --- Single Image Styling --- */
.hdfc-life-insurance-footer .paymentPartnersSingle {
	display: flex;
	justify-content: center;
	/* Adjust to flex-start if you want it left-aligned */
	align-items: center;
	background: #fac3c3;
	border-radius: 12px;
	/* padding: 12px 16px; */
}

.hdfc-life-insurance-footer .paymentPartnersSingle img {
	max-width: 100%;
	height: auto;
	max-height: 44px;
	/* Matches the minimum height of the grid items */
	object-fit: contain;
}

/* --- Multiple Logos Grid Styling --- */
.hdfc-life-insurance-footer .paymentPartnersGrid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	align-items: center;
	background: #fac3c3;
	border-radius: 12px;
	padding: 12px 16px;
}

.hdfc-life-insurance-footer .paymentPartnersGrid .paymentPartnerItem {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 8px;
	padding: 8px 10px;
	min-height: 44px;
	text-decoration: none;
	/* Prevents underlines on the wrapper links */
	transition: transform 0.2s ease;
}

.hdfc-life-insurance-footer .paymentPartnersGrid .paymentPartnerItem:hover {
	transform: scale(1.02);
	/* Slight hover effect for interactive partner logos */
}

.hdfc-life-insurance-footer .paymentPartnersGrid .paymentPartnerItem img {
	max-width: 100%;
	height: 24px;
	width: auto;
	object-fit: contain;
}

/* --- Responsive Rules --- */
@media screen and (max-width: 768px) {
	.hdfc-life-insurance-footer .paymentPartnersGrid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		padding: 12px;
	}
}
/* ===================================
   Claims Banner Component - Desktop Styles
   Optimized for 1366px viewport
   Based on Figma Design Specs
   =================================== */

/* Override AEM Grid Container for Claims Banner Section */
.container.claims-banner-section,
.responsivegrid.claims-banner-section {
  margin: 0 !important;
  max-width: inherit !important;
  position: relative;
}

/* Main Container */
.claimsbanner {
  /* max-width: 1440px; */
  width: 100%;
  margin-inline: auto;
}

/* Background image covers full section */
.claims-banner__bg-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.claims-banner__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

.claimsbanner section {
  padding: 0;
  min-height: 463px;
  position: relative;
  /* max-width: 1440px; */
  width: 100%;
  overflow: hidden;
  margin-bottom: 22px;
  z-index: 0;
}



/* Content Section - Right Side */
.claims-banner__content {
  max-width: 501px;
  position: absolute;
  z-index: 1;
  top: 100px;
  /* left: 648px; */
  left: 47%;
  bottom: 12px;
}

/* Heading Styles */
.claims-banner__heading {
  margin: 0;
}

.claims-banner-heading {
  font-family: "Poppins", sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 72px;
  margin: 0 0 10px 0;
  color: #1c2633;
  letter-spacing: 0;
}

/* Heading Color Variations - Exact Figma Colors */
.claims-heading-grey {
  color: #9ca3af;
  font-weight: 400;
}

.claims-heading-red {
  color: #ed1c24;
  font-weight: 600;
}

.claims-heading-blue {
  color: #005e9e;
  font-weight: 600;
}

/* Description Text - Exact Figma Specs */
.claims-banner-description {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  margin: 0;
  max-width: 490px;
}

/* CTA Button Group */
.claims-banner__cta-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  margin-top:40px;
}

/* Primary Button - Solid Red (Exact Figma Specs) */
.banner-solid-red-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background-color: #ed1c24;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
  white-space: nowrap;
}

.banner-solid-red-button:hover {
  background-color: #c71920;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(237, 28, 36, 0.3);
}

.banner-solid-red-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(237, 28, 36, 0.2);
}

/* Secondary Button - Border Red (Exact Figma Specs) */
.banner-border-red-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background-color: transparent;
  color: #ed1c24;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  border: 1px solid #f9adaa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
  white-space: nowrap;
}

.banner-border-red-button:hover {
  background-color: rgba(237, 28, 36, 0.05);
  border-color: #ed1c24;
  color: #ed1c24;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(237, 28, 36, 0.2);
}

.banner-border-red-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(237, 28, 36, 0.15);
}

/* Focus States for Accessibility */
.banner-solid-red-button:focus,
.banner-border-red-button:focus {
  outline: 3px solid rgba(237, 28, 36, 0.4);
  outline-offset: 2px;
}

/* Disabled States */
.banner-solid-red-button:disabled,
.banner-border-red-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===================================
   Claims Banner Component - Mobile Responsive Styles
   Desktop: 1366px | Mobile: 360px
   Based on Figma Design Specs
   =================================== */

/* Tablet Landscape */
/* Override AEM Grid Container for Claims Banner Section */
.container.claims-banner-section,
.responsivegrid.claims-banner-section {
    margin: 0 !important;
    max-width: inherit !important;
}

/* Mobile Landscape & Small Tablets */
@media (max-width: 768px) {
    .claimsbanner section {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: auto;
        position: relative;
        margin-bottom: 0;
    }

    /* Picture in normal flow on mobile — natural dimensions, no crop */
    .claims-banner__bg-picture {
        position: relative;
        inset: unset;
        width: 100%;
        height: auto;
        order: -1;
    }

    .claims-banner__bg-image {
        position: static;
        width: 100%;
        height: auto;
        object-fit: unset;
        display: block;
    }

    /* Content Section - Full Width */
    .claims-banner__content {
        max-width: 100%;
        padding: 0 20px 30px 20px;
        position: relative;
        z-index: 1;
        top: 0;
        left: 0;
        bottom: 0;
        text-align: center;
    }

    .claims-banner-heading {
        font-size: 28px;
        font-weight: 600;
        line-height: 42px;
        margin-bottom: 5px;
    }

    .claims-banner-description {
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #4b5563;
        max-width: 100%;
    }

    /* CTA Buttons - Stack Vertically */
    .claims-banner__cta-group {
        flex-direction: column;
        gap: 20px;
        margin-top: 28px;
        align-items: stretch;
    }

    .banner-solid-red-button,
    .border-red-button {
        width: 100%;
        justify-content: center;
    }

    .banner-solid-red-button {
        padding: 10px 24px;
        font-size: 18px;
        font-weight: 500;
        line-height: 28px;
    }

    .border-red-button {
        padding: 8px 20px;
        font-size: 15px;
        font-weight: 500;
        line-height: 24px;
    }

}

/*
 * HDFC Life Claims — Branch Locator
 * Methodology : BEM  (bl__)
 * Approach    : Mobile-first → desktop at min-width: 768px
 * Font        : Poppins (400, 500, 600, 700) via Google Fonts
 *
 * Screens built so far
 * ─────────────────────────────────────────────────────────────
 * ✅ Screen 1  Desktop banner  3983:23936
 * ✅ Screen 2  Desktop drawer  3983:23184
 * ✅ Screen 3  Results panel   3983:22050
 * ✅ Screen 4  Results compact 3983:22697
 * ⬜ Screen 5+ mobile screens
 *
 * Design tokens
 * ─────────────────────────────────────────────────────────────
 * Caption text   : #1c2633  Medium 14px/20px
 * Heading        : #0c111d  Medium 20px/28px
 * CTA red        : #ed1c24
 * Banner bg      : #dce9f7
 */

/* ─── Reset ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Page shell ─────────────────────────────────────────────── */
.bl-page {
  font-family: "Poppins", sans-serif;
  /*   background: #f3f4f6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 16px; */
}

/* ═══════════════════════════════════════════════════════════════
   SCREEN 1 — DESKTOP BANNER
   Figma node 3983:23936  (841 × 162px)
   ══════════════════════════════════════════════════════════════ */

.bl-banner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* max-width: 841px; */
  min-height: 162px;
  background-color: #dce9f7; /* fallback when no image is authored */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 16px;
  /* padding: 24px 40px; */
  padding: 16px 55px 23px 54px;
  overflow: hidden;
}

/* Background picture element — sits behind all banner content */
.bl-banner__bg-picture {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.bl-banner__bg-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* ─── Left content block ─────────────────────────────────────── */
.bl-banner__content {
  position: relative;
  display: flex;
  flex-direction: column;
  /* gap: 8px; */
  z-index: 1;
  flex: 1;
  min-width: 0;
}

/* "To file offline claim" — Body/md Medium 14px/20px, dark text */
.bl-banner__eyebrow {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1c2633;
  letter-spacing: 0;
}

/* "Locate Your Nearest HDFC Life Branch" — H4 Medium 20px/28px */
.bl-banner__heading {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: #0c111d;
  letter-spacing: 0;
  max-width: 388px;
  margin-bottom: 20px;
}

/* ─── CTA button — text link style with icon ─────────────────── */
.bl-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
}

.bl-banner__cta:focus-visible {
  outline: 2px solid #ed1c24;
  outline-offset: 3px;
  border-radius: 4px;
}

/* "Find Nearest Branch" label */
.bl-banner__cta-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #ed1c24;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Circle + arrow icon container */
.bl-banner__cta-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Circle background image */
.bl-banner__cta-circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Arrow SVG on top */
.bl-banner__cta-arrow {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
}

/* ─── Right illustration ─────────────────────────────────────── */
.bl-banner__illustration {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.bl-banner__pin-img {
  display: block;
  width: 104px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 767px) {
  .bl-banner{
    padding: 26px 25px 26px 23px;
    align-items: flex-end;
  }

  .bl-banner__bg-img {
    object-position: bottom center;
  }

  .bl-banner__heading{
    font-size: 18px;
    max-width: 232px;
    width: 100%;
    margin-bottom: 10px;
  }

  .bl-banner__pin-img {
    width:  70px;
  }
}
/* ═══════════════════════════════════════════════════════════════
   SCREEN 2 — DESKTOP DRAWER
   Figma node 3983:23184  (588px wide, full height, slides from right)
   ══════════════════════════════════════════════════════════════ */

/* ─── Overlay ────────────────────────────────────────────────── */
/*
 * Semi-transparent dark scrim behind the drawer.
 * Starts invisible + non-interactive; transitions to visible on open.
 */
.bl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 38, 51, 0.8);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bl-overlay--active {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Drawer shell ───────────────────────────────────────────── */
/*
 * Always in the DOM but off-screen (translateX(100%)).
 * Slides to translateX(0) when .bl-drawer--open is added.
 * Border-radius on top-left + bottom-left only (18px) per Figma.
 */
.bl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 588px;
  max-width: 100vw;
  height: 100vh;
  background: #ffffff;
  border-radius: 18px 0 0 18px;
  z-index: 9999;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 30px 40px 40px;
  font-family: "Poppins", sans-serif;
  /* scroll-bar visible for long content */
  overscroll-behavior: contain;
}

.bl-drawer--open {
  transform: translateX(0);
}

/* Scrollbar styling — subtle */
.bl-drawer::-webkit-scrollbar {
  width: 4px;
}
.bl-drawer::-webkit-scrollbar-thumb {
  background: #d2d5da;
  border-radius: 2px;
}

/* ─── Close button ───────────────────────────────────────────── */
.bl-drawer__close {
  position: absolute;
  top: 30px;
  right: 40px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #d2d5da;
  border-radius: 6px;
  box-shadow: 0px 1px 2px 0px rgba(28, 38, 51, 0.04);
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.bl-drawer__close:hover {
  background: #f3f4f6;
}
.bl-drawer__close:focus-visible {
  outline: 2px solid #002842;
  outline-offset: 2px;
}

.bl-drawer__close-icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

/* ─── Drawer title ───────────────────────────────────────────── */
/* H2 SemiBold 28px/40px — Figma font/size/3xl */
.bl-drawer__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 40px;
  color: #1c2633;
  letter-spacing: 0;
  margin-top: 55px; /* space below close button row */
  margin-bottom: 0;
}

/* ─── Search card ────────────────────────────────────────────── */
/*
 * Desktop: card has no bottom radius — the .bl-drawer__footer
 * directly below uses the same bg and carries the bottom radius,
 * making card + footer look like one seamless rounded rectangle.
 */
.bl-drawer__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #f1fbfe;
  border-radius: 8px 8px 0 0;
  padding: 20px;
  margin-top: 20px;
}

/* ─── Footer (search button outside card) ───────────────────── */
.bl-drawer__footer {
  background: #f1fbfe;
  border-radius: 0 0 8px 8px;
  padding: 0 20px 20px;
}

/* ─── Detected location row ──────────────────────────────────── */
.bl-drawer__location-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bl-drawer__map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.bl-drawer__map-pin-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* "Maharashtra, Mumbai" — Body/lg Medium 16px/24px */
.bl-drawer__location-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #374254;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ─── Form group ─────────────────────────────────────────────── */
.bl-drawer__form-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* "Select Location" label — H4 Medium 18px/28px */
.bl-drawer__form-label {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: #4b5563;
  letter-spacing: 0;
}

/* ─── Inputs block ───────────────────────────────────────────── */
.bl-drawer__inputs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.bl-drawer__input-wrap {
  width: 100%;
}

/* City / State text input — 48px height, border #c9d3e9 */
.bl-drawer__input {
  width: 100%;
  height: 48px;
  padding: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0c111d;
  background: #ffffff;
  border: 1px solid #c9d3e9;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(12, 17, 29, 0.05);
  outline: none;
  letter-spacing: 0;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.bl-drawer__input::placeholder {
  color: #9ca3af;
}

.bl-drawer__input:focus {
  border-color: #002842;
  box-shadow: 0 0 0 3px rgba(0, 40, 66, 0.12);
}

/* "OR" divider text — Body/md Medium 14px/20px, muted */
.bl-drawer__and {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #717684;
  letter-spacing: 0;
  text-align: center;
}

/* ─── Actions (city chips + CTA) ─────────────────────────────── */
.bl-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

/* ─── Cities wrap (holds label + chips) ─────────────────────── */
.bl-drawer__cities-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* "Top Searched Cities" — hidden on desktop, visible on mobile */
.bl-drawer__cities-label {
  display: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #374254;
  letter-spacing: 0;
  text-align: center;
}

/* ─── Quick city shortcuts ───────────────────────────────────── */
.bl-drawer__cities {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Individual city chip */
.bl-drawer__city {
  display: flex;
  align-items: baseline;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0057e5;
  letter-spacing: 0;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.bl-drawer__city:hover {
  opacity: 0.75;
}

.bl-drawer__city:focus-visible {
  outline: 2px solid #0057e5;
  outline-offset: 2px;
  border-radius: 4px;
}

.bl-drawer__city-icon {
  width: 24px;
  height: 22px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

/* ─── Search CTA button ──────────────────────────────────────── */
/* Full-width, 48px height, brand-red — Figma: Body/xl Medium 18px/28px */
.bl-drawer__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: #ed1c24;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
  border: none;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.bl-drawer__search-btn:hover {
  background: #c7151b;
}
.bl-drawer__search-btn:focus-visible {
  outline: 2px solid #ed1c24;
  outline-offset: 2px;
}

/* ─── Results panel cities wrap ─────────────────────────────── */
.bl-results__cities-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Top Searched Cities label inside results form — hidden on desktop */
.bl-results__cities-label {
  display: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #374254;
  letter-spacing: 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   SCREEN 3 — DESKTOP RESULTS PANEL  (form + map + branch list)
   SCREEN 4 — RESULTS COMPACT STATE  (compact loc + bigger map)
   Figma nodes  3983:22050  /  3983:22697
   ══════════════════════════════════════════════════════════════ */

/* ─── Panel shell ────────────────────────────────────────────── */
.bl-results {
  position: fixed;
  top: 0;
  right: 0;
  width: 1063px;
  max-width: 100vw;
  height: 100vh;
  background: #ffffff;
  border-radius: 18px 0 0 18px;
  z-index: 9999;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 30px 40px 40px 30px;
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
}

.bl-results--open {
  transform: translateX(0);
}

/* ─── Close button ───────────────────────────────────────────── */
.bl-results__close {
  position: absolute;
  top: 30px;
  right: 40px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #d2d5da;
  border-radius: 6px;
  box-shadow: 0px 1px 2px 0px rgba(28, 38, 51, 0.04);
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.bl-results__close:hover {
  background: #f3f4f6;
}
.bl-results__close:focus-visible {
  outline: 2px solid #002842;
  outline-offset: 2px;
}

.bl-results__close-icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

/* ─── Panel title ────────────────────────────────────────────── */
.bl-results__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 40px;
  color: #1c2633;
  letter-spacing: 0;
  margin-top: 52px;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* ─── Two-column body ────────────────────────────────────────── */
.bl-results__body {
  display: flex;
  gap: 28px;
  flex: 1;
  margin-top: 20px;
  overflow: hidden;
}

/* ─── Left column ────────────────────────────────────────────── */
.bl-results__left {
  width: 508px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow-y: auto;
  padding-right: 4px;
}

.bl-results__left::-webkit-scrollbar {
  width: 0;
}

/* ─── Form card (Screen 3) ───────────────────────────────────── */
.bl-results__form-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #f1fbfe;
  border-radius: 8px;
  padding: 20px;
}

/* Location row */
.bl-results__loc-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bl-results__map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.bl-results__map-pin-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bl-results__loc-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #374254;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Select Location form group */
.bl-results__form-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.bl-results__form-label {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: #4b5563;
  letter-spacing: 0;
}

.bl-results__inputs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.bl-results__input {
  width: 100%;
  height: 48px;
  padding: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #0c111d;
  background: #ffffff;
  border: 1px solid #c9d3e9;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(12, 17, 29, 0.05);
  outline: none;
  letter-spacing: 0;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.bl-results__input::placeholder {
  color: #9ca3af;
}

.bl-results__input:focus {
  border-color: #002842;
  box-shadow: 0 0 0 3px rgba(0, 40, 66, 0.12);
}

.bl-results__and {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #717684;
  letter-spacing: 0;
  text-align: center;
}

.bl-results__actions {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.bl-results__cities {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.bl-results__city {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0057e5;
  letter-spacing: 0;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.bl-results__city:hover {
  opacity: 0.75;
}

.bl-results__city:focus-visible {
  outline: 2px solid #0057e5;
  outline-offset: 2px;
  border-radius: 4px;
}

.bl-results__city-icon {
  width: 24px;
  height: 22px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.bl-results__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: #ed1c24;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
  border: none;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.bl-results__search-btn:hover {
  background: #c7151b;
}
.bl-results__search-btn:focus-visible {
  outline: 2px solid #ed1c24;
  outline-offset: 2px;
}

/* ─── Compact location row (Screen 4 state) ──────────────────── */
.bl-results__compact-loc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f1fbfe;
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  min-height: 70px;
  flex-shrink: 0;
}

.bl-results__compact-loc[hidden] {
  display: none;
}

.bl-results__compact-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bl-results__compact-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.bl-results__compact-pin-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bl-results__compact-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bl-results__compact-city {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #374254;
  letter-spacing: 0;
  white-space: nowrap;
}

.bl-results__compact-state {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #717684;
  letter-spacing: 0;
  white-space: nowrap;
}

.bl-results__edit-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.bl-results__edit-btn:hover {
  opacity: 0.7;
}

.bl-results__edit-btn:focus-visible {
  outline: 2px solid #0057e5;
  outline-offset: 2px;
  border-radius: 4px;
}

.bl-results__edit-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* ─── Map section ────────────────────────────────────────────── */
.bl-results__map-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

/* "We found 26 Branches in Mumbai" — Body/xl Medium 20px/28px, brand-blue */
.bl-results__count {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: #00538a;
  letter-spacing: 0;
}

.bl-results__map {
  width: 100%;
  height: 430px;
  background: #e8f1f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: height 0.3s ease;
  flex-shrink: 0;
}

/* Screen 4 compact — map grows to fill space */
.bl-results--compact .bl-results__map {
  height: 638px;
}

.bl-results__map-label {
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ─── Right column — branch list ─────────────────────────────── */
.bl-results__list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 8px;
  padding-right: 8px;
}

/* Thin 5px scrollbar matching Figma design */
.bl-results__list::-webkit-scrollbar {
  width: 5px;
}
.bl-results__list::-webkit-scrollbar-track {
  background: transparent;
}
.bl-results__list::-webkit-scrollbar-thumb {
  background: #d2d5da;
  border-radius: 3px;
}

/* ─── Branch card ────────────────────────────────────────────── */
/* bg #f9fbfd, 1px dashed #c9d3e9, radius 12px, padding 16px     */
.bl-branch-card {
  background: #f9fbfd;
  border: 1px dashed #c9d3e9;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

/* Branch name — Body/xl Medium 18px/28px, primary text */
.bl-branch-card__name {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: #1c2633;
  letter-spacing: 0;
}

.bl-branch-card__details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bl-branch-card__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* MapPin / Clock icon — 24×24 */
.bl-branch-card__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Address / Hours text — Body/md Regular 14px/20px, secondary */
.bl-branch-card__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #374254;
  letter-spacing: 0;
  flex: 1;
  min-width: 0;
}

/* "Contact No:" prefix label */
.bl-branch-card__label {
  color: #374254;
}

/* Phone number link — blue per Figma */
.bl-branch-card__phone {
  color: #186cf2;
  text-decoration: none;
}

.bl-branch-card__phone:hover {
  text-decoration: underline;
}

/* ─── Branch card action buttons ─────────────────────────────── */
.bl-branch-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* "Locate on map" — flex-1, white bg, border #f9adaa, red text */
.bl-branch-card__locate-btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 20px;
  background: #ffffff;
  border: 1px solid #f9adaa;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #ed1c24;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.bl-branch-card__locate-btn:hover {
  background: #fff5f5;
}

.bl-branch-card__locate-btn:focus-visible {
  outline: 2px solid #ed1c24;
  outline-offset: 2px;
}

/* Share button — 40×40 square, same border style */
.bl-branch-card__share-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #f9adaa;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
  cursor: pointer;
  padding: 8px;
  transition: background 0.15s ease;
}

.bl-branch-card__share-btn:hover {
  background: #fff5f5;
}

/* Active/open state — red fill with white icon (Figma node 6332-17106) */
.bl-branch-card__share-btn[aria-expanded="true"] {
  background: #ed1c24;
  border-color: #ed1c24;
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
}

.bl-branch-card__share-btn[aria-expanded="true"] .bl-branch-card__btn-icon path {
  fill: #ffffff;
}

.bl-branch-card__share-btn[aria-expanded="true"]:hover {
  background: #c7151b;
  border-color: #c7151b;
}

.bl-branch-card__share-btn:focus-visible {
  outline: 2px solid #ed1c24;
  outline-offset: 2px;
}

/* Share wrap — position anchor for the popup */
.bl-branch-card__share-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* Share popup tooltip — appears below the share button, centered */
.bl-share-popup {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 149px;
  background: #ffffff;
  border: 1px solid #c9d3e9;
  border-radius: 14px;
  box-shadow: 0px 4px 8px 0px rgba(209, 213, 218, 0.6);
  padding: 8px 14px;
  z-index: 100;
  white-space: nowrap;
}

.bl-share-popup__label {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #1c2633;
  margin: 0 0 4px;
}

.bl-share-popup__icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.bl-share-popup__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 50%;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.bl-share-popup__icon-btn:hover {
  opacity: 0.8;
}

/* Upward-pointing arrow — SVG, centered horizontally */
.bl-share-popup__arrow {
  position: absolute;
  top: -7px;
  right: 12px;
  display: block;
  line-height: 0;
}

/* ── Priority / Senior Citizen badge ──────────────────────────── */
/* Mirrors the share-wrap / share-btn / share-popup pattern        */

.bl-branch-card__priority-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.bl-branch-card__priority-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #f9adaa;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
  cursor: pointer;
  padding: 8px;
  transition: background 0.15s ease;
}

.bl-branch-card__priority-btn:hover {
  background: #fff5f5;
}

.bl-branch-card__priority-btn[aria-expanded="true"] {
  background: #ed1c24;
  border-color: #ed1c24;
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
}

.bl-branch-card__priority-btn[aria-expanded="true"] .bl-branch-card__btn-icon path {
  fill: #ffffff;
}

.bl-branch-card__priority-btn[aria-expanded="true"]:hover {
  background: #c7151b;
  border-color: #c7151b;
}

.bl-branch-card__priority-btn:focus-visible {
  outline: 2px solid #ed1c24;
  outline-offset: 2px;
}

/* Priority popup — same card style as share popup, text-only */
.bl-priority-popup {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  max-width: 240px;
  background: #ffffff;
  border: 1px solid #c9d3e9;
  border-radius: 14px;
  box-shadow: 0px 4px 8px 0px rgba(209, 213, 218, 0.6);
  padding: 10px 14px;
  z-index: 100;
  white-space: normal;
}

.bl-priority-popup__text {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #1c2633;
  margin: 0;
}

.bl-branch-card__btn-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* ─── Autocomplete dropdown ──────────────────────────────────── */
.bl-drawer__input-wrap,
.bl-results__input-wrap {
  position: relative;
  width: 100%;
}

.bl-autocomplete {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 220px;
  overflow-y: auto;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
}

.bl-autocomplete__item {
  padding: 9px 14px;
  cursor: pointer;
  color: #1c2633;
  letter-spacing: 0.01em;
  transition: background 0.12s;
}

.bl-autocomplete__item:hover,
.bl-autocomplete__item:focus {
  background: #f0f5fc;
  color: #003087;
}

/* ═══════════════════════════════════════════════════════════════
   SCREEN 5 — MOBILE BOTTOM SHEET
   Figma node 3985:29296  (390 × 520px sheet, slides from bottom)
   ──────────────────────────────────────────────────────────────
   Reuses .bl-drawer with media-query overrides:
   • Position: bottom instead of right
   • Animation: translateY instead of translateX
   • Title: 20px semibold (vs 28px desktop)
   • Inputs: 40px height (vs 48px desktop)
   • City chips: stacked column with "Top Searched Cities" label
   • Footer (.bl-drawer__footer): white bg (vs blue on desktop)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* ── Sheet positioning ─────────────────────────────────────── */
  .bl-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    padding: 0 20px 20px;
    overflow-y: auto;
  }

  .bl-drawer--open {
    transform: translateY(0);
  }

  /* ── Header row (title + close) ──────────────────────────── */
  .bl-drawer__header {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 26px 0 0 0;
      flex-shrink: 0;
  }

  /* ── Close button ──────────────────────────────────────────── */
  .bl-drawer__close {
    position: static;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  /* ── Title ─────────────────────────────────────────────────── */
  /* H4 Semibold 20px/28px on mobile (vs 28px desktop) */
  .bl-drawer__title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    margin-top: 0;
    padding: 0;
    flex: 1;
  }

  /* ── Search card ───────────────────────────────────────────── */
  /* Restore full border-radius (card is standalone on mobile) */
  .bl-drawer__card {
    border-radius: 8px;
    padding-bottom: 20px;
    margin-top: 30px;
  }

  /* ── Inputs ────────────────────────────────────────────────── */
  /* Mobile inputs are 40px height (vs 48px desktop) */
  .bl-drawer__input {
    height: 40px;
  }

  /* ── Cities section ────────────────────────────────────────── */
  /* Row stays flex row but centered with gap (not space-between) */
  .bl-drawer__cities {
    justify-content: center;
    gap: 24px;
  }

  /* Each chip: icon stacked above text */
  .bl-drawer__city {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 50px;
    font-size: 12px;
    line-height: 16px;
  }

  .bl-drawer__city-icon {
    width: 24px;
    height: 22px;
  }

  /* "Top Searched Cities" label — visible on mobile only */
  .bl-drawer__cities-label {
    display: block;
  }

  /* ── Footer (search button) ────────────────────────────────── */
  /* White bg on mobile (floats at bottom of sheet outside card) */
  .bl-drawer__footer {
    background: white;
    border-radius: 0;
    padding: 20px 0 0;
  }

  /* ── Drawer search btn: grey by default; red when inputs have a value ── */
  .bl-drawer__search-btn {
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: 0 1px 2px rgba(28, 38, 51, 0.04);
    cursor: not-allowed;
  }
  .bl-drawer__search-btn.bl-search-btn--ready {
    background: #ed1c24;
    color: #ffffff;
    box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
    cursor: pointer;
  }
  .bl-drawer__search-btn.bl-search-btn--ready:hover {
    background: #c7151b;
  }

  /* ── Results form actions gap on mobile ──────────────────────── */
  .bl-results__actions {
    gap: 20px;
  }
  .bl-results {
    display: flex;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 90vh;
    border-radius: 20px 20px 0 0;
    padding: 0;
    transform: translateY(100%);
    z-index: 9999;
    overflow: hidden;
  }

  .bl-results--open {
    transform: translateY(0);
  }

  .bl-results__header {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 16px 20px 12px;
    flex-shrink: 0;
  }

  .bl-results__title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    margin-top: 0;
    padding: 0;
    border-bottom: none;
    flex: 1;
  }

  .bl-results__close {
    position: static;
    flex-shrink: 0;
  }

  .bl-results__body {
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    margin-top: 0;
  }

  .bl-results__body::-webkit-scrollbar {
    width: 0;
  }

  .bl-results__left {
    width: 100%;
    overflow-y: visible;
    padding-right: 0;
    gap: 0;
  }

  .bl-results__form-card {
    border-radius: 8px;
    margin: 16px 20px 0;
  }

  .bl-results__input {
    height: 40px;
  }

  .bl-results__cities {
    justify-content: center;
    gap: 24px;
  }

  .bl-results__city {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 50px;
    font-size: 12px;
    line-height: 16px;
  }

  .bl-results__city-icon {
    width: 24px;
    height: 22px;
  }

  .bl-results__search-btn {
    height: 40px;
    font-size: 16px;
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: 0 1px 2px rgba(28, 38, 51, 0.04);
  }

  .bl-results__search-btn:hover {
    background: #e5e7eb;
  }

  .bl-results__compact-loc {
    margin: 30px 20px;
    min-height: unset;
    width: unset;
  }

  .bl-results__compact-city {
    font-size: 14px;
    line-height: 20px;
  }
  .bl-results__compact-state {
    font-size: 12px;
    line-height: 16px;
  }

  .bl-results__count {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: #00538a;
    text-align: center;
    margin: 0 0 20px
  }

  .bl-results__map-section {
    gap: 0;
  }

  .bl-results__map {
    height: 464px;
    border-radius: 0;
    position: relative;
  }

  .bl-results--compact .bl-results__map {
    height: 464px;
  }

  .bl-results__list {
    overflow-y: visible;
    padding: 20px 20px 40px;
    gap: 30px;
  }

  /* Tap to View Map button (Screen 7) */
  .bl-results__tap-map {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #ed1c24;
    cursor: pointer;
    z-index: 1;
    white-space: nowrap;
  }

  .bl-results__tap-map:focus-visible {
    outline: 2px solid #ed1c24;
    outline-offset: 2px;
  }

  /* Map-teaser state (Screen 7) */
  .bl-results--map-teaser #bl-results-map {
    height: 61px;
  }
  .bl-results--map-teaser .bl-results__tap-map {
    display: flex;
    align-items: center;
  }

  /* Form-open state (Screen 8) */
  .bl-results--form-open #bl-results-map {
    height: 485px;
  }

  /* ── Top Searched Cities label in results form ─────────────── */
  .bl-results__cities-label {
    display: block;
  }

  /* ── Share popup padding override ────────────────────────────── */
  .bl-share-popup {
    padding: 10px 14px;
    width: 140px;
  }

  .bl-share-popup__label {
    font-size: 12px;
    line-height: 16px;
    margin: 0 0 6px;
  }

  /* ── Results search btn: red when inputs have a value ───────── */
  .bl-results__search-btn.bl-search-btn--ready {
    background: #ed1c24;
    color: #ffffff;
    box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
    cursor: pointer;
  }
  .bl-results__search-btn.bl-search-btn--ready:hover {
    background: #c7151b;
  }
}

/* ═══════════════════════════════════════════════════════════════
   VALIDATION — field error message + error border
   (shared across drawer and results panel, all breakpoints)
   ══════════════════════════════════════════════════════════════ */

/* Error message text */
.bl-field-error {
  display: block;
  margin-top: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #d92d20;
}

.bl-field-error[hidden] {
  display: none;
}

/* Error border on the input */
.bl-drawer__input-wrap--error .bl-drawer__input,
.bl-results__input-wrap--error .bl-results__input {
  border-color: #d92d20;
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

/* Disabled search buttons (both forms) */
.bl-drawer__search-btn:disabled,
.bl-results__search-btn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  box-shadow: 0 1px 2px rgba(28, 38, 51, 0.04);
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   HOVER POPUPS — desktop only (real mouse/trackpad)
   Show share & priority popups on wrap hover; override [hidden].
   Touch devices keep the existing click behaviour unchanged.
   ══════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  /* Invisible bridge fills the 10px gap between button and popup so
     :hover on the wrap is never lost as the mouse moves into the popup */
  /* .bl-branch-card__share-wrap::after,
  .bl-branch-card__priority-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
  } */

  /* Show popup when hovering the wrap (button + popup stay hovered together) */
  /* .bl-branch-card__share-wrap:hover .bl-share-popup[hidden],
  .bl-branch-card__priority-wrap:hover .bl-priority-popup[hidden] {
    display: block !important;
  } */

  /* Active button state while hovering the wrap */
  /* .bl-branch-card__share-wrap:hover .bl-branch-card__share-btn,
  .bl-branch-card__priority-wrap:hover .bl-branch-card__priority-btn {
    background: #ed1c24;
    border-color: #ed1c24;
  } */

  /* .bl-branch-card__share-wrap:hover .bl-branch-card__share-btn .bl-branch-card__btn-icon path,
  .bl-branch-card__priority-wrap:hover .bl-branch-card__priority-btn .bl-branch-card__btn-icon path {
    fill: #ffffff;
  } */
}

/*
 * ============================================================
 * HDFC Life Claims — Carousel Banner Component Styles
 * Clientlib category : hdfclifeinsurancecompany.carouselBanner
 * Methodology        : BEM  (hdfcl-cb__*)
 * Approach           : Mobile-first → desktop at min-width: 768px
 *
 * Design Tokens (Figma nodes 1735:24187 / 1735:26457)
 *   banner-bg      #ffffff
 *   card-border    #e5e9f2
 *   heading        #1c2633   color/grey/900
 *   sub-text-mob   #4b5563   color/grey/700
 *   sub-text-desk  #374254   color/grey/800
 *   dot-active     #ed1c24   brand-red
 *   dot-inactive   #c9d3e9   indigo-200
 *   overlay        rgba(28,38,51,0.4)
 *
 * Desktop card  : 711px wide, 215px tall, radius 18px
 * Mobile card   : full-width, radius 18px
 * ============================================================
 */

/* ── CSS variables scoped to component ── */
.hdfcl-cb {
  /* Colors */
  --cb-white: #ffffff;
  --cb-grey-900: #1c2633;
  --cb-grey-800: #374254;
  --cb-grey-700: #4b5563;
  --cb-brand-red: #ed1c24;
  --cb-dot-inactive: #c9d3e9;
  --cb-card-border: #e5e9f2;
  --cb-overlay: rgba(28, 38, 51, 0.4);

  /* Spacing */
  --cb-section-pad: 20px 0 24px;
  --cb-slide-pad: 22px 22px 24px;
  --cb-text-gap: 8px;

  /* Sizes */
  --cb-card-radius: 18px;
  --cb-video-radius: 12px;
  --cb-play-size: 67px;
  --cb-dot-size: 8px;
  --cb-dot-gap: 8px;

  /* Transitions */
  --cb-track-transition: transform 0.4s ease;
  --cb-dot-transition: background 0.2s ease, transform 0.2s ease;
  --cb-play-transition: transform 0.2s ease;
}

/* ── 1. Scoped resets ── */
.hdfcl-cb *,
.hdfcl-cb *::before,
.hdfcl-cb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hdfcl-cb ul {
  list-style: none;
}

/* ── 2. Section ── */
.hdfcl-cb {
  width: 100%;
  background: var(--cb-white);
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  /* padding: var(--cb-section-pad); */
  -webkit-font-smoothing: antialiased;
  border-radius: var(--cb-card-radius);
}

/* ── 3. Inner container ── */
.hdfcl-cb__inner {
  width: min(1124px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── 3b. Card wrapper — visual card on mobile ── */
/* On mobile: white rounded card + shadow containing the track and the dots.
   On desktop: transparent pass-through; track-wrapper carries the visual style. */
.hdfcl-cb__card {
  display: flex;
  flex-direction: column;
  background: var(--cb-white);
  border-radius: var(--cb-card-radius);
  box-shadow: 0 4px 20px rgba(28, 38, 51, 0.1);
  overflow: hidden;
}

/* ── 4. Track wrapper ── */
/* Mobile: pure overflow-clip for the sliding track — visual styling lives on .hdfcl-cb__card.
   Desktop media query below restores the border+bg here. */
.hdfcl-cb__track-wrapper {
  overflow: hidden;
  width: 100%;
}

/* ── 5. Track ── */
.hdfcl-cb__track {
  display: flex;
  transition: var(--cb-track-transition);
  will-change: transform;
}

/* ── 6. Slide — mobile: vertical stack ── */
.hdfcl-cb__slide {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--cb-slide-pad);
}

/* ── 7. Text block ── */
.hdfcl-cb__text {
  display: flex;
  flex-direction: column;
  gap: var(--cb-text-gap);
  padding-bottom: 16px;
}

.hdfcl-cb__heading {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--cb-grey-900);
  letter-spacing: 0;
}

.hdfcl-cb__subtext {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--cb-grey-700);
  letter-spacing: 0;
}

/* Desktop dots inside text block hidden on mobile */
.hdfcl-cb__dots.hdfcl-cb__dots--desktop {
  display: none;
}

/* ── 8. Media wrapper (video or image) ── */
.hdfcl-cb__media-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--cb-video-radius);
  overflow: hidden;
  background: var(--cb-grey-900);
  aspect-ratio: 304 / 172;
}

/* Plain image variant — no overlay, no play button */
.hdfcl-cb__media-wrap--image {
  background: transparent;
}

.hdfcl-cb__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--cb-video-radius);
}

.hdfcl-cb__thumb--image {
  object-fit: cover;
}

.hdfcl-cb__media-overlay {
  position: absolute;
  inset: 0;
  background: var(--cb-overlay);
  border-radius: var(--cb-video-radius);
  pointer-events: none;
}

/* ── Inline video / iframe player ── */
.hdfcl-cb__inline-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--cb-video-radius);
  background: #000;
  display: block;
}

/* ── 9. Play button ── */
.hdfcl-cb__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--cb-play-size);
  height: var(--cb-play-size);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--cb-play-transition);
}

.hdfcl-cb__play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.hdfcl-cb__play-btn:focus-visible {
  outline: 2px solid var(--cb-brand-red);
  outline-offset: 3px;
  border-radius: 50%;
}

.hdfcl-cb__play-icon {
  width: var(--cb-play-size);
  height: var(--cb-play-size);
  display: block;
}

/* ── 10. Dots ── */
.hdfcl-cb__dots {
  display: flex;
  align-items: center;
  gap: var(--cb-dot-gap);
  padding: 4px;
}

/* Mobile dots: centred inside the bottom of the card */
.hdfcl-cb__dots--mobile {
  justify-content: center;
  padding: 14px 0 22px;
}

.hdfcl-cb__dot {
  width: var(--cb-dot-size);
  height: var(--cb-dot-size);
  border-radius: 50%;
  background: var(--cb-dot-inactive);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--cb-dot-transition);
  flex-shrink: 0;
}

.hdfcl-cb__dot--active {
  background: var(--cb-brand-red);
  transform: scale(1.1);
}

.hdfcl-cb__dot:focus-visible {
  outline: 2px solid var(--cb-brand-red);
  outline-offset: 2px;
}

/* ── 11. Desktop ≥ 768px ── */
@media (min-width: 768px) {
  .hdfcl-cb {
    --cb-section-pad: 24px 0;
    --cb-text-gap: 10px;
  }

  /* Cap at the Figma desktop card width (711px) and left-align
     within the page content column — matches design node 1735:24187 */
  .hdfcl-cb__inner {
    width: min(711px, calc(100% - 40px));
    max-width: 711px;
    /* margin: 0 auto; */
  }

  /* Card wrapper: transparent on desktop — visual style moves back to track-wrapper */
  .hdfcl-cb__card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  /* Track wrapper: restore visual card styling on desktop */
  .hdfcl-cb__track-wrapper {
    border-radius: var(--cb-card-radius);
    background: var(--cb-white);
    border: 1px solid var(--cb-card-border);
    overflow: hidden;
  }

  /* Slide: horizontal — text left, video right */
  .hdfcl-cb__slide {
    flex-direction: row;
    align-items: center;
    gap: 62px;
    padding: 28px 31px;
    min-height: 215px;
  }

  /* Text block: fixed 306px left column */
  .hdfcl-cb__text {
    flex: 0 0 306px;
    padding-bottom: 0;
  }

  .hdfcl-cb__subtext {
    font-size: 13px;
    line-height: 20px;
    color: var(--cb-grey-800);
    max-width: 283px;
  }

  /* Show desktop dots inside text block */
  .hdfcl-cb__dots.hdfcl-cb__dots--desktop {
    display: flex;
    margin-top: 2px;
    padding: 0;
  }

  /* Hide mobile dots on desktop */
  .hdfcl-cb__dots.hdfcl-cb__dots--mobile {
    display: none;
  }

  /* Media panel: fixed dimensions to match Figma 281×159px */
  .hdfcl-cb__media-wrap {
    flex: 0 0 281px;
    width: 281px;
    aspect-ratio: 281 / 159;
  }
}

/* ── 12. Video Modal ── */

/* Full-viewport overlay — sits above everything */
.hdfcl-cb__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.hdfcl-cb__modal[hidden] {
  display: none;
}

/* Semi-transparent backdrop */
.hdfcl-cb__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 24, 0.82);
  cursor: pointer;
}

/* Modal box — white rounded container */
.hdfcl-cb__modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* Close button — top-right corner */
.hdfcl-cb__modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease;
}

.hdfcl-cb__modal-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

.hdfcl-cb__modal-close:focus-visible {
  outline: 2px solid #ed1c24;
  outline-offset: 2px;
}

/* Player wrapper — maintains 16:9 ratio */
.hdfcl-cb__modal-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* Player (video or iframe) fills the wrap */
.hdfcl-cb__modal-player-wrap video,
.hdfcl-cb__modal-player-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Animate modal in */
.hdfcl-cb__modal:not([hidden]) .hdfcl-cb__modal-box {
  animation: cb-modal-in 0.25s ease both;
}

@keyframes cb-modal-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Modal: tablet / desktop ── */
@media (min-width: 600px) {
  .hdfcl-cb__modal-box {
    max-width: 720px;
    border-radius: 16px;
  }
}

@media (min-width: 1024px) {
  .hdfcl-cb__modal-box {
    max-width: 900px;
  }
}

/* ── Link modal — 600×600 square ── */
.hdfcl-cb__modal--link .hdfcl-cb__modal-box {
  max-width: 600px;
  width: min(600px, calc(100vw - 32px));
}

.hdfcl-cb__modal--link .hdfcl-cb__modal-player-wrap {
  aspect-ratio: 1 / 1;
}

.hdfcl-cb__modal--link .hdfcl-cb__modal-player-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/*
 * HDFC Life Claims — Claim Process Card
 * Component   : claimProcessCard
 * Methodology : BEM  (cpc__)
 * Approach    : Mobile-first → desktop at min-width: 768px
 *
 * Variants
 * ─────────────────────────────────────────────────────────────
 * .cpc--full    Full 3-step guide (steps always visible)
 * .cpc--simple  Compact collapsible card (steps hidden behind toggle)
 *
 * Visibility helpers
 * ─────────────────────────────────────────────────────────────
 * .cpc--hide-mobile   Hide on mobile  (<768px)
 * .cpc--hide-desktop  Hide on desktop (≥768px)
 *
 * Design tokens (Figma)
 * ─────────────────────────────────────────────────────────────
 * Card bg        : #ffffff + optional texture via data-bg (set by JS)
 * Title          : #1c2633  Regular 20px/28px  centered
 * Subtitle       : #4b5563  Regular 12px/16px  centered
 * Step label     : #002842  Medium  12px/16px
 * Step desc      : #717684  Regular 12px/16px
 * CTA bg         : #ed1c24  (brand-red)
 * CTA text       : #ffffff  Medium 14px/20px
 * Card radius    : 16px     CTA radius : 6px
 */

/* ── Visibility helpers ──────────────────────────────────────── */
@media (max-width: 767px) {
  .cpc--hide-mobile { display: none; }
}
@media (min-width: 768px) {
  .cpc--hide-desktop { display: none; }
}

/* ── Design tokens ───────────────────────────────────────────── */
.cpc {
  --cpc-font: "Poppins", sans-serif;
  --cpc-card-bg: #ffffff;
  --cpc-card-radius: 16px;
  --cpc-shadow: 0 0 14px rgba(33, 8, 74, 0.08);
  --cpc-title-color: #1c2633;
  --cpc-subtitle-color: #4b5563;
  --cpc-label-color: #002842;
  --cpc-desc-color: #717684;
  --cpc-cta-bg: #ed1c24;
  --cpc-cta-hover: #c7151b;
  --cpc-cta-text: #ffffff;
  --cpc-cta-radius: 6px;
  --cpc-toggle-bg: #ffffff;
  --cpc-toggle-border: #ed1c24;
  --cpc-toggle-hover: #e2eef5;
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.cpc-wrapper {
  font-family: var(--cpc-font);
  display: flex;
  justify-content: center;
  padding: 20px 16px;
}

/* ═══════════════════════════════════════════════════════════════
   CARD BASE  (mobile: max-width 353px)
   ═══════════════════════════════════════════════════════════════ */

.cpc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* max-width: 353px; */
  background: var(--cpc-card-bg);
  filter: drop-shadow(var(--cpc-shadow));
  border-radius: var(--cpc-card-radius);
  padding: 32px 24px;
  overflow: hidden;
}

/* ── Title + subtitle ────────────────────────────────────────── */
.cpc__head-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 100%;
  max-width: 228px;
}

.cpc__title {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--cpc-title-color);
  letter-spacing: 0;
}

.cpc__subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--cpc-subtitle-color);
  letter-spacing: 0;
}

/* ── Body (steps area) ───────────────────────────────────────── */
.cpc__body {
  width: 100%;
  margin-top: 19px;
}

/* ── Steps container ─────────────────────────────────────────── */
.cpc__steps {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

/* ── Single step row — icon LEFT, text RIGHT by default ─────── */
.cpc__step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Reversed: text LEFT (right-aligned), icon RIGHT */
.cpc__step--reverse {
  /* flex-direction: row-reverse; */
}

/* ── Step icon ───────────────────────────────────────────────── */
.cpc__step-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cpc__step-img {
  display: block;
  object-fit: contain;
}

.cpc__step-img--1 {
  width: 68px;
  height: 74px;
}
.cpc__step-img--2 {
  width: 71px;
  height: 69px;
}
.cpc__step-img--3 {
  width: 76px;
  height: 69px;
}

/* ── Step text ───────────────────────────────────────────────── */
.cpc__step-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.cpc__step-text--right {
  text-align: right;
}

.cpc__step-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--cpc-label-color);
  letter-spacing: 0;
}

.cpc__step-desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--cpc-desc-color);
  letter-spacing: 0;
}

/* ── Connector (dashed S-curve) ──────────────────────────────── */
.cpc__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cpc__connector-img {
  width: 240px;
  height: auto;
  max-width: 100%;
}

/* Connector 2: flip horizontally */
.cpc__connector--flip .cpc__connector-img {
  transform: scaleX(-1);
}

/* ── CTA ─────────────────────────────────────────────────────── */
.cpc__cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 40px;
}

.cpc__btn,
.cpc__btn:visited,
.cpc__btn:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  height: 32px;
  background: var(--cpc-cta-bg);
  color: var(--cpc-cta-text);
  font-family: var(--cpc-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  border: none;
  border-radius: var(--cpc-cta-radius);
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .cpc__btn {
    transition: background 0.2s ease;
  }
  .cpc__btn:hover {
    background: var(--cpc-cta-hover);
    color: var(--cpc-card-bg);
    text-decoration: none;
  }
}

.cpc__btn:focus-visible {
  outline: 2px solid var(--cpc-cta-bg);
  outline-offset: 2px;
}

/* ── Toggle button ── mobile only, hidden on desktop ─────────── */
.cpc__toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cpc-toggle-bg);
  border: 1.5px solid var(--cpc-toggle-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s ease;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .cpc__toggle:hover {
    background: var(--cpc-toggle-hover);
  }
}

.cpc__toggle:focus-visible {
  outline: 2px solid var(--cpc-label-color);
  outline-offset: 2px;
}

.cpc__toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.cpc__toggle[aria-expanded="true"] .cpc__toggle-icon {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════
   SIMPLE VARIANT — accordion/collapsible (MOBILE ONLY, < 768px)
   On desktop the card always renders fully expanded.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Simple variant */
  .cpc--simple {
    /* padding: 20px 52px; */
  }

  /* Compact CTA gap when body is collapsed */
  .cpc--simple .cpc__cta {
    margin-top: 16px;
  }

  /* Restore full gap when body is expanded */
  .cpc--simple .cpc__body:not([hidden]) ~ .cpc__cta {
    margin-top: 40px;
  }

  /* Head-text offset for the absolute toggle button */
  .cpc--simple .cpc__head-text {
    padding-top: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP ≥ 768px
   Both variants always render fully expanded — no accordion on desktop.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .cpc {
    max-width: 402px;
    padding: 32px 48px;
  }

  /* Simple card: identical padding to full on desktop */
  .cpc--simple {
    padding: 32px 48px;
  }

  /* Hide the toggle button — no accordion on desktop */
  .cpc--simple .cpc__toggle {
    display: none;
  }

  /* Always show steps body regardless of [hidden] attribute */
  .cpc--simple .cpc__body--collapsible[hidden] {
    display: block !important;
  }

  /* Remove head-text top offset — toggle is hidden */
  .cpc--simple .cpc__head-text {
    padding-top: 0;
  }

  /* Restore full CTA gap */
  .cpc--simple .cpc__cta {
    margin-top: 40px;
  }

  .cpc__head-text {
    max-width: 228px;
  }
}

/* ============================================
   Claims Process Steps - Desktop Styles
   Figma: 6bvXsvbtfRkoN2vJUzZ07D / 1735:32632
   Architecture: tabs → timelines → topSteps/bottomSteps
   ============================================ */

/* ═══════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════ */
.cpst-section {
    width: 100%;
    padding-bottom: 48px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.cpst-section:last-child {
    padding-bottom: 0;
}

/* ═══════════════════════════════════
   HEADER: icon + number + title
═══════════════════════════════════ */
.cpst-hdr {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.cpst-hdr__icon {
    flex-shrink: 0;
    width: 95px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpst-hdr__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cpst-hdr__text {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cpst-hdr__num {
    font-family: 'Poppins', sans-serif;
    font-size: 56px;
    font-weight: 400;
    color: #1c2633;
    line-height: 84px;
    letter-spacing: 0;
}

.cpst-hdr__title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1c2633;
    margin: 0;
    line-height: 28px;
    letter-spacing: 0;
}

/* ═══════════════════════════════════
   NOTE / DISCLAIMER TEXT
═══════════════════════════════════ */
.cpst-steps-note {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #4b5563;
    line-height: 16px;
    margin: 0 0 20px;
}



/* ═══════════════════════════════════
   TIMELINE BLOCK
   One zig-zag section per sub-flow
   (e.g. Emergency Hospitalisation,
    Planned Hospitalisation, Docs required…)
═══════════════════════════════════ */
.cpst-timeline {
    margin-bottom: 52px;
}

.cpst-timeline:last-child {
    margin-bottom: 0;
}

.cpst-tl-label {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    line-height: 16px;
    margin: 0 0 20px;
}

/* ═══════════════════════════════════
   TOP ROW  (steps above centre line)
   JS sets gridTemplateColumns = repeat(N, 1fr)
   and marginRight = 1-col-width offset.
   CSS fallback = 3 columns / 15% offset.
═══════════════════════════════════ */
.cpst-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    margin-right: 15%;
}

/* ═══════════════════════════════════
   BOTTOM ROW  (steps below first centre line)
   mirror offset: margin-left
═══════════════════════════════════ */
.cpst-bot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    margin-left: 15%;
}

/* ═══════════════════════════════════
   LOWER ROW  (optional third tier,
   below second centre line)
   same grid as .cpst-bot; JS sets
   gridTemplateColumns + marginLeft.
═══════════════════════════════════ */
.cpst-lower {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    margin-left: 15%;
}

/* ═══════════════════════════════════
   BADGE  (step number bubble)
   Shared by top and bottom steps.
═══════════════════════════════════ */
.cpst-badge {
    position: absolute;
    left: 0;
    display: flex;
    width: 26px;
    height: 26px;
    padding: 2px 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    background: #a4b6da;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 16px;
    z-index: 2;
}

/* ═══════════════════════════════════
   TOP STEP CARD
   Badge at top-left.
   ::before  dashed line badge-bottom → cell-bottom.
   ::after   dot sitting ON the centre line.
═══════════════════════════════════ */
.cpst-step-top {
    position: relative;
    padding: 26px 8px 24px 40px;
    min-height: 70px;
}

.cpst-step-top .cpst-badge {
    top: 0;
}

.cpst-step-top::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 26px;
    bottom: 0;
    border-left: 1px dashed #7590c7;
}

/* dot centred on the mid-line (half of 6px = 3px, half of line-height 1px = 0.5px ≈ bottom:-3px) */
.cpst-step-top::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 9px;
    width: 6px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Ccircle cx='3' cy='3' r='3' fill='%233A568F'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

/* ═══════════════════════════════════
   CENTRE LINE
   ::before  horizontal line full width
   ::after   vertical right-edge connector
             (only when has-lower modifier set by JS)
═══════════════════════════════════ */
.cpst-mid {
    position: relative;
    height: 1px;
    margin: 0;
}

.cpst-mid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 9px;
    right: 0;
    border-top: 1px solid #7590c7;
}

/* Vertical bridge on the right end connecting line-1 to line-2.
   Uses .cpst-mid--upper (set in HTL) because :first-of-type matches
   tag type, not class — it would pick .cpst-top instead. */
.cpst-timeline--has-lower .cpst-mid--upper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    /* height = 38px (bottom step padding) + step content height approx;
       we use a CSS custom property set by JS for exact value,
       falling back to a safe 100px */
    height: var(--cpst-bridge-h, 100px);
    background: #7590c7;
    z-index: 1;
}

/* When third tier is authored, extend .cpst-bot with bottom spacing
   and a right border that visually meets the second centre line */
.cpst-timeline--has-lower .cpst-bot {
    padding-bottom: 38px;
    border-right: 1px solid #7590c7;
}

/* ═══════════════════════════════════
   BOTTOM STEP CARD
   Badge at bottom-left.
   ::before  dashed line cell-top → badge-top.
   ::after   dot sitting ON the centre line.
═══════════════════════════════════ */
.cpst-step-bot {
    position: relative;
    padding: 24px 8px 4px 40px;
    min-height: 70px;
}

/* Restore LTR text direction inside cells when their row is reversed via JS */
.cpst-top--reverse .cpst-step-top,
.cpst-bot--reverse .cpst-step-bot,
.cpst-lower--reverse .cpst-step-bot {
    direction: ltr;
}

.cpst-step-bot .cpst-badge {
    top: auto;
    bottom: 0;
}

.cpst-step-bot::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 26px;
    border-left: 1px dashed #7590c7;
}

.cpst-step-bot::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 9px;
    width: 6px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Ccircle cx='3' cy='3' r='3' fill='%233A568F'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

/* ═══════════════════════════════════
   STEP CONTENT: title + description
═══════════════════════════════════ */
.cpst-step-title,
.cpst-step-text {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #4b5563;
    line-height: 16px;
    margin: 0;
}

.cpst-step-text p {
    margin: 0 0 6px;
}

.cpst-step-text p:last-child {
    margin-bottom: 0;
}

.cpst-step-text ul,
.cpst-step-text ol {
    margin: 0 0 6px;
    padding-left: 16px;
}

.cpst-step-text li {
    margin-bottom: 4px;
}

.cpst-step-text a {
    color: #3a568f;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ═══════════════════════════════════
   MOBILE SERIAL TIMELINE  (.cpst-mobile)
   Hidden on desktop, shown via media.css on mobile.
   Structure per step:
     .cpst-m-step
       .cpst-m-step-header  ← [dot][connector][badge]
       .cpst-m-text
═══════════════════════════════════ */
.cpst-mobile {
    display: none; /* shown only in media.css */
}

.cpst-m-list {
    position: relative;
    padding-left: 0;
}

/* Single vertical dashed line running the full height of the list, behind all steps */
.cpst-m-list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px; /* dot centre: dot is 6px wide at left:0, centre = 3px */
    border-left: 1px solid #7590c7;
    z-index: 0;
}

.cpst-m-step {
    position: relative;
    padding: 0 0 16px 0;
}

.cpst-m-step:last-child{
   padding-bottom: 0;
}

.cpst-m-step-header {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 4px;
}

/* Dot: small filled circle at far left */
.cpst-m-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Ccircle cx='3' cy='3' r='3' fill='%233A568F'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    right: -5px;
}

/* Horizontal connector: 14px solid line from dot to badge */
.cpst-m-connector {
    width: 14px;
    flex-shrink: 0;
    border-top: 1px dashed #7590c7;
}

/* Badge: number circle */
.cpst-m-badge {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    background: #a4b6da;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    padding: 2px 5px;
}

/* Step text */
.cpst-m-text {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #4b5563;
    line-height: 16px;
    margin: 0;
    padding-left: 20px;
}

.cpst-m-text p {
    margin: 0;
}

.cpst-m-text p:last-child {
    margin-bottom: 0;
}

.cpst-special-case__container {
    display:  flex;
    gap:22px;
}

.cpst-special-case__list-container{
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.cpst-special-case__text{
    flex: 1;
}
/* ============================================
   Claims Process Steps - Responsive Styles
   ============================================ */

@media (max-width: 768px) {
    .cpst-section {
        padding: 0;
        margin-bottom: 30px;
    }

    /* ---- Header ---- */
    .cpst-hdr {
        gap: 8px;
        margin-bottom: 20px;
    }

    .cpst-hdr__icon {
        width: 56px;
        height: 56px;
    }

    .cpst-hdr__num {
        font-size: 48px;
        font-weight: 400;
        line-height: 72px;
    }

    .cpst-hdr__title {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }

    /* ── Override JS-set inline grid / margin ── */
    .cpst-top,
    .cpst-bot,
    .cpst-lower {
        display: none !important; /* replaced by .cpst-mobile on mobile */
    }

    /* Hide horizontal centre line */
    .cpst-mid {
        display: none;
    }

    /* Hide desktop top row too */
    .cpst-top {
        display: none !important;
    }

    /* Show the dedicated mobile serial timeline */
    .cpst-mobile {
        display: block;
    }

    .cpst-timeline {
        margin-bottom: 20px;
    }

    /* Reset desktop has-lower styles that don't apply on mobile */
    .cpst-timeline--has-lower .cpst-bot {
        padding-bottom: 0;
        border-right: none;
    }

    .cpst-special-case__container {
        flex-direction: column;
        gap: 8px;
    }

    .cpst-special-case__list-container {
        gap: 8px;
        flex: 1;
    }
}


/* ============================================
   Claims Process Stepper - Desktop Styles
   Figma: 6bvXsvbtfRkoN2vJUzZ07D / 1735:31590
   ============================================ */

/* ---- Section wrapper ---- */
.cps-section {
  max-width: 1094px;
  width: 100%;
  padding: 40px 0;
  box-sizing: border-box;
  margin-inline: auto;
}

/* Hide on mobile when authored */
@media (max-width: 767px) {
  .cps-section--hide-mobile {
    display: none;
  }
}

/* Hide on desktop when authored */
@media (min-width: 768px) {
  .cps-section--hide-desktop {
    display: none;
  }
}

/* ---- Two-column layout: left sidebar + right steps ---- */
.cps-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* ════════════════════════════════
   LEFT PANEL
════════════════════════════════ */
.cps-left {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---- Heading (Poppins Regular 20px #1c2633) ---- */
.cps-heading,
.cps-heading p,
.cps-heading h1,
.cps-heading h2,
.cps-heading h3,
.cps-heading h4 {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #1c2633;
  letter-spacing: 0;
  margin: 0;
}

/* ---- CTA Button (red, white text) ---- */
.cps-btn,
.cps-btn:visited,
.cps-btn:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  background-color: #ed1c24;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(177, 17, 22, 0.12);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  align-self: flex-start;
}

@media (hover: hover) and (pointer: fine) {
  .cps-btn:hover {
    background-color: #c81118;
    text-decoration: none;
    color: #ffffff;
  }
}

/* ════════════════════════════════
   RIGHT PANEL — STEPS
════════════════════════════════ */
.cps-steps {
  flex: 1;
  display: flex;
  position: relative;
  gap: 0;
}

/* ---- Step connector: drawn with pseudo-elements on desktop ---- */

/* ---- Each step ---- */
.cps-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}

/* ---- Step icon ---- */
.cps-step__icon {
  position: relative;
  z-index: 1;
  width: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cps-step__icon img {
  width: 100%;
  height: auto;
  max-height: 68px;
  object-fit: contain;
  display: block;
}

/* Junction dot on the dashed line — right boundary of each step except last */
/* .cps-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px; 
  right: 0;
  transform: translate(50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: #25375B;
  z-index: 3;
} */

/* ---- Step content (RTE): title + description ---- */
.cps-step__content {
  text-align: left;
  width: 100%;
  padding: 0 4px;
}

/* All paragraphs base */
.cps-step__content p {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
}

/* Title: first <p> containing <strong> or <b> — Medium, dark blue */
/* RTE authoring: bold the first paragraph (step number + title) */
.cps-step__content p:first-child {
  font-weight: 500;
  color: #002842;
  margin-bottom: 8px;
  max-width: 202px;
  width: 100%;
}

.cps-step__content p:first-child strong,  
.cps-step__content p:first-child b {
  font-weight: 500;
  color: #002842;
}

/* Description: second <p> and beyond — Regular, gray */
.cps-step__content p:not(:first-child) {
  font-weight: 400;
  color: #717684;
  max-width: 204px;
  width: 100%;
}

/* ════════════════════════════════
   MOBILE  (≤767px)
   Layout: heading → steps (icon-left + text-right) → CTA
   Using display:contents on .cps-left so its children
   become direct flex items of .cps-wrapper and can be
   reordered independently of the steps panel.
════════════════════════════════ */
@media (max-width: 767px) {
  .cps-section {
    padding: 30px 0;
  }

  /* Stack wrapper vertically */
  .cps-wrapper {
    flex-direction: column;
    gap: 0;
  }

  /* Unwrap .cps-left so heading and CTA become direct flex
       children of .cps-wrapper and can be ordered separately */
  .cps-left {
    display: contents;
  }

  /* 1 — Heading at top, centered */
  .cps-heading {
    order: 1;
    text-align: center;
    font-size: 18px;
    line-height: 28px;
    max-width: 285px;
    width: 100%;
    margin: 0 auto 18px auto;
  }

  .cps-heading p,
  .cps-heading h1,
  .cps-heading h2,
  .cps-heading h3,
  .cps-heading h4 {
    font-size: 18px;
    line-height: 28px;
    text-align: center;
  }

  /* 2 — Steps in the middle */
  .cps-steps {
    order: 2;
    flex-direction: column;
    gap: 48px;
  }

  /* Remove desktop horizontal connector line */
  .cps-steps::before {
    display: none;
  }
  /* 3 — CTA button at bottom, full width */
  .cps-btn {
    order: 3;
    width: 100%;
    justify-content: center;
    align-self: stretch;
    margin-top: 20px;
  }

  /* ── Mobile step: icon-left, text-right ── */
  .cps-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    /* padding-bottom: 20px; */
    position: relative;
  }

  .cps-step:last-child {
    padding-bottom: 0;
  }

  /* Icon: fixed width, natural height */
  .cps-step__icon {
    flex: 0 0 68px;
    height: auto;
    align-items: flex-start;
    padding-top: 4px;
  }

  .cps-step__icon img {
    width: 100%;
    height: auto;
    max-height: none;
  }

  /* Content: fill remaining width, text left-aligned */
  .cps-step__content {
    flex: 1;
    text-align: left;
    padding: 0;
    padding-top: 8px;
  }

  .cps-step__content p:first-child {
    margin-bottom: 4px;
    max-width: none;
  }

  .cps-step__content p:not(:first-child) {
    max-width: none;
  }

  .cps-step:nth-child(2)::before, 
  .cps-step:nth-child(3)::before {
    content: '';
    position: absolute;
    height: 4px;
    width: 4px;
    background: #25375B;
    border-radius: 100%;
    top: 7px;
    left: 34px;
    z-index: 3;
}

.cps-step:nth-child(2)::after,
.cps-step:nth-child(1)::before {
    content: '';
    position: absolute;
    height: 4px;
    width: 4px;
    background: #25375B;
    border-radius: 100%;
    top: 88px;
    left: 34px;
    z-index: 3;
}

.cps-step:nth-child(1)::after{
  content: '';
  position: absolute;
  width: 1px;
  height: 40px;
  border: 1px dashed #7590C7;
  left: 35px;
  bottom: -52px;
  z-index: 2;
}

.cps-step:nth-child(3)::after{
  content: '';
  position: absolute;
  width: 1px;
  height: 40px;
  border: 1px dashed #7590C7;
  left: 35px;
  top: -30px;
  z-index: 2;
}

}

/* ════════════════════════════════
   DESKTOP connector (≥768px)
   Dashed line via .cps-steps::before
   Endpoint dots via .cps-step::after (right) and ::before (left)
════════════════════════════════ */
@media (min-width: 768px) {
  /* Full dashed line — spans from centre of icon 1 to centre of icon last */
  .cps-steps::before {
    display: block;
    content: "";
    position: absolute;
    top: 34px;
    left: calc(100% / 13);
    right: calc(100% / 3);
    height: 0;
    border-top: 1.5px dashed #7590C7;
    z-index: 0;
  }

  .cps-step:nth-child(1)::before {
    content: "";
    position: absolute;
    left: 60px;
    top: 34px;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #25375B;
    z-index: 2;
  }
  .cps-step:nth-child(2)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 34px;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #25375B;
    z-index: 2;
  }

  .cps-step:nth-child(2)::after {
    content: "";
    position: absolute;
    left: 71px;
    top: 34px;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #25375B;
    z-index: 2;
  }

  /* Right-edge dot — at the right boundary of steps 1 and 2 */
  .cps-step:nth-child(3)::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 34px;
    bottom: auto;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #25375B;
    border-left: none;
    z-index: 2;
  }
}

/* ===================================
   Claims Type Sidebar - Desktop Styles
   =================================== */

.claims-type-sidebar {
    width: 100%;
    display: flex;
    gap: 66px;
}

@media (max-width: 767px) {
    .claims-type-sidebar {
        gap: 25px;
    }
}

/* Nav Wrapper - vertical sidebar */
.claims-type-sidebar__nav-wrapper {
    min-width: 288px;
    max-width: 25%;
    flex-shrink: 0;
}

/* Nav List - vertical */
.claims-type-sidebar__nav {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    background: #F9FAFB;
}

/* Sidebar Item */
.claims-type-sidebar__item {
    padding: 16px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1c2633;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-bottom: 1px solid #E5E7EB;
    white-space: normal;
    line-height: 20px;
}

.claims-type-sidebar__item:last-child{
    border-bottom: 0;
}

.claims-type-sidebar__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.claims-type-sidebar__item:hover {
    color: #ED1C24;
    background-color: #FFF5F5;
}

.claims-type-sidebar__item.active {
    color: #1c2633;
    font-weight: 500;
    background-color: #fde8e7;
}

.claims-type-sidebar__item.active::before {
    background-color: #ED1C24;
    display: none;
}

/* Sidebar Content */
.claims-type-sidebar__content {
    flex: 1;
    /* padding: 24px 32px; */
    min-width: 0;
}

/* Sidebar Panels */
.claims-type-sidebar__panel {
    display: none;
}

.claims-type-sidebar__panel.active {
    display: block;
}


/* ===================================
   Claims Type Sidebar - Responsive Styles
   =================================== */

@media (max-width: 768px) {
    .claims-type-sidebar {
        flex-direction: column;
    }
    .claims-type-sidebar__nav-wrapper {
        min-width: 100%;
        max-width: 100%;
        border-right: none;
        /* border-bottom: 1px solid #E5E7EB; */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .claims-type-sidebar__nav-wrapper::-webkit-scrollbar {
        display: none;
    }
    .claims-type-sidebar__nav {
        flex-direction: row;
        white-space: nowrap;
        background-color: #ffffff;
        gap: 10px;
    }
    .claims-type-sidebar__item {
        flex-shrink: 0;
        border-bottom: none;
        /* border-right: 1px solid #E5E7EB; */
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        padding: 12px;
        /* white-space: unset; */
        max-width: 278px;
        width: 100%;
        min-height: 84px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        background-color: #f9fafb;
    }
    .claims-type-sidebar__item::before {
        display: none;
    }
    .claims-type-sidebar__item::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0;
        background-color: transparent;
        transition: background-color 0.2s ease;
    }
    .claims-type-sidebar__item.active::after {
        background-color: #ED1C24;
    }
    .claims-type-sidebar__content {
        padding-block: 0;
    }
}


/* ===================================
   Claims Type Tab - Desktop Styles
   =================================== */

.claims-type-tab {
  width: 100%;
}

/* Nav Wrapper - horizontal scroll on overflow */
.claims-type-tab__nav-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 1120px;
  margin: 0px auto;
}

.claims-type-tab__nav-wrapper::-webkit-scrollbar {
  display: none;
}

/* Nav List */
.claims-type-tab__nav {
  display: flex;
  list-style: none;
  margin: 0;
  white-space: nowrap;
  justify-content: flex-start;
}

/* Tab Item */
.claims-type-tab__item {
  padding: 8px 28px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: #0c111d;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  user-select: none;
  transition: color 0.2s ease;
}

.claims-type-tab__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.claims-type-tab__item:hover {
  color: #ed1c24;
}

.claims-type-tab__item.active {
  color: #ed1c24;
  font-weight: 600;
}

.claims-type-tab__item.active::after {
  background-color: #ed1c24;
}

/* Tab Content */
.claims-type-tab__content {
  max-width: 1120px;
  margin-inline: auto;
  margin-top: 30px;
}

/* Tab Panels */
.claims-type-tab__panel {
  display: none;
}

.claims-type-tab__panel.active {
  display: block;
}

/* ===================================
   Claims Type Tab - Responsive Styles
   =================================== */

@media (max-width: 1200px) {
/*     .claims-type-tab__nav {
        padding: 0 50px;
    }
    .claims-type-tab__content {
        padding: 28px 50px;
    } */
}

@media (max-width: 1024px) {
/*     .claims-type-tab__nav {
        padding: 0 40px;
    }
    .claims-type-tab__content {
        padding: 24px 40px;
    }
    .claims-type-tab__item {
        font-size: 14px;
        padding: 12px 18px;
    } */
}

@media (max-width: 768px) {
    .claims-type-tab__nav {
        margin: 0 0 0 20px;
    }

    .claims-type-tab__content {
        margin-inline: 20px;
    }

    .claims-type-tab__item {
        font-size: 14px;
        line-height: 20px;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
 /*    .claims-type-tab__nav {
        padding: 0 16px;
    }
    .claims-type-tab__content {
        padding: 16px;
    }
    .claims-type-tab__item {
        font-size: 13px;
        padding: 10px 12px;
    } */
}


/* ===================================
   Covid19 HomePage Card - Desktop Styles
   Desktop: Image left + Content right
   =================================== */

/* Section Container */
.covid-card {
  width: 100%;
  padding: 60px 0;
  box-sizing: border-box;
}

/* Main Container - Horizontal layout */
.covid-card__container {
  max-width: 1366px;
  max-width: 957px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Image Section */
.covid-card__image-wrapper {
  flex-shrink: 0;
  width: 394px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.covid-card__image {
  max-width: 394px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Content Section */
.covid-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Heading */
.covid-card__content h1,
.covid-card__content h2,
.covid-card__content h3 {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 40px;
  color: #1c2633;
  margin: 0 0 20px 0;
}

/* Body Paragraphs */
.covid-card__content p {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  margin: 0 0 16px 0;
}

/* Italic / Disclaimer text */
.covid-card__content em,
.covid-card__content i,
.covid-card__italic {
  font-style: italic;
  color: #4b5563;
}

/* ===================================
   Covid19 HomePage Card - Responsive Styles
   Mobile: Stacked vertically, centered text
   =================================== */

/* Tablet Landscape */
/* @media (max-width: 1200px) {
    .covid-card__container {
        padding: 0 50px;
        gap: 48px;
    }

    .covid-card__image-wrapper {
        width: 280px;
    }

    .covid-card__image {
        max-width: 280px;
    }
} */

/* Tablet Portrait */
/* @media (max-width: 1024px) {
    .covid-card {
        padding: 50px 0;
    }

    .covid-card__container {
        padding: 0 40px;
        gap: 40px;
    }

    .covid-card__image-wrapper {
        width: 260px;
    }

    .covid-card__image {
        max-width: 260px;
    }

    .covid-card__content h1,
    .covid-card__content h2,
    .covid-card__content h3 {
        font-size: 24px;
    }

    .covid-card__content p {
        font-size: 13px;
    }
} */

/* Mobile Landscape & Small Tablets */
@media (max-width: 768px) {
    .covid-card {
        padding: 0 28px 30px 28px;
    }

    /* Stack vertically, center everything */
    .covid-card__container {
        padding: 0;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .covid-card__image-wrapper {
        width: 220px;
    }

    .covid-card__image {
        max-width: 220px;
    }

    .covid-card__content {
        text-align: center;
    }

    .covid-card__content h1,
    .covid-card__content h2,
    .covid-card__content h3 {
        font-size: 24px;
        line-height: 36px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .covid-card__content p {
        font-size: 14px;
        line-height: 20px;
    }
}

/* Mobile Portrait */
/* @media (max-width: 480px) {
    .covid-card {
        padding: 32px 0;
    }

    .covid-card__container {
        padding: 0 20px;
        gap: 24px;
    }

    .covid-card__image-wrapper {
        width: 200px;
    }

    .covid-card__image {
        max-width: 200px;
    }

    .covid-card__content h1,
    .covid-card__content h2,
    .covid-card__content h3 {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .covid-card__content p {
        font-size: 13px;
    }
}
 */
/* Optimized for 360px Mobile Viewport */
/* @media (max-width: 360px) {
    .covid-card {
        padding: 28px 0;
    }

    .covid-card__container {
        padding: 0 16px;
        gap: 20px;
    }

    .covid-card__image-wrapper {
        width: 180px;
    }

    .covid-card__image {
        max-width: 180px;
    }

    .covid-card__content h1,
    .covid-card__content h2,
    .covid-card__content h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .covid-card__content p {
        font-size: 12px;
        line-height: 1.6;
    }
} */

/* ============================================
   Claims Accordion
   Figma: 6bvXsvbtfRkoN2vJUzZ07D / 1735:31546
   ============================================ */

/* ---- Section wrapper ---- */
.dca-section {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  margin-bottom: 20px;
}

/* ---- Accordion list ---- */
.dca-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Each accordion item (<details>) ---- */
.dca-item {
  border: 1px solid #e5e9f0;
  box-sizing: border-box;
  border-radius: 12px;
  padding-left: 31px;
  padding-right: 20px;
  padding-top: 22px;
  padding-bottom: 21px;
  overflow: hidden;
}

.dca-item:first-child {
  border-top: 1px solid #e5e9f0;
}

/* Remove native browser triangle from <summary> */
.dca-item summary {
  list-style: none;
}
.dca-item summary::-webkit-details-marker {
  display: none;
}

/* ---- Header row (<summary>) ---- */
.dca-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.dca-header:focus-visible {
  outline: 2px solid #0093f5;
  outline-offset: 2px;
}

/* ---- Question text ---- */
.dca-question {
  flex: 1 0 0;
  min-width: 0;
}

.dca-question,
.dca-question p,
.dca-question h1,
.dca-question h2,
.dca-question h3,
.dca-question h4,
.dca-question h5,
.dca-question h6 {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #1c2633;
  letter-spacing: 0;
  margin: 0;
}

/* ---- Chevron icon ---- */
.dca-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chevron points down (closed) */
.dca-chevron::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid #1c2633;
  border-bottom: 2px solid #1c2633;
  border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -4px);
  transition: transform 0.25s ease;
}

/* Chevron points up when open — <details> native open state */
.dca-item[open] .dca-chevron::before {
  transform: rotate(-135deg) translate(-2px, 2px);
}

/* Chevron points up when open — JS-driven aria-expanded */
.dca-header[aria-expanded="true"] .dca-chevron::before {
  transform: rotate(-135deg) translate(-2px, 2px);
}

/* ---- Answer body ---- */
.dca-body {
  /* padding: 0 0 20px 0; */
}

.dca-body[hidden] {
  display: none;
}

.dca-body span.ans-label{
  font-weight: 500;
}

.dca-body,
.dca-body p,
.dca-body li,
.dca-body span {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  letter-spacing: 0;
}

.dca-body p {
  margin: 0 0 8px 0;
}

.dca-body p:last-child {
  margin-bottom: 0;
}

.dca-body a {
  color: #0093f5;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  word-break: break-all;
  overflow-wrap: break-word;
}

.dca-body a:hover {
  text-decoration: underline;
}

.dca-body ul,
.dca-body ol {
  padding-left: 20px;
  margin: 0 0 8px 0;
}

.dca-body hr {
  margin-block: 16px;
  border: none;
  border-top: 1px dashed #717684;
}

/* ---- Sub-items row (pipe-separated labels below the answer) ---- */
.dca-subitems,
.dca-subitems span {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #4b5563;
}
/* ============================================
   Claims Accordion - Responsive Styles
   Figma mobile: 6bvXsvbtfRkoN2vJUzZ07D / 1735:34904
   ============================================ */

@media (max-width: 768px) {

    /* ---- Switch to card layout ---- */
    .dca-list {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .dca-item {
        border: 1px solid #c9d3e9;
        border-top: 1px solid #c9d3e9;
        border-radius: 12px;
        padding: 16px;
        background: #ffffff;
        overflow: hidden;
    }

    /* Remove flat-list border overrides for card style */
    .dca-item:first-child {
        border-top: 1px solid #c9d3e9;
    }

    /* ---- Header ---- */
    .dca-header {
        gap: 12px;
        padding: 0;
        margin-bottom: 0;
    }

    /* ---- Question text ---- */
    .dca-question,
    .dca-question p,
    .dca-question h1,
    .dca-question h2,
    .dca-question h3,
    .dca-question h4,
    .dca-question h5,
    .dca-question h6 {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
    }

    /* ---- Answer body ---- */
    .dca-body {
        padding: 20px 0 0 0;
    }

    .dca-body,
    .dca-body p,
    .dca-body li,
    .dca-body span {
        font-size: 14px;
        line-height: 20px;
    }

    .dca-body a {
        font-size: 14px;
        line-height: 20px;
    }

    .dca-subitems,
    .dca-subitems span {
        font-size: 10px;
        line-height: 16px;
    }
}

/* ============================================================
   Document Required Card  —  hdfcl-drc
   BEM prefix : drc__*
   Approach   : Mobile-first → desktop at min-width: 768px
   Variables  : scoped to .drc (overridden at 768px for dot colors)
   ============================================================ */

/* ── Design tokens (scoped to component root) ──────────────── */
.drc {
  /* Colors */
  --drc-bg: #f0e8fd;
  --drc-border: #f4f6fb;
  --drc-tab-active-bg: #deccfa;
  --drc-tab-active-ring: #546ffa;
  --drc-alert-bg: #fedb89;
  --drc-heading: #1c2633;
  --drc-tp-bg: #4b5563;
  --drc-section-title: #374254;
  --drc-text: #4b5563;
  --drc-footnote: #717684;
  --drc-link: #0057e5;
  --drc-dot: #ed1c24; /* default mandatory dot — red mobile */
  --drc-dot-red: #ed1c24;
  --drc-dot-blue: #0093F5; /* same as red on mobile; overridden at 768px */
  --drc-dot-grey: #717684;
  --drc-divider: #e5e9f2;
  --drc-divider-border: #a4b6dA;
  --drc-surface: #ffffff;
  --drc-focus: #546ffa;
  /* Typography */
  --drc-font: "Poppins", sans-serif;
  /* Radii */
  --drc-radius-wrap: 18px;
  --drc-radius-tab: 8px;
  --drc-radius-alert: 4px;
}

/* ── Scoped box-sizing reset ────────────────────────────────── */
.drc,
.drc *,
.drc *::before,
.drc *::after {
  box-sizing: border-box;
}

/* ── Section wrapper ────────────────────────────────────────── */
.drc {
  font-family: var(--drc-font);
  background: var(--drc-bg);
  border: 1px solid var(--drc-border);
  border-radius: var(--drc-radius-wrap);
  padding: 20px;
  max-width: 1129px;
  margin: auto;
}

/* ── Header ─────────────────────────────────────────────────── */
.drc__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.drc__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: var(--drc-heading);
  letter-spacing: 0;
  margin: 0;
}

.drc__subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--drc-text);
  letter-spacing: 0;
  margin: 0;
}

/* ── Layout ─────────────────────────────────────────────────── */
.drc__layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Tab list — mobile: horizontal scroll cards ─────────────── */
.drc__tablist {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.drc__tablist::-webkit-scrollbar {
  display: none;
}

/* ── Tab card (mobile) ──────────────────────────────────────── */
.drc__tab {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  flex-shrink: 0;
  min-width: 260px;
  padding: 12px;
  background: var(--drc-surface);
  border: 1px solid transparent;
  border-radius: var(--drc-radius-tab);
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  max-width: 278px;
}

.drc__tab:focus-visible {
  outline: 2px solid var(--drc-focus);
  outline-offset: 2px;
}

.drc__tab--active {
  background: var(--drc-tab-active-bg);
  border-color: var(--drc-tab-active-ring);
}

.drc__tab-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--drc-heading);
  display: block;
}

.drc__tab-desc {
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: var(--drc-text);
  display: block;
}

/* ── Panels ─────────────────────────────────────────────────── */
.drc__panels {
  flex: 1;
  min-width: 0;
}

.drc__panel--hidden {
  display: none;
}

/* ── Alert banner ───────────────────────────────────────────── */
.drc__alert {
  background: var(--drc-alert-bg);
  border-radius: var(--drc-radius-alert);
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  color: var(--drc-text);
  margin-bottom: 16px;
  text-align: center;
}

.drc__alert-label {
  font-weight: 600;
  font-size: 11px;
}

/* ── Two-column docs grid ───────────────────────────────────── */
.drc__docs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Divider between sections on mobile ─────────────────────── */
.drc__section-divider {
  height: 2px;
  background: var(--drc-divider);
  margin: 16px 0;
}

/* ── Section (Mandatory / Additional) ──────────────────────── */
.drc__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  /* border-radius: var(--drc-radius-tab); */
  border-bottom: 2px solid var(--drc-tab-active-bg);
}

.drc__section:last-child {
  border-bottom: none;
}

.drc__section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.drc__section-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--drc-section-title);
  letter-spacing: 0;
  margin: 0;
}

/* ── Accordion toggle (mobile only) ────────────────────────── */
.drc__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 20px;
  background: var(--drc-surface);
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--drc-section-title);
}

.drc__toggle svg {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform 0.2s ease;
}

.drc__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.drc__toggle:focus-visible {
  outline: 2px solid var(--drc-focus);
  outline-offset: 2px;
}

.drc__section--collapsed .drc__list {
  display: none;
}

/* ── Document list (RTE content wrapper) ───────────────────── */
.drc__list {
  margin: 0;
}

.drc__list ul,
.drc__list ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.drc__list ul li + li,
.drc__list ol li + li {
  border-top: 1px dashed var(--drc-divider-border);
}

.drc__list li {
  --drc-li-pad-top: 10px; /* tracks padding-top — used by drc-has-tip::before for dot offset */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--drc-text);
  letter-spacing: 0;
  padding-block: 10px;
}

.drc__list li::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--drc-dot);
  margin-top: 6px; /* (line-height 16px - dot 4px) / 2 — centers dot with first text line */
}

.drc__list a {
  color: var(--drc-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.drc__list a:focus-visible {
  outline: 2px solid var(--drc-dot-red);
  border-radius: 2px;
}

.drc__list p {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--drc-text);
  margin: 0;
}

/* ── List item dot-colour variants ─────────────────────────── */
/* Usage: <li class="drc-dot--red">   / --blue / --grey         */
.drc__list li.drc-dot--red::before {
  background: var(--drc-dot-red);
}
.drc__list li.drc-dot--blue::before {
  background: var(--drc-dot-blue);
}
.drc__list li.drc-dot--grey::before {
  background: var(--drc-dot-grey);
}

/* ── Tooltip variant ────────────────────────────────────────── */
/* Usage: <li class="drc-has-tip">text <span class="drc-tip">tooltip content</span></li> */
.drc__list li.drc-has-tip {
  display: block;        /* text + icon share the same inline flow */
  position: relative;
  padding-left: 14px;   /* 2px offset + 4px dot + 8px gap equivalent */
  gap: 0;
}

.drc__list li.drc-has-tip::before {
  position: absolute;
  left: 2px;
  top: calc(var(--drc-li-pad-top, 0px) + 6px); /* padding-top + center in first line */
  margin-top: 0;
}

.drc-tip {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}

.drc-tip::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'><path d='M7.5 0C6.01664 0 4.56659 0.439867 3.33323 1.26398C2.09986 2.08809 1.13856 3.25943 0.570907 4.62987C0.00324963 6.00032 -0.145275 7.50832 0.144114 8.96318C0.433503 10.418 1.14781 11.7544 2.1967 12.8033C3.2456 13.8522 4.58197 14.5665 6.03682 14.8559C7.49168 15.1453 8.99968 14.9968 10.3701 14.4291C11.7406 13.8614 12.9119 12.9001 13.736 11.6668C14.5601 10.4334 15 8.98336 15 7.5C14.9979 5.51152 14.207 3.60509 12.801 2.19902C11.3949 0.79295 9.48848 0.00209987 7.5 0ZM7.5 13.8462C6.24485 13.8462 5.01789 13.474 3.97427 12.7766C2.93065 12.0793 2.11725 11.0882 1.63692 9.92857C1.1566 8.76896 1.03092 7.49296 1.27579 6.26193C1.52066 5.03089 2.12507 3.90012 3.01259 3.01259C3.90012 2.12507 5.0309 1.52065 6.26193 1.27579C7.49296 1.03092 8.76896 1.15659 9.92857 1.63692C11.0882 2.11724 12.0793 2.93065 12.7766 3.97426C13.474 5.01788 13.8462 6.24485 13.8462 7.5C13.8442 9.18252 13.175 10.7956 11.9853 11.9853C10.7956 13.175 9.18252 13.8442 7.5 13.8462ZM8.65385 10.9615C8.65385 11.1145 8.59307 11.2613 8.48487 11.3695C8.37668 11.4777 8.22993 11.5385 8.07693 11.5385C7.77091 11.5385 7.47742 11.4169 7.26103 11.2005C7.04464 10.9841 6.92308 10.6906 6.92308 10.3846V7.5C6.77007 7.5 6.62333 7.43922 6.51513 7.33102C6.40694 7.22283 6.34616 7.07609 6.34616 6.92308C6.34616 6.77007 6.40694 6.62332 6.51513 6.51513C6.62333 6.40694 6.77007 6.34615 6.92308 6.34615C7.2291 6.34615 7.52258 6.46772 7.73897 6.68411C7.95536 6.90049 8.07693 7.19398 8.07693 7.5V10.3846C8.22993 10.3846 8.37668 10.4454 8.48487 10.5536C8.59307 10.6618 8.65385 10.8085 8.65385 10.9615ZM6.34616 4.32692C6.34616 4.15577 6.39691 3.98845 6.492 3.84614C6.58709 3.70383 6.72224 3.59291 6.88037 3.52741C7.0385 3.46191 7.2125 3.44477 7.38037 3.47817C7.54824 3.51156 7.70243 3.59398 7.82346 3.715C7.94449 3.83603 8.02691 3.99023 8.0603 4.15809C8.09369 4.32596 8.07655 4.49996 8.01105 4.65809C7.94555 4.81622 7.83463 4.95137 7.69232 5.04646C7.55001 5.14155 7.3827 5.19231 7.21154 5.19231C6.98203 5.19231 6.76191 5.10113 6.59962 4.93884C6.43733 4.77655 6.34616 4.55644 6.34616 4.32692Z' fill='%23374254'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.drc-tip::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  padding: 8px 10px;
  background: var(--drc-tp-bg);
  color: var(--drc-surface);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  border-radius: 6px;
  z-index: 10;
  text-align: left;
  pointer-events: none;
  font-style: normal;
  font-family: var(--drc-font);
  white-space: normal;
}

@media (hover: hover) and (pointer: fine) {
  .drc-tip:hover::after,
  .drc-tip:focus::after {
    display: block;
  }
}

/* ── Sub-sections A & B ─────────────────────────────────────── */
.drc__subsections {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.drc__subsection {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drc__sub-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--drc-heading);
  letter-spacing: 0;
  margin: 0;
}

/* ── Footnote ───────────────────────────────────────────────── */
.drc__footnote {
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: var(--drc-footnote);
  letter-spacing: 0;
  margin-top: 20px;
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   Desktop ≥ 768px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Override dot-color tokens for desktop */
  .drc {
    --drc-dot: #4b5563; /* mandatory: grey on desktop */
    --drc-dot-grey: #4b5563;
    /* --drc-dot-blue: #354f83; blue-indigo on desktop */
  }

  .drc {
    padding: 32px 36px;
    border-radius: 12px;
    margin: 0 auto;
  }

  .drc__header {
    margin-bottom: 24px;
  }

  .drc__title {
    font-size: 20px;
    font-weight: 400;
  }

  /* Layout: sidebar + panels */
  .drc__layout {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
  }

  /* Tab list: vertical sidebar */
  .drc__tablist {
    flex-direction: column;
    overflow: visible;
    flex-shrink: 0;
    width: 288px;
    max-width: 288px;
    max-height: 404px;
    overflow-y: auto;
    gap: 0;
    padding-bottom: 0;
    scroll-snap-type: none;
    background: var(--drc-border);
    border-radius: 12px;
  }

  .drc__tab {
    width: 100%;
    min-width: 0;
    max-width: 288px;
    padding: 16px 16px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    gap: 4px;
    scroll-snap-align: none;
    position: relative;
  }

  .drc__tab + .drc__tab::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--drc-divider);
  }

  .drc__tab--active {
    background: var(--drc-tab-active-bg);
    border: none;
  }

  .drc__tab-name {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }

  .drc__tab-desc {
    display: none;
    font-size: 12px;
    line-height: 16px;
    padding-bottom: 16px;
  }

  .drc__tab--active .drc__tab-desc {
    display: block;
  }

  .drc__tab:not(.drc__tab--active) .drc__tab-name {
    padding-bottom: 16px;
  }

  /* Panels */
  .drc__panels {
    flex: 1;
    min-width: 0;
    padding-left: 28px;
    border-left: 1px solid var(--drc-divider);
  }

  .drc__alert {
    font-size: 12px;
    text-align: center;
    margin-bottom: 20px;
  }

  .drc__alert-label {
    font-size: 12px;
  }

  /* Responsive docs grid — 1 to 4 columns depending on authored lists */
  .drc__docs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 48px;
    align-items: start;
  }

  .drc__section-divider {
    display: none;
  }

  .drc__section {
    padding: 0;
    gap: 12px;
    border-bottom: 0;
  }

  .drc__section-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
  }

  .drc__toggle {
    display: none;
  }

  .drc__section--collapsed .drc__list {
    display: block !important;
  }

  /* Sub-sections: 2 columns */
  .drc__subsections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 28px;
  }

  .drc__sub-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
  }

  .drc__footnote {
    margin-top: 28px;
  }

  .drc__list li {
    --drc-li-pad-top: 16px;
    padding-block: 16px;
  }
}

/* ── Mobile tooltip bottom-sheet popup ──────────────────────── */
.drc-tip-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  touch-action: none;
}

.drc-tip-scrim--visible {
  display: block;
}

.drc-tip-popup {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  z-index: 101;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.drc-tip-popup--visible {
  display: block;
}

.drc-tip-popup__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 24px 0;
}

.drc-tip-popup__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #1c2633;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  color: #1c2633;
  font-family: Georgia, serif;
  line-height: 1;
}

.drc-tip-popup__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #1c2633;
  letter-spacing: 0;
  margin: 0;
}

.drc-tip-popup__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #475467;
  margin: 8px 24px 0;
  padding-bottom: 4px;
}

.drc-tip-popup__actions {
  padding: 4px 24px 28px;
}

.drc-tip-popup__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 20px;
  background: #ed1c24;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border: none;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(177, 17, 22, 0.12);
  cursor: pointer;
  font-family: var(--drc-font);
  letter-spacing: 0;
}

/* ============================================================
   Download Document Component — hdfcl-dldoc
   Ported from Figma prototype (styles.css) with scoped BEM prefix
   ============================================================ */

.hdfcl-dldoc {
  --font-family-base: "Poppins", "Segoe UI", sans-serif;
  --color-bg-soft: #f4f8fe;
  --color-surface: #ffffff;
  --color-text: #1c2633;
  --color-text-muted: #4b5563;
  --color-border: #c9d3e9;
  --color-divider: #d2deef;
  --color-icon: #ed1c24;
  --color-icon-ring: #98a2b3;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  width: min(720px, calc(100% - 32px));
  margin: 24px auto;
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  padding: 30px;
  font-family: var(--font-family-base);
  color: var(--color-text);
  box-sizing: border-box;
  height: 100%;
}

.hdfcl-dldoc *,
.hdfcl-dldoc *::before,
.hdfcl-dldoc *::after {
  box-sizing: border-box;
}

/* ── Mobile panel hidden on desktop ── */
.hdfcl-dldoc__mobile {
  display: none;
}

/* ── Header ─────────────────────────────────────── */
.hdfcl-dldoc__header {
  display: grid;
  gap: 30px;
}

.hdfcl-dldoc__header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hdfcl-dldoc__title {
  margin: 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 600;
  color: var(--color-text);
}

/* ── Custom select / dropdown ────────────────────── */
.hdfcl-dldoc__select {
  position: relative;
}

.hdfcl-dldoc__select-trigger {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  min-height: 68px;
  padding: 20px;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  text-transform: capitalize;
}

.hdfcl-dldoc__select-chevron {
  color: #475467;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.hdfcl-dldoc__select.is-open .hdfcl-dldoc__select-chevron {
  transform: rotate(180deg);
}

.hdfcl-dldoc__select-menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}

.hdfcl-dldoc__select-option {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 10px 12px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
  cursor: pointer;
  text-transform: capitalize;
}

.hdfcl-dldoc__select-option:hover,
.hdfcl-dldoc__select-option.is-active {
  background: #eef3fc;
}

/* ── Desktop document table ──────────────────────── */
.hdfcl-dldoc__table {
  margin-top: 30px;
  max-height: 402px;
  overflow: auto;
  padding-right: 16px;
}

.hdfcl-dldoc__table::-webkit-scrollbar {
  width: 3px;
}

.hdfcl-dldoc__table::-webkit-scrollbar-track {
  background: #d9d9d9;
  border-radius: 4px;
}

.hdfcl-dldoc__table::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 4px;
}

.hdfcl-dldoc__row {
  /* min-height: 52px; */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px dashed var(--color-divider);
}

.hdfcl-dldoc__row:first-child{
  padding-top: 0;
}

.hdfcl-dldoc__row:last-child{
  padding-bottom: 0;
}

.hdfcl-dldoc__row:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.hdfcl-dldoc__row-name {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
  font-weight: 400;
}

.hdfcl-dldoc__row-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.hdfcl-dldoc__icon-action {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon);
  text-decoration: none;
}

.hdfcl-dldoc__icon-action svg {
  width: 22px;
  height: 22px;
}

.hdfcl-dldoc__empty {
  margin: 0;
  padding: 20px 0;
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Mobile list ─────────────────────────────────── */
.hdfcl-dldoc__mobile-list {
  display: grid;
  gap: 16px;
}

.hdfcl-dldoc__mobile-card {
  border: 1px solid #e6ebf5;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 20px;
}

.hdfcl-dldoc__mobile-card-header {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
}

.hdfcl-dldoc__mobile-card-title {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  text-align: left;
  text-transform: capitalize;
}

.hdfcl-dldoc__mobile-card-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-icon-ring);
  border-radius: 999px;
  color: var(--color-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hdfcl-dldoc__mobile-card-toggle svg {
  width: 18px;
  height: 18px;
}

.hdfcl-dldoc__mobile-card-body {
  margin-top: 30px;
}

.hdfcl-dldoc__mobile-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
 padding-block: 20px;
  border-bottom: 1px dashed var(--color-divider);
}

.hdfcl-dldoc__mobile-row:first-child {
  padding-top: 0;
}

.hdfcl-dldoc__mobile-row:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.hdfcl-dldoc__mobile-row-name {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
  font-weight: 400;
}

.hdfcl-dldoc__mobile-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 767px) {
  .hdfcl-dldoc {
    width: 100%;
    padding: 30px 20px;
    margin: 0;
  }

  .hdfcl-dldoc__desktop {
    display: none;
  }

  .hdfcl-dldoc__mobile {
    display: block;
  }

  .hdfcl-dldoc__mobile-header .hdfcl-dldoc__title {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 20px;
  }
}

/* ── Side-by-side layout inside .download_and_track_claim container ─────────────
   Desktop : downloadDocument (flex:1) left, trackClaim (352px) right, 40px gap.
   Mobile  : single column, trackClaim on top (order:-1), 30px gap. ── */

/* Mobile ── stack column, trackClaim first, 30px gap */
@media (max-width: 767px) {
  /* .download_and_track_claim .cmp-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
  } */
}

/* Desktop ── flex row, downloadDocument fills remaining space */
@media (min-width: 768px) {
  /* .download_and_track_claim .cmp-container {
    display: flex;
    gap: 40px;
  } */

  .download_and_track_claim .downloadDocument {
    flex: 1 1 0;
    min-width: 0;
  }

  .download_and_track_claim .downloadDocument .hdfcl-dldoc {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

/* ============================================================
   Email Modal — hdfcl-dldoc-modal (custom, no Bootstrap)
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────── */
/* All layout / positioning applied by JS openModal() via
   style.setProperty(prop, val, 'important') — the only approach
   that works even when a parent has transform/filter/will-change
   (common in AEM pages), which otherwise breaks position:fixed. */

/* Ensure the modal is invisible before JS initialises */
#download-brochure-claim[hidden] {
  display: none !important;
}

/* ── Backdrop ────────────────────────────────────────────── */
.hdfcl-dldoc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* ── Panel ───────────────────────────────────────────────── */
/* Desktop: scale-in animation */
@keyframes hdfcl-dldoc-panel-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mobile: slide-up animation */
@keyframes hdfcl-dldoc-panel-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.hdfcl-dldoc-modal__panel {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 24px;  
  max-width: 592px;
  width: 100%;
  margin: 16px;
  overflow: hidden;
  animation: hdfcl-dldoc-panel-in 0.2s ease;
}

/* ── Screen wrapper ──────────────────────────────────────── */
.hdfcl-dldoc-modal__screen {
  padding: 30px 30px 40px 30px;
  font-family: "Poppins", sans-serif;
}

/* ── Form screen header ──────────────────────────────────── */
.hdfcl-dldoc-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 30px;
}

.hdfcl-dldoc-modal__title {
  margin: 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 600;
  color: #1c2633;
  width: 100%;
}

.hdfcl-dldoc-modal__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.hdfcl-dldoc-modal__close--abs {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 28px;
  height: 28px;
}

/* ── Form body ───────────────────────────────────────────── */
.hdfcl-dldoc-modal__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 422px;
  margin: 0 auto;
}

.hdfcl-dldoc-modal__field {
  width: 100%;
}

.hdfcl-dldoc-modal__label {
  display: block;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 4px;
  font-family: "Poppins", sans-serif;
}

.hdfcl-dldoc-modal__field.is-error .hdfcl-dldoc-modal__label {
  color: #cc150f;
}

.hdfcl-dldoc-modal__input {
  width: 100%;
  height: 48px;
  border: 1px solid #c9d3e9;
  border-radius: 8px;
  padding: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #1c2633;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(12, 17, 29, 0.05);
  outline: none;
  box-sizing: border-box;
  display: block;
}

.hdfcl-dldoc-modal__input::placeholder {
  color: #9ca3af;
}

.hdfcl-dldoc-modal__input:focus {
  border-color: #7b9cf4;
}

.hdfcl-dldoc-modal__field.is-error .hdfcl-dldoc-modal__input {
  border-color: #f5837f;
  background: #fef1f1;
}

.hdfcl-dldoc-modal__error-msg {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #cc150f;
  font-family: "Poppins", sans-serif;
}

.hdfcl-dldoc-modal__error-msg svg {
  flex-shrink: 0;
}

/* ── Send button ─────────────────────────────────────────── */
.hdfcl-dldoc-modal__send {
  width: 100%;
  padding: 8px 20px;
  background: #ed1c24;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(177, 17, 22, 0.12);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.hdfcl-dldoc-modal__send.is-disabled,
.hdfcl-dldoc-modal__send:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  box-shadow: 0 1px 2px rgba(28, 38, 51, 0.04);
  cursor: not-allowed;
}

/* ── Success screen ──────────────────────────────────────── */
/* :not([hidden]) ensures display:flex does not override the hidden attribute */
.hdfcl-dldoc-modal__screen--success:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  position: relative;
  padding-top: 34px;
  padding-bottom: 46px;
}

.hdfcl-dldoc-modal__success-illus {
  margin-bottom: 10px;
}

.hdfcl-dldoc-modal__success-title {
  margin: 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 600;
  color: #1c2633;
  font-family: "Poppins", sans-serif;
}

.hdfcl-dldoc-modal__success-sub {
  margin: 0;
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  color: #4b5563;
  font-family: "Poppins", sans-serif;
}

/* ── Mobile: bottom sheet ────────────────────────────────── */
/* Mobile align-items (flex-end) is set by JS in openModal() based on window.innerWidth */
@media (max-width: 767px) {
  .hdfcl-dldoc-modal__panel {
    width: 100%;
    margin: 0;
    border-radius: 20px 20px 0 0;
    animation: hdfcl-dldoc-panel-slide-up 0.35s ease;
  }

  .hdfcl-dldoc-modal__screen {
    padding: 24px 20px 20px;
  }

  .hdfcl-dldoc-modal__screen--success:not([hidden]){
    padding-bottom: 30px;
    padding-top: 20px;
    gap: 0;
  }

  .hdfcl-dldoc-modal__title {
    font-size: 20px;
    line-height: 28px;
    max-width: calc(100% - 52px);
  }

  /* Bordered close button on mobile */
  .hdfcl-dldoc-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: auto;
    height: auto;
    padding: 6px;
    border: 1px solid #d2d5da;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(28, 38, 51, 0.04);
  }

  .hdfcl-dldoc-modal__success-title {
    font-size: 18px;
    line-height: 28px;
    white-space: normal;
    margin: 0 0 4px 0;
  }

  .hdfcl-dldoc-modal__success-illus{
    margin-bottom: 30px;
  }
  .hdfcl-dldoc-modal__success-sub {
    font-size: 14px;
    line-height: 20px;
  }

  .hdfcl-dldoc-modal__success-illus svg {
    width: 160px;
    height: auto;
  }
}

/*
 * HDFC Life Claims — Docs Required With Accordion
 * Component: docsRequiredWithAccordion
 * Prefix: dra  (BEM)
 *
 * Variants supported:
 *   • Tabbed panels / single panel (no tabs)
 *   • Accordion body: Rich Text (ol · ul · p · strong · a · table)
 *   • Accordion body: Check/Cross table (2-col or 4-col)
 *   • Optional intro banner per panel
 *   • Show More / Show Less per panel
 *
 * Responsive: mobile-first, desktop at min-width: 768px
 */

/* ─── Section wrapper ────────────────────────────────────────────── */
.dra {
  font-family: "Poppins", sans-serif;
  background: #ffffff;
  border: 1px solid #e5e9f2;
  border-radius: 12px;
  box-shadow: 0 0 14px 0 rgba(33, 8, 74, 0.08);
  padding: 30px 20px;
}

/* ─── Title ──────────────────────────────────────────────────────── */
/* ─── Title + Subtitle wrapper ──────────────────────────────────── */
.dra__hdr {
  margin-bottom: 20px;
}

.dra__title {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #1c2633;
  margin-bottom: 8px;
}

/* ─── Subtitle ───────────────────────────────────────────────────── */
.dra__subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #4B5563;
  margin-bottom: 0;
}

/* ─── Tab switcher ───────────────────────────────────────────────── */
.dra__tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.dra__tab {
  flex: 1;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #0c111d;
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s;
  max-width: fit-content;
  width: 100%;
}

.dra__tab--active {
  border-color: #ed1c24;
  color: #ed1c24;
}

/* ─── Tab panels ─────────────────────────────────────────────────── */
.dra__panel--hidden {
  display: none;
}

/* ─── Intro banner ───────────────────────────────────────────────── */
.dra__intro {
  /* background: #f4f6fb; */
  /* border-radius: 8px; */
  padding: 0;
  margin-bottom: 12px;
}

/* Style RTE output within the intro banner */
.dra__intro p {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #374254;
}

.dra__intro ul,
.dra__intro ol {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dra__intro li {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #4b5563;
}

/* ─── Accordion list ─────────────────────────────────────────────── */
.dra__accordion-list {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* ─── Single accordion item ──────────────────────────────────────── */
.dra__item {
  border-bottom: 1px dashed #c9d3e9;
}

.dra__item:last-child {
  border-bottom: none;
}

/* ─── Accordion header button ────────────────────────────────────── */
.dra__item-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.dra__item:first-child .dra__item-hdr {
  padding-top: 0;
}

.dra__item:last-child:not(.dra__item--open) .dra__item-hdr {
  padding-bottom: 0;
}

.dra__item-label {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #374254;
  flex: 1;
}

/* Open state: bold label */
.dra__item--open .dra__item-label {
  font-weight: 600;
}

/* ─── Circle icon (plus / minus) ────────────────────────────────── */
.dra__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid #717684;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dra__icon svg {
  width: 18px;
  height: 18px;
}

/* Default: show plus, hide minus */
.dra__icon-plus {
  display: block;
}
.dra__icon-minus {
  display: none;
}

/* Open: show minus, hide plus */
.dra__item--open .dra__icon-plus {
  display: none;
}
.dra__item--open .dra__icon-minus {
  display: block;
}

/* ─── Accordion body ─────────────────────────────────────────────── */
/* Visibility is driven purely by the parent .dra__item--open class  */
.dra__item-body {
  display: none;
  padding-bottom: 20px;
}

.dra__item:last-child .dra__item-body {
  padding-bottom: 0;
}

.dra__item--open .dra__item-body {
  display: block;
}

/* ─────────────────────────────────────────────────────────────────
   RTE-rendered content inside accordion body
   Styles plain HTML elements that AEM RTE outputs (no classes)
   ───────────────────────────────────────────────────────────────── */

/* Ordered list */
.dra__item-body ol {
  list-style: decimal;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

/* Unordered list */
.dra__item-body ul {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.dra__item-body li {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #4b5563;
}

/* AEM RTE on some instances wraps <li> content in a <p> — neutralise it */
.dra__item-body li > p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Paragraph — condolence / intro text */
.dra__item-body p {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #4b5563;
  margin-bottom: 10px;
}

/* Bold text — group sub-heading */
.dra__item-body strong,
.dra__item-body b {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #374254;
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
}

/* Links */
.dra__item-body a {
  color: #186cf2;
  text-decoration: none;
}

.dra__item-body a:hover {
  text-decoration: underline;
}

/* Data tables (authored via RTE table plugin) */
.dra__item-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #4b5563;
  margin-top: 12px;
  margin-bottom: 8px;
  min-width: 400px;
}

.dra__item-body th {
  /* background: #f4f6fb; */
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #374254;
  padding: 8px 10px;
  text-align: left;
  width: 29%;
}

.dra__item-body td {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #4b5563;
  padding: 10px 10px;
  border-bottom: 1px solid #bdeaf9;
  vertical-align: top;
}

/* ─── Show More / Show Less ──────────────────────────────────────── */
.dra__show-more {
  display: block;
  margin: 16px auto 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #186cf2;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
}

/* ─── Table wrapper (check/cross table) ──────────────────────────── */
.dra__table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dra__table-wrap--mt {
  margin-top: 16px;
}

/* ─── Check / Cross table ────────────────────────────────────────── */
.dra__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: #4b5563;
}

/* ── Column width utilities (author via class on td/th) ── */
.wp-10 { width: 10% !important; }
.wp-15 { width: 15% !important; }
.wp-20 { width: 20% !important; }
.wp-25 { width: 25% !important; }
.wp-30 { width: 30% !important; }
.wp-35 { width: 35% !important; }
.wp-40 { width: 40% !important; }
.wp-45 { width: 45% !important; }
.wp-50 { width: 50% !important; }
.wp-55 { width: 55% !important; }
.wp-60 { width: 60% !important; }
.wp-65 { width: 65% !important; }
.wp-70 { width: 70% !important; }
.wp-75 { width: 75% !important; }
.wp-80 { width: 80% !important; }
.tc { text-align: center !important; }
.tl { text-align: left !important; }
.tr { text-align: right !important; }


/* Mobile column widths — driven by data-col attribute set by JS */
@media (max-width: 767px) {
  .dra__table[data-col="3"] { width: 175% !important; }
  .dra__table[data-col="4"] { width: 200% !important; }
  .dra__table[data-col="5"] { width: 250% !important; }
}

/* 4-column layout */
.dra__table--4col .dra__th--doc,
.dra__table--4col .dra__td--doc {
  width: 44%;
}

.dra__table--4col .dra__th--icon,
.dra__table--4col .dra__td--icon {
  width: 18.67%;
}

/* 2-column layout */
.dra__table--2col .dra__th--doc,
.dra__table--2col .dra__td--doc {
  width: 80%;
}

.dra__table--2col .dra__th--icon,
.dra__table--2col .dra__td--icon {
  width: 20%;
}

/* Table header */
.dra__th {
  /* background: #f4f6fb; */
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #374254;
  padding: 8px 10px;
  text-align: left;
  /* border-bottom: 1px solid #e5e9f2; */
}

.dra__th--icon {
  text-align: center;
  font-size: 11px;
}

/* Table cells */
.dra__td {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #4b5563;
  padding: 10px;
  vertical-align: middle;
  border-bottom: 1px solid #e5e9f2;
}

.dra__td--icon {
  text-align: center;
  vertical-align: middle;
}

/* Check / Cross icons */
.dra__check,
.dra__cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 60px;
  flex-shrink: 0;
}

.dra__cross {
  background: #ED1C24;
}

.dra__check svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.dra__cross svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* ─── Plain data table wrapper (grey container) ─────────────────────────
   Matches Figma node 1735:38942: #f9fafb background, 8px radius, 12px pad */
.dra__table-wrap--data {
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px;
}

/* Inside the grey container the header already sits on grey —
   remove the separate header-cell background to avoid double grey */
.dra__table-wrap--data .dra__th {
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #374254;
  padding: 0 0 8px;
  border-bottom: 1px solid #e5e7eb;
  width: 29%;
}

.dra__table-wrap--data .dra__td {
  padding: 8px 0;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

.dra__table-wrap--data tbody tr:last-child .dra__td {
  border-bottom: none;
}
/* ─── Check/Cross table icon columns injected by JS ─────────────────
   Need higher specificity than .dra__item-body th/td (0,2,1) so use
   the element+class combined selector (0,2,1 → 0,2,1+class = 0,3,0).  */
.dra__item-body .dra__th--icon {
  text-align: center;
  /* font-size: 11px; */
}

.dra__item-body .dra__td--icon {
  text-align: center;
  vertical-align: middle;
}

/* ─── Sub-accordion (JS-generated from H3 headings in RTE) ──────────
   All rules scoped to .dra__item-body--nested to avoid any conflict
   with richText or checkTable content variants.
   ─────────────────────────────────────────────────────────────────── */
.dra__item-body--nested {
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

/* Only show when parent accordion is open */
.dra__item--open .dra__item-body--nested {
  display: flex;
}

.dra__item-body--nested .dra__sub-item {
  list-style: none;
}

.dra__item-body--nested .dra__sub-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 20px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.dra__item-body--nested .dra__sub-hdr::-webkit-details-marker {
  display: none;
}

/* Circle icon (Figma: 6×6 blue dot) */
.dra__item-body--nested .dra__sub-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dra__item-body--nested .dra__sub-label {
  flex: 1;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #374254;
}

/* Caret icon */
.dra__item-body--nested .dra__sub-caret {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.dra__item-body--nested .dra__sub-caret svg {
  width: 18px;
  height: 18px;
}

/* Rotate caret when open */
.dra__item-body--nested .dra__sub-item[open] .dra__sub-caret {
  transform: rotate(180deg);
}

/* Sub-item expanded body */
.dra__item-body--nested .dra__sub-body {
  padding: 8px 6px 0 20px;
}

.dra__item-body--nested .dra__sub-body p,
.dra__item-body--nested .dra__sub-body li {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #4b5563;
  margin-bottom: 4px;
}

.dra__item-body--nested .dra__sub-body ul,
.dra__item-body--nested .dra__sub-body ol {
  padding-left: 16px;
  margin-bottom: 0px;
}


/* ─── Desktop overrides (min-width: 768px) ───────────────────────── */
@media (min-width: 768px) {
  .dra {
    border-radius: 18px;
    padding: 30px 0 0  0;
  }

  .dra__intro {
    padding: 0 20px;
    margin-bottom: 12px;
}

  .dra__title {
    text-align: center;
    margin-bottom: 8px;
  }

  .dra__subtitle {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .dra__tab {
    font-size: 14px;
    padding: 8px 16px;
  }

  .dra__item-body li {
    font-size: 12px;
  }

  .dra__th {
    padding: 10px 12px;
  }

  .dra__td {
    padding: 12px;
  }

  .dra__accordion-list {
    padding: 20px 30px;
  }

  /* When a show-more button follows the list, remove its bottom padding
     so the button provides the visual spacing instead */
  .dra__accordion-list:has(+ .dra__show-more) {
    padding-bottom: 0;
  }

  .dra__table-wrap--data .dra__th{
    width: 25%;
  }

  .dra__show-more {
    padding: 0 0 20px;
  }

  .dra__item-body--nested .dra__sub-body {
    padding: 8px 30px 0 30px;
  }
}

/* ─── Copy-to-clipboard button (phone numbers in data tables) ────── */
/* Visible on mobile only — hidden on desktop (≥768px) */

.dra__copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: 8px;
  background: none;
  border: none;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
}

.dra__copy-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* "Copied!" tooltip */
.dra__copy-btn::after {
  content: 'Copied!';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #374254;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  padding: 4px 7px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.dra__copy-btn--copied::after {
  opacity: 1;
}

/* Hide on desktop — copy icon is mobile-only per design */
@media (min-width: 768px) {
  .dra__copy-btn {
    display: none;
  }
}

/*
 * FAQ Tabbed Section — Component Styles
 * Clientlib category : hdfclifeinsurancecompany.faq
 * Methodology        : BEM (hdfcl-claims-faq__*)
 * Approach           : Mobile-first → desktop at min-width: 768px
 *
 * All CSS custom properties are scoped to .hdfcl-claims-faq so they
 * do not leak into the global stylesheet.
 *
 * Design tokens (Figma nodes 1735:23417 / 1735:26882)
 *   brand-red     #ed1c24
 *   grey-900      #1c2633
 *   grey-700      #4b5563
 *   grey-950      #0c111d
 *   grey-200      #e5e7eb
 *   section-bg    #f9fbfd
 */

/* ── 1. Scoped design tokens ───────────────────────────────── */
.hdfcl-claims-faq {
  --faq-brand-red: #ed1c24;
  --faq-grey-900: #1c2633;
  --faq-grey-700: #4b5563;
  --faq-grey-950: #0c111d;
  --faq-grey-200: #e5e7eb;
  --faq-bg: #f9fbfd;
  --faq-white: #ffffff;
  --faq-tab-radius: 8px;
  --faq-row-radius: 12px;
  --faq-row-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  --faq-transition: 220ms ease;
}

/* ── 2. Section wrapper ────────────────────────────────────── */
/* Mobile: padding-block 24px 32px */
.hdfcl-claims-faq {
  background-color: var(--faq-bg);
  padding-block: 20px;
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--faq-grey-900);
}

/* ── 3. Container ──────────────────────────────────────────── */
/* max-width 1031px keeps content centred within the 1440px grid */
.hdfcl-claims-faq__container {
  width: 100%;
  max-width: 991px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ── 4. Section header ─────────────────────────────────────── */
/* Mobile: left-aligned; centred on desktop via breakpoint */
.hdfcl-claims-faq__header {
  margin-bottom: 16px;
}

/* ── 5. Heading ────────────────────────────────────────────── */
/* Mobile: Poppins SemiBold 24px / 36px lh */
.hdfcl-claims-faq__heading {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--faq-grey-900);
  margin-bottom: 8px;
}

/* ── 6. Subtitle ───────────────────────────────────────────── */
/* Poppins Regular 14px / 20px lh */
.hdfcl-claims-faq__subtitle {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--faq-grey-700);
}

/* ── 7. Tabs nav wrapper (outer: arrow + strip + arrow) ───── */
.hdfcl-claims-faq__tabs-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* ── 7a. Arrow buttons — mobile ────────────────────────────── */
.hdfcl-claims-faq__tabs-arrow {
  -webkit-box-flex: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: var(--faq-white);
  border: 1px solid #005e9e;
  border-radius: 12px;
  cursor: pointer;
  padding: 5px;
  color: #005e9e;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.hdfcl-claims-faq__tabs-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.hdfcl-claims-faq__tabs-arrow:focus {
  outline: none;
}

.hdfcl-claims-faq__tabs-arrow:focus-visible {
  outline: 2px solid var(--faq-brand-red);
  outline-offset: 2px;
}

.hdfcl-claims-faq__tabs-arrow-icon {
  display: block;
  width: 10px;
  height: 10px;
}

/* ── 7b. Scrollable tab strip ───────────────────────────────── */
.hdfcl-claims-faq__tabs-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  margin-bottom: 0;
}

.hdfcl-claims-faq__tabs-wrap::-webkit-scrollbar {
  display: none;
}

/* ── 8. Tab button ─────────────────────────────────────────── */
/* Mobile: px 16px py 8px, font 14px / 20px lh */
.hdfcl-claims-faq__tab {
  -webkit-box-flex: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 8px 16px;
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  background-color: var(--faq-white);
  border: 1px solid var(--faq-grey-200);
  border-radius: var(--faq-tab-radius);
  color: var(--faq-grey-950);
  cursor: pointer;
  -webkit-transition:
    border-color var(--faq-transition),
    color var(--faq-transition);
  transition:
    border-color var(--faq-transition),
    color var(--faq-transition);
}

/* Active tab */
.hdfcl-claims-faq__tab--active,
.hdfcl-claims-faq__tab[aria-selected="true"] {
  border-color: var(--faq-brand-red);
  color: var(--faq-brand-red);
}

/* Hover on inactive tab */
.hdfcl-claims-faq__tab:hover:not([aria-selected="true"]) {
  border-color: #c4c9d4;
}

/* Focus ring */
.hdfcl-claims-faq__tab:focus {
  outline: none;
}

.hdfcl-claims-faq__tab:focus-visible {
  outline: 2px solid var(--faq-brand-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile-only tab — hidden on desktop */
.hdfcl-claims-faq__tab--mobile-only {
  /* visible by default on mobile */
}

/* ── 9. FAQ list (accordion container) ────────────────────── */
.hdfcl-claims-faq__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 12px;
}

/* Hidden panel for inactive tabs */
.hdfcl-claims-faq__list--hidden {
  display: none;
}

/* Optional per-tab additional info text — centred between tab strip and accordion */
.hdfcl-claims-faq__tab-info {
  max-width: none;
  width: 100%;
  text-align: center;
  margin:  0 auto;
  color: #4b5563;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}

/* ── 10. FAQ item row ──────────────────────────────────────── */
.hdfcl-claims-faq__item {
  background-color: #f4f6fb;
  border-radius: var(--faq-row-radius);
  -webkit-box-shadow: var(--faq-row-shadow);
  box-shadow: var(--faq-row-shadow);
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* ── 11. Accordion trigger button ──────────────────────────── */
/* min-height 68px to match Figma row height */
.hdfcl-claims-faq__item-trigger {
  width: 100%;
  min-height: 68px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: flex-start;
  padding: 16px 16px 16px 16px;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
    background-color: #f4f6fb;
  -webkit-transition: background-color var(--faq-transition);
  transition: background-color var(--faq-transition);
}

.hdfcl-claims-faq__item-trigger:hover {
  background-color: #f4f6fb;
}

.hdfcl-claims-faq__item-trigger:focus {
  outline: none;
}

.hdfcl-claims-faq__item-trigger:focus-visible {
  outline: 2px solid var(--faq-brand-red);
  outline-offset: -2px;
}

/* ── 12. Row number ────────────────────────────────────────── */
/* Mobile: Poppins Regular 12px / 16px lh */
.hdfcl-claims-faq__item-num {
  -webkit-box-flex: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 28px;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--faq-grey-900);
}

/* ── 13. Question text ─────────────────────────────────────── */
/* Mobile: Poppins Medium 12px / 16px lh */
.hdfcl-claims-faq__item-question {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--faq-grey-900);
}

/* ── 14. Chevron icon ──────────────────────────────────────── */
/* Rotated 90° to point right (closed state); flips to point up (open) */
.hdfcl-claims-faq__chevron {
  -webkit-box-flex: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  -webkit-transition: -webkit-transform var(--faq-transition);
  transition: transform var(--faq-transition);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.hdfcl-claims-faq__item-trigger[aria-expanded="true"]
  .hdfcl-claims-faq__chevron {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

/* ── 15. Accordion panel ───────────────────────────────────── */
.hdfcl-claims-faq__item-panel {
  padding: 0 16px 16px 16px;
}

.hdfcl-claims-faq__item-panel[hidden] {
  display: none;
}

/* ── 16. Rich-text answer styles ───────────────────────────── */
/* Scope all RTE output to avoid global impact */
.hdfcl-claims-faq__answer-richtext ul,
.hdfcl-claims-faq__answer-richtext ol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hdfcl-claims-faq__answer-richtext ul li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--faq-grey-700);
}

/* Dark bullet dot */
.hdfcl-claims-faq__answer-richtext ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--faq-grey-700);
}

.hdfcl-claims-faq__answer-richtext ol li {
  padding-left: 4px;
  font-size: 12px;
  line-height: 20px;
  color: var(--faq-grey-700);
}

.hdfcl-claims-faq__answer-richtext p {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--faq-grey-700);
  margin: 0 0 6px;
}

.hdfcl-claims-faq__answer-richtext p:last-child {
  margin-bottom: 0;
}

.hdfcl-claims-faq__answer-richtext strong {
  font-weight: 600;
  color: var(--faq-grey-900);
}

.hdfcl-claims-faq__answer-richtext a {
  color: #374254;
  text-decoration: underline;
}

/* ── 17. Check / Cross table (FAQ answer variant) ─────────────
   JS adds faq__* BEM classes; these rules supply the styling.
─────────────────────────────────────────────────────────────── */

/* Horizontal-scroll wrapper */
.hdfcl-claims-faq__answer-richtext .faq__table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
}

/* Check/cross table base */
.hdfcl-claims-faq__answer-richtext .faq__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: #4b5563;
}

/* Mobile: widen table when many columns */
@media (max-width: 767px) {
  .hdfcl-claims-faq__answer-richtext .faq__table[data-col="3"] { width: 175% !important; }
  .hdfcl-claims-faq__answer-richtext .faq__table[data-col="4"] { width: 200% !important; }
  .hdfcl-claims-faq__answer-richtext .faq__table[data-col="5"] { width: 250% !important; }
}

/* 5-column layout — each column 20% */
.hdfcl-claims-faq__answer-richtext .faq__table--5col .faq__th,
.hdfcl-claims-faq__answer-richtext .faq__table--5col .faq__td { width: 20%; }

/* 4-column layout — each column 25% */
.hdfcl-claims-faq__answer-richtext .faq__table--4col .faq__th,
.hdfcl-claims-faq__answer-richtext .faq__table--4col .faq__td { width: 25%; }

/* 2-column layout — each column 50% */
.hdfcl-claims-faq__answer-richtext .faq__table--2col .faq__th,
.hdfcl-claims-faq__answer-richtext .faq__table--2col .faq__td { width: 50%; }

/* Header cells */
.hdfcl-claims-faq__answer-richtext .faq__th {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #374254;
  padding: 8px 10px;
  text-align: left;
}
.hdfcl-claims-faq__answer-richtext .faq__th--icon {
  text-align: center;
  font-size: 12px;  
}

/* Data cells */
.hdfcl-claims-faq__answer-richtext .faq__td {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #4b5563;
  padding: 10px;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
}
.hdfcl-claims-faq__answer-richtext .faq__td--icon {
  text-align: center;
  vertical-align: middle;
}

/* Check / Cross icon circles */
.hdfcl-claims-faq__answer-richtext .faq__check,
.hdfcl-claims-faq__answer-richtext .faq__cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 60px;
  flex-shrink: 0;
}
.hdfcl-claims-faq__answer-richtext .faq__cross {
  background: #ed1c24;
}
.hdfcl-claims-faq__answer-richtext .faq__check svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.hdfcl-claims-faq__answer-richtext .faq__cross svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Plain data table — grey container */
.hdfcl-claims-faq__answer-richtext .faq__table-wrap--data {
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px;
}
.hdfcl-claims-faq__answer-richtext .faq__table-wrap--data .faq__th {
  background: transparent;
  padding: 0 0 8px;
  border-bottom: 1px solid #e5e9f2;
}
.hdfcl-claims-faq__answer-richtext .faq__table-wrap--data .faq__td {
  padding: 8px 0;
}
.hdfcl-claims-faq__answer-richtext .faq__table-wrap--data tbody tr:last-child .faq__td {
  border-bottom: none;
}

/* Column width utilities (author via class on td/th) */
.hdfcl-claims-faq__answer-richtext .wp-5 { width: 5% !important; }
.hdfcl-claims-faq__answer-richtext .wp-10 { width: 10% !important; }
.hdfcl-claims-faq__answer-richtext .wp-15 { width: 15% !important; }
.hdfcl-claims-faq__answer-richtext .wp-20 { width: 20% !important; }
.hdfcl-claims-faq__answer-richtext .wp-25 { width: 25% !important; }
.hdfcl-claims-faq__answer-richtext .wp-30 { width: 30% !important; }
.hdfcl-claims-faq__answer-richtext .wp-35 { width: 35% !important; }
.hdfcl-claims-faq__answer-richtext .wp-40 { width: 40% !important; }
.hdfcl-claims-faq__answer-richtext .wp-45 { width: 45% !important; }
.hdfcl-claims-faq__answer-richtext .wp-50 { width: 50% !important; }
.hdfcl-claims-faq__answer-richtext .wp-55 { width: 55% !important; }
.hdfcl-claims-faq__answer-richtext .wp-60 { width: 60% !important; }
.hdfcl-claims-faq__answer-richtext .wp-65 { width: 65% !important; }
.hdfcl-claims-faq__answer-richtext .wp-70 { width: 70% !important; }
.hdfcl-claims-faq__answer-richtext .wp-75 { width: 75% !important; }
.hdfcl-claims-faq__answer-richtext .wp-80 { width: 80% !important; }
.hdfcl-claims-faq__answer-richtext .tc { text-align: center !important; }
.hdfcl-claims-faq__answer-richtext .tl { text-align: left !important; }
.hdfcl-claims-faq__answer-richtext .tr { text-align: right !important; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP BREAKPOINT  —  min-width: 768px
   Matches Figma desktop node 1735:23417 (1440px canvas)
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  
  .hdfcl-claims-faq__container{
    padding-inline: 0;
  }

  /* Section padding */
  .hdfcl-claims-faq {
    padding-block: 40px;
  }

  /* Header: centred */
  .hdfcl-claims-faq__header {
    text-align: center;
    margin-bottom: 20px;
  }

  /* Heading: 28px / 40px lh */
  .hdfcl-claims-faq__heading {
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 4px;
  }

  /* Subtitle: max-width 465px, centred */
  .hdfcl-claims-faq__subtitle {
    max-width: 465px;
    margin-inline: auto;
  }

  /* Tabs nav: margin only */
  .hdfcl-claims-faq__tabs-nav {
    gap: 20px;
    margin-bottom: 24px;
  }

  .hdfcl-claims-faq__tabs-arrow {
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 20px;
  }

  .hdfcl-claims-faq__tabs-arrow-icon {
    width: 16px;
    height: 16px;
  }

  .hdfcl-claims-faq__list {
    gap: 20px;
  }

  /* Tabs strip: remains scrollable (no wrap, no centre) */
  .hdfcl-claims-faq__tabs-wrap {
    overflow-x: auto;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 0;
  }

  /* Tab: desktop sizing */
  .hdfcl-claims-faq__tab {
    padding: 12px 20px;
    font-size: 16px;
    line-height: 24px;
  }

  /* Mobile-only tab hidden on desktop */
  .hdfcl-claims-faq__tab--mobile-only {
    display: none;
  }

  /* Trigger: desktop padding */
  .hdfcl-claims-faq__item-trigger {
    padding: 22px;
    align-items: center;
  }

  .hdfcl-claims-faq__item-trigger[aria-expanded="true"]{
    padding-bottom: 12px;
  }

  /* Number: 14px / 20px lh */
  .hdfcl-claims-faq__item-num {
    width: 32px;
    font-size: 14px;
    line-height: 20px;
  }

  /* Question: 14px / 20px lh */
  .hdfcl-claims-faq__item-question {
    font-size: 14px;
    line-height: 20px;
  }

  /* Panel: more padding on desktop */
  .hdfcl-claims-faq__item-panel {
    padding: 0 22px 22px 22px;
  }

  /* Answer text: desktop size */
  .hdfcl-claims-faq__answer-richtext ul li,
  .hdfcl-claims-faq__answer-richtext ol li,
  .hdfcl-claims-faq__answer-richtext p {
    font-size: 12px;
    line-height: 20px;
  }

  /* Optional per-tab additional info text — centred between tab strip and accordion */
  .hdfcl-claims-faq__tab-info {
    max-width: 589px;
    width: 100%;
    margin: 0 auto;
    color: #4b5563;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
  }
}

/*
 * HDFC Life Claims — FAQ Card Component
 * Desktop Figma : 1735:23659  (256 × 162px per card — but takes full parent width)
 * Mobile Figma  : 1735:26995  (353 × 88px per card)
 *
 * Methodology  : BEM  (.faq-card / .faq-card__*)
 * Approach     : Mobile-first → desktop at min-width: 768px
 *
 * Background image is applied as background-image by script.js reading data-bg.
 * Falls back gracefully to solid white when no image is authored.
 */

/* ── Card — full width of parent, single authorable unit ──────── */
.faq-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 88px;
  background-color: #ffffff;
  /* Set by JS from authored data-bg value */
  background-image: var(--faqc-card-bg, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  border-radius: 12px;
  overflow: hidden;
  padding: 16px 20px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  box-sizing: border-box;
}

.faq-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
}

.faq-card:focus-visible {
  outline: 2px solid #ed1c24;
  outline-offset: 3px;
}

/* ── Decorative illustration — right-side watermark ─────────── */
.faq-card__illustration {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 70%;         /* ~177 of 256px per Figma */
  pointer-events: none;
  overflow: hidden;
}

.faq-card__illus-img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: left center;
  opacity: 0.12;      /* faint watermark — matches Figma mask effect */
}

/* ── Arrow button — top-right ─────────────────────────────────── */
.faq-card__arrow {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 12px;
  right: 14px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.faq-card__arrow:focus-visible {
  outline: 2px solid #ed1c24;
  border-radius: 50%;
  outline-offset: 2px;
}

.faq-card__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Text body ────────────────────────────────────────────────── */
.faq-card__body {
  display: inline;
  flex-direction: column;
  gap: 0;
  z-index: 1;
}

/* "Frequently Asked Questions about" */
.faq-card__label {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #1c2633;
  letter-spacing: 0;
  display: inline;
}

/* "Death Claim" etc. */
.faq-card__claim {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #0c111d;
  letter-spacing: 0;
  display: block;
}

/* ── Desktop ≥ 768px ──────────────────────────────────────────── */
@media (min-width: 768px) {

  .faq-card {
    min-height: 162px;
    padding: 28px 24px 24px;
  }

  .faq-card__arrow {
    top: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
  }

  .faq-card__body {
    padding-right: 0;
    gap: 2px;
    max-width: 292px;
  }

  .faq-card__label {
    font-size: 20px;
    line-height: 28px;
  }

  .faq-card__claim {
    font-size: 20px;
    line-height: 28px;
  }

}

/* ── Hindi page — swap label / claim order ────────────────────── */
#hdfcl-claims-hi-page .faq-card__body {
  display: grid;
}

#hdfcl-claims-hi-page .faq-card__claim {
  order: -1;
}

/*
 * ============================================================
 * HDFC Life Claims — Helpline Card Component Styles
 * Clientlib category : hdfclifeinsurancecompany.helplineCard
 * Methodology        : BEM  (hdfcl-hlc__*)
 * Approach           : Mobile-first → desktop at min-width: 768px
 * Figma              : 3744:6617 (desktop 710×377) / 3744:6622 (mobile 350×435)
 *
 * Design Tokens
 *   heading      #1c2633   color/grey/900
 *   phone        #354f83   color/secondary/indigo/600
 *   time         #3a568f   color/secondary/indigo/500
 *   divider      #e5e9f2
 *   bubble-bg    #fde8e7   (light pink)
 *   red          #ed1c24   brand-red
 *
 * Card dimensions
 *   Mobile  : 350×435px, radius 18px, padding 28px 24px
 *   Desktop : 710×377px, radius 18px, padding 36px
 * ============================================================
 */

/* ── CSS variables scoped to component ── */
.hdfcl-hlc {
  --hlc-heading: #1c2633;
  --hlc-phone: #354f83;
  --hlc-time: #3a568f;
  --hlc-divider: #e5e9f2;
  --hlc-bubble-bg: #fde8e7;
  --hlc-bubble-bdr: #f5c6c6;
  --hlc-red: #ed1c24;
  --hlc-radius: 18px;
}

/* ── 1. Scoped resets ── */
.hdfcl-hlc *,
.hdfcl-hlc *::before,
.hdfcl-hlc *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hdfcl-hlc ul {
  list-style: none;
}

/* ── 2. Section wrapper ── */
.hdfcl-hlc {
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  /* padding: 20px 16px; */
  background: #ffffff;
  border-radius: 18px;
}

/* ── 3. Card ── */
.hdfcl-hlc__card {
  position: relative;
  width: 100%;
  /* max-width: 390px; */
  min-height: 435px;
  /* margin: 0 auto; */
  background-color: #ffffff;
  border-radius: var(--hlc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}

/* ── 4. Card background images ── */
/* Base styles shared by both bg images */
.hdfcl-hlc__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}

/*
 * Desktop bg: visible on all sizes by default.
 * When bgImageMobile is authored, [data-has-mobile-bg] is present on the card
 * and the desktop bg is hidden on mobile so the mobile bg shows instead.
 */
.hdfcl-hlc__card-bg--desktop {
  display: block;
  inset: auto;
  right: 0;
  top: 0;
  width: 187px;
  height: 333px;
  object-fit: cover;
  object-position: left center;
}

[data-has-mobile-bg] .hdfcl-hlc__card-bg--desktop {
  display: none;
}

/*
 * Mobile bg: visible on mobile only.
 * Hidden on desktop via the media query below.
 */
.hdfcl-hlc__card-bg--mobile {
  display: block;
  inset: auto;
  right: 0;
  top: 0;
  width: 226.343px;
  height: 402px;
  object-fit: cover;
  object-position: left center;
}

/* ── 5. Content area ── */
.hdfcl-hlc__content {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* ── 6. Heading ── */
.hdfcl-hlc__heading {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: var(--hlc-heading);
  letter-spacing: 0;
  margin-bottom: 12px;
  /* text-align: center; */
}

/* ── 7. Sub-heading ── */
.hdfcl-hlc__sub-heading {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--hlc-heading);
  letter-spacing: 0;
  margin-bottom: 4px;
}

/* ── 8. Contact list ── */
.hdfcl-hlc__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── 9. Divider ── */
.hdfcl-hlc__separator {
  height: 1px;
  background: var(--hlc-divider);
  width: 100%;
}

/* ── 10. Contact item ── */
.hdfcl-hlc__item {
  /* display: flex; */
  gap: 12px;
  align-items: flex-start;
}

.hdfcl-hlc__item-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── 11. Item body ── */
.hdfcl-hlc__item-body {
  max-width: 233px;
  width:100%;
  margin-top: 8px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hdfcl-hlc__item-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--hlc-heading);
  letter-spacing: 0;
}

/* ── 12. Phone + time row (mobile: stacked) ── */
.hdfcl-hlc__contact-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hdfcl-hlc__phone {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--hlc-phone);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.hdfcl-hlc__phone:hover {
  text-decoration: underline;
}

.hdfcl-hlc__phone:focus-visible {
  outline: 2px solid var(--hlc-red);
  outline-offset: 2px;
  border-radius: 2px;
}

.hdfcl-hlc__time {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--hlc-time);
  letter-spacing: 0;
}

.hdfcl-hlc__email {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--hlc-phone);
  letter-spacing: 0;
  text-decoration: none;
}

.hdfcl-hlc__email:hover {
  text-decoration: underline;
}

.hdfcl-hlc__email:focus-visible {
  outline: 2px solid var(--hlc-red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── 13. Mobile call bubble ── */
.hdfcl-hlc__call-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--hlc-bubble-bg);
  border: 1px solid var(--hlc-bubble-bdr);
  text-decoration: none;
  margin-top: 18px;
  transition: background 0.2s ease;
}

.hdfcl-hlc__call-bubble:hover {
  background: #fad0cf;
}

.hdfcl-hlc__call-bubble:focus-visible {
  outline: 2px solid var(--hlc-red);
  outline-offset: 2px;
}

.hdfcl-hlc__call-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.hdfcl-hlc__item-top{
  display:  flex;
  align-items: center;
  gap: 10px;
}
/* ── 14. Illustration ── */
/*
 * Mobile: shown at bottom-right of the card, partial overlap.
 * Figma 3954:28475 — illustration is ~40% card width at bottom-right.
 */
.hdfcl-hlc__illustration {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 137px;
  height: 154px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hdfcl-hlc__illus-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}

/* ── 15. Desktop ≥ 768px ── */
@media (min-width: 768px) {
  .hdfcl-hlc {
    /* padding: 40px 0; */
  }

  /* On desktop: restore desktop bg even when mobile bg is also authored */
  [data-has-mobile-bg] .hdfcl-hlc__card-bg--desktop {
    display: block;
  }

  /* On desktop: hide mobile bg */
  .hdfcl-hlc__card-bg--mobile {
    display: none;
  }

  /* Card: horizontal layout, capped at Figma desktop width 710px */
  .hdfcl-hlc__card {
    max-width: 710px;
    min-height: 377px;
    max-height: 377px;
    flex-direction: row;
    align-items: stretch;
  }

  /* Content: fixed left column width matching Figma 528px */
  .hdfcl-hlc__content {
    /* flex: 0 0 528px; */
    padding: 26px 0 57px 36px;
  }

  /* Heading: left-aligned on desktop */
  .hdfcl-hlc__heading {
    text-align: left;
    margin-bottom: 10px;
  }

  .hdfcl-hlc__sub-heading {
    margin-bottom: 20px;
  }

  /* Icon: 24px on desktop */
  .hdfcl-hlc__item-icon {
    width: 24px;
    height: 24px;
  }

  /* Label: regular 16px on desktop */
  .hdfcl-hlc__item-label {
    font-size: 16px;
    line-height: 24px;
  }

  /* Phone + time: inline row on desktop */
  .hdfcl-hlc__contact-row {
    flex-direction: row;
    align-items: center;
    gap: 11px;
  }

  /* Time: Regular on desktop */
  .hdfcl-hlc__time {
    font-weight: 400;
    gap: 11px;
  }

  /* Email: Medium 14px on desktop */
  .hdfcl-hlc__email {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  /* Hide mobile call bubble on desktop */
  .hdfcl-hlc__call-bubble {
    display: none;
  }

  /* Illustration: full-height right column on desktop */
  .hdfcl-hlc__illustration {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 182px;
    height: 100%;
  }

  .hdfcl-hlc__item-body {
    margin: 8px 0 0 34px;
    max-width: unset;
  }
}

/* ===================================
   Here To Support You — Desktop Styles
   Figma: 1735:22315 (desktop) / 1735:24852 (mobile)
   =================================== */

/* ======================================
   MODAL OVERLAY
   ====================================== */

/* Modal root — hidden until open() is called */
.hdfcl-hts-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When hidden attribute present → fully invisible */
.hdfcl-hts-modal[hidden] {
  display: none;
}

/* Backdrop */
.hdfcl-hts-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hdfcl-hts-modal.is-open .hdfcl-hts-modal__backdrop {
  opacity: 1;
}

/* Scroll container — allows dialog card to scroll on small screens */
.hdfcl-hts-modal__scroll {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

/* ---- Dialog card ---- */
.hdfcl-hts-modal__dialog {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
  padding: 41px 135px 36px 135px;
  background-color: #FFFFFF;
  border-radius: 28px;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  transform: scale(0.8);
}

/* ======================================
   DIALOG CONTENT
   ====================================== */

/* ---- Close button ---- */
.hdfcl-hts__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    line-height: 0;
}

.hdfcl-hts__close-icon {
    display: block;
}

/* ---- Header ---- */
.hdfcl-hts__header {
    margin-bottom: 42px;
}

.hdfcl-hts__sorry-line {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #4b5563;
    margin: 0 0 2px 0;
}

.hdfcl-hts__heading {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 40px;
    color: #1c2633;
    margin: 0 0 2px 0;
}

.hdfcl-hts__sub-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #4b5563;
    margin: 0;
}

/* ---- Steps ---- */
.hdfcl-hts__steps {
    margin-bottom: 36px;
}

.hdfcl-hts__steps-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #4b5563;
    margin: 0 0 25px 0;
}

.hdfcl-hts__step-list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.hdfcl-hts__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 164px;
    max-width: 164px;
}

.hdfcl-hts__step:nth-child(3) {
    max-width: 140px;
}

.hdfcl-hts__step-icon-wrap {
    width: 164px;
    height: 137px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.hdfcl-hts__step-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Desktop icon visible by default; mobile icon hidden */
.hdfcl-hts__step-icon--mobile {
    display: none;
}

.hdfcl-hts__step-label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #4b5563;
    margin: 0;
}

/* ---- CTA Group ---- */
.hdfcl-hts__cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.hdfcl-hts__cta-primary,
.hdfcl-hts__cta-secondary {
    min-width: 180px;
    padding: 10px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: 1px solid #ED1C24;
}

.hdfcl-hts__cta-primary,
.hdfcl-hts__cta-primary:visited,
.hdfcl-hts__cta-primary:active {
    background-color: #ED1C24;
    color: #FFFFFF;
}

.hdfcl-hts__cta-secondary,
.hdfcl-hts__cta-secondary:visited {
    background-color: transparent;
    color: #ED1C24;
    border: 1px solid #F9ADAA;
}

@media (hover: hover) and (pointer: fine) {
  .hdfcl-hts__cta-primary:hover {
      background-color: #C71920;
      border-color: #C71920;
      color: #FFFFFF;
  }

  .hdfcl-hts__cta-secondary:hover {
      background-color: #ED1C24;
      color: #FFFFFF;
  }
}

/* ---- Anchor Link ---- */
.hdfcl-hts__anchor-wrapper {
    margin-top: 4px;
}

.hdfcl-hts__anchor,
.hdfcl-hts__anchor--popup {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1c2633;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
  .hdfcl-hts__anchor:hover,
  .hdfcl-hts__anchor--popup:hover {
      text-decoration: underline;
  }
}


/* ── CTA per-device visibility (Desktop tab vs Mobile tab) ──────────
   What is authored in the Desktop CTAs dialog tab → shown at ≥769px only.
   What is authored in the Mobile CTAs dialog tab  → shown at ≤768px only.
   ────────────────────────────────────────────────────────────── */

/* Desktop group hidden on mobile by default */
.hdfcl-hts__cta-group.hdfcl-hts__cta--desktop-only,
.hdfcl-hts__anchor-wrapper.hdfcl-hts__cta--desktop-only {
    display: none;
}

@media (min-width: 769px) {
    /* Desktop group: restore on desktop */
    .hdfcl-hts__cta-group.hdfcl-hts__cta--desktop-only {
        display: flex;
    }
    .hdfcl-hts__anchor-wrapper.hdfcl-hts__cta--desktop-only {
        display: block;
    }

    /* Mobile group: hide on desktop */
    .hdfcl-hts__cta-group.hdfcl-hts__cta--mobile-only,
    .hdfcl-hts__anchor-wrapper.hdfcl-hts__cta--mobile-only {
        display: none;
    }
}

/* Hindi Page styles */
@media (min-width: 769px) {
    #hdfcl-claims-hi-page .hdfcl-hts-modal__dialog{
        padding: 41px 112px 36px 112px;
        transform: scale(0.8);
    }
    #hdfcl-claims-hi-page .hdfcl-hts__cta--desktop-only {
        flex-wrap: nowrap;
    }
}
/* ===================================
   Here To Support You — Responsive Styles
   Mobile: steps stacked vertically, icon left + label right
   Breakpoint: max-width 767px (mobile switch)
   =================================== */

/* ---- Tablet (≤ 768px) ---- */
@media (max-width: 768px) {

    .hdfcl-hts__header {
     margin-bottom: 28px;   
    }

    .hdfcl-hts__steps-heading {
        font-size: 14px;
        line-height: 20px;
        margin: 0 0 6px 0;
    }

    .hdfcl-hts__steps {
        margin-bottom: 20px;
    }

    .hdfcl-hts__dialog {
        padding: 32px 24px 28px;
        border-radius: 8px;
    }

    .hdfcl-hts__heading {
        font-size: 20px;
        line-height: 28px;
        font-weight: 600;
        margin: 0;
    }

    /* Steps: stack vertically, icon left + label right */
    .hdfcl-hts__step-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .hdfcl-hts__step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 16px;
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .hdfcl-hts__step:nth-child(3){
        max-width: 100%;
    }

    .hdfcl-hts__step-icon-wrap {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    /* Step icons: swap desktop → mobile variant */
    .hdfcl-hts__step-icon--desktop {
        display: none;
    }

    .hdfcl-hts__step-icon--mobile {
        display: block;
    }

    /* CTAs: full width, stacked — primary (solid) first */
    .hdfcl-hts__cta-group {
        flex-direction: column;
        gap: 20px;
    }
    
  /* Anchor modal to the bottom of the viewport */
  .hdfcl-hts-modal {
    align-items: flex-end;
  }

  /* Remove centering padding so sheet sits flush at bottom */
  .hdfcl-hts-modal__scroll {
    padding: 0;
    align-items: flex-end;
    justify-content: flex-start;
    max-height: 100vh;
    overflow: visible;
  }

  /* Bottom sheet card */
  .hdfcl-hts-modal__dialog {
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    padding: 55px 60px 32px 60px;
    max-height: 90vh;
    overflow-y: auto;
    /* Slide-up animation — starts off-screen */
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Sheet slides into view when modal gains is-open class */
  .hdfcl-hts-modal.is-open .hdfcl-hts-modal__dialog {
    transform: translateY(0);
  }

  /* Show mobile icon variant, hide desktop */
  .hdfcl-hts__step-icon--mobile {
    display: block;
  }

  .hdfcl-hts__step-icon--desktop {
    display: none;
  }

  /* CTAs: stack vertically, full width */
  .hdfcl-hts__cta-group {
    flex-direction: column;
    gap: 20px;
  }

  .hdfcl-hts__cta-primary,
  .hdfcl-hts__cta-secondary {
    width: 100%;
    min-width: unset;
    box-shadow: 0 1px 2px 0 rgba(177, 17, 22, 0.12);
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
  }

  .hdfcl-hts__cta-secondary {
    border: 1px solid #F9ADAA;
  }
}
/*
 * ============================================================
 * HDFC Life Claims — Know More Card Component Styles
 * Clientlib category : hdfclifeinsurancecompany.knowMoreCard
 * Methodology        : BEM  (hdfcl-kmc__*)
 * Approach           : Mobile-first → desktop at min-width: 768px
 * Figma              : 1735:26472
 *
 * Design Tokens
 *   card-bg      #f5f7fb   light grey-blue bg
 *   card-border  #e5e9f2   subtle border
 *   heading      #0c111d   greyscale/color/body
 *   link-text    #ed1c24   text-brand-red
 *   arrow-bg     #ed1c24   red circle bg
 *   arrow-icon   #ffffff   white arrow
 *   wave-stroke  #c9d3e9   decorative curves
 *
 * Card dimensions (mobile)
 *   Width   : 352px → fluid with max-width
 *   Height  : 159px → fixed
 *   Radius  : 18px
 *   Padding : 16px 19px 20px 19px
 * ============================================================
 */

/* ── CSS variables scoped to component ── */
.hdfcl-kmc {
  --kmc-card-bg: #f9fafb;
  --kmc-card-border: #e5e9f2;
  --kmc-card-radius: 18px;
  --kmc-heading: #0c111d;
  --kmc-link-color: #ed1c24;
  --kmc-arrow-bg: #ed1c24;
  --kmc-arrow-hover: #c4161c;
  --kmc-wave-stroke: #c9d3e9;
}

/* ── 1. Scoped resets ── */
.hdfcl-kmc *,
.hdfcl-kmc *::before,
.hdfcl-kmc *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── 2. Outer wrapper ── */
.hdfcl-kmc {
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  /* padding: 16px; */
}

/* ── 3. Card ── */
.hdfcl-kmc__card {
  position: relative;
  width: max(352px, 100%);
  min-height: 159px;
  background: var(--kmc-card-bg);
  border: 1px solid var(--kmc-card-border);
  border-radius: var(--kmc-card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 19px 20px 19px;
  gap: 8px;
}

/* ── 4. Heading ── */
.hdfcl-kmc__heading {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: var(--kmc-heading);
  letter-spacing: 0;
  max-width: 250px;
}

/* ── 4b. Subtitle ── */
.hdfcl-kmc__subtext {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #374254;
  letter-spacing: 0;
  max-width: 230px;
}

/* ── 5. Wave decoration image ── */
/* z-index:-1 places it behind all card content (heading, cta)
   without needing any position/z-index on sibling elements. */
.hdfcl-kmc__wave-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  object-fit: cover;
  object-position: bottom center;
  pointer-events: none;
  z-index: 0;
}

/* ── 6. CTA row ── */
/* Plain flow div — no position/z-index needed since wave img uses z-index:-1 */

.hdfcl-kmc__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
}

.hdfcl-kmc__link-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--kmc-link-color);
  letter-spacing: 0;
  white-space: nowrap;
}

/* ── 7. Arrow circle ── */
.hdfcl-kmc__arrow-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kmc-arrow-bg);
  flex-shrink: 0;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.hdfcl-kmc__arrow-icon {
  width: 14px;
  height: 14px;
  display: block;
}

/* ── 8. Hover / focus states ── */
.hdfcl-kmc__link:hover .hdfcl-kmc__arrow-circle {
  transform: translateX(3px);
  background: var(--kmc-arrow-hover);
}

.hdfcl-kmc__link:focus-visible {
  outline: 2px solid var(--kmc-link-color);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 9. Desktop ≥ 768px ── */
@media (min-width: 768px) {
  .hdfcl-kmc {
    /* padding: 24px; */
  }

  /* Full-width card on desktop, capped at the project's standard max-width */
  .hdfcl-kmc__card {
    /* max-width: 1366px; */
    max-width: 352px;
    width: 100%;
    padding: 34px 78px 34px 24px;
  }

  .hdfcl-kmc__heading {
    font-size: 20px;
  }
}

/*
 * ============================================================
 * HDFC Life Claims — Quick Links Component Styles
 * Clientlib category : hdfclifeinsurancecompany.quickLinks
 * Methodology        : BEM  (quick-links__*)
 * Approach           : Mobile-first → desktop at min-width: 768px
 *
 * Design Tokens (from Figma node 1735:24205)
 *   panel-bg       #fef1f1  (color/secondary/error/50)
 *   heading        #1c2633  (color/grey/900)
 *   link-label     #4b5563  (color/grey/700)
 *   arrow          #ed1c24  brand-red
 *   scrollbar-bg   #d9d9d9
 *   scrollbar-thumb#9ca3af  grey-500
 *
 * Typography
 *   Heading  : Poppins SemiBold 600  20px/28px
 *   Row label: Poppins Medium  500   14px/20px
 *   (Poppins must be loaded globally via page template/policy)
 *
 * Desktop panel (≥ 768px): 352 × 377px  |  Mobile: full-width ≤ 391px
 * ============================================================
 */

/* ── 1. CSS variables — scoped to component, no :root leakage ── */
.quick-links {
  --ql-panel-bg: #fef1f1;
  --ql-panel-radius: 18px;
  --ql-grey-900: #1c2633;
  --ql-grey-700: #4b5563;
  --ql-brand-red: #ed1c24;
  --ql-icon-color: #4b5563;
  --ql-scrollbar-bg: #d9d9d9;
  --ql-scrollbar-thumb: #9ca3af;
  --ql-row-gap: 16px;
  --ql-transition: 160ms ease;
}

/* ── 2. Scoped resets — only affect markup inside .quick-links ── */
.quick-links *,
.quick-links *::before,
.quick-links *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.quick-links ul {
  list-style: none;
}

.quick-links a {
  text-decoration: none;
  color: inherit;
}

.quick-links :focus-visible {
  outline: 2px solid var(--ql-brand-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 3. Section wrapper ── */
/*
 * Centers the panel. On mobile: full-width; on desktop: fixed 352px panel.
 */
.quick-links {
  display: flex;
  justify-content: center;
  /* padding: 24px 16px; */
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── 4. Panel ── */
/*
 * bg #fef1f1, border-radius 18px
 * Mobile  : full width ≤ 391px, height fixed + scrollable list
 * Desktop : capped at 352px wide (Figma spec)
 */
.quick-links__panel {
  position: relative;
  background: var(--ql-panel-bg);
  border-radius: var(--ql-panel-radius);
  display: flex;
  flex-direction: column;
  width: 100%;
  /* max-width: 391px; */

  /*
   * Fixed height (377px from Figma).
   * Heading area takes ~83px (padding 31px + heading 28px + gap 24px).
   * Remaining ~264px is the scrollable list — matches Figma scrollbar track.
   */
  padding: 30px 20px;
}

/* ── 5. Heading ── */
.quick-links__heading {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--ql-grey-900);
  margin-bottom: 16px;
}

/* ── 6. Links list (scroll container) ── */
/*
 * Custom scrollbar: 3px wide track, matches Figma node 1735:24263
 *   track  : #d9d9d9, radius 4px
 *   thumb  : #9ca3af, radius 4px
 */
.quick-links__list {
  flex: 1;
  min-height: 0; /* required: flex child must shrink below content size */
  max-height: 272px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ql-row-gap);
  padding-right: 24px; /* clearance for the scrollbar */

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--ql-scrollbar-thumb) var(--ql-scrollbar-bg);
}

/* WebKit / Blink */
.quick-links__list::-webkit-scrollbar {
  width: 3px;
}
.quick-links__list::-webkit-scrollbar-track {
  background: var(--ql-scrollbar-bg);
  border-radius: 4px;
}
.quick-links__list::-webkit-scrollbar-thumb {
  background: var(--ql-scrollbar-thumb);
  border-radius: 4px;
}

/* ── 7. Item ── */
.quick-links__item {
  /* override hook */
}

/* ── 8. Link row ── */
/*
 * Layout: [icon 28px] [12px gap] [label flex-1] [arrow 18px]
 * Row height: 28px  (matches icon circle height)
 */
.quick-links__link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 28px;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--ql-transition);
}

.quick-links__link:hover {
  opacity: 0.8;
}

.quick-links__link:hover .quick-links__arrow {
  transform: translateX(3px);
}

/* ── 9. Icon circle wrapper ── */
/*
 * 28 × 28px white circle with soft pink border replicates Figma Ellipse 13421.
 */
.quick-links__icon-wrap {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ql-icon-color);
}

/* ── 10. Icon SVG ── */
.quick-links__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── 11. Label ── */
.quick-links__label {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--ql-grey-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 12. Arrow ── */
.quick-links__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ql-brand-red);
  transition: transform var(--ql-transition);
}

.quick-links__arrow svg {
  width: 18px;
  height: 18px;
}

/* ── 13. Desktop overrides ≥ 768px ── */
@media (min-width: 768px) {
  .quick-links {
    --ql-row-gap: 18px;
  }

  .quick-links__panel {
    max-width: 352px;
    padding: 32px 25px;
    min-height: 377px;
  }

  .quick-links__heading {
    margin-bottom: 22px;
  }

  .quick-links__list { 
    max-height: 264px;
    padding-right: 14px;
  }
}

/*
 * Same Day Claim Banner — Component Styles
 * Clientlib category : hdfclifeinsurancecompany.samedayClaimBanner
 * Methodology        : BEM (hdfcl-sameday-*)
 * Approach           : Desktop-first with max-width: 767px breakpoint
 *
 * All CSS custom properties are scoped to .hdfcl-sameday-banner and
 * .hdfcl-sameday-modal to prevent global leakage.
 */

/* ── 1. Scoped design tokens ───────────────────────────────── */
.hdfcl-sameday-banner,
.hdfcl-sameday-modal,
.hdfcl-sameday-modal-backdrop {
  --hdfcl-sd-color-surface: #ffffff;
  --hdfcl-sd-color-bg: #f6f8fb;
  --hdfcl-sd-color-text: #0c111d;
  --hdfcl-sd-color-muted: #4b5563;
  --hdfcl-sd-color-muted-strong: #475467;
  --hdfcl-sd-color-subtle: #9ca3af;
  --hdfcl-sd-color-border: #d2d5da;
  --hdfcl-sd-color-danger: #ed1c24;
  --hdfcl-sd-color-danger-border: #f9adaa;
  --hdfcl-sd-color-header-bg: #ebf7ff;
  --hdfcl-sd-color-dot: #00a6ff;
  --hdfcl-sd-color-card-bg: #f4f6fb;
  --hdfcl-sd-color-bullet-marker: #0093f5;

  --hdfcl-sd-radius-sm: 6px;
  --hdfcl-sd-radius-md: 12px;
  --hdfcl-sd-radius-lg: 20px;

  --hdfcl-sd-shadow-soft: 0 1px 2px rgba(28, 38, 51, 0.08);
  --hdfcl-sd-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.22);

  --hdfcl-sd-transition: 0.3s ease;

  font-family: "Poppins", "Segoe UI", sans-serif;
  color: var(--hdfcl-sd-color-text);
}

/* ── 2. Layout container ───────────────────────────────────── */
.hdfcl-sameday-banner__layout-container {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

/* ── 3. Banner section ─────────────────────────────────────── */
.hdfcl-sameday-banner {
  /* padding: 20px 0 30px; */
}

/* ── 4. Banner card ────────────────────────────────────────── */
.hdfcl-sameday-banner__card {
  position: relative;
  /* min-height: 217px; */
  overflow: hidden;
  border-radius: var(--hdfcl-sd-radius-md);
  background-color: var(--hdfcl-sd-color-card-bg);
  -webkit-box-shadow: var(--hdfcl-sd-shadow-soft);
  box-shadow: var(--hdfcl-sd-shadow-soft);
}

/* ── Card background images ── */
.hdfcl-sameday-banner__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

/* Mobile bg: hidden on desktop by default */
.hdfcl-sameday-banner__card-bg--mobile {
  display: none;
}

/* Desktop bg: always visible on desktop */
.hdfcl-sameday-banner__card-bg--desktop {
  display: block;
}

/* ── 5. Banner content block ───────────────────────────────── */
.hdfcl-sameday-banner__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 30px 31px;
}

/* ── 6. Banner title ───────────────────────────────────────── */
.hdfcl-sameday-banner__title {
  margin: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
  color: var(--hdfcl-sd-color-text);
}

/* ── 7. Banner description ─────────────────────────────────── */
.hdfcl-sameday-banner__description {
  margin: 0 0 20px;
  color: var(--hdfcl-sd-color-muted);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* ── 8. Illustration ───────────────────────────────────────── */
.hdfcl-sameday-banner__illustration-wrap {
  position: absolute;
  right: 0;
  top: -35px;
  margin: 0;
  width: 243px;
  height: 243px;
}

.hdfcl-sameday-banner__illustration-wrap picture {
  display: block;
}

.hdfcl-sameday-banner__illustration {
  display: block;
  width: 243px;
  height: 243px;
  -o-object-fit: contain;
  object-fit: contain;
}

/* ── 9. CTA Button ─────────────────────────────────────────── */
.hdfcl-sameday-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: var(--hdfcl-sd-radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: 6px 16px;
  min-width: 192px;
  background: var(--hdfcl-sd-color-surface);
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(177, 17, 22, 0.12);
}

.hdfcl-sameday-btn--outline-danger {
  color: var(--hdfcl-sd-color-danger);
  border-color: var(--hdfcl-sd-color-danger-border);
}

.hdfcl-sameday-btn:focus-visible {
  outline: 2px solid var(--hdfcl-sd-color-danger);
  outline-offset: 2px;
}

/* ── 10. Modal backdrop ────────────────────────────────────── */
.hdfcl-sameday-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 17, 29, 0.42);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
}

.hdfcl-sameday-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* ── 11. Modal container ───────────────────────────────────── */
.hdfcl-sameday-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  pointer-events: none;
}

.hdfcl-sameday-modal.is-open {
  pointer-events: auto;
}

/* ── 12. Modal shell (slide-in panel) ──────────────────────── */
.hdfcl-sameday-modal__shell {
  width: min(501px, 100%);
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden auto;
  background: var(--hdfcl-sd-color-surface);
  border-radius: 20px 0 0 20px;
  -webkit-box-shadow: var(--hdfcl-sd-shadow-modal);
  box-shadow: var(--hdfcl-sd-shadow-modal);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform var(--hdfcl-sd-transition);
  transition: transform var(--hdfcl-sd-transition);
}

.hdfcl-sameday-modal.is-open .hdfcl-sameday-modal__shell {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* ── 13. Modal header ──────────────────────────────────────── */
.hdfcl-sameday-modal__header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--hdfcl-sd-color-header-bg);
}

.hdfcl-sameday-modal__title {
  margin: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
  color: var(--hdfcl-sd-color-text);
}

.hdfcl-sameday-modal__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--hdfcl-sd-color-muted-strong);
}

/* ── 14. Modal close button ────────────────────────────────── */
.hdfcl-sameday-icon-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  -webkit-box-flex: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1px solid var(--hdfcl-sd-color-border);
  border-radius: var(--hdfcl-sd-radius-sm);
  background: var(--hdfcl-sd-color-surface);
  cursor: pointer;
  color: var(--hdfcl-sd-color-muted);
  font-size: 22px;
  line-height: 1;
  font-family: inherit;
}

.hdfcl-sameday-icon-btn:focus-visible {
  outline: 2px solid var(--hdfcl-sd-color-danger);
  outline-offset: 2px;
}

/* ── 15. Modal body ────────────────────────────────────────── */
.hdfcl-sameday-modal__body {
  padding: 24px;
}

/* ── 16. Rich text content (author-driven) ─────────────────── */
.hdfcl-sameday-modal__rte {
  margin: 0;
  color: var(--hdfcl-sd-color-muted);
  font-size: 14px;
  line-height: 20px;
}

.hdfcl-sameday-modal__rte h1,
.hdfcl-sameday-modal__rte h2,
.hdfcl-sameday-modal__rte h3,
.hdfcl-sameday-modal__rte h4,
.hdfcl-sameday-modal__rte h5,
.hdfcl-sameday-modal__rte h6,
.hdfcl-sameday-modal__rte .hdfcl-sameday-modal__rte-heading {
  margin: 20px 0 12px;
  color: var(--hdfcl-sd-color-muted);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.hdfcl-sameday-modal__rte h1:first-child,
.hdfcl-sameday-modal__rte h2:first-child,
.hdfcl-sameday-modal__rte h3:first-child,
.hdfcl-sameday-modal__rte h4:first-child,
.hdfcl-sameday-modal__rte h5:first-child,
.hdfcl-sameday-modal__rte h6:first-child,
.hdfcl-sameday-modal__rte .hdfcl-sameday-modal__rte-heading:first-child {
  margin-top: 0;
}

.hdfcl-sameday-modal__rte p,
.hdfcl-sameday-modal__rte .hdfcl-sameday-modal__rte-paragraph {
  margin: 0 0 12px;
  color: var(--hdfcl-sd-color-muted);
  font-size: 14px;
  line-height: 20px;
}

.hdfcl-sameday-modal__rte p:last-child,
.hdfcl-sameday-modal__rte .hdfcl-sameday-modal__rte-paragraph:last-child {
  margin-bottom: 0;
}

.hdfcl-sameday-modal__rte ul,
.hdfcl-sameday-modal__rte ol,
.hdfcl-sameday-modal__rte .hdfcl-sameday-modal__rte-list {
  margin: 0 0 16px;
  padding-left: 21px;
  color: var(--hdfcl-sd-color-muted);
  font-size: 14px;
  line-height: 20px;
}

.hdfcl-sameday-modal__rte ul,
.hdfcl-sameday-modal__rte .hdfcl-sameday-modal__rte-list--unordered {
  list-style: disc;
}

.hdfcl-sameday-modal__rte ul li::marker,
.hdfcl-sameday-modal__rte .hdfcl-sameday-modal__rte-list--unordered li::marker {
  color: var(--hdfcl-sd-color-bullet-marker);
}

.hdfcl-sameday-modal__rte ol,
.hdfcl-sameday-modal__rte .hdfcl-sameday-modal__rte-list--ordered {
  list-style: decimal;
}

.hdfcl-sameday-modal__rte li {
  margin: 0 0 12px;
}

.hdfcl-sameday-modal__rte li:last-child {
  margin-bottom: 0;
}

.hdfcl-sameday-modal__rte strong {
  font-weight: 600;
  color: var(--hdfcl-sd-color-text);
}

.hdfcl-sameday-modal__rte a {
  color: var(--hdfcl-sd-color-danger);
  text-decoration: underline;
}

.hdfcl-sameday-modal__rte .hdfcl-sameday-modal__rte-disclaimer {
  margin: 16px 0 0;
  color: var(--hdfcl-sd-color-subtle);
  font-size: 12px;
  line-height: 16px;
}

/* ── 17. Bullet list (legacy) ─────────────────────────────── */
.hdfcl-sameday-modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -ms-grid;
  display: grid;
  gap: 12px;
}

.hdfcl-sameday-modal__list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  color: var(--hdfcl-sd-color-muted);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.hdfcl-sameday-modal__dot {
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background: var(--hdfcl-sd-color-dot);
}

/* ── 18. Note / footnote (legacy) ─────────────────────────── */
.hdfcl-sameday-modal__note {
  margin: 16px 0 0;
  color: var(--hdfcl-sd-color-subtle);
  font-size: 12px;
  line-height: 16px;
}

/* ── 19. Modal section (legacy) ───────────────────────────── */
.hdfcl-sameday-modal__section {
  margin-top: 20px;
}

.hdfcl-sameday-modal__section-title {
  margin: 0 0 12px;
  color: var(--hdfcl-sd-color-muted);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.hdfcl-sameday-modal__ordered-list {
  margin: 0;
  padding-left: 21px;
  color: var(--hdfcl-sd-color-muted);
  font-size: 14px;
  line-height: 20px;
  display: -ms-grid;
  display: grid;
  gap: 12px;
}

.hdfcl-sameday-modal__section-content {
  margin: 0;
  color: var(--hdfcl-sd-color-muted);
  font-size: 14px;
  line-height: 20px;
}

/* RTE content inside documentation section */
.hdfcl-sameday-modal__section-content strong {
  font-weight: 600;
  color: var(--hdfcl-sd-color-text);
}

.hdfcl-sameday-modal__section-content a {
  color: var(--hdfcl-sd-color-danger);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE BREAKPOINT  —  max-width: 767px
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* On mobile, hide desktop bg and show mobile bg (if authored) */
  .hdfcl-sameday-banner__card-bg--desktop {
    display: none;
  }

  .hdfcl-sameday-banner__card-bg--mobile {
    display: block;
  }

  .hdfcl-sameday-banner__layout-container {
    /* width: min(391px, calc(100% - 24px)); */
    width: 100%;
  }

  .hdfcl-sameday-banner {
    padding: 30px 20px;
  }

  .hdfcl-sameday-banner__card {
    min-height: 185px;
    background-color: var(--hdfcl-sd-color-card-bg);
  }

  .hdfcl-sameday-banner__content {
    width: 100%;
    padding: 20px;
  }

  .hdfcl-sameday-banner__title {
    font-size: 18px;
    line-height: 28px;
  }

  .hdfcl-sameday-banner__description {
    margin-top: 6px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 16px;
    max-width: 210px;
    width: 100%;
  }

  .hdfcl-sameday-btn {
    min-width: 135px;
  }

  .hdfcl-sameday-banner__illustration-wrap {
    width: 142px;
    right: 0;
    top: 68px;
    height: auto;
  }

  .hdfcl-sameday-banner__illustration-wrap picture {
    height: 100%;
  }

  .hdfcl-sameday-banner__illustration {
    width: 142px;
    height: 142px;
  }

  /* Modal slides up from bottom on mobile */
  .hdfcl-sameday-modal {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
  }

  .hdfcl-sameday-modal__shell {
    width: 100%;
    height: auto;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform var(--hdfcl-sd-transition);
    transition: transform var(--hdfcl-sd-transition);
  }

  .hdfcl-sameday-modal.is-open .hdfcl-sameday-modal__shell {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .hdfcl-sameday-modal__header {
    padding: 24px 20px 20px;
  }

  .hdfcl-sameday-modal__title {
    font-size: 20px;
    line-height: 28px;
  }

  .hdfcl-sameday-modal__subtitle {
    font-size: 16px;
    line-height: 24px;
  }

  .hdfcl-sameday-modal__body {
    padding: 20px;
  }
}

/* ============================================================
   Track Claim Component — hdfcl-tclaim
   Figma desktop: 1735:24298 (1366px target)
   Figma mobile : 1735:28343 (360px target)
   ============================================================ */

/* ── CSS variables scoped to component ─────────────────────── */
.hdfcl-tclaim {
  --tc-panel-bg: #fde8e7;
  --tc-brand-red: #ed1c24;
  --tc-grey-900: #1c2633;
  --tc-grey-700: #4b5563;
  --tc-grey-800: #374254;
  --tc-grey-600: #717684;
  --tc-border-light: #d2d5da;
  --tc-white: #ffffff;
  --tc-input-border: #c9d3e9;

  --tc-panel-radius: 18px;
  --tc-card-radius: 12px;
  --tc-input-radius: 8px;
  --tc-btn-radius: 8px;
  --tc-close-radius: 6px;

  --tc-card-shadow: 0 1px 2px rgba(28, 38, 51, 0.08);
  --tc-input-shadow: 0 1px 2px rgba(12, 17, 29, 0.05);
  --tc-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  --tc-transition: 300ms ease;
}

.hdfcl-tclaim *,
.hdfcl-tclaim *::before,
.hdfcl-tclaim *::after {
  box-sizing: border-box;
}

/* ── Section wrapper ────────────────────────────────────────── */
/* Centers the 352px panel on desktop; full-width on mobile */
.hdfcl-tclaim {
  display: flex;
  justify-content: center;
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Pink panel ─────────────────────────────────────────────── */
.hdfcl-tclaim__panel {
  background: var(--tc-panel-bg);
  padding: 30px 20px;
  width: 100%;
  border-radius: 0;
}

/* ── Panel heading ──────────────────────────────────────────── */
/* Mobile: 24px/36px — Desktop: 28px/40px */
.hdfcl-tclaim__heading {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--tc-grey-900);
  text-align: center;
  margin: 0 0 14px;
}

/* ── Claim type list ────────────────────────────────────────── */
.hdfcl-tclaim__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Row card — shared by <a> and <button> ──────────────────── */
.hdfcl-tclaim__btn,
.hdfcl-tclaim__btn:visited {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 16px;
  background: var(--tc-white);
  border: 1px solid #C9D3E9;
  border-radius: var(--tc-card-radius);
  box-shadow: var(--tc-card-shadow);
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Keep background white on tap — don't group with base to avoid
   overriding min-height from the desktop breakpoint */
.hdfcl-tclaim__btn:active {
  background: var(--tc-white);
}

.hdfcl-tclaim__btn:focus-visible {
  outline: 2px solid var(--tc-brand-red);
  outline-offset: 2px;
  border-radius: var(--tc-card-radius);
}

/* Suppress focus ring on mouse click / tap — keyboard only */
.hdfcl-tclaim__btn:focus:not(:focus-visible) {
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .hdfcl-tclaim__btn { transition: background-color 180ms ease; }
  .hdfcl-tclaim__btn:hover {
    background: #fff5f5;
  }
}

/* ── Row label ──────────────────────────────────────────────── */
.hdfcl-tclaim__btn-label {
  flex: 1;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--tc-grey-700);
}

/* ── Arrow-up-right icon ────────────────────────────────────── */
.hdfcl-tclaim__btn-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tc-brand-red);
}

/* ── Overlay backdrop ───────────────────────────────────────── */
.hdfcl-tclaim__overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 38, 51, 0.8);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--tc-transition),
    visibility var(--tc-transition);
}

.hdfcl-tclaim__overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ── Slideover dialog shell ─────────────────────────────────── */
/* Mobile: slides up from bottom. Desktop (≥768px): slides in from right. */
.hdfcl-tclaim__slideover {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: flex-end; /* anchor shell to bottom on mobile */
  justify-content: center;
}

.hdfcl-tclaim__slideover.is-open {
  pointer-events: auto;
}

.hdfcl-tclaim__slideover-shell {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 90dvh;
  overflow: hidden auto;
  background: var(--tc-white);
  border-radius: 18px 18px 0 0; /* rounded top corners for bottom sheet */
  box-shadow: var(--tc-modal-shadow);
  padding: 0 24px 20px;
  transform: translateY(100%); /* hidden below viewport */
  transition: transform var(--tc-transition);
}

.hdfcl-tclaim__slideover.is-open .hdfcl-tclaim__slideover-shell {
  transform: translateY(0);
}

/* ── Close button ───────────────────────────────────────────── */
.hdfcl-tclaim__close {
  position: sticky;
  top: 30px;
  margin-left: auto;
  /* margin-top: 30px; */
  margin-right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--tc-border-light);
  border-radius: var(--tc-close-radius);
  background: var(--tc-white);
  color: var(--tc-grey-700);
  cursor: pointer;
  flex-shrink: 0;
}

.hdfcl-tclaim__close:focus-visible {
  outline: 2px solid var(--tc-brand-red);
  outline-offset: 2px;
}

/* ── Slideover title ────────────────────────────────────────── */
.hdfcl-tclaim__slideover-title {
  max-width: 289px;
  width: 100%;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: var(--tc-grey-900);
  margin: 0 0 30px 0;
}

/* ── Form body ──────────────────────────────────────────────── */
.hdfcl-tclaim__slideover-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

/* ── Field group ────────────────────────────────────────────── */
.hdfcl-tclaim__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hdfcl-tclaim__field-label {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--tc-grey-700);
  margin-bottom: 0;
}

.hdfcl-tclaim__field-input {
  height: 40px;
  width: 100%;
  padding: 8px 8px 8px 12px;
  background: var(--tc-white);
  border: 1px solid var(--tc-input-border);
  border-radius: var(--tc-input-radius);
  box-shadow: var(--tc-input-shadow);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--tc-grey-900);
  outline: none;
  transition: border-color 160ms ease;
}

.hdfcl-tclaim__field-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.hdfcl-tclaim__field-input:focus {
  border-color: var(--tc-brand-red);
  box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.1);
}

.hdfcl-tclaim__field-input.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.hdfcl-tclaim__field-error {
  display: none;
  font-size: 12px;
  line-height: 16px;
  color: #dc2626;
}

.hdfcl-tclaim__field-error.is-visible {
  display: block;
}

/* ── NOTE block (Group Policy) ──────────────────────────────── */
.hdfcl-tclaim__note {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hdfcl-tclaim__note-heading {
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: var(--tc-grey-800);
}

.hdfcl-tclaim__note-list {
  padding-left: 18px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hdfcl-tclaim__note-list li {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--tc-grey-600);
}

/* ── Track CTA button ───────────────────────────────────────── */
.hdfcl-tclaim__track-btn {
  width: 100%;
  height: 40px;
  padding: 8px 20px;
  background: var(--tc-brand-red);
  color: var(--tc-white);
  border: none;
  border-radius: var(--tc-btn-radius);
  box-shadow: 0 1px 2px rgba(177, 17, 22, 0.12);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .hdfcl-tclaim__track-btn { transition: background 180ms ease; }
  .hdfcl-tclaim__track-btn:hover { background: #c91920; }
}

/* Suppress focus ring on mouse click / tap — keyboard only */
.hdfcl-tclaim__track-btn:focus:not(:focus-visible) {
  outline: none;
}

/* Disabled state: keep red visually, change cursor only */
.hdfcl-tclaim__track-btn:disabled {
  background: var(--tc-brand-red);
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.hdfcl-tclaim__track-btn:focus-visible {
  outline: 2px solid var(--tc-brand-red);
  outline-offset: 2px;
}

/* ── Result / status screen ─────────────────────────────────── */
.hdfcl-tclaim__result {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Claim Details card ── */
.hdfcl-tclaim__result-card {
  background: #eafaf0;
  border-radius: var(--tc-card-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.hdfcl-tclaim__result-card-heading {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #005e9e;
  margin: 0;
}

/* ── Rows container ── */
.hdfcl-tclaim__result-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Individual row ── */
.hdfcl-tclaim__result-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  line-height: 24px;
  color: var(--tc-grey-800);
}

.hdfcl-tclaim__result-dt {
  font-weight: 400;
  max-width: 193px;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  color: #374254;
}

.hdfcl-tclaim__result-dd {
  font-weight: 600;
  text-align: right;
  margin: 0;
  word-break: break-word;
  font-size: 14px;
  line-height: 20px;
  color: #374254;
}

/* ── Dashed divider between rows ── */
.hdfcl-tclaim__result-divider {
  border: none;
  border-top: 1px dashed var(--tc-input-border);
  margin: 0;
}

/* ── Back button (full-width red, matches Figma) ── */
.hdfcl-tclaim__back-btn {
  width: 100%;
  height: 40px;
  padding: 8px 20px;
  background: var(--tc-brand-red);
  color: var(--tc-white);
  border: none;
  border-radius: var(--tc-btn-radius);
  box-shadow: 0 1px 2px rgba(177, 17, 22, 0.12);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .hdfcl-tclaim__back-btn { transition: background 180ms ease; }
  .hdfcl-tclaim__back-btn:hover { background: #c91920; }
}

/* Suppress focus ring on mouse click / tap — keyboard only */
.hdfcl-tclaim__back-btn:focus:not(:focus-visible) {
  outline: none;
}

.hdfcl-tclaim__back-btn:focus-visible {
  outline: 2px solid var(--tc-brand-red);
  outline-offset: 2px;
}

/* ── API error message ──────────────────────────────────────── */
.hdfcl-tclaim__api-error {
  font-size: 13px;
  line-height: 20px;
  color: var(--tc-brand-red);
  background: rgba(237, 28, 36, 0.06);
  border: 1px solid rgba(237, 28, 36, 0.25);
  border-radius: var(--tc-input-radius);
  padding: 10px 14px;
  margin: 0;
}

/* ── Desktop — 1366px target ────────────────────────────────── */
@media (min-width: 768px) {
  .hdfcl-tclaim__panel {
    max-width: 352px;
    padding: 30px;
    border-radius: var(--tc-panel-radius);
  }

  .hdfcl-tclaim__heading {
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 20px;
  }

  .hdfcl-tclaim__btn {
    min-height: 88px;
    padding: 20px 16px;
    gap: 16px;
    border-radius: 18px;
  }

  .hdfcl-tclaim__list {
    gap: 20px;
  }

  .hdfcl-tclaim__field-label {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: var(--tc-grey-700);
}

.hdfcl-tclaim__field-input{
  height: 48px;
  padding: 12px 8px 12px 12px;
  font-size: 16px;
  line-height: 24px;
}

.hdfcl-tclaim__close{
  margin-top: 30px;
}

.hdfcl-tclaim__track-btn {
  padding: 10px 24px;
  height: 48px;
  font-size: 18px;
  line-height: 28px;
}

  .hdfcl-tclaim__slideover-shell {
    max-width: 530px;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 18px 0 0 18px; /* rounded left edge for right-side panel */
    padding: 0;
    transform: translateX(100%); /* hidden to the right */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .hdfcl-tclaim__slideover-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 30px 20px;
  }

  .hdfcl-tclaim__slideover-footer {
    padding: 0 20px 45px 20px;
    background: var(--tc-white);
    flex-shrink: 0;
  }

  .hdfcl-tclaim__slideover {
    align-items: stretch;
    justify-content: flex-end;
  }

  .hdfcl-tclaim__slideover.is-open .hdfcl-tclaim__slideover-shell {
    transform: translateX(0);
  }

  .hdfcl-tclaim__slideover-title {
    font-size: 28px;
    line-height: 40px;
    margin: 20px 0 28px;
  }

  /* Side-by-side context: pin trackClaim wrapper to 352px */
  .download_and_track_claim .trackClaim {
    flex: 0 0 352px;
    width: 352px;
  }

  .download_and_track_claim .hdfcl-tclaim {
    padding: 0;
    justify-content: flex-start;
  }

  .download_and_track_claim .hdfcl-tclaim__panel {
    max-width: 100%;
    width: 100%;
  }

  .hdfcl-tclaim__btn-icon {
    width: 24px;
    height: 24px;
  }

  .hdfcl-tclaim__result-dd {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
  }
  
  .hdfcl-tclaim__result-dt{
    max-width: 225px;
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  .hdfcl-tclaim__result-card-heading {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #005e9e;
  margin: 0;
}

.hdfcl-tclaim__back-btn {
  width: 100%;
  height: 48px;
  padding: 10px 24px;
  background: var(--tc-brand-red);
  color: var(--tc-white);
  border: none;
  border-radius: var(--tc-btn-radius);
  box-shadow: 0 1px 2px rgba(177, 17, 22, 0.12);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  cursor: pointer;
}
}

/*
 * ============================================================
 * HDFC Life Claims — Testimonials Component Styles
 * Clientlib category : hdfclifeinsurancecompany.testimonials
 * Methodology        : BEM  (hdfcl-claims-testimonials__*)
 * Approach           : Mobile-first → desktop at min-width: 768px
 *
 * Root class is hdfcl-claims-testimonials (not "testimonials") to avoid
 * collision with the AEM parsys CSS class injected on the grid wrapper.
 *
 * Design Tokens (Figma node 1735:23403)
 *   heading       #1c2633   color/grey/900
 *   sub-text      #003a61   color/brand-blue/800
 *   body-text     #1c2633   color/grey/900
 *   card-bg       #ffffff
 *   card-border   #c9d3e9   color/secondary/indigo/200
 *   star-filled   #F7BC0A
 *   star-empty    #D2D5DA
 *   progress-bg   #e5e7eb
 *   progress-fill #ed1c24   brand-red
 *
 * Desktop panel (≥ 768px): section padding 60px 157px
 * Mobile: padding 40px 20px
 * (Poppins font loaded globally via page template/policy)
 * ============================================================
 */


/* ── CSS variables scoped to component ── */
.hdfcl-claims-testimonials {
  /* Colors */
  --tst-white:            #ffffff;
  --tst-grey-900:         #1c2633;
  --tst-grey-text:        #000000;
  --tst-grey-icon:        #9CA3AF;
  --tst-brand-blue:       #003a61;
  --tst-brand-red:        #ed1c24;
  --tst-card-border:      #c9d3e9;
  --tst-progress-bg:      #e5e7eb;
  --tst-star-filled:      #F7BC0A;
  --tst-star-empty:       #D2D5DA;

  /* Spacing */
  --tst-section-pad-v:    30px;
  --tst-section-pad-h:    20px;
  --tst-section-gap:      20px;
  --tst-body-gap:         20px;
  --tst-intro-gap:        16px;
  --tst-nav-gap:          12px;
  --tst-card-pad:         28px;
  --tst-card-gap:         16px;
  --tst-card-inner-gap:   20px;
  --tst-header-gap:       8px;

  /* Sizes */
  --tst-card-width:       308px;
  --tst-progress-width:   156px;
  --tst-progress-height:  2px;
  --tst-star-size:        15px;
  --tst-nav-btn-size:     22px;

  /* Radii */
  --tst-card-radius:      12px;

  /* Transitions */
  --tst-carousel-transition: transform 0.4s ease;
  --tst-progress-transition: width 0.3s ease;
  --tst-color-transition:    color 0.2s ease;
}


/* ── 1. Scoped resets ── */
.hdfcl-claims-testimonials *,
.hdfcl-claims-testimonials *::before,
.hdfcl-claims-testimonials *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hdfcl-claims-testimonials ul {
  list-style: none;
}


/* ── 2. Section ── */
.hdfcl-claims-testimonials {
  display: flex;
  flex-direction: column;
  gap: var(--tst-section-gap);
  padding: 0 0 var(--tst-section-pad-v) var(--tst-section-pad-h);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--tst-white);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}


/* ── 3. Heading ── */
.hdfcl-claims-testimonials__heading {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: var(--tst-grey-900);
  letter-spacing: 0;
  text-align: center;
}


/* ── 4. Body row ── */
.hdfcl-claims-testimonials__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ── 5. Intro panel (quote + sub-text + nav) ── */
.hdfcl-claims-testimonials__intro {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 14px;
}

.hdfcl-claims-testimonials__quote-icon {
  display: block;
  color: var(--tst-card-border);
}

.hdfcl-claims-testimonials__quote-svg--desktop {
  display: none;
}

.hdfcl-claims-testimonials__sub-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--tst-brand-blue);
  letter-spacing: 0;
  max-width: 344px;
  width: 100%;
}


/* ── 6. Nav controls ── */
.hdfcl-claims-testimonials__nav {
  display: flex;
  align-items: center;
  gap: var(--tst-nav-gap);
  margin-top: 30px;
}

.hdfcl-claims-testimonials__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tst-nav-btn-size);
  height: var(--tst-nav-btn-size);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #000000;
  transition: var(--tst-color-transition);
  flex-shrink: 0;
}

.hdfcl-claims-testimonials__nav-btn:focus-visible {
  outline: 2px solid var(--tst-brand-red);
  outline-offset: 2px;
  border-radius: 2px;
}

.hdfcl-claims-testimonials__nav-btn--next {
  color: #000000;
}

.hdfcl-claims-testimonials__nav-btn:disabled {
  color: #9CA3AF;
  opacity: 1;
  cursor: not-allowed;
}


/* ── 7. Progress bar ── */
.hdfcl-claims-testimonials__progress {
  width: var(--tst-progress-width);
  height: var(--tst-progress-height);
  background: var(--tst-progress-bg);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.hdfcl-claims-testimonials__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--tst-brand-red);
  border-radius: 2px;
  transition: var(--tst-progress-transition);
}


/* ── 8. Carousel wrapper — native scroll container ── */
.hdfcl-claims-testimonials__carousel-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
  scroll-behavior: smooth;
}

.hdfcl-claims-testimonials__carousel-wrapper::-webkit-scrollbar {
  display: none;               /* Chrome / Safari */
}


/* ── 9. Cards track ── */
.hdfcl-claims-testimonials__track {
  display: flex;
  gap: var(--tst-card-gap);
  align-items: stretch;
}


/* ── 10. Individual card ── */
.hdfcl-claims-testimonials__card {
  flex: 0 0 var(--tst-card-width);
  background: var(--tst-white);
  border: 1px solid var(--tst-card-border);
  border-radius: var(--tst-card-radius);
  padding: var(--tst-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--tst-card-inner-gap);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.hdfcl-claims-testimonials__card-header {
  display: flex;
  flex-direction: column;
  gap: var(--tst-header-gap);
}

.hdfcl-claims-testimonials__card-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--tst-grey-text);
  letter-spacing: 0;
}


/* ── 11. Stars ── */
.hdfcl-claims-testimonials__stars {
  display: flex;
  gap: 5px;
  align-items: center;
}

.hdfcl-claims-testimonials__star {
  width: var(--tst-star-size);
  height: var(--tst-star-size);
  flex-shrink: 0;
  display: inline-flex;
}

.hdfcl-claims-testimonials__star svg {
  width: 100%;
  height: 100%;
}


/* ── 12. Card body ── */
.hdfcl-claims-testimonials__card-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--tst-grey-900);
  letter-spacing: 0;
}


/* ── 13. Desktop ≥ 768px ── */
@media (min-width: 768px) {
  .hdfcl-claims-testimonials__quote-svg--mobile {
    display: none;
  }

  .hdfcl-claims-testimonials__quote-svg--desktop {
    display: block;
  }

  .hdfcl-claims-testimonials {
    --tst-section-pad-v:  60px;
    --tst-section-pad-h:  0;
    --tst-section-gap:    20px;
    --tst-body-gap:       48px;
    --tst-intro-gap:      20px;
    --tst-card-gap:       44px;
    --tst-card-width:     342px;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
  }

  .hdfcl-claims-testimonials__heading {
    font-size: 28px;
    line-height: 40px;
  }

  /* Desktop: grid — intro + nav in left column, carousel spans both rows on right */
  .hdfcl-claims-testimonials__body {
    display: grid;
    grid-template-columns: 231px 1fr;
    grid-template-areas:
      "intro    carousel"
      "nav      carousel";
    gap: 48px;
    align-items: start;
  }

  .hdfcl-claims-testimonials__intro {
    grid-area: intro;
    gap: 24px;
    margin-bottom: 0;
  }

  .hdfcl-claims-testimonials__carousel-wrapper {
    grid-area: carousel;
    min-width: 0;
  }

  .hdfcl-claims-testimonials__nav {
    grid-area: nav;
    align-self: start;
    margin-top: 0;
  }

  .hdfcl-claims-testimonials__sub-text {
    font-size: 20px;
    line-height: 28px;
    max-width: unset;
  }
}

/* ===================================
   Trust Banner Component - Desktop Styles
   Optimized for 1366px viewport
   =================================== */
.container.claims-common {
  margin: 0px 174px !important;
  padding: 0px !important;
  border-radius: 22px !important;
  max-width: 100% !important;
}

/* Section Container */
.trustbanner section {
  background-color: #f5f5f7;
  /* padding: 30px 0; */
  width: 100%;
  border-radius: 22px;
  max-width: 1092px;
  margin-inline: auto;
}

/* Main Container - Single row: heading+CTA left, stats right */
.trust-banner__container {
  max-width: 1092px;
  margin: 0 auto;
  padding: 23px 74px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

/* Header Column: Heading + CTA stacked vertically */
.trust-banner__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  min-width: 182px;
}

/* Trust Matters Heading */
.trust-banner__heading {
  display: flex;
  flex-direction: column;
}

.trust-banner__heading p {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4b5563;
  margin: 0;
  max-width: 182px;
  width: 100%;
}

.trust-banner__heading h1,
.trust-banner__heading h2,
.trust-banner__heading h3 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #4b5563;
  margin: 0;
}

.trust-banner__heading strong,
.trust-banner__heading b {
  font-weight: 700;
}

/*
 * CTA button styles — only applied when author chooses
 * "CTA – Desktop only" or "CTA – Mobile only" from the RTE Styles dropdown.
 * The class lands on the <p> wrapping the <a>, so we target the child <a>.
 *
 * tb-cta--desktop : visible ≥ 768px, hidden on mobile
 * tb-cta--mobile  : hidden ≥ 768px, visible on mobile
 */
.tb-cta--desktop,
.tb-cta--mobile {
  margin: 0;
  padding: 0;
}

/* specificity (0,2,1) — beats global a:not([href]):not([class]) at (0,2,1) via cascade position */
.trust-banner__heading .tb-cta--desktop a,
.trust-banner__heading .tb-cta--mobile a,
.trust-banner__stats .tb-cta--desktop a,
.trust-banner__stats .tb-cta--mobile a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #ed1c24;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.trust-banner__heading .tb-cta--desktop a:hover,
.trust-banner__heading .tb-cta--mobile a:hover,
.trust-banner__stats .tb-cta--desktop a:hover,
.trust-banner__stats .tb-cta--mobile a:hover {
  color: #c71920;
}

/* Desktop: show desktop CTA, hide mobile CTA */
.tb-cta--desktop {
  display: block;
}

.tb-cta--mobile {
  display: none;
}
.trust-banner__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  align-items: start;
  flex: 1;
}

/* Individual Stat Box */
.trust-banner__stats > div,
.trust-banner__stats > article,
.trust-banner__stats > section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Stat Value (Large Number/Percentage) */
.trust-banner__stats h3,
.trust-banner__stats .stat-value {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 40px;
  color: #354f83;
  margin: 0 0 2px 0;
}

/* Stat Title */
.trust-banner__stats h4,
.trust-banner__stats .stat-title {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #354f83;
  margin: 0 0 2px 0;
}

/* Stat Subtitle/Description */
.trust-banner__stats p,
.trust-banner__stats .stat-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #3a568f;
  margin: 0;
}

/* Superscript/Subscript in Stats */
.trust-banner__stats sup {
  font-size: 60%;
  vertical-align: super;
}

.trust-banner__stats sub {
  font-size: 60%;
  vertical-align: sub;
}
/* ===================================
   Trust Banner Component - Mobile Responsive Styles
   Desktop: 1366px | Mobile: 360px
   =================================== */

/* Tablet Landscape */

.container.claims-common {
  margin: 0px !important;
}

/* Mobile Landscape & Small Tablets */
@media (max-width: 768px) {
  .trustbanner section {
    /* padding: 40px 0; */
    margin: 0 20px;
    width: unset;
  }

  /* Stack everything vertically */
  .trust-banner__container {
    padding: 30px;
    flex-direction: column;
    gap: 12px;
  }

  .trust-banner__header {
    gap: 12px;
    min-width: unset;
    width: 100%;
  }

  .trust-banner__heading h1,
  .trust-banner__heading h2,
  .trust-banner__heading h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .trust-banner__heading p {
    max-width: unset;
  }

  /* Stack statistics in 1 column */
  .trust-banner__stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .trust-banner__stats h3,
  .trust-banner__stats .stat-value {
    margin : 0px;
  }

  .trust-banner__stats > div{
    gap:0px;
  }

  .trust-banner__stats h4,
  .trust-banner__stats .stat-title {
    margin: 0 0 4px 0;
  }

  .trust-banner__know-more {
    font-size: 14px;
  }

  /* .trust-banner__stats p,
  .trust-banner__stats .stat-subtitle {
    font-size: 11px;
  } */

  /* Mobile: flip CTA visibility */
  .tb-cta--desktop {
    display: none;
  }

  .tb-cta--mobile {
    display: block;
  }
}

/*
 * HDFC Life Claims — WhatsApp Card
 * Mobile Figma  : 1735:28096  (353 × 273px, horizontal layout)
 * Desktop Figma : 3967:25229  (256 × 579px, vertical layout)
 *
 * Methodology : BEM  (.wac-wrapper / .wac / .wac__*)
 * Approach    : Mobile-first → desktop at min-width: 768px
 * Scoped tokens: --wac-* custom properties on .wac-wrapper
 *
 * Card background images are applied via CSS custom properties
 * set by script.js from data-bg-mobile / data-bg-desktop attributes.
 */

/* ── Design tokens ───────────────────────────────────────────── */
.wac-wrapper {
  --wac-font: "Poppins", sans-serif;
  --wac-bg: #e6f9f1;
  --wac-card-bg: none;
  --wac-radius: 16px;
  --wac-qr-radius: 12px;
  --wac-heading: #1c2633;
  --wac-wa-green: #27b077;
  --wac-caption: #1c2633;
  --wac-or-text: #4b5563;
  --wac-kw: #0c111d;
  --wac-phone: #0c111d;
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.wac-wrapper {
  font-family: var(--wac-font);
  /* padding: 20px 16px; */
  display: flex;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE (base)
   353 × 273px — horizontal: left = content, right = QR
   ═══════════════════════════════════════════════════════════════ */

.wac {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  /* max-width: 353px; */
  min-height: 165px;
  background-color: var(--wac-bg);
  background-image: var(--wac-card-bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--wac-radius);
  padding: 24px 17px 24px 24px;
  overflow: visible;
}

/* ── Left column — hidden on mobile, shown as display:contents on desktop ── */
.wac__left {
  flex: 1;
  display: none;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ── Content block (heading + caption) ──────────────────────── */
.wac__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Heading group ───────────────────────────────────────────── */
/* display:block allows heading (inline) + WhatsApp row (inline-flex) to
   flow as one continuous sentence on mobile */
.wac__heading-group {
  display: block;
}

.wac__heading {
  display: inline;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--wac-heading);
  letter-spacing: 0;
}

.wac__whatsapp-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 28px;
  vertical-align: middle;
  white-space: nowrap;
}

.wac__wa-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.wac__wa-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.wac__wa-label {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--wac-wa-green);
  letter-spacing: 0;
  white-space: nowrap;
}

/* ── Caption ─────────────────────────────────────────────────── */
.wac__caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--wac-caption);
  letter-spacing: 0;
  max-width: 168px;
}

/* ── Or-message section ──────────────────────────────────────── */
.wac__or-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}

.wac__or-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--wac-or-text);
  letter-spacing: 0;
  margin: 0;
}

.wac__claim-kw {
  font-weight: 600;
  font-style: normal;
}

.wac__phone {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--wac-phone);
  letter-spacing: 0;
  text-decoration: none;
}

.wac__phone:hover {
  color: var(--wac-phone);
}

.wac__phone:focus-visible {
  outline: 2px solid var(--wac-wa-green);
  border-radius: 2px;
}

/* ── QR code — hidden on mobile, restored on desktop ── */
.wac__qr {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE VIEW (Figma 3954:30373)
   353 × 165px — left: text content, right: phone mockup
   ══════════════════════════════════════════════════════════════ */

.wac__mobile-view {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
  position: relative;
}

.wac__mobile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.wac__mobile-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Phone + arrow link on mobile */
.wac__phone--mobile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #067848;
  text-decoration: none;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Arrow appended via CSS so it works whether authored inline or via RTE */
.wac__phone--mobile::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  background-color: #1C2633;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.7806 12.531L14.0306 19.281C13.8899 19.4218 13.699 19.5008 13.5 19.5008C13.301 19.5008 13.1101 19.4218 12.9694 19.281C12.8286 19.1403 12.7496 18.9494 12.7496 18.7504C12.7496 18.5514 12.8286 18.3605 12.9694 18.2198L18.4397 12.7504H3.75C3.55109 12.7504 3.36032 12.6714 3.21967 12.5307C3.07902 12.3901 3 12.1993 3 12.0004C3 11.8015 3.07902 11.6107 3.21967 11.4701C3.36032 11.3294 3.55109 11.2504 3.75 11.2504H18.4397L12.9694 5.78104C12.8286 5.64031 12.7496 5.44944 12.7496 5.25042C12.7496 5.05139 12.8286 4.86052 12.9694 4.71979C13.1101 4.57906 13.301 4.5 13.5 4.5C13.699 4.5 13.8899 4.57906 14.0306 4.71979L20.7806 11.4698C20.8504 11.5394 20.9057 11.6222 20.9434 11.7132C20.9812 11.8043 21.0006 11.9019 21.0006 12.0004C21.0006 12.099 20.9812 12.1966 20.9434 12.2876C20.9057 12.3787 20.8504 12.4614 20.7806 12.531Z' fill='%231C2633'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.7806 12.531L14.0306 19.281C13.8899 19.4218 13.699 19.5008 13.5 19.5008C13.301 19.5008 13.1101 19.4218 12.9694 19.281C12.8286 19.1403 12.7496 18.9494 12.7496 18.7504C12.7496 18.5514 12.8286 18.3605 12.9694 18.2198L18.4397 12.7504H3.75C3.55109 12.7504 3.36032 12.6714 3.21967 12.5307C3.07902 12.3901 3 12.1993 3 12.0004C3 11.8015 3.07902 11.6107 3.21967 11.4701C3.36032 11.3294 3.55109 11.2504 3.75 11.2504H18.4397L12.9694 5.78104C12.8286 5.64031 12.7496 5.44944 12.7496 5.25042C12.7496 5.05139 12.8286 4.86052 12.9694 4.71979C13.1101 4.57906 13.301 4.5 13.5 4.5C13.699 4.5 13.8899 4.57906 14.0306 4.71979L20.7806 11.4698C20.8504 11.5394 20.9057 11.6222 20.9434 11.7132C20.9812 11.8043 21.0006 11.9019 21.0006 12.0004C21.0006 12.099 20.9812 12.1966 20.9434 12.2876C20.9057 12.3787 20.8504 12.4614 20.7806 12.531Z' fill='%231C2633'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.wac__phone--mobile:hover {
  text-decoration: underline;
  color: #067848;
}

.wac__phone--mobile:active,
.wac__phone--mobile:visited {
  color: #067848;
}

.wac__phone--mobile:focus-visible {
  outline: 2px solid var(--wac-wa-green);
  border-radius: 2px;
}

/* ── RTE container resets (mobile heading + body) ── */
.wac__mobile-body-rte{
  max-width: 227px;
  width: 100%;
}
.wac__mobile-heading-rte,
.wac__mobile-body-rte {
  font-family: var(--wac-font);
}

.wac__mobile-heading-rte p,
.wac__mobile-heading-rte div,
.wac__mobile-body-rte p,
.wac__mobile-body-rte div {
  margin: 0;
  padding: 0;
}

/* WhatsApp icon image inserted inline in heading RTE */
.wac__mobile-heading-rte img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  object-fit: contain;
  display: inline;
}

/* Phone mockup — absolute right so it can overlap / overflow */
.wac__mobile-mockup {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-15%);
  width: 67px;
  flex-shrink: 0;
}

.wac__mobile-mockup img {
  width: 67px;
  height: 113px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.wac__qr-img {
  width: 98px;
  height: 99px;
  border-radius: var(--wac-qr-radius);
  display: block;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP ≥ 768px
   256 × 579px — vertical/stacked, everything centred
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .wac-wrapper {
    /* padding: 32px 40px;
    justify-content: flex-start; */
    padding: 0;
  }

  /* Hide the mobile-only view on desktop */
  .wac__mobile-view {
    display: none;
  }

  .wac {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 256px;
    min-height: 579px;
    /* padding: 40px 27px; */
    padding: 48px 10px 51px 10px;
    text-align: center;
    overflow: hidden;
  }

  /*
   * display:contents makes .wac__left's children participate directly
   * in .wac's flex column so CSS order slots QR between content and or-section.
   */
  .wac__left {
    display: contents;
  }

  .wac__content {
    order: 1;
    align-items: center;
    gap: 20px;
    text-align: center;
    width: 100%;
  }

  /* QR: visible on desktop */
  .wac__qr {
    display: flex;
    order: 2;
    flex-shrink: 0;
    align-self: center;
    width: 100%;
    justify-content: center;
  }

  .wac__or-section {
    order: 3;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    text-align: center;
  }

  .wac__heading-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .wac__heading {
    display: block;
    text-align: center;
  }

  .wac__whatsapp-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .wac__wa-label {
    font-size: 24px;
    line-height: 36px;
  }

  .wac__wa-icon {
    width: 28px;
    height: 28px;
  }

  .wac__caption {
    max-width: 167px;
    text-align: center;
  }

  .wac__phone {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
  }

  .wac__qr-img {
    width: 161px;
    height: auto;
  }
}

/* ── Hindi page — swap label / claim order ────────────────────── */

@media (min-width: 768px) {
  #hdfcl-claims-hi-page .wac {
    padding: 24px 10px 24px 10px;
  }
}
/*
 * ============================================================
 * HDFC Life Claims — Claims Section Container
 * Clientlib category : hdfclifeinsurancecompany.claimsSectionContainer
 * Methodology        : BEM  (csc__*)
 * Approach           : Mobile-first → desktop at min-width: 768px
 * Figma (mobile)     : 3954:29903
 * Figma (desktop)    : 3967:23023
 *
 * Purpose
 *   A full-width section wrapper that renders a centred Title + Subtitle
 *   header block, then exposes a responsivegrid parsys below it so authors
 *   can drop any other claims-revamp component into the section.
 *
 * Design Tokens
 *   Title colour   #1c2633   color/grey/900
 *   Subtitle colour #4b5563  color/grey/700
 *   Font family    Poppins
 *
 * Typography
 *   Mobile  — Title   : 600 / 24px / 36px lh
 *             Subtitle: 400 / 14px / 20px lh
 *   Desktop — Title   : 600 / 30px / 40px lh
 *             Subtitle: 400 / 16px / 24px lh
 * ============================================================
 */

/* ── 1. Scoped box-sizing only — NO margin/padding reset to avoid
        overriding child components' own styles (same specificity, later
        in embed order would win via cascade). ── */
.csc,
.csc__header,
.csc__title,
.csc__subtitle,
.csc__content {
  box-sizing: border-box;
}

/* ── 2. Section wrapper ── */
.csc {
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  background: #ffffff; /* default; overridden by inline style when bgColor is authored */
  padding: 40px 20px;
}

/* ── 3. Header block (title + subtitle) ── */
.csc__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 24px;
}

/* ── 4. Title ── */
.csc__title {
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0;
  color: #1c2633;
}

/* ── 5. Subtitle ── */
.csc__subtitle {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  color: #4b5563;
  max-width: 320px;
}

/* ── 6. Content parsys wrapper ── */
.csc__content {
  width: 100%;
}

/* ── 7. Desktop overrides (min-width: 768px) ──────────────── */
@media (min-width: 768px) {
  .csc {
    padding: 60px 80px 0px 80px;
  }

  .csc__header {
    margin-bottom: 35px;
  }

  .csc__title {
    font-size: 28px;
    line-height: 40px;
  }

  .csc__subtitle {
    font-size: 14px;
    line-height: 20px;
    max-width: 600px;
  }
}

/*
 * ============================================================
 * HDFC Life Claims — Stepper Image With Text
 * Clientlib : hdfclifeinsurancecompany.stepperImageWithText
 * Methodology: BEM  (.claimnew__*)
 * Approach   : Mobile-first → desktop at min-width: 768px
 * Figma       : 3886:7937 (desktop) / 3954:29041 (mobile)
 *
 * Design Tokens (Figma)
 *   Title       #1c2633  Poppins 600 / 28px / 40px lh  (desktop)
 *               #1c2633  Poppins 600 / 24px / 36px lh  (mobile)
 *   Step number #9ca3af  Poppins 600 / 28px / 40px lh  (embedded in DAM asset)
 *   Step title  #4b5563  Poppins 600 / 14px / 20px lh
 *   Step desc   #4b5563  Poppins 400 / 12px / 16px lh
 *   CTA btn     #ed1c24  Poppins 500 / 16px / 24px lh
 *
 * Wave: single authored DAM image, positioned absolutely
 *   Mobile  — stretches 260% wide behind horizontal scroll
 *   Desktop — 100% width behind the 3 step columns
 * ============================================================
 */

/* ── 1. Scoped box-sizing ── */
.stepperImageWithText .claimnew,
.stepperImageWithText .claimnew *,
.stepperImageWithText .claimnew *::before,
.stepperImageWithText .claimnew *::after {
  box-sizing: border-box;
}

/* ── 2. Section wrapper ── */
.stepperImageWithText .claimnew {
  position: relative;
  width: 100%;
  padding: 0 0 30px 0;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── 3. Content row: column on mobile, row on desktop ── */
.stepperImageWithText .claimnew__content {
  position: relative;
  z-index: 1;
  max-width: 608px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── 4. Left column: title + CTA ── */
.stepperImageWithText .claimnew__left {
  width: 100%;
}

.stepperImageWithText .claimnew__title {
  margin: 0 20px;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0;
  color: #1c2633;
}

/* ── 5. CTA button ── */
.stepperImageWithText .claimnew__button,
.stepperImageWithText .claimnew__button:visited,
.stepperImageWithText .claimnew__button:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 8px;
  background: #ed1c24;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgba(177, 17, 22, 0.12);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .stepperImageWithText .claimnew__button {
    transition: background 0.2s ease;
  }
  .stepperImageWithText .claimnew__button:hover {
    background: #c4161c;
    color: #ffffff;
    text-decoration: none;
  }
}

.stepperImageWithText .claimnew__button:focus-visible {
  outline: 2px solid #ed1c24;
  outline-offset: 2px;
}

/* Desktop CTA hidden on mobile; mobile CTA shown on mobile */
.stepperImageWithText .claimnew__button--desktop {
  display: none;
}

.stepperImageWithText .claimnew__button--mobile {
  display: inline-flex;
  margin: 20px 0 0 20px;
}

/* ── 6. Right column ── */
.stepperImageWithText .claimnew__right {
  width: 100%;
}

/* ── 7. Steps wrapper: contains wave + cards ── */
.stepperImageWithText .claimnew__steps-wrapper {
  position: relative;
  isolation: isolate; /* creates stacking context so z-index on children is self-contained */
  overflow: hidden;
}

/* ── 8. Wave: single background image ──
   Mobile: stretched wide behind the full horizontal scroll area
   Element is now <picture> — must be display:block for absolute positioning to work  */
.stepperImageWithText .claimnew__wave {
  position: absolute;
  display: block;
  top: 35px;
  left: 0;
  width: 260%;
  height: auto;
  max-width: 602px;
  pointer-events: none;
  z-index: -1;
}

.stepperImageWithText .claimnew__wave img {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
}

/* ── 9. Steps row: horizontal scroll on mobile ── */
.stepperImageWithText .claimnew__steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  /* hide scrollbar */
  scrollbar-width: none;
}

.stepperImageWithText .claimnew__steps::-webkit-scrollbar {
  display: none;
}

/* ── 10. Individual step card ── */
.stepperImageWithText .claimnew__step {
  flex: 0 0 78%;
  max-width: 78%;
  min-width: 0;
  scroll-snap-align: start;
  padding: 0;
  text-align: left;
}

/* ── 11. Step illustration
   Numbers are embedded in the DAM asset — no code overlay needed
   Mobile  : ~160 × 140 px  (Figma 3954:29041 — w-[157.411px] h-[117.528px])
   Desktop : ~130 × 130 px  (Figma 3886:7937)                               ── */

.stepperImageWithText .claimnew__step-image picture {
  display: block;
}

.stepperImageWithText .claimnew__step-image img {
  max-width: 160px;
  max-height: 140px;
  width: auto;
  height: auto;
  display: block;
}

/* ── 12. Step title ── */
.stepperImageWithText .claimnew__step-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  color: #4b5563;
}

/* ── 13. Step description ── */
.stepperImageWithText .claimnew__step-description p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
  color: #4b5563;
}

.stepperImageWithText .claimnew__step:nth-of-type(1) { 
    max-width: 151px;
    width: 100%;
    margin: 0;
    padding-left: 20px;
}

.stepperImageWithText .claimnew__step:nth-of-type(1) .claimnew__step-image {
    max-width: 141px;
    max-height: 106px;
    width: 100%;
    margin: 0 0 12px 0;
}

.stepperImageWithText .claimnew__step:nth-of-type(2) { 
    max-width: 184px;
    width: 100%;
    margin: 61px 0 0 48px;
}

.stepperImageWithText .claimnew__step:nth-of-type(2) .claimnew__step-image {
    max-width: 142px;
    max-height: 107px;
    width: 100%;
    margin: 0 0 2px 0;
}

.stepperImageWithText .claimnew__step:nth-of-type(3) { 
    max-width: 157px;
    width: 100%;
    margin: 0 0 0 48px;
}

.stepperImageWithText .claimnew__step:nth-of-type(3) .claimnew__step-image {
    max-width: 107px;
    max-height: 99px;
    width: 100%;
    margin: 0 0 7px 0;
}

  /* Ellipse 13481 — left blob (571×571px, partially off-screen left) */
  .stepperImageWithText .claimnew::before {
    content: '';
    position: absolute;
    width: 285px;
    height: 285px;
    border-radius: 100%;
    background: #fef1f1;
    filter: blur(83.5px);
    left: -78px;
    bottom: 160px;
    pointer-events: none;
    z-index: -10;
  }

    /* Ellipse 13482 — right blob (622×622px, partially off-screen right) */
  .stepperImageWithText .claimnew::after {
    content: '';
    position: absolute;
    width: 183px;
    height: 161px;
    border-radius: 100%;
    background:#fef1f1;
    filter: blur(33.5px);
    bottom: 0;
    right: 0;
    pointer-events: none;
    z-index: -10;
  }

/* ════════════════════════════════════════════════════════
   Desktop overrides  (min-width: 768px)
   ════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .stepperImageWithText .claimnew {
    padding: 60px 0 65px;
  }

  /* Row layout: left (fixed 320px) + right (flex 1) */
  .stepperImageWithText .claimnew__content {
    max-width: 1097px;
    width: 100%;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
  }

  .stepperImageWithText .claimnew__left {
    max-width: 291px;
    width: 100%;
    flex-shrink: 0;
    padding-block: 43px;
  }

  .stepperImageWithText .claimnew__title {
    font-size: 28px;
    line-height: 40px;
    margin: 0 0 80px 0;
  }

  /* Show desktop CTA, hide mobile CTA */
  .stepperImageWithText .claimnew__button--desktop {
    display: inline-flex;
  }

  .stepperImageWithText .claimnew__button--mobile {
    display: none;
  }

  .stepperImageWithText .claimnew__right {
    flex: 1;
    min-width: 0;
  }

  /* Wrapper: let wave overflow vertically on desktop */
  .stepperImageWithText .claimnew__steps-wrapper {
    min-height: 326px;
    overflow: visible;
  }

  /* Wave: full width on desktop, positioned behind all 3 step columns */
  .stepperImageWithText .claimnew__wave {
    top: 53px;
    width: 100%;
    max-width: none;
  }

  /* Steps: no scroll on desktop; evenly spaced with zigzag */
  .stepperImageWithText .claimnew__steps {
    flex-wrap: nowrap;
    overflow: visible;
    justify-content: space-between;
    padding-bottom: 0;
    gap: 0;
  }

  .stepperImageWithText .claimnew__step {
    flex: 1;
    max-width: none;
    padding: 0;
    scroll-snap-align: unset;
    text-align: left;
  }

  /* Zigzag: step 1 top → step 2 lower → step 3 top */
  .stepperImageWithText .claimnew__step:nth-of-type(1) { 
    max-width: 219px;
    width: 100%;
    margin: 22px 0 0 58px;
    padding: 0;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(1) .claimnew__step-image {
    max-width: 182px;
    max-height: 147px;
    width: 100%;
    margin: 0 0 18px 0;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(1) .claimnew__step-body {
    margin-left: 23px;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(2) { 
    max-width: 209px;
    width: 100%;
    margin: 73px 0 0 35px;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(2) .claimnew__step-image {
    max-width: 172px;
    max-height: 138px;
    width: 100%;
    margin: 0 0 18px 0;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(2) .claimnew__step-body {
    margin-left: 14px;
  }

  .stepperImageWithText .claimnew__step:nth-of-type(3) { 
    max-width: 193px;
    width: 100%;
    margin: 0 0 0 93px; 
  }
  .stepperImageWithText .claimnew__step:nth-of-type(3) .claimnew__step-image {
    max-width: 154px;
    max-height: 121px;
    width: 100%;
    margin: 0 0 26px 0;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(3) .claimnew__step-body {
    margin-left: 20px;
  }

  .stepperImageWithText .claimnew__step-image img {
    max-width: unset;
    max-height: unset;
    width: 100%;
    height: 100%;
  }

  .stepperImageWithText .claimnew__step-title {
    margin-bottom: 12px;
  }

  .stepperImageWithText .claimnew__step-body{
    max-width: 195px;
    width: 100%;
  }

  /* ── Decorative gradient ellipses (Figma: Ellipse 13481 + 13482) ── */

  /* Ellipse 13481 — left blob (571×571px, partially off-screen left) */
  .stepperImageWithText .claimnew::before {
    content: '';
    position: absolute;
    width: 571px;
    height: 571px;
    border-radius: 100%;
    background: #fef1f1;
    filter: blur(83.5px);
    left: -43px;
    bottom: 40px;
    pointer-events: none;
    z-index: -10;
  }

  /* Ellipse 13482 — right blob (622×622px, partially off-screen right) */
  .stepperImageWithText .claimnew::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 361px;
    border-radius: 100%;
    background:#fef1f1;
    filter: blur(83.5px);
    top: 30px;
    right: 0px;
    pointer-events: none;
    z-index: -10;
  }
}

/* ================================================================
   CSR Modal — Claim Settlement Ratio
   ================================================================ */

/* ── Overlay / positioning shell ──────────────────────────────── */
.csr-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.csr-modal.is-open {
  display: flex;
}

/* ── Backdrop ─────────────────────────────────────────────────── */
.csr-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 38, 51, 0.8);
  cursor: pointer;
}

/* ── Panel (desktop — centered white box) ─────────────────────── */
.csr-modal__panel {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 28px;
  width: 100%;
  max-width: 834px; /* 834 px content + 40 px scroll-gutter */
  max-height: 799px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  transform: scale(0.8);
}

/* ── Header ───────────────────────────────────────────────────── */
.csr-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

.csr-modal__header-text {
  flex: 1 1 0;
  min-width: 0;
}

.csr-modal__title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 40px;
  color: #1c2633;
  margin: 0;
}

.csr-modal__subtitle {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #4b5563;
  margin: 0;
}

/* ── Close button ─────────────────────────────────────────────── */
.csr-modal__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: 6px;
}

.csr-modal__close:focus-visible {
  outline: 2px solid #005e9e;
  outline-offset: 2px;
}

.csr-modal__close-icon {
  display: block;
}

/* ── Chart images ─────────────────────────────────────────────── */
.csr-modal__chart-wrap {
  max-width: 675px;
  width: 100%;
  margin: 0 auto;
}

.csr-modal__chart {
  display: block;
  width: 100%;
  height: auto;
}

.csr-modal__chart--mobile {
  display: none;
}

/* ── Year data cards — desktop: flex row ──────────────────────── */
.csr-modal__scroll-body {
  width: 100%;
  /* overflow-y: auto;
  -webkit-overflow-scrolling: touch; */
}

.csr-modal__years {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 20px;
  margin-bottom: 30px;
  overflow-x: auto;
}

/* Desktop card: 119×138px vertical white box, NO badge */
.csr-modal__year-card {
  flex: 1 1 0;
  max-width: 119px;
  height: 138px;
  background: #ffffff;
  border: 1px solid #c9d3e9;
  border-radius: 12px;
  padding: 14px 11px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
}

/* Badge hidden on desktop — year label is shown as chart axis */
.csr-modal__year-badge {
  display: none;
}

/* Desktop card body: two stacked rows, no divider */
.csr-modal__year-data {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  height: auto;
  box-sizing: border-box;
}

/* Divider hidden on desktop */
.csr-modal__year-divider {
  display: none;
}

.csr-modal__year-col {
  display: flex;
  flex-direction: column;
}

.csr-modal__year-value {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #374254;
  margin: 0;
}

.csr-modal__year-meta {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
  color: #717684;
  margin: 0;
}

/* ── Footer disclaimer ────────────────────────────────────────── */
.csr-modal__disclaimer {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  color: #717684;
  margin: 0;
  text-align: center;
}

/* ================================================================
   Mobile — bottom sheet
   ================================================================ */
@media (max-width: 767px) {
  .csr-modal {
    align-items: flex-end;
  }

  .csr-modal__panel {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 22px 20px 20px 20px;
    max-height: 90vh;
    overflow: hidden;
    transform: none;
    display: flex;
    flex-direction: column;
  }

  .csr-modal__title {
    font-size: 20px;
    line-height: 28px;
  }

  .csr-modal__subtitle {
    font-size: 12px;
    line-height: 16px;
  }

  /* swap chart images */
  .csr-modal__chart--desktop {
    display: none;
  }

  .csr-modal__chart--mobile {
    display: block;
  }

  /* cards: stacked vertical rows */
  .csr-modal__years {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 19px;
    overflow-x: visible;
    margin-bottom: 0;
  }

  /* Mobile card: horizontal row, no fixed height, badge on top border */
  .csr-modal__year-card {
    flex: none;
    height: auto;
    min-width: 0;
    background: none;
    border: none;
    border-radius: 0;
    max-width: unset;
    width: 100%;
    padding: 0;
  }

  /* Badge visible on mobile, floats on top-left of the white box */
  .csr-modal__year-badge {
    display: inline-block;
    position: absolute;
    top: -8px;
    left: 34px;
    background: #e6ebf5;
    color: #374254;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    width: 49px;
    height: 19px;
    padding: 0;
    text-align: center;
    border-radius: 14px;
    white-space: nowrap;
    z-index: 1;
  }

  /* Mobile card body: horizontal row in a white bordered box */
  .csr-modal__year-data {
    background: #ffffff;
    border: 1px solid #c9d3e9;
    border-radius: 8px;
    padding: 9px 16px;
    padding: 12px 32px 7px 35px;
    min-height: 54px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .csr-modal__year-col {
    max-width: 155px;
    gap: 2px;
  }

  /* Vertical divider between amount and days */
  .csr-modal__year-divider {
    display: block;
    width: 1px;
    height: 29px;
    background: #e6ebf5;
    flex-shrink: 0;
    margin: 0 11px 0 6px;
  }

  .csr-modal__chart-wrap{
    max-width: 338px;
    width: 100%;
    margin-bottom: 12px;
  }

  .csr-modal__header {
    margin-bottom: 11px;
  }

  .csr-modal__year-value{
    font-size: 12px;
    line-height: 16px;
  }

  .csr-modal__disclaimer{
    max-width: 234px;
    margin: 16px auto 0 auto ;
  }

  .csr-modal__scroll-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ================================================================
   AEM Author — make the (normally hidden) modal visible in edit mode
   ================================================================ */
.cq-wcm-edit .csr-modal {
  position: relative;
  display: flex;
  z-index: 1;
}

.cq-wcm-edit .csr-modal__backdrop {
  display: none;
}

.cq-wcm-edit .csr-modal__panel {
  max-height: none;
  overflow: visible;
}


/* Hindi Page Style */
@media (max-width: 767px) {
  #hdfcl-claims-hi-page .csr-modal__year-card {
    flex: 1 1 0;
  }
}
/* ═══════════════════════════════════════════════════════════
   Sticky Widget — style.css
   BEM prefix: sw
   Desktop : QR code image + text below QR
   Mobile  : Heading text + link CTA (horizontal bar)
   ═══════════════════════════════════════════════════════════ */

/* ── CSS custom properties ──────────────────────────────── */
.sw {
  --sw-card-bg: #ffffff;
  --sw-card-radius: 12px;
  --sw-card-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  --sw-card-padding: 8px 8px 10px;
  --sw-card-width: 122px;
  --sw-qr-size: 76px;
  --sw-heading-size: 12px;
  --sw-heading-lh: 16px;
  --sw-heading-color: #1c2633;
  --sw-cta-size: 12px;
  --sw-cta-lh: 16px;
  --sw-cta-color: #ed1c24;
  --sw-cta-radius: 6px;
  --sw-z-fixed: 200;
  /* Offset defaults — each can be overridden individually via
     inline style on the element (authored in dialog)          */
  --sw-offset-top: 16px;
  --sw-offset-right: 16px;
  --sw-offset-bottom: 16px;
  --sw-offset-left: 16px;
  /* Mobile offset defaults — fall back to desktop values if not authored */
  --sw-mobile-offset-top: 16px;
  --sw-mobile-offset-right: 16px;
  --sw-mobile-offset-bottom: 16px;
  --sw-mobile-offset-left: 16px;
  --sw-transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ── Wrapper ────────────────────────────────────────────── */
.sw {
  position: fixed; /* always fixed — not in document flow */
  z-index: var(--sw-z-fixed);
  width: fit-content; /* never stretch to grid width */
  transition: var(--sw-transition);
}

/* Author edit mode: bring back into flow so the page layout is usable */
.cq-wcm-edit .sw {
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
  width: fit-content;
}

/* ── Card base ──────────────────────────────────────────── */
.sw__card {
  background: var(--sw-card-bg);
  border-radius: var(--sw-card-radius);
  box-shadow: var(--sw-card-shadow);
  padding: var(--sw-card-padding);
  box-sizing: border-box;
}

/* ── Desktop card: QR on top, text below ────────────────── */
.sw__card--desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: var(--sw-card-width);
  text-align: center;
  padding: 18px 23px 22px 23px;
}

.sw__qr-wrap {
  width: var(--sw-qr-size);
  height: 80px;
  flex-shrink: 0;
}

.sw__qr-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Heading ────────────────────────────────────────────── */
.sw__heading {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: var(--sw-heading-size);
  line-height: var(--sw-heading-lh);
  color: var(--sw-heading-color);
  margin: 0;
  word-break: break-word;
}

/* ── CTA (anchor only on mobile) ────────────────────────── */
.sw__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: var(--sw-cta-size);
  line-height: var(--sw-cta-lh);
  color: var(--sw-cta-color);
  /* border-radius: var(--sw-cta-radius); */
  /* padding: 4px 8px; */
  background: transparent;
  /* border: 1px solid var(--sw-cta-color); */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 160ms ease;
  flex-shrink: 0;
}

.sw__cta:hover,
.sw__cta:focus-visible {
  opacity: 0.75;
  outline: 2px solid var(--sw-cta-color);
  outline-offset: 2px;
}

.sw__cta--inactive {
  cursor: default;
  pointer-events: none;
}

/* ── Desktop card visible / mobile hidden ───────────────── */
.sw__card--desktop {
  display: flex;
}
.sw__card--mobile {
  display: none;
}

/* ── Desktop positions (≥ 768px) — CSS-driven, no JS class needed ── */
@media (min-width: 768px) {
  .sw[data-desktop-position="top-right"] {
    top: var(--sw-offset-top);
    right: var(--sw-offset-right);
    left: auto;
    bottom: auto;
    transform: none;
  }
  .sw[data-desktop-position="top-left"] {
    top: var(--sw-offset-top);
    left: var(--sw-offset-left);
    right: auto;
    bottom: auto;
    transform: none;
  }
  .sw[data-desktop-position="bottom-right"] {
    bottom: var(--sw-offset-bottom);
    right: var(--sw-offset-right);
    left: auto;
    top: auto;
    transform: none;
  }
  .sw[data-desktop-position="bottom-left"] {
    bottom: var(--sw-offset-bottom);
    left: var(--sw-offset-left);
    right: auto;
    top: auto;
    transform: none;
  }
  .sw[data-desktop-position="right"] {
    top: 50%;
    right: var(--sw-offset-right);
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
  }
  .sw[data-desktop-position="left"] {
    top: 50%;
    left: var(--sw-offset-left);
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
  }
}

/* ── Reveal-on-scroll hidden state — JS adds .sw--scroll-hidden ── */
/* when author enables "hide until scrolled" option              */
.sw.sw--scroll-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* ── Exit animation — JS adds .sw--exited when exit section enters viewport */
.sw.sw--exited {
  opacity: 0;
  pointer-events: none;
}

/* slide off to the correct side */
@media (min-width: 768px) {
  .sw.sw--exited[data-desktop-position="top-right"],
  .sw.sw--exited[data-desktop-position="bottom-right"] {
    transform: translateX(calc(100% + var(--sw-offset-right) + 10px));
  }
  .sw.sw--exited[data-desktop-position="top-left"],
  .sw.sw--exited[data-desktop-position="bottom-left"] {
    transform: translateX(calc(-100% - var(--sw-offset-left) - 10px));
  }
  .sw.sw--exited[data-desktop-position="right"] {
    transform: translateX(calc(100% + var(--sw-offset-right) + 10px))
      translateY(-50%);
  }
  .sw.sw--exited[data-desktop-position="left"] {
    transform: translateX(calc(-100% - var(--sw-offset-left) - 10px))
      translateY(-50%);
  }
}

/* ══════════════════════════════════════════════════════════
   Mobile (≤ 767px)
   Card: horizontal bar — heading left, CTA right
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* swap visibility */
  .sw__card--desktop {
    display: none;
  }

  /* hide entire widget when mobileEnabled = false */
  .sw[data-mobile-enabled="false"] {
    display: none !important;
  }

  .sw__card--mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;  
    width: auto; /* content-width only — never full screen */
    border-radius: 18px 0 0 18px;
    padding: 13px 2px 15px 12px;
    box-sizing: border-box;
  }

  .sw__card--mobile .sw__heading {
    font-size: 10px;
    white-space: normal;
    flex: 1;
    min-width: 0;
    max-width: 104px;
    width: 100%;
  }

  /* ── Mobile positions — CSS-driven, always fixed ───── */
  .sw[data-mobile-position="top-right"] {
    top: var(--sw-mobile-offset-top);
    right: var(--sw-mobile-offset-right);
    left: auto;
    bottom: auto;
    transform: none;
  }
  .sw[data-mobile-position="top-left"] {
    top: var(--sw-mobile-offset-top);
    left: var(--sw-mobile-offset-left);
    right: auto;
    bottom: auto;
    transform: none;
  }
  .sw[data-mobile-position="bottom-right"] {
    bottom: var(--sw-mobile-offset-bottom);
    right: var(--sw-mobile-offset-right);
    left: auto;
    top: auto;
    transform: none;
  }
  .sw[data-mobile-position="bottom-left"] {
    bottom: var(--sw-mobile-offset-bottom);
    left: var(--sw-mobile-offset-left);
    right: auto;
    top: auto;
    transform: none;
  }
  .sw[data-mobile-position="right"] {
    top: 50%;
    right: var(--sw-mobile-offset-right);
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
  }
  .sw[data-mobile-position="left"] {
    top: 50%;
    left: var(--sw-mobile-offset-left);
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
  }

  /* ── Mobile exit animation ──────────────────────────── */
  .sw.sw--exited[data-mobile-position="top-right"],
  .sw.sw--exited[data-mobile-position="bottom-right"] {
    transform: translateX(calc(100% + var(--sw-mobile-offset-right) + 10px));
  }
  .sw.sw--exited[data-mobile-position="top-left"],
  .sw.sw--exited[data-mobile-position="bottom-left"] {
    transform: translateX(calc(-100% - var(--sw-mobile-offset-left) - 10px));
  }
  .sw.sw--exited[data-mobile-position="right"] {
    transform: translateX(calc(100% + var(--sw-mobile-offset-right) + 10px))
      translateY(-50%);
  }
  .sw.sw--exited[data-mobile-position="left"] {
    transform: translateX(calc(-100% - var(--sw-mobile-offset-left) - 10px))
      translateY(-50%);
  }
}

/*
 * ============================================================
 * HDFC Life Claims — Notice Banner / Ticker Strip Styles
 * Clientlib category : hdfclifeinsurancecompany.noticeBanner
 * Methodology        : BEM  (hdfcl-nb__*)
 * Approach           : Mobile-first → desktop at min-width: 768px
 * Figma              : 2658:6747 (desktop) / 3980:20161 (mobile)
 *
 * Design Tokens
 *   background  #121a2c   color/secondary/indigo/950
 *   text        #fec24b   color/secondary/warning/300
 *
 * Layout
 *   Full-width bar, 39px height
 *   Left : static icon (does not scroll)
 *   Right: marquee ticker text (loops continuously)
 * ============================================================
 */

/* ── 1. Ticker animation keyframe ── */
@keyframes hdfcl-nb-ticker {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ── 2. Banner wrapper ── */
.hdfcl-nb {
  background-color: #121a2c;
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  padding-block: 14px;
  margin-top: 78px;
}

/* ── 3. Static icon — shrinks to its natural size, never scrolls ── */
.hdfcl-nb__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 10px 0 16px;
}

.hdfcl-nb__icon {
  display: block;
  width: 17px;
  height: 18px;
}

/* ── 4. Ticker track — clips the scrolling text ── */
.hdfcl-nb__ticker {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* Fade edges to hint scrolling */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

/* ── 5. Inner strip — contains two copies of the text for seamless loop ── */
.hdfcl-nb__ticker-inner {
  display: flex;
  width: max-content;
  /* Animate at a comfortable reading speed.
     Adjust --nb-duration via JS if text length varies. */
  animation: hdfcl-nb-ticker 20s linear infinite;
}

/* ── 6. Individual text span ── */
.hdfcl-nb__ticker-text {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  color: #fec24b;
  white-space: nowrap;
  padding: 0 60px 0 0; /* gap between the two copies */
}

/* Links inside ticker text */
.hdfcl-nb__ticker-text a {
  color: #fec24b;
  text-decoration: underline;
}

.hdfcl-nb__ticker-text a:hover {
  text-decoration: none;
}

/* Strip any paragraph wrapper RTE may inject */
.hdfcl-nb__ticker-text p {
  display: inline;
  margin: 0;
  padding: 0;
  padding-left: 10px;
}

/* ── 7. Desktop ≥ 768px ── */
@media (min-width: 768px) {
  .hdfcl-nb {
    min-height: 39px;
    width: 100%;
    padding-block: 12px;
    margin-top: 0;
  }

  .hdfcl-nb__ticker-text{
    font-weight: 400;
  }

  .hdfcl-nb__icon-wrap {
    padding: 0 10px 0 24px;
  }

  .hdfcl-nb__ticker-inner {
    animation-duration: 30s; /* slower on wider screens */
  }
}

/* ── 8. Reduced-motion: show text static, no scroll ── */
@media (prefers-reduced-motion: reduce) {
  .hdfcl-nb__ticker-inner {
    animation: none;
    transform: none;
  }

  .hdfcl-nb__ticker-text {
    white-space: normal;
    padding-right: 0;
  }
}

/* ===================================
   Language Switcher
   Figma: 1735:22746 (desktop) / 1735:27240 (mobile)

   Floating pill toggle - fixed anywhere on the viewport.
   Switches page language: "A" = English  |  "अ" = Hindi
   Position is driven by data-desktop-position / data-mobile-position
   attributes + CSS custom properties authored via the dialog.
   =================================== */

/* -- CSS custom property defaults (overridden by inline style from HTL) -- */
.hdfcl-ls {
  --ls-offset-top: 20px;
  --ls-offset-right: 24px;
  --ls-offset-bottom: 20px;
  --ls-offset-left: 24px;
  --ls-mobile-offset-top: 20px;
  --ls-mobile-offset-right: 16px;
  --ls-mobile-offset-bottom: 12px;
  --ls-mobile-offset-left: 16px;
}

/* -- Pill container -- */
.hdfcl-ls {
  position: fixed;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  padding: 9px 17px 7px 14px;
  background: #ffff;  
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
  border-radius: 12px;
}

/* Absolute positioning mode */
.hdfcl-ls[data-position-type="absolute"] {
  position: absolute;
}

/* -- Inner wrapper: padding + background (easy to override per breakpoint) -- */
.hdfcl-ls__inner {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background-color: #E6EBF5;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
  border-radius: 100px;
}

/* Author edit mode: restore to flow */
.cq-wcm-edit .hdfcl-ls {
  position: relative !important;
  transform: none !important;
}

/* -- Desktop positions (>= 768px) -- */
@media (min-width: 768px) {
  .hdfcl-ls[data-desktop-position="top-right"] {
    top: var(--ls-offset-top);
    right: var(--ls-offset-right);
    left: auto; bottom: auto;
    transform: none;
  }
  .hdfcl-ls[data-desktop-position="top-left"] {
    top: var(--ls-offset-top);
    left: var(--ls-offset-left);
    right: auto; bottom: auto;
    transform: none;
  }
  .hdfcl-ls[data-desktop-position="bottom-right"] {
    bottom: var(--ls-offset-bottom);
    right: var(--ls-offset-right);
    left: auto; top: auto;
    transform: none;
  }
  .hdfcl-ls[data-desktop-position="bottom-left"] {
    bottom: var(--ls-offset-bottom);
    left: var(--ls-offset-left);
    right: auto; top: auto;
    transform: none;
  }
  .hdfcl-ls[data-desktop-position="middle-right"] {
    top: 50%;
    right: var(--ls-offset-right);
    left: auto; bottom: auto;
    transform: translateY(-50%);
  }
  .hdfcl-ls[data-desktop-position="middle-left"] {
    top: 50%;
    left: var(--ls-offset-left);
    right: auto; bottom: auto;
    transform: translateY(-50%);
  }
}

/* -- Mobile positions (<= 767px) -- */
@media (max-width: 767px) {
  .hdfcl-ls[data-mobile-position="top-right"] {
    top: var(--ls-mobile-offset-top);
    right: var(--ls-mobile-offset-right);
    left: auto; bottom: auto;
    transform: none;
  }
  .hdfcl-ls[data-mobile-position="top-left"] {
    top: var(--ls-mobile-offset-top);
    left: var(--ls-mobile-offset-left);
    right: auto; bottom: auto;
    transform: none;
  }
  .hdfcl-ls[data-mobile-position="bottom-right"] {
    bottom: var(--ls-mobile-offset-bottom);
    right: var(--ls-mobile-offset-right);
    left: auto; top: auto;
    transform: none;
  }
  .hdfcl-ls[data-mobile-position="bottom-left"] {
    bottom: var(--ls-mobile-offset-bottom);
    left: var(--ls-mobile-offset-left);
    right: auto; top: auto;
    transform: none;
  }
  .hdfcl-ls[data-mobile-position="middle-right"] {
    top: 50%;
    right: var(--ls-mobile-offset-right);
    left: auto; bottom: auto;
    transform: translateY(-50%);
  }
  .hdfcl-ls[data-mobile-position="middle-left"] {
    top: 50%;
    left: var(--ls-mobile-offset-left);
    right: auto; bottom: auto;
    transform: translateY(-50%);
  }

  /* Slightly smaller pill on mobile */
  .hdfcl-ls__inner {
    padding: 3px;
  }
  .hdfcl-ls{
    padding: 9px 6px;
  }
}

/* -- Individual toggle button -- */
.hdfcl-ls__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  border: none;
  background: none;
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

/* Hindi button uses Noto Sans Devanagari for crisp rendering */
.hdfcl-ls__btn--hi {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
  font-size: 14px;
}

/* -- Active / selected state -- */
.hdfcl-ls__btn.is-active {
  background-color: #ffffff;
  color: #1c2633;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
}

/* -- Hover on inactive button -- */
.hdfcl-ls__btn:not(.is-active):hover {
  color: #4b5563;
}

/* -- Focus ring (accessibility) -- */
.hdfcl-ls__btn:focus-visible {
  outline: 2px solid #ED1C24;
  outline-offset: 2px;
}

/* -- Mobile button sizing -- */
@media (max-width: 767px) {
  .hdfcl-ls__btn {
    width: 28px;
    height: 26px;
    font-size: 13px;
  }

  .hdfcl-ls__btn--hi {
    font-size: 12px;
  }
}

.container {
  padding: 0;
  margin: 0 auto;
  max-width: 1366px;
  width: 100%;
  box-sizing: border-box;
}

.download_and_track_claim {
  padding: 0;
}

/* ── Side-by-side layout inside .download_and_track_claim container ─────────────
   Desktop : downloadDocument (flex:1) left, trackClaim (352px) right, 40px gap.
   Mobile  : single column, trackClaim on top (order:-1), 30px gap. ── */

/* Mobile ── stack column, trackClaim first, 30px gap */
@media (max-width: 767px) {
  .download_and_track_claim .cmp-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: auto auto;
  }
}

/* Desktop ── flex row, downloadDocument fills remaining space */
@media (min-width: 768px) {
  .download_and_track_claim .cmp-container {
    display: flex;
    gap: 32px;
    max-width: 1120px;
    margin: 60px auto;
  }
}

/* Mobile */
.helpline-quicklinks {
  margin: 30px auto;
}

@media (max-width:767px) {
  .helpline-quicklinks .cmp-container .helplineCard {
     margin-inline: 20px;
  }
 
.helpline-quicklinks .cmp-container .quickLinks {
    position: relative;
}

.helpline-quicklinks .cmp-container .quickLinks .quick-links__panel{
  border-radius: 0;
}

.helpline-quicklinks .cmp-container .quickLinks::before {
    content: "";
    position: absolute;
    left: 0;
    top: -50%;
    width: 100%;
    height: 150%;
    background: #FEF1F1;
    z-index: -1;
}

}

/* Desktop */
@media (min-width: 768px) {
  .helpline-quicklinks .cmp-container {
    display: flex;
    gap: 30px;
    max-width: 1091px;
    margin: 40px auto 20px;
  }

  .helpline-quicklinks .helplineCard {
    width: 65%;
  }

  .helpline-quicklinks .quickLinks {
    width: 33%;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .three-card-container .cmp-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0 auto;
  }
}

/* Desktop  */
@media (min-width: 768px) {
  .three-card-container .cmp-container {
    display: flex;
    flex-direction: row;
    gap: 32px;
    max-width: 1130px;
    margin: 0 auto;
  }
}

@media (max-width : 767px){
  .carousel-knowmore .cmp-container .knowMoreCard{
    margin: 30px 20px 40px 20px;
  }
}

/* Desktop  */
@media (min-width: 768px) {
  .carousel-knowmore .cmp-container {
    display: flex;
    /* flex-direction: row; */
    gap: 28px;
    max-width: 1092px;
    margin: 0 auto;
  }

  .carousel-knowmore .carouselBanner {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Override the standalone gutter formula (min(711px, 100% - 40px)).
     Inside carousel-knowmore the flex container already sizes carouselBanner
     to exactly 711px — no extra 20px gutters needed. */
  .carousel-knowmore .hdfcl-cb__inner {
    width: 100%;
    max-width: 100%;
  }

  .carousel-knowmore .knowMoreCard {
    flex: 0 0 352px;
    width: 352px;
    /* Flex children are stretch-aligned — pass that height down to the component */
    display: flex;
    align-items: stretch;
  }

  /* hdfcl-kmc doesn't use height:100% by default (standalone use).
     In carousel-knowmore context, force it to fill the column height
     so the card background matches the left carousel card exactly. */
  /* .carousel-knowmore .hdfcl-kmc {
    width: 100%;
    height: 100%;
  } */

  .carousel-knowmore .hdfcl-kmc__card {
    /* height: 100%;
    min-height: unset;
    max-width: 100%; */
  }
}

.bl-faq-card .cmp-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 30px 0;
}

#initiate-death-claim.csc {
  padding-bottom: 35px;
}

@media (min-width: 768px) {
  .bl-faq-card .cmp-container {
    flex-direction: row;
    gap: 32px;
    max-width: 1130px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 0;
  }

  .bl-faq-card .branchLocator {
    flex: 1 1 0;
    max-width: 841px;
    width: 100%;
  }
  .bl-faq-card .faqCard {
    flex: 0 0 256px;
  }
}

/* Desktop style for other-claim-types */

@media (min-width: 768px){
  .claimsSectionContainer #other-claim-types.csc {
    padding: 70px 0 0 0;
  }

  .claimsSectionContainer #other-claim-types.csc .csc__header{
    margin-bottom: 25px;
    max-width: unset;
  }

}

#other-claim-types.csc {
  padding: 30px 0;
} 

#other-claim-types.csc .csc__header{
  max-width: 271px;
  width: 100%;
  margin-inline: auto;
}

/* Free / descriptive text inside other-claim-types */
.claimsSectionContainer #other-claim-types .csc__free-text {
  color: #4b5563;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
  margin-bottom: 25px;
}


@media (max-width: 768px) {
  .claimsSectionContainer #other-claim-types .csc__free-text.csc__free-text--hidden {
    display: none;
  }
  
  .claimsSectionContainer #other-claim-types .csc__free-text {
    margin-bottom: 20px;
  }

  #other-claim-types #critical-illness-tab-cps.cps-section {
    padding: 0 0 30px;
  }

}

@media (min-width: 769px) {
  #other-claim-types #critical-illness-tab-cps.cps-section {
    padding: 24px 0px 40px 0px;
  }
}

#critical-illness-cpsr.cps-section{
  padding: 24px 0 40px 0;
  max-width: 1016px;
  margin-inline: auto;
}

@media (max-width: 768px) {
  #critical-illness-cpsr.cps-section{
  padding: 0 0 30px 0;
}
}

/* Desktop */
@media (min-width: 768px){
  /* Branch Locator Card */
  #other-claim-types .lc__inner .bl-banner{
    padding: 22px 30px;
    min-height: 137px;
  }
 
  #other-claim-types .lc__inner .bl-banner .bl-banner__heading{
    margin-bottom: 12px;
  }

  #other-claim-types .lc__inner .bl-banner .bl-banner__pin-img{
    width: 78px;
  }

  #other-claim-types .lc__inner .faq-card{
    padding: 20px 0 20px 40px;
    min-height: 137px;
    align-items: center;
  }
  
  #other-claim-types .lc__inner .faq-card .faq-card__body{
    max-width: 347px;
    width: 100%;
  }

}