.flex-con {
    display: flex; 
    margin-top:50px;
}
.modal-body {
     font-family: "FSMeWeb-Light" !important;
}
.modal-body p strong {
     font-family: "FSMeWeb-Regular" !important;
     font-weight: 500;


}
.box-fraud-contain {
    
font-family: "FSMeWeb-Light" !important;
}

.step-container.active .arrow {
    opacity: 1;
}
.close-icon-step {
    width: 16px;
    display: none;
    justify-content: flex-end;
    position: absolute;
    right: 25px;
}
.align-items-center {
    
font-family: "FSMeWeb-Light" !important;
}
.align-items-center a  {
    font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 130%; /* 19.5px */
text-decoration-line: underline;
text-decoration-style: solid;
font-family: "FSMeWeb-Light" !important;
color: #333333;
}
.align-items-center a:hover  {
color: #B73764;
}
.box-vc:hover {
    background-color: #E9C3CF;
}
.bullets li{
    color: #333;
font-family: "FSMeWeb-Light";
font-size: 15px;
font-style: normal;
font-weight: 300;
line-height: 140%; /* 21px */
}
.bullets li::marker {
  color: #B73764;
}
.bullets h4 {
    font-family: "FSMeWeb-Regular" !important;
    color: #333 !important;
}
.sidebar {
    width: 255px;
    align-self: stretch;
    padding: 70px 20px 40px 25px;
    background: #FAFAFA;
    overflow: hidden;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 19px;
    display: inline-flex;
}

.sidebar-content {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 25px;
    display: flex;
}

.logo {
    width: 93.01px;
    height: 92.18px;
}

.sidebar-text {
    width: 215px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: flex;
}

.title {
    align-self: stretch;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 32px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 300;
    line-height: 40px;
}

.description {
    width: 211.26px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 15px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 300;
    line-height: 21px;
}
.close-icon-step {
    cursor:pointer;
}
.step-container {
    flex: 1 1 0;
    align-self: stretch;
    padding: 70px 0 50px;
    background: #F9EFF3;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    
  border-bottom: none;
  border-right: white 1px solid;
    display: inline-flex;
}

.step-content {
    align-self: stretch;
    padding: 0 15px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 28px;
    display: flex;
    width: 200px;
    height: 220px;
    font-family: 'FSMeWeb-Regular';
}

.step-details {
    display: none;
    padding: 15px;
    color: #333333;
    font-size: 16px;
    line-height: 1.5;
    min-width:250px;
}

.step-container.active {
    flex: 2 1 0;
    background: #B73764;
    transition: all 0.3s ease;
    color: white !important;
}

.step-container.active .step-details {
    display: block;
    animation: fadeIn 0.3s ease;
    
    color: white !important;
}
.step-container.active .step-details p {
    
    color: white !important;
}
.step-container.active .step-title {
    
    color: white !important;
}

.step-container.active .arrow-line {
    outline-color: #9B2C5A;
    transform: rotate(0deg);
    transition: transform 0.3s ease, outline-color 0.3s ease;
}

