@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Variables */
:root {
	--navy: #1b365d;

	--primary-orange: #ff4b26;
	--secondary-orange: #f5735f;
	--tertiary-orange: #ec4a31;

	--primary-gray: #555555;
	--secondary-gray: #f5f5f5;
	--tertiary-gray: #d9d9d9;
	--cuaternary-gray: #333;

	--accent-green: #8cb555;
}

body {
	color: var(--navy);
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
}

h1,
h2,
h3 {
	font-family: Montserrat;
	font-weight: 700;
}
h1 {
	font-size: 2rem;
	line-height: 44px;
	text-align: left;
	.hero-regular {
		font-weight: 400;
	}
	@media (min-width: 768px) {
		font-size: 2.25rem;
	}
}
h2 {
	font-size: 1.75rem; /* 28px */
	line-height: 40px;
	text-align: center;
}
h3 {
	font-size: 18px;
	line-height: 22px;
	text-align: left;
}

h4 {
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	text-align: left;
}
h5 {
	font-size: 16px;
	font-weight: 700;
	line-height: 19px;
	text-align: left;
}

p,
.p2 {
	font-family: Open Sans;
}
p {
	@media (min-width: 768px) {
		font-size: 1.125rem;
	}
}
.p2 {
	font-size: 0.87rem;
}

ul {
	font-family: Open Sans;
	font-size: 1.125rem;
}

.footer a {
	color: var(--secondary-orange);
}
a.unstyled {
	color: unset;
}

/* Buttons */
.btn {
	border-radius: 0.25rem;
	cursor: pointer;
	font-size: 0.87rem;
	padding: 0.31rem 1rem;
	transition: all 0.3s ease-in-out;
}
.cta {
	margin-top: 2rem;
}

.btn-primary,
.btn-secondary {
	background-color: transparent;
	border: 1px solid var(--primary-orange);
	color: var(--primary-orange);

	&:hover {
		color: white;
		transform: scale(1.02);
	}
}

.btn-primary:hover {
	background-color: var(--secondary-orange);
}
.btn-secondary:hover {
	background-color: var(--primary-orange);
}

.btn-tertiary {
	color: white;
	background-color: var(--tertiary-orange);
	&:hover {
		background-color: white;
		color: var(--tertiary-orange);
		border: 1px solid var(--tertiary-orange);
	}
}
.btn-cuaternary {
	color: var(--navy);
	background-color: white;
	border: 1px solid var(--navy);
	&:hover {
		background-color: var(--navy);
		color: white;
		border: 1px solid white;
	}
}
.btn-cuaternary:hover svg path {
	fill: white;
}

.v-separator {
	width: 1.5px; /* Thickness of the line */
	height: 100%; /* Height of the separator */
	background-image: repeating-linear-gradient(
		to bottom,
		/* Vertical orientation */ var(--primary-gray),
		/* Dot color */ var(--primary-gray) 2px,
		/* Dot size */ transparent 1px,
		/* Adjusts space after each dot */ transparent 8px /* Controls distance between dots */
	);
	margin: 0 1.5rem;
}

.h-separator {
	width: 100%; /* Width of the separator */
	height: 1.5px; /* Thickness of the line */
	background-image: repeating-linear-gradient(
		to right,
		var(--primary-gray),
		var(--primary-gray) 2px,
		/* Dot size */ transparent 1px,
		/* Adjusts space after each dot */ transparent 8px /* Controls distance between dots */
	);
	margin: 20px auto;
}

.page_main_section {
	padding: 200px;
}

/* Sections */

/* Hero */

.hero,
.diagram {
	display: flex;
}

.hero {
	align-items: flex-start;
	background: var(--navy);
	flex-direction: column;
	padding-top: 7rem;
}

.hero svg {
	width: 2.5rem;
	height: 2.5rem;
}

.hero main {
	padding: 2rem;
	display: flex;
	flex-direction: column;
}

.hero h1 {
	color: white;
}

