/***** GLOBAL *****/

/* variables */
:root {
    --main-color: #111827;
    --main-text-color: #ffffff;
    --second-color: #ffffff;
    --second-text-color: #0e0e0e;
    --third-color: #f7f7f7;
    --third-text-color: #0e0e0e;
    --accent-color: #0e7f96;
    --accent-bright-color: #0cc8e6;
    --muted-color: #6b7280;
    --soft-color: #9c9c9c;
    --line-color: #e5e7eb;
    --light-line-color: rgba(255, 255, 255, 0.35);
    --overlay-color: rgba(0, 0, 0, 0.5);
    --radius-s: 12px;
    --radius-l: 16px;
}

/* icons */
i[data-lucide] {
    display: inline-block;
    flex: none;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* base */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--second-color);
    color: var(--second-text-color);
    font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

main {
    flex: 1 0 auto;
}

a {
    color: inherit;
}

p {
    margin-bottom: 0;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* typography */
h1,
h2,
h3,
h4,
h5,
h6,
.heading {
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(42px, 5.2vw, 72px);
    line-height: 1.1;
}

h2,
.heading {
    font-size: clamp(32px, 3.6vw, 46px);
}

h3 {
    font-size: 24px;
}

/* layout */
.container {
    padding-left: 25px;
    padding-right: 25px;
}

/* buttons */
.t-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: var(--radius-s);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s ease;
}

.t-btn.theme {
    background: var(--main-color);
    color: var(--main-text-color);
    border-color: var(--main-color);
}

.t-btn.theme:hover,
.t-btn.theme:focus-visible {
    background: var(--main-text-color);
    color: var(--main-color);
}

.t-btn.theme:focus-visible {
    outline: 3px solid var(--main-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--main-text-color);
}

.t-btn.theme2 {
    background: var(--second-color);
    color: var(--second-text-color);
    border-color: var(--second-color);
}

.t-btn.theme2:hover,
.t-btn.theme2:focus-visible {
    background: var(--main-color);
    color: var(--main-text-color);
    border-color: var(--main-color);
}

.t-btn.theme2:focus-visible {
    outline: 3px solid var(--second-text-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--second-color);
}

.t-btn.theme3 {
    background: var(--third-color);
    color: var(--third-text-color);
    border-color: var(--third-color);
}

.t-btn.theme3:hover,
.t-btn.theme3:focus-visible {
    background: var(--main-color);
    color: var(--main-text-color);
    border-color: var(--main-color);
}

.t-btn.theme3:focus-visible {
    outline: 3px solid var(--third-text-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--third-color);
}

/* links */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
}

.arrow-link [data-lucide] {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.arrow-link:hover [data-lucide] {
    transform: translateX(4px);
}

/* labels */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--third-color);
    color: var(--third-text-color);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    flex: none;
    width: 48px;
    height: 1px;
    background: currentColor;
}

/* grid lines */
.grid-lines {
    position: absolute;
    top: 0;
    right: 25px;
    bottom: 0;
    left: 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    pointer-events: none;
}

.grid-lines span {
    border-left: 1px dashed var(--light-line-color);
}

.grid-lines span:last-child {
    border-right: 1px dashed var(--light-line-color);
}

/* ticker */
.ticker {
    overflow: hidden;
}

.ticker .track {
    display: flex;
    width: max-content;
    animation: ticker 50s linear infinite;
}

.ticker .group {
    display: flex;
    flex: none;
    align-items: center;
}

@keyframes ticker {
    to {
        transform: translateX(-50%);
    }
}

/* slider */
[data-slider] .track {
    display: flex;
    gap: 20px;
    margin-right: calc(50% - 50vw);
    padding-right: 25px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

[data-slider] .track::-webkit-scrollbar {
    display: none;
}

[data-slider] .slide {
    flex: none;
    scroll-snap-align: start;
}

.slider-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.slider-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 10px;
    background: var(--third-color);
    color: var(--third-text-color);
    transition: 0.3s ease;
}

.slider-nav button:hover:not(:disabled) {
    background: var(--main-color);
    color: var(--main-text-color);
}

.slider-nav button:disabled {
    color: var(--soft-color);
}

.ticker.strip {
    position: relative;
    padding: 20px 0;
    background: var(--second-color);
    color: var(--second-text-color);
    text-transform: uppercase;
}

.ticker.strip .item {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding-right: 48px;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .ticker .track {
        animation: none;
    }
}

/* contact form */
.contact-form {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius-l);
    background: var(--second-color);
    color: var(--second-text-color);
}

.contact-form .title {
    margin: 0;
    text-align: center;
}

.contact-form .label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
}

.contact-form .control {
    position: relative;
}

.contact-form .control [data-lucide] {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--muted-color);
    transform: translateY(-50%);
    pointer-events: none;
}

