.contact {
    padding: 6.25rem 0
}

@media only screen and (min-width:45rem) {
    .contact {
        padding: 12.5rem 0
    }
}

.contact__content {
    margin: 0 auto;
    max-width: 31.25rem;
    text-align: center
}

@media only screen and (min-width:45rem) {
    .contact__content {
        max-width: 45rem
    }
}

.contact__title {
    color: var(--foreground);
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 var(--spacing-m)
}

@media only screen and (min-width:45rem) {
    .contact__title {
        font-size: 3.625rem;
        line-height: 1.1
    }
}

.contact__description {
    margin: 0 auto;
    max-width: 27.5rem;
    padding: 0 .5rem
}

@media only screen and (min-width:45rem) {
    .contact__description {
        max-width: 32.5rem;
        padding: 0
    }
}

.subheading {
    color: var(--body);
    font-size: 1.1875rem;
    line-height: 1.5
}

@media only screen and (min-width:45rem) {
    .subheading {
        font-size: 1.25rem
    }
}

/* Base padding for .hero */
.hero {
    padding: var(--spacing-m) 0;
}

/* Adjust padding for larger screens */
@media only screen and (min-width: 45rem) {
    .hero {
        padding: 3.125rem 0 5.625rem;
    }
}

/* Center content and limit max width */
.hero_grid {
    margin: 0 auto;
    max-width: var(--width-m);
}

/* Flexbox for vertical stacking */
.hero_grid,
.hero__text {
    display: flex;
    flex-direction: column;
}

/* Margin adjustments for hero__text */
.hero__text {
    margin-bottom: 4rem;
    margin-top: -2rem;
}

/* Adjust margins for larger screens */
@media only screen and (min-width: 45rem) {
    .hero__text {
        margin-bottom: 2.5rem;
        margin-top: 5rem;
    }
}

/* Title styling */
.hero-title {
    color: var(--foreground);
    font-family: var(--font-serif);
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.2; /* Adjust line height for better spacing */
    margin: 0 0 1.5rem;
    text-align: center; /* Center align text */
    white-space: normal; /* Ensure text wraps properly */
}

/* Adjust font size and margins for larger screens */
@media only screen and (min-width: 45rem) {
    .hero-title {
        font-size: 4.625rem;
        margin-bottom: var(--spacing-m);
    }
}

/* Larger font size for very large screens */
@media only screen and (min-width: 80rem) {
    .hero-title {
        font-size: 6.5rem;
    }
}

/* Ensure span elements stack correctly */
.hero-title span {
    display: block;
    text-align: center; /* Center align text inside spans */
    white-space: normal; /* Ensure spans do not break each letter */
}

*,
:after,
:before {
    box-sizing: border-box
}

:after,
:before {
    text-decoration: inherit;
    vertical-align: inherit
}

html {
    -webkit-tap-highlight-color: transparent;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    word-break: break-word
}

body {
    margin: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
    margin: 0
}

hr {
    color: inherit;
    height: 0;
    overflow: visible
}

main {
    display: block
}

nav ol,
nav ul {
    list-style: none;
    padding: 0
}

nav li:before {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    content: "​";
    height: .0625rem;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: .0625rem
}

pre {
    -ms-overflow-style: scrollbar;
    font-family: monospace, monospace;
    font-size: 1em;
    overflow: auto
}

a {
    background-color: transparent
}

