.cc-steps {
    list-style: none;
    padding: 0;
    margin: 60px 0 30px 0;
}

.cc-steps li {
    display: inline-flex;
    align-items: flex-start;
    padding: 20px 10px;
}
.join_becu_heading{
    text-transform:capitalize;
}

.cc-step {
    width: 29%;
    background: #f4f5f5;
    margin-right: 30px;
    height: 100px;
    text-align: center;
    padding: 15px;
    position: relative;
    border-radius: 4px;
}

.cc-step:last-child {
    margin-right: 0px;
}

.cc-number {
    width: 40px;
    height: 40px;
    position: absolute;
    background: #d5d7d9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    top: -22px;
    left: 40%;
}

.cc-step.complete {
    color: #192838;
    font-weight: 600;
}

    .cc-step.complete .cc-number {
        background: #192838;
        color: #fff;
    }

.getStarted {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

    .getStarted label {
        margin: 0;
    }

.inner_ccsection img {
    width: 103px;
    height: 65px;
    margin-right: 25px
}

.ccsection {
    display: flex;
    margin: 25px 0;
}

.ccsec_lft {
    width: 38%;
}
.ccsec_full{
    width:100%;
}

.ccsec_rgt {
    width: 62%;
    padding: 22px;
    border: 1px solid #d5d7d9;
}

.inner_ccsection {
    display: flex;
}

.inner_content h6 {
    margin: 0;
    font-weight: 600;
}

@media(max-width:1399px) and (min-width:769px) {
    .ccsection .cc-step {
        /*padding: 3% 1% !important;*/
    }
}

@media(max-width:1199px) and (min-width:769px) {
    .ccsection .cc-step {
        margin: 7px !important;
        /*padding: 2% !important;*/
    }
}

@media (max-width:999px) {
    .ccsection {
        flex-direction: column;
    }

    .ccsection .ccsec_lft, .ccsection .ccsec_rgt {
        width: 100%;
    }
}

@media(max-width:999px) and (min-width:769px) {

    .ccsection .cc-step {
        /*padding: 4% !important;*/
    }
}
@media (max-width:768px) {
    .ccsection .inner_ccsection {
        flex-direction: column;
    }
    .ccsection .cc-steps {
        margin: 0px 0 30px 15px !important;
    }
    .ccsection .inner_ccsection .inner_content{
        padding:25px 0;
    }
}

@media (max-width:1199px) {
    .cc-step {
        margin: 10px;
        height: 120px;
    }

    .getStarted {
        display: block;
    }

    .getStarted label {
        margin-top: 15px;
    }
}

@media (max-width:999px){
    .cc-step {
        height: 100px;
    }
}

@media (max-width:768px){
    .cc-steps {
        margin: 60px 0 30px 15px;
    }
    .cc-step {
        width: 100%;
        padding: 10px !important;
        height: max-content;
        margin: 5px;
        padding-left: 30px !important;
    }
    .cc-number {
        top: 0;
        left: -20px;
    }
}


.hero div[class^="col-"] {
    padding: 15px;
    text-align: left;
}

    .hero div[class^="col-"].promo-area {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(213, 215, 217);
        padding: 30px;
    }

.component-hero-image .hero-image-wrapper {
    display: table-cell;
    height: auto;
}

.hero-image-wrapper-area {
    height: auto;
}

.hero-image-wrapper .promo-btn {
    margin-bottom: 0px;
}

.radio-select-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
    margin-top: 6px;
}

.component-hero-image > .row > div:first-child {
    text-align: center;
}

.form-main legend {
    color: rgb(77, 95, 105);
    font-size: 14px;
    margin-top: 0px;
    text-transform: none;
    font-weight: bold;
}

.radio-select-container > div {
    width: 100%;
    position: relative;
}

    .radio-select-container > div:last-child {
        margin-top: 10px;
    }

.radio-select-container input {
    margin-right: 0px;
}