.contact-form .control [data-lucide].arrow {
    right: 14px;
    left: auto;
}

.contact-form .control.area [data-lucide] {
    top: 24px;
}

.contact-form .control input,
.contact-form .control select,
.contact-form .control textarea {
    width: 100%;
    height: 48px;
    padding: 0 40px;
    border: 1px solid var(--line-color);
    border-radius: 10px;
    background: var(--second-color);
    color: var(--second-text-color);
    appearance: none;
}

.contact-form .control textarea {
    display: block;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
}

.contact-form .control input::placeholder,
.contact-form .control textarea::placeholder {
    color: var(--muted-color);
}

.contact-form .control input:focus-visible,
.contact-form .control select:focus-visible,
.contact-form .control textarea:focus-visible {
    border-color: var(--main-color);
    outline: 2px solid var(--main-color);
    outline-offset: 0;
}

.contact-form .note {
    font-size: 14px;
}

/* inner pages */
.inner-page > section {
    padding: 120px 0;
}

.inner-page .heading {
    margin-bottom: 0;
}

.inner-page .card {
    border: 0;
    border-radius: var(--radius-l);
}

.section-top {
    max-width: 680px;
    margin-bottom: 60px;
}

.section-top .tag {
    margin-bottom: 24px;
}

/* page hero */
.inner-page > .page-hero {
    position: relative;
    padding: 0;
    background: var(--second-text-color);
    color: var(--main-text-color);
    isolation: isolate;
}

.page-hero > .container {
    position: relative;
    padding-top: 140px;
    padding-bottom: 140px;
}

.page-hero .content {
    position: relative;
    max-width: 640px;
}

.page-hero .heading {
    margin: 20px 0;
    font-size: clamp(38px, 5.2vw, 72px);
    line-height: 1.1;
    overflow-wrap: break-word;
}

.page-hero .text {
    margin-bottom: 32px;
    font-size: 18px;
}

.page-hero .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.page-hero .actions .t-btn {
    padding: 16px 28px;
}

.page-hero .crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    text-transform: uppercase;
    list-style: none;
}

.page-hero .crumbs li + li::before {
    content: "/";
    margin-right: 10px;
}

.page-hero .crumbs a {
    text-decoration: none;
}

.page-hero .crumbs a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* cards */
.row-list {
    display: grid;
    gap: 24px;
}

.row-card {
    display: grid;
    grid-template-columns: 3fr 4fr 6fr;
    gap: 48px;
    flex-direction: initial;
    padding: 32px 48px;
    background: var(--second-color);
}

.row-card .summary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

.row-card .label {
    color: var(--muted-color);
    font-size: 16px;
    text-transform: uppercase;
}

.row-card .number {
    margin-bottom: 8px;
    font-size: clamp(36px, 4vw, 60px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.row-card .image {
    width: 100%;
    height: 430px;
    border-radius: var(--radius-s);
    object-fit: cover;
}

.row-card .details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

.row-card .title {
    margin-bottom: 20px;
    font-size: clamp(28px, 2.6vw, 38px);
}

.row-card .text {
    max-width: 440px;
    margin-bottom: 20px;
    color: var(--muted-color);
}

.row-card .facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.row-card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    border-radius: var(--radius-s);
    background: var(--third-color);
    color: var(--accent-color);
}

.row-card .name {
    margin-bottom: 4px;
    font-size: 20px;
}

.row-card .value {
    color: var(--muted-color);
}

@media (max-width: 1199.98px) {
    .row-card {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 32px;
    }

    .row-card .details {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .row-card {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .row-card .image {
        height: 300px;
    }

    .row-card .details {
        grid-column: auto;
    }
}

.post-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    height: 100%;
    padding: 22px;
    background: var(--second-color);
}

.post-card .body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.post-card .label {
    color: var(--muted-color);
    text-transform: uppercase;
}

.post-card .title {
    margin-bottom: 12px;
}

.post-card .text {
    color: var(--muted-color);
}

.post-card .main-text {
    margin-bottom: auto;
}

.post-card .image {
    width: 100%;
    height: 370px;
    border-radius: var(--radius-s);
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .post-card {
        grid-template-columns: 1fr;
    }

    .post-card .image {
        height: 240px;
    }
}

/* faq list */
.faq-list {
    display: grid;
    gap: 24px;
}

.faq-list .item {
    padding: 24px;
    border-radius: 10px;
    background: var(--third-color);
}

.faq-list .question-wrap {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
}

.faq-list .question {
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: inherit;
    text-align: left;
}

.faq-list .icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--second-color);
}

.faq-list .icon [data-lucide] {
    width: 18px;
    height: 18px;
}

.faq-list .question .minus,
.faq-list .question.collapsed .plus {
    display: block;
}

