/* Import Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {

    /* Brand colors */

    --contrast: #E6302A;
    --contrast-2: #3C3734;
    --contrast-3: #680D00;
    --base: #ffffff;
    --base-2: #f7f8f9;
    --base-3: #ffffff;
    --accent: #554D83;
    --global-color-8: #574252;
    --header-transparent: rgba(0,0,0,0.25);
    
    /* Fluid Font Sizes (Converted from pt to rem) */
    --fs-68: clamp(2.25rem, 4vw, 3.75rem) !important;
    --fs-36: clamp(1.75rem, 2.8vw, 2.375rem) !important;
    --fs-32: clamp(1.50rem, 2.5vw, 2.125rem) !important;
    --fs-24: clamp(1.25rem, 1.8vw, 1.625rem) !important;
    --fs-20: clamp(1.125rem, 1.5vw, 1.375rem) !important;
    /* --fs-14: clamp(1.00rem, 1.2vw, 1.16rem)!important; */
    --fs-14: clamp(0.79rem, 1.04vw, 0.89rem) !important;
    --fs-12: clamp(0.875rem, 1.1vw, 1.00rem) !important;
    --fs-10: clamp(0.75rem, 1vw, 0.83rem)!important;
    
    /* Global Site Settings */
    --header-height: 80px;
    --site-grid-width: 1280px;
    --header-bg-alpha: rgba(0, 0, 0, 0.25);

    /* Font Weights */
    --fw-300: 300!important;
    --fw-regular: 400!important;
    --fw-400: 400!important;
    --fw-700: 700!important;
    --fw-800: 800!important;
    --fw-900: 900!important;

    /* Font Styles */
    --fs-normal: normal!important;
    --fs-italic: italic!important;
	
	/* misc variables */
	--team-icon-size: 36px!important;
}
/* General CSS */
/* Sets Montserrat for every element on the site */
*, *::before, *::after {
    font-family: 'Montserrat', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-header a:has(.header-logo) {
    display: inline-flex;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
}

/* Hide the break by default (Mobile-first approach) */
.desktop-only {
    display: none;
}

/* Show the break only on screens wider than 1024px */
@media (min-width: 1024px) {
    .desktop-only {
        display: block; /* or inline */
    }
}

/* Outer full-width container */
.section-full {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Inner contained content */

.section-inner {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 768px) {
    .section-inner {
        padding-left: 0;
        padding-right: 0;
    }
}

/* 1. Outer Wrapper - Full Width, Sticky, & 80px Height */
.header-sticky-transparent {
    width: 100% !important;
    height: 80px !important;
    position: fixed !important; /* Makes it sticky and puts content behind */
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.25) !important; /* Black with 0.25 opacity */
    display: flex;
    align-items: center; /* Centers the inner container vertically */
}

.header-inner-grid {
  width: 100%;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.header-inner-grid .main-navigation {
  margin-left: auto;
  margin-right: 3rem;
}

@media (max-width: 768px) {
.header-inner-grid .main-navigation {
  margin-left: auto;
  margin-right: 0rem;
}
}

.header-inner-grid .custom-lang-switcher--desktop {
  margin-left: 0;
}

/* Header CSS */
/* 1. Desktop Styles - Keep as is */
.custom-header-nav .gb-menu .gb-menu-link {
    font-size: clamp(1.00rem, 1.2vw, 1.16rem) !important;
    font-weight: var(--fw-regular) !important; 
    color: #ffffff !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* Hover effect */
.custom-header-nav .gb-menu .gb-menu-link:hover {
    opacity: 0.7;
}

@media (max-width: 768px) {
    /* 1. Force the Overlay to be Full Screen Height */
    .gb-menu-container--mobile.gb-menu-container--toggled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        background-color: var(--contrast)!important;
    }

    /* 2. Style the Menu Links for Mobile */
    .gb-menu-container--mobile.gb-menu-container--toggled .gb-menu-link {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 1.8rem !important;
        font-weight: var(--fw-700) !important; 
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        text-transform: none;
        letter-spacing: 0.05em;
    }

    /* 3. Center the List Items (Updated ID to #menu-main-menu) */
    .gb-menu-container--toggled ul[id^="menu-main-menu-"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
}

/* Target the link inside the current menu item */
.gb-menu .current-menu-item a {
    opacity: 0.7;
    transition: opacity 0.3s ease; /* Optional: makes the change smooth */
}

/* Optional: Ensure it stays visible or changes on hover */
.gb-menu .current-menu-item a:hover {
    opacity: 1;
}


button.toggle-button {
  background: transparent !important;
}

.logo-wrapper {
  width: max-content;
  background: transparent;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.8rem;
  margin-top: 0;
}

.custom-lang-switcher {
    display: inline-block;
    white-space: nowrap;
}

.custom-lang-switcher .lang-link,
.custom-lang-switcher .lang-active {
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    color: #ffffff !important;
    display: inline;
}

.custom-lang-switcher .lang-active {
    font-weight: var(--fw-700) !important;
}

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

.custom-lang-switcher .lang-link:hover {
    text-decoration: underline;
}

.custom-lang-switcher .lang-separator {
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    color: #ffffff !important;
    padding: 0 0.25em;
    display: inline;
}

/* Hide desktop version on mobile (below 768px) */
@media (max-width: 768px) {
    .custom-lang-switcher--desktop {
        display: none;
    }
    
    /* Show and center mobile version */
    .language-switcher-mobile .custom-lang-switcher--desktop {
        display: inline-block;
        width: 100%;
    }
    
    .language-switcher-mobile {
        text-align: center;
        display: block;
        width: 100%;
    }
}

/* startseite css */
.startseite-hero {
    aspect-ratio: 16 / 9;
    position: relative;
}

@media (max-width: 1024px) {
    .startseite-hero {
        aspect-ratio: 9 / 16;
    }
}

.hero-svg-overlay {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: auto;
    pointer-events: none;
    z-index: 2;
}

@media (min-width: 1025px) {
    .hero-svg-overlay {
        width: 70%;
        bottom: -2rem;
    }
}

.red-section {
    background: #e6302a;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem; 
}

.white-section {
    background: #ffffff;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem; 
}

.gray-section {
    background: #cbc5ca;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem; 
}

.startseite-main-title {
    color: #ffffff!important;
    width: 70%;
    font-size: var(--fs-32)!important;
    font-weight: var(--fw-700)!important;
    font-style: var(--fs-normal)!important;
}

.startseite-main-intro {
    color: #FFFFFF!important;
    font-size: var(--fs-14)!important;
    font-weight: var(--fw-regular)!important;
    font-style: var(--fs-normal)!important;
}

.startseite-main-intro {
  column-count: 1;
  gap: 2rem;
}

@media (min-width: 768px) {
  .startseite-main-intro {
    column-count: 2;
  }
}

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.background-video-content {
    position: relative;
    z-index: 1;
}

video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* 1. Main Card - Completely transparent to show section background */
.standort-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0; 
    background: transparent; /* No white background anymore */
    border-radius: 0; 
    box-shadow: none; 
    border: none; 
}

/* 2. Image - Flush with map */
.standort-image {
    margin-bottom: 0 !important; 
    width: 100%;
    display: block;
}

/* 3. Map Container - Flush between image and text */
.standort-map-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    line-height: 0; 
}

.standort-map-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}


