/***************/
/* grid layout */
.row {
	max-width: 1700px;
	margin: 0 auto;
	display: grid;
	justify-items: center;
	gap: 20px;
	grid-template-columns: repeat(var(--num-columns), minmax(300px, 450px));
	justify-content: space-around;
}

.column {
	width: 100%;
	max-width: 400px;
}
.row.col-2 { --num-columns: 2; }
.row.col-3 { --num-columns: 3; }
.row.col-4 { --num-columns: 4; }

@media (max-width: 1475px) {
  .row.col-4 { --num-columns: 3; }
}
	
@media (max-width: 1062px) {
  .row.col-2, 
  .row.col-3, 
  .row.col-4 {
    --num-columns: 2; 
  }
}
@media (max-width: 650px) {
 .row.col-2, 
 .row.col-3, 
 .row.col-4 {
    --num-columns: 1;
  }
}
/* grid layout */
/***************/


.top-services-wrap {
	position: relative;
	background: linear-gradient( rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4) ), url("img/service-bg.png");	
	background-size: cover;
	background-repeat: no-repeat;
	top: -70px;
	padding-top: 80px;
	z-index: 1;
	
	/**/
	background: linear-gradient( rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) ), url("img/bc1-min.png");
	background-size: cover;
	background-repeat: no-repeat
	
}



/*****************/
/* langing-title */
.langing-title-wrap {
	--color-accent-rose: #ff2f98;
	--color-accent-border-rose:  #ff2f9821;
	--color-accent-bg-rose: #ffeaf3;
	--color-accent-shadow-rose: #ffcfe7;

	--color-accent-blue: #219ddd;
	--color-accent-border-blue: #a8dcf7;
	--color-accent-bg-blue: #e9f6fd;
	--color-accent-shadow-blue: #c4e7f9;
	
	--color-accent: var(--color-accent-blue);
	--color-accent-bg: var(--color-accent-bg-blue);
	--color-accent-border: var(--color-accent-border-blue);
	--color-accent-shadow: var(--color-accent-shadow-blue);
	
	--title-collor: #2a5d9f;
	--mrj-body-color-1: #414957;
	--gap: 5px;
	
		
	/* blue navy slate  */
	/* много светло */
	--navy-50:  #f2f5f9;
	--navy-100: #e1e7f0;
	--navy-200: #c3cfdf;

	/* средни */
	--navy-300: #94a9c7;
	--navy-400: #5f7fae;
	--navy-500: #3f5f91;

	/* основни */
	--navy-600: #2f4a73;
	--navy-700: #243a5a;
	--navy-800: #1a2b44;
	--navy-900: #111c2e;

	--title-collor: var(--navy-600);

	font-family: Roboto Condensed;
	
}
.langing-title-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	row-gap: var(--gap);
	max-width: 650px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 50px;
}
.langing-subtitle-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: var(--gap);
}


.langing-subtitle-top-icon {
	width: 30px;
	height: 30px;
	color: var(--title-collor);
	fill:  var(--title-collor);
}

.langing-title-icon-wrap {
	width: 20px;
	height: 20px;
	color: var(--color-accent);
	fill: var(--color-accent);
}

.langing-subtitle-top-icon svg,
.langing-title-icon-wrap svg {
	width: 100%;
	height: 100%;
	display: block;
}

.langing-subtitle {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	column-gap: 5px;
	background: var(--color-accent-bg);
	/**/
	/* padding: 4px 10px 3px 10px; заменен с ->  langing-subtitle-text */
	/* padding само в края */
	padding: 0px 10px;
	border-radius: 20px;
	line-height: 1;
	color:  var(--color-accent);
}

.langing-subtitle-text {
	/* padding за височина и подравняване на текста ascent и descent  */
	padding: 9px 0px 8px 0px;
	line-height: 1em;
	font-size: 0.75em;
	text-transform: uppercase;
}

.langing-title-text {
	color: var(--title-collor);
	padding-left: max(10px, env(safe-area-inset-left));
	padding-right: max(10px, env(safe-area-inset-right));
	font-size: clamp(1.875rem, 1.75rem + 0.5556vw, 2.25rem);
	line-height: 1.25;
	font-weight: 500;
}
/* reset */
.langing-title-text  h2,
.langing-title-text  h3 ,
.langing-title-text  h4 {
	/*
	margin: unset;
	font-size: unset;
	line-height: unset;
	font-weight: unset;
	*/
	all: unset;
	display: block;
}
.langing-title-text .accent {
	position: relative;
	color: var(--color-accent);
	font-weight: 700;
}
.langing-title-text .accent svg {
	position: absolute;
	color: var(--color-accent);
	width: 100%;
	height: 100%;
	left: 0;
	top: 85%;
}
.langing-title-desc {
	color: var(--mrj-body-color-1);
	line-height: 1.25;
}

