/* --- Body Styles --- */
:root {
    --black: #000;
    --d-grey: #4D4D4D;
    --grey: #717171;
    --l-grey: rgba(161, 161, 161, 0.15);
    --white: #fff;
    --primary-purple: #7A65B1;
    --secondary-pink: #F3816E;
    --accessible-pink: #E46C54;
    --l-secondary: #FEF2F0;
    --shade1: #583F9B;
    --shade2: #441885;
    --shade3: #310C69;
    --tint1: #8E7CBD;
    --tint2: #A192C8;
    --tint3: #B3A7D3;
    --tint4: #C6BDDE;
    --tint5: #D9D2E8;
    --primary-gradient: linear-gradient(to right,  #310C69 0%,#f3816e 100%);
    --purple-gradient: linear-gradient(to bottom,  #583F9B 0%,#310c69 100%);
    --zalando-sans: "Zalando Sans", sans-serif;
    --geist-mono: "Geist Mono", monospace;
    --bs-body-line-height: 2.4rem;
    --bs-body-font-size: 1.6rem;
    --bs-body-font-weight: 400;
    --bs-body-color: ;
}
*,
*:after,
*:before {
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-smooth: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
html {
	font-size: 62.5%;
    scroll-behavior: smooth;
}
body {
    background-color: var(--white);
    color: var(--d-grey);
    font-family: var(--zalando-sans);
    line-height: var(--bs-body-line-height);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    letter-spacing: 0%;
    min-width: 100%;
    overflow-x: hidden;
}
.button {
    display: block;
    width: fit-content;
    background-color: var(--shade2);
    border: 3px solid var(--shade2);
    color: var(--white);
    border-radius: 4px;
    padding: 16px 32px;
    font-size: 14pt;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}
.button:hover {
    background-color: var(--white);
    color: var(--shade2) !important;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
.button.secondary {
    background-color: var(--white);
    color: var(--shade1);
    border: 3px solid var(--white);
    transition: 0.3s ease-in-out;
}
.button.secondary:hover{
    background: #FFFFFF90;
}
img {
    border-radius: 8px;
}
.container {
    padding-top: 8rem;
    padding-bottom: 8rem;
}
.l-secondary-bg {
    background-color: var(--l-secondary);
}
.l-grey-bg {
    background-color: rgba(38, 50, 56, 0.05);
}
.purple-gradient {
    background: var(--purple-gradient);
}
.primary-gradient {
    background: var(--primary-gradient);
}
.t5-bg {
    background-color: var(--tint5);
}


/* --- Heading Styles --- */
h1 {
    font-size: 6.4rem;
    line-height: 7.2rem;
    font-weight: var(--bs-body-font-weight);
    margin: 0;
}
h2 {
    font-size: 4.8rem;
    line-height: 5.2rem;
    font-weight: var(--bs-body-font-weight);
    color: var(--shade1);
}
h3 {
    font-size: 4rem;
    line-height: 4.6rem;
    font-weight: var(--bs-body-font-weight);
}
h4 {
    font-size: 2.8rem;
    line-height: 3.4rem;
    font-weight: var(--bs-body-font-weight);
}
h4.alternative {
    font-family: var(--geist-mono);
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 600;
    letter-spacing: 2.4px;
}
h5 {
    font-size: 1.8rem;
    line-height: 2.4rem;
    font-weight: 600;
}
h5.alternative {
    font-family: var(--geist-mono);
    color: var(--accessible-pink);
    font-size: 2rem;
    line-height: 2.4rem;
    letter-spacing: 2px;
    font-weight: 700;
}
h6 {
    font-size: 1.8rem;
    line-height: 2.4rem;
    font-weight: var(--bs-body-font-weight);
}
h6.alternative {
    font-family: var(--geist-mono);
    font-size: 1.8rem;
    line-height: 2.2rem;
    letter-spacing: 1.8px;
    font-weight: var(--bs-body-font-weight);
}


/* --- Superheader --- */
#super-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    line-height: 46px;
    background-color: var(--light-gray);
    transition: 0.3s ease-in-out;
    z-index: 100;
}
#super-header a {
    line-height: 1.8rem;
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--d-grey) !important;
    padding-right: 2rem;
    border-right: 1px solid var(--d-grey);
}
#super-header a:hover {
    text-decoration: none;
    color: var(--bs-body-color);
}
#super-header .mobile-only {
    display: none;
}
#super-header .row > div:last-of-type {
    gap: 2rem;
}
#super-header .row > div:last-of-type div:has(label) {
    display: flex;
    flex-direction: row;
}
#super-header .form-label {
    display: none;
}
#super-header .form-select {
    background-color: transparent;
    border: none;
    color: var(--d-grey);
    line-height: 1.8rem;
    font-weight: 500;
    font-size: 1.4rem;
    font-family: var(--zalando-sans);

}


