#help {
	margin: 40px 82px 0px;
}

@media screen and (max-width: 1500px) and (min-width: 700px) {
	#help {
	   margin: 40px 76px 0px;
    }
}

@media screen and (max-width: 700px) {
    #help {
	   margin: -102px 0px 0px;
	}	
}




#help .flex {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	box-shadow: 0px 0px 20px -10px rgb(0 0 0 / 30%);
	border-radius: 22px;
	height: 100px;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: nowrap;
}

@media screen and (max-width: 700px) {
	#help .flex {
  box-shadow: 0px 0px 15px -5px rgb(0 0 0 / 21%);
  flex-wrap: wrap;
  height: 273px;
  flex-direction: column;
  border-radius: unset;
  gap: 15px;
 }
}


.help_text {
	width: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-family: 'Literata';
	font-size: clamp(0.9375rem, 0.3111rem + 0.8345vw, 1.3125rem);
	font-weight: 720;
	letter-spacing: -0.024em;
	color: var(--ok-col-base-blue);
	flex-wrap: nowrap;
}



.help_text span {
	color: var(--ok-col-acent-red);
	font-family: 'Literata';
	font-weight: 810;
	font-size: 58px;
	margin: -6px 5px 0px;
	animation-name: red-help;
	animation-play-state: running;
	animation-direction: normal;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0, 0, 0.79, 1.18);
	transform-origin: 50% 100%;
}

@media screen and (max-width: 700px) {
	.help_text span {
		position: absolute;
		z-index: -1;
		font-size: 43px;
		margin-bottom: 80px;
		line-height: 1em;
	}
}

.help_icons {
	width: auto;
	display: flex;
	justify-content: space-evenly;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: clamp(3rem, -5.3519rem + 11.1266vw, 8rem);
}




.help_icons img {
	width: clamp(2.188rem, 0.6229rem + 2.0851vw, 3.125rem);
}

@media (max-width: 700px) {
	.help_icons img {
		width: 40px;
	}

}



@media (max-width: 700px) {

	.help_text {
		width: 100%;
				text-wrap: balance;
				text-align: center;
				z-index: 2;
				justify-content: center;
				font-size: 21px;
				line-height: 1.2em;
				padding-block-start: 40px;
				flex-direction: column;
			   }
	
	.help_icons {
		width: 90%;
		gap: unset;}

}


@keyframes red-help {
	10% {
	transform: rotate(10deg) scale(90%);
    
	}
	15% {
    transform: rotate(-15deg) scale(100%);
   
	}
    30% {
    transform: rotate(15deg) scale(110%);
	
	}
    50% {
    transform: rotate(-15deg) scale(100%);
		
	}
    70% {
    transform: rotate(5deg) scale(100%);
    
	
	}
    80% {
    transform: rotate(0deg) scale(100%);
	
	}
	
}



#help {
	margin: 40px -60px 0;
}
#help a::after {
	content: none !important;
}
#help .help_icons img {
	margin: 0;
}




#help .flex {
	display: flex;
	flex-direction: column;
	padding-block-end: 15px;
	justify-content: space-evenly;
	height: 190px;
}

@media screen and (max-width: 700px) {
	#help .flex {
		height: 210px;
	}
}

@media screen and (min-width: 700px) and (max-width: 2400px) {
	#help[help-tel] .flex {
		box-shadow: none;
		background-color: transparent;
		border-radius: 0;
	}

	#help[help-tel] {background: #ffffff;height: clamp(270px, 245.3430px + 1.8051vw, 280px);padding-block-start: 0;box-shadow: 0px 0px 20px -10px rgb(0 0 0 / 30%);border-radius: 22px;}
}



[help-tel] .help_text span {
	color: var(--ok-col-base-blue);
	font-family: 'Literata';
	font-weight: unset;
	font-size: unset;
	margin: 10px 5px 0 5px;
	animation-name: red-help-tel;
	animation-play-state: running;
	animation-direction: normal;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0, 0, 0.79, 1.18);
	width: 50px;
}


[help-tel] .help_text span svg {
    width: 100%;
    height: 100%;
    fill: var(--ok-col-acent-red);
}


@keyframes red-help-tel {
	5% {
	transform: rotate(4deg);
		transform-origin-: 50% 100%;
    
	}
	10% {
    transform: rotate(-4deg);
		transform-origin-: 75% 75%;
   
	}
    15% {
    transform: rotate(4deg);
		transform-origin: 100% 50%;
	
	}
    20% {
    transform: rotate(-4deg);
		transform-origin-: 75% 25%;
		
	}
    25% {
    transform: rotate(4deg);
		transform-origin: 50% 0%;
		
    
	
	}
    30% {
    transform: rotate(-4deg);
		transform-origin-: 25% 25%;
	
	}
	
	35% {
    transform: rotate(4deg);
		transform-origin: 0% 50%;
	
	}
	
	40% {
    transform: rotate(-4deg);
		transform-origin-: 25% 75%;
		
	
	}

    45% {
    transform: rotate(4deg);
		transform-origin-: 50% 100%;
	
	}

    48% {
    transform: rotate(0deg);
		
	
	}

	90% {
    transform: rotate(0deg);
		
	
	}

	
}

