
.edit_here
{
	/* TODO:edit here */

}

.solution_h2
{
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 54px !important;
    font-weight: bold !important;
    /* max-width: 700px !important; */
    padding-bottom: 40px !important;
    transition: all 100ms ease-in-out !important;
}

@media screen and (max-width: 1024px)
{
    .solution_h2{
        font-size: 36px !important;
        padding-bottom: 20px !important;
        /* max-width: 715px !important; */
    }
}

@media screen and (max-width: 750px)
{
    .solution_h2
    {
        font-size: 36px !important;
         /* max-width: 400px !important; */
    }
}

@media screen and (max-width: 500px)
{
	.solution_h2
	{
		font-size: 24px !important;
	}
}

.solution_img
{
	position: relative !important;
	display: block !important;
	width: 100vw !important;
	height: 800px !important;
	background-size: contain !important;
	background-position: center !important;
}
@media screen and (max-width: 2000px)
{
	.solution_img
	{
		height: 700px !important;
	}
}

@media screen and (max-width: 1630px)
{
	.solution_img
	{
		height: 550px !important;
	}
}

@media screen and (max-width: 1400px)
{
	.solution_img
	{
		height: 470px !important;
	}
}

@media screen and (max-width: 1070px)
{
	.solution_img
	{
		height: 354px !important;
	}
}

@media screen and (max-width: 718px)
{
	.solution_img
	{
		height: 254px !important;
	}
}

@media screen and (max-width: 700px)
{
	.solution_img
	{
		background: url('../../../Assets/Solution/overview_Business_Solution_500.svg') !important;
		height: 872px !important; 
		max-height: 872px !important;
		background-repeat: no-repeat !important;
		position: relative !important;
		display: block !important;
		width: 100vw !important;
		background-size: contain !important;
		background-position: center !important;
	}
}

@media screen and (max-width: 618px)
{
	.solution_img
	{
		max-height: 600px !important;
	}
	
}

@media screen and (max-width: 447px)
{
	.solution_img
	{
		max-height: 483px !important;
	}
	
}

.problem_img
{
	position: relative !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	height: auto !important;
	min-height: 300px !important;
	gap: 20px !important;
}

@media screen and (max-width: 769px)
{
	.problem_img
	{
		flex-direction: column !important;
		margin: 0 auto !important;
		max-width: 638px !important;
		gap: 0 !important;
		padding: 0 8vw !important;
	}
}


/* @media screen and (max-width: 447px)
{
	.problem_img
	{
		max-height: 254px !important;
	}
	
} */

/* @media screen and (max-width: 360px)
{
	.problem_img
	{
		max-height: 193px !important;
	}
	
} */

.problem_h2
{
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 54px !important;
    font-weight: bold !important;
    /* max-width: 1200px !important; */
    padding-bottom: 40px !important;
    transition: all 100ms ease-in-out !important;
}

@media screen and (max-width: 1024px)
{
    .problem_h2{
        font-size: 36px !important;
        padding-bottom: 20px !important;
        /* max-width: 715px !important; */
    }
}

@media screen and (max-width: 750px)
{
    .problem_h2
    {
        font-size: 36px !important;
         max-width: 400px !important;
    }
}

@media screen and (max-width: 500px)
{
	.problem_h2
	{
		font-size: 24px !important;
	}
}

.solution_overview_container
{
	width: 100% !important;
	height: auto !important;
	padding: 6vh 0 !important;
}

@media screen and (max-width: 768px)
{
	.solution_overview_container
	{
		display: flex !important;
		flex-direction:	row-reverse !important;
    	max-width: 638px !important;
		margin: 0 auto !important;
	}
}

@media screen and (max-width: 638px)
{
	.solution_overview_container
	{
		display: flex !important;
		flex-direction:	row-reverse !important;
    	max-width: 598px !important;
	}
}

@media screen and (max-width: 596px)
{
	.solution_overview_container
	{
		max-width: 360px !important;
	}
}

@media screen and (max-width: 360px)
{
	.solution_overview_container
	{
		min-width: 360px !important;
	}
}

