/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
:root {
	--themecolor: #264653;
	--themecolorrgba: 38, 70, 83;
	--secondarycolor: #E9C46A;
	--secondarycolorrgba: 233, 196, 106;
	}

	.color-2,
	.h-color-2:hover { color: var(--secondarycolor, #E9C46A) !important; }

	.bg-color-2,
	.h-bg-color-2:hover { background-color: var(--secondarycolor, #E9C46A) !important; }

	.dotted-bg:before {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 110%;
	height: 100%;
	background-size: 12px 12px;
	background-position: center;
	transform: translate(-50%, -50%);
	background-image: radial-gradient(rgba(var(--themecolorrgba),0.3) 14%, transparent 14%);
	-webkit-mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%);
	mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%);
	z-index: 0;
	}

	.services-grid .feature-box {
	padding: 2rem;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: .5rem;
	border: 1px solid var(--secondarycolor);
	}

	.services-grid .feature-box:hover {
		background-size: cover;
	}
	
	.dark .hover-button { color: #FFF; }

	.services-grid .feature-box { background-color: var(--themecolor); }

	.dark .services-grid .feature-box .fbox-icon i { background-color: rgba(255,255,255,0.15); }


	.services-grid .feature-box,
	.services-grid .feature-box .fbox-icon,
	.services-grid .feature-box .fbox-content,
	.hover-button  { transition: all .4s ease, border-color .0s ease; }

	.services-grid .feature-box {
		padding: 3rem;
		background-size: 0;
		border: 1px solid rgba(255,255,255,0.1);
	}

	.services-grid .feature-box:hover {
		transform: translateY(-6px);
		border-color: var(--themecolor);
	}

	.services-grid .feature-box:not(:hover) .hover-button {
		opacity: 0;
		transform: translateY(-5px);
	}

	.services-grid .feature-box .fbox-icon,
	.services-grid .feature-box .fbox-content {
		transform: translateY(20px);
	}

	.services-grid .feature-box:hover .fbox-icon,
	.services-grid .feature-box:hover .fbox-content { transform: translateY(0px); }

	.dark .services-grid .feature-box:hover .fbox-icon i { background-color: #FFF; }