/* DO NOT CROSS LINK TO THIS FILE  - This stylesheet was generated on Tue, 25 Feb 2025 08:56:07 -0800 and its name will change */

/*---------------------------------------------*/
/* Stylesheet: main*/

/* main.css */
/* styling for site - non bootstrap */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


h1, h2, h3 { 
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-style: normal;
}

h4, h5 { 
font-family: 'Raleway', sans-serif;
font-style: normal;
font-style: normal;
}

body {font-size:16px; font-family: 'Lato', sans-serif; font-style: regular;}
h1{font-size: 3em;}
.inverted h1, h1.inverted {text-shadow: 1px 1px 10px rgba(0,0,0,.3);}
h2{font-size: 1.7em;}
h3{font-size: 1.3em;}
h4{font-size: 1em; font-weight: 700;}
h5{font-size: 1em;}
h6{font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 3em;}
.cta-text {font-size: 1.2em;}
.testimonial {font-family: 'Raleway', sans-serif; font-style: italic; font-size: 1rem;}
.date {font-size: 1.2em; color: #20828d !important;}
.text-light {color: #444 !important;}
.no-shadow {text-shadow: 0px 0px #000000 !important;}
.container-content h1{text-shadow: 0px 0px #000000 !important;}

.bw-blue {color:#396b8c;}
.bw-green {color:#a8bd38;}
.bw-yellow {color:#e5990b;}

#signature {display: none;}

/* Bootstrap Overwrites */
.card.bg-gray {background-color: #f5f6fc; border-radius: 20px;}
.card.bg-dark {border-width: 0px !important;}
.accordion.card {border-bottom:1px !important;}
.btn {border-radius: 10px !important; font-weight: 600;}
.btn.btn-link {min-width: 50px !important;}
.btn-link.btn:focus {box-shadow: none !important;}
.btn-link.btn:hover {text-decoration: none !important;}
.btn-link.btn:focus {text-decoration: none !important;}
.btn-link.btn:active {text-decoration: none !important;}
.dropdown-item:active {background-color: #fff;}
.btn-primary:hover {color:#ffffff;}
.btn-primary-white {background-color:#ffffff; color: #004B58; }
.btn-primary-white:hover { border: 1px solid #ffffff; background-color: transparent; color: #ffffff;}
.btn, a, .fa-stack .fa, img {transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out, filter .15s ease-in-out;}

.grecaptcha-badge {display: none;}
/* layout kelly */

/* blog */
.blog-body::first-letter { padding-left: 50px; font-size: 130%; font-family: serif;}
.blog-body h2 { margin-bottom: 1em;}
.blog-body h3 { margin-bottom: 1em;}
.blog-body p { line-height: 1.9em;}
.blog-body li { line-height: 1.9em;}

/* Forms */
.ui-form-cell-label label{margin-bottom: 0px; padding-right: 10px;}
.form-control {margin-bottom: 20px; border-radius: 10px !important;max-width: 400px;}
.ui-form-captcha-img {margin-top: -10px; padding-bottom: 15px;}
.ui-form-table.ui-form-cell-label label {padding-right: 10px;}
.error-box { color: red; background-color: rgba(255, 0, 0, 0.05); padding: 15px; margin-bottom: 10px; border: 1px solid red; border-radius: 10px;}
#mc_embed_signup {display: none;}

/*Badge*/
.badge.badge-new {
	background-color: #f4ab23;
	color: #000000;
	height: 60px;
    width: 60px;
    border-radius: 50%;
    rotate: 45;
    transform: rotate(0.93turn);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -10px;
    left: 10px;
	}

.badge-new


/* ----------------------- */
/* full-width case studies */
/* ----------------------- */

.bottom-divider {
    border-bottom: 5px dotted blue;
}

#caseGallery .list-inline {white-space:nowrap; overflow-x:auto;}
#caseGallery .carousel-indicators {position: static; left: initial; width: initial; margin-left: initial;}
#caseGallery .carousel-indicators > li {width: initial; height: initial; text-indent: initial;}

.text-brand-dark-blue {font-family: 'Lato', sans-serif;}
h6.text-brand-dark-blue small {font-size: 40%;}
#clientsCarousel img {filter:saturate(0) opacity(0.5);}
#clientsCarousel img:hover {filter:saturate(1) opacity(1);}
.modal-case-lg .modal-dialog {max-width: fit-content;}
.cursor-pointer {cursor:pointer;}
.bg-photo.gradient-overlay:before {background-image: linear-gradient(360deg, #033e44, transparent); position: absolute;width: 100%;height: 100%;content: '';}
.case-study-hero { background-color: #0f3c50; }
.case-study-hero-image-sm { width: 100%; padding: 0 32px 0 32px;}
.case-study-hero-image-lg { width: 100%; padding-top: 100px; }
@media (min-width: 992px) {
  .case-study-hero-image-lg { margin-bottom: -150px; }
}

.full-review img {border: 1px solid #ddd;}

.carousel-control-prev-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important; width:30px !important; height: 30px;}
.carousel-control-next-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important; width:30px !important; height: 30px;}
.case-studies .carousel-control-prev, .case-studies .carousel-control-next {width: 3rem !important; opacity:1;}
.case-studies .carousel-control-prev span, .case-studies .carousel-control-next span {opacity:0.25;transition: opacity .15s ease-in-out;}
.case-studies .carousel-control-prev:hover span, .case-studies .carousel-control-next:hover span {opacity:1;transition: opacity .15s ease-in-out;}
.case-studies .carousel-control-prev {background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);}
.case-studies .carousel-control-next {background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);}
.case-studies .carousel .carousel-inner {padding-left: 3rem; padding-right: 3rem;}
.carousel-item {border: 1px solid #eee;}


/* Templates */
.container-content a:not(.btn) {color: #20828D; font-weight: 500 !important; text-decoration: none;}
.container-content.btn-primary a {color: #212529 !important;}
.x-cell { position: relative; }
.container-content img {max-width: 100%; height: auto;}
.responsive-form {height: 1450px;}
@media (max-width: 767.98px) { #hide-mobile {display: none !important;}}


/*.text-responsive {font-size: calc(10% + 1vw + 1vh);} commented out. Text needs to be constant size. testimonials looks too big */ 
.accordion {font-size: 1rem !important; background-color:border-width: 0px !important; line-height: inherit !important;}
.accordion .card-header {border-radius: 5px 5px 0px 0px;}
.accordion .card {border-radius:6px; overflow:hidden;}
.blue-gradient {background-image: linear-gradient(rgba(32,130,141,100), rgba(14,59,79,100))}
.behind {position: absolute; z-index:1; width:100%;}
.card-header {background-color:#20828D !important;}
.circle-icon {background: #20828D; width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 50px; vertical-align: middle;}
.icon-font {font-size: 1.2em; color:#ffffff;}
.industries-icon {font-size: 3em;}
.badge { font-weight: normal !important; }

.ui-form-table-one-column {width: 100%;}

/*Browser Mockup*/
.browser-mockup {background-color: #F2F2F2;}
.browser-mockup::-webkit-scrollbar {display: none;}
.browser-top {background-color: #F2F2F2; border-radius: 4px 4px 0 0 ; display: flex; justify-content: space-between; align-items: flex-end; height: 20px; justify-content: flex-end;}
.browser-mockup .browser-tab {width: 100px; height: 15px; background-color: #D9D9D9; border-radius: 4px 4px 0 0 ;}
.browser-mockup .toolbar {height: 20px;}
.browser-control {height: 12px !important; width: auto;}


/*Triangles*/

.triangle-up {width: 0; height: 0; border-style: solid; border-width: 0 12px 12px 12px; border-color: transparent transparent #A8BD38 transparent;}
.triangle-right {width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 24px; border-color: transparent transparent transparent #A8BD38;}
.triangle-down {width: 0; height: 0; border-style: solid; border-width: 24px 12px 0 12px; border-color: #A8BD38 transparent transparent transparent;}
.triangle-left {width: 0; height: 0; border-style: solid; border-width: 12px 24px 12px 0; border-color: transparent #A8BD38 transparent transparent;}


/* Main Nav */


/* ------------- */
/*   utilities   */
/* ------------- */
/* make all text inverted white */
.fill-y { height: 100%; }
.inverted { color: white !important; }
	.inverted a:not(.btn):not(.link-primary) { color: white !important; }
	.inverted a:not(.btn):not(.link-primary):hover {color:#f4ab23 !important;}
/*.card-img-overlay { background: rgba(0,0,0,.5); }*/
/* read more links */
.readmore { font-size: .9em; text-decoration: underline; font-weight: bold;}
/* create a linear shadow gradient from top to bottom. y => vertical, 25 = 25% opacity */
.bg-grad-y-25 { background-image: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(255,255,255,0) 100%);}
.bg-grad-y-50 { background-image: linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(255,255,255,0) 100%);}
.bg-grad-y-75 { background-image: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(255,255,255,0) 100%);}
.bg-grad-y-teal { background-image: linear-gradient(180deg, #20818c 0%, #0e3b4f 100%);}
/* create a 50% opacity layer. used on top article above the background photo. See main template, top article */
.bg-opacity-50 { background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; width: 100%; height: 100%;}
.bg-opacity-75 { background-color: rgba(0, 0, 0, 0.75); top: 0; left: 0; width: 100%; height: 100%;}

.bg-top-menu { background: #0f3c50; box-shadow: 0 0 2px rgba(0,0,0,.2);} 
.my-photo img { width: 100%; height: auto; border-radius: 12px; border: solid 1px #eeeeee; }

.ruler { border-bottom: solid 1px #80c8b5; margin-bottom: 1em; }
.ruler-left, .ruler-md-left { border-left: solid 1px #80c8b5; }
.ruler-right, .ruler-md-right  { border-right: solid 1px #80c8b5; }
.btn { min-width: 150px; }
.btn .fa.fa-angle-right {float: right;line-height: 1.5rem;}
span .fa.fa-angle-double-right {display: inline;}

/* create a thick dotted div behind other content placed after it */
.border-dotted-radius {position: absolute; z-index: 1; top: -20px; left: -5px; width: 80%; height: 70%; border: 5px dotted #80c8b5; border-radius: 20px;}
.border-dotted-radius-bottom {position: absolute; z-index: 1; bottom: 150px; left: -5px; width: 80%; height: 60%; border: 5px dotted #80c8b5; border-radius: 20px;}
.border-dotted-radius-left {position: absolute; z-index: 1; top: -20px; left: 105px; width: 80%; height: 70%; border: 5px dotted #80c8b5; border-radius: 20px;}
.border-above { z-index: 2; position: relative;}
.px-100 { padding-left: 100px; padding-right: 100px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }
.rounded {border-radius:20px !important;}
.circle {border-radius:50% !important;}
.contact-icons {margin-top:-30px;}

/* ---------------------------- */
/*   FontAwesome Social Icons   */
/* ---------------------------- */
.socialicon:hover {text-decoration: none;}
.socialicon .fa-stack {font-size: 1.2em;}
.socialicon .fa-stack .fa-circle, .top-article .social-icons .socialicon .fa-stack .fa:not(.fa-circle) {color: #0f3c50;}
.socialicon .fa-stack:hover .fa-circle, .top-article .social-icons .socialicon .fa-stack:hover .fa-circle {color: #f4ab23;}
.socialicon .fa:not(.fa-circle) {margin-top: 0.05em;}
.top-article .social-icons .socialicon .fa-stack .fa-circle {color: #ffffff;}
.card .fa-5x {color:#2f8a94;}

/* ----------------------- */
/*   image hover classes   */
/* ----------------------- */
.hover-darker:hover {filter: brightness(0.6);}
.hover-yellow:hover {filter: brightness(0.58) sepia(1) saturate(3.25);}

/* ---------------------------*/
/* top menu and dropdown menu */
/* ---------------------------*/
#top-menu { position: relative; height: 50px; z-index: 3; padding-top: 10px; }
#top-menu .navbar { margin-top: 0px; /*background-color: #1c1c1c;*/ padding: 0.75rem;} 
#top-menu .navbar-brand { margin-top: -8px; } 
#top-menu .navbar-toggler { border: none; }
#top-menu .nav-item a:hover:not(.btn-primary:hover) {color: #f4ab23;}
#top-menu .nav-item .dropdown-menu a.active:hover:not(.btn-primary:hover) {color:#000000;}
#top-menu .nav-link { color: white; padding: .5rem 0.25rem;}
#top-menu .nav-link.active { color: #f4ab23;}
#top-menu .dropdown-menu {/*background-color: #0f3c50;*/ border-radius: 0px !important; 
	left: -20px; top: 46px; border: none; box-shadow: 0 0 10px rgba(0,0,0,.2); font-size: 1em; }
#top-menu .dropdown-item {/*color: white;*/}

/* ----------------------- */
/*     services blocks     */
/* ----------------------- */
.homepage .service-blocks .bg-white, .bg-fade-white {background-color:rgb(255 255 255 / 80%) !important;}
.text-black {color: #000 !important;}
.bg-soft-white {background-color:rgb(255 255 255 / 25%) !important;}
.homepage .service-blocks .badge-pill.badge-light {background-color:#fff;}
.card.not-opaque {background-color:rgba(255, 255, 255, 0.9) !important;}

/* ----------------------- */
/*     featured quotes     */
/* ----------------------- */
.featured-quote {font-style: italic;padding:1rem;}
.card .featured-quote {padding:0;}
.featured-quote p {font-size: 1.25em;}
.card .featured-quote p {font-size:1em;}
.featured-quote.inverted {padding-right: 0rem;}
.blockquote-case-study {font-style: italic;}
.blockquote-footer {color:#212529; font-style:normal; opacity:0.7;}
.inverted .blockquote-footer {color:#ffffff;}
.blockquote-footer:before {content:"";}
.card.no-border {border:none;}
.companyQuotes .carousel-control-prev, .companyQuotes .carousel-control-next {width:5%;}
/* ------------------------*/
/* hero full bleeds */
/* ------------------------*/
.top-article { position: relative; top: -50px } /* 50px = height of top menu */
.top-article .bg-photo { position: relative;  background-size: cover;background-position: center center;}
.top-article-sm { position: relative; top: -50px } /* 50px = height of top menu */
.top-article-sm .bg-photo { position: relative;  background-size: cover;background-position: center center;}
.top-article h1, .top-article-sm h1 { margin-bottom: 15px; }
.top-article p, .top-article-sm p { font-size: 1.2em; }
.top-article .small, .top-article-sm .small { font-size: 1em; }

@media (min-width: 768px) { 
	/* large screen (md+) only */
	.top-article .bg-photo .bg-opacity-50 { height: 100vh; /*635px;*/ }
	.top-article .bg-photo .bg-opacity-70 { height: 100vh; /*635px;*/ }
	.top-article-sm .bg-photo .bg-opacity-75 { height: 100vh; /*635px;*/ }
	.top-article .bg-photo .bg-opacity-50 > .container { height: 100vh; position: relative;min-height: 750px;}
	.top-article .social-icons { position: absolute; bottom: 20px; right: 0; }

	.top-article-sm .bg-photo { min-height: 600px; /*635px;*/ }
	.top-article-sm .bg-photo .bg-opacity-70 { height: 600px; /*635px;*/ }
}

@media (max-width: 767.98px) { 
	/* smaller screens than md */
	#top-menu .bg-top-menu { box-shadow: 0 0 5px rgba(0,0,0,.5);  font-size: 1.2em;}
	#top-menu .dropdown-menu { background-color: #0f3c50; box-shadow: none; }
	#top-menu .dropdown-item { color: white; }
	#top-menu .navbar-collapse { padding-bottom: 20px; }
	
	.top-article h1, .top-article-sm h1 { padding-top: 20px; }
	.top-article-sm .bg-photo {background-position: top right;}
	.top-article .container {min-height: 450px; display: flex; align-items: flex-end; padding-bottom: 40px !important;}

	h1{font-size: 2em;}
	h2{font-size: 1.5em;}
	h3{font-size: 1.2em;}
	.ruler-md-left, .ruler-md-right { border: none; }
}

@media (max-width:1199.98px) {
	.fa.fa-shrink {width: 35px; height: 35px; line-height: 35px;}
}
/*.bg-discover {position: relative;  background-size: 100% 100%;background-position: center top; background-image: url(/pub/photo/bg-home-discover.jpg)}*/
.bg-discover {position: relative; background: #0f3c50; background: -moz-linear-gradient(top,  #ffffff 0%, #0f3c50 70%); background: -webkit-linear-gradient(top,  #ffffff 0%,#0f3c50 70%); background: linear-gradient(to bottom,  #ffffff 0%, #3c7892 50%, #0f3c50 80%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0f3c50',GradientType=0 );}


/* ----------------------- */
/* full-width case studies */
/* ----------------------- */
#caseGallery .list-inline {white-space:nowrap; overflow-x:auto;}
#caseGallery .carousel-indicators {position: static; left: initial; width: initial; margin-left: initial;}
#caseGallery .carousel-indicators > li {width: initial; height: initial; text-indent: initial;}

.text-brand-dark-blue {font-family: 'Lato', sans-serif;}
h6.text-brand-dark-blue small {font-size: 40%;}
#clientsCarousel img {filter:saturate(0) opacity(0.5);}
#clientsCarousel img:hover {filter:saturate(1) opacity(1);}
.modal-case-lg .modal-dialog {max-width: fit-content;}
.cursor-pointer {cursor:pointer;}
.bg-photo.gradient-overlay:before {background-image: linear-gradient(360deg, #033e44, transparent); position: absolute;width: 100%;height: 100%;content: '';}

.full-review img {border: 1px solid #ddd;}

/* ------------------ */
/* back to top button */
/* ------------------ */
.back-to-top {position: fixed; width: 50px; height: 50px; font-size: 1.5em; line-height: 50px; color: #fff; background: #0f3c50; border-radius: 50%; right: 3%; bottom: 40px; overflow: hidden; text-align: center; z-index: 20; cursor: pointer; opacity: 0; visibility: hidden; transition: .2s;}


.back-to-top.visible {opacity: 1; visibility: visible;}
.back-to-top:hover { color: #fff; background: #20818c;}

/*---------------------------------------------*/
/* Stylesheet: demo-styles*/

.demo-dark {
	background-color: #000000;
}

/*---------------------------------------------*/
/* Stylesheet: case-study*/

.template:has(.case-study-hero) {
  overflow-x: hidden;
}

.template:has(.case-study-hero) > .container-fluid:last-of-type {
  background-color: #fff;
}

.case-study-hero-image-sm {
    padding: 0;
    padding-top: 0!important;
}

.case-study-hero p {
  color: #beeeef;
}

.case-study-hero > div > div > row:first-child {
  position: sticky;
  top: 0;
}

.case-study-hero-image-sm {
  margin-bottom: -3rem;
}

.case-study-hero h1: after {
  width: 72px;
  height: 6px;
  background-color: #f4ab23;
  content: "";
  display: block;
  margin-top: 0.5rem;
}

.blue-gradient-callout h2: after {
  width: 36px;
  height: 3px;
  background-color: #ffffff33;
  content: "";
  display: block;
  margin-top: 0.5rem;
}

.header-line: after {
  width: 36px;
  height: 3px;
  background-color: #f4ab23;
  content: "";
  display: block;
  margin-top: 0.5rem;
}

.blue-gradient-callout h2.cs-display-header-md.inverted {
  color: #beeeef!important;
}

.case-study-hero h2 {
  font-size: 2rem;
  font-weight: 400;
}

.case-study-hero h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

.blue-gradient-callout {
  font-size: 1.1rem;
  padding: 1.5rem 0rem;
  background-image: linear-gradient(rgba(27, 108, 122, 1),95%,rgba(27, 108, 122, 0));
  border-radius: 8px;
  z-index: 2;
  position: relative;
}

.cs-display-header-lg {
  font-size: 2.5rem;
  font-weight: 800; 
  line-height: 1;
  color: var(--dark);
}

.cs-display-header-md {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--dark);
}

.cs-display-header-sm {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1.25px;
  color: var(--dark);
}

  .case-study- hero::after {
    content: "";
    height: 200px;
    position: absolute;
    bottom: -50px;
    background-color: #0f3c50;
    left: -50px;
    width: 120%;
    z-index: -100;
    rotate: -1deg;
  }

.template:has(.case-study-hero) #template-input-MArticlePostViewer1 {
  background-color: #0f3c50;
}

  .cs-blue-gradient-angle {
  position: relative;
}

  .cs-blue-gradient- angle::before {
    content: "";
    height: 200px;
    position: absolute;
    top: -50px;
    background-color: rgb(32,130,141);
    left: -50px;
    width: 120%;
    z-index: -100;
    rotate: -1deg;
  }

.cs-dot-grid-bg:not(.container-content *) {
  position: relative;
  background-image: url("https://cdn.pixelied.com/thumbnails/ef089fec-860a-488a-8a7f-f9370dc90976.jpeg");
  background-size: 14px;
}

.white-shadow-bg > * {
  background-color: #ffffff77;
  box-shadow: 0px 0px 50px 50px #ffffff77;
  width: fit-content;
}

.cs-tech-stack {
  box-shadow: 0px 0px 70px 20px #00000099;
}

.cs-gallery {
  display: flex;
  align-items: center;
  min-height: 50vh;
}

.flow-mockup {
  min-width: 150px;
  padding: 0.2rem;
}

.flow-gallery {
  overflow-y: clip;
  max-height: 600px;
  max-width: 2000px;
  margin: auto;
}

.case-studies .carousel-control-next, .case-studies .carousel-control-prev {
  background-image: unset;
  position: unset;
  height: 50%;
  margin: auto;
  filter: brightness(0.35);
}

.template:has(.case-study-hero) .carousel-item {
  text-align: center;
  border: none;
}

.template:has(.case-study-hero) .carousel-item img.img-fluid {
    max-height: 70vh;
}

#caseGallery .carousel-indicators {
  gap: 10px 0.33%;
}

#caseGallery .carousel-indicators .list-inline-item {
  display: flex;
  align-items: center;
  width: 14%;
  border-bottom: none;
}

.template:has(.case-study-hero) .carousel-indicators .list-inline-item.active > a {
  border: 1px solid black;
}

.template:has(.case-study-hero) .carousel-indicators .list-inline-item:not(.active) {
  opacity: 0.25;
}

.highlight-image {
  width: 100%;
  height: 400px;
  background-color: #ddd;
}

.card:has(.highlight-image) {
  border: none;
}

#highlights > div {
  padding: 1px;
  margin: 2rem 0;
  background-color: #0f3c50;
  border-radius: 9px;
  box-shadow: 0px 10px 20px #00000033;
}

#highlights > div > h3 {
  margin: 0.25rem 1rem;
  font-weight: 800;
  font-size: 1.5rem;
  font-variant: small-caps;
  text-transform: lowercase;
}

#highlights > div > p {
  padding: 0.5rem 1rem 0.75rem;
  margin-bottom: 0;
  background-color: white;
  border-radius: 0 0 8px 8px;
}

#highlights > div:nth-child(2n + 1) {
text-align: left;
}

#highlights > div:nth-child(2n) {
margin-left: auto;
}

.tech-group, .integrations-group {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.tech-group > div, .integrations-group > div {
  flex-wrap: wrap;
  gap: 0 .5rem;
}

.tech-group h4 {
  font-size: 1em;
  font-weight: 700;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 1px;
  margin-left: 0.25rem;
  color: var(--gray);
  whitespace: nowrap;
}

.tech-group > div > p {
  padding: 0.25rem 0.5rem;
  background-color: antiquewhite;
  text-wrap: nowrap;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  width: min-content;
  font-size: 0.8rem;
}

.integrations-group > div > p {
  background-color: #cff3eb;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  margin-right: 0.25rem;
  text-wrap: nowrap;
  margin-bottom: 0.25rem;
  width: min-content;
  font-size: 0.8rem;
  whitespace: nowrap;
}