.solution_bg_line
{
	position: absolute !important;
	display: inline-block !important;
	width: 100% !important;
	height: 0 !important;
	border-top: 2px solid #7c43fe !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

@media screen and (max-width: 768px)
{
	.solution_bg_line
	{
		width: 0 !important;
		height: 100% !important;
		border-right: 2px solid #7c43fe !important;
		top: 0 !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
	}
}

.solution_top_container
{
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: 306px !important;
    justify-content: center !important;
    align-items: center !important;
    padding-bottom: 70px !important;
    gap: 10% !important;
}

@media screen and (max-width: 1173px)
{
    .solution_top_container
    {
        gap: 5% !important;
    }
}

@media screen and (max-width: 1045px)
{
    .solution_top_container
    {
        gap: 2% !important;
    }
}

@media screen and (max-width: 1000px)
{
    .solution_top_container
    {
        height: 260px !important;
        padding-bottom: 50px !important;
    }
}

@media screen and (max-width: 890px)
{
	.solution_top_container
	{
		height: 230px !important;
	}
}

@media screen and (max-width: 806px)
{
	.solution_top_container
	{
		height: 216px !important;
	}
}

@media screen and (max-width: 768px)
{
	.solution_top_container
	{
		flex-direction: column !important;
		height: auto !important;
		padding-bottom: 0px !important;
	}
}

.solution_bottom_container
{
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: 306px !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 70px !important;
    gap: 10% !important;
}

@media screen and (max-width: 1173px)
{
    .solution_bottom_container
    {
        gap: 5% !important;
    }
}

@media screen and (max-width: 1045px)
{
    .solution_bottom_container
    {
        gap: 2% !important;
    }
}

@media screen and (max-width: 1000px)
{
    .solution_bottom_container
    {
        height: 260px !important;
        padding-top: 50px !important;
    }
}

@media screen and (max-width: 890px)
{
	.solution_bottom_container
	{
		height: 230px !important;
	}
}

@media screen and (max-width: 806px)
{
	.solution_bottom_container
	{
		height: 216px !important;
	}
}

@media screen and (max-width: 768px)
{
	.solution_bottom_container
	{
		flex-direction: column !important;
		height: auto !important;
		padding-top: 0px !important;
	}
}

.solution_top_item_view
{
    position: relative !important;
    display: block !important;
    width: 296px !important;
    height: 100% !important;
    background-color: #ffffff !important;
    border-radius: 30px !important;
    box-shadow: 4px 4px 4px #000000 initial !important;
    padding: 30px !important;
}

@media screen and (max-width: 1000px)
{
    .solution_top_item_view
    {
        padding: 20px !important;
        width: 265px !important;
    }
}

@media screen and (max-width: 890px)
{
    .solution_top_item_view
    {
        width: 245px !important;
    }
}

@media screen and (max-width: 806px)
{
	.solution_top_item_view
	{
		width: 230px !important;
	}
}

@media screen and (max-width: 768px)
{
	.solution_top_item_view
	{
		height: 171px !important;
		margin-bottom: 129px !important;
		box-shadow: rgb(0 0 0 / 8%) -6px 0px 20px 0px !important;
	}
}

@media screen and (max-width: 596px)
{
	.solution_top_item_view
	{
		width: 149px !important;
		height: 126px !important;
		padding: 10px !important;
		border-radius: 15px !important;
	}
}

.solution_bottom_item_view
{
    position: relative !important;
    display: block !important;
    width: 296px !important;
    height: 100% !important;
    background-color: #ffffff !important;
    border-radius: 30px !important;
    box-shadow: 4px 4px 4px #000000 initial !important;
    padding: 30px !important;
}

@media screen and (max-width: 1000px)
{
    .solution_bottom_item_view
    {
        padding: 20px !important;
        width: 265px !important;
    }
}

@media screen and (max-width: 890px)
{
    .solution_bottom_item_view
    {
        width: 245px !important;
    }
}

@media screen and (max-width: 806px)
{
	.solution_bottom_item_view
	{
		width: 230px !important;
	}
}

@media screen and (max-width: 768px)
{
	.solution_bottom_item_view
	{
		height: 171px !important;
		margin-bottom: 129px !important;
		box-shadow: rgb(0 0 0 / 8%) 6px 0px 20px 0px !important;
	}
}

@media screen and (max-width: 596px)
{
	.solution_bottom_item_view
	{
		width: 149px !important;
		height: 126px !important;
		padding: 10px !important;
		border-radius: 15px !important;
	}
}

.solution_top_arrow
{
    position: absolute !important;
    display: inline-block !important;
    width: 30px !important;
    height: 30px !important;
    top: 95% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-image: url('../../../Assets/Solution/top_arrow.png') !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.solution_top_arrow::before
{
    content: '' !important;
    position: absolute !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    left: -19% !important;
    top: 203% !important;
    border: 10px solid #ffffff !important;
    border-radius: 50px !important;
    background-color: #e3d6ff !important;
}

.solution_top_arrow::after
{
    content: '' !important;
    position: absolute !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    top: 253% !important;
    left: 31% !important;
    border-radius: 50px !important;
    background-color: #7C43FE !important;
}

@media screen and (max-width: 1000px)
{
    .solution_top_arrow::before
    {
        top: 119% !important;
    }
    .solution_top_arrow::after
    {
        top: 169% !important;
    }
}

@media screen and (max-width: 768px)
{
	.solution_top_arrow
	{
		top: 44% !important;
		left: -1% !important;
		transform: translateX(-44%) rotate(90deg) !important;
	}
	.solution_top_arrow::before
	{
		top: 126% !important;
	}

	.solution_top_arrow::after
	{
		top: 175% !important;
	}
}

@media screen and (max-width: 638px)
{
	.solution_top_arrow::before
	{
		top: 98% !important;
	}

	.solution_top_arrow::after
	{
		top: 148% !important;
	}
}

@media screen and (max-width: 596px)
{
	.solution_top_arrow::before
	{
		border: none !important;
		width: 15px !important;
		height: 15px !important;
	}

	.solution_top_arrow::after
	{
		width: 8px !important;
		height: 8px !important;
		left: -9% !important;
		top: 108% !important;
	}

	.solution_top_arrow
	{
		left: 3% !important;
	}
}

.solution_bottom_arrow
{
    position: absolute !important;
    display: inline-block !important;
    width: 30px !important;
    height: 30px !important;
    top: -5% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-image: url('../../../Assets/Solution/bottom_arrow.png') !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.solution_bottom_arrow::before
{
    content: '' !important;
    position: absolute !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    left: -20% !important;
    top: -256% !important;
    border: 10px solid #ffffff !important;
    border-radius: 50px !important;
    background-color: #e3d6ff !important;
}

.solution_bottom_arrow::after
{
    content: '' !important;
    position: absolute !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    left: 30% !important;
    top: -205% !important;
    border-radius: 50px !important;
    background-color: #7C43FE !important;
}

@media screen and (max-width: 1000px)
{
    .solution_bottom_arrow::before
    {
        top: -198% !important;
    }
    .solution_bottom_arrow::after
    {
        top: -149% !important;
    }
}

@media screen and (max-width: 768px)
{
	.solution_bottom_arrow
	{
		left: auto !important;
		top: 44% !important;
		right: -11% !important;
		transform: translateX(-44%) rotate(90deg) !important;
	}
	.solution_bottom_arrow::before
	{
		top: -174% !important;
	}

	.solution_bottom_arrow::after
	{
		top: -125% !important;
	}
}

@media screen and (max-width: 638px)
{
	.solution_bottom_arrow::before
	{
		top: -141% !important;
	}

	.solution_bottom_arrow::after
	{
		top: -91% !important;
	}
}

@media screen and (max-width: 596px)
{
	.solution_bottom_arrow::before
	{
		border: none !important;
		width: 15px !important;
		height: 15px !important;
		left: 25% !important;
		top: -66% !important;
	}
	.solution_bottom_arrow::after
	{
		width: 8px !important;
		height: 8px !important;
		left: 39% !important;
		top: -56% !important;
	}
	.solution_bottom_arrow
	{
		right: -11% !important;
	}
}

.left_gradient
{
    position: absolute !important;
    display: inline-block !important;
    width: 200px !important;
    height: 20px !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(to right, white, transparent) !important;
}

@media screen and (max-width: 768px)
{
	.left_gradient
	{
		width: 20px !important;
		height: 200px !important;
		top: 0% !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		background: linear-gradient(to bottom, white, transparent) !important;
	}
}

.right_gradient
{
    position: absolute !important;
    display: inline-block !important;
    width: 200px !important;
    height: 20px !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(to left, white, transparent) !important;
}

@media screen and (max-width: 768px)
{
	.right_gradient
	{
		width: 20px !important;
		height: 200px !important;
		left: 50% !important;
		transform: translate(-50%, 162%) !important;
		background: linear-gradient(to top, white, transparent) !important;
	}
}

@media screen and (max-width: 596px)
{
	.right_gradient
	{
		transform: translate(-50%, 115%) !important;
	}
}

.solution_overview_label_h1
{
    position: relative !important;
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50px !important;
    background-color: #F4F1FA !important;
    font-size: 24px !important;
    color: #7C43FE !important;
    text-align: center !important;
    line-height: 36px !important;
    font-weight: 600 !important;
}

@media screen and (max-width: 1000px)
{
    .solution_overview_label_h1
    {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
    }
}

@media screen and (max-width: 890px)
{
    .solution_overview_label_h1
    {
        font-size: 22px !important;
    }
}

@media screen and (max-width: 806px)
{
	.solution_overview_label_h1
	{
		font-size: 18px !important;
	}
}

@media screen and (max-width: 596px)
{
	.solution_overview_label_h1
	{
		font-size: 14px !important;
		width: 20px !important;
		height: 20px !important;
		line-height: 20px !important;
	}
}

.solution_overview_label_h3
{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    word-break: keep-all !important;
    white-space: normal !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding-top: 20px !important;
}

@media screen and (max-width: 1000px)
{
    .solution_overview_label_h3
    {
        /* font-size: 15px !important; */
    }
}

@media screen and (max-width: 890px)
{
    .solution_overview_label_h3
    {
        font-size: 16px !important;
        padding-top: 10px !important;
    }
}

@media screen and (max-width: 806px)
{
	.solution_overview_label_h3
	{
		font-size: 14px !important;
	}
}

@media screen and (max-width: 596px)
{
	.solution_overview_label_h3
	{
		font-size: 12px !important;
	}
}

.solution_overview_label_h2
{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    word-break: keep-all !important;
    white-space: normal !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    padding-top: 20px !important;
}

@media screen and (max-width: 1000px)
{
    .solution_overview_label_h2
    {
        /* font-size: 18px !important; */
    }
}

@media screen and (max-width: 890px)
{
    .solution_overview_label_h2
    {
        font-size: 22px !important;
        padding-top: 10px !important;
    }
}

@media screen and (max-width: 806px)
{
	.solution_overview_label_h2
	{
		font-size: 18px !important;
	}
}

@media screen and (max-width: 596px)
{
	.solution_overview_label_h2
	{
		font-size: 14px !important;
	}
}

.L_margin_bottom
{
}


@media screen and (max-width: 768px)
{
	.L_margin_bottom
	{
		margin-bottom: 0px !important;
	}
}

.problem_inner_container
{
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	width: auto !important;
	height: auto !important;
	padding-bottom: 3vh !important;
}

@media screen and (max-width: 769px)
{
	.problem_inner_container
	{
		padding-bottom: 0 !important;
		height: 380px !important;
	}
}

@media screen and (max-width: 597px)
{
	.problem_inner_container
	{
		height: 346px !important;
	}
}

.problem_inner_item_top
{
	position: relative !important;
	display: block !important;
	width: 500px !important;
	height: 215px !important;
	border-radius: 30px !important;
	background-color: #e7e7e7 !important;
	padding: 20px !important;
	margin: 20px auto !important;
}

@media screen and (max-width: 1632px)
{
	.problem_inner_item_top
	{
		width: 390px !important;
	}	
}

@media screen and (max-width: 1279px)
{
	.problem_inner_item_top
	{
		width: 290px !important;
		height: 216px !important;
	}	
}

@media screen and (max-width: 977px)
{
	.problem_inner_item_top
	{
		width: 227px !important;
		height: 280px !important;

	}	
}

@media screen and (max-width: 890px)
{
	.problem_inner_item_top
	{
		height: 246px !important;

	}	
}

@media screen and (max-width: 806px)
{
	.problem_inner_item_top
	{
		height: 200px !important;

	}	
}

@media screen and (max-width: 769px)
{
	.problem_inner_item_top
	{
		width: 75% !important;
		height: 140px !important;
		left: -16% !important;
		margin: 0 auto !important;
	}
}

/* @media screen and (max-width: 596px)
{
	.problem_inner_item_top
	{
		left: -13% !important;
		margin: 15px auto !important;
		width: 250px !important;
		height: 150px !important;
		border-radius: 15px !important;
	}

} */

.problem_inner_item_bottom
{
	position: relative !important;
	display: block !important;
	width: 500px !important;
	height: 340px !important;
	background-color: #ffffff !important;
	border-radius: 30px !important;
	padding: 20px !important;
	margin: 20px auto !important;
}

@media screen and (max-width: 1632px)
{
	.problem_inner_item_bottom
	{
		width: 390px !important;
	}	
}

@media screen and (max-width: 1279px)
{
	.problem_inner_item_bottom
	{
		width: 290px !important;
		height: 300px !important;
	}	
}

@media screen and (max-width: 977px)
{
	.problem_inner_item_bottom
	{
		width: 227px !important;
		height: 328px !important;

	}	
}

@media screen and (max-width: 806px)
{
	.problem_inner_item_bottom
	{
		height: 274px !important;

	}	
}

@media screen and (max-width: 769px)
{
	.problem_inner_item_bottom
	{
		left: 16% !important;
		width: 75% !important;
		height: 253px !important;
		top: -51px !important;
	}
}

/* @media screen and (max-width: 596px)
{
	.problem_inner_item_bottom
	{
		left: 13% !important;
		margin: 0 auto !important;
		width: 250px !important;
		height: 239px !important;
		border-radius: 15px !important;
	}
	.last_label
	{
		margin-bottom: 55px !important;
	}

} */

.problem_arrow
{
	position: absolute !important;
	display: inline-block !important;
	width: 30px !important;
	height: 24px !important;
	top: 95% !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	background: url('../../../Assets/Solution/problem_top_arrow3.png') !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}

@media screen and (max-width: 769px)
{
	.problem_arrow
	{
		display: none !important;
	}
}

.problem_inner_h1_top
{
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	font-size: 24px !important;
	color: #ABABAB !important;
	text-align: center !important;
}

@media screen and (max-width: 1279px)
{
	.problem_inner_h1_top
	{
		padding-bottom: 20px !important;
	}	
}

@media screen and (max-width: 890px)
{
	.problem_inner_h1_top
	{
		font-size: 22px !important;
	}
}

@media screen and (max-width: 806px)
{
	.problem_inner_h1_top
	{
		font-size: 18px !important;
	}
}

@media screen and (max-width: 596px)
{
	.problem_inner_h1_top
	{
		font-size: 14px !important;
	}
}

.problem_inner_h1_bottom
{
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	font-size: 24px !important;
	color: #7C43FE !important;
	text-align: center !important;
}

@media screen and (max-width: 890px)
{
	.problem_inner_h1_bottom
	{
		font-size: 22px !important;
	}
}

@media screen and (max-width: 806px)
{
	.problem_inner_h1_bottom
	{
		font-size: 18px !important;
	}
}

@media screen and (max-width: 596px)
{
	.problem_inner_h1_bottom
	{
		font-size: 14px !important;
	}
}

.problem_inner_h2_top
{
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	font-size: 18px !important;
	text-align: center !important;
	color: #797979 !important;
	padding-bottom: 39px !important;
}



@media screen and (max-width: 890px)
{
	.problem_inner_h2_top
	{
		font-size: 16px !important;
	}
}

@media screen and (max-width: 806px)
{
	.problem_inner_h2_top
	{
		font-size: 14px !important;
	}
}

@media screen and (max-width: 796px)
{
	.problem_inner_h2_top
	{
		padding-bottom: 15px !important;
	}
}

@media screen and (max-width: 596px)
{
	.problem_inner_h2_top
	{
		font-size: 12px !important;
	}
}

.problem_inner_icon
{
	position: relative !important;
	display: block !important;
	width: 70px !important;
	height: 70px !important;
	margin: 30px auto !important;
	background-color: rgba(0, 0, 0, 0) !important;
}

@media screen and (max-width: 1279px)
{
	.problem_inner_icon
	{
		margin: 20px auto !important;
	}	
}

@media screen and (max-width: 568px)
{
	.problem_inner_icon
	{
		width: 50px !important;
		height: 50px !important;
		
	}

}

.problem_inner_h2_bottom
{
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	text-align: center !important;
	font-size: 24px !important;
	color: #161616 !important;
	font-weight: 700 !important;
	padding-bottom: 20px
}



@media screen and (max-width: 890px)
{
	.problem_inner_h2_bottom
	{
		font-size: 22px !important;
	}
}

@media screen and (max-width: 806px)
{
	.problem_inner_h2_bottom
	{
		font-size: 18px !important;
	}
}

@media screen and (max-width: 596px)
{
	.problem_inner_h2_bottom
	{
		font-size: 14px !important;
	}
}

.problem_inner_h3_bottom
{
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auro !important;
	font-size: 18px !important;
	color: #161616 !important;
	text-align: center !important;
}

@media screen and (max-width: 890px)
{
	.problem_inner_h3_bottom
	{
		font-size: 16px !important;
	}
}

@media screen and (max-width: 806px)
{
	.problem_inner_h3_bottom
	{
		font-size: 14px !important;
	}
}

@media screen and (max-width: 596px)
{
	.problem_inner_h3_bottom
	{
		font-size: 12px !important;
	}
}

