@media (max-width: 991px) {
    .icons-section {
        width: 65%;
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .icons-section {
        width: 80%;
        justify-content: space-between;
    }

}

@media (max-width: 540px) {
    .icons-section {
        width: 75%;
        justify-content: space-between;
    }

}

@media (max-width:450px) {
    #name {
        font-size: 0.75rem;
    }

    .img-recording {
        width: 1.5168rem;
        height: 1.625rem;
        left: 4.867rem;
        display: none;

    }

    .recording {
        font-size: 0.75rem;
        display: none;
    }

    .first-screen {
        position: absolute;
        height: 25%;
        width: 30%;
        left: 2%;
        border-radius: 15px;
        /* background: url(../image/person1.jpeg); */
        background-size: cover;
    }




    .second-screen {
        width: 100%;
    }

    .icons-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        height: 6rem;
        margin: 0 auto;
        background-color: var(--main-bg-color);
    }

    .cross {
        display: block;
    }

    #none-section {
        position: absolute;
        top: 59%;
        left: 80%;
        background-color: rgba(25, 25, 45, 0.3);
        width: 15%;
        display: none;
    }

    #none-section div {
        padding: 4px;
        cursor: pointer;
    }

    .icons-bar{
        width: 2rem;
        height: 2.125rem;
        cursor: pointer;
        outline: none; 
    }

    .icons-bar:hover {
        transform: none;
    }

    .icons-bar:active {
        transform: none;
    }

    .icon-none {
        display: none;
    }
}