.navbar {
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	text-transform: uppercase;
	border-radius: 0px;
	background-color: var(--default-navbar-background-color);
	color: var(--default-navbar-text-color, #FFFFFF);
	background: var(--navbar-background);
}

.navbar a {
	float: left;
	font-size: 16px;
	color: var(--default-navbar-text-color, #FFFFFF);
	text-align: center;
	padding: 10px 16px 10px 16px;
	text-decoration: none;
	border-right: 0px solid var(--default-border-color);
	font-weight: 600;
	border-bottom: 4px double transparent; 
	border-bottom: none;
}

.navbar .pull-right {
	margin-left: auto;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
	font-size: 16px;  
	border: none;
	outline: none;
	color: var(--default-navbar-text-color, #FFFFFF);
	padding: 10px 16px 10px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
	border-right: 0px solid var(--default-border-color);
	font-weight: 600;
	text-transform: uppercase;
}

.dropdown-content-right {
	right: MAX(0px, CALC(50VW - 604px));
}


.navbar a.user-guide:hover,
.navbar a.highlighted:hover,
.navbar a:hover, 
.dropdown:hover,
.dropbtn {
  background-color: red;
  color: #FFFF00;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 240px;
  box-shadow: var(--default-box-shadow);
  z-index: 1;
  background-color: var(--default-navbar-background-color, #006EB1);
  color: var(--default-navbar-text-color, #FFFFFF);
  z-index: 50;
  box-shadow: var(--default-box-shadow);
}

.dropdown-content a {
	float: none;
	color: black;
	text-decoration: none;
	display: block;
	text-align: left;
	border-bottom: 1px solid var(--default-border-color);
	border-right: none;
	color: var(--default-navbar-text-color, #FFFFFF);
	padding: 10px 10px 10px 36px;
	background-repeat: no-repeat;
	background-position: 6px center;
	background-image: var(--default-darkmode-list-icon);
	background-size: 16px 16px;
}

.dropdown-content a.highlighted {
	color: var(--highlighted-navbar-text-color, #FFFFFF);
	background-color: var(--highlighted-navbar-background-color, #507ac3);
}

.dropdown-content a.user-guide {
	background-image: var(--default-darkmode-user-guide-icon);
}

.dropdown-content a:hover {
	
}

.navbar > a.selected, .dropbtn.selected {
	border-bottom: 4px double var(--default-border-color);
	
	background-size: 16px 16px;
	background-position: 6px center;
	padding-left: 36px;
	border-bottom: none;
}

.dropdown-content a.selected {
	background-size: 16px 16px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.wrapper-footer .navbar {
	justify-content: center;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--default-heading-font);
}

h1 {
	color: var(--default-heading-color);
	font-family: var(--default-label-font);
	text-align: left;
	text-decoration: none;
	text-decoration-color: var(--default-heading-underline-color);
	text-underline-offset: 3px;
	text-decoration-style: double;
	margin-bottom: 30px;
	font-size: 40px;
	line-height: 125%;
}

h1:first-of-type {
	margin-top: 10px;
}

.main-heading {
	padding: 30px;
	background-color: var(--default-hero-background-color);
	color: var(--default-hero-text-color);
}

.main-heading h1 {
	font-size: 40px;
	font-family: var(--default-heading-font);
	font-weight: normal;
	text-align: left;
	color: var(--default-hero-text-color);
}

.heading {
	max-width: 60%;
}


p {
	font-size: var(--default-text-font-size);
}

.small, .small p {
	font-size: 15px;
}

.text-justify {
	text-align: justify;
}

.form-control {
	display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.05rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    height: calc(1.8125rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

label {
	font-size: 14px;
	background-color: var(--label-background-color);
	color: var(--label-text-color);
	padding: 0;
	border-radius: 2px;
	font-weight: bold;
	font-family: Verdana;
	margin: 1px 4px 10px 1px;
	box-shadow: none;
	border: none;
	display: block;
}

input, textarea {
	border: 1px solid var(--input-border-color);
	width: 100%;
	width: -webkit-fill-available;
	display: block;
	resize: vertical;
	padding: 5px;
	font-family: var(--default-input-font);
}

textarea {
	min-height: 200px;
}

.input-group textarea {
	width: CALC(100% - 12px);
	background-color: var(--input-background-color);
	color: var(--input-text-color);
}

input:focus, textarea:focus {
	outline: 1px solid var(--default-border-color);
}

input.form-control,
textarea.form-control {
	width: 100%;
	width: -webkit-fill-available;
}


.text-right {
	text-align: right;
}

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

* {
	line-height: 150%;
}

.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

.box h3 {
	color: var(--default-text-color);
}

.box h4 {
	text-align: center;
	color: var(--default-text-color);
	margin-top: 20px;
}

.container-wrap {
	background-color: transparent
}

.container-wrap-hero {
	background: linear-gradient(135deg, rgba(255, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(255, 28, 20, 1) 100%), 
	url(/static/images/stock/waves-7111749_1920.jpg);
    background-position: 0 0;
}

.container-wrap-hero p, .container-wrap-hero h2, .container-wrap-hero h3, .container-wrap-hero h4, .container-wrap-hero li {
	color: #FFFFFF;
}
.container-wrap-hero a {
	color: #FFFFFF;
}

.container-wrap-hero-blue {
	background: linear-gradient(135deg, rgba(173, 216, 230, 0.9) 0%, rgba(135, 206, 250, 0.8) 50%, rgba(176, 224, 230, 1) 100%), 
	url(/static/images/stock/waves-7111749_1920.jpg);
    background-position: 0 0;
}

.container-wrap-hero-blue {
	background: linear-gradient(135deg, rgba(180, 180, 255, 0.1) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 128, 255, 1) 100%), 
	url(/static/images/stock/connection-4885313_1920.jpg);
    background-position: 0 0;
}

.container-wrap-hero-black {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(128, 128, 128, 1) 100%), 
	url(/static/images/stock/connection-4885313_1920.jpg);
    background-position: 0 0;
}
.container-wrap-feature h1:first-of-type {
	text-align: center;
	margin-top: 30px;
}

.container-wrap-hero h1, .container-wrap-hero h3 {
	color: #FFFFFF;
}

.container-wrap-hero-blue h1, .container-wrap-hero-blue h3, .container-wrap-hero-blue p {
	color: #FFFFFF;
}

.container-wrap-hero-black h1, .container-wrap-hero-black h3, .container-wrap-hero-black p {
	color: #FFFFFF;
}

.container-wrap-even {
	background: var(--ivory-tusk);
}

.container-wrap-even {
	background: var(--marble-white);
}

.container-wrap-feature {
	background: var(--muted-blue);
}



.p-10 {
	padding: 10px !important;
}

.p-20 {
	padding: 20px !important;
}

.p-30 {
	padding: 30px !important;
}

.p-0 {
	padding: 0px !important;
}

.pt-0 {
	padding-top: 0px !important;
}

.pb-0 {
	padding-bottom: 0px !important;
}

.pl-10 {
	padding-left: 10px !important;
}

.pr-10 {
	padding-right: 10px !important;
}

.pl-20 {
	padding-left: 20px !important;
}

.pr-20 {
	padding-right: 20px !important;
}

.pt-10 {
	padding-top: 10px !important;
}

.pt-20 {
	padding-top: 20px !important;
}

.pt-30 {
	padding-top: 30px !important;
}

.pt-40 {
	padding-top: 40px !important;
}

.pt-80 {
	padding-top: 80px !important;
}

.pb-20 {
	padding-bottom: 20px !important;
}

.pb-30 {
	padding-bottom: 30px !important;
}

.pb-10 {
	padding-bottom: 10px !important;
}

.pb-80 {
	padding-bottom: 80px !important;
}

.m-0 {
	margin: 0px !important;
}

.m-20 {
	margin: 20px !important;
}

.mr-0 {
	margin-right: 0px !important;
}

.mb-10 {
	margin-bottom: 10px !important;
}

.mt-10 {
	margin-top: 10px !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-100 {
	margin-top: 100px !important;
}

.mt-0 {
	margin-top: 0px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mb-39 {
	margin-bottom: 39px !important;
}
.mb-40 {
	margin-bottom: 40px !important;
}


.mb-0 {
	margin-bottom: 0px !important;
}

.nb {
	border: none !important;
	box-shadow: none !important;
}

.img-96 {
	height:96px !important;
	width: 96px !important; 
}

.img-256 {
	height:256px !important;
	width: 256px !important; 
}

.d-block {
	display: block;
}

.no-ul {
	text-decoration: none;
}

.font-20 {
	font-size: 20px;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.flex-gap-90 {
	gap: 90px !important;
}

code, kbd {
	background-color: var(--default-highlight-background-color);
	color: var(--default-highlight-text-color);
	padding: 0 8px;
	border-radius: 5px;
}

kbd, code {
	box-shadow: var(--subtle-box-shadow);
}

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

.small {
	font-size: 95%;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid var(--default-border-color);
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

body {
	padding: 0;
	margin: 0;
	line-height: 150%;
	font-family: var(--default-body-font);
	font-weight: normal;
	background-color: var(--default-body-background-color);
	color: var(--default-body-text-color);
	overflow: auto;
}

.container {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-main-container-width);
	padding: 0 10px;
	overflow: visible;
}

.header-container {
	background: var(--deep-space);
}

.footer-container {
	background: var(--deep-space);
}

.container-odd {
	background: var(--ivory-tusk);
}

.container-even {
	background: var(--muted-blue);
}

#header-wrapper {
	background-color: var(--default-header-background-color);
	margin-bottom: 0px;
	position: sticky;
	top: 0;
	z-index: 100;
}

header {
	margin-bottom: 0px;
}

header, footer {
	display: block;
	max-width: var(--max-main-container-width);
	margin-left: auto;
	margin-right:auto;
	font-family: var(--default-footer-font);
	padding: 0 5px;
}

#footer-wrapper, footer a {
	background-color: var(--default-footer-background-color);
	color: var(--default-footer-text-color);
}

footer a {
	text-decoration: underline;
	text-decoration-color: var(--default-footer-text-color);
	text-underline-offset: 3px;
	text-decoration-style: dotted;
}

footer a:hover {
	text-decoration: underline;
	text-decoration-style: single;
	text-underline-offset: 2px;
}

footer {
	margin-top: 20px;
	padding: 50px 30px;
}

#footer-wrapper {
	background-color: var(--default-footer-background-color);
}

.row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.row > div {
	flex: 1 1 220px;
	padding: 10px 0;
}


footer h3 {
	text-align: left;
	padding: 0 0 0 10px;
	text-decoration: underline;
	text-decoration-color: var(--default-heading-underline-color);
	text-underline-offset: 4px;
	text-decoration-style: double;
}

.thumbnail {
	display: block;
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}

.box-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 80px 10px;
	gap: 30px;
}

.box-container-col {
	display: flex;
	flex-direction: column;
	
}

.box-container .box-smaller {
	max-width: 300px;
	min-width: 300px;
}


.box-container-hero .box {
	max-width: none;
	min-width: 480px;
}

.box-container-hero .box-smaller {
	max-width: 300px;
	min-width: 300px;
}

.h2-sales {
	text-align: center; 
	font-weight:normal; 
	font-size: 30px;
}

.h3-sales {
	text-align: center; 
}

.a-c{
	text-align: center;
}

.a-j{
	text-align: justify;
}

.content-center{
	justify-content: center;
    align-items: center;
}

.f-15{
	font-size: 15px;
}

.f-30{
	font-size: 30px;
}

.weight-normal {
	font-weight: normal;
}

.box {
	flex: 1 1 250px;
	padding: 0;
	background: var(--mystic-ocean-light);
	box-shadow: var(--subtle-box-shadow);
}

.box > a,
.box > p > a {
	box-sizing: border-box;
}

.box-info {
	flex: 1 1 200px;
	padding: 20px;
}	

.box-info img {
	max-width: 120px;
	height: auto;
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.box img {
	width:100%;
	height:auto;
	justify-content: center;
    align-items: center;
	margin-bottom: 40px;
}

.box-featured {
	background-color: #FFDAB9;
	box-shadow: 0.5px 0.5px 0.85px 0.5px rgba(200,200,200,0.4), -0.5px -0.5px 0.85px 0.5px rgba(200,200,200,0.3)
}


.box-plain {
	background: none !important;
	box-shadow: none !important;
	border: 1px solid var(--default-border-color);
	border-radius: 4px;
}

.box-plain-no-border {
	background: none !important;
	box-shadow: none !important;
	border: none !important;
}


.box-container-hero .box {
	background: none;
	box-shadow: none;
}

.box-hero {
	padding: 0;
}

.box.card > *:first-child {
	text-align: center;
	margin-top: 10px;
}

.box.card > *:not(:first-child):not(:last-child) {
	padding: 10px 25px;
}

.box ul.list li {
	background-color: transparent;
	user-select: text;
}

.box a.btn {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.box-info h3 {
	text-align: center;
}

.box-feature h3:first-of-type {
	font-size: 32px;
	text-transform: uppercase;
	color: var(--default-heading-color);
	text-decoration: none;
	margin-bottom: 30px;
	font-weight: bold;
	font-family: var(--default-label-font);
	border-bottom: 2px solid var(--default-border-color);
}

.box-feature ul.list-with-icons li {
	background-position: 0px 8px;
}

.box-valign {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.box-valign > div > h3:first-of-type {
	margin-top:0;
	text-align: center;
	
	background-color: var(--default-heading-background-color);
	color: var(--default-heading-color);
    font-family: var(--default-heading-font);
	border-radius: 3px;
	box-shadow: var(--subtle-box-shadow);
}

.highlight span {
	display: inline-block;
	background-color: #E0F7FA; 
	padding: 5px 10px;
	margin-bottom: 5px; 
	border-radius: 5px;
	line-height: 1.6;
}

[data-theme="dark"] {
	.highlight span {
		background-color: #202535; 
		color: #FFFFFF;
	}
}

 .img-group {
    display: flex;
    gap: 10px; /* Adjust the space between the buttons */
	width: 96px;
	height: 96 px;
	margin-top : 20px;
  }

.img-center{
	display: flex; 
	justify-content: center;
}

.blur-3 {
	backdrop-filter: blur(3px);
}

.highlight-box {
	background-color:  var(--default-highlight-background-color);
	color: var(--default-highlight-text-color);
	border-radius: 2px;
	padding: 20px 20px 10px 20px;
	margin: 40px 0;
	text-align: center;
	font-family: var(--default-label-font);
}

.highlight-box > * {
	color: var(--default-highlight-text-color) !important;
}

.highlight-box .btn.text-center {
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
}

.highlight-box > h3:first-of-type {
	margin-top: 5px;
}

.custom-link {
    text-decoration: none;
}

#image-popup-modal {
    position: fixed;
    overflow-x: hidden;
    overflow-y: hidden;
    display: none;
    right: 10px;
    left: 10px;
    top: 10px;
    height: auto;
    width: 500px;
    z-index: 1050;
    box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
    background-color: rgba(255, 255, 255, .95);
    border: 0px solid rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}


table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 40px;
	margin-top: 40px;
}

table, th, td {
  border: 1px solid var(--default-border-color);
  padding: 10px;
  
}

.comparison-table > td {
	box-sizing: border-box;
}

.comparison-table {
    table-layout: fixed;
    width: 100%;
}

.comparison-table th:not(:first-child) {
    width: 20%;
}

table.comparison-table td:not(:first-child),
table.comparison-table th:not(:first-child) {
	text-align: center;
}

.comparison-table .product-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.comparison-table .product-logo {
  max-width: 90px; /* or use % for fluid scaling */
  margin: 0 auto;
}

.comparison-table .product-logo > span:last-child {
	width:auto;
}

.comparison-table td {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .box-container .box-smaller {
		max-width: none;
		min-width: none;
	}
}

.btn.wmd-desktop-basic {
	background-color: #1A1F33;
	color: #FFFFFF;
	border-radius: 4px;
	padding: 5px 2px;
}

.btn.wmd-desktop-business {
	background-color: #4C3A51;
	color: #FFFFFF;
	border-radius: 4px;
	padding: 5px 2px;
}

.btn.wmd-desktop-enterprise {
	background-color: #2F4F4F;
	color: #FFFFFF;
	border-radius: 4px;
	padding: 5px 2px;
}

.btn.wmdsed-basic {
	background-color: #2C3E50;
	color: #FFFFFF;
}



.product-logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	border: none;
}

.product-logo img {
    width: 200px;
    margin: 0;
    display: block;
}

.product-logo > span {
	display: block;
	text-align: center;
	background-color: #000000;
    color: #FFFFFF;
    margin: 0;
    font-size: 14px;
	width: 200px;
	border-radius: 1px;
	padding: 0px 2px;
	text-transform: uppercase;
	font-family: var(--default-subheading-font);
	font-weight: bold;
	box-sizing: border-box;
}

.product-logo[class*="wmd-sed"] > span {
	border-radius: 0px;
	padding: 0px 2px;
	box-shadow: var(--subtle-box-shadow);
}

:root {
    --wmd-sed-basic-background-color: #2C3E50;
    --wmd-sed-basic-text-color: #FFFFFF;

    --wmd-sed-standard-background-color: #D35400;
    --wmd-sed-standard-text-color: #FFFFFF;

    --wmd-sed-professional-background-color: #8E44AD;
    --wmd-sed-professional-text-color: #FFFFFF;

    --wmd-sed-enterprise-support-background-color: #B58900;
    --wmd-sed-enterprise-support-text-color: #FFFFFF;

    --wmd-desktop-basic-background-color: #242B42;
    --wmd-desktop-basic-text-color: #FFFFFF;

    --wmd-desktop-business-background-color: #5A3D5D;
    --wmd-desktop-business-text-color: #FFFFFF;

    --wmd-desktop-enterprise-background-color: #295047;
    --wmd-desktop-enterprise-text-color: #FFFFFF;
}

:root {
    --wmd-sed-basic-panel-bg-color: #FAFBFD;
    --wmd-sed-basic-panel-text-color: #000000;

    --wmd-sed-standard-panel-bg-color: #FEF9F6;
    --wmd-sed-standard-panel-text-color: #000000;

    --wmd-sed-professional-panel-bg-color: #FCF8FE;
    --wmd-sed-professional-panel-text-color: #000000;

    --wmd-sed-enterprise-support-panel-bg-color: #FEFBF0;
    --wmd-sed-enterprise-support-panel-text-color: #000000;

    --wmd-desktop-basic-panel-bg-color: #F1F3F8;
    --wmd-desktop-basic-panel-text-color: #000000;

    --wmd-desktop-business-panel-bg-color: #F6F1F6;
    --wmd-desktop-business-panel-text-color: #000000;

    --wmd-desktop-enterprise-panel-bg-color: #F1F8F6;
    --wmd-desktop-enterprise-panel-text-color: #000000;
}


.btn.wmdsed-basic,
.product-logo.wmd-sed-basic > span {
    background-color: var(--wmd-sed-basic-background-color);
    color: var(--wmd-sed-basic-text-color);
}

.btn.wmdsed-standard,
.product-logo.wmd-sed-standard > span {
    background-color: var(--wmd-sed-standard-background-color);
    color: var(--wmd-sed-standard-text-color);
}

.btn.wmdsed-professional,
.product-logo.wmd-sed-professional > span {
    background-color: var(--wmd-sed-professional-background-color);
    color: var(--wmd-sed-professional-text-color);
}

.btn.wmdsed-enterprise-support,
.product-logo.wmd-sed-enterprise-support > span {
    background-color: var(--wmd-sed-enterprise-support-background-color);
    color: var(--wmd-sed-enterprise-support-text-color);
}

.btn.wmd-desktop-basic,
.product-logo.wmd-desktop-basic > span {
    background-color: var(--wmd-desktop-basic-background-color);
    color: var(--wmd-desktop-basic-text-color);
}

.btn.wmd-desktop-business,
.product-logo.wmd-desktop-business > span {
    background-color: var(--wmd-desktop-business-background-color);
    color: var(--wmd-desktop-business-text-color);
}

.btn.wmd-desktop-enterprise,
.product-logo.wmd-desktop-enterprise > span {
    background-color: var(--wmd-desktop-enterprise-background-color);
    color: var(--wmd-desktop-enterprise-text-color);
}

.columns.wmd-sed-basic {
    background-color: var(--wmd-sed-basic-panel-bg-color);
    color: var(--wmd-sed-basic-panel-text-color);
}

.columns.wmd-sed-standard {
    background-color: var(--wmd-sed-standard-panel-bg-color);
    color: var(--wmd-sed-standard-panel-text-color);
}

.columns.wmd-sed-professional {
    background-color: var(--wmd-sed-professional-panel-bg-color);
    color: var(--wmd-sed-professional-panel-text-color);
}

.columns.wmd-sed-enterprise-support {
    background-color: var(--wmd-sed-enterprise-support-panel-bg-color);
    color: var(--wmd-sed-enterprise-support-panel-text-color);
}

.columns.wmd-desktop-basic {
    background-color: var(--wmd-desktop-basic-panel-bg-color);
    color: var(--wmd-desktop-basic-panel-text-color);
}

.columns.wmd-desktop-business {
    background-color: var(--wmd-desktop-business-panel-bg-color);
    color: var(--wmd-desktop-business-panel-text-color);
}

.columns.wmd-desktop-enterprise {
    background-color: var(--wmd-desktop-enterprise-panel-bg-color);
    color: var(--wmd-desktop-enterprise-panel-text-color);
}

.yes {
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 24px 24px;
	background-image: url(/static/images/icons/64/light/yes.png);
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.no {
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 24px 24px;
	background-image: url(/static/images/icons/64/light/no.png);
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#form-contact label {
	color: #FFFFFF;
}

.layout {
    display: flex;
    gap: 48px;
}

/* Sidebar */
#sidemenu {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;
	overflow-x: hidden;
	padding: 10px;
}

/* Main content */
.layout #main {
    flex: 1;
    min-width: 0;
	text-align: justify;
}

.layout #main h1, .layout #main h2, .layout #main h3 {
    font-family: var(--default-heading-font);
    font-weight: 600;
    line-height: 1.25;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    color: #502020;
}


.layout #main h1 {
    font-size: 2rem;
    margin-top: 0;
}

.layout #main h2 {
    font-size: 1.5rem;
    padding-bottom: 0.3em;
}

.layout #main h3 {
    font-size: 1.2rem;
    font-weight: 500;
}


/* Toggle button hidden on desktop */
.sidebar-toggle {
    display: none;
}

/* -------- Mobile -------- */
@media (max-width: 780px) {
    .layout {
        display: block;
    }

    #sidemenu {
        position: fixed;
        top: 0;
        left: -280px;
        height: 100vh;
        z-index: 1000;
        background: #202020;
        transition: left 0.25s ease;
		padding-top: 60px;
    }

    body.sidebar-open #sidemenu {
        left: 0;
    }

    .layout #main {
        padding-top: 10px;
    }

    .sidebar-toggle {
        display: block;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 1100;
    }
}

