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

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Keep Flatsome Header Builder functionality, apply Jun88-like skin */
#header{box-shadow:0 6px 18px rgba(0,0,0,.22);}
#header .container,
#header .row{max-width:1200px!important;}

/* Top bar like source */
#header .header-top{
	background:linear-gradient(180deg,#9adfff,#64b9ea)!important;
	min-height:40px!important;
	height:40px!important;
	padding:0 42px!important;
}
#header .header-top .flex-row{height:100%!important;}
#header .header-top .flex-left{flex:1 1 auto;}
#header .header-top .flex-center{display:none!important;}
#header .header-top .flex-right{flex:1 1 auto;justify-content:flex-end;}
#header .header-top .nav>li{white-space:nowrap;}
#header .header-top .nav>li>a{
	color:#fff!important;
	font-size:13px;
	font-weight:600;
	opacity:1;
	padding:0 8px;
	line-height:40px!important;
}
#header .header-top .nav>li>a:hover{opacity:.5;}
#header .header-top .header-button-1 .button,
#header .header-top .header-button-2 .button{
	min-height:30px!important;
	line-height:28px!important;
	font-size:12px!important;
	padding:0 14px!important;
	border-radius:8px!important;
	margin-top:0;
}

/* Main nav bar */
#header .header-main{
	background:#2199ca!important;
	border-top:1px solid rgba(255,255,255,.45);
	border-bottom:1px solid rgba(255,255,255,.25);
	min-height:60px!important;
	height:60px!important;
	padding:0 42px!important;
}
#header .header-main .flex-row{height:100%!important;}
#header .header-main .hide-for-medium.flex-left{flex:0 0 auto;}
#header .header-main .hide-for-medium.flex-right{flex:1 1 auto;justify-content:flex-start;}
#header .header-main .nav>li>a{
	color:#eaf8ff;
	font-size:14px;
	font-weight:700;
	letter-spacing:0;
	text-transform:uppercase;
	padding:0 12px;
	line-height:60px!important;
}
#header .header-main .nav>li>a:hover{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.45);}
#header .header-main .header-nav-main.nav>li{margin:0 3px;}

/* Logo + buttons (do not hardcode logo size, use Theme Customizer value) */
#header .header-top .button{font-weight:700;box-shadow:none;}
#header .button.secondary{background:linear-gradient(180deg,#3fa9f2,#1f7ebb);border-color:rgba(255,255,255,.55);}
#header .button.white{background:#166c95;color:#fff;border-color:rgba(255,255,255,.55);}

/* Desktop: use Builder left-logo slot to avoid layout drift */
@media only screen and (min-width: 850px){
	#header #masthead > .header-inner > #logo{display:none!important;}
	#header #masthead .header-nav-main.nav-left > a[rel="home"]{
		display:inline-flex;
		align-items:center;
		margin-right:18px;
	}
	#header #masthead .header-nav-main.nav-left > a[rel="home"] img{
		max-height:42px!important;
		width:auto!important;
	}
}

@media only screen and (max-width: 1200px){
	#header .header-top{min-height:34px!important;height:34px!important;padding:0 12px!important;}
	#header .header-top .nav>li>a{font-size:12px;}
	#header .header-main{min-height:50px!important;height:50px!important;padding:0 12px!important;}
	#header .header-main .nav>li>a{font-size:12px;}
	#header .header-top .header-button-1 .button,
	#header .header-top .header-button-2 .button{
		min-height:26px!important;
		line-height:24px!important;
		font-size:11px!important;
		padding:0 10px!important;
	}
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	#header .header-top{display:block;}
	#header .header-main .header-nav-main.nav{overflow-x:auto;white-space:nowrap;scrollbar-width:none;}
	#header .header-main .header-nav-main.nav::-webkit-scrollbar{display:none;}

	/* Keep mobile header builder layout intact: left menu - center logo - right actions */
	#header #masthead > .header-inner{
		display:flex;
		align-items:center;
	}

	#header #masthead > .header-inner > #logo{
		display:block!important;
		order:2;
		flex:1 1 auto;
		text-align:center;
	}

	#header #masthead .show-for-medium.flex-left{
		order:1;
		flex:0 0 auto;
	}

	#header #masthead .show-for-medium.flex-right{
		order:3;
		flex:0 0 auto;
	}

	#header #masthead #logo a{
		display:inline-flex;
		align-items:center;
		justify-content:center;
	}

	#header #masthead #logo img{
		max-height:38px!important;
		width:auto!important;
	}
}