.step-container .arrow-line {
    transition: transform 0.3s ease, outline-color 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-number {
    height: 25px;
    padding: 10px;
    background: white;
    border-radius: 1000px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    text-align: center;
}

.step-number-text {
    margin-top: 3px;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #B73764;
    font-size: 12px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 700;
    text-transform: uppercase;
    line-height: 15.60px;
    letter-spacing: 0.48px;
    width: 50px;
    word-wrap: break-word;
}

.step-title {
    align-self: stretch;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 24px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 300;
    line-height: 31.20px;
    max-width: 100px;
}

.arrow {
    width: 24px;
    height: 24px;
    opacity: 0;
}

.step-container:hover .arrow {
   opacity: 100%;
   cursor: pointer;
}

.step-container.clicked .arrow {
    opacity: 1;
}
.last-step {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* New styles for card components */
.card-container {
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    display: inline-flex;
    margin-bottom: 50px;
}

.card {
    width: 33%;
    padding-bottom: 50px;
    background: #F9EFF3;
    overflow: hidden;
    border-radius: 15px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 19px;
    display: inline-flex;
        height: 536px;
        border: 0;
}

.card-image {
    align-self: stretch;
    height: 241.33px;
    background: #D9D9D9;
    object-fit:cover;
    object-position: center;
}

.card-content {
    align-self: stretch;
    padding-left: 25px;
    padding-right: 25px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
    display: flex;
    font-family: "FSMeWeb-Light" !important;
    height: 100%;
    max-height: 200px;
}

.card-title {
    align-self: stretch;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 24px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 300;
    line-height: 31.20px;
}

.card-description {
    align-self: stretch;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 15px;
   font-family: "FSMeWeb-Light" !important;
    font-weight: 300;
    line-height: 21px;
}

.card-text {
    width: 294.64px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 15px;
    font-family: "FSMeWeb-Light" !important;
    font-weight: 300;
    line-height: 21px;
}

.read-more-btn {
    height: 45px;
    padding-top: 1px;
    padding-bottom: 1px;
    overflow: hidden;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    display: inline-flex;
}
.read-more {
    color: #333 !important;
}
.read-more p {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333 !important;
    font-size: 15px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 300;
    text-decoration: underline !important;
    line-height: 19.50px;
}


.read-more-text {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333 !important;
    font-size: 15px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 300;
    text-decoration: underline !important;
    line-height: 19.50px;
}

/* Emergency contact section */
.emergency-banner {
    width: 100%;
    height: 470px;
    background-position: center;
    background-size: cover;
    background-image: url("/media/512hmogs/68f8c0b77345b7de53f9f4ef928ddb554042d966.jpg");
}

.emergency-card {
    margin-top: 25px;
    width: 462px;
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    background: white;
    overflow: hidden;
    border-radius: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    display: inline-flex;
    font-family: 'FSMeWeb-Regular';
}

.emergency-title {
    align-self: stretch;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 24px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 300;
    line-height: 31.20px;
}

.emergency-description {
    align-self: stretch;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 15px;
   font-family: "FSMeWeb-Light" !important;
    font-weight: 300;
    line-height: 21px;
}

.contact-label {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 13px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 700;
    text-transform: uppercase;
    line-height: 16.90px;
    letter-spacing: 0.52px;
    margin: 10px 0;
}

.contact-button {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #B73764;
    border-radius: 24.50px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    display: inline-flex;
}

.contact-button-text {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 15px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 300;
    text-decoration: underline;
    line-height: 21px;
}

.help-btn {
    cursor:pointer;
    height: 45px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 1px;
    padding-bottom: 1px;
    position: relative;
    top: 370px;
    background: #B73764;
    overflow: hidden;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.help-icon svg {
    background: white;
    margin: 5px 10px 10px 0;;
    border-radius: 100px;
}

.help-text {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 15px;
    font-family: 'FSMeWeb-Regular';
    font-weight: 300;
    line-height: 19.50px;
}
.help-btn:hover {
     color: #B73764;
      background: white;
}
.help-btn:hover .help-text{
     color: #B73764;
}

.help-btn:hover .help-icon svg{
    background: #B737640;
    color: white;
}
/* Emergency contact icons */
.email-icon {
    width: 24px;
    height: 24px;
    position: relative;
}

.email-icon-part1 {
    width: 18px;
    height: 14.14px;
    left: 3px;
    top: 5px;
    position: absolute;
    border-radius: 2.25px;
    outline: 1.50px white solid;
    outline-offset: -0.75px;
}

.email-icon-part2 {
    width: 18px;
    height: 7.62px;
    left: 3px;
    top: 6.09px;
    position: absolute;
    outline: 1.50px white solid;
    outline-offset: -0.75px;
}

.email-icon-part3 {
    width: 18px;
    height: 5.14px;
    left: 21px;
    top: 17.86px;
    position: absolute;
    transform: rotate(-180deg);
    transform-origin: top left;
    outline: 1.50px white solid;
    outline-offset: -0.75px;
}

.phone-icon {
    width: 24px;
    height: 24px;
    position: relative;
}

.phone-icon-inner {
    width: 17.80px;
    height: 15.13px;
    left: 11px;
    top: 3px;
    position: absolute;
    transform: rotate(60deg);
    transform-origin: top left;
    outline: 1.50px white solid;
    outline-offset: -0.75px;
}

.emergency-number {
    color: #B73764;
    text-decoration: underline;
}

.emergency-text {
    color: #333333;
}

.step-container:last-child {
    border-radius: 0 15px 15px 0;
      padding-right: 25px;
}

.help-btn-mob {
    display: none;
}

.box-fraud a.btn-read-more {
    margin: 7px 0 0 0;
    display: inline-block;
    text-decoration: none;
}

@media (max-width: 767px) {
.help-btn-mob {
    
    height: 45px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 1px;
    padding-bottom: 1px;
    position: relative;
    background: #B73764;
    overflow: hidden;
    border-radius: 12px !important;
    justify-content: center;
    align-items: center;
   display: flex;
        width: 150px;
}

.help-btn-mob:hover {
     color: #B73764;
      background: white;
}
.help-btn-mob:hover .help-text{
     color: #B73764;
}

.help-btn-mob:hover .help-icon svg{
    background: #B737640;
    color: white;
}
.help-btn {
    display:none;
}
}.step-container.active .close-icon-step {
    display:flex;
    position: relative;
    top: -250px;
    left: 225px;
}

@media (min-width: 1200px) {
    .step-container.active .close-icon-step {
    top: -265px;
}
.step-container:nth-child(5).active .close-icon-step {
    top: -295px;
}
.step-container:nth-child(6).active .close-icon-step {
    top: -245px;
}
}
@media (max-width: 1199px) {
   .step-title {
       max-width: unset;
   }
.step-container.active .arrow {
    opacity: 0;
}
.step-container:hover .arrow {
    opacity: 0;
}
.step-container {
    padding: 70px 0 70px;
}
.step-container.active .close-icon-step {
    display:flex;
     position: absolute;
    top: unset;
    left: unset;
}
.step-container:last-child {
    border-radius: 0  0 15px 15px;
}
   .sidebar-text {
        width: 100%;
    }
.step-content {
    height: 100%;
    width: 100%;
    flex-direction:row;
}
.step-container.active .step-content .step-details {
    display:flex;
    padding: 0;
   
}

.description {
    width: 100%;
}
.active .step-content {
    
    flex-direction: row;}

.step-container {
    display:flex;
  
}
.step-title h4 {
    font-size: 24px;
font-style: normal;
font-weight: 300;
font-family: 'FSMeWeb-Light';
}
.step-container.active  {
    position: relative;
      padding:25px 20px 100px 0px;
}
  .sidebar {
        display:flex;
         width: 100%;
    }
   
    .sidebar-text {
        width: 100%;
    }
     .flex-con{
        flex-direction:column;
    }
}
@media (max-width: 1024px) {
   .mob-sidepad {
       padding: 0 25px;
   }
.step-container.active .arrow {
    opacity: 0;
}
.step-container:hover .arrow {
    opacity: 0;
}

.step-container.active .close-icon-step {
    display:flex;
     position: absolute;
    top: unset;
    left: unset;
}
.step-container:last-child {
    border-radius: 0  0 15px 15px;
  
}
    .flex-con{
        flex-direction:column;
    }
    .sidebar {
        display:flex;
         width: 100%;
    }
    .card-container {
        display:block;
    }
    .card {
        width: 100%;
        margin-bottom: 25px;
    }
    .sidebar-text {
        width: 100%;
    }
.step-content {
    height: 100%;
    width: 100%;
    flex-direction:row;
}
.step-container.active .step-content .step-details {
    display:flex;
    padding: 0;
   
}

.description {
    width: 100%;
}
.active .step-content {
    
    flex-direction: row;}

.step-container {
    display:flex;
  border-bottom: white 1px solid;
  border-right: none;
}
.step-container.active  {
    position: relative;
      padding:25px 20px 120px 0px;
}
}
/* Types of fraud */ 

.box-fraud {
    display: flex;
width: 382px;
height: 222px;
padding: 25px;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 10px;
border-radius: 15px;
background-color: #F9EFF3;
}
.box-fraud-contain {
    display: flex;
    justify-content: center;
}
.box-fraud-contain div {

    justify-content: center;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-content {
background-color: #F9EFF3;
    padding: 30px;
    border-radius: 5px;
    max-width: 800px;
    width: 90%;
    overflow-y: auto;
    max-height: 80vh;
    position: relative;
    align-items: center;
   justify-content: flex-start !important;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
}

.close-modal:hover {
    color: #000;
}

.content-preview {
    margin-bottom: 15px;
}
.read-more {
    text-align: left;
    color: #333;
}
.btn-read-more {
    height: 45px;
padding: 10px 20px;
justify-content: center;
align-items: center;
border-radius: 5px;
background: #B73764;
color:white;
}

.btn-read-more a:hover {
    color: #B73764  !important;
    background-color:white !important;
}
.box-vc {
    display: flex;
width: 382px;
flex-direction: column;
align-items: center;
margin: 10px;
border-radius: 15px;
background-color: #F9EFF3;
height: 478px;
cursor: pointer;
color: #333 !important;
text-decoration: none;
}
.box-vc-img {
       border-radius: 10px 10px 0 0;
       width:106.5%;
height: 241px;
object-fit: cover;
}


.pad-bottom {
    margin: 50px 0 100px 0;
    padding:25px;
}
@media (max-width: 767px) {
.pad-bottom{
    margin: 25px 0 50px 0;
}
.mob-negmar {
    margin-top: -100px;
}
.emergency-banner {
    background-image: unset;
}
.mob-margin {
    margin-top:100px;
}
.box-fraud {
            width: 95%;
        height: auto;
        margin: 10px auto;
}
.step-details {
    width: 80%;
}
.step-container.active .arrow {
    opacity: 0;
}
.step-container:hover .arrow {
    opacity: 0;
}

.step-container:last-child {
    padding-bottom: 100px;
}
.box-fraud-contain .col-sm-5 {
    margin-bottom: 20px;
}

.box-fraud-contain {
    margin: 0 30px;
}

.box-vc {
    width: 87%;
}

.pad-bottom {
    width: 87%;
    margin: 0 auto 80px auto;
    border-radius: 20px;
}
}
.bannerMain h1 {
    max-width:100%;
}
.align-items-center h4 {
    color: #333 !important;
}
.modal-overlay .modal-content h2 {
    font-size: 24px;
}

@media (max-width: 440px) {
   .active .step-content {
        min-width: 250px;
        flex-direction: column !important;
    }
    
.step-container.active  {
      padding:25px 20px  200px 0px;
}
.step-container:last-child {
    padding-bottom: 100px;
}
.sidebar {
    margin-top:75px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
    .box-vc {
    width: 47%;
}
}

@media (min-width: 1025px) and (max-width: 1399px) {
    .box-vc{
        width: 31%
    }
}

.vlnrblCustomer .modal-body p strong {
     font-family: "FSMeWeb-Regular" !important;
     font-weight: 700;
}
.vlnrblCustomer .modal-body ul li {
    color: #333;
    font-family: 'FSMeWeb-Light';
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 21px */
}
.vlnrblCustomer .modal-content {
    align-items: flex-start;
}
a.addFinSupport:hover img {
    display: none;
}

a.addFinSupport:hover::after {
  content: "";
  display: inline-block;
  background-image: url(/media/ki4mkayd/chevron-right-isahub.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 16px; 
  height: 16px; 
  margin-bottom: 1px;
  vertical-align: middle; 
}

.fraudHubTypesBox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.fraudHubTypesBox .box-fraud {
    width: 100%;
    max-width: 400px;
    margin: 0px;
    height: auto;
}

.fraudHubTypesBox .modal-content {
    padding: 40px;
    border-radius: 18px;
}

.fraudHubTypesBox .modal-content h4 {
    color: #333;
    font-family: 'FSMeWeb-Regular';
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    margin-bottom: 10px;
}


.fraudHubTypesBox .close-modal svg {
    width: 26px;
    height: 26px;
}

@media (min-width: 1025px) and (max-width: 1399px){
    .fraudHubTypesBox .box-fraud {
    max-width: 342px;
}
}
@media (max-width: 1024px){
    .fraudHubTypesBox .box-fraud {
    max-width: 335px;
}
.pad-bottom{
    padding: 0px 0px;
}
.bullets h4{
    font-size: 24px;
}
}

@media (max-width: 1199px){
    .container.flex-con .sidebar {
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0px;
}
}

.frdPods h4 {
    font-family: 'FSMeWeb-Regular';
}

@media (min-width: 768px) and (max-width: 1024px){
    .card-container.frdCrds {
    display: flex;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 auto;
}

.frdCrds .card {
    max-width: 335px;
    height: auto;
}
} 

@media only screen and (max-width: 767px) {
    .box-fraud-contain .row.align-items-center .col-sm-7 {
    padding: 0px 42px 30px 42px;
}
.step-container.active:last-child {
    padding-bottom: 190px;
}
}

.emergency-banner .help-btn {
    display: none;
}