/* ====== CSS Variables ====== */

/* fixes the overflow that AOS js adds for mobile - https://github.com/michalsnik/aos/issues/665 */

:root {
	--theme-primary: #00a7d1;
	--theme-primary-variant: #008bad;
	--theme-alternate: #3b3f47;
	--theme-alternate-variant: #33363d;
	--theme-green: #4caf50;
	--theme-green-variant: #357a38;
	--theme-light-grey: rgba(248, 249, 250, 1);
	--theme-dark: #464a53;
	--theme-white: #fff;
	--theme-white-variant: #f1f5f9;
	--theme-light: #d3d3d3;
	--swiper-navigation-color: #fff;
	--swiper-pagination-color: #fff;
	--swiper-pagination-bullet-inactive-color: var(--theme-dark);
	--swiper-pagination-bullet-inactive-opacity: 0.7;	
}

/* ====== Global Styles ====== */

/* Set Print size to override Bootstrap print view being shown as mobile */

body {
	color: var(--theme-dark);
}

.html {
	scroll-behavior: smooth;
}

html, body {
	position: relative;
}

@media screen and (max-width: 991px) {
	[data-aos] {
	  	pointer-events: auto !important;
	  	opacity: 1 !important;
	  	transform: none !important;
	}
}

@media print {
	@page {
		size: 330mm 427mm;
		margin: 14mm;
	}
	.container, .container-fluid {
		width: 1170px;
	}
}

hr {
	width:100%;
	margin-top:0.5rem;
	margin-bottom:0.75rem; /*matches table header spacing*/
}

body{
	display:flex;
	min-height:100vh;
	min-height:100dvh;
	flex-direction:column;
	min-width:350px;
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.flex-spacer{
	flex-grow:1;
}

/* thinner card guttering than bootstrap's default because we use cards in much smaller spacings */

.card-header, .card-footer {
	background-color: #fff;;
}

/*
.card-deck{
	margin-right:-4px;
	margin-left:-4px;
	flex-flow:row wrap;
}
.card-deck .card{
	margin-left:4px;
	margin-right:4px;
	height:100%;
	margin-bottom:0px;
}
.card-deck > div{
	margin-bottom:0.5rem;
}
.card-body {
	display:flex;
	flex-direction:column;
	align-items:stretch;
}
*/

.card-title a , .card-title {
	color: var(--theme-dark);
}

/*
.card-title {
	margin-bottom: 0.75rem;
	color: #212529;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
*/
/* ------ Text Styling ------ */

.h1, h1 { /* major title of the page */
	font-size: 2rem;
	font-weight: 600;
	color: #212529;
}

.h2, h2 { /* subheadings in copy pages */
	font-size: 1.5rem;
	font-weight: 600;
	color: #212529;
}

.h3, h3 { /* interface heading */
	font-size: 1.25rem;
	font-weight: 600;
	color: #212529;
}

.h4, h4 { /* Major product labels, copy page minor labels */
	font-size: 1.1rem;
	font-weight: 600;
	color: #212529;
}

.h5, h5 { /* not actually used but available for customisations and copy */
	font-size: 1rem;
	font-weight: 600;
	color: #212529;
}

@media (max-width: 991px) {
	.h1, h1 { 
		font-size: 1.4rem;
	}
	
	.h2, h2 {
		font-size: 1.3rem;
	}
	
	.h3, h3 {
		font-size: 1.2rem;
	}
	
	.h4, h4 {
		font-size: 1.1rem;
	}
	
	.h5, h5 {
		font-size: 1rem;
	}
}

a, .page-link, .nav-link {
	color: var(--theme-primary);
	text-decoration: none;
	transition: all 0.25s ease-in-out;
}

a:hover, .page-link:hover, .nav-link:hover {
	color: var(--theme-primary-variant);
}

.col-form-label{
	font-weight: 600;
	color: #545454;
}

.form-label {
	font-weight: 600;
	color: #545454;
}

.form-control-plaintext {
	width: auto; /* Overrides the width 100% in Bootstrap 5 for Single Page Checkout etc */
}

.form-control:read-only {
	background-color: var(--theme-white-variant);
	pointer-events: none;
}

.form-control:focus {
	box-shadow: none;
	border-color: var(--theme-primary);
}

.form-heading {
	color: var(--theme-primary);
}

.form-check-input:checked {
	background-color: var(--theme-primary);
	border-color: var(--theme-primary);
}

strong, b, th, .table.dataTable tr.totalsRow td {
	font-weight: 600;
}

.nav-underline .nav-link:focus, .nav-underline .nav-link:hover {
	border-bottom-color: var(--theme-primary);
}

.lead {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--theme-dark);
}