.faq-list .question .plus,
.faq-list .question.collapsed .minus {
    display: none;
}

.faq-list .answer {
    margin-top: 24px;
    padding: 16px;
    border-radius: var(--radius-s);
    background: var(--second-color);
}

@media (max-width: 575.98px) {
    .faq-list .question-wrap {
        font-size: 18px;
    }

    .faq-list .question {
        gap: 14px;
    }
}

/* help card */
.help-card {
    gap: 16px;
    padding: 24px;
    background: var(--third-color);
}

.help-card .title {
    margin: 0;
    font-size: 24px;
}

.help-card .text {
    color: var(--muted-color);
}

/* people */
.people-section .card {
    height: 100%;
    background: var(--third-color);
    overflow: hidden;
}

.people-section .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 24px 24px 20px;
    border-radius: var(--radius-s);
    background: var(--second-color);
    color: var(--accent-color);
}

.people-section .title {
    margin: 0 24px;
    font-size: 20px;
    letter-spacing: 0;
}

.people-section .links {
    display: grid;
    gap: 8px;
    padding: 20px 24px;
}

.people-section .links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.people-section .links a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.people-section .links [data-lucide] {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--accent-color);
}

/* steps */
.steps-section {
    background: var(--third-color);
}

.steps-section .tag {
    background: var(--second-color);
}

.steps-section .card {
    justify-content: space-between;
    gap: 60px;
    height: 100%;
    padding: 24px;
    background: var(--second-color);
}

.steps-section .card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.steps-section .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-s);
    background: var(--main-color);
    color: var(--main-text-color);
}

.steps-section .title {
    margin-bottom: 12px;
}

.steps-section .text {
    color: var(--muted-color);
}

/* cta band */
.inner-page > .cta-band {
    padding: 100px 0;
    background: var(--main-color);
    color: var(--main-text-color);
}

.cta-band .content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.cta-band .heading {
    max-width: 720px;
}

.cta-band .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.cta-band .t-btn {
    padding: 16px 28px;
}

/* lists */
.check-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.check-list [data-lucide] {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--accent-color);
}

.side-list {
    padding: 24px;
    border-radius: var(--radius-l);
    background: var(--third-color);
}

.side-list .label {
    margin-bottom: 12px;
    color: var(--muted-color);
    font-size: 14px;
    text-transform: uppercase;
}

.side-list ul {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--line-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.side-list a [data-lucide] {
    flex: none;
    width: 18px;
    height: 18px;
}

.side-list a:hover,
.side-list a[aria-current] {
    color: var(--accent-color);
}

/***** HEADER *****/

/* topbar */
.header .topbar {
    background: var(--main-color);
    color: var(--main-text-color);
}

.header .topbar .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    font-size: 12px;
}

.header .topbar .group {
    display: flex;
    gap: 32px;
}

.header .topbar .item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.header .topbar .item > [data-lucide] {
    width: 14px;
    height: 14px;
    color: var(--accent-bright-color);
}

/* header */
.header .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 96px;
}

/* logo */
.header .logo,
.footer .logo {
    display: inline-flex;
    flex: none;
}

.header .logo img,
.footer .logo img {
    display: block;
    width: auto;
    height: clamp(60px, 6vw, 68px);
}

.footer .logo {
    padding: 8px 12px;
    border-radius: var(--radius-s);
    background: var(--second-color);
}

