@media (min-width: 1200px) {
    .blue-layer-retail {
        width: 542px;
        height: 536px;
        background: #4A6486;
        left: 0;
        top: 21%;
    }
}
.key-box-retail {
    width: 100%;
    height: 100%;
    min-height: 300px;
    padding: 23px 23px;
    background-color: white;
    box-shadow: 2px 4px 4px 2px #00000040;
    border-radius: 30px;
    padding-right: 4px;
    position: relative;
    z-index: 20;
}
.key-diff-flex-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.key-diff-flex-box .col-md-4{
    width: 30% !important;
}
.key-blue-layer-retail{
      width: 240px;
    height: 389px;
    background: #4A6486;
    border-radius: 30px;
    top: -15%;
    left: -4%;
}
@media screen and (max-width:1214px){

}
@media screen and (max-width:1176px) {
    .key-diff-flex-box{
        display: flex;
        flex-wrap: wrap;
      
    }
    .key-blue-layer-retail{
        display: none !important;
       
    }
    .key-box-retail{
         padding-right: 23px;
    }
}
@media screen and (max-width:1104px) {
    .key-diff-flex-box{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
     .key-diff-flex-box .col-md-4 {
        width: auto !important;
    }
     .black-border {
        height: 153px;
        width: 1px;
        background: #000;
        rotate: 180deg;
    }
.key-box-retail {
    width: 460px;
    height: 100% !important;
    min-height: 100%;
}
}
@media screen and (max-width:487px){
    .black-border {
    height: 1px;
    width: 100%;
    position: relative;
    left: -50%;
    transform: translateX(-50%);
    background: #000;
}
}