#togglePromo, #togglePromoRemove {
    display: inline-block;
    background-color: transparent;
    border: none;
    font-size: 16px;
    font-family: MuseoSans-500, "Arial Regular", sans-serif;
    color: rgb(0, 124, 137);
    padding: 0px;
}

    #togglePromo:hover, #togglePromoRemove:hover {
        text-decoration-line: underline;
        text-decoration-thickness: initial;
        text-decoration-style: initial;
        text-decoration-color: initial;
    }

    #togglePromo:focus, #togglePromoRemove:focus {
        outline: rgb(68, 112, 214) solid 2px;
        outline-offset: 3px;
        text-decoration-line: underline;
        text-decoration-thickness: initial;
        text-decoration-style: initial;
        text-decoration-color: initial;
    }

input[type="text"]:active, input[type="text"]:focus {
    outline-offset: -1px;
    outline: rgb(68, 112, 214) solid 2px;
}

.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
    outline-offset: -1px;
    outline: rgb(171, 17, 26) solid 2px;
    box-shadow: none;
}

.radio-select-container input:focus {
    outline: none;
}

.hero-image-wrapper a:focus, .hero-image-wrapper .btn:active, .hero-image-wrapper .btn:active:focus, .hero-image-wrapper .btn:focus, .hero-image-wrapper .promo-btn:active, .hero-image-wrapper .promo-btn:active:focus, .hero-image-wrapper .promo-btn:focus {
    outline: rgb(68, 112, 214) solid 2px;
    outline-offset: 3px;
}

.promo-fields {
    display: none;
    justify-content: space-between;
}

.hero-image-wrapper.promo .promo-fields {
    display: flex;
    flex-wrap: wrap;
}

.promo-fields div {
    width: 100%;
}

.help-text, .invalid-feedback {
    margin-top: -15px;
    margin-bottom: 30px;
}

.form-main .promo-fields input.form-control {
    max-width: none;
}

#refContainer {
    transition-duration: 0.5s;
    transition-timing-function: linear;
    transition-delay: 0s;
    transition-property: all;
    width: 110px;
    margin-left: 0px;
    position: absolute;
}

    #refContainer.active {
        width: 100%;
        position: relative;
    }

    #refContainer label, #refContainer input, #refContainer .help-text {
        display: none;
    }

    #refContainer.active label, #refContainer.active input, #refContainer.active .help-text {
        display: inherit;
    }

    .is-invalid ~ .help-text, #refContainer.active .is-invalid ~ .help-text {
        display: none;
    }

#typeSavings {
    margin-left: 15px;
}

.radio-select-container .btn-secondary {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(77, 95, 105);
    color: rgb(25, 40, 56);
    border-radius: 4px;
    padding: 15px 36px 15px 15px;
    text-align: left;
    height:100%;
}

.radio-select-container .btn-check {
    clip: unset;
    top: 21px;
    right: 15px;
}

    .radio-select-container .btn-check:checked + .btn-secondary, .radio-select-container .btn-check:active + .btn-secondary, .radio-select-container .btn-secondary:active, .radio-select-container .btn-secondary.active, .radio-select-container .show > .btn-secondary.dropdown-toggle {
        color: rgb(25, 40, 56);
        background-color: rgb(255, 255, 255);
        border: 2px solid rgb(0, 124, 137);
    }

        .radio-select-container .btn-check:checked + .btn-secondary:focus, .radio-select-container .btn-check:active + .btn-secondary:focus, .radio-select-container .btn-secondary:active:focus, .radio-select-container .btn-secondary.active:focus, .radio-select-container .show > .btn-secondary.dropdown-toggle:focus, .radio-select-container .btn-check:focus + .btn-secondary, .radio-select-container .btn-secondary:focus {
            box-shadow: none;
            outline: rgb(68, 112, 214) solid 2px;
            outline-offset: 3px;
        }

@media (min-width: 576px) {
    .hero-image-wrapper.promo .promo-fields, .radio-select-container {
        flex-wrap: nowrap;
    }

        .radio-select-container > div:first-child {
            margin-right: 5px;
        }

        .radio-select-container > div:last-child {
            margin-left: 5px;
            margin-top: 0px;
        }

    #refContainer.active {
        margin-left: 15px;
    }
}

@media (min-width: 768px) {
    .radio-select-container .btn-secondary {
        min-height: 56px;
        height: 100%;
    }
}

@media (min-width: 992px) {
    .hero div[class^="col-"] {
        padding: 45px 0px 0px 30px;
    }

    .component-hero-image > .row > div:first-child {
        text-align: left;
    }
}