/*
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=Coiny&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root{
	--primary-color: #F99C1F;
	--secondary-color: #ED2A30;
	--hover-color: #FA6406;
	--bg-be: #FFF8E8;
	--font-title: "Coiny", system-ui;
	--font-body:  "Montserrat", sans-serif;
}
footer#footer {
	display: none;
}
h1, h2, h3, h4, h5, h6{
	font-family: var(--font-title);
	font-weight: 400;
}
body{
	font-family: var(--font-body);
	font-weight: 400;
}
*{
	box-sizing: border-box;
}
img{
	max-width: 100%;
}	
.col-inner:last-child, p:last-child{
	padding-bottom: 0;
}
a{
	transition: all .25s ease;
}
.header-main .nav > li > a{
	font-weight: 600;
}
.header-button-1 a {
	min-width: 160px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: math-auto;
	font-family: var(--font-title);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	span{
		line-height: 1;
		text-decoration: underline;
	}
}
.button, button, input[type=button], input[type=reset], input[type=submit]{
	font-weight: 400;
}
.button:hover, .dark .button.is-form:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover{
	background-color: var(--hover-color) !important;
	box-shadow: none;
}
.ss-pd{
	padding-bottom: 10px !important;
	padding-top: 40px !important;
}
.ss-tagline{
	h1{
		color: var(--secondary-color);
	}
	h1,h2{
		font-size: 28px;
		margin-bottom: 0;
	}
	.graphic{
		position: relative;
	}
	.graphic:after, .graphic:before{
		content: '';
		position: absolute;
		top: -35px;
		left: -115px;
		width: 140px;
		height: 140px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url(/wp-content/uploads/2025/12/graphic.png);
	}
	.graphic:before{
		left: unset;
		right: -115px;
		transform: rotateY(180deg);
	}
}
.frame-title{
	h2{
		color: var(--secondary-color);
		margin-bottom: 0;
		font-size: 32px;
	}
	h3{
		margin-bottom: 0;
	}
}
.ss-heroic-english{
	.icon-box{
		box-shadow: 0px 4px 4px 0px #00000040;
		border: 3px dashed var(--secondary-color);
		background-color: var(--primary-color);
		border-radius: 12px;
		padding: 10px;
		p{
			color: #fff;
			font-size: 12px;
		}
	}
	.bg-image{
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url(/wp-content/uploads/2025/12/Untitled-design-1.png);
	}
	.img-1 .img-inner{
		overflow: visible;
		img{
			transform: translate(95%, 25%);
		}
	}
	.img-2 .img-inner{
		overflow: visible;
		img{
			transform: translate(20%, -20%);
		}
	}
}
.icon-box-img img, .icon-box-img svg{
	padding-top: 0;
}
.ss-battle-eou{
	.frame-title{
		h3{
			font-family: var(--font-body);
			font-size: 24px;
			font-weight: bold;
		}
	}
	.video.video-fit.mb {
		border-radius: 10px;
		overflow: hidden;
	}
}
.ss-benefit{
	.frame-title{
		h3{
			font-size: 32px;
			color: var(--primary-color);
		}
	}
	.banner-benefit{
		border-radius: 10px;
		overflow: hidden;
	}
	.icon-box{
		height: 100%;
		padding: 15px;
		border-radius: 16px;
		background-color: var(--bg-be);
		border: 2px solid var(--primary-color);
		transition: all .5s ease;
		h3{
			font-size: 16px;
			font-family: var(--font-body);
			font-weight: 600;
		}
		p, li{
			font-size: 12px;
		}
	}
	.icon-box:hover{
		background-color: var(--primary-color);
		h3, p, li{
			color: #fff;
		}
		img{
			filter: brightness(0) invert(1);
		}
	}
}




@media(max-width: 998px){
	.ss-benefit {
		.frame-title {
			h3 {
				font-size: 28px;
			}
		}
	}
	.ss-benefit {
		& .icon-box {
			p, li {
				font-size: 14px;
			}
		}
	}
	.ss-battle-eou {
		& .frame-title {
			h3 {
				font-size: 16px;
			}
		}
	}
	.frame-title {
		h2 {
			color: var(--secondary-color);
			margin-bottom: 0;
			font-size: 28px;
		}
	}
	.ss-heroic-english {
		.icon-box {
			p {
				font-size: 14px;
			}
		}
	}
	.ss-tagline {
		h1, h2 {
			font-size: 26px;
		}
	}
	.ss-tagline {
		.graphic:after, .graphic:before {
			content: none;
		}
	}
}

@media(max-width: 580px){
	.header-button-1 a{
		font-size: 14px;
		min-width: 140px;
		min-height: 35px;
	}
}