.flex{
    display: flex;
    justify-content: space-evenly;
    overflow: hidden;
    padding-bottom: 0;
}

.background{
    display: flex;
    width: 60vw;
    height: 600px;
    overflow: hidden;
    position: relative;
    justify-content: center;
    align-items: center;

}

.bg-img{
    width: 80vw;
    height: 1000px;
    transform: translateY(-15%);
}

.glass{
    position: absolute;
    font-size: 2vw;
    box-shadow: rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.1);
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    border-left: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    box-shadow: 5px 5px 5px black;
    text-align: center;
    padding: 5vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    left: 0;
    color: white;
    min-width: 50vw;

}

.container{
    display: flex;
    justify-content: space-between;
}

.container .icon{
    fill: transparent;
    stroke-width: 1;
    stroke: white;
    width: 5vw;
}

.container .icon.Map path{
    stroke-dasharray: 135;
    stroke-dashoffset: 0;
}

.glass:hover .container .icon.Map path{
    animation: animate-map 2s linear forwards;
}

@keyframes animate-map {

    0%{
        stroke-dashoffset: 0;
    }
    40%{
        stroke-dashoffset: 130;
    }
    80%{
        stroke-dashoffset: 270;
        fill: transparent;
        stroke: #004f9f;
    }
    100%{
        stroke-dashoffset: 270;
        fill: red;
        stroke: transparent;
    }
}

.container .icon.Phone path{
    stroke-dasharray: 130;
    stroke-dashoffset: 0;

}

.glass:hover .container .icon.Phone path{
    animation: animate-phone 2s linear forwards;
}

@keyframes animate-phone {

    0%{
        stroke-dashoffset: 0;
    }
    40%{
        stroke-dashoffset: 130;
    }
    80%{
        stroke-dashoffset: 260;
        fill: transparent;
        stroke: #004f9f;
    }
    100%{
        stroke-dashoffset: 260;
        fill: red;
        stroke: transparent;
    }
}

.container .icon.Mail path{
    stroke-dasharray: 155;
    stroke-dashoffset: 0;
}

.glass:hover .container .icon.Mail path{
    animation: animate-mail 2s linear forwards;
}

@keyframes animate-mail {

    0%{
        stroke-dashoffset: 0;
    }
    40%{
        stroke-dashoffset: 155;
    }
    80%{
        stroke-dashoffset: 310;
        fill: transparent;
        stroke: #004f9f;
    }
    100%{
        stroke: transparent;
        stroke-dashoffset: 310;
        fill: red;
    }
}