/* --- Header --- */
#header {
    position: fixed;
    top: 46px;
    height: 100px;
    width: 100%;
    background: var(--primary-gradient);
    z-index: 999;
    transition: ease-in-out 0.3s;
}
#header .row {
    align-items: center;
    height: 100%;
}
#header .container {
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
}
#header img {
    border-radius: 0;
    max-height: 6rem;
    width: auto;
    height: 100%;
    transition: ease-in-out 0.3s;
}


/* scroll down styles */
#super-header.scrolldown {
    transition: 0.3s ease-in-out;
}
#header.scrolldown {
    top: 0;
    height: 80px;
    box-shadow: 0 4px 12px #00000020;
    transition: ease-in-out 0.3s;
}
#header.scrolldown img {
    max-height: 5rem;
    transition: ease-in-out 0.3s;
}
#main.scrolldown {
    margin-top: 80px;
    transition: ease-in-out 0.3s;
}

/* scroll up styles */
#super-header.scrollup {
    transition: 0.3s ease-in-out;
}
#header.scrollup {
    top: 46px;
    height: 80px;
    box-shadow: 0 4px 12px #00000020;
    transition: ease-in-out 0.3s;
}
#header.scrollup img {
    max-height: 5rem;
    transition: ease-in-out 0.3s;
}
#main.scrollup {
    margin-top: 126px;
    transition: ease-in-out 0.3s;
}


/* --- Header -> Main Nav Menu --- */
#header .button {
    display: block;
    margin-left: auto;
    margin-right: 0;
    width: fit-content;
}
#header .button:hover {
    background: var(--white);
    border-color: var(--white);
}


/* --- Home -> Hero --- */
section#main {
    margin-top: 146px;
    position: relative;
    display: block;
}
.home-hero {
    background-size: cover;
    background-position: 0% 25%;
}
.hero-overlay {
    background: linear-gradient(to right,  #310C69CC 0%, #743328CC 100%);
}
.hero-overlay .container {
    padding-top: 15rem;
    padding-bottom: 15rem;
}
.home-hero h1 {
    color: var(--white);
    text-align: center;
}
.home-hero span {
    display: block;
    font-family: var(--geist-mono);
    font-size: 2rem;
    line-height: 2.4rem;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--secondary-pink);
}


/* --- Home -> About --- */
.about-section .row {
    align-items: center;
}
.about-section .col-lg-2 {
    padding-right: 4rem;
}
.about-section .col-lg-10 {
    border-left: 1px solid var(--black);
    padding-left: 4rem;
    color: var(--d-grey);
}
.about-section h2 {
    margin-bottom: 16px;
    color: var(--d-grey);
}
.about-section h4 {
    color: var(--d-grey);
}
.about-section img {
    max-width: 150px !important;
    height: auto !important;
    border-radius: 0;
}


/* --- Home -> Automation & Integration 2 Col --- */
.automation-integration .container {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}
.automation-integration .col-lg-6 {
    padding: 8rem;
}
.automation-integration .purple-gradient {
    position: relative;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    color: var(--secondary-pink);
    text-align: center;
}
.automation-integration .purple-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-50vw + 50%);
  right: 0;
  background: var(--purple-gradient);
  z-index: -1;
}
.automation-integration .purple-gradient img {
    max-width: 40rem;
    width: 100%;
    height: auto;
    border-radius: 0;
}
.automation-integration .t5-bg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(-50vw + 50%);
  background-color: var(--tint5);
  z-index: -1;
}
.automation-integration ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7rem;
}
.automation-integration ul li {
    flex-basis: calc(50% - 3.5rem);
    text-align: center;
    color: var(--d-grey);
}
.automation-integration ul li img {
    width: 100%;
    max-width: 5rem;
    height: auto;
    margin-bottom: 15px;
}


/* --- Home -> Vision to Value --- */
.vision-to-value h2 {
    margin-bottom: 2rem;
}
.details-list {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.details-list img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 7rem;
    width: 100%;
    height: auto;
}
.details-list h6.alternative {
    color: var(--grey);
}
.details-list h3 {
    color: var(--primary-purple);
}
.details-list p {
    font-size: 1.8rem;
    line-height: 2.8rem;
    color: var(--d-grey);
    width: 83.33333333%
}
.details-list i {
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 6rem;
    text-align: center;
}
.details-list details[open] h3 {
    margin-bottom: 2rem;
}
.details-list:has(details[open]) i::before {
    content: "\f056";
}


/* --- Home -> Our Services --- */
.services ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0;
    margin-top: 2rem;
}
.services ul li {
    flex-basis: calc(33.333% - 1rem);
    border-radius: 8px;
    padding: 2rem 2rem 15rem;
}
.services ul li >* {
    width: 75%;
}
.services ul li h4 {
    color: var(--shade1);
}
.services ul li p {
    color: var(--d-grey);
}


/* --- Home -> CTA banner -- */
.banner .row {
    align-items: center;
}
.banner h4 {
    color: var(--white);
}
.banner .button {
    display: block;
    width: fit-content;
    margin-right: 0;
    margin-left: auto;
}


