@charset "UTF-8";

@media (max-width:380px){
	.close-btn {
		position: absolute;
		top: 0;
		right: 0;
		color: white;
		border: none;
		border-radius: 50%;
		width: 60px;
		height: 66px;
		font-size: 31px;
		cursor: pointer;
		display: none;
		justify-content: center;
		align-items: center;
	}
	.popup-contact-menu-title, .social-link-title {
		font-size: 13px;
	}
	.btn-title {
		background-color: #636363bf;
		position: fixed;
		left: 4px;
		bottom: 121px;
		z-index: 10;
		color: #ffffff;
		font-size: 11px;
		padding: 5px 10px;
		border-radius: 10px;
	}

	.popup-contact-btn {animation: pulse 2s infinite;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background:#ff0000;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		cursor: pointer;
		overflow: hidden;
	}
	.popup-contact-menu-wrapper {  
		position: fixed;
		left: 30px; 
		bottom: 130px;
		width: 200px;
		line-height: 1;
		background: #fff;
		padding: 20px 0;
		border-radius: 20px;
		box-shadow: 1px 1px 8px 1px #ccc;
		transition: transform 400ms linear;
		transform: translateX(-450px); 
	}
	.popup-contact-menu-wrapper.active {
		transform: translateX(0); 
	}
	.popup-contact-wrap {
		position: fixed;
		bottom: 70px;
		left: 30px;
		z-index: 100;
	}
	.toggler-social-btn.active .close-icon {
		scale: 15;
		bottom: 4px;
		position: relative;
	}
	.toggler-social-btn.active .btn-title {opacity:0;}
	.toggler-social-btn:not(.active) .btn-title {opacity:1;}
}

@media (min-width:380px){
	.close-btn {
		position: absolute;
		top: 0;
		right: 0;
		color: white;
		border: none;
		border-radius: 50%;
		width: 70px;
		height: 79px;
		font-size: 31px;
		cursor: pointer;
		display: none;
		justify-content: center;
		align-items: center;
	}
	.toggler-social-btn.active .close-icon {
		scale: 2;
	}
	.toggler-social-btn.active .btn-title {opacity:0;}
	.toggler-social-btn:not(.active) .btn-title {opacity:1;}
	.btn-title {
		background-color: #636363bf;
		position: fixed;
		left: 20px;
		bottom: 128px;
		z-index: 10;
		color: #ffffff;
		font-size: 15px;
		padding: 5px 10px;
		border-radius: 10px;
	}

	.social-link-title{font-weight:400;font-size:18px;}
	.popup-contact-wrap {
		position: fixed;
		bottom: 70px;
		left: 30px;
		z-index: 100;
	}
	.popup-contact-menu-wrapper {
		position: fixed;
		left: 30px;
		bottom: 150px;
		width: 270px;
		line-height: 2;
		background: #fff;
		padding: 20px 0;
		border-radius: 20px;
		box-shadow: 1px 1px 8px 1px #ccc;
		transition: transform 400ms ease;
		transform: translateX(-450px);
	}
	.popup-contact-menu-wrapper.active {
		transform: translateX(0);
	}

	.social-link-item {
		transition: all 400ms ease;
	}
	.social-link-item:hover {
		background: #ff69331a;
		padding: 0px 15px;
		border-radius: 10px;
	}

	.popup-contact-btn {animation: pulse 2s infinite;
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background:#ff0000;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		cursor: pointer;
		overflow: hidden;
	}
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgb(253 0 0 / 65%);
	}
	70% {
		box-shadow: 0 0 0 11px rgb(255 0 0 / 14%);
	}
	100% {
		box-shadow: 0 0 0 0 rgb(255 251 251);
	}
}



@keyframes pulseIcon {
	0% {
		box-shadow: 0 0 0 0 rgb(255 0 0 / 60%);
	}
	70% {
		box-shadow: 0 0 0 15px rgb(255 131 131 / 4%);
	}
	100% {
		box-shadow: 0 0 0 0 rgb(246 26 26 / 0%);
	}
}
.icon-content {
	animation: slideIn 0.2s forwards;
	display: flex;
	justify-content: center;
	align-items: center;
}
@keyframes slideIn {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}