/* Title style copied from hi88.html */
.jun88-title-default,
.mStjgcADwBgprsQLlvjuO {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 40px auto 24px;
	font-size: 35px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	background: linear-gradient(to bottom, #008eb9, #02a9dc);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: rgba(0, 0, 0, 0);
	color: transparent;
}

.jun88-title-default::before,
.jun88-title-default::after,
.mStjgcADwBgprsQLlvjuO::before,
.mStjgcADwBgprsQLlvjuO::after {
	content: "";
	width: 306px;
	height: 36px;
	flex: 0 0 306px;
	background: url("/wp-content/themes/jun88/assets/images/custom-titles/title-line-left.png") no-repeat center top / contain;
}

.jun88-title-default::after,
.mStjgcADwBgprsQLlvjuO::after {
	background-image: url("/wp-content/themes/jun88/assets/images/custom-titles/title-line-right.png");
}

.mStjgcADwBgprsQLlvjuO.lobby {
	margin: 33px auto 24px;
}

.mStjgcADwBgprsQLlvjuO.slot {
	margin: 68px auto 27px;
}

/* Flatsome default section title -> same visual */
.section-title-container .section-title.section-title-center {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 40px auto 24px;
}

.section-title-container .section-title.section-title-center .section-title-main {
	font-size: 35px !important;
	font-weight: 900 !important;
	line-height: 1.1 !important;
	text-transform: uppercase !important;
	background: linear-gradient(to bottom, #008eb9, #02a9dc);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: rgba(0, 0, 0, 0);
	color: transparent !important;
	margin: 0;
	padding: 0;
}

.section-title-container .section-title.section-title-center b {
	display: block;
	width: 306px;
	min-width: 306px;
	height: 36px;
	border: 0 !important;
	opacity: 1;
	background: url("/wp-content/themes/jun88/assets/images/custom-titles/title-line-left.png") no-repeat center top / contain;
}

.section-title-container .section-title.section-title-center b:last-child {
	background-image: url("/wp-content/themes/jun88/assets/images/custom-titles/title-line-right.png");
}

@media only screen and (max-width: 1200px) {
	.jun88-title-default,
	.mStjgcADwBgprsQLlvjuO.slot,
	.mStjgcADwBgprsQLlvjuO.lobby {
		font-size: 34px;
	}

	.section-title-container .section-title.section-title-center .section-title-main {
		font-size: 34px !important;
	}

	.jun88-title-default::before,
	.jun88-title-default::after,
	.mStjgcADwBgprsQLlvjuO::before,
	.mStjgcADwBgprsQLlvjuO::after,
	.section-title-container .section-title.section-title-center b {
		width: 220px;
		min-width: 220px;
		height: 26px;
		flex-basis: 220px;
	}
}

@media only screen and (max-width: 768px) {
	.jun88-title-default,
	.mStjgcADwBgprsQLlvjuO.slot,
	.mStjgcADwBgprsQLlvjuO.lobby {
		font-size: 24px;
	}

	.jun88-title-default::before,
	.jun88-title-default::after,
	.mStjgcADwBgprsQLlvjuO.slot::before,
	.mStjgcADwBgprsQLlvjuO.slot::after,
	.mStjgcADwBgprsQLlvjuO.lobby::before,
	.mStjgcADwBgprsQLlvjuO.lobby::after {
		width: 90px;
		min-width: 90px;
		height: 12px;
		flex-basis: 90px;
	}

	.section-title-container .section-title.section-title-center .section-title-main {
		font-size: 24px !important;
	}

	.section-title-container .section-title.section-title-center b {
		width: 90px;
		min-width: 90px;
		height: 12px;
	}
}