.hero figure {
	width: 100%;
}

.hero figure .hero-img {
	background: url(/app/webroot/assets/home/hero-mobile.webp) no-repeat 74% / cover;
	height: 31.81rem;
}

.tcvpb_section_tc.clientlogos-grid .tcvpb_container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 40px;
	align-items: center;
	padding: 20px 200px 50px;
}

@media (min-width: 441px) {
	.hero figure .hero-img {
		background: url(/app/webroot/assets/home/hero-tablet.webp) no-repeat 100% / cover;
	}
}

@media (min-width: 768px) {
	.hero {
		position: relative;
	}

	.hero main {
		position: absolute;
		padding: 3rem;
	}

	.hero figure .hero-img {
		background: url(/app/webroot/assets/home/hero-tablet.webp) no-repeat 100% / cover;
		height: 36.25rem;
	}
}

@media (max-width: 768px) {
	.tcvpb_section_tc.clientlogos-grid .tcvpb_container {
		padding-left: 50px;
		padding-right: 50px;
	}
	.page_main_section {
		padding-left: 50px;
		padding-right: 50px;
	}
}
@media (min-width: 960px) {
	.hero main {
		padding: 8rem;
	}

	.hero figure .hero-img {
		background: url(/app/webroot/assets/home/hero-tablet.webp) no-repeat 100% / cover;
		height: 47.81rem;
	}
}

@media (min-width: 1140px) {
	.hero {
		max-width: 1440px;
		margin: 0 auto;
	}

	.hero figure .hero-img {
		background: url(/app/webroot/assets/home/hero-desktop.webp) no-repeat 100% / cover;
	}
}

/* Diagram */

.diagram {
	align-items: center;
	flex-direction: column;
	padding: 3rem 1.25rem 2rem;
}

.diagram .diagram-title {
	align-items: flex-start;
	padding: 1rem 0;
	display: flex;
	gap: 0 0.5rem;
}

.diagram .diagram-title img:first-of-type {
	height: 40px;
	padding-top: 0.25rem;
	width: 40px;
}

.diagram .diagram-title h2 {
	text-align: left;
}

.diagram img:last-of-type {
	width: 100%;
	height: auto;
	max-width: 1077px;
}

@media (min-width: 960px) {
	.diagram {
		position: relative;
		padding: 6rem 1.25rem;
	}

	.diagram .diagram-title {
		position: absolute;
		top: 3rem;
		margin-left: 12rem;
	}
}

/* Main customers */
.main-customers button[data-action='stop'] {
	display: none;
}

.main-customers {
	background-color: var(--secondary-gray);
	display: flex;
	gap: 1rem;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 1.25rem 1rem;
}

.main-customers p {
	padding-bottom: 1rem;
	text-align: center;
}

.main-customers .slider {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}

