.sub-hero{
    position:relative;
    isolation:isolate;
    margin-bottom:10px;
    min-height:86px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    padding:17px 28px 16px 34px;
    border:1px solid rgba(64,166,225,.28);
    border-radius:12px;
    background:
        linear-gradient(105deg,rgba(255,255,255,.96) 0%,rgba(239,249,255,.94) 48%,rgba(215,241,255,.9) 100%);
    box-shadow:0 7px 20px rgba(23,76,125,.08),inset 0 1px 0 #fff;
}
.sub-hero:before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:
        linear-gradient(135deg,transparent 24%,rgba(7,158,232,.055) 25%,rgba(7,158,232,.055) 27%,transparent 28%,transparent 74%,rgba(7,89,157,.045) 75%,rgba(7,89,157,.045) 77%,transparent 78%),
        radial-gradient(circle at 82% 50%,rgba(7,158,232,.14) 0 2px,transparent 3px),
        radial-gradient(circle at 88% 25%,rgba(7,89,157,.11) 0 2px,transparent 3px);
    background-size:42px 42px,30px 30px,38px 38px;
    mask-image:linear-gradient(90deg,transparent 24%,#000 68%);
}
.sub-hero:after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:6px;
    background:linear-gradient(180deg,#31c4f4 0%,#079ee8 52%,#07599d 100%);
    box-shadow:2px 0 10px rgba(7,158,232,.2);
}
.sub-hero h1{
    position:relative;
    margin:0;
    color:#07558e;
    font-size:23px;
    line-height:1.15;
    font-weight:500;
    letter-spacing:-.035em;
}
.sub-hero h1:after{
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    margin-left:8px;
    border-radius:50%;
    background:#18b7ef;
    box-shadow:0 0 0 5px rgba(24,183,239,.11);
    vertical-align:middle;
}
.sub-hero p{
    margin:6px 0 0;
    color:#6c8ca4;
    font-size:11px;
    line-height:1.35;
    font-weight:400;
}
@media(max-width:760px){
    .sub-hero{min-height:68px;padding:12px 18px 11px 23px;border-radius:10px}
    .sub-hero:before{background-size:34px 34px,26px 26px,32px 32px;mask-image:linear-gradient(90deg,transparent 12%,#000 72%)}
    .sub-hero:after{width:4px}
    .sub-hero h1{font-size:18px}
    .sub-hero h1:after{width:5px;height:5px;margin-left:6px;box-shadow:0 0 0 4px rgba(24,183,239,.1)}
    .sub-hero p{margin-top:4px;font-size:10px}
}