.form-select, .form-control {
	border-color: #b2e4f1;
	color: var(--theme-primary);
	font-weight: 500;
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300a7d1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select option {
    color: initial; /* Set the font color for all other options */
}

/* ------ Buttons ------ */

.btn {
	font-weight: 500;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active,
.btn:focus-visible, :not(.btn-check)+.btn:active:focus-visible {
	background-color: var(--theme-primary-variant);
    border-color: var(--theme-primary-variant);
	color: var(--theme-white);
	box-shadow: none;
}

.btn-primary {
	background-color: var(--theme-green);
    border-color: var(--theme-green);
}
.btn-primary:hover {
	background-color: var(--theme-green-variant);
    border-color: var(--theme-green-variant);
}

.btn-contact {
	background-color: var(--theme-primary);
    border-color: var(--theme-primary);
	color: #fff;
}
.btn-contact:hover {
	background-color: var(--theme-primary-variant);
    border-color: var(--theme-primary-variant);
	color: #fff;
}

.btn-light {
	background-color: var(--theme-white);
	border-color: rgb(0 167 209 / 30%);
	color: var(--theme-primary);
}

.btn-light:hover {
	background-color: aliceblue;
	border-color: rgb(0 167 209 / 30%);
	color: var(--theme-primary);
}

.btn p  {
	margin: 0px;
}

/* Active classes */

.dropdown-item.active, .dropdown-item:active {
	background-color: #efefef;
	border-color: #dfdfdf;
	color: inherit;
}

/* ------ Messaging ------ */
.alert-info, .alert-success {
    --bs-alert-color: #fff;
    --bs-alert-bg: var(--theme-primary);
    --bs-alert-border-color: aliceblue;
}

/* ------ Misc ------- */

.list-group-item{
	border-color: #f2f2f2;	
}

.breadcrumb {
	font-size: 0.875rem;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-item {
	display: inline;
}

.breadcrumb-item+.breadcrumb-item::before {
	float: none;
	padding-right: 0.1rem;
}

.breadcrumb-item+.breadcrumb-item {
	padding-left: 0.1rem;
}

@media (max-width: 575px) {
	.breadcrumb {
		font-size: 0.625rem;
	}
}

#captcha {
    text-transform: uppercase;
}

/* ====== Location Specific Styles ====== */

/* ------ Container Styling ------ */

.header-restricted {
	max-width:1750px;
}

.fluid-restricted{
	max-width:1500px;
}
.form-restricted{
	max-width:650px;
}

/* ------ Header Common & Mobile Styling ------ */

/* Header Desktop */

.header-desktop {
	box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 12px;
	position: sticky;
	top: 0;
	z-index: 998;
	background-color: #fff;
}

.header-desktop .nav-link {
	color: var(--theme-dark);
	margin: 0rem 0.5rem; /* Should we only have margin on the last item so there is more space for my account/login or standardise this? */
	font-weight: 600;
}

.header-desktop .nav-link:hover,
.header-desktop .nav-link.active {
	border-color: var(--theme-primary);
	color: var(--theme-dark);
}

/* Header Desktop - Collapse and Dropdown Styling */

@media (max-width: 991px) {
	.dropdown-header{
		padding: 0.5rem 1rem;
		font-weight: 600;
		margin-bottom: 0;
		font-size: 0.875rem;
		color: #6c757d;
		white-space: nowrap;
	}

	.dropdown-divider {
		height: 0;
		margin: 0.5rem 0;
		overflow: hidden;
		border-top: 1px solid #dee2e6;
		opacity: 1;
	}
}

/* Mobile Header */

@media (max-width: 991px) {
	.header-mobile {
		padding-top: 1rem;
		padding-bottom: 1rem;
		border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
		z-index: 998;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.12);
		overflow: auto;
		background: var(--theme-white);
		position: sticky;
		top: 0;
	}
	.header-mobile-icons {
		font-size: 1.25rem;
	}
	.header-mobile a {
		color: var(--theme-dark);
		font-weight: 500;
	}
	.mobile-nav-collapse {
		padding-left: 0;
		list-style: none;
	}
}

.mobile-subpage, .view-all-products {
	font-weight: 400;
}

/* ------ Logo Styling ------ */

#company-logo {
	transition: all 0.25s ease-in-out;
}