.standort-map-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    line-height: 0;
}

.wpv-addon-maps-render {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    display: block;
    margin: 0 !important;
}

.standort-map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* 4. Text Sections - Only the text is padded */
.standort-title, 
.standort-description {
    padding-left: 0;
    padding-right: 0;
}

.standort-title {
    font-weight: bold;
    /*margin-top: 1.2rem; 
    margin-bottom: 0.6rem;*/
    color: #000000;
    font-size: 150%;
}

.standort-description {
    margin-bottom: 0.6rem;
    font-size: 90%;
    color: #000000;
    width: 80%;
}

.standort-description p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Keep the title sharp and blue even when it is a link */
.standort-title a {
    color: #000000 !important; 
    text-decoration: none !important;
}

.standort-title a:hover {
    opacity: 0.8;
}

.wpv-view-output {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.standort-map-container {
    margin: 0 !important;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

.standort-map-container br,
.standort-card br {
    display: none;
}

.wpv-addon-maps-render {
    margin: 0 !important;
    display: block;
}

/* Container for the email and icon */
.standort-e-mail {
    display: flex;
    align-items: center; 
    gap: 0.3rem; 
    margin-bottom: 0;
    font-size: 90%;
    color: #000000; /* Set to pure black */
}

/* Styling the Icon */
.standort-e-mail .gb-shape {
    color: #000000; /* Set icon to pure black */
    display: flex;
    align-items: center;
}

/* Styling the Link */
.standort-e-mail a {
    text-decoration: none !important;
    color: #000000 !important; /* Set link to pure black */
}

.standort-e-mail a:hover {
    opacity: 0.7; /* Subtle visual feedback on hover without changing color */
}

.service-hero-section {
    height: 60vh;
    padding-block: 4rem;
    display: flex;
}

/* 2. The Inner Container (Targeted specifically) */
.service-hero-section .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.service-main-title {
    color: #FFFFFF;
    font-size: var(--fs-32)!important;
    font-weight: var(--fw-700)!important;
    font-style: var(--fs-normal)!important;
    line-height: 1.2;
    margin-bottom: 1.5rem!important;
}

.service-sub-title {
    color: #FFFFFF;
    font-size: var(--fs-24)!important;
    font-weight: var(--fw-700)!important;
    font-style: var(--fs-normal)!important;
    line-height: 1;
    margin: 0!important;
}

.service-grid-item {
    width: 80%;
}

.service-grid-item a.cta-btn {
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.3s ease;
    opacity: 1;
    font-size: var(--fs-14) !important;
}

.service-grid-item a.cta-btn:hover {
    color: #FFFFFF;
    text-decoration: none;
    opacity: 0.65;
}

.service-grid-title {
    color: #FFFFFF;
    font-size: var(--fs-20) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
}

.service-grid-title a {
    color: inherit;
    opacity: 1;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.service-grid-title a:hover {
    opacity: 0.65;
}

.service-grid-content {
    color: #FFFFFF;
    font-size: var(--fs-14)!important;
    font-weight: var(--fw-regular)!important;
    font-style: var(--fs-normal)!important;
}

.service-overview-section {
    height: auto;
    padding-block: 4rem;
    background: var(--contrast-2, #3C3734);
}

.service-below-section {
    height: 50vh;
    padding-block: 4rem;
}

.single-service-hero {
    background: var(--base-3, #ffffff);
    padding-block: 4rem;
    height: 60vh;
    display: flex;
}

.single-service-hero .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.single-service-main {
    background: #e4e3ec;
    padding-block: 4rem;
    height: auto;
}

.work-service-main {
    background: #3C3734;
    padding-block: 4rem;
    height: auto;
}

.service-work-title {
    color: #ffffff;
    font-size: var(--fs-24)!important;
    font-weight: var(--fw-700)!important;
    font-style: var(--fs-normal)!important;
    line-height: 1.2;
    margin-bottom: 1.2rem;
}

.single-service-main-title {
    color: #3C3734;
    font-size: var(--fs-32)!important;
    font-weight: var(--fw-700)!important;
    font-style: var(--fs-normal)!important;
    line-height: 1.2;
}

.single-service-main-content {
    color: #3C3734;
    font-size: var(--fs-14)!important;
    font-weight: var(--fw-regular)!important;
    font-style: var(--fs-normal)!important;
    column-count: 1;
    gap: 2rem;
}

@media (min-width: 768px) {
  .single-service-main-content {
    column-count: 2;
  }
}

.single-service-content {
    color: #3C3734;
    font-size: var(--fs-14)!important;
    font-weight: var(--fw-regular)!important;
    font-style: var(--fs-normal)!important;
}
.single-service-content ul {
    color: #3C3734;
    font-size: var(--fs-14)!important;
    font-weight: var(--fw-regular)!important;
    font-style: var(--fs-normal)!important;
    margin-left: 1.5rem!important;
    margin-right: 0rem!important;
    margin-bottom: 0rem!important;
    margin-top: 0rem!important;
}

.purple-section {
    background: var(--accent, #554D83);
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.max3-section {
    background: #000000;
    height: auto;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.max3-section .section-inner {
    max-width: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.max3-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    padding: 2rem 3rem 2rem 1.5rem;
}

@media (min-width: 768px) {
    .max3-content {
        padding: 2rem 3rem 2rem max(0rem, calc((100vw - 1140px) / 2));
    }
}

.max3-media {
    aspect-ratio: 1280 / 853;
}

.max3-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .max3-section .section-inner {
        grid-template-columns: 1fr;
    }
    
    .max3-media {
        order: -1; /* moves image above content */
    }
    
    .max3-content {
        padding: 2rem 1.5rem;
    }
}

.team-section {
    background: var(--contrast-2, #3C3734);
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem; 
}

.linkedin-icon-wrap svg {
    width: 40px;
    height: 40px;
    fill: #ffffff;
    display: block;
    transition: fill 0.3s ease;
}

.linkedin-icon-wrap:hover svg {
    fill: #0077b5;
}

.team-card {
    position: relative;
}

.team-card .team-linked-in-link {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    z-index: 10;
}

.team-card .team-linked-in-link svg {
    width: var(--team-icon-size, 36px)!important;
    height: var(--team-icon-size, 36px)!important;
    fill: #ffffff;
    display: block;
    transition: fill 0.3s ease;
}

.team-card .team-linked-in-link:hover svg {
    fill: #0077b5;
}

/* Remove the span wrapper styling if GB adds any */
.team-card .team-linked-in-link .gb-shape {
    display: flex;
    line-height: 1;
}

.team-card-title,
.team-card-title a {
    color: #ffffff!important;
    font-weight: var(--fw-700)!important;
    text-decoration: none;
}

.team-card-content {
    color: #ffffff!important;
    font-weight: var(--fw-400)!important;
    font-size: var(--fs-14);
}

.sub-main-title,
h3.sub-main-title {
    color: #ffffff!important;
    width: 70%;
    font-size: var(--fs-68)!important;
    font-weight: var(--fw-700)!important;
    font-style: var(--fs-normal)!important;
    margin-bottom: 0!important;
    line-height: 1!important;
    padding-bottom: 0!important;
    margin-top: 0;
    padding-top: 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    position: relative;
    z-index: 999;
}

.work-section {
    background: #000000;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem; 
}

.references-section {
    background: #000000;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem; 
}

.sub-reference-title {
    color: #ffffff!important;
    width: 70%;
    font-size: var(--fs-36)!important;
    font-weight: var(--fw-700)!important;
    font-style: var(--fs-normal)!important;
    line-height: 1!important;
    margin-bottom: 4rem;
}

.reference-logo {
    max-height: 60px!important;
    max-width: auto;
}

.reference-logo {
    display: block;
    width: 100%;
    max-width: 160px;
    height: 60px;
    object-fit: contain;
    object-position: center;
}

.news-section {
    background: #E6302A;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.footer-section {
    background: #000000;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;   
}

.inner-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
.inner-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    align-items: center;
    align-content: center;
}
}

/* === Social Icons === */
.social-media-icon-wrapper,
.social-media-icon-wrapper .social-btn,
.social-media-icon-wrapper .social-btn .gb-shape {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* === Side by side, no wrapping === */
.social-media-icon-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 768px) {
    .social-media-icon-wrapper {
        justify-content: flex-start;
    }
}

/* === Icon sizing === */
.social-btn .gb-shape svg {
  width: 46px !important;
  height: 46px !important;
  display: block;
  fill: #ffffff;
  transition: fill 0.3s ease;
}

@media (max-width: 768px) {
  .social-btn .gb-shape svg {
    width: 36px !important;
    height: 36px !important;
  }
}

/* === Hover colors === */
.social-btn--facebook:hover  .gb-shape svg { fill: #1877F2; }
.social-btn--instagram:hover .gb-shape svg { fill: url(#ig-gradient); }
.social-btn--linkedin:hover  .gb-shape svg { fill: #0077b5; }
.social-btn--youtube:hover   .gb-shape svg { fill: #FF0033; }
.social-btn--twitter:hover   .gb-shape svg { fill: #555555; }

/* === Footer Buttons === */
.footer-btn-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}

.footer-btn {
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  background-color: var(--global-color-8, #574252) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  font-size: 14px;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-btn:hover {
  background-color: #ffffff !important;
  color: var(--global-color-8, #574252) !important;
}

.footer-logo-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
}

.footer-logo {
    height: 46px !important;
    width: auto;
}

@media (max-width: 768px) {
  .footer-logo {
    width: auto !important;
    height: 36px !important;
  }
}

.bottom-footer-section {
    background: #000000;
    height: auto;
    padding-top: 0rem;
    padding-bottom: 1.2rem;   
}

.inner-footer-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0rem;
}

@media (min-width: 768px) {
.inner-footer-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0rem;
    align-items: center;
    align-content: center;
}
}

/* === Desktop text === */
.bottom-footer-text-desktop,
.bottom-footer-text-desktop a {
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.bottom-footer-text-desktop a:hover {
  opacity: 0.7;
}

/* === Remove p margin/padding === */
.bottom-footer-text-desktop,
.bottom-footer-text-mobile {
  margin: 0 !important;
  padding: 0 !important;
}

/* === Desktop text === */
.bottom-footer-text-desktop,
.bottom-footer-text-desktop a {
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.bottom-footer-text-desktop a:hover { opacity: 0.7; }

/* === Mobile text === */
.bottom-footer-text-mobile,
.bottom-footer-text-mobile a {
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.bottom-footer-text-mobile a:hover { opacity: 0.7; }

/* === Visibility === */
.bottom-footer-text-mobile { display: none; }

@media (max-width: 768px) {
  .bottom-footer-text-desktop { display: none; }
  .bottom-footer-text-mobile  { display: block; }
}


/* ===========================
   GB Carousel arrows (TEAM)
   - Desktop only
   - Big white arrows (no button)
   - More left/right offset
   - Centered on the image area
=========================== */

#team-carousel.gb-carousel{
  position: relative;
}

/* 1) Remove button styling completely */
#team-carousel .gb-carousel-control{
  position: absolute;
  z-index: 30;

  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;

  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #fff !important;
  cursor: pointer;
  line-height: 0;
}

/* 2) Make arrow icon bigger */
#team-carousel .gb-carousel-control-icon svg{
  width: 56px;   /* <- size */
  height: 56px;  /* <- size */
  display: block;
  fill: currentColor;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); /* keeps it visible on bright images */
  transition: transform .18s ease, opacity .18s ease;
}

/* 3) More offset left/right (outside) */
#team-carousel .gb-carousel-control--previous{
  left: -70px;   /* <- more negative = more outside */
}
#team-carousel .gb-carousel-control--next{
  right: -70px;  /* <- more outside */
}

/* Your SVG points right by default -> flip for previous */
#team-carousel .gb-carousel-control--previous svg{
  transform: rotate(180deg);
}

/* 4) Move arrows up: center on image area (not whole section)
   Adjust these two values if needed.
*/
#team-carousel{
  --arrow-y: 155px; /* distance from top of carousel */
}

/* Place arrows vertically */
#team-carousel .gb-carousel-control{
  top: var(--arrow-y);
  transform: translateY(-50%);
}

/* Hover */
#team-carousel .gb-carousel-control:hover .gb-carousel-control-icon svg{
  transform: translateY(-2px) scale(1.06);
  opacity: .95;
}

/* Desktop only */
@media (max-width: 768px){
  #team-carousel .gb-carousel-control{
    display: none !important;
  }
}

/* Ueber uns Seite CSS */
.about-hero-section {
    height: 60vh;
    padding-block: 4rem;
    display: flex;
}

.about-hero-section .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.about-main-title {
    color: #FFFFFF;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.about-sub-title {
    color: #FFFFFF;
    font-size: var(--fs-24) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1;
    margin: 0 !important;
}

.about-facts-section {
    height: auto;
    padding-block: 4rem;
    display: flex;
    background: var(--contrast-2, #3C3734);
}

.about-us-facts-value {
    color: #FFFFFF;
    font-size: var(--fs-24) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
}

.about-us-facts-value {
    color: #FFFFFF;
    font-size: var(--fs-24) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
}

.about-us-facts-title {
    color: #FFFFFF;
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
}

.about-us-facts-content {
    color: #FFFFFF;
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    font-style: var(--fs-normal) !important;
}

.your-benefit-section {
    background: #554D83;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.sustainability-section {
    background: #ffffff;
    height: auto;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.sustainability-section .section-inner {
    max-width: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

@media (max-width: 768px) {
    .sustainability-section .section-inner {
        grid-template-columns: 1fr;
    }
    
    .sustainability-media {
        order: -1; /* moves image above content */
    }
    
    .sustainability-content {
        padding: 2rem 1.5rem;
    }
}

.sustainability-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--contrast-2, #3C3734);
    padding: 2rem 3rem 2rem calc(max(1.5rem, (100vw - 1280px) / 2));
}

.sustainability-media {
    aspect-ratio: 1280 / 853;
}

.sustainability-inner-title {
    color: var(--contrast-2, #3C3734);
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.partner-section {
    background: var(--contrast-3, #680D00);
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.partner-section-title {
    color: #FFFFFF;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 0.5rem !important;
}

.partner-section-content {
    color: #FFFFFF;
    font-weight: var(--fw-400) !important;
    font-style: var(--fs-normal) !important;
    margin-bottom: 1.5rem !important;
}

/* ==============================
   Partner / Membership Logo Grid
   ============================== */

.my-partner-grid-loop .gb-loop-item {
    display: flex;
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center */
    text-align: center;
}

.my-partner-grid-loop .gb-loop-item > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.my-partner-grid-loop img {
    max-width: 70%;
    height: auto;
}

.location-overview-title {
    color: var(--contrast-2, #3C3734);
    font-size: var(--fs-24) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 0.5rem !important;
}

/* Kontakt Seite CSS */
.contact-hero-section {
    height: 60vh;
    padding-block: 4rem;
    display: flex;
}

.contact-hero-section .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.contact-main-title {
    color: #FFFFFF;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.contact-sub-title {
    color: #FFFFFF;
    font-size: var(--fs-24) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1;
    margin: 0 !important;
}

.contact-first-section {
    height: auto;
    padding-block: 4rem;
    display: flex;
}

.contact-first-section .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.contact-first-title {
    color: var(--contrast-2, #3C3734);
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.contact-first-sub-title {
    color: var(--contrast-2, #3C3734);
    font-size: var(--fs-24) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 0 !important;
}

/* Let's Talk CTA CSS */
.lets-talk-cta-section {
    background: #feebe3;
    height: auto;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.lets-talk-cta-section .section-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .lets-talk-cta-section .section-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
}
}

.cta-title {
    color: #000000;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.cta-content {
    display: flex;
    flex-direction: column;
    column-gap: 0.4rem;
    color: #000000;
}

.cta-person {
    font-size: 120%;
}

.cta-email {
    font-size: 90%;
}


.cta-phone {
    font-size: 90%;
}

.cta-phone a,
.cta-email a {
    text-decoration: none !important;
    color: #000000 !important;
}

.cta-email a:hover,
.cta-phone a:hover {
    opacity: 0.7;
}

/* Jobs Seite CSS */
.jobs-hero-section {
    height: 60vh;
    padding-block: 4rem;
    display: flex;
}

.jobs-hero-section .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.single-job-section {
    padding-block: 6rem;
    height: auto;
    background: var(--contrast-2, #3C3734);
}

.job-overview-section {
    padding-block: 4rem;
    height: auto;
    background: #FFFFFF;
}
/* ============================================================
   1. MAIN GRID ITEM (OUTER WRAPPER)
   ============================================================ */
.gb-loop-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

/* ============================================================
   2. THE BACKGROUND BOX (RATIO: 2/3)
   ============================================================ */
.job-card {
    position: relative;
    overflow: hidden; /* Important: Crops the SVG inside the card */
    width: 100%;
    aspect-ratio: 2 / 3; /* Forces the 2:3 vertical poster ratio */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Adjust to flex-end if you want text at bottom */
    padding: 40px;
    box-sizing: border-box;
    margin-bottom: 25px; /* Space between box and text content below */
    border-radius: 0px;
}

/* ============================================================
   3. THE TAGLINE TEXT (INSIDE BOX)
   ============================================================ */
.job-card .gb-text {
    position: relative;
    z-index: 10; /* Ensures text is always above the SVG shape */
    font-size: var(--fs-32); /* Responsive sizing */
    font-weight: 800;
    line-height: 1.1;
    max-width: 85%; /* Keeps text chunky/wrapped like the image */
    color: #3C3734; /* Default text color */
}

/* ============================================================
   4. THE SVG SHAPE (SHARED SETTINGS)
   ============================================================ */
.dynamic-shape {
    position: absolute;
    z-index: 1; /* Sits behind the text */
    pointer-events: none; /* User can click "through" it */
    width: 80%; /* Relative width based on card size */
    transition: all 0.4s ease; /* Smooth if you add hover effects later */
}

/* ============================================================
   5. TOOLSET STYLE VARIANTS (RADIO CHOICES)
   ============================================================ */

/* STYLE A: RED CIRCLE (Bottom Right) */
.style-red-circle {
    background-color: #FDECE4 !important;
    color: #FF4D5E; /* Colors the SVG path via currentColor */
}
.style-red-circle .dynamic-shape {
    right: -15%;
    bottom: 15%;
    width: 75%;
}

/* STYLE B: DARK BLOB (Top Left) */
.style-dark-blob {
    background-color: #D8D7DA !important;
    color: #3C3734;
}
.style-dark-blob .dynamic-shape {
    top: -10%;
    left: -15%;
    width: 80%;
}
/* Optional: White text for dark elements if they overlap too much */
.style-dark-blob .gb-text {
    color: #FFFFFF; 
}

/* STYLE C: PINK LETTER (Bottom Left) */
.style-pink-letter {
    background-color: #F8C8C4 !important;
    color: #423B44;
}
.style-pink-letter .dynamic-shape {
    left: -10%;
    bottom: -5%;
    width: 95%;
}
.style-pink-letter .gb-text {
    color: #ffffff; /* White text as seen in your "Freie Influencer" image */
}

.job-media {
    margin-bottom: 3rem;
}

/* ============================================================
   6. CONTENT AREA BELOW (OUTSIDE BOX)
   ============================================================ */
.job-cta-tagline {
    font-weight: var(--fw-700);
    text-transform: none;
    margin: 0 0 10px 0;
    letter-spacing: 0.05em;
    color: #000000;
}

.job-cta-content {
    line-height: 1.5;
    color: #000000;
    margin-bottom: 25px;
    max-width: 95%;
}

.job-cta-button {
    display: inline-flex !important;
	align-items: center;
    justify-content: center;
    background-color: #e6302a;
    color: #ffffff !important;
    padding: 12px 16px !important;
    text-decoration: none;
	border: none !important;
    font-weight: 400;
	font-size: 14px;
    border-radius: 0px;
	white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.job-cta-button:hover {
    opacity: 0.9;
    background-color: #000000;
}

/* single job */
/* ============================================================
   CONFIGURATION: Change these values to adjust the design
   ============================================================ */
:root {
    --hero-bg-color: #e2dee0;      /* Background of the inner box */
    --hero-svg-color: #f69994;     /* Color of the SVG shape */
    --hero-text-color: #3C3734;    /* Color of the Headlines/Text */
    --hero-btn-bg: #3C3734;        /* Button Background */
    --hero-btn-text: #ffffff;      /* Button Text */
}

/* ============================================================
   1. OUTER & INNER CONTAINERS
   ============================================================ */
.single-job-section {
    background-color: #38312F; 
    width: 100%;
    padding: 80px 0; 
}

.single-job-inner {
    position: relative;
    overflow: hidden;
    max-width: 1140px; 
    margin: 0 auto; 
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*min-height: 450px;*/
    background-color: var(--hero-bg-color) !important; 
    color: var(--hero-svg-color);
}

/* ============================================================
   2. THE SVG SHAPE
   ============================================================ */
.single-job-inner .dynamic-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    width: 30%; 
    right: -60px; 
    top: 30%;
    transform: translateY(-50%);
}

/* ============================================================
   3. TEXT CONTENT (Typography Control)
   ============================================================ */
.single-job-inner .gb-text, 
.single-job-inner h3 {
    position: relative;
    z-index: 10;
    color: var(--hero-text-color);
}

.single-job-inner .gb-text {
    font-weight: var(--fw-700);
}

.single-job-inner h3 {
    font-size: var(--fs-32);
    font-weight: 800;
    line-height: 1.1;
    margin: 15px 0 25px 0;
}

/* ============================================================
   4. THE BUTTON
   ============================================================ */
.single-job-inner a.gb-text-fcabd5d7 {
    display: inline-block;
    background-color: var(--hero-btn-bg);
    color: var(--hero-btn-text) !important;
    padding: 14px 35px;
    text-decoration: none;
    font-weight: bold;
    align-self: flex-start;
    z-index: 10;
    border-radius: 2px;
}

.intro-jobs-title {
    color: #000000;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.intro-jobs-content {
    color: #000000;
    font-weight: var(--fw-regular) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 0 !important;
}

.cta-jobs-title {
    color: #FFFFFF;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.cta-jobs-content {
    color: #FFFFFF;
    font-weight: var(--fw-regular) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

/* single client css */
.client-hero-section {
    padding-block: 4rem;
    height: 70vh;
    display: flex;
    position: relative;
}

.client-hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.client-hero-section .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.client-logo {
    display: block;
    width: 100%;
    max-width: 200px;
    height: 80px;
    object-fit: contain;
    object-position: center;
}

.client-about-what-section {
    background: #FFFFFF;
    padding-block: 4rem;
    height: auto;
    display: flex;
}

.about-what-title {

}

.about-what-title {
    color: #000000;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.about-what-content {
    color: #000000;
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    font-style: var(--fs-normal) !important;
    margin-bottom: 0;
}

.video-section {

}

.video-wrapper {
    width: 100%;
}

.video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

.information-section {
    background: #3C3734;
    padding-block: 4rem;
    height: auto;
    display: flex;
}

.information-section .section-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
  .information-section .section-inner {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.client-information-title {
    color: #ffffff;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.client-information-content {
    color: #ffffff;
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    font-style: var(--fs-normal) !important;
    margin-bottom: 0;
}

.client-facts-section {
    background: #FFFFFF;
    height: auto;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.client-facts-section .section-inner {
    max-width: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.client-facts-media {
    aspect-ratio: 1280 / 853;
}

.client-facts-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.client-facts-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #000000;
    padding: 2rem 3rem 2rem 1.5rem;
}

@media (min-width: 768px) {
    .client-facts-content {
        padding: 2rem 3rem 2rem calc((100vw - 1140px) / 2);
    }
}

@media (max-width: 768px) {
    .client-facts-section .section-inner {
        grid-template-columns: 1fr;
    }
    
    .client-facts-media {
        order: -1; /* moves image above content */
    }
    
    .client-facts-content {
        padding: 2rem 1.5rem;
    }
}

.client-main-title {
    color: #FFFFFF;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 0 !important;
}

.client-facts-content h4,
.stat-value {
    color: #000000;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.1;
    margin-bottom: 0.8rem !important;
}

.stats-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.stat-value {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.stat-value p {
    margin: 0;
}

.stat-description p {
    margin: 0;
}

.image-gallery-section .section-inner {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.gallery-grid {
    display: flex;
}

.gallery-item {
    flex: 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .gallery-grid {
        flex-direction: column;
    }
}

/* Single Blog CSS */
.single-blog-hero-section {
    height: 60vh;
    padding-block: 4rem;
    display: flex;
}


.single-blog-hero-section .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.single-blog-hero-title {
    color: #FFFFFF;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.single-blog-main-section {
    height: auto;
    padding-block: 4rem;
    display: flex;
}

.single-blog-headline {
    color: #000000;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}


.single-blog-content,
.single-blog-content p {
    color: #000000;
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    font-style: var(--fs-normal) !important;
}

.single-blog-additional-images-section {
    width: 100%;
    height: auto;
    padding-block: 4rem;
    display: flex;
    background: var(--contrast-2, #3C3734);
}

.single-blog-additional-images-section .section-inner {
    width: 100%;
}

.additional-images-title {
    color: #FFFFFF;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.single-blog-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.single-blog-images__item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .single-blog-images {
        grid-template-columns: 1fr;
    }
}

.main-blog-hero-section {
    height: 60vh;
    padding-block: 4rem;
    display: flex;
}

.main-blog-hero-section .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.blog-main-title {
    color: #FFFFFF;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.main-blog-sub-title {
    color: #FFFFFF;
    font-size: var(--fs-24) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1;
    margin: 0 !important;
}

.main-blog-section {
    height: auto;
    padding-block: 4rem;
    display: flex;
    background: var(--contrast-2, #3C3734);
}

.blog-grid-item {
    display: grid;
    grid-template-columns: 29.6fr 24.1fr;
    gap: 4rem;
}

.blog-grid-media {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.blog-grid-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (max-width: 768px) {
    .blog-grid-item {
        grid-template-columns: 1fr;
    }
}

.blog-grid-content-title,
.blog-grid-content-title a {
    color: #FFFFFF;
    font-size: var(--fs-24) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    text-decoration: none;
    width: 80%;
}

.blog-grid-content-text {
    color: #FFFFFF !important;
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    font-style: var(--fs-normal) !important;
    margin-bottom: 0;
    width: 80%;
}

.blog-grid-link,
.blog-grid-link a {
    color: #0077b5 !important;
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    margin-bottom: 0;
    text-decoration: none;
}

/* Work CSS */
.work-hero-section {
    height: 60vh;
    padding-block: 4rem;
    display: flex;
}

.work-hero-section .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.work-main-title {
    color: #FFFFFF;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.work-sub-title {
    color: #FFFFFF;
    font-size: var(--fs-24) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1;
    margin: 0 !important;
}

.work-main-section {
    height: auto;
    padding-block: 4rem;
    display: flex;
    background: var(--contrast-2, #3C3734);
}

.work-main-category-title {
    color: #FFFFFF;
    font-size: var(--fs-36) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.1;
    margin-bottom: 1.5rem !important;
}

.work-card-title,
.work-card-title a {
    color: #FFFFFF;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.1;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    text-decoration: none;
}

.work-card-excerpt {
    color: #FFFFFF;
    font-weight: var(--fw-400) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.4;
    font-size: var(--fs-14);
}

.category-inner-section:not(:last-child) {
    padding-bottom: 3rem!important;
}

/* Team Page CSS */
.team-hero-section {
    height: 60vh;
    padding-block: 4rem;
    display: flex;
}

.team-hero-section .section-inner {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.team-main-title {
    color: #FFFFFF;
    font-size: var(--fs-32) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1.2;
    margin-bottom: 1.5rem !important;
}

.team-sub-title {
    color: #FFFFFF;
    font-size: var(--fs-24) !important;
    font-weight: var(--fw-700) !important;
    font-style: var(--fs-normal) !important;
    line-height: 1;
    margin: 0 !important;
}

.team-main-section {
    background-color: #38312F;
    width: 100%;
    padding-top: 4rem;
    padding-bottom: 4rem;
}