/* navigation */
.header .navigation .list {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header .bar .navigation {
    font-size: 15px;
}

.header .navigation a {
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.header .navigation a:hover,
.header .navigation a[aria-current] {
    color: var(--accent-color);
}

/* actions */
.header .actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header .phone {
    display: block;
    text-decoration: none;
}

.header .actions .phone {
    padding-right: 12px;
    border-right: 1px solid var(--line-color);
    text-align: right;
}

.header .phone .label {
    display: block;
    color: var(--muted-color);
    font-size: 12px;
}

.header .phone .number {
    display: block;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

.header .menu-toggle,
.header .menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

/* offcanvas */
.header .offcanvas {
    background: var(--second-color);
    color: var(--second-text-color);
}

.header .offcanvas-header {
    justify-content: space-between;
}

.header .offcanvas-title {
    margin: 0;
    font-size: 24px;
}

.header .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.header .offcanvas .navigation .list {
    flex-direction: column;
    gap: 16px;
}

.header .offcanvas .navigation a {
    font-size: 18px;
}

/***** HOME *****/

.home-page > section {
    padding: 120px 0;
}

.home-page .heading {
    margin-bottom: 0;
}

.home-page .card {
    border: 0;
    border-radius: var(--radius-l);
}

.home-page .top {
    display: grid;
    grid-template-columns: 3fr 6fr 3fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 60px;
}

.home-page .top .tag {
    justify-self: start;
}

.home-page .top .note {
    justify-self: end;
    font-size: 14px;
    text-align: right;
}

/* hero */
.home-page .hero-section {
    position: relative;
    padding: 160px 0;
    background: var(--second-text-color);
    color: var(--main-text-color);
    isolation: isolate;
}

.home-page .hero-section .background,
.home-page .contact-section .background,
.page-hero .background {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-page .hero-section::after,
.home-page .contact-section::after,
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--overlay-color);
}

.home-page .hero-section .heading {
    margin: 20px 0;
    font-size: clamp(42px, 5.2vw, 72px);
    line-height: 1.1;
}

.home-page .hero-section .list {
    display: grid;
    gap: 16px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.home-page .hero-section .list li {
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-page .hero-section .list [data-lucide] {
    flex: none;
    color: var(--accent-bright-color);
}

.home-page .hero-section .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.home-page .hero-section .actions .t-btn {
    padding: 16px 28px;
}

.home-page .hero-section .carousel-inner {
    display: grid;
}

.home-page .hero-section .carousel-item {
    display: block;
    grid-area: 1 / 1;
    float: none;
    margin-right: 0;
    visibility: hidden;
}

.home-page .hero-section .carousel-item.active,
.home-page .hero-section .carousel-item-next,
.home-page .hero-section .carousel-item-prev {
    visibility: visible;
}

.home-page .hero-section .card {
    display: flex;
    flex-direction: row;
    gap: 22px;
    padding: 12px;
    background: var(--second-color);
    color: var(--second-text-color);
    text-decoration: none;
}

.home-page .hero-section .card .image {
    flex: none;
    width: 160px;
    height: 160px;
    border-radius: var(--radius-s);
    object-fit: cover;
}

.home-page .hero-section .card .body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.home-page .hero-section .card .type {
    font-size: 14px;
}

.home-page .hero-section .card .title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.home-page .hero-section .card .text {
    margin-top: auto;
    color: var(--muted-color);
    font-size: 14px;
}

.home-page .hero-section .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.home-page .hero-section .control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--light-line-color);
    color: var(--main-text-color);
}

.home-page .hero-section .control [data-lucide] {
    width: 18px;
    height: 18px;
}

.home-page .hero-section .carousel-indicators {
    position: static;
    gap: 8px;
    margin: 0;
}

.home-page .hero-section .carousel-indicators [data-bs-target] {
    width: 72px;
    height: 4px;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: var(--main-text-color);
}

/* about */
.home-page .about-section .more {
    margin-top: 32px;
}

.home-page .about-section .top {
    grid-template-columns: 3fr 9fr;
}

.home-page .about-section .heading {
    max-width: 820px;
}

.home-page .about-section .reveal-text .word {
    color: var(--soft-color);
    transition: color 0.2s linear;
}

.home-page .about-section .reveal-text .word.active {
    color: var(--second-text-color);
}

.home-page .about-section .since {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    height: 100%;
}

.home-page .about-section .hashtag {
    color: var(--muted-color);
    font-size: 14px;
    text-transform: uppercase;
}

.home-page .about-section .since .number {
    font-size: 46px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.home-page .about-section .since .text {
    margin: 12px 0 16px;
    color: var(--muted-color);
}

.home-page .about-section .card {
    height: 100%;
    background: var(--third-color);
}

.home-page .about-section .stat {
    justify-content: space-between;
    gap: 120px;
    padding: 22px;
}

.home-page .about-section .label {
    color: var(--muted-color);
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-page .about-section .stat .number {
    font-size: clamp(36px, 4vw, 60px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.home-page .about-section .capacity {
    padding: 12px 12px 22px 22px;
}

.home-page .about-section .capacity-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.home-page .about-section .capacity .image {
    flex: none;
    width: 164px;
    height: 164px;
    border-radius: var(--radius-l);
    object-fit: cover;
}

.home-page .about-section .capacity .text {
    margin: auto 10px 16px 0;
    font-size: 18px;
}

.home-page .about-section .capacity .name {
    font-size: 14px;
    text-transform: uppercase;
}

.home-page .about-section .capacity .role {
    color: var(--muted-color);
    font-size: 14px;
}

/* benefits */
.home-page .benefits-section {
    padding: 0;
}

.home-page .benefits-section .band {
    padding: 120px 0;
    background: var(--main-color);
    color: var(--main-text-color);
}

.home-page .benefits-section .ticker .item {
    padding: 0 40px;
    font-size: clamp(40px, 5.2vw, 72px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.home-page .benefits-section .ticker .dot {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--main-text-color);
}

.home-page .benefits-section .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.home-page .benefits-section .card {
    position: relative;
    min-height: 680px;
    border-radius: 0;
    background: var(--second-text-color);
    color: var(--main-text-color);
    overflow: hidden;
}

.home-page .benefits-section .card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-color);
}

.home-page .benefits-section .image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.home-page .benefits-section .card:hover .image {
    transform: scale(1.04);
}

.home-page .benefits-section .content {
    position: relative;
    z-index: 1;
    max-width: 440px;
    padding: 90px 40px 40px;
}

.home-page .benefits-section .title {
    margin: 24px 0 16px;
}

/* jobs */
.home-page .projects-section {
    background: var(--third-color);
}

.home-page .projects-section .tag {
    background: var(--second-color);
}

/* process */
.home-page .process-section {
    position: relative;
    padding: 0;
    background: var(--second-text-color);
    color: var(--main-text-color);
    overflow: clip;
}

.home-page .process-section .media {
    position: sticky;
    top: 0;
    height: 100vh;
    margin-bottom: -100vh;
}

.home-page .process-section .media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-color);
}

.home-page .process-section .media .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-page .process-section .container {
    position: relative;
    padding-top: 120px;
    padding-bottom: 120px;
}

.home-page .process-section .content {
    position: relative;
    max-width: 825px;
    margin-bottom: 80px;
}

.home-page .process-section .tag {
    margin-bottom: 24px;
    background: var(--second-color);
}

.home-page .process-section .arrow-link {
    margin-top: 32px;
}

.home-page .process-section .heading {
    margin-bottom: 40px;
}

.home-page .process-section .name {
    font-size: 20px;
}

.home-page .process-section .role {
    color: var(--line-color);
    font-size: 14px;
    text-transform: uppercase;
}

.home-page .process-section .cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.home-page .process-section .card {
    grid-row: 1;
    align-self: start;
    gap: 80px;
    margin-right: 16px;
    padding: 24px;
    background: var(--second-color);
    color: var(--second-text-color);
}

.home-page .process-section .card:nth-child(1) {
    grid-column: 4;
    margin-right: 0;
}

.home-page .process-section .card:nth-child(2) {
    grid-column: 3;
    margin-top: 280px;
}

.home-page .process-section .card:nth-child(3) {
    grid-column: 2;
    margin-top: 560px;
}

.home-page .process-section .card:nth-child(4) {
    grid-column: 1;
    margin-top: 840px;
}

.home-page .process-section .card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.home-page .process-section .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-s);
    background: var(--main-color);
    color: var(--main-text-color);
}

.home-page .process-section .title {
    margin-bottom: 12px;
}

.home-page .process-section .text {
    color: var(--muted-color);
}

/* services */
.home-page .services-section {
    padding-bottom: 60px;
}

.home-page .services-section .top {
    display: block;
    max-width: 640px;
}

.home-page .services-section .top .tag {
    margin-bottom: 24px;
}

.home-page .services-section .list {
    flex-direction: column;
    gap: 20px;
}

.home-page .services-section .item {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--soft-color);
    font-size: clamp(28px, 3.4vw, 46px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: left;
    transition: color 0.3s ease;
}

.home-page .services-section .item:hover,
.home-page .services-section .item.active {
    color: var(--second-text-color);
}

.home-page .services-section .image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-s);
}