#company-logo:hover {
	opacity: 0.7;
}

/* ------ Main Menu Styling ------ */

.nav-menu {
	background-color: var(--theme-alternate);
}

.main-menu-desktop .nav-link {
	color: var(--theme-dark);
	margin: 0rem 0.5rem;
	font-weight: 600;
}

.main-menu-desktop .nav-link:hover, 
.main-menu-desktop .nav-link.active {
	border-color: var(--theme-primary);
	color: var(--theme-dark);
	font-weight: 600;
}

@media (max-width: 1199px) {
	.main-menu-desktop .nav-link {
		margin: 0rem 0.5rem;
		font-size: 0.875rem;
	}
}

.main-menu-desktop li:first-child a {
	margin-left: 0rem;
}

.main-menu-desktop li:last-child a {
	margin-right: 0rem;
}

/* ------ Main Content ------ */

.content-container,
.white-container,
.coloured-container {
	margin-top:1rem;
	margin-bottom:1rem;
}

.coloured-container,
.coloured-container td {
	background-color: var(--theme-light-grey);
}

/* ------ Filter & Category Sidebar ------ */

.category-icon {
	position:absolute;
	top:calc(50% - 10px);
	right:12px;
	color: rgba(0, 0, 0, 0.35);
	font-size: 0.825rem;
}

.mobile-category-expand {
	font-size: 0.725rem;
    color: rgba(0, 0, 0, 0.35);
}

/* ------ Footer Styles ------ */

.footer-navigation{
	background-color:var(--theme-alternate);
	color: var(--theme-white); 
	font-size: 0.875rem;
}
.footer-navigation a {
	color: var(--theme-light);
	width:fit-content;
}
.footer-navigation a:hover {
	color: var(--theme-primary);
}

@media (max-width: 991px) {
	.footer-navigation {
		text-align: center;
	}
	.footer-address {
		padding: 0rem 1rem;
	}
	.footer-address .nav-link {
		margin:auto;
	}
	.payment-icons > div {
		justify-content: center;
	}
}

.footer-navigation .nav-link {
	padding: .25rem 0 .25rem 0; /* reduce vertical and horizontal padding for footer links */
}

.footer-navigation .fa-stack {
	width: 2em; /* Unifies footer icon spacing */
}

.footer-navigation .list-unstyled {
	font-weight: 600;
}

.footer-navigation .list-unstyled:hover {
	color: var(--theme-light);
}

.footer-text-area p:last-of-type { /* Removes spacing of text so icons control it */
	margin: 0px;
}

.social-icons a {
	color: var(--theme-white);
}

.social-icons a:hover {
	opacity: 0.7;
	color: var(--theme-white);
}

.social-icons .fa-inverse {
	color: var(--theme-alternate);
}

.footer-payment-image {
	filter: grayscale(1);
    height: 25px;
    margin-bottom: 1px;
    margin-left: 1px;
}

.footer-newsletter {
	background-color: var(--theme-white-variant);
}

.footer-navigation h3 {
	color: #fff;
}

/* ------ Copyright Styles ------ */

.footer-copyright {
	color: var(--theme-white);
	font-size: 0.875rem;
	background-color: var(--theme-alternate-variant);
}

