.hero {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: 80px;
}

@media(max-width:400px){
    .hero{
        height:450px;
    }
    
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 72px;
    width: 100%;
}
 .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--red);
            margin-bottom: 16px;
        }

        .hero-eyebrow::before {
            content: '';
            width: 28px;
            height: 2px;
            background: var(--red);
            display: block;
        }
        
              .breadcrumb-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            /*margin-bottom: 42px;*/
        }

        .breadcrumb-bar a,
        .breadcrumb-bar span {
            font-size: 13px;
            color: rgba(255, 255, 255, .55);
            text-decoration: none;
        }

        .breadcrumb-bar .sep {
            color: rgba(255, 255, 255, .3);
        }

        .breadcrumb-bar span:last-child {
            color: rgba(255, 255, 255, .85);
        }