.home-page .services-section .text {
    margin: 16px 0;
}

/* work */
.home-page .work-section {
    overflow-x: clip;
}

.home-page .work-section .slide {
    width: min(620px, 85vw);
}

.home-page .work-section .image {
    display: block;
    width: 100%;
    height: 460px;
    border-radius: var(--radius-l);
    object-fit: cover;
}

/* faq */
.home-page .faq-section {
    padding-top: 40px;
    padding-bottom: 80px;
}

.home-page .faq-section .side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 60px;
    height: 100%;
}

.home-page .faq-section .tag {
    margin-bottom: 24px;
}

/* blog */
.home-page .blog-section {
    background: var(--third-color);
    overflow-x: clip;
}

.home-page .blog-section .top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.home-page .blog-section .top .heading {
    max-width: 620px;
}

.home-page .blog-section .tag {
    margin-bottom: 24px;
    background: var(--second-color);
}

.home-page .blog-section .slide {
    width: min(660px, 85vw);
}

.home-page .blog-section .slider-nav button {
    background: var(--second-color);
}

.home-page .blog-section .slider-nav button:hover:not(:disabled) {
    background: var(--main-color);
}

/* contact */
.home-page .contact-section {
    position: relative;
    padding: 0;
    background: var(--second-text-color);
    color: var(--main-text-color);
    isolation: isolate;
}

.home-page .contact-section .container {
    position: relative;
    padding-top: 120px;
    padding-bottom: 120px;
}

.home-page .contact-section .row {
    position: relative;
}

.home-page .contact-section .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 120px;
    max-width: 620px;
}

.home-page .contact-section .heading {
    margin-top: 22px;
    font-size: clamp(42px, 5.2vw, 72px);
    line-height: 1.1;
}