.footer-copyright a {
	color: var(--theme-light);
}

.footer-copyright a:hover {
	color: var(--theme-primary);
}

/* ====== Page Specific overrides ====== */

.home-section {
	margin: 4rem 0rem;
}

.my-6 {
	margin: 5rem 0rem !important;
}

.mt-6 {
	margin-top: 5rem !important;
}

.mb-6 {
	margin-bottom: 5rem !important;
}

/* ====== Addons ====== */

/* ------ Image Carousel ------ */
.carousel-item img{
	min-height: 300px;
    object-fit: cover;
}

/* ------ Callouts ------ */

.callout-content {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.callout-content a {
	width:100%;
}

/* ------ Product Carousels and Banner ------ */

.swiper {
	width: 100%;
	height: auto;
}

.swiper-prev-icon, .swiper-next-icon {
    position: absolute;
    top: 50%;
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
}

.swiper-prev-icon {
	left: -17px;
}

.swiper-next-icon {
	right: -17px;
}

.swiper-slide img {
	display: block;
	width: 100%;
}

#footer-logo {
	height: 24px;
}

/* Offcanvas */

.offcanvas-lg {
	z-index: 9999; /* Doesn't hide the mobile header like other offcanvas' */
}

.offcanvas-body .nav-link {
	padding: 0.5rem 1rem;
}
.offcanvas-body .navbar-nav .nav-link.active, 
.offcanvas-body .navbar-nav .nav-link.show {
	background-color: #e7e7e7;
}

@media (max-width: 991px) {
	.offcanvas, .offcanvas-lg {
		--bs-offcanvas-width: 90vw;
	}
}

@media (max-width: 575px) {
	.offcanvas, .offcanvas-lg {
		--bs-offcanvas-width: 100vw;
		font-size: 0.875rem;
	}
}

.offcanvas-body .nav-link {
	color: var(--theme-alternate);
}

/* Header Notifications */

#headerNotifications:hover {
	cursor: pointer;
}

#headerNotifications {
	width: 100%;
	color: #fff;
    font-weight: 400;
}

#headerNotifications .swiper-slide {
	background-color: var(--theme-alternate);
}

#headerNotifications .priority-message {
	background-color: #c94a4a;
}

#headerNotifications a {
	color: #fff;
	transition: all 0.25s ease-in-out;
}

#headerNotifications a:hover {
	color: #fff;
	text-decoration: none;
}

#headerNotifications p {
	display: inline;
}

#headerNotifications .swiper-slide {
	padding: 0.5rem 0rem;
}

@media (max-width: 991px) {
	#headerNotifications p {
		font-size: 0.75rem;
	}
}

/* Scroll To Top */

#scroll-to-top {
    display: inline-block;
    background-color: var(--theme-primary);
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 24px;
    position: fixed;
    bottom: 20px;
    left: 10px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
	color: #fff;
	display: flex;
	align-items: center;
    justify-content: center;
	font-size: 1.25rem;
	border: 2px solid #fff;
}

#scroll-to-top:hover {
    cursor: pointer;
    background-color: var(--theme-primary);
}

#scroll-to-top:active {
    background-color: var(--theme-primary);
}

#scroll-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* General */

.img-responsive {
	max-width: 100%;
    height: auto;
}

/* Card customisations for things like hover, icons to move on hover etc
Cater for when a links wrap around card (many scenarios) and when card wraps a links (blog, where footer needed)


.card:hover {
	cursor: default;
}

.card, a .card, .card a, .card-header, .card-footer {
	transition: all 0.25s ease-in-out;
}

/* if a card has an a and vice versa, apply style */
a:hover:has(.card) .card, 
a:hover:has(.card) .card-header, 
a:hover:has(.card) .card-footer, 
.card:hover:has(a),
.card:hover:has(a) .card-header,
.card:hover:has(a) .card-footer {
	cursor: pointer;
	background-color: aliceblue;
}

.inactiveCard, .inactiveCard:hover {
	cursor: default !important;
	background-color: #fff !important;
}

