:root {
    --blue-color-logo-contactus: rgba(50, 75, 85, 0.7);
    --yellow-color-logo-contactus: rgba(243, 209, 49, 1.2);
}

.contact_us {
    /*    min-height: 100%;*/
    padding: 2em;
}

.middle {
    z-index: 999;
    position: fixed;
    top: 50%;
    transform: translate(0%, -50%);
    text-align: center;
    /*    padding: 0 2em;*/
    display: flex;
    flex-direction: column;
    right: 0;
    /*    margin-top: 7dvh;*/

    .btn {
        display: inline-block;
        width: 70px;
        height: 70px;
        background-color: var(--blue-color-logo-contactus);
        margin: 10px 2px;
        border-radius: 50%;
        box-shadow: 0 5px 15px -5px #00000070;
        color: var(--yellow-color-logo-contactus);
        overflow: hidden;
        position: relative;
    }

    .btn i {
        line-height: 70px;
        font-size: 40px;
        transition: transform 0.325s linear;
    }

    .btn:hover i {
        transform: scale(1.3);
        color: #f1f1f1;
    }

    .btn::before {
        content: "";
        position: absolute;
        width: 120%;
        height: 120%;
        background-color: #3498db;
        transform: rotate(45deg);
        left: -110%;
        top: 70%;
    }

    .btn:hover::before {
        animation: get_in_touch 0.7s 1;
        top: -10%;
        left: -10%;
    }

    .facebook:hover::before {
        background: #3b5999;
    }

    .location:hover::before {
        background: #e4405f;
    }

    .whatsapp:hover::before {
        background:
            linear-gradient(#25d366, #25d366) 14% 84%/16% 16% no-repeat,
            radial-gradient(#25d366 58%, transparent 0);
    }

    .instagram:hover::before {
        background: #d6249f;
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    }

    @keyframes get_in_touch {
        0% {
            left: -110%;
            top: 90%;
        }

        50% {
            left: 10%;
            top: -30%
        }

        100% {
            top: -10%;
            left: -10%;
        }
    }

    @media screen and (min-width:600px) {
        .get_in_touch .middle {
            transform: translateY(-50%);
        }
    }
}

@media (max-width: 1000px) {
    .middle {
        & .btn i {
            line-height: 50px;
        }

        & .btn {
            width: 50px;
            height: 50px;
        }
    }
}