/* UKConnect — Homepage
   Scoped to body.ukc-homepage
   ============================================================ */

@scope (.ukc-homepage) {


	/* GSAP start hidden items */
	section.hero-v3 .content {
		opacity: 0;
	}



	.section.hero-v3 {
		overflow: hidden;

		span.sentence {
			color: inherit;
		}
	}

	* {
		text-wrap: pretty;
	}

	#header.new-design .header-right {
		display: none;
	}

	.video-block.hero-bg video, section.hero-v3 video {
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: center;
	}

	.page-banner-coming-soon {
		background-color: #DE6923;
		position: fixed;
		top: 60px;
		right: 60px;
		z-index: 9999;
		height: 40px;
		color: white;
		text-transform: uppercase;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 500px;
		transform: translate(50%, -50%) rotate(45deg);

		@media (width <= 1560px) {
			top: auto;
			bottom: 60px;
			transform: translate(50%, 50%) rotate(-45deg);
		}

	}
	@media (width <= 1560px) {
		.footer-bottom .row {
			flex-direction: column;
		}
		.footer-bottom .col-md-5 {
			order: 2;
		}

		ul#footer-menu-bottom-new {
			justify-content: flex-start !important;
		}

		.footer.new-design {
			padding-bottom: 120px;
		}
	}

	.container {
		max-width: 1380px;
	}

	.custom-heading-3 {
		font-size: 36px;
		font-weight: normal;
	}

	.scroll-prompt {
		position: absolute;
		left: 50%;
		bottom: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transform: translateX(-50%);
		gap: 20px;
		font-weight: 600;
		font-size: 1.2rem;
		@media (width <= 600px) and (height <= 720px) {
			display: none;
		}
	}

	.feature-board {
		overflow: hidden;
		padding: 48px;
		
		@media (width > 768px) {
			min-height: 37.5rem;
		}

		display: flex;
		flex-direction: row;
		align-items: start;
		justify-content: start;
		background-color: #111111;
		background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
		--gradient-direction: to right;
		background-image: var(--bg-gradient),
			var(--background-image, url('https://placehold.co/1600x900/111/444?text=Feature+Board'));

		--bg-gradient: linear-gradient(
			var(--gradient-direction),
			rgba(0, 0, 0, 0.80) 0%,
			rgba(0, 0, 0, 0.60) 50%,
			rgba(0, 0, 0, 0.80) 100%
		);

		@media (width > 768px) {
			padding: 128px;
			--gradient-direction: to right;
			--bg-gradient: linear-gradient(
				var(--gradient-direction),
				rgba(0, 0, 0, 0.80) 0%,
				rgba(0, 0, 0, 0.60) 40%,
				rgba(0, 0, 0, 0.0) 70%
			);
		}

		&.feature-board--right-aligned {
			justify-content: end;
			--gradient-direction: to left;
		}

		p {
			max-width: 60ch;
			font-size: 20px;
            /* font-weight: 600; */
            margin-top: 12px;
		}


		position: relative;

		& .feature-board-background {
			position: absolute;
			inset: 0;
			z-index: 0;
			&:after {
				content: '';
				position: absolute;
				inset: 0;
				background-image: var(--bg-gradient);
			}

			& img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				opacity: 1;

				&:first-child {
					opacity: 1;
				}
			}
		}

		& .feature-board-content {
			position: relative;
			z-index: 2;

			max-width: 30rem;

			ul {
				margin-top: 0.5rem;
			}
		}
	}

	.checklist {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem;
		padding: 2rem;
		container: checklist / inline-size;

		& .checklist-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.75rem;
			color: #fff;
			font-size: 22px;
			flex: 0 0 min(220px, 100%);
			@container (width <= 1280px) {
				flex: 0 0 30%;
			}
			@container (width <= 800px) {
				flex: 0 0 45%;
			}
			@container (width <= 640px) {
				flex: 0 0 100%;
			}
            text-align: center;
			
			&::before {
				content: '';
				display: block;
				width: 48px;
				height: 48px;
				background-color: #DE6923;
				border-radius: 50%;
				background-image: url("data:image/svg+xml,%3Csvg width='50' height='37' viewBox='0 0 50 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46.0934 0.609066C46.9077 -0.203761 48.2299 -0.203515 49.0448 0.612768C49.8081 1.37807 49.8534 2.58851 49.1831 3.40736L49.0393 3.56599L16.4448 36.0736C16.0538 36.4633 15.5229 36.6843 14.9709 36.6843C14.9528 36.6843 14.9447 36.6826 14.9379 36.6824H14.9267C14.3591 36.6705 13.821 36.4272 13.4362 36.0092L0.55164 22.0177C-0.229132 21.1694 -0.174431 19.8488 0.673378 19.0682C1.52245 18.2873 2.8422 18.3424 3.62288 19.19L14.7035 31.2224L15.0355 31.5839L15.3842 31.2371L46.0915 0.610917L46.0934 0.609066Z' fill='white'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-size: 60%;
				background-position: center;
				margin: 32px;
			}
		}
	}

	.section.hero {
		height: 100dvh;
		@media (min-width: 1161px) {
			.h1, .title-xxl, h1 {
				font-size: 80px;
			}
		}
		@media (height <= 800px) {
			.h1, .title-xxl, h1 {
				font-size: calc(40px + (100vw - 576px) / 584 * 20);
			}
		}
		.button {
			background-color: #8A56C5;
			border-color: #8A56C5;
			&:hover {
				background-color: #6B3D9A;
				border-color: #6B3D9A;
			}
		}
	}
	.button-purple {
		background-color: #8A56C5;
		border-color: #8A56C5;
		&:hover {
			background-color: #6B3D9A;
			border-color: #6B3D9A;
		}
	}

	&:has(#wpadminbar) {
		.section.hero {
			height: calc(100dvh - var(--wp-adminbar-height, 32px) + 1px);
		}
		#header {
			top: var(--wp-adminbar-height, 32px);
		}
	}
	@media (max-width: 992px) {
		:has(#wpadminbar) #header.new-design .header-menu__inner {
			padding-top: calc(110px + var(--wp-adminbar-height, 32px));
		}
	}

	.button.button-green {
		background-color: #8A56C5;
		border-color: #8A56C5;
		&:hover {
			background-color: #6B3D9A;
			border-color: #6B3D9A;
		}
	}


	.custom-section-a {
		/* background-image: url('https://www.ukconnect.com/wp-content/uploads/2026/06/new-bg.jpg');
		background-size: cover;
        background-position: top center;
        background-repeat: no-repeat; */
    	background-color: #0e0d16;
		color: white;
		padding-block: 2rem;

		display: flex;
		flex-direction: column;
		gap: 48px;

		@media (width > 768px) {
			.feature-board {
				min-height: 50rem;
			}
		}
	}

	.custom-section-b {
    	background-color: #15141C;
		color: white;
		padding-block: 256px 128px;
 
		display: flex;
		flex-direction: column;
		gap: 48px;
	}
	.custom-section-c {
    	background-color: #15141C;
		color: white;
		padding-block: 128px 256px;
		display: flex;
		flex-direction: column;
		gap: 48px;
	}

	@media (width < 1024px) {
		/* .custom-section-a {
			padding-block: 128px;
		} */

		.custom-section-b {
			padding-block: 128px 64px;
		}

		.custom-section-c {
			padding-block: 64px 128px;
		}
	}


	.faq-block {
		background-position: top center;
		.container {
			max-width: 800px;
		}
	}

	.process-chain {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		list-style: none;
		gap: 64px 20px;
		margin: 0;
		padding: 0;
		margin-top: 64px;
		container: process-chain / inline-size;
		
		@media (width < 768px) {
			gap: 48px;
			/* text-align: center; */
		}

		.process-item {
			flex: 0 1 min(320px, 100%);
			
			@container (width <= 1689px) {
				flex: 0 0 30%;
			}
			@container (width <= 1150px) {
				flex: 0 0 45%;
			}
			@container (width <= 900px) {
				flex: 0 0 100%;

				display: grid;
				grid-template-columns: auto 1fr;
				grid-template-rows: auto auto;
				gap:  4px 16px;

				.process-item__icon {
					grid-row: 1 / 3;
					grid-column: 1 / 2;
				}
				
				.process-item__title {
					grid-row: 1 / 2;
					grid-column: 2 / 3;
				}
				.process-item__text {
					grid-row: 2 / 3;
					grid-column: 2 / 3;
				}

			}

			& .process-item__number {
				display: none;
			}

			& .process-item__icon img {
				width: 4rem;
				height: auto;
				filter: brightness(0) saturate(100%) invert(41%) sepia(98%) saturate(655%) hue-rotate(355deg) brightness(103%) contrast(101%);
				margin-bottom: 32px;
			}

			& .process-item__title {
				font-size: 28px;
				margin-bottom: 0.5rem;
				color: #fff;
			}

			& .process-item__text {
				font-size: 1.125rem;
				line-height: 1.5;
				color: #fff;
			}
		}
	}


	.content-form-v2#content-form-v2 .content-form-wrapper {
		flex-direction: column;
        scroll-margin-top: 96px;
	}

	/* ._form-content {
		color: initial;
	} */

}