.main-customers .slider img {
	padding: 1rem;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.main-customers .slider {
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 4rem 2rem;
		margin: 0 auto;
	}

	.main-customers .slider article {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main-customers .slider article img {
		max-width: 120px;
		max-height: 90px;
		padding: 0.5rem;
	}
}

/* Team */
.team {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;
	padding: 3rem 1.5rem;
}

@media (min-width: 768px) {
	.team {
		flex-direction: row;
	}
}

.team figure {
	width: 100%;
	flex-grow: 1;
	margin: 0;
}

.team figure img {
	width: 100%;
}

.team .team-text {
	gap: 2rem;
}

.team .team-text p {
	padding: 1.25rem 0 2rem;
	text-align: center;
}

@media (min-width: 768px) {
	.team .team-text {
		display: flex;
	}

	.team .team-text h2,
	.team .team-text p {
		width: 100%;
		padding: 3rem 0;
		flex-grow: 1;
		text-align: left;
	}

	.team .team-text h2 {
		min-width: 21.43rem;
	}
}

@media (min-width: 1024px) {
	.team {
		flex-direction: row-reverse;
		flex-wrap: nowrap;
		justify-content: center;
		margin: 0 auto;
		max-width: 1440px;
	}

	.team figure {
		flex-basis: 0;
		flex-grow: 2;
	}

	.team figure img {
		min-width: 25rem;
		max-width: 70rem;
	}

	.team .team-text {
		flex-basis: 0;
		flex-grow: 1;
		padding: 0 4rem;
		align-self: center;
		flex-direction: column;
		justify-content: flex-start;
	}

	.team .team-text h2,
	.team .team-text p {
		padding: 0;
	}
}

/* Discover */
.discover {
	width: 100%;
	background-color: var(--secondary-grey);
	padding: 1.5rem;
}

.discover img {
	margin: 0 auto;
	width: 100%;
	max-width: 56.81rem;
}

.discover .discover-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.discover .discover-text p {
	text-align: center;
}

.discover .cta {
	display: flex;
	justify-content: center;
	margin: 1rem auto;
}

.discover .columns {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 2rem;
}

.discover .columns article {
	gap: 0.5rem;
}

.discover .columns .title {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 190px;
}

@media (min-width: 768px) {
	.discover .columns .title {
		flex-direction: column;
		align-items: flex-start;
	}

	.discover .columns {
		display: grid;
		gap: 3rem 2rem;
		position: relative;
		grid-template-columns: repeat(2, 325px);
		justify-content: center;
		margin: 0 auto;
		padding-bottom: 3rem;
	}

	.discover .columns .h-separator {
		display: none;
	}

	.discover .columns::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		z-index: 1;
		width: 100%;
		height: 1.5px;
		background-image: repeating-linear-gradient(
			to right,
			var(--primary-gray),
			var(--primary-gray) 2px,
			transparent 1px,
			transparent 8px
		);
	}

	.discover .columns article {
		padding: 1rem;
	}

	.discover .columns article::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		z-index: 1;
		width: 2px;
		background-image: linear-gradient(to bottom, transparent 0%, white 49%, white 51%, transparent 100%),
			repeating-linear-gradient(to bottom, var(--primary-gray), var(--primary-gray) 2px, transparent 2px, transparent 8px);
	}
}

@media (min-width: 1440px) {
	.discover .columns {
		display: flex;
		gap: 0;
		flex-direction: row;
		margin: 0 auto;
		max-width: 71.12rem;
		padding: 2rem 0;
	}

	.discover .columns .h-separator {
		display: none;
	}

	.discover .columns .v-separator {
		display: block;
		height: 184px;
	}

	.discover .columns::after {
		content: unset;
	}

	.discover .columns article::before {
		content: unset;
	}
}

