.site-banner {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	-moz-box-orient: horizontal;
	-moz-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	background: var(--blue) center/cover no-repeat;
	overflow: hidden;
}

.site-banner.type-banner-form,
.site-banner.type-banner-swapimg,
.site-banner.style-banner-default {
	background-image: url(/wp-content/uploads/2022/12/hero-banner-default-whello.png);
}

.site-banner.style-banner-default .whale-gif {
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -12px;
	z-index: 0;
	width: 100%;
	pointer-events: none;
}

.site-banner.type-banner-form:after,
.site-banner.type-banner-swapimg:after,
.site-banner.style-banner-default:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: inline-block;
	width: 100%;
	background: url(/wp-content/uploads/2023/01/waves-pattern-top-darkblue.svg) top center/contain repeat-x;
}

.site-banner .video-banner,
.site-banner .featured-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 100%;
}

.site-banner .video-banner {
	-o-object-fit: cover;
	object-fit: cover;
}

.site-banner:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: inline-block;
	width: -webkit-calc(50% + 94px);
	width: -moz-calc(50% + 94px);
	width: calc(50% + 94px);
	height: 100%;
	background: url(/wp-content/uploads/2022/12/pattern-circle-whale-whello.svg) right center/cover no-repeat;
}

.site-banner .content-banner {
	position: relative;
	z-index: 3;
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	color: var(--white);
}

.site-banner .content-banner li>a:hover,
.site-banner .content-banner p>a:hover,
.site-banner .content-banner>a:hover {
	color: var(--orange);
}

.site-banner .content-banner li>a,
.site-banner .content-banner p>a,
.site-banner .content-banner>a {
	color: var(--white);
}

.site-banner .content-banner h2:first-of-type {
	font-size: var(--text-small-h2);
	font-weight: 300;
	line-height: 1.26;
	margin-bottom: 0px;
}

.home .site-banner .content-banner h2:first-of-type {
	font-size: var(--text-4xl);
	font-weight: 900;
}

.site-banner.type-banner-form .form-banner {
	position: relative;
	z-index: 2;
	-webkit-border-radius: var(--rounded-xxl);
	-moz-border-radius: var(--rounded-xxl);
	border-radius: var(--rounded-xxl);
	background-color: var(--white);
}

.site-banner:not([class*="case-mockup-"]) .side-banner img {
	height: 456px;
	-o-object-fit: contain;
	object-fit: contain;
	background-color: var(--transparent);
}

.site-banner[class*="case-mockup-"] .side-banner {
	position: absolute;
	right: 0;
	bottom: 0;
}

.site-banner .side-banner figure {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
}

.button-group-banner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-moz-box-orient: vertical;
	-moz-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-moz-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.button-group-banner>a {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	line-height: 1.25;
}

.button-group-banner>.btn-banner-primary {
	padding: var(--padding-button);
	border: 2px solid var(--orange);
	-webkit-border-radius: var(--rounded-full);
	-moz-border-radius: var(--rounded-full);
	border-radius: var(--rounded-full);
	color: var(--white);
	font-size: var(--text-lg);
	font-weight: 900;
	line-height: 1.25;
	background-color: var(--orange);
}

.button-group-banner>a:not(:last-child) {
	margin-bottom: 16px;
}

.button-group-banner>.btn-banner-primary:hover {
	border-color: var(--blue-300);
	background-color: var(--blue-300);
}

.button-group-banner>a:after {
	content: '';
	display: inline-block;
	background: center/contain no-repeat;
	-webkit-transition: var(--animate);
	-o-transition: var(--animate);
	-moz-transition: var(--animate);
	transition: var(--animate);
}

.button-group-banner>a:hover:after {
	-webkit-transform: translateX(3px);
	-moz-transform: translateX(3px);
	-ms-transform: translateX(3px);
	-o-transform: translateX(3px);
	transform: translateX(3px);
}

.button-group-banner>.btn-banner-primary:after {
	width: 15px;
	height: 25px;
	background-image: url(/wp-content/themes/whello/assets/icons/whello-chevron-white-right.svg);
	margin-left: 30px;
}

.button-group-banner>.btn-banner-secondary {
	font-size: var(--text-sm);
	font-weight: 700;
}

.button-group-banner>.btn-banner-secondary:after {
	width: 20px;
	height: 17px;
	background-image: url(/wp-content/themes/whello/assets/icons/whello-arrowbow-white-right.svg);
	margin-left: 10px;
}

.banner-image-partner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	-moz-box-orient: horizontal;
	-moz-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.banner-image-partner img {
	width: 150px;
	height: 60px;
	-o-object-fit: contain;
	object-fit: contain;
	-o-object-position: left;
	object-position: left;
}

.banner-image-partner img {
	margin: 30px 30px 0 0;
}


@media all and (min-width: 601px) {
	.site-banner .featured-image .featured-banner-mobile {
		display: none;
	}
}