.weak {
	font-weight: normal;
}
.text-accent {
	&.orange {
		color: #de6923;
	}
}

.container:has(>.decorative-corners) {
	position: relative;
}
.decorative-corners {
	position: absolute;
	inset: 0;
	--size: 2.5rem;
    --thic: 0.625rem;
    --inset-x: -2rem;
    --inset-y: -2rem;

	.corner {
		position: absolute;
		height: var(--size);
		width: var(--size);
		border: var(--thic) solid #de6923;

		&[class*="top"] { border-bottom-width: 0; top: var(--inset-y); }
		&[class*="bottom"] { border-top-width: 0; bottom: var(--inset-y); }
		&[class*="left"] { border-right-width: 0; left: var(--inset-x); }
		&[class*="right"] { border-left-width: 0; right: var(--inset-x); }
	}
	
}


.background-wiggle {
	position: relative;
	isolation: isolate;
	&:before {
		content: "";
		display: block;
		position: absolute;
		z-index: -1;
		/* background-image: url(https://www.ukconnect.com/wp-content/themes/rocket-saas/assets/images/lines-bg.svg); */
		background-image: url('../assets/images/lines-bg.svg');
		width: 1092px;
		height: 554px;
		left: calc(50% - 215px);
		top: 0;
		background-size: contain;
		background-position: 50%;
		background-repeat: no-repeat;
	}
}
.background-wiggle-dark {
	position: relative;
	isolation: isolate;
	&:before {
		content: "";
		display: block;
		position: absolute;
		z-index: -1;
		background-image: url('../assets/images/lines-dark-big-bg.svg');
		width: 1092px;
		height: 554px;
		left: calc(50% - 215px);
		top: 0;
		background-size: contain;
		background-position: 50%;
		background-repeat: no-repeat;
	}
}

