/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
	--primary-color: #0707CB;
	--secondary-color: #ff5722;
	--bg-primary: #0707cb1a;
	--title-color: #011a66;
}
body{
	font-family: "Be Vietnam Pro", sans-serif;
}
.absolute-footer{
	display: none;
}
*{
	box-sizing: border-box;
}
img{
	max-width: 100%;
}
.col-inner:last-child{
	padding-bottom: 0;
}
a{
	transition: all .25s ease;
}
p:last-child{
	margin-bottom: 0;
}
.custom.html_topbar_left{
	h3{
		color: #fff;
		margin-bottom: 0;
		font-size: 15px;
	}
} 
.img-radius-10 img{
	border-radius: 10px;
}
.header-button-1{
	a.button{
		position: relative;
		background-color: var(--bg-primary) !important;
		color: var(--primary-color);
		padding: 4px 36px;
		text-transform: math-auto;
		font-size: 16px;
		border: 0;
		box-shadow: none !important;
		overflow: hidden;
		border-radius: 40px 30px 39px 15px !important;
	}
	a.button:hover{
		background-color: var(--primary-color) !important;
		color: #fff;
	}
}
.header-contact a span {
	text-transform: math-auto;
	font-weight: 700;
	color: #fff;
}
.header-contact a i{
	color: #fff;
}
.header-bottom .flex-col.hide-for-medium.flex-center {
	width: 50%;
	input{
		background-color: #fff;
	}
}
.ss-pd{
	padding-top: 40px !important;
	padding-bottom: 10px !important;
}
.ss-footer{
	h2{
		border-bottom: 1px solid rgba(90, 121, 154, 0.2);
		padding-bottom: 30px;
		margin-bottom: 0;
	}
	h2,h3{
		color: var(--title-color);
	}
	ul{
		margin-bottom: 0;
		li{
			margin-left: 0;
			list-style-type: none;
			color: #8d99ae;
			a{
				color: #8d99ae;
			}
			i{
				margin-right: 8px;
			}
		}
	}
	p{
		color: #8d99ae;
	}
	.social-icons{
		a{
			color: #8d99ae;
			margin: 0;
			margin-right: 12px;
		}
		a:hover{
			color: var(--bg-primary);
		}
	}
	.abs-footer p{
		border-top: 1px solid rgba(90, 121, 154, 0.2);
		margin-bottom: 0;
		padding-top: 20px;
		padding-bottom: 10px;
	}
}
.off-canvas-left .mfp-content, .off-canvas-right .mfp-content{
	max-width: 500px;
	width: 100%;
}
.ss-category{
	.box{
		border-radius: 10px;
		overflow: hidden;
		h4{
			background: var(--bg-primary);
			font-size: 12px;
			padding: 5px 10px;
			border-radius: 4px;
			width: max-content;
			color: var(--primary-color);
			margin-bottom: 10px;
			font-weight: normal;
		}
		h3{
			font-size: 18px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		p{
			color: gray;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		a.button{
			margin: 0;
			color: #000;
		}
		.box-text{
			min-height: 190px;
		}
	}
}
.flickity-slider>.row:not(.is-selected){
	opacity: 1;
}
.slider-nav-outside.slider-nav-circle .next {
	transform: translateX(50%) !important;
}
.slider-nav-outside.slider-nav-circle .previous {
	transform: translateX(-50%) !important;
}
.flickity-button-icon {
	background-color: var(--primary-color);
	color: #fff;
	border: 0 !important;
	padding: 11px !important;
	opacity: 1 !important;
}
.ss-category-tag{
	.tabbed-content .nav{
		white-space: nowrap;
		flex-flow: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		gap: 10px;
		a {
			padding-right: 27px;
			padding-left: 10px;
		}
	}
	.box{
		img{
			border-radius: 10px;
		}
		.post-title a{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.box-text{
			padding: 0;
			padding-top: 10px;
		}
	}
}
.box-blog-post .is-divider{
	display: none;
}
.frame-title{
	h2{
		padding-bottom: 15px;
		position: relative;
		color: var(--title-color);
	}
	h2:after{
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 50px;
		height: 4px;
		background: var(--title-color);
		border-radius: 50px;
	}
	h2:before{
		content: '';
		position: absolute;
		bottom: 1px;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 2px;
		background: #fff;
		border-radius: 50px;
		z-index: 2;
	}
}
.frame-title.left{
	h2:after{
		left: 0%;
		transform: translateX(0%);
	}
	h2:before{
		left: 0;
		transform: translateX(15px);
	}
}
.ss-market-pain{
	ul{
		li{
			margin-left: 0;
			list-style-type: none;
			i{
				color: red;
			}
		}
	}
	.not{
		background: #ff00002e;
		display: block;
		padding: 10px;
		border-radius: 10px;
		color: red;
	}
}
.ss-services{
	.frame-item{
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
		height: 100%;
		transition: all .25s ease;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		a{
			background-color: var(--bg-primary);
			color: var(--primary-color);
			display: block;
			text-align: center;
			padding: 5px;
			border-radius: 5px;
			margin-bottom: 0;
			margin-top: 10px;
		}
		a:hover{
			background-color: var(--primary-color);
			color: #fff;
		}
	}
	.frame-item:hover{
		transform: translateY(-10px);
		box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
	}
	.icon{
		margin-bottom: 10px;
		i{
			background-color: var(--bg-primary);
			color: var(--primary-color);
			font-size: 24px;
			padding: 15px;
			border-radius: 8px;
		}
	}
}
.ss-value{
	.frame-item{
		padding: 15px;
		background-color: rgba(222, 228, 235, 0.4);
		border-radius: 10px;
		border: 1px solid var(--bg-primary);
		transition: all .25s ease;
		height: 100%;
		.icon{
			margin-bottom: 10px;
			i{
				background-color: var(--bg-primary);
				color: var(--primary-color);
				font-size: 24px;
				padding: 15px;
				border-radius: 50px;
			}
		}
	}
	.frame-item:hover{
		background-color: #fff;
		transform: translateY(-10px);
		box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
	}
	.row-edit{
		.col:nth-child(2){
			.frame-item{
				i{
					background-color: #DCFCE7;
					color: #16A34A;
				}
			}
		}
	}
	.row-edit{
		.col:nth-child(3){
			.frame-item{
				i{
					background-color: #EDE9FE;
					color: #7C3AED;
				}
			}
		}
	}
	.row-edit{
		.col:nth-child(4){
			.frame-item{
				i{
					background-color: #FFEDD5;
					color: #F97316;
				}
			}
		}
	}
}
.ss-cta-about{
	background: linear-gradient(135deg, #0a0ad5 0%, #8888ea 100%);
	a.button{
		margin-right: 0;
	}
	a.button.primary{
		margin-right: 15px;
	}
}


@media(min-width: 998px){
	.slide-edit{
		.flickity-button{
			display: none;
		}
	}
}
@media(max-width: 580px){
	.ss-cta-about{
		a.button{
			width: 100%;
		}
		a.button:last-child{
			margin-bottom: 0;
		}
	}
}