/* опции border и shadow */
/* ✨ lt-shadow */
.lt-shadow .langing-subtitle {
	box-shadow: 0px 0px 3px var(--color-accent-shadow);
	border: 1px solid var(--color-accent-border);
}

/* опции border и shadow */
/* ✨ lt-shadow */
.lt-shadow-big .langing-subtitle {
	box-shadow: 0px 0px 12px var(--color-accent-shadow);
	border: 1px solid var(--color-accent-border);
}

/* ✨  прозрачен  */
.lt-transparent .langing-subtitle {
	background: #fff;	
}

/* опции настройки */
/* ✨ lt-top-icon-outline */
.lt-top-icon-outline .langing-subtitle-top-icon {
	stroke: var(--color-accent);
	fill:  var(--color-accent);
	stroke-width: 0px;
}

/* ✨ акцент  */
.lt-acent-bg .langing-subtitle {
	background: var(--color-accent);
	color: var(--color-accent-bg);
}
.lt-acent-bg .langing-title-icon-wrap {
	color: var(--color-accent-bg);
	fill: var(--color-accent-bg);
}

/* langing-title */
/*****************/








/******************/
/* BUBBLE EFFECT  */
.bubble-effect  {
	position: relative;
	--c: var(--color-accent);
}
.bubble-effect::before,
.bubble-effect::after {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: -1;
	position: absolute;
	content: '';
	display: block;
	width: 140%;
	height: 100%;
	height: 300%;
	left: -20%;
	z-index: -1000;
/*	transition: all ease-in-out 0.5s; */
	background-repeat: no-repeat;
}
.bubble-effect::before {
	top: -220%;	
	background-image: 
	radial-gradient(circle at center, var(--c) 70%, transparent 0px),
	radial-gradient(circle at center, transparent 40%, var(--c) 0px, var(--c) 60%,transparent 0px),
	radial-gradient(circle at center, var(--c) 70%, transparent 0px),
	radial-gradient(circle at center, var(--c) 70%, transparent 0px),
	radial-gradient(circle at center, transparent 40%, var(--c) 0px,var(--c) 60%, transparent 0px),
	radial-gradient(circle at center, var(--c) 70%, transparent 0px),
	radial-gradient(circle, var(--c) 70%, transparent 0px),
	radial-gradient(circle at center, transparent 40%, var(--c) 0px,var(--c) 60%, transparent 0px),
	radial-gradient(circle, var(--c) 70%, transparent 0px);
	background-size: 10px 10px, 15px 15px, 10px 10px, 10px 10px, 15px 15px, 10px 10px, 10px 10px, 15px 15px, 10px 10px;
}

.bubble-effect.is-animated.is-active::before {
	visibility: visible;
	opacity: 1;
	animation: topBubbles ease-out  2s forwards infinite; 
}

