/*
Theme Name: Betheme
Theme URI: https://themes.muffingroup.com/betheme/
Author: Muffin group
Author URI: https://muffingroup.com/
Description: The biggest WordPress Theme ever
License: Themeforest Split Licence
License URI: https://themeforest.net/licenses/standard
Text Domain: betheme
Version: 21.1.20

All css files are placed in /css/ folder
 */

/* Resets */
body .section {
	font-size: 16px;

	@media only screen and (min-width: 768px) {
		font-size: 18px;
	}
}

/* Component Classes */
.hero-bg {
	position: relative;
	padding-top: 35vw !important;
	padding-bottom: 36px !important;

	@media (min-width: 768px) {
		padding-top: 25vw !important;
	}

	@media (min-width: 960px) {
		padding-top: 15vw !important;
	}

	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, transparent 70%, #000)
	}

	h1 {
		font-size: 44px !important;

		@media (min-width: 768px) {
			font-size: 60px !important;
		}

		@media (min-width: 960px) {
			font-size: 72px !important;
		}
	}

	h5 {
		font-size: 32px !important;

		@media (min-width: 768px) {
			font-size: 40px !important;
		}

		@media (min-width: 960px) {
			font-size: 48px !important;
		}
	}
}

.background-video {
	/* Overlay */
	&:before {
		content: "";
		position: absolute;
		z-index: 2;
		top: 0; left: 0; width: 100%; height: 100%;
		background: linear-gradient(to left, rgba(0,0,0,0.25), rgba(0,0,0,0.75));
	}

	.section_video video {
		position: absolute;
		top: 0; left: 0; width: 100%; height: 100%;
		object-fit: cover;
	}
}

/* Override default video display:none on mobile */
@media only screen and (max-device-width: 1024px) {
	.background-video.section.has-video .section_video {
		display: block !important;
	}
}

.wks-popup {
	--f-heading-sm: clamp(1.2rem, 3vw, 1.8rem);
	--f-heading-md: clamp(1.6rem, 5vw, 2.4rem);
	--f-heading-lg: clamp(1.8rem, 7vw, 3.2rem);
	--f-heading-xl: clamp(2.2rem, 9vw, 4.0rem);
	--f-body-sm: clamp(0.9em, 2.0vw, 1.2em);
	--f-body-md: clamp(1em, 2.5vw, 1.6em);
	--f-body-lg: clamp(1.2em, 3.0vw, 1.8em);
	--f-body-xl: clamp(1.4em, 3.5vw, 2.0em);

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px;
	border-radius: 24px;
	background-color: navy;
	text-align: center;

	> div {
		position: absolute; top:0; left: 0; width: 100%; height: 100%;
		background-image: url('https://westkeptsecret.co/wp-content/uploads/2023/01/Subheader-MISC-1.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: rgba(178, 204, 216, 0.75);
		background-blend-mode: overlay;
	}

	> img {
		position: relative;
		display: block;
		max-width: 200px;
	}

	> h2 {
		position: relative;
		max-width:600px;
		margin: 18px auto;
		font-size: var(--f-heading, var(--f-heading-lg));
		line-height: 1em;
		font-weight: 400;
		color: #FFF;
		text-transform: uppercase;
		letter-spacing: -2px;
		text-shadow: 0px 0px 12px #4DE6FF;
		text-wrap: balance;
	}

	> p {
		position: relative;
		max-width:666px;
		margin: 0 auto;
		line-height: 1.25em;
		font-size: var(--f-body, var(--f-body-md));
		color: #FFF;
		text-wrap: balance;
	}

	> a {
		position: relative;
		display: block;
		margin: 24px 0 0;
		text-transform: uppercase;
	}

	> small {
		position: relative;
		margin-top: 12px;
		font-size: 0.8em;
		color: #FFF;
		text-wrap: balance;
	}

	em {
		font-style: italic;
	}
}

/* Theme Overrides */
.column .infobox ul li {
	margin: 0 0 0 13px;
	padding: 6px 0 6px 12px;
	list-style: disc;

	&::before,
	&::after {
		display: none;
	}
}

.pricing-box.pricing-box-box {
	border-color: #B2CCD8;
}

.sg-popup-content {
	border-top-right-radius: 12px !important;

	.sgpb-main-html-content-wrapper > p {
		display: none; /* Hack to remove extra paragraph from editor */
	}
}

/* Utility Classes */
.max-width-inherit {
	max-width: inherit !important;
}

.balance .title,
.balance h2,
.balance h3,
.balance h4,
.balance h5,
.balance h6 {
	text-wrap: balance;
}

.fg-dk .title {
	color: #222;
}

.btw-flex {
	display: flex;
}

.btw-flex-center {
	justify-content: center;
	align-items: center;
}

.grad-left {
	position: relative;

	&:before {
		content: "";
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.95));
	}

	.section_wrapper {
		position: relative;
		z-index: 2;
	}
}

.grad-right {
	position: relative;

	&:before {
		content: "";
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.95));
	}

	.section_wrapper {
		position: relative;
		z-index: 2;
	}
}

.grad-top {
	position: relative;

	&:before {
		content: "";
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.95));
	}

	.section_wrapper {
		position: relative;
		z-index: 2;
	}
}

.grad-bottom {
	position: relative;

	&:before {
		content: "";
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.95));
	}

	.section_wrapper {
		position: relative;
		z-index: 2;
	}
}