/* Card icon */
.card .card-title i {
	color: var(--theme-primary-variant);
	font-size: 0.875rem;
	opacity:0;
	transition: all 0.25s ease-in-out;
}

@media (max-width: 991px) {
	.card .card-title i {
		opacity:1;
	}
}

.card:hover .card-title i {
	transform: translateX(5px);
	opacity: 1;
}

/* Card and accordions display */

.accordion-button:not(.collapsed) {
	background-color:rgba(0, 139, 170, 0.7);
	color: var(--theme-white);
}

.accordion-button:focus {
	box-shadow: none;
}

.accordion-button strong p {
	margin: 0px;
}

.card, .card-body, .accordion-body {
	color: var(--theme-dark);
}

.card, .accordion {
	box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 12px;
	border-color: rgb(0 167 209 / 20%);
}

.card-text, .accordion-body {
	font-size: 0.875rem;
}

.card-text p:last-of-type {
	margin: 0px;
}

.accordion p:last-of-type {
	margin: 0px;
}

/* Badges used for categories */

.badge {
	padding: .4rem .6rem;
	line-height: .5rem;
	font-weight: 500;
}

.text-bg-primary {
	background-color: var(--theme-primary) !important;
}

.text-bg-secondary {
	background-color: #5b6671 !important;
}

/* Reviews, no longer used */

/*

@media (min-width: 992px) {
	.rplg .rplg-grid .rplg-col-12 {
		margin: 0px !important;
		width: 100% !important;
	}
}

.rplg .rplg-col .rplg-box,
.rplg .rplgsw-slide .rplg-box {
	box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 12px !important;
    border-color: rgb(0 167 209 / 20%) !important;
	border-radius: 5px !important;
}

.rplg .rplg-col .rplg-box,
.rplg .rplgsw-slide .rplg-box,
.rplg .rplg-slider .rplg-slider-prev, 
.rplg .rplg-slider .rplg-slider-next {
	background-color: var(--theme-white) !important;

}

.rplg .rplgsw-slide .rplg-review-name,
.rplg .rplgsw-slide .rplg-review-text {
	color: var(--theme-dark) !important;
}

.rplg .rplgsw-pagination-bullet-active {
	background: var(--theme-primary);
}

.rplg .rplg-slider .rplg-slider-prev, 
.rplg .rplg-slider .rplg-slider-next {
	width: 32px;
    height: 32px;
	border: 1px solid rgb(0 167 209 / 20%) !important;
}

.rplg .rplg-slider .rplg-slider-prev span {
	left: 34% !important;
	top: 46%;
}

.rplg .rplg-slider .rplg-slider-next span {
	left: 42% !important;
	top: 46% !important;
}

@media (max-width: 1600px)  {
	.rplg .rplg-slider .rplg-slider-prev {
		left: -10px !important;
	}
	
	.rplg .rplg-slider .rplg-slider-next {
		right: -10px !important;
	}
}

*/

/* Pricing */

.fa-check {
	color: var(--theme-primary);
}

.fa-times {
	color: #5b6671;
}

/* Blog Sidebar */

.blog-article-sidebar {
	background: aliceblue;
    padding: 2rem;
	border-radius: 0.375rem;
}

/* Blog, Callouts etc */

.blog-list-row .card-img-top {
    height: 250px;
    object-fit: contain;
	background-color: #fff;
	border-bottom: 1px solid rgb(0 167 209 / 30%);
}

/* Support Notifications */

.support-notification-header {
	display: block;
	margin-bottom: .5rem;
}

.support-notification-title {
	display: inline;
}

.support-notification-text p:last-child {
	margin: 0px;
}

/* li overrides */

.content-container ul, .home-section ul {
    --icon-size: .8em;
    --gutter: .5em;
    padding: 0 0 0 var(--icon-size);
}

.content-container ul li, .home-section ul li {
	padding-left: var(--gutter);
}

.content-container ul li::marker, .home-section ul li::marker  {
	font: var(--fa-font-light);
    font-size: var(--icon-size);
    color: var(--theme-primary);
	content: "\f058";
}