[help-tel] .help_tel {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 3.3vw;
	max-height: 65px;
	min-height: 51px;
}

@media screen and (min-width: 700px) and (max-width: 2400px) {
    [help-tel] .help_tel {
		display: flex;
		flex-wrap: wrap;
	}
[help-tel] div:is(.tel_name, .tel_number) {
	width: 50%;
}
	
}

[help-tel] div:is(.tel_name, .tel_number) {
	display: flex;
	align-items: center;
	height: 100%;
}

[help-tel] .tel_name input {
	border: 2px solid var(--ok-col-base-blue);
	display: flex;
	height: 100%;
	margin: 0;
	border-radius: 1.3vw 0 0 1.3vw;
}

[help-tel] .tel_number input {
	border: 2px solid var(--ok-col-base-blue);
	border-radius: 0 1.3vw 1.3vw 0;
	border-inline-start: none;
	display: flex;
	height: 100%;
	margin: 0;
}

[help-tel] .help_tel a.dozvon {
	color: #ffffff;
	background-color: var(--ok-col-base-blue);
	display: flex;
	align-items: center;
	margin: 0;
	text-transform: uppercase;
	font-family: 'Nunito Sans';
	font-size: clamp(0.86rem, 0.4291rem + 0.4754vw, 0.964rem);
	line-height: 0;
	letter-spacing: .093em;
	word-spacing: 0.1333em;
	font-weight: 830;
	font-style: normal;
	font-stretch: 95%;
	font-variation-settings: "YTLC" 515;
	font-optical-sizing: auto;
	flex-direction: row;
	text-decoration: none;
	padding-inline: 0em;
	border-radius: 1.3vw;
	height: 100%;
	width: 48%;
	pointer-events: none;
	justify-content: center;
	margin-block-start: 1.6em;
	opacity: 0.1;
}

[help-tel] .help_tel .tel_name.validok + .tel_number.validok + a.dozvon {
	pointer-events: auto;
	opacity: 1;
	cursor:pointer;
}



[help-tel] :is(.tel_name, .tel_number) input {
	font-family: 'Nunito Sans', arial;
	color: var(--ok-col-base-blue);
	font-size: clamp(0.999999rem, 0.5443rem + 0.5029vw, 1.11rem);
	line-height: 0;
	letter-spacing: -.01666em;
	word-spacing: 0.1333em;
	font-weight: 683;
	font-style: normal;
	font-stretch: 90%;
	font-variation-settings: "YTLC" 515;
	font-optical-sizing: auto;
}

@media (max-width: 700px) {
	[help-tel] .help_text span {
		margin-bottom: 105px;
		line-height: 1em;
		width: 45px;
	}

    #help[help-tel] .flex  {
		height: 400px;
		padding-block-start: 20px;
	}

	[help-tel] .help_tel {
		flex-direction: column;
		height: auto;
		max-height: unset;
		min-height: unset;
		justify-content: flex-end;
	}
	
    #help[help-tel] :is(.tel_name input, .tel_number input, a.dozvon) {
		height: 65px;
		width: 80vw;
	}
	
	#help[help-tel] a.dozvon {
		border-radius: 21px;
		justify-content: center;
		margin-block-start: 24px;
		width: 85%;
	}

	 #help[help-tel] .tel_number input {
		border-radius: 0 0 21px 21px;
		border-inline: 2px solid var(--ok-col-base-blue);
		border-block-start: none;
	}

	 #help[help-tel] .tel_name input {
		border-radius: 21px 21px 0 0;
		border-inline: 2px solid var(--ok-col-base-blue);
	}

    [help-tel] div:is(.tel_name, .tel_number) {
		height: auto;
	}

	#help {
		margin-inline: -30px;
		margin-block: 40px;
	}

   [help-tel] .dozvonok img {
	   height: 40%;
	   margin-block: 0;
	  }

}



[help-tel] .help_tel:has(input:focus)::after {
	content: "";
	font-family: 'Nunito Sans', arial;
	color: var(--ok-col-base-blue);
	color: #252f417a;
	font-size: clamp(0.999999rem, 0.5443rem + 0.5029vw, 1.11rem);
	line-height: 1.24em;
	letter-spacing: -.01666em;
	word-spacing: 0.1333em;
	font-weight: 610;
	font-style: normal;
	font-stretch: 90%;
	font-variation-settings: "YTLC" 515;
	font-optical-sizing: auto;
	position: absolute;
	display: flex;
	width: 64%;
	background: #ffffff;
	text-align: center;
	padding-block: 13px;
	padding-inline: 38px;
	margin-block-end: -4px;
}

@media (max-width: 700px) {
	[help-tel] .help_tel:has(input:focus)::after {
		margin-block-end: -35px;
	}
}

[lang="uk"] [help-tel] .help_tel:has(input:focus)::after {
	content: "В імені дозволяються лише літери алфавіту.\A Формат номеру телефона +380ХХХХХХХХХ";
	white-space: pre-wrap;
}

