/*
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.   ***************/



/* =========================================================================
   GLOBAL / UTILITY
   ========================================================================= */

html {
	scroll-behavior: smooth;
}

section {
	scroll-margin-top: 100px;
}

.mobile-only {
	display: none;
}

/* NOTE: this is site-wide and strips bullets from ALL lists, including
   blog post content and plugin output. See notes. */
ul {
	list-style: none;
	padding-left: 0;
}

h1,
span.section-title-main {
	text-transform: none !important;
	/* color:#289acf; */
}


/* =========================================================================
   TOP SECTION / HERO
   ========================================================================= */

.top-section {
	position: relative;
	overflow: hidden;
}

.top-section h1 {
	font-size: 150%;
}

.top-section-new {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
}

.top-section-new h1 {
	font-size: 150%;
}

a.open-video {
	color: #1190cc;
	left: -50px;
	top: 35px;
}

.homepage-video {
	min-height: 60vh;
	margin-top: 160px;
	text-align: center;
	/* CHANGED: was an absolute http:// URL. Root-relative works on both dev
	   and live, and avoids a mixed-content warning. */
	background: url("/wp-content/uploads/2026/03/databridge-video-2.webp");
	background-repeat: no-repeat;
}

a.next {
	position: absolute !important;
	top: 150px;
	left: 73vw;
	width: 10vw;
}

a.previous {
	position: absolute !important;
	top: 150px;
	left: 65vw;
	width: 10vw;
}

.icon-play {
	color: rgb(9, 54, 113);
}

.homepage-banner h1 {
	font-size: 1.6vw;
	line-height: 2vw;
	color: #093671;
	margin-bottom: 30px;
	font-weight: 500;
}

.homepage-banner h2 {
	font-size: 1vw;
	line-height: 1.4vw;
	font-weight: 500;
	color: #093671;
}

/* =========================================================================
   BOOK A DEMO BUTTON
   ========================================================================= */

a.book-a-demo {
	position: absolute;
	top: 550px;
	font-size: 1em !important;
}

/* Initial hidden state */
.top-section .book-a-demo {
	opacity: 0;
	transform: translateY(15px);
	animation: revealDemoButton 3.2s ease-out 7s forwards;
}

.top-section .book-a-demo-2 {
	opacity: 0;
	transform: translateY(15px);
	animation: revealDemoButton 1.2s ease-out 3s forwards;
}

@keyframes revealDemoButton {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	.top-section .book-a-demo,
	.top-section-new .book-a-demo {
		animation: none;
		opacity: 1;
		transform: none;
	}
}


/* =========================================================================
   HEADER / TOP BAR
   ========================================================================= */

#top-bar,
#top-bar a {
	color: #093671;
	font-weight: 400;
}

/* --- DECIDE ON THIS ONE --------------------------------------------------
   In the old files this read "top-bar {" with no #, so it never applied.
   Enabling it WILL change the look of the top bar (it would override the
   #d2e6f0 gradient in the group rule below). Left commented so nothing
   changes unexpectedly - uncomment if this animated bar is what you wanted.

#top-bar {
	background-image: linear-gradient(to right, #c2d6e0, #f0f7ff, #ffffff) !important;
	background-size: 200% 200%;
	animation: topBarShift 12s ease-in-out infinite;
}
------------------------------------------------------------------------- */

@keyframes topBarShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}


/* =========================================================================
   NAV / DROPDOWNS
   ========================================================================= */

.nav-dropdown-default .nav-column li > a:hover,
.nav-dropdown.nav-dropdown-default > li > a:hover {
	padding-left: 3px !important;
}

li.demo {
	background: #1190cc;
	padding: 0px 15px;
	border-radius: 50px;
}

.demo a {
	font-weight: 800;
	color: white !important;
	text-transform: uppercase;
}

.demo a:hover {
	font-weight: 800;
	color: #eee !important;
}

/* --- Main nav dropdown --- */

.header-nav li:hover > ul,
.header-nav li:hover > .nav-dropdown {
	animation: dbmenuFadeDown 0.5s ease-out;
}

.header-nav li:hover > ul > li,
.header-nav li:hover > .nav-dropdown > li {
	opacity: 0;
	animation: dbmenuItemFade 0.4s ease-out forwards;
}

.header-nav li:hover > ul > li:nth-child(1),
.header-nav li:hover > .nav-dropdown > li:nth-child(1) { animation-delay: 0.05s; }