ul.list-unstyled {
    list-style: none;
	list-style: none;
	padding: 10px 10px 10px 0;
}

ul.list-with-icons.list-select-item {
	margin-bottom: 0;
}

ul.list, ul.list-with-icons {
	list-style: none;
	padding: 0;
	border: 1px solid var(--listbox-border-color, #EFEFEF);
	overflow-y: auto;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	user-select: none;
	text-align: left;
	overflow-x: hidden;
}

ul.list li:focus, ul.list-with-icons li:focus {
	outline: 2px solid var(--listbox-outline-color, #006EB1);
	outline-style: solid;
	outline-offset: -2px;
}

ul.list-without-border {
	border: none;
}

ul.list li, ul.list-with-icons li {
	padding: 3px 0px 3px 0px;
	width: 100%;
}

ul.list li, ul.list-with-icons li {
	display: block;
	color: var(--listbox-row-text-color-odd, #000000);
	border-bottom: 1px solid var(--listbox-border-color, #EFEFEF);
}

ul.list li:focus, ul.list-with-icons li:focus {
	outline-style: dotted;
	outline-width: 1px;
}

ul.list-without-border li:first-child {
	border-top: 1px solid var(--listbox-border-color, #EFEFEF);
}

ul.list-with-wrap {
	display: flex;
	flex-wrap: wrap;
	word-wrap: break-word;
	white-space:normal;
	align-content: flex-start;
	flex-direction: column;
}

ul.list-with-icons li {
	padding: 3px 0px 3px 36px;
	background-image: var(--default-list-icon);
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: 5px center;
	background-color: var(--listbox-row-background-color-odd, rgba(255, 255, 255, 1));
}

ul.list-alt-row li:nth-child(odd) {
    background-color: var(--listbox-row-background-color-odd, rgba(255, 255, 255, 1));
	color: var(--listbox-row-text-color-odd, #000000);
}

ul.list-alt-row li:nth-child(even) {
    background-color: var(--listbox-row-background-color-even, rgba(250, 250, 250, 1));
	color: var(--listbox-row-text-color-even, #000000);
}

ul.list-selectable li:hover {
	cursor: pointer;
	background-color: var(--listbox-row-background-color-hover, #EAEAFF);
	color: var(--listbox-row-text-color-hover, #000000);
}

ul.list-selectable li.active {
	background-color: var(--listbox-row-background-color-active, #B1E1FF);
	color: var(--listbox-row-text-color-active, #000000);
	outline: none;
}

ul.list-with-justify {
	padding: 20px;
}

ul.list-with-justify > li {
	text-align: justify;
}

ul.list-with-icons.list-checkbox-select-item li {
	background-image: url(../images/icons/64/light/check-box-outline-blank.png);
}

ul.list-with-icons.list-checkbox-select-item li.checked {
	background-image: url(../images/icons/64/light/check-box.png);
}

[data-theme="dark"] {
	ul.list-with-icons.list-checkbox-select-item li {
		background-image: url(../images/icons/64/dark/check-box-outline-blank.png);
	}

	ul.list-with-icons.list-checkbox-select-item li.checked {
		background-image: url(../images/icons/64/dark/check-box.png);
	}
	ul.list-selectable li:hover {
		cursor: pointer;
		background-color: var(--listbox-row-background-color-hover, #505050);
		color: var(--listbox-row-text-color-hover, #FFFFFF);
	}
}

.popup-body ol li:nth-child(odd) {
    background-color: var(--listbox-row-background-color-odd, rgba(255, 255, 255, 1));
	color: var(--listbox-row-text-color-odd, #000000);
}

.popup-body ol li:nth-child(even) {
    background-color: var(--listbox-row-background-color-even, rgba(250, 250, 250, 1));
	color: var(--listbox-row-text-color-even, #000000);
}

.btn {
	display: flex;
	border-radius: var(--default-btn-border-radius, 2px);
	text-transform: uppercase;
	border: none;
	margin: 0px;
	font-family: var(--default-btn-font-family);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	background-color: var(--default-btn-background-color);
	color: var(--default-btn-text-color);

	font-size: 0.95rem;
	font-weight: var(--default-btn-font-weight);
	cursor: pointer;
	text-decoration: none;
	align-items: center;
	padding: 6px 10px;
	justify-content: space-around;
}

.btn-thick {
	height: 30px;
	align-content: center;
	font-size: 1.05rem;
}

.btn-small {
	width: 350px;
	align-content: center;

}

.btn-smallest {
	width: 150px;
	align-content: left;
}

 .btn-group {
    display: flex;
    gap: 10px; 
  }

.btn-header {
	margin-top: 40px;
}

.btn:not(:last-child) {
	margin-right: 5px;
}

.btn-sm {
	font-size: 13px;
	padding: 4px 8px;
}

.btn-with-icon {
	padding-left: 48px;
	text-align: left;
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 24px 24px;
}

.btn:hover {
	box-shadow: none;
	background-color: var(--default-btn-background-hover-color);
	color: var(--default-btn-text-hover-color);
	border-color: var(--default-btn-border-hover-color);
}

.btn-block {
	width: 100%;
}

.button-box {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 10px 0px 20px 0;
	background-image: var(--button-box-background);
	padding: 10px;
	gap: 5px;
	justify-content: center;
}

.button-box-left {
	justify-content: left;
}


#tool-headerbox .button-box {
	margin-left: 0;
	margin-right: 0;
}

.button-box input {
	width: 90px; height: 20px;
	border: 1px solid rgba(0,0,0,0.4);
}

.active-btn {
	background-color: var(--default-active-button-background-color);
	color: var(--default-active-button-text-color);
	border-color: var(--default-active-button-border-color);
}

.help-btn {
	background-color: var(--default-help-btn-background-color);
	color: var(--default-help-btn-text-color);
	border-color: var(--default-help-btn-border-color);
}

.vert-btn-toolbar {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
}

.horiz-btn-toolbar {
	display: flex;
	flex-direction: row;
	gap: 5px;
	flex-wrap: wrap;
}

.input-button-item.input-button-item-file-open {
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: center center;
}

.btn-settings-module {
	background-color: #CDECFE;
	color: #000000;
}

.btn-red {
	background-color: #C00000;
	color: #FFFFFF;
	font-weight: 600;
}

.btn-buy-basic {
	background-color: #001F3F;
	color: #FFFFFF;
	padding: 10px;
	border-radius: 5px;
}

.btn-buy-business {
	background-color: #191970;
	color: #FFFFFF;
	padding: 10px;
	border-radius: 5px;
}

.btn-buy-paypal {
	background-color: #001F3F;
	color: #FFFFFF;
	padding: 10px;
	border-radius: 5px;
}

.btn-buy-fastspring {
	background-color: #191970;
	color: #FFFFFF;
	padding: 10px;
	border-radius: 5px;
}

.btn-red-wide {
	background-color: #FF0000;
	color: #FFFFFF;
	width:331px;
}

.btn-green {
	background-color: #008000;
	color: #FFFFFF;
}

.tb-btn {
	width: 24px;
	height: 24px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	cursor: pointer;
	background-color: #006EB1;
}

.tb-admin, .btn-admin {
	background-color: #E95700;
	color: #FFFFFF;
}

.tb-pro, .btn-pro {
	background-color: #00AA00;
	color: #FFFFFF;
}

.tb-module, .btn-module {
	background-color: #005C94;
	color: #FFFFFF;
}

.tb-app, .btn-app {
	background-color: #50005C;
	color: #FFFFFF;
}

.tb-domain-find {
	background-color: #800000;
	color: #FFFFFF;
}

.tb-domain-ops {
	background-color: #008000;
	color: #FFFFFF;
}

.tb-display-group {
	background-color: #940000;
	color: #FFFFFF;
}

.tb-app-color-mode {
	background-image: url(/static/images/icons/64/dark/lightmode.png);
}

[data-theme="dark"] {
	.tb-app-color-mode {
		background-image: url(/static/images/icons/64/dark/darkmode.png);
	}
}

.tb-search {
	background-image: url(/static/images/icons/64/dark/search.png);
}

.active-item {
	background-color: var(--default-active-background-color);
	color: var(--default-active-text-color);
}

.category-link-icon {
	background-image: url(/static/css/icons/light/link.png);
	background-size: 14px 14px;
	width: 20px;
	height: 20px;
	background-position: center center;
	background-repeat: no-repeat;
	border: 1px solid var(--default-border-color);
}

.category-unlink-icon {
	background-image: url(/static/css/icons/light/link-remove.png);
	background-size: 14px 14px !important;
	width: 20px;
	height: 20px;
	background-position: center center;
	background-repeat: no-repeat;
	border: 1px solid var(--default-border-color);
}

[data-theme="dark"] {
	.category-unlink-icon {
		background-image: url(/static/css/icons/dark/link-remove.png);
	}
	.category-link-icon {
		background-image: url(/static/css/icons/dark/link.png);
	}
}


::-webkit-scrollbar {
    width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--scrollbar-background-color);
	border-radius: var(--default-border-radius);
}

::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-color);
	border: 1px solid var(--scrollbar-border-color);
	border-radius: var(--default-border-radius);
	border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-thumb-hover-color);
}

::-webkit-scrollbar-corner { 
	background-color: var(--scrollbar-corner-color, --body-background-color);
	border-radius: var(--default-border-radius);
}

.ss-input {
	font-size: 17px;
	padding: 5px;
	border-radius: 3px;
	border: 1px solid var(--default-border-color);
}

.push-right {
	margin-left: auto;
}

.input-group {
	margin-bottom: 10px;
	padding: 4px;
	background-color: var(--input-group-background-color);
}

.input-group p:last-child {
	margin-bottom: 0;
}

.input-group > label {
	background-color: transparent;
	padding: 0;
	margin-bottom: 5px;
	color: var(--default-label-text-color);
}

.input-group:last-child, .input-group:last-child {
}

label, .label {
	font-size: 17px;
	background-color: var(--label-background-color);
	color: var(--label-text-color);
	padding: 0;
	border-radius: var(--default-border-radius);
	font-family: Verdana;
	margin: 1px 4px 4px 1px;
	box-shadow: none;
	border: none;
	display: block;
	font-family: var(--default-label-font);
}

.input-group input, .input-group textarea {
    width: 100%;
    height: 1.6rem;
}

.input-group textarea {
	width: CALC(100% - 12px);
	background-color: var(--input-background-color);
	color: var(--input-text-color);
}

input:focus, textarea:focus {
	outline: 1px solid #FAA;
	outline-offset: -1px;
}

#resultlist {
	min-height: 350px;
}

.input-group {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.input-group > label {
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.input-group > label > img {
	width: 32px;
	height: 32px;
}

.input-button {
    display: flex;
	gap: 5px;
	justify-content: space-evenly;
}

.input-button-item {
    padding: 5px;
    width: 64px;
    border-radius: 0;
    background-color: var(--default-btn-background-color);
    color: var(--default-btn-text-color);
    box-shadow: none;
    border-radius: 0 0px 0px 0;
	background-size: 18px 18px;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 3px;
	height: auto;
}

.search-result {
	margin-bottom: 30px;
	margin-top: 30px;
	border-bottom: 1px solid var(--default-border-color);
}

.sr-title {
	margin-bottom: 10px;
	font-weight: bold;
}

.sr-snippet {
	text-align: justify;
}

/*
960px and less screen widths
*/

@media screen and (max-width: 960px) {
	
	h1, h2, h3 {
		text-align: center;
	}
	
	h1 {
		font-size: 36px;
	}
	
	.box-container-hero .box-smaller {
		max-width: none;
	}
  
}

.pricing-wrapper > * {
  box-sizing: border-box;
  padding: 0px;
}

.pricing-wrapper > .container {
  overflow-x: auto;
  position: relative;
}

.pricing {
	min-width: 920px;
	display: flex;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 2px;
	font-family: var(--default-subheading-font);
	gap: 10px;
}

.columns > div {
	margin-top: 10px;
	text-align: center;
	border: 0px solid var(--default-border-color);
	padding: 24px;
}

.columns > div > * {
	box-sizing: border-box;
}

.columns {
	float: left;
	width: 25%;
	padding: 8px;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	border: 0px solid var(--default-border-color);
}

.price {
  list-style-type: none;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.columns:hover {
  box-shadow: var(--default-box-shadow);
}

.price .header {
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  background-color: var(--default-heading-background-color);
  color: var(--default-heading-color);
}

.price li {
	padding: 18px;
	text-align: center;
	border-bottom: 0px solid var(--default-border-color);
	text-align: left;
}

.price li > * {
	box-sizing: border-box;
}

.price .centered {
	font-size: 20px;
	text-align: center;
}

.columns.highlighted {
	background-color: var(--default-highlight-background-color) !important;
	color: var(--default-highlight-text-color) !important;
}

.columns.highlighted {
	box-shadow: var(--default-box-shadow);
}

.premium-column {
    background: linear-gradient(180deg, #FEF7F2 0%, #FCE3CD 50%, #F5B991 100%);
    border-radius: 6px;
}



[data-theme="dark"] {	
	.columns {
		background-color: #202020;
		color: #FFFFFF;
	}
	
	.premium-column {
		background: linear-gradient(180deg, #5E2600 0%, #9A3D00 50%, #D35400 100%);
		border-radius: 6px;
	}


}

.patterned-gradient-bg {
  background-image:
    radial-gradient(circle at top left, rgba(255, 79, 0, 0.3) 0%, transparent 40%),
    linear-gradient(315deg, #ff4f00, #4a1f00), /* orange top-left to burnt orange bottom-right */
    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23dddddd' fill-opacity='0.2' /%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: cover;
  color: #ffffff;
}


[data-theme="dark"] {
	.patterned-gradient-bg {
		background-image:
		linear-gradient(135deg, #1a1a1a, #2a2a2a),
		url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff' fill-opacity='0.05' /%3E%3C/svg%3E");
		background-repeat: repeat;
		background-size: cover;
	}
	
	.dark-mode img.screenshot {
	  display: block;
	  max-width: 100%;
	  height: auto;
	  border: 1px solid rgba(255, 255, 255, 0.08); /* subtle light border */
	  border-radius: 8px;
	  box-shadow:
		0 1px 2px rgba(255, 255, 255, 0.04),
		0 4px 12px rgba(255, 255, 255, 0.08); /* soft glow effect */
	  background-color: #1e1e1e; /* dark neutral backdrop */
	  padding: 12px;
	  transition: box-shadow 0.3s ease, transform 0.3s ease;
	}

	img.screenshot:hover {
	  box-shadow:
		0 2px 4px rgba(255, 255, 255, 0.06),
		0 6px 16px rgba(255, 255, 255, 0.12);
	  transform: translateY(-2px);
	}
	
	.bookmark-link {
		background-image: url(/static/images/icons/64/dark/chevron-right.png);
	}
	
	.bookmark-link.back-to-top {
		background-image: url(/static/images/icons/64/dark/expand-less.png);
	}
}


.hero-container {
	padding: 70px 10px;
}

.hero-container .content-panes {
	display:flex; 
	gap: 100px; 
	flex-wrap: wrap; 
	align-items: flex-start;
}

.hero-container .content-panes > div:first-child {
	flex: 1 1 480px;
}

.hero-container .content-panes > div:last-child {
	min-width: 320px;
}

.hero-container img {
	width: 100%;
	height: auto;
}

.hero-container h1 {
	margin-bottom: 50px; 
	padding: 0 0px; 
	font-size: 52px; 
	text-align: left;
}

.hero-container h2 {
	font-family: var(--default-label-font); 
	background-color: transparent; 
	margin-bottom: 40px; 
	font-weight: normal;
}

.hero-container h3 {
	margin-bottom: 80px; 
	padding: 0 0px; 
	text-align: center; 
	font-size: 22px; 
	font-weight: normal; 
	text-align: justify;
}

.hero-list {
	
}

.hero-list-container img {
	margin-bottom: 15px;
}

.hero-list-container {
	margin-top: 20px;
	flex: 1 1 200px; 
	background-color: var(--default-background-color); 
	border: 1px solid  var(--default-border-color); 
	border-radius: 8px;
	padding: 40px 20px;
}

.hero-list-container h3 {
	text-align: left;
	margin-top: 0px;
	margin-bottom: 20px;
	text-transform: uppercase;
	padding-left: 64px;
	color: #AA0000;
	font-weight: bold;
}

.hero-list li {
	padding-left: 4rem; 
	background-color: transparent;
	background-position: 5px 5px !important;
	margin-bottom: 20px;
	min-height: 54px;
	border: none !important;
	padding-left: 64px !important;
	background-size: 40px 40px !important;
	background-image: url(/static/images/icons/96/application.png) !important;
	position: relative;
	user-select: text;
	box-sizing: border-box;
}

.hero-list li > span {
	font-size: 17px;
	display: block;
	white-space: normal;
  word-wrap: break-word;
}

.hero-list li > span:first-child {
	font-size: 20px;
	font-weight: bold;
	font-family: var(--default-label-font);
	margin-bottom: 12px;
}

.hero-list li.application {
	background-image: url(/static/images/icons/96/application.png) !important;
}

.hero-list li.user-group {
	background-image: url(/static/images/icons/96/user-group.png) !important;
}

.hero-list li.database {
	background-image: url(/static/images/icons/96/database.png) !important;
}

.hero-list li.deployment {
	background-image: url(/static/images/icons/96/deployment.png) !important;
}

.hero-list li.source-code {
	background-image: url(/static/images/icons/96/source-code.png) !important;
}

img.screenshot {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  padding: 12px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

img.screenshot:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.bookmark-link {
  text-decoration: none;
  width: 24px;
  height: 24px;
  background-image: url(/static/images/icons/64/light/chevron-right.png);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px; /* spacing from text */
}

.bookmark-link:hover {
}

.bookmark-link.back-to-top {
	background-image: url(/static/images/icons/64/light/expand-less.png);
	padding-left: 36px;
}

/*
960px and less screen widths
*/

@media screen and (max-width: 960px) {
	.hero-container {
		padding: 70px 10px;
	}
	
	.hero-container .content-panes {
		gap: 40px;
	}
}
.hero-container h1,
.hero-container h2,
.hero-container h3 {
  color: #ffffff;
}

.horiz-btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
}

.horiz-btn-toolbar .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.hero-container h1 {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  text-align: left;
  margin-bottom: 40px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* depth */
}

.hero-container h1::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: #ff4f00;
  margin-top: 12px;
  border-radius: 2px;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-container h1 {
  animation: fadeSlideUp 0.8s ease-out 0.2s both;
}

.hero-heading {
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffffff;
}

.hero-subheading {
  font-size: 38px;
  font-weight: 400;
  margin-bottom: 40px;
  color: #ffae66;
}

.hero-subheading.primary {
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 20px;
}

.hero-subheading.secondary {
  font-size: 20px;
  font-weight: 400;
  color: #ffae66; /* warm accent to differentiate */
  margin-bottom: 40px;
}

.hero-subheading.tertiary {
  font-size: 18px;
  font-weight: 400;
  color: #cccccc;
  margin-top: -20px;
  margin-bottom: 40px;
  text-align: left;
}

.content-panes > div:first-child {
  flex: 1 1 480px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.hero-container img.screenshot {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}


@media screen and (max-width: 768px) {
  .hero-container h1 {
    font-size: 42px;
    text-align: center;
  }
}


@media screen and (max-width: 768px) {
  .horiz-btn-toolbar {
    flex-direction: column;
    align-items: center;
  }

  .horiz-btn-toolbar .btn-group {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
}