:root {
	--text-color-dark: #1b1b1b;
	--text-color-grey: #5c5c5c;
	--text-color-dark-green: #0d3a38;
	--text-color-disabled: #c1c1c1;
	--text-color-light: white;
	--theme-dark: #1b1b1b;
	--theme-dark-grey: #5c5c5c;
	--theme-dark-green: #0d3a38;
	--theme-breakthrough: #00fdcf;
	--theme-light-green: #d6f5f0;
	--theme-light-grey: #f2f2f2;
	--theme-white-grey: #eeeeee;

	--navbar-height: 3.5rem;
}

body {
	font-family: 'brown-light', Helvetica, Arial, sans-serif;
	color: var(--text-color-dark);
}

dl, ol, ul {
	padding: 0;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6 {
	font-family: 'brown-regular', Helvetica, Arial, sans-serif;
}

p {}

strong,
.strong {
	font-family: 'brown-bold', Helvetica, Arial, sans-serif;
}

a {
	text-decoration: none;
	color: inherit;
}

button {
	-webkit-appearance: button;
	border: none;
	background-color: transparent;
	background-image: none;
}

.rounded {
	border-radius: 1rem !important;
}

.rounded-full {
	border-radius: 9999px;
}

.bg-dark-green {
	background-color: var(--theme-dark-green);
}

.bg-breakthrough {
	background-color: var(--theme-breakthrough);
}

.bg-light-green {
	background-color: var(--theme-light-green);
}

.bg-light-grey {
	background-color: var(--theme-light-grey);
}

.bg-white-grey {
	background-color: var(--theme-white-grey);
}

.bg-white {
	background-color: white;
}

.bg-light,
.bg-grey-white {
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 50%) !important;
}

.bg-dark-grey {
	background-color: var(--theme-dark-grey);
}

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

.bg-dark-overlay {
	background-color: rgba(27,27,27, 0.5) !important;
}

/* https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27  */
.row.display-flex {
	display: flex;
	flex-wrap: wrap;
}
	.row.display-flex > [class*='col-'] {
		display: flex;
		flex-direction: column;
	}

.preloader .loader .ytp-spinner-circle {
	/* spinner color */
	border-color: #e9ecef;
}

.backdrop {
	overflow-y: hidden !important;
	background: rgba(0,0,0,.4);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	overflow-x: hidden;
	transition: background-color .1s;
	z-index: 1060;
}