.header-nav li:hover > ul > li:nth-child(2),
.header-nav li:hover > .nav-dropdown > li:nth-child(2) { animation-delay: 0.20s; }

.header-nav li:hover > ul > li:nth-child(3),
.header-nav li:hover > .nav-dropdown > li:nth-child(3) { animation-delay: 0.35s; }

.header-nav li:hover > ul > li:nth-child(4),
.header-nav li:hover > .nav-dropdown > li:nth-child(4) { animation-delay: 0.50s; }

.header-nav li:hover > ul > li:nth-child(5),
.header-nav li:hover > .nav-dropdown > li:nth-child(5) { animation-delay: 0.65s; }

.header-nav li:hover > ul > li:nth-child(6),
.header-nav li:hover > .nav-dropdown > li:nth-child(6) { animation-delay: 0.80s; }

.header-nav li:hover > ul > li:nth-child(7),
.header-nav li:hover > .nav-dropdown > li:nth-child(7) { animation-delay: 0.95s; }

.header-nav li:hover > ul > li:nth-child(8),
.header-nav li:hover > .nav-dropdown > li:nth-child(8) { animation-delay: 1.10s; }

.header-nav li:hover > ul > li:nth-child(9),
.header-nav li:hover > .nav-dropdown > li:nth-child(9) { animation-delay: 1.25s; }

/* --- Top bar nav dropdown --- */

.top-bar-nav li:hover > ul,
.top-bar-nav li:hover > .nav-dropdown {
	animation: dbmenuFadeDown 0.5s ease-out;
}

.top-bar-nav li:hover > ul > li,
.top-bar-nav li:hover > .nav-dropdown > li {
	opacity: 0;
	animation: dbmenuItemFade 0.4s ease-out forwards;
}

.top-bar-nav li:hover > ul > li:nth-child(1),
.top-bar-nav li:hover > .nav-dropdown > li:nth-child(1) { animation-delay: 0.05s; }

.top-bar-nav li:hover > ul > li:nth-child(2),
.top-bar-nav li:hover > .nav-dropdown > li:nth-child(2) { animation-delay: 0.20s; }

/* FIXED: second selector was ".top-bar-navv" (typo) */
.top-bar-nav li:hover > ul > li:nth-child(3),
.top-bar-nav li:hover > .nav-dropdown > li:nth-child(3) { animation-delay: 0.35s; }

.top-bar-nav li:hover > ul > li:nth-child(4),
.top-bar-nav li:hover > .nav-dropdown > li:nth-child(4) { animation-delay: 0.50s; }