/* Pagination fixes for li ovverrides */

.page-link, .page-link:hover {
	color: var(--theme-dark);
}

.page-item.active .page-link {
	background-color: aliceblue;
	border-color: #dfdfdf;
	color: var(--theme-dark);
}

.disabled>.page-link, .page-link.disabled {
	color: var(--bs-pagination-disabled-color);
    pointer-events: none;
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
}

ul.pagination {
	--gutter: 0rem;
}

ul.pagination li::marker {
	content: none;
}

/* Tooltips */

.straightsell-tooltip {
	--bs-tooltip-bg: var(--theme-primary);
	--bs-tooltip-color: var(--bs-white);
}

.tooltip.show {
    opacity: 1;
	border-radius: 4px;
}

.btn-tooltip {
	border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
}

/* Plan Features */

.plan-features .fa-circle-check {
	color: var(--theme-primary);
}

.plan-features > .col-md-9 > .row {
	padding: .25rem 0rem;
}

/* Prices */

.fromLabel {
	font-weight: 500;
}

.integrationDisplay {
	color: var(--theme-primary);
	font-weight: 600;
}

#totalCostB2B, #monthlyCostB2B, 
#totalCostB2BAndB2C, #monthlyCostB2BAndB2C,
#totalCostAdvanced, #monthlyCostAdvanced {
	color: var(--theme-primary);
	font-weight: 500;
}

#totalCostB2B, #totalCostB2BAndB2C, #totalCostAdvanced  {
	font-weight: 600;
}

@media (max-width: 991px) {
	.features-heading {
		font-size: .6rem;
	}
}


/* Home */

	/* Banner */

	.banner-container {
		background-image: url(/documents/banner-background-min.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;

	}

	.banner-container > div {
		background: rgba( 0, 167, 209, 0.55);
		backdrop-filter: blur(6px);
		height: 66dvh;
    	display: flex;
		align-items: center;
		justify-content: center;
	}

	.banner-container {
		background-color: var(--theme-primary);
	}

	.banner-container h1, .banner-container h2, .banner-container h3, .banner-container h4, .banner-container h5, .banner-container h6 {
		margin-bottom: 1rem;
	}

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

	.banner-text {
		text-shadow: 1px 1px 2px rgba(0,0,0, 0.5);
	}

	.banner-text a {
		text-shadow: none;
	}

	.banner-container .btn-primary {
		background-color: var(--theme-green);
		border-color: var(--theme-green);
	}

	.banner-container .btn-primary:hover {
		background-color: var(--theme-green-variant);
		border-color: var(--theme-green-variant);
	}

	@media (max-width: 991px) {

		.banner-container {
			min-height: calc(30vh);
			min-height: calc(30dvh);
		}

		.banner-container h1 {
			font-size: 2.25rem;
			color: #fff;
			margin-bottom: 1.5rem;
		}
	
		.banner-container h2 {
			font-size:1.25rem;
			font-weight: 500;
			color: #fff;
		}
	}

	@media (min-width: 992px) {
		.banner-container h1 {
			font-size: 2.5rem;
			color: #fff;
			margin-bottom: 1.5rem;
		}
	
		.banner-container h2 {
			font-size:1.5rem;
    		font-weight: 500;
			color: #fff;
			margin-bottom: 2rem;
		}
	}

	.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
		bottom: unset;
	}

	#howItWorks {
		scroll-margin: 5rem; /* add spacing for the scroll to this div */
	}

	@media (max-width: 991px) {
		.callout-border {
			border-bottom: 1px solid rgb(0 167 209 / 20%) !important;
			border-radius: 0px;
		}
	}

	@media (min-width: 992px) {
		.callout-border {
			border-right: 1px solid rgb(0 167 209 / 20%) !important;
			border-radius: 0px;
		}
	}

.contact-container {
	background-color: var(--theme-primary);
	color: #fff;
}
  
.overlay-image {
    position: absolute;
    top: 144px;
    right: 100px;
    z-index: 10;
}

@media (max-width: 1920px) {
	.integrationImage {
		max-height: 375px;
	}
}