.home-page .contact-section .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.home-page .contact-section .actions .t-btn {
    padding: 16px 28px;
}

/* responsive */
@media (max-width: 1199.98px) {
    .home-page .about-section .capacity .image {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 991.98px) {
    .home-page > section {
        padding: 80px 0;
    }

    .home-page .top,
    .home-page .about-section .top {
        grid-template-columns: 1fr;
        margin-bottom: 40px;
    }

    .home-page .top .note {
        justify-self: start;
        text-align: left;
    }

    .home-page .hero-section {
        padding: 80px 0;
    }

    .home-page .hero-section .carousel {
        margin-top: 48px;
    }

    .home-page .about-section .since {
        margin-bottom: 16px;
    }

    .home-page .about-section .stat {
        gap: 48px;
    }

    .home-page .benefits-section .band {
        padding: 70px 0;
    }

    .home-page .benefits-section .grid {
        grid-template-columns: 1fr;
    }

    .home-page .benefits-section .card {
        min-height: 480px;
    }

    .home-page .benefits-section .content {
        padding: 40px 25px;
    }

    .grid-lines {
        display: none;
    }

    .home-page .process-section .container {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .home-page .process-section .cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-page .process-section .card:nth-child(n) {
        grid-row: auto;
        grid-column: auto;
        gap: 48px;
        margin: 0;
    }

    .home-page .services-section .tab-content {
        margin-top: 40px;
    }

    .home-page .faq-section .side {
        gap: 32px;
    }

    .home-page .blog-section .top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .home-page .contact-section .container {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .home-page .contact-section .content {
        gap: 40px;
    }
}

@media (max-width: 575.98px) {
    .home-page .hero-section .card {
        flex-direction: column;
    }

    .home-page .hero-section .card .image {
        width: 100%;
        height: 200px;
    }

    .home-page .hero-section .carousel-indicators [data-bs-target] {
        width: 44px;
    }

    .home-page .about-section .capacity .image {
        width: 96px;
        height: 96px;
    }

    .home-page .work-section .slide {
        grid-template-columns: 1fr;
    }

    .home-page .work-section .image {
        min-height: 340px;
    }

}

/***** ABOUT *****/

/* intro */
.about-page .tag {
    margin-bottom: 24px;
}

.about-page .intro-section .text,
.about-page .team-section .text {
    margin-top: 20px;
    color: var(--muted-color);
    font-size: 18px;
}

.about-page .intro-section .t-btn {
    margin-top: 32px;
}

.about-page .intro-section .photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.about-page .intro-section .image {
    display: block;
    width: 100%;
    height: 240px;
    border-radius: var(--radius-l);
    object-fit: cover;
}

.about-page .intro-section .image:first-child {
    grid-column: 1 / -1;
    height: 320px;
}

/* numbers */
.about-page .numbers-section {
    background: var(--third-color);
}

.about-page .numbers-section .tag {
    background: var(--second-color);
}

.about-page .numbers-section .section-top .text {
    margin-top: 20px;
    color: var(--muted-color);
    font-size: 18px;
}

.about-page .numbers-section .card {
    justify-content: space-between;
    gap: 40px;
    height: 100%;
    padding: 24px;
    background: var(--second-color);
}

.about-page .numbers-section .number {
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.about-page .numbers-section .label {
    color: var(--muted-color);
    font-size: 14px;
}

/* team */
.about-page .team-section .machine {
    display: flex;
    justify-content: center;
    padding: 32px;
    border: 1px solid var(--line-color);
    border-radius: var(--radius-l);
}

.about-page .team-section .image {
    display: block;
    max-width: 100%;
    height: auto;
}

.about-page .team-section .check-list {
    margin-top: 28px;
}

/* reasons */
.about-page .reasons-section {
    background: var(--third-color);
}

.about-page .reasons-section .tag {
    background: var(--second-color);
}

.about-page .reasons-section .card {
    height: 100%;
    padding: 24px;
    background: var(--second-color);
}

.about-page .reasons-section .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 32px;
    border-radius: var(--radius-s);
    background: var(--third-color);
    color: var(--accent-color);
}

.about-page .reasons-section .title {
    margin-bottom: 12px;
}

.about-page .reasons-section .text {
    color: var(--muted-color);
}

/* responsive */
@media (max-width: 575.98px) {
    .about-page .numbers-section .card {
        gap: 24px;
        padding: 16px;
    }

    .about-page .numbers-section .number {
        font-size: 24px;
    }
}

/***** SERVICES *****/

/* list */
.services-page .list-section {
    background: var(--third-color);
}

.services-page .list-section .tag {
    background: var(--second-color);
}

/***** SERVICE *****/

/* detail */
.service-page .detail-section .col-lg-8 > .image {
    display: block;
    width: 100%;
    height: clamp(280px, 40vw, 480px);
    object-fit: cover;
    margin-bottom: 48px;
    border-radius: var(--radius-l);
}

.service-page .detail-section .col-lg-8 > .heading {
    margin: 48px 0 20px;
}

.service-page .detail-section .col-lg-8 > .image + .heading {
    margin-top: 0;
}

.service-page .detail-section .col-lg-8 > .text {
    margin-bottom: 20px;
    color: var(--muted-color);
    font-size: 18px;
}

.service-page .detail-section .check-list {
    margin-bottom: 48px;
}

.service-page .detail-section .benefit {
    height: 100%;
    padding: 24px;
    background: var(--third-color);
}

.service-page .detail-section .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 24px;
    border-radius: var(--radius-s);
    background: var(--second-color);
    color: var(--accent-color);
}

.service-page .detail-section .benefit .title {
    margin-bottom: 8px;
}

.service-page .detail-section .benefit .text {
    color: var(--muted-color);
}

.service-page .detail-section .side,
.post-page .article-section .side,
.faq-page .questions-section .side {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 16px;
}

/***** PROJECTS *****/

/* list */
.projects-page .list-section .card {
    height: 100%;
    background: var(--third-color);
    overflow: hidden;
}

.projects-page .list-section .image {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.projects-page .list-section .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    gap: 12px;
    padding: 24px;
}

.projects-page .list-section .count {
    color: var(--muted-color);
}

.projects-page .list-section .title {
    margin: 0;
}

.projects-page .list-section .text {
    margin-bottom: auto;
    padding-bottom: 12px;
    color: var(--muted-color);
}

/***** PROJECT *****/

/* overview */
.project-page .overview-section .facts .card {
    height: 100%;
    padding: 20px;
    background: var(--third-color);
}

.project-page .overview-section .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 32px;
    border-radius: var(--radius-s);
    background: var(--second-color);
    color: var(--accent-color);
}

.project-page .overview-section .label {
    margin-bottom: 6px;
    color: var(--muted-color);
    font-size: 14px;
    text-transform: uppercase;
}

.project-page .overview-section .value {
    font-size: 18px;
    font-weight: 600;
}

.project-page .overview-section .story {
    margin-top: 60px;
}

.project-page .tag {
    margin-bottom: 24px;
}

.project-page .overview-section .check-list {
    margin-top: 20px;
}

.project-page .overview-section .text {
    margin-top: 20px;
    color: var(--muted-color);
    font-size: 18px;
}

/* gallery */
.inner-page > .gallery-section {
    padding-top: 0;
}

.project-page .gallery-section .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.project-page .gallery-section .photo {
    display: block;
    border-radius: var(--radius-l);
    overflow: hidden;
}

.project-page .gallery-section .image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-page .gallery-section .photo:hover .image {
    transform: scale(1.04);
}

/* next */
.project-page .next-section {
    background: var(--third-color);
}

.project-page .next-section .next {
    position: relative;
    display: block;
    height: 360px;
    border-radius: var(--radius-l);
    color: var(--main-text-color);
    text-decoration: none;
    overflow: hidden;
}

.project-page .next-section .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-page .next-section .next:hover .image {
    transform: scale(1.04);
}

.project-page .next-section .caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: 4px;
    padding: 80px 24px 24px;
    background: linear-gradient(transparent, var(--second-text-color));
}