@keyframes dbmenuFadeDown {
	from {
		opacity: 0;
		transform: translateY(-18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dbmenuItemFade {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* =========================================================================
   SECTION BACKGROUNDS
   ========================================================================= */

.features-boxes .col-inner,
.blue-section,
#masthead,
#top-bar,
.sub-menu,
.absolute-footer {
	background-image: linear-gradient(to bottom, #d2e6f0, #f0f7ff) !important;
}

/* NOTE: this beats the gradient above on specificity, so inner feature
   boxes render white. Kept as-is - that's the current live behaviour. */
.features-boxes .col .col-inner {
	background: white;
}

.testimonials {
	background-image: linear-gradient(to bottom, #f0f7ff, #ffffff) !important;
	border-radius: 15px;
}

.screen-shot .col {
	padding: 0 !important;
}

.docs-scroller {
	min-height: 700px;
	padding: 40px;
	border-radius: 15px;
	background-image: linear-gradient(to bottom, #f0f7ff, #ffffff) !important;
}


/* =========================================================================
   FEATURES
   ========================================================================= */

.features-boxes h2 {
	font-weight: 500;
}

.features a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.features a i {
	transition: transform 0.25s ease;
}

.features a:hover i {
	transform: translateX(5px);
}

.features-banner {
	padding-top: 150px !important;
	height: 500px;
}

.features-banner h1 {
	font-size: 2.2em;
	line-height: 1.4em;
	color: rgb(201, 230, 251);
	margin-bottom: 30px;
	font-weight: 500;
}

.feature-headings h2 {
	font-size: 2.2em;
	font-weight: 500;
	color: #3e8ce8;
	letter-spacing: 2px;
}

.features-text {
	padding: 20px;
	background: #ffffff;
	border-radius: 10px;
}


/* =========================================================================
   SVG ROLLOVER ICONS
   ========================================================================= */

.svg-rollover-icon svg {
	--dur: 2.3s;
	display: block;
	width: 100%;
	height: auto;
}

.svg-rollover-icon .paper {
	fill: #ffffff;
}

.svg-rollover-icon .clipFill,
.svg-rollover-icon .badgeFill {
	fill: #dddddd;
}

.svg-rollover-icon .rivet {
	fill: #f4f4f4;
}

.svg-rollover-icon .stroke {
	fill: none;
	stroke: #093671;
	stroke-width: 12;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 1;
}

.svg-rollover-icon .item1,
.svg-rollover-icon .item2,
.svg-rollover-icon .item3,
.svg-rollover-icon .item4,
.svg-rollover-icon .heart {
	opacity: 0;
	animation: none !important;
}

.svg-rollover-icon .heart {
	transform-origin: 419px 380px;
}

.svg-rollover-icon:hover .item1 {
	animation: step1 var(--dur) linear infinite !important;
}

.svg-rollover-icon:hover .item2 {
	animation: step2 var(--dur) linear infinite !important;
}

.svg-rollover-icon:hover .item3 {
	animation: step3 var(--dur) linear infinite !important;
}

.svg-rollover-icon:hover .item4 {
	animation: step4 var(--dur) linear infinite !important;
}

.svg-rollover-icon:hover .heart {
	animation: heartPop var(--dur) linear infinite !important;
}

@keyframes step1 {
	0%, 12%  { opacity: 0; }
	14%, 96% { opacity: 1; }
	100%     { opacity: 0; }
}

@keyframes step2 {
	0%, 25%  { opacity: 0; }
	27%, 96% { opacity: 1; }
	100%     { opacity: 0; }
}

@keyframes step3 {
	0%, 38%  { opacity: 0; }
	40%, 96% { opacity: 1; }
	100%     { opacity: 0; }
}

@keyframes step4 {
	0%, 51%  { opacity: 0; }
	53%, 96% { opacity: 1; }
	100%     { opacity: 0; }
}

@keyframes heartPop {
	0%, 64% {
		opacity: 0;
		transform: scale(0.78);
	}
	70% {
		opacity: 1;
		transform: scale(1.06);
	}
	76%, 96% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(0.78);
	}
}


/* =========================================================================
   LISTS / BULLETS
   ========================================================================= */

/* NOTE: likely inert - the global "ul { list-style:none }" removes the
   marker box entirely, and bullets are drawn with ::before below. */
.custom-bullets li::marker {
	color: rgb(17, 144, 204);
	font-size: 2.5em;
}

.custom-bullets ul li {
	position: relative;
	padding-left: 20px;
	padding-bottom: 50px;
}

.custom-bullets ul li::before {
	content: "\2022";
	position: absolute;
	left: 0;
	top: 5px; /* vertical control */
	color: #0faab0;
	scale: 500%;
	padding-right: 10px;
}

.your-list-class li {
	position: relative;
	padding-left: 30px; /* space for icon */
	list-style: none;
	font-size: 1.2em;
}

.your-list-class h3 {
	font-size: 1.3em;
	font-weight: 500;
}

.your-list-class li::before {
	content: "\2022";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%); /* this is the key */
	color: #3e8ce8;
	font-size: 4em;
	margin-left: -10px;
}


/* =========================================================================
   ATTENDANCE / BANNERS / FOOTER
   ========================================================================= */

.attendance-chart-wrap object {
	width: 100%;
	max-width: 800px;
	height: auto;
	display: block;
}

@keyframes gradient-shift {
	0%   { background-position: 0% 0%; }
	100% { background-position: 0% 100%; }
}

.attendance-banner .banner {
	background-image: linear-gradient(to bottom, #0faab0, #196bc7, #0faab0) !important;
	background-size: 100% 200%;
	animation: gradient-shift 5s ease-in-out infinite alternate;
}

.section.attendance-banner-trans {
	background-image: linear-gradient(
		to bottom,
		rgba(15, 170, 176, 0.5),
		rgba(25, 107, 199, 0.5)
	) !important;
}

.footer-1 {
	background-image: linear-gradient(to bottom, #0faab0, #196bc7, #0faab0) !important;
	background-size: 100% 200%;
	animation: gradient-shift 5s ease-in-out infinite alternate;
}


/* =========================================================================
   TESTIMONIALS / SLIDER
   ========================================================================= */

.test-quote i {
	float: left;
	color: #3e8ce8;
	font-size: 300%;
	margin-right: 20px;
}

.testimonials-slider .row {
	height: 450px;
}

.flickity-page-dots .dot {
	border: 10px solid #0f9ac0;
	border-radius: 50%;
	cursor: pointer;
	display: inline-block;
	height: 12px;
	width: 12px;
	margin: 0 5px;
	opacity: .4;
	transition: opacity .3s;
}


/* =========================================================================
   MAP OVERLAY
   ========================================================================= */

.map-overlay-wrapper {
	position: relative;
	display: block;
}

.map-overlay-wrapper::after {
	content: '';
	position: absolute;
	inset: 0;                                  /* covers the full iframe */
	background-color: rgba(15, 150, 196, 0.2); /* #0faab0 at 20% opacity */
	pointer-events: none;                      /* keeps the map interactive */
	z-index: 1;
}

.map-overlay-wrapper iframe {
	display: block;
	width: 100%;
}


/* =========================================================================
   FORMS (Contact Form 7)
   ========================================================================= */

.wpcf7-form input,
.wpcf7-form textarea {
	background: #f0f6ff;
	border: 0;
	border-radius: 10px;
	color: #093671;
}

.wpcf7-list-item {
	width: 270px;
}

.homepage-contact-form input[type=submit] {
	background: #1190cc !important;
	color: white !important;
}


/* =========================================================================
   ANIMATIONS - MISC
   ========================================================================= */

@keyframes pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}

/* .pulse and .pulse-2 were identical and both ran "pulse", so merged.
   The separate @keyframes pulse-2 was an unused duplicate - removed. */
.pulse,
.pulse-2 {
	width: 160px;
	height: 30px;
	animation: pulse 2s infinite;
}


/* =========================================================================
   COOKIE CONSENT  (carried over from the old style.css - the only block
   that existed there and nowhere else)
   ========================================================================= */

.cookie-consent-banner {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #f8f9fa;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	color: black;
	padding: 15px;
	font-size: 14px;
	text-align: center;
	z-index: 1000;
}

.cookie-consent-button {
	border: none;
	padding: 8px 16px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 4px;
}

.cookie-consent-button:hover {
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.cookie-consent-button:active {
	opacity: .5;
}

.cookie-consent-button.btn-success {
	background-color: #34a853;
	color: white;
}

.cookie-consent-button.btn-grayscale {
	background-color: #dfe1e5;
	color: black;
}

.cookie-consent-button.btn-outline {
	background-color: #e6f4ea;
	color: #34a853;
}

.cookie-consent-options {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.cookie-consent-options label {
	margin: 0 10px;
	font-size: 14px;
}

.cookie-consent-options input {
	margin-right: 5px;
}


/* =========================================================================
   MOBILE ONLY  -  max-width 48em (768px at a 16px root)

   MUST STAY LAST IN THE FILE. These rules have the same specificity as
   their desktop counterparts above, so they only win by coming later.
   Anything you add after this block will override the mobile styles.
   ========================================================================= */

@media only screen and (max-width: 48em) {

	/*************** ADD MOBILE ONLY CSS HERE ***************/

	.mobile-only {
		display: block;
	}

	.desktop-only {
		display: none !important;
	}

	#top-bar {
		background: #c9e6fb !important;
	}

	.homepage-scroll-text h1 {
		line-height: 1.2em !important;
	}

	a.book-a-demo {
		position: absolute;
		top: 390px;
		left: 30%;
		font-size: 0.8em !important;
	}

	/* Initial hidden state */
	.top-section .book-a-demo {
		opacity: 0;
		transform: translateY(15px);
		animation: revealDemoButton 4.2s ease-out 7s forwards;
	}

	/* FIXED: a stray "Specificity: (0,2,1)" line from dev tools had been
	   pasted between the selector and the opening brace, which made the
	   whole rule invalid - the browser was discarding it. */
	.dark .button,
	.dark input[type=button],
	.dark input[type=reset],
	.dark input[type=submit] {
		color: #093671;
	}

	.wpcf7-submit {
		color: #093671 !important;
	}

	.flickity-page-dots {
		display: none;
	}


.homepage-banner h1 {
	font-size: 1.4em;
	line-height: 1.2em;
	color: #093671;
	margin-bottom: 10px;
	font-weight: 500;
}

.homepage-banner h2 {
	font-size: 2em;
	line-height: 1.8em;
	font-weight: 500;
	color: #093671;
}


}