/* Add your css code here */


/*
Variable Definitions:
  --r-bg: Sets the background color.
  --r-tx: Sets the text color.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Sets the link text color.
  --r-lk-h: Sets the hover color for link text.
  --r-br: Sets the border color.
  --r-bg-fr: Sets the background color for input forms.
  --r-tx-lk: Sets the menu link text color.
  --r-tx-lk-h: Sets the hover color for menu link text.
  --r-bg-lk: Sets the background color for menu links.
  --r-bg-lk-h: Sets the hover background color for menu links.
  --r-tx-bt: Sets the button text color.
  --r-tx-bt-h: Sets the hover color for button text.
  --r-bg-bt: Sets the button background color.
  --r-bg-bt-h: Sets the hover background color for buttons.
*/

:root {
    --color-orange: #f19900;
}


/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}
https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/


/*main layout*/

.header-inner .block-system-branding-block {
    margin-inline-end: auto;
    margin-inline-start: auto;
}

.header-inner .branding-wrapper {
    flex-direction: column;
}

.branding-wrapper .site-slogan {
    color: #dfdedd;
    font-family: "Geist Mono", serif !important;
}

.solo-inner ul.navigation__menubar li>a.is-active,
.solo-inner ul.navigation__menubar li.is-active>a,
.solo-inner ul.navigation__menubar li.is-active>button,
.page-wrapper a:not( .nav__menu-link, .button, .site-name-link, .site-logo, h1 a, h2 a, h3 a):hover {
    color: var(--color-orange);
}

.page-wrapper h1,
.page-wrapper h2,
.page-wrapper h3 {
    color: var(--color-orange);
    margin: 1rem 0;
}


/*home*/

.home-blocks {
    align-items: center;
    justify-content: space-between;
    margin: 2rem;
    flex-wrap: wrap;
}

.home-blocks .home-block-item {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    background-color: #f19900;
    border: 2px solid #f19900;
    margin: 1rem;
}

.home-blocks .home-block-item.direct {
    background: linear-gradient(0deg, #2c292b, #080808);
    border: 2px solid black;
}

.home-blocks .home-block-item a {
    padding: 2rem;
    display: block;
    width: 100%;
    height: 100%;
}

.home-blocks .home-block-item.direct a {
    color: white;
}

.home-blocks .home-block-item a:hover {
    text-decoration: none;
    color: #f8f8f8;
}

.home-blocks .home-block-item.direct a:hover {
    color: #f19900;
}


/*general*/

.solo-outer .region-inner {
    padding: 3rem;
}

.intro::first-letter {
    float: left;
    font-size: 4rem;
    line-height: 1;
    font-weight: bold;
    margin-right: 0.4rem;
    margin-top: 0.1rem;
    color: var(--color-orange);
}


/*mission teaser*/

.mission-teaser {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(0deg, #2c292b, #080808);
    border-radius: 0.25rem;
    overflow: hidden;
}

.mission-teaser:hover {
    transform: translateY(-4px);
}

.mission-teaser__image {
    overflow: hidden;
    position: relative;
}

.mission-teaser__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mission-teaser:hover .mission-teaser__image::after {
    opacity: 0;
}

.mission-teaser__image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.mission-teaser:hover .mission-teaser__image img {
    transform: scale(1.04);
}

.mission-teaser__image-link {
    display: block;
}

.mission-teaser .card-body {
    justify-content: center;
    min-height: 110px;
}

.mission-teaser__desc {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-orange);
}

.mission-teaser .card-title {
    color: white;
}


/* mission full */

.mission-case__hero-row {
    min-height: 520px;
}

.mission-case__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.mission-case__title {
    margin-bottom: 1.5rem;
    font-size: 3rem;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
}

.mission-case__client {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: var(--color-text-soft);
}

.mission-case__client span {
    display: block;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.mission-case__client strong {
    color: #fff;
    font-weight: 600;
}

.mission-case__intro {
    max-width: 540px;
    margin-bottom: 2rem;
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--color-text-soft);
}

.mission-case__actions {
    margin-top: 1.5rem;
}

.mission-case__btn {
    padding: 0.9rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mission-case__btn--primary {
    background: var(--color-orange);
    border: 1px solid var(--color-orange);
    color: #111;
}

.mission-case__btn--primary:hover {
    transform: translateY(-2px);
    color: #111;
}

.mission-case__visual {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    background: #111;
}

.mission-case__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, transparent 60%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
}

.mission-case__visual img {
    display: block;
    width: 100%;
    height: auto;
}

.mission-case__content {
    padding: 30px 0 60px;
}

.mission-case__body {
    max-width: 760px;
    font-size: 1.06rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.82);
}

.mission-case__body h2,
.mission-case__body h3,
.mission-case__body h4 {
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 700;
}

.mission-case__body p {
    margin-bottom: 1.3rem;
}

.mission-case__body a {
    color: var(--color-orange);
}

.mission-case__sidebar {
    position: sticky;
    top: 30px;
}

.mission-case__panel {
    margin-bottom: 1.25rem;
    padding: 0 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(6px);
}

.mission-case__panel-label {
    margin-bottom: 0.35rem;
    letter-spacing: 0.08em;
    color: var(--color-orange);
    font-weight: 600;
    font-size: 1rem;
}

.mission-case__panel-value {
    font-weight: 600;
    color: inherit;
}

.mission-case__panel-title {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.mission-case__tags {
    display: flex;
    flex-wrap: wrap;
    margin: -0.25rem;
}

.mission-case__tag {
    display: inline-flex;
    align-items: center;
    margin: 0.25rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.88);
}

.mission-case__gallery-section {
    padding: 10px 0 90px;
}

.mission-case__gallery-item {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

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


/*Contact*/

.contact-page-custom {
    padding: 3rem 0;
}

.contact-page-custom__content {
    padding: 2rem;
    background: #f8f8f8;
    border-radius: 0.5rem;
    height: 100%;
}


/*footer*/

.footer-menu-second {
    font-size: var(--solo-px10);
}

@media (max-width: 991.98px) {
    .mission-case__hero {
        padding: 70px 0 50px;
    }
    .mission-case__title {
        font-size: 2.3rem;
    }
    .mission-case__visual {
        margin-top: 2rem;
    }
    .mission-case__sidebar {
        position: static;
        margin-top: 2rem;
    }
}