.project-page .next-section .label {
    font-size: 14px;
    text-transform: uppercase;
}

.project-page .next-section .title {
    font-size: 24px;
    font-weight: 600;
}

/* lightbox */
.project-page .lightbox .modal-content {
    border: 0;
    border-radius: var(--radius-l);
    overflow: hidden;
}

.project-page .lightbox .image {
    display: block;
    width: 100%;
    max-height: 80vh;
    background: var(--second-text-color);
    object-fit: contain;
}

.project-page .lightbox .controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
}

.project-page .lightbox button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-s);
    background: var(--third-color);
    color: var(--third-text-color);
}

.project-page .lightbox .close {
    margin-left: auto;
}

/***** BLOG *****/

/* list */
.blog-page .list-section {
    background: var(--third-color);
}

.blog-page .list-section .tag {
    background: var(--second-color);
}

/***** POST *****/

/* article */
.post-page .article-section .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-bottom: 24px;
    color: var(--muted-color);
    font-size: 14px;
    text-transform: uppercase;
}

.post-page .article-section article > .image {
    display: block;
    width: 100%;
    height: clamp(280px, 40vw, 480px);
    margin-bottom: 48px;
    border-radius: var(--radius-l);
    object-fit: cover;
}

.post-page .article-section article > .heading {
    margin-bottom: 16px;
    font-size: clamp(26px, 2.6vw, 32px);
}

