/* Chat Section
--------------------------------------------- */

.chat-container{
	color: var(--black-color);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2em 0;
}

.chat-container svg{
	margin: auto;
}

.chat-container h4{
	text-align: center;
	font-weight: 700;
	font-size: 4rem;
	line-height: 104%;
	margin: .5em;
}

.chat-container .chat-info{
	max-width: 560px;
	text-align: center;
	margin: auto;
}

.chat-container .pink-button{
	display: table;
	margin: auto;
	margin-top: 2em;
}

#Chat #Dots path{
    animation: chat 5s infinite;
    animation-timing-function: ease-in-out;
}

#Chat #Dots #BlueDot{
    animation-delay: .5s;
}

#Chat #Dots #PinkDot{
    animation-delay: 1s;
}

#Chat #Dots_2 #PinkDot_2{
    animation: chat 5s infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
}

#Chat #Dots_2 #BlueDot_2
{
    animation: chat 5s infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 2.5s;
}

#Chat #Dots_2 #GreenDot_2
{
    animation: chat 5s infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 3s;
}


@keyframes chat {
    0%, 100%{
        transform: translateY(0);
    }

    10%{
        transform: translateY(-5%);
    }

    40%{
        transform: translateY(3%);
    }

    60%{
        transform: translateY(-1%);
    }
}

@media (max-width: 700px){
    .chat-container svg{
        width: 55%;
    }
    .chat-container h4{
        font-size: 3rem;
    }
}

@media (max-width: 700px){
    .chat-container h4{
        font-size: 2rem;
    }
}