.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	-webkit-animation:spin .7s linear infinite;
	-moz-animation:spin .7s linear infinite;
	animation:spin .7s linear infinite;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("../images/spinner-white.png");
}
	@-moz-keyframes spin {
		100% { -moz-transform: rotate(360deg); }
	}

	@-webkit-keyframes spin {
		100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin { 
		100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
	}

/* main button */
.main-btn {
	--btn-pt: 17px;
	--btn-pe: 40px;
	--btn-pb: 15px;
	--btn-ps: 40px;
	--btn-border: 3px;
	--btn-border-hover: 4px;
}

.main-btn {
	font-family: 'brown-bold', Helvetica, Arial, sans-serif;
	font-size: 0.875em;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: var(--btn-pt) var(--btn-pe) var(--btn-pb) var(--btn-ps);
	display: inline-block;
	white-space: nowrap;
	vertical-align: middle;
	position: relative;
	cursor: pointer;
	z-index: 5;
	border: none;
	color: var(--text-color-dark);
	border-radius: 9999px;
	background-color: var(--theme-breakthrough);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
	.main-btn:focus-visible {
		outline: none !important;
	}

	.main-btn:hover {
		opacity: .9;
		box-shadow: 0 1px 3px 0 #00000026, 0 1px 2px 0 #0003;
	}

.main-btn.disabled {
	color: white;
	background-color: var(--theme-white-grey);
	cursor: not-allowed;
}
	.main-btn.disabled:hover {
		color: white;
		background-color: var(--theme-white-grey);
		opacity: 1;
		box-shadow: none;
	}

.btn-dark-green {
	color: white;
	background-color: var(--theme-dark-green);
}

.btn-white {
	color: var(--text-color-dark);
	background-color: white;
}

.btn-grey-white {
	color: var(--text-color-dark);
	background-color: var(--theme-white-grey);
}

.btn-dark {
	color: white;
	background-color: var(--theme-dark);
}

.btn-dark-grey {
	color: white;
	background-color: var(--theme-dark-grey);
}

.btn-outline-dark {
	color: var(--theme-dark);
	border: var(--btn-border) solid var(--theme-dark);
	padding: calc(var(--btn-pt) - var(--btn-border)) calc(var(--btn-pe) - var(--btn-border)) calc(var(--btn-pb) - var(--btn-border)) calc(var(--btn-ps) - var(--btn-border));
	background-color: transparent;
}
	.btn-outline-dark:hover {
		border-width: var(--btn-border-hover);
		padding: calc(var(--btn-pt) - var(--btn-border-hover)) calc(var(--btn-pe) - var(--btn-border-hover)) calc(var(--btn-pb) - var(--btn-border-hover)) calc(var(--btn-ps) - var(--btn-border-hover));
		box-shadow: none;
	}

.btn-outline-white {
	color: white;
	border: var(--btn-border) solid white;
	padding: calc(var(--btn-pt) - var(--btn-border)) calc(var(--btn-pe) - var(--btn-border)) calc(var(--btn-pb) - var(--btn-border)) calc(var(--btn-ps) - var(--btn-border));
	background-color: transparent;
}
	.btn-outline-white:hover {
		border-width: var(--btn-border-hover);
		padding: calc(var(--btn-pt) - var(--btn-border-hover)) calc(var(--btn-pe) - var(--btn-border-hover)) calc(var(--btn-pb) - var(--btn-border-hover)) calc(var(--btn-ps) - var(--btn-border-hover));
		box-shadow: none;
	}

.btn-static {
	cursor: default !important;
}
	.btn-static:hover {
		opacity: 1 !important;
		color: none !important;
		box-shadow: none !important;
	}

/* cta anchor */
.cta-anchor {
	font-family: 'brown-regular', Helvetica, Arial, sans-serif;
	color: var(--text-color-dark);
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	justify-content: center;
	letter-spacing: .02em;
	line-height: 18px;
	margin-right: 12px;
	padding: 0;
	text-align: start;
	text-transform: uppercase;
	transition-duration: 150ms;
	transition-property: background-color, color, border;
	transition-timing-function: linear;
}
	.cta-anchor:hover {
		text-decoration: underline;
	}

.cta-anchor + .cta-anchor {
	margin-top: 12px;
}

.cta-icon-page-link > span {
	display: inline;
	padding-right: .5em;
}

/* bootstrap form elements v.5.3 */
.bg-white .form-control,
.bg-white .form-select {
	background-color: white;
}

.bg-light .form-control, .bg-light .form-select,
.bg-dark .form-control, .bg-dark .form-select {
	background-color: white;
}

.form-control,
.form-select {
	border: none !important;
	border-radius: 0 !important;
	color: #697172 !important;
}
	.form-control~label::after,
	.form-select~label::after {
		background-color: transparent !important;
	}

.form-check {
	margin-bottom: 10px !important;
}
	.form-check:last-child {
		margin-bottom: 0 !important;
	}

.form-control.is-invalid,
.form-select.is-invalid {
	border: 1px solid var(--bs-form-invalid-border-color) !important;
}

/* start: LP Theme */

/* Hero Section */
.hero {
	color: white;
}

.hero-content {
	display: flex;
	align-items: center;
	position: relative;
	min-height: 550px;
	overflow: hidden;
}

.hero-content.breakthrough {
	border-width: 0 0 12px 0;
	border-style: solid;
	border-color: #00fdcf;
} 

.hero-body {
	padding: 3rem;
	z-index: 2;
}

.hero-body h1 {
	font-family: 'brown-light', Helvetica, Arial, sans-serif;
}

.hero-body h2 {
	font-family: 'brown-regular', Helvetica, Arial, sans-serif;
}

.hero-image {
	height: 100%;
	min-height: 550px;
	overflow: hidden;
	background-size: cover;
	background-position: 80% center;
	background-repeat: no-repeat;
	background-image: url('../images/logitech-headset-thc-lp-01.jpg');
}

.main-logo {
	margin-bottom: 3rem;
	display: block;
}

.main-logo img {
	width: auto;
	height: 38px;
}

/* Intro Section */
.intro {
	padding: 5rem 0;
}

/* Renewal Section */
.renewal {
	padding: 4rem 0;
	text-align: center;
}

/* Features Section */
.features {
}

.features-image {
	height: 100%;
	min-height: 1200px;
	overflow: hidden;
	background-size: cover;
	background-position: 35% center;
	background-repeat: no-repeat;
	background-image: url('../images/logitech-headset-thc-lp-02.jpg');
}

.feature-list {
	padding: 2.5rem 3.5rem 2rem;
}

.feature-item {
	display: flex;
	margin-bottom: 1rem;
}

.feature-item:last-child {
	margin-bottom: 0;
}

.feature-icon {
	font-size: 1.5rem;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	margin-right: 1.2rem;
	color: var(--theme-dark);
	background-color: var(--theme-breakthrough);
}

.certificated-logos img {
	margin-right: 15px;
	object-fit: contain;
}

.partner-microsoft-teams {
	height: 29px;
}

.partner-zoom {
	height: 40px;
}

.partner-google-meet {
	height: 35px;
}

/* Cards Section */
.cards {
	padding: 4rem 0;
}

.user-card {
	height: 100%;
	border: none;
	border-radius: 0;
	transition: transform 0.3s ease;
}

.user-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.user-card img {
	height: 250px;
	object-fit: cover;
	border-radius: 0;
}

.card-body {
	padding: 1.5rem 2rem 2rem;
}

.card-title {
	margin-bottom: 1rem;
}

.card-text {
}

.card-list {
	padding-left: 1rem;
}

.card-list li {
	margin-bottom: 0.5rem;
}

/* CTA Learn More Section */
.cta-learn-more {
	color: white;
	padding: 4rem 0;
	text-align: center;
}

/* Resources Section */
.resources {
	padding: 3rem 0 2rem;
}

.resource-item {
	text-align: center;
	margin-bottom: 1rem;
}

.resource-img {
	width: 100%;
	height: 265px;
	object-fit: cover;
	margin-bottom: 1.5rem;
}

.resource-link {
	color: black;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.9rem;
	border-bottom: 2px solid transparent;
	transition: border-color 0.3s;
}

.resource-link:hover {
	border-bottom: 2px solid black;
}

/* CTA Contact Sales Section */
.cta-contact-sales {
	color: white;
	padding: 4rem 0;
	text-align: center;
}

/* Footer */
footer {
	padding: 1.5rem 0;
	text-align: center;
}

.footer-note {
	font-size: 0.875rem;
	margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.hero {
		flex-direction: column;
	}

	.hero-content {
		min-height: auto;
	}
	
	.hero-image {
		width: 100%;
		height: 300px;
		min-height: 300px;
	}

	.features-image {
		width: 100%;
		height: 100px;
		min-height: 300px;
	}

	.feature-list {
		margin-top: 2rem;
	}

	.feature-main-img {
		position: static;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.hero-content.breakthrough {
		border-width: 0 12px 0 0;
		border-style: solid;
		border-color: #00fdcf;
	} 

	.hero-body {
		padding: 4rem 10rem 4rem 5rem;
	}

	.hero-body h1 {
		font-size: 3.5rem;
	}

	.hero-body h2 {
		font-size: 2rem;
	}
}
/* end: LP Theme */

/* footer  */
.footer-logo {
}
	.footer-logo img.logo {
		height: 36px;
	}

.legal {
	font-family: 'brown-light', Helvetica, Arial, sans-serif;
	font-size: 0.875em;
}
	.legal a {
		font-family: 'brown-regular', Helvetica, Arial, sans-serif;
		text-decoration: underline;
		color: inherit;
	}

/* back to top */
.back-to-top {
	font-size: 20px;
	text-align: center;
	line-height: 45px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 45px;
	height: 45px;
	opacity: 0;
	color: var(--text-color-dark);
	border-radius: 45px;
	background-color: var(--theme-breakthrough);
	z-index: 99;
	transition: all 150ms ease-out 0s;
}
	.back-to-top:hover {
		opacity: .5;
	}

/* modal */
.modal-header,
.modal-footer {
	border: none;
}