@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:#f98155;
		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: 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: translateY(100vh);
	}
	.popup-contact-menu-wrapper.active {
		transform: translateY(-100vh);
	}
	.popup-contact-wrap {
		position: fixed;
		bottom: 67px;
		left: 18px;
		z-index: 100;
	}
	.toggler-social-btn.active .close-icon {
		scale: 15;
		bottom: 4px;
		position: relative;
	}
	.popup-contact-wrap {
		position: fixed;
		bottom: 60px;
		left: 30px;
		z-index: 100;
	}
	.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: 50px;
		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: translateY(100vh);
	}
	.popup-contact-menu-wrapper.active {
		transform: translateY(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:#f98155;
		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(249 129 85 / 70%);
	}
	70% {
		box-shadow: 0 0 0 15px rgba(38, 67, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(38, 67, 255, 0);
	}

}
@keyframes pulseIcon {
	0% {
		transform: translateX(0) scale(1);
		opacity: 1;
	}
	50% {
		transform: translateX(10px) scale(1.4);
		opacity: 0.7;
	}
	100% {
		transform: translateX(0) scale(1);
		opacity: 1;
	}


}
.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;
	}
}