/* --- Home -> Carousel --- */
wa-carousel-item {
    display: block !important;
    height: 100% !important;
    text-align: center;
}
.testimonial-carousel::part(base) {
    --aspect-ratio: auto !important;
}
.testimonial-carousel h4.alternative {
    margin-bottom: 20px;
    color: #7A65B1;
    font-family: "Geist Mono", monospace;
}
.testimonial-quote p {
    color: #4D4D4D;
}
.testimonial-carousel .quote p {
    font-family: "Zalando Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px; 
    color: #717171;
    margin-bottom: 20px;
}
.testimonial-carousel h5.alternative {
    font-family: "Geist Mono", monospace;
    color: #583F9B;
    margin-bottom: 8px;
}
.testimonial-carousel::part(pagination-item) {
    background-color: #8c8c8c;
    transform: scale(2);
}
.testimonial-carousel::part(pagination-item-active) {
    background-color: #555555;
    transform: scale(2);
}
.testimonial-carousel::part(pagination) {
    margin-top: 60px;
    gap: 30px;
}


/* --- Home -> BW Packaging blurb --- */
.bwpackaging .row {
    align-items: center;
}
.bwpackaging h4 {
    color: var(--d-grey);
    margin-bottom: 2rem;
}
.bwpackaging p {
    color: var(--grey);
    margin-bottom: 2rem;
}
.bwpackaging img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 150px !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 0;
}


/* --- Contact --- */
.contact-footer.purple-gradient h2 {
    color: var(--white);
    margin-bottom: 2rem;
}
.contact-footer.purple-gradient p {
    color: var(--white);
}
.contact-footer form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-right: 8rem;
}
.contact-footer label {
    color: var(--white);
    font-family: var(--geist-mono);
    font-size: var(--bs-body-font-size);
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 1.6px;
    margin-bottom: 1rem;
}
.contact-footer .hs-form-required {
    color: var(--secondary-pink);
}
.contact-footer fieldset {
    max-width: 100% !important;
    width: 100% !important;
}
.contact-footer .form-columns-2 {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}
.contact-footer fieldset.form-columns-2 .hs-form-field {
    width: 50% !important;
}
.contact-footer .input {
    margin-right: 0 !important;
}
.contact-footer input {
    width: 100%;
    border-radius: 4px;
    border: none;
    padding: 1rem 1.2rem;
}
.contact-footer .no-list.hs-error-msgs.inputs-list {
    list-style-type: none;
    color: var(--white);
    margin: 1rem 0 0;
    padding: 0;
}
.contact-footer .hs-fieldtype-intl-phone.hs-input .hs-input,
.contact-footer .hs-input.is-placeholder {
    border-radius: 4px;
    border: none;
    padding: 1rem;
}
.contact-footer .hs-input {
    width: 100% !important;
    border-radius: 4px;
    border: none;
    padding: 1rem 1.2rem;
}
.contact-footer .hs-fieldtype-select {
    margin-top: 2rem;
}
.contact-footer .legal-consent-container a {
    color: var(--secondary-pink);
}
.contact-footer .legal-consent-container a:hover {
    color: var(--white);
    text-decoration: none;
}
.contact-footer .legal-consent-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.contact-footer .hs-form-booleancheckbox-display {
    display: flex;
    flex-direction: row;
}
.contact-footer input[type=checkbox] {
    width: auto !important
}
.contact-footer input[type=submit] {
    display: block;
    width: fit-content;
    background-color: var(--white);
    border: 3px solid var(--white);
    color: var(--shade2);
    border-radius: 4px;
    padding: 16px 32px;
    font-size: 14pt;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}
.contact-footer input[type=submit]:hover {
    background: #FFFFFF30;
    color: var(--white) !important;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
.contact-footer fieldset:has(div[style*="display: none"]) {
    display: none;
}


/* --- Footer --- */
section#footer {
    background: var(--l-secondary);
}
section#footer .footer-sitemap .container {
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--secondary-pink);
}
section#footer .footer-sitemap h4 {
    margin-bottom: 2rem;
}
section#footer .footer-sitemap .col-lg-6:last-of-type {
    text-align: right;
}
section#footer .footer-sitemap h5.alternative {
    margin-bottom: 1rem;
    color: var(--shade1);
}
section#footer .footer-sitemap p {
    font-size: 1.8rem;
    line-height: 2.8rem;
}
section#footer .footer-sitemap .col-lg-6:last-of-type em {
    color: var(--d-grey);
    font-size: 2.8rem;
    transition: 0.3s ease-in-out;
}
section#footer .footer-sitemap .col-lg-6:last-of-type em:hover {
    color: var(--grey);
    transition: 0.3s ease-in-out;
}
section#footer .footer-legal .container {
    padding-top: 2rem;
    padding-bottom: 5rem;
    font-size: 1.4rem;
    line-height: 1.8rem;
}
section#footer .footer-legal .col-lg-3 {
    text-align: right;
}
section#footer .footer-legal ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 2rem;
}
section#footer ul li a {
    color: var(--d-grey);
    transition: 0.3s ease-in-out;
}
section#footer ul li a:hover {
    color: var(--grey);
    text-decoration: none;
    transition: 0.3s ease-in-out;
}