[lang="ru"] [help-tel] .help_tel:has(input:focus)::after {
	content: "В имени разрешается только буквы алфавита.\A Формат номера телефона +380ХХХХХХХХХ";
	white-space: pre-wrap;
}

[help-tel] .help_tel:has(.tel_name.validok + .tel_number.validok)::after {
	display: none;
}

[help-tel] .dozvonok {
	position: absolute;
	display: none;
	width: 100%;
	height: 400px;
	background-color: #ffffff;
	z-index: 3;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

[help-tel] .dozvonok svg {
	height: 44%;
}

[help-tel] .dozvonok .help_text {
	padding-block-start: 10px;
}

@media screen and (min-width: 700px) and (max-width: 2400px) {
	#help {
	margin-inline: 0;
	}

    [help-tel] .help_tel:has(input:focus)::after {
	display: flex;
	justify-content: center;
	margin-block-start: 166px;
	padding-block: 28px;
	}

	[help-tel] .dozvonok {
		flex-direction: row;
		width: clamp(800px, -369.2629px + 97.3574vw, 1500px);
		height: 270px;
		border-radius: 22px;
		gap: 30px;
	}

	[help-tel] .dozvonok svg {
		height: 60%;
	}

     [help-tel] .dozvonok img {
	   height: 60%;
	   margin-block: 0;
	  }

}


#recallme-wrap .help_text > span {
	display: none;
}

#recallme-wrap #help[help-tel] {
	box-shadow: none;
	height: auto;
}

#recallme-wrap [help-tel] .help_tel {
	flex-direction: column;
	flex-wrap: nowrap;
	height: auto;
	max-height: unset;
	min-height: unset;
	gap: 15px;
}

#recallme-wrap #help[help-tel] .flex {
	height: auto;
	box-shadow: none;
}

#recallme-wrap [help-tel] .help_tel a.dozvon {
	height: 70px;
	width: 260px;
	margin-block-start: 0;
	border-radius: 26px;
}

#recallme-wrap [help-tel] div:is(.tel_name, .tel_number) {
	width: 380px;
	height: 70px;
	justify-content: center;
}

#recallme-wrap [help-tel] :is(.tel_name, .tel_number) input {
	border-radius: 26px;
	border: 2px solid var(--ok-col-base-blue);
}

#recallme-wrap .help_text {
	margin-block: 1.3em;
	width: 15em;
	justify-content: center;
}

#recallme-wrap [help-tel] .dozvonok {
	left: 0;
	top: 0;
	border-radius: 0;
	width: 100%;
	height: 100%;
	flex-direction: column;
}

#recallme-wrap [help-tel] .dozvonok img {
	height: 40%;
}

#recallme-wrap .dozvonok .ponyav::after {
	content: "Зрозуміло";
}

#recallme-wrap .dozvonok .ponyav {
    color: #ffffff;
    background-color: var(--ok-col-base-blue);
    display: flex;
    align-items: center;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Nunito Sans';
    font-size: clamp(0.86rem, 0.4291rem + 0.4754vw, 0.964rem);
    line-height: 0;
    letter-spacing: .093em;
    word-spacing: 0.1333em;
    font-weight: 830;
    font-style: normal;
    font-stretch: 95%;
    font-variation-settings: "YTLC" 515;
    font-optical-sizing: auto;
    flex-direction: row;
    text-decoration: none;
    border-radius: 26px;
    height: 80px;
    padding-inline: 7em;
    width: auto;
    cursor: pointer;
}

#recallme-wrap:has(.dozvonok[style="display: flex;"]) {
	overflow: hidden;
}

#recallme-wrap .recallme-title {
	width: 100%;
	display: flex;
	align-items: center;
	font-family: 'Literata';
	font-size: clamp(0.9375rem, 0.3111rem + 0.8345vw, 1.3125rem);
	font-weight: 720;
	letter-spacing: -0.024em;
	color: #ffffff;
	flex-wrap: nowrap;
	flex-direction: column;
	text-transform: none;
}

#recallme-wrap .recall-mess > a > span {
	display: none;
}

#recallme-wrap .recall-mess > a {
	margin-block-end: 25px;
}

#recallme-wrap .recall-mess img {
	border-radius: 16px;
}

@media screen and (max-width: 700px) {
	#recallme-wrap .recallme-title {
		font-size: 21px;
	}

	#recallme-wrap .recallme-top {
		margin-block-start: -15px;
	}

	#recallme-wrap .help_text {
		padding-block-start: 0;
	}

	#recallme-wrap #help[help-tel] .flex {
		padding-block: 0;
		gap: 0;
	}

	#recallme-wrap [help-tel] .dozvonok img {
		width: 65%;
		height: auto;
	}

	#recallme-wrap .dozvonok .ponyav {
		height: 70px;
	}
}

@media screen and (min-width: 700px) and (max-width: 2400px) {
	#homepage #help {
		margin-inline: 82px;
	}
}