abbr[title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

audio,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

iframe,
img {
    border-style: none
}

svg:not([fill]) {
    fill: currentColor
}

svg:not(:root) {
    overflow: hidden
}

table {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0
}

button,
input,
select {
    margin: 0
}

button {
    overflow: visible;
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

summary {
    display: list-item
}

canvas {
    display: inline-block
}

template {
    display: none
}

[tabindex],
a,
area,
button,
input,
label,
select,
summary,
textarea {
    -ms-touch-action: manipulation
}

:root {
    --font-base: 1rem;
    --font-sans-serif: "Fira Sans", Helvetica, Arial, sans-serif;
    --font-serif: "Fira Sans", Georgia, "Times New Roman", serif;
    --spacing-s: 1rem;
    --spacing-m: 2rem;
    --spacing-l: 4rem;
    --width-s: 40rem;
    --width-m: 67.5rem;
    --width-l: 81.25rem;
    --header-height-mobile: 4.5rem;
    --header-height-desktop: 5rem;
    --background: #E3FEF7;
    --foreground: #232320;
    --accent: #77B0AA;
    --body: #656270;
    --border: #e4e4e4;
    --alt-background: #fdf2d9
}

.sr-only {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.no-appearance {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
    background-color: transparent;
    border: 0;
    outline: 0;
    padding: 0
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans-serif);
    font-size: var(--font-base);
    min-height: calc(100vh - var(--vh-offset, 0px));
    overflow-x: hidden;
    padding-top: var(--header-height-mobile);
    width: 100%
}

@media only screen and (min-width:45rem) {
    body {
        padding-top: var(--header-height-desktop)
    }
}

.main-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

p {
    line-height: 1.5;
    margin: 0
}

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

img.lazy {
    opacity: 0
}

img:not(.initial) {
    transition: opacity 1s
}

img.error,
img.initial,
img.loaded {
    opacity: 1 !important
}

img:not([src]) {
    visibility: hidden
}

.header {
    background-color: var(--background);
    height: var(--header-height-mobile);
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3
}

@media only screen and (min-width:45rem) {
    .header {
        height: var(--header-height-desktop)
    }
}

.header__wrapper {
    -webkit-animation: headerFadeTransition .5s ease-in-out forwards;
    animation: headerFadeTransition .5s ease-in-out forwards;
    margin: 0 calc(var(--spacing-s)*-1);
    opacity: 0;
    overflow-y: hidden;
    padding: 0 var(--spacing-s)
}

@-webkit-keyframes headerFadeTransition {
    0% {
        opacity: 0;
        transform: translateY(-32px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes headerFadeTransition {
    0% {
        opacity: 0;
        transform: translateY(-32px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media only screen and (min-width:45rem) {
    .header__wrapper {
        height: 100%;
        margin: 0;
        overflow-y: auto;
        padding: 0
    }
}

.header__content {
    -webkit-overflow-scrolling: touch;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-bottom: -2.5rem;
    overflow: auto hidden;
    padding-bottom: 2.5rem;
    padding-left: var(--spacing-s);
    padding-right: var(--spacing-s)
}

@media only screen and (min-width:45rem) {
    .header__content {
        height: 100%;
        justify-content: center;
        margin-bottom: 0;
        overflow: auto;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0
    }
}

.header__logo-container {
    margin-right: var(--spacing-m)
}

@media only screen and (min-width:64rem) {
    .header__logo-container {
        margin-right: 0;
        order: 2
    }
}

.header__navigation-container {
    margin-right: var(--spacing-m)
}

@media only screen and (min-width:64rem) {
    .header__navigation-container {
        margin-right: 0;
        order: 1
    }

    .header__social-links-container {
        order: 3
    }

    .logo {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%)
    }
}

.logo img {
    height: 24px;
    width: 24px
}

.navigation ul {
    align-items: center;
    display: flex;
    margin: 0;
    white-space: nowrap
}

.navigation ul li {
    margin-right: 1.5rem
}

@media only screen and (min-width:45rem) {
    .navigation ul li {
        margin-right: var(--spacing-m)
    }
}

@media only screen and (min-width:64rem) {
    .navigation ul li {
        margin-right: var(--spacing-l)
    }
}

.navigation ul li:last-of-type {
    margin-right: 0
}

.navigation ul li.nav-current a {
    padding-bottom: .1875rem
}

.navigation ul li a {
    color: var(--foreground);
    font-size: 1rem;
    line-height: 1.2;
    position: relative;
    text-transform: lowercase;
}

.wrapper {
    margin: 0 auto;
    max-width: var(--width-l);
    padding: 0 var(--spacing-s);
    position: relative
}

@media only screen and (min-width:45rem) {
    .wrapper {
        padding: 0 var(--spacing-m)
    }
}

@media only screen and (min-width:64rem) {
    .wrapper {
        padding: 0 var(--spacing-l)
    }
}

@media only screen and (min-width:90rem) {
    .wrapper {
        padding: 0
    }
}

.wrapper.in-header {
    align-items: center;
    display: flex;
    height: 100%;
    padding: 0
}

@media only screen and (min-width:45rem) {
    .wrapper.in-header {
        display: block;
        padding: 0 var(--spacing-m)
    }
}

@media only screen and (min-width:64rem) {
    .wrapper.in-header {
        padding: 0 var(--spacing-l)
    }
}

@media only screen and (min-width:90rem) {
    .wrapper.in-header {
        padding: 0
    }
}

.social-links {
    align-items: center;
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0
}

@media only screen and (min-width:64rem) {
    .social-links {
        justify-content: flex-end
    }
}

.social-links.in-footer li:last-of-type {
    margin-right: 0
}

.social-links.in-footer li a svg {
    fill: var(--body)
}

.social-links li {
    margin: 0 var(--spacing-s)
}

@media only screen and (min-width:64rem) {
    .social-links li {
        margin: 0 var(--spacing-m)
    }
}

.social-links li:first-of-type {
    margin-left: 0
}

@media only screen and (min-width:45rem) {
    .social-links li:last-of-type {
        margin-right: 0
    }
}

.social-links li a svg {
    fill: var(--foreground);
    height: 1.25rem;
    width: 1.25rem
}

.footer {
    flex-shrink: 0;
    margin: 0 auto;
    padding-bottom: var(--spacing-m);
    position: relative;
    z-index: 2
}

@media only screen and (min-width:64rem) {
    .footer {
        margin: 0;
        padding-bottom: 6.25rem
    }

    .footer__content {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        max-width: var(--width-m)
    }
}

.copyright {
    color: var(--body);
    font-size: .875rem;
    line-height: 2;
    margin-bottom: var(--spacing-m);
    text-align: center
}

@media only screen and (min-width:64rem) {
    .copyright {
        margin-bottom: 0;
        text-align: left
    }
}

.copyright span {
    display: block
}

@media only screen and (min-width:64rem) {
    .copyright span {
        display: inline
    }
}

.carousel {
    width: 100vw;
    position: relative;
    background-color: #E3FEF7;
    overflow: hidden;
    padding: 60px 0 0 0;
}

.carousel-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    width: 100%;
    animation: scroll 40s linear infinite; /* Increased duration */
}

.carousel-slide {
    min-width: 100px;
    margin: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide img {
    width: 120px;
    height: auto;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}