.testimonials-slider-v2 div.testimonial-slide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0;
	gap: 0;
	background-color: #000000;
	color: white;
	.image {
		width: 100%;
		height: 100%;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	.testimonial-content {
		padding: 2rem;
		display: grid;
		align-content: center;
		.icon {
			display: none;
		}
		.text {
			font-weight: 300;
			&:before { content: '“'; }
			&:after { content: '”'; }
		}
		.text, .description {
			color: white;
		}

		
	}
	@media (width <= 998px) {
		grid-template-columns: 1fr;
		text-align: center;
		.image {
			width: 100%;
			height: auto;
			padding: 2rem;
			img {
				width: 18.625rem;
				max-width: 100%;
				height: auto;
				margin: 0 auto;
			}
		}
	}
}

/* Defence stuff */
.section-amazon-leo-billboard {
	.billboard-amazon-leo {
		min-height: 50rem;
		background: radial-gradient(circle at 50% 150%, #1999E4 0%, #040D16 100%);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		color: #fff;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 1rem;
		.amazon-leo-logo {
			width: 100%;
			max-width: 320px;
			height: auto;
			margin-bottom: 2rem;
		}
	}
}

section.hero-v3 .content {
	max-width: 75rem;
}

.arrow-link {
	color: inherit;
	transition: all 0.3s ease;
	&:before {
		content: '\f061';
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
		display: inline-block;
		margin-right: 0.5rem;
		color: #DE6923;
		font-size: 1rem;
		vertical-align: baseline;
		transition: all 0.3s ease;
	}
	&:hover {
		color: #DE6923;
	}
	&.arrow-link-end {
		&:before {
			content: '';
		}
		&:after {
			content: '\f061';
			font-family: 'Font Awesome 6 Free';
			font-weight: 900;
			display: inline-block;
			margin-right: 0.5rem;
			color: #DE6923;
			font-size: 1rem;
			vertical-align: baseline;
			transition: all 0.3s ease;
		}
	}
	
}

ul.arrow-list-mk2 {
	li {
		a {
			color: inherit;
			transition: all 0.3s ease;
			&:before {
				content: '\f061';
				font-family: 'Font Awesome 6 Free';
				font-weight: 900;
				display: inline-block;
				margin-right: 0.5rem;
				color: #DE6923;
				font-size: 1rem;
				vertical-align: baseline;
				transition: all 0.3s ease;
			}
			&:hover {
				color: #DE6923;
			}
		}
	}

	&:hover:has(li a:hover) li a:hover {
		&:before {
			transform: translateX(5px);
		}
	}
	&:hover:has(li a:hover) li a:not(:hover) {
		&:before {
			opacity: .5;
		}
	}
}

section.section.page-heading {
	position: relative;
	isolation: isolate;

	.background-visual {
		position: absolute;
		inset: 0;
		z-index: -1;
		img, video {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		&:after {
			content: "";
			position: absolute;
			inset: 0;
			background: color-mix(in oklch, #0000, #000 65%);
		}
	}
}

.container {
	.text-max-width-medium {
		max-width: 43.75rem;
	}
}

p {
	text-wrap: pretty;
}

.section-rbk {
	position: relative;
	isolation: isolate;
	color: white;
	background: #0A0A0E;
	.video-background {
		position: absolute;
		inset: 0;
		z-index: -1;
		&:after {
			content: "";
			position: absolute;
			inset: 0;
			background: color-mix(in oklch, #1E1C28, #0000 65%);
		}
		img, video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

.custom-select-field {
	position: relative;
	display: inline-block;
	width: 100%;
	select {
		width: 100%;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background: #fff;
		border: none;
		padding: 22px 60px 22px 32px;
		font-weight: 700;
		font-size: 1.1rem;
		color: #111;
		cursor: pointer;
	}
	&:after {
		content: "";
		position: absolute;
		top: 50%;
		right: 32px;
		transform: translateY(-50%);
	
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 12px solid #ccc;
	
		pointer-events: none; /* let clicks pass through to the select */
	}
}



.grid-heading-underlined {
	border-bottom: 1px solid white;
	font-weight: bold;
	padding: .5rem;
	text-align: center;
}
.capabilities-grid {
	display: grid;
	gap: 1rem;
	@media (width > 576px) {
		grid-template-columns: repeat(2, 1fr);
	}
	.capability-item {
		text-align: center;
		--bg-color: color-mix(in oklch, #DE6923, #0000 75%);
		border: 1px solid #DE6923;
		border-radius: 6px;
		background: linear-gradient(to bottom, var(--bg-color) 0%, #0000 62%);
		padding: .75rem .625rem;
		font-weight: 900;
	}
}