.discover .columns article {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

@media (min-width: 768px) {
	.discover .columns article {
		align-items: flex-start;
	}
}

/* Empowering */
.empowering {
	background-color: var(--navy);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 1.5rem 3rem;
	width: 100%;
}

.empowering h2,
.empowering h3,
.empowering p {
	color: white;
	text-align: center;
}

.empowering h2 {
	padding: 2rem 0;
}

.empowering .columns {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.empowering .columns article {
	gap: 1rem;
	align-items: center;
	border-radius: 0.62rem;
	border: 1px solid #6787b7;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.75rem;
}

.empowering .columns article .empowering-text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 768px) {
	.empowering .columns {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-content: center;
		gap: 2rem;
	}

	.empowering .columns svg {
		width: 3rem;
		height: 3rem;
	}
}

@media (min-width: 1440px) {
	.empowering .columns {
		padding: 2rem 0;
		margin: 0 auto;
		max-width: 1440px;
		grid-template-columns: repeat(4, 250px);
	}
}

/* Leadership */
.leadership {
	background-color: var(--secondary-grey);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 4rem 3rem;
	width: 100%;
}

.leadership h2 {
	font-size: 1.5rem;
	text-align: left;
	line-height: 32px;
}

.leadership .highlight {
	color: var(--accent-green);
}

.leadership .columns ul > li {
	list-style: disc;
	margin-left: 2rem;
	padding-left: 0.5rem;
}

.leadership .columns h4 {
	padding: 1rem;
}

.leadership img {
	width: 100%;
	max-width: 54rem;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.leadership {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
		justify-content: center;
	}

	.leadership h2 {
		font-size: 1.25rem;
	}

	.leadership .title {
		grid-column: 1;
		grid-row: 1;
	}

	.leadership .bullets {
		grid-column: 2;
		grid-row: 1;
	}

	.leadership .image {
		grid-column: 1 / span 2;
	}
}

@media (min-width: 1440px) {
	.leadership {
		margin: 0 auto;
		max-width: 1440px;
		display: grid;
		gap: 0;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'image title'
			'image bullets';
	}

	.leadership ul {
		padding: 1rem 0;
	}

	.leadership .image {
		grid-area: image;
		align-self: start;
	}

	.leadership h2 {
		font-size: 1.75rem;
	}

	.leadership .title {
		align-self: start;
		grid-area: title;
		max-width: 28rem;
		padding: 3rem 1rem 0 2rem;
	}

	.leadership .columns {
		grid-area: bullets;
		padding-left: 1rem;
	}
}

/* Enterprise */
.enterprise {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	margin: 2rem 1.5rem 1rem;
	word-break: break-word;
	width: fit-content;
}

.enterprise h2 {
	max-width: 300px;
	margin: 0 auto;
}

.enterprise p {
	text-align: center;
}

.enterprise .cta {
	margin: 1rem auto;
}

@media (min-width: 768px) {
	.enterprise h2 {
		max-width: unset;
		margin: unset;
	}

	.enterprise {
		margin-left: 6.43rem;
		margin-right: 6.43rem;
	}
}

@media (min-width: 1440px) {
	.enterprise {
		margin: 3rem auto;
		max-width: 62rem;
	}
}

.certifications {
	display: flex;
	flex-direction: column;
	padding: 1rem 1.5rem 3rem;
	gap: 1.5rem;
}

.certifications article {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.certifications li {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.5rem;
}

.certifications .icon-container {
	flex-shrink: 0;
	width: 20px;
	display: flex;
	align-items: center;
	padding-bottom: 0.25rem;
}

.certifications svg {
	width: 100%;
	height: auto;
}

.certifications img {
	margin: 0 auto;
	width: 210px;
}

@media (min-width: 768px) {
	.certifications {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		margin: 0 auto;
		max-width: 52.62rem;
		gap: 1rem 3rem;
	}

	.certifications .iso-logo {
		grid-column: 3 / 4;
		grid-row: 1 / span 3;
	}

	.certifications article:nth-child(2) {
		grid-column: 1 / 2;
		grid-row: 2 / span 3;
	}

	.certifications article:nth-child(3) {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}

	.certifications article:nth-child(4) {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}

	.certifications article:nth-child(5) {
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}
}

@media (min-width: 1440px) {
	.certifications {
		max-width: 62rem;
	}
}

.footer {
	background-color: var(--navy);
}

.footer .wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	padding: 3rem 1.25rem;
}

.footer .wrapper article {
	display: flex;
	padding: 0.5rem 0;
	flex-direction: column;
	gap: 0.5rem;
}

.footer h5,
.footer p {
	color: white;
	text-align: center;
}

.footer .h-separator {
	background-image: repeating-linear-gradient(to right, white, white 1px, transparent 1px, transparent 8px);
}

.footer .dynata-logo {
	display: flex;
	justify-content: center;
}

@media (min-width: 768px) {
	.footer .wrapper {
		max-width: 57.625rem;
	}

	.footer .wrapper article:nth-of-type(2) {
		flex-direction: row;
		justify-content: center;
	}

	.footer .wrapper article:nth-of-type(2) p {
		text-align: left;
		max-width: 33.68rem;
	}
}