.post-page .article-section article > .text {
    margin-bottom: 40px;
    color: var(--muted-color);
    font-size: 18px;
    line-height: 1.6;
}

.post-page .article-section article > .check-list {
    margin: -24px 0 40px;
}

.post-page .article-section .figure {
    display: block;
    max-width: 100%;
    height: auto;
    margin: -16px 0 40px;
}

/* related */
.post-page .related-section {
    background: var(--third-color);
}

.post-page .related-section .tag {
    background: var(--second-color);
}

/***** FAQ *****/

/* questions */
.faq-page .questions-section .group {
    margin-bottom: 60px;
    scroll-margin-top: 24px;
}

.faq-page .questions-section .group:last-child {
    margin-bottom: 0;
}

.faq-page .questions-section .group > .heading {
    margin-bottom: 24px;
    font-size: clamp(26px, 2.6vw, 32px);
}

/* responsive */
@media (max-width: 991.98px) {
    .inner-page > section {
        padding: 80px 0;
    }

    .inner-page > .gallery-section {
        padding-top: 0;
    }

    .page-hero > .container {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .inner-page > .cta-band {
        padding: 70px 0;
    }

    .section-top {
        margin-bottom: 40px;
    }

    .service-page .detail-section .side,
    .post-page .article-section .side,
    .faq-page .questions-section .side {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .project-page .gallery-section .grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/***** CONTACT *****/

/* contact */
.contact-page .contact-section {
    background: var(--third-color);
}

.contact-page .contact-section .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    height: 100%;
}

.contact-page .contact-section .tag {
    margin-bottom: 24px;
    background: var(--second-color);
}

.contact-page .contact-section .info .text {
    margin-top: 20px;
    color: var(--muted-color);
}

.contact-page .contact-section .items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-page .contact-section .card {
    padding: 20px;
    background: var(--second-color);
}

.contact-page .contact-section .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 32px;
    border-radius: var(--radius-s);
    background: var(--third-color);
    color: var(--accent-color);
}

.contact-page .contact-section .card .label {
    margin-bottom: 6px;
    color: var(--muted-color);
    font-size: 14px;
    text-transform: uppercase;
}

.contact-page .contact-section .value {
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-page .contact-section .contact-form {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 32px;
}

.contact-page .contact-section .contact-form .title,
.contact-page .contact-section .contact-form .wide {
    grid-column: 1 / -1;
}

.contact-page .contact-section .contact-form .title {
    margin-bottom: 4px;
    font-size: clamp(24px, 2.4vw, 32px);
    text-align: left;
}

.contact-page .contact-section .consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--muted-color);
    font-size: 14px;
}

.contact-page .contact-section .consent input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--main-color);
}

/* people */
/* responsive */
@media (max-width: 575.98px) {
    .contact-page .contact-section .items,
    .contact-page .contact-section .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-page .contact-section .contact-form {
        padding: 24px;
    }

    .contact-page .contact-section .icon {
        margin-bottom: 20px;
    }
}

/***** FOOTER *****/

.footer {
    background: var(--main-color);
    color: var(--main-text-color);
}

.footer .label {
    margin-bottom: 8px;
    color: var(--soft-color);
    font-size: 16px;
    text-transform: uppercase;
}

/* main */
.footer .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 60px 0;
}

/* contact */
.footer .contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding-right: 32px;
    border-right: 1px solid var(--light-line-color);
}

.footer .contact .text {
    margin: 0;
    font-weight: 500;
    text-decoration: none;
}

.footer .social {
    display: flex;
    gap: 16px;
    color: var(--soft-color);
}

.footer .social a {
    display: inline-flex;
    transition: color 0.3s ease;
}

.footer .social a:hover {
    color: var(--main-text-color);
}

/* links */
.footer .side {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 480px;
    margin-left: auto;
    padding-left: 32px;
}

.footer .links {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 70px;
}

.footer .links .list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer .links a {
    text-decoration: none;
}

.footer .links a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* offer */
.footer .offer .title {
    margin-bottom: 12px;
    font-size: 20px;
    letter-spacing: 0;
}

.footer .offer .text {
    margin-bottom: 20px;
    color: var(--soft-color);
}

.footer .offer .t-btn {
    padding: 12px 24px;
}

/* bottom */
.footer .bottom {
    padding: 24px 0;
    border-top: 1px solid var(--light-line-color);
    color: var(--soft-color);
}

.footer .bottom strong {
    color: var(--main-text-color);
    font-weight: 500;
}

/* responsive */
@media (max-width: 767.98px) {
    .footer .main {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .footer .contact {
        padding-right: 0;
        border-right: 0;
    }

    .footer .side {
        max-width: none;
        margin-left: 0;
        padding-left: 0;
    }
}