@keyframes topBubbles {
	0% {
		background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	 50% {
	 	background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	 100% {
		background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
	 	background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}

.bubble-effect::after {
	bottom: -220%;
	background-image:
	radial-gradient(circle, var(--c) 70%, transparent 0px),
	radial-gradient(circle, var(--c) 70%, transparent 0px),
	radial-gradient(circle, transparent 40%, var(--c) 0px, var(--c) 60%,transparent 0px),
	radial-gradient(circle, var(--c) 70%, transparent 0px),
	radial-gradient(circle, transparent 40%, var(--c) 0px, var(--c) 60%,transparent 0px),
	radial-gradient(circle, var(--c) 70%, transparent 0px),
	radial-gradient(circle, transparent 40%, var(--c) 0px, var(--c) 60%,transparent 0px),
	radial-gradient(circle, var(--c) 70%, transparent 0px),
	radial-gradient(circle, transparent 40%, var(--c) 0px, var(--c) 60%,transparent 0px), 
	radial-gradient(circle, var(--c) 70%, transparent 0px),
	radial-gradient(circle, var(--c) 70%, transparent 0px);
	background-size: 10px 10px, 10px 10px, 12px 12px, 10px 10px, 15px 15px, 10px 10px, 15px 15px, 10px 10px, 15px 15px, 10px 10px, 10px 10px;
}
.bubble-effect.is-animated.is-active::after {
	visibility: visible;
	opacity: 1;
	animation: bottomBubbles ease-out  2s forwards infinite;
}

@keyframes bottomBubbles {
	0% {
		background-position: 10% -10%, 20% 10%,  25% -10%, 35% -10%,  45% -10%, 45% -10%, 50% -10%,  85% -10%,  80% -10%, 	70% -10%,  70% 0%;
	}
	 50% {
		background-position: 0% 80%,   10% 60%,  15% 80%,  25% 100%,  35% 60%,  55% 90%,  60% 60%,    75% 70%, 	90% 60%, 	95% 60%, 105% 0%
	}
	100% {
		background-position: 0% 90%,   10% 70%,  15% 90%,  25% 110%,  35% 70%,  55% 90%,  60% 60%,    75% 80%, 	90% 70%, 	95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,0% 0%;
	}
}

/* BUBBLE EFFECT  */
/******************/










/**************/
/* BOX GLASS */

/* главен клас за този дизайн */
.box_border_effect_wrap {
	--border_width: 15px;
	--box_features_height: 360px;
	
	--shadow_color: #22a4e4;
	--border_effect_color: 	#1ca3e6;
	/* само за стъклената кутия да е прозрачна */
	--glass_border_effect_color: rgba(14, 157, 227, 0.15);
	
	--title_color: #3f7a97;
	--title_sep_height: 15px;
	--title_sep_color: #b3b3b3;
	--icon_color: #3f7a97;
	
	/* ✨ опция ако се поставя икона с кръг */
	/* за иконата ако има такава */
	/* ширина на кръга */
	--icon_wrap_width: 145px;
	/* дебелина на кръга */
	--icon_circle_width: 35px;
	
	/* ✨ опции за цвят на иконата */
	--gradient-1: #fffdfd;
	--gradient-2: #E6E6E6;
	
	
	/* position: relative; */
	padding: 20px;
	border-radius: 20px;

}


/*******************************/
/* рамката в страни от кутията */

.border_color_shadow {
	position: relative;
	z-index: 0;
}
/* добавя рамка и лъчи с  before after */
.border_color_shadow::before {
	/* absolute в страни от родителсия контейнер */
	content: "";
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
	margin: calc(var(--border_width)* -1);
	/* inset: calc(var(--border_width)* -1); */
	border-radius: 20px;
}

/* цвят на рамката вътрешна сянка на рамката слаба само като черта  */
.border_color_shadow::before {
	box-shadow: 0px 3px 25px -5px var(--shadow_color);
	background: var(--border_effect_color);
	z-index: -2;
}
/* ефект стъкло */
.box_border_effect_wrap.glass_effect .border_color_shadow::before {
	/* стъкло прозрачни цветове */
	box-shadow: 0px 3px 25px -5px var(--shadow_color), inset 0px 0px 0px 1px #fff;
	background: var(--glass_border_effect_color);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	
}
/* добавя вътрешна сянка над всичко това е в съдържанието не за рамката */
.border_color_shadow::after {
	content: "";
	position: absolute;
	box-shadow: inset 0px 0px 14px -2px #0b0b0b99;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	pointer-events: none; 
	border-radius: 20px;
}
/* рамката в страни от кутията */
/*******************************/






/******************/
/* анимирани лъчи */
.ray_2 {
	position: relative;
}
.ray_2::before,
.ray_2::after {
	/* absolute в страни от родителсия контейнер */
	/* content: ""; */
	position: absolute;	
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: calc(var(--border_width)* -1);
	/* inset: calc(var(--border_width)* -1); */
	border-radius: 20px;
	z-index: -1;
	/* лъчите са с еднакъв фон */
	background-image:  repeating-linear-gradient(-45deg, #ffffff20 0, #ffffff25 5px, #ffffff30 10px, #ffffff40 15px, #ffffff30 20px, #ffffff24 25px, #ffffff20 30px, #fff0 35px, #e1f4fa00 59px );
	/* за да не се вижда началото и края на background */
	background-size: 200%;

}
/* добавени за долу за логика да се анимират с класове
.ray_2::before {
	background-position: -250px 0;
	animation: box_ray_1 10s linear infinite alternate forwards;
}
.ray_2::after {
	animation: box_ray_2  12s linear infinite alternate forwards;
}
*/
@keyframes box_ray_1 {
	0% 	 { background-position: -250px 0; }
	100% { background-position: 0px 0px; }
}

@keyframes box_ray_2 {
	0%	 { background-position: 0px 0px;  }
	100% {background-position: -250px 0px; }
}

/* логика за да се показва с класове */
/*  показване на един лъч */
.box_border_effect_wrap.border_ray_1 .ray_2::before { content: ""; }
/* показване на два лъча */
.box_border_effect_wrap.border_ray_2 .ray_2::before,
.box_border_effect_wrap.border_ray_2 .ray_2::after	{ content: ""; }
	
/* анимиране на един лъч */
.box_border_effect_wrap.border_ray_1.animated_ray .ray_2::before,
.box_border_effect_wrap.border_ray_2.animated_ray .ray_2::before {
	background-position: -250px 0;
	animation: box_ray_1 10s linear infinite alternate forwards;
}
/* анимиране на един лъча */
.box_border_effect_wrap.border_ray_2.animated_ray .ray_2::after {
	animation: box_ray_2  12s linear infinite alternate forwards;
}
/* анимирани лъчи */
/******************/



/******************/
/* вътрешна сянка */
/* вътрешна сянка до описанието и малка черта за по-добр ефект */
.inset_shadow_white {
	position: relative;
}
.inset_shadow_white::before {
	/* absolute в страни от родителсия контейнер */
	content: "";
	position: absolute;
	box-shadow: 0px 0px 3px 0px #ffffff82, inset 0px 0px 0px 1px #ffffffab;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
	margin: -2px;
	border-radius: 20px;
}
/* вътрешна сянка */
/******************/


/*******************/
/* svg под кутията */
.svg_outside {
	position: relative;
}
.svg_outside svg {
	position: absolute;
	width: 120px;
	z-index: -1;
	transform: rotate(20deg) translate3d(-90px, -21px, 0px);
	animation: box_glass_svg_moive_1 10s linear alternate infinite;
}
@keyframes box_glass_svg_moive_1 {
	0% { 	
		transform: rotate(20deg) translate3d(-90px, -21px, 0px) ;
	}
	100% {
		transform: rotate(20deg) translate3d(-40px, -21px, 0px);
	}
}
/* svg под кутията */
/*******************/


/* съдържание белия цвят където е всичко box_features box_title и box_desc_text */
.box_border_effect_wrap .box_content {
	border-radius: 20px;
	padding-bottom: 20px;
	background: #fff;
}	



/****************/
/* box_features */	
.box_border_effect_wrap .box_features {
	min-height: var(--box_features_height);
	border-radius: 20px 20px 0 0;
}
/* ✨ опция ако има икона с кръг тя да се центрирана */
/* ако във box_features има икона да бъде центрирана */
.box_border_effect_wrap .box_features.box_grid_center {
	display: grid;
	place-items: center;
}
.box_border_effect_wrap .box_features img {
	display: block;
}
/* box_features */	
/****************/





/*****************/
/* box_icon_wrap */
/* ✨ допълнителна опция ако се поставя икона с кръг  */
.box_icon_wrap {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--icon_wrap_width);
	height: var(--icon_wrap_width);	
	border-radius: 50%;
}

/* бял цвят под svg иконата и вътре в кръга */
.box_icon_wrap::after {
	position: absolute;
	content: "";
	width: calc(100% - var(--icon_circle_width));
	height: calc(100% - var(--icon_circle_width));
	border-radius: 50%;
	box-shadow: 0px 6px 10px 2px #00000061 inset;
	background: #fff;
	z-index: 1;
}

/* ✨  кръг около иконата  */
/* ✨ .box_circle */
.box_circle .box_icon_wrap {
	background:  linear-gradient(45deg, var(--gradient-2), var(--gradient-1) 70%);
	box-shadow: 0px 0px 15px #00000091;
}

/* ✨ размазан кръг без фон */
/* ✨ .box_circle.box_blur */
.box_circle.box_blur .box_icon_wrap {
	box-shadow: 0px 0px 15px #555;
	backdrop-filter: blur(18px);
	background: none;
}
/* box_icon_wrap */
/*****************/


/************/
/* box_icon */
.box_icon {
	display: grid;
	place-items: center;
	position: relative;
	/* width: 70px; */
	width: calc( (var(--icon_wrap_width) - 5px) / 2 );
	z-index: 2;
}
.box_icon svg {
	width: 100%;
	fill: var(--icon_color);
	color: #fff;
	z-index: 1;
}
/* box_icon */
/************/


/*************/
/* box_title */
.box_title {
	position: relative;
	margin-bottom: 5px;
}
.box_title .box_title_text  {
	font-family: roboto condensed;
	font-size: 24px;
	text-align: center;
	font-weight: 400;
	color: var(--title_color); 
}
.box_title_icon_sep {
	position: relative;
	height: var(--title_sep_height);
	text-align: center;
	display: grid;
	place-items: center;
}
.box_title_icon_sep::after,
.box_title_icon_sep::before {
	content: "";
	position: absolute;
}
/* линия */
.box_title_icon_sep::after {
	content: "";
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg,#FFF, var(--title_sep_color) 50%, white );
}
/* бяла точка под svg иконата на загслвието */
.box_title_icon_sep::before {
	background: #fff;
	width: calc(var(--title_sep_height) + 8px);
	height: calc(var(--title_sep_height) + 8px);
	border-radius: 50%;
	z-index: 1;
}
.box_title_icon_sep svg {
	fill: var(--icon_color);
	height: 100%;
	width: auto;
	z-index: 1;
}
/* box_title */
/*************/

/* текста описание */
.box_border_effect_wrap .box_desc_text {
	padding: 10px;
	font-size: 1rem;
}


/* BOX GLASS */
/**************/



/**************/
/* FIGURE BOX */

.animate-box-service {
	height: calc(360px + 21px + 30px);
}

.animated-figure {
	margin: 0 auto;
	transition: all 0.6s ease;
	position: relative;
}

.animated-figure.mrj-pause-animation * {
	animation-play-state: paused !important;
}

.animated-figure.filter-grayscale .figure-wrap {
	filter: grayscale(0.7);
}

/* figcaption описанието на figure */
.animated-figure figcaption {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 21px;
	background: #59b4f7;
	color: #fff;
	bottom: -21px;
	position: absolute;
	width: 100%;
	text-align: center;
	z-index: 1;
}

.animated-figure figcaption:before {
	content: "";
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 12px 12px 12px 12px;
	border-color: transparent transparent #59b4f7 transparent;		
	bottom: 20px;
	display: block;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
}

.figure-wrap {
	overflow: hidden;
	width: 100%;
	height: 360px;	
	contain: layout paint;
	transition: all 0.5s linear;
}

.figure-bottom-wrap {
	position: relative;
	display: flex;
	justify-content: center;
	top: 27px;
}
/* FIGURE BOX */
/**************/


/*****************/
/* toggle_switch */
.toggle_switch.outside {
/*	--toggle_switch_width: 56px;*/
	--toggle_switch_height: 30px;
	--indicator_width: 45px;
	--indicator_height: 7px;
	--control_width: 18px;
	--control_height: 18px;
	--indicator_color: #B4B2A9;
	
	--indicator_color_active: #59b4f7;
	--control_bc_color_active: #E6F1FB;
	--control_border_color_active: #69AEE1;
}
.toggle_switch {
	/*--toggle_switch_width: 56px;*/
	--toggle_switch_height: 36px;
	--indicator_width: 37px;
	--indicator_height: 16px;
	--control_width: 12px;
	--control_height: 12px;
	--indicator_color: #B4B2A9;
	--indicator_color_active: #71bff9;
}

.toggle_switch {
	position: relative; 
	display: inline-block;
	height: var(--toggle_switch_height);
	cursor: pointer;
	user-select: none;
}
.toggle_switch input {
	position: absolute;
	width: 0;
	height: 0;	
	opacity: 0;
}
.indicator {
	position: relative;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: var(--indicator_width);
	height: var(--indicator_height);
	background: var(--indicator_color);
	border-radius: 20px;
	transition: background 0.3s ease;
}

.toggle_switch.outside .indicator {
	border-radius: 5px;
	background: var(--indicator_color);
}
.indicator:before {
	content: "";
	position: absolute;
	width: var(--control_width);
	height:  var(--control_height);
	top: 50%;
	transform: translateY(-50%);
	left: 4px;
	border-radius: 50%;
	background: #fff;
	transition: all 0.3s cubic-bezier(.34,1.56,.64,1), border-color 0.3s ease, background 0.3s ease;
}
.toggle_switch.outside .indicator:before {
	border: 2px solid #D3D1C7;
}
.toggle_switch:not(.outside) input:checked ~ .indicator:before {
	transform: translateY(-50%) translateX( calc( var(--indicator_width) - var(--control_width) - 7px) );
}
.toggle_switch.outside input:checked ~ .indicator:before {
	border-color: var(--control_border_color_active);
	background:  var(--control_bc_color_active );
	transform: translateY(-50%) translateX( calc( var(--indicator_width) - var(--control_width) - 8px ) );
}

.toggle_switch:not(.outside) input:checked ~ .indicator {
	background: var(--indicator_color_active)
}

.toggle_switch.outside input:checked ~ .indicator {
	background: var(--indicator_color_active);
}

/* toggle_switch */
/*****************/