/* > TABLET */
@media all and (min-width: 901px) {
	.site-banner.type-banner-form .form-banner {
		padding: 40px;
	}

	.site-banner .content-banner,
	.site-banner .side-banner {
		width: 50%;
	}

	.site-banner .content-banner {
		padding: 80px 0 80px var(--padding-container);
	}

	.button-group-banner>.btn-banner-secondary {
		margin-left: 30px;
	}

	.button-group-banner {
		margin-top: 35px;
	}

	.site-banner:not([class*="case-mockup-"]) .side-banner {
		-webkit-align-self: center;
		-ms-flex-item-align: center;
		-ms-grid-row-align: center;
		align-self: center;
		padding: 40px var(--padding-container) 40px 40px;
	}

}


/* >= DESKTOP & LAPTOP */
@media all and (min-width: 1300px) {
	.admin-bar .site-banner {
		min-height: -webkit-calc(100vh - 148px);
		min-height: -moz-calc(100vh - 148px);
		min-height: calc(100vh - 148px);
	}

	.site-banner {
		min-height: -webkit-calc(100vh - 100px);
		min-height: -moz-calc(100vh - 100px);
		min-height: calc(100vh - 100px);
	}

	.site-banner.type-banner-form:after,
	.site-banner.type-banner-swapimg:after,
	.site-banner.style-banner-default:after {
		height: 99px;
	}

	.site-banner.style-banner-default .whale-gif {
		right: var(--padding-container);
		max-width: 800px;
		height: 521px;
	}

	.site-banner[class*="case-mockup-"] .side-banner {
		max-width: 736px;
		margin-bottom: 34px;
	}

	.page-id-47661 .site-banner[class*="case-mockup-"] .side-banner {
		margin-bottom: 200px;
	}

	.site-banner.case-mockup-mobile .side-banner {
		max-width: 100%;
		padding-left: 10vw;
		padding-right: var(--padding-container);
	}
}


/* >= DESKTOP & LAPTOP && < LARGE DESKTOP */
@media all and (min-width: 1300px) and (max-width: 1599px) {
	site-banner.style-banner-default .whale-gif {
		max-width: 600px;
		height: 392px;
	}
}


/* <= LARGE TABLET */
@media all and (max-width: 1299px) {
	.site-banner[class*="case-mockup-"] .side-banner {
		margin-bottom: 20px;
	}

	.site-banner.type-banner-form:after,
	.site-banner.type-banner-swapimg:after,
	.site-banner.style-banner-default:after {
		height: 55px;
	}

	.site-banner {
		min-height: -webkit-calc(100vh - 70px);
		min-height: -moz-calc(100vh - 70px);
		min-height: calc(100vh - 70px);
	}

	.content-banner p>br {
		display: none;
	}
}


/* > MOBILE && <= LARGE TABLET */
@media all and (min-width: 901px) and (max-width: 1299px) {
	.site-banner.style-banner-default .whale-gif {
		right: 0;
		max-width: 550px;
		height: 360px;
	}
}


@media all and (min-width: 601px) and (max-width: 1299px) {
	.site-banner[class*="case-mockup-"] .side-banner {
		max-width: 450px;
	}
}



/* <= TABLET */
@media all and (max-width: 900px) {
	.site-banner.type-banner-form .form-banner {
		padding: 20px;
	}

	.site-banner:not([class*="case-mockup-"]) .side-banner {
		padding: 40px var(--padding-container);
	}

	.button-group-banner {
		margin-top: 20px;
	}

	.site-banner .content-banner,
	.site-banner .side-banner {
		width: 100%;
	}

	.site-banner .side-banner {
		-webkit-box-ordinal-group: 0;
		-webkit-order: -1;
		-moz-box-ordinal-group: 0;
		-ms-flex-order: -1;
		order: -1;
	}

	.site-banner .content-banner {
		-webkit-align-self: flex-end;
		-ms-flex-item-align: end;
		align-self: flex-end;
		background: url(/wp-content/uploads/2023/01/pattern-circle-whale-whello-mobile.svg) top center/cover no-repeat;
	}

	.site-banner .content-banner p {
		display: none;
	}

	.site-banner:before {
		display: none;
	}

	.site-banner .featured-image .featured-banner-mobile {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}


	/*for whatsapp-conversion-tracking page*/
	.page-id-44768 .site-banner .side-banner {
	    order: 2;
	}

	.page-id-44768 .site-banner .content-banner {
	    order: 1;
	    background: none;
	}

}


@media all and (min-width: 601px) and (max-width: 900px) {
	.site-banner .content-banner {
		padding: 160px var(--padding-container) 80px;
	}

	.site-banner.style-banner-default .whale-gif {
		right: -115px;
		max-width: 450px;
		height: 296px;
	}
}


/* <= MOBILE */
@media all and (max-width: 600px) {
	.site-banner[class*="case-mockup-"] .side-banner {
		max-width: 240px;
	}

	.site-banner.style-banner-default .whale-gif {
		right: -88px;
		max-width: 340px;
		height: 225px;
	}

	.site-banner .content-banner {
		padding: 117px var(--padding-container) 25px;
	}

	.tab-content {
		margin-top: 25px;
	}
}