:root {
    --bg-color: #FAFAF7;
    --soft-bg-color: #F4F2EE;
    --surface-color: #FFFFFF;
    --dark-color: #1C1D1F;
    --dark-soft-color: #26282B;
    --primary-color: #2d6487;
    --primary-dark-color: #163c54;
    --primary-light-color: #f3fbff;
    --steel-color: #8B8D91;
    --line-color: #d5d8da;
    --line-dark-color: #33363A;
    --light-color: #FFFFFF;
    --border-radius: 18px;
    --title-font: "Inter", sans-serif;
}


* {
    box-sizing: border-box;
}
html {
    overflow-x: hidden;
}
body {
    font-family: var(--title-font);
    font-weight: 400;
    color: var(--dark-color);
    background-color: #fff;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}
p {
    margin: 0;
}
p:last-child {
    margin-bottom: 0;
}
a {
    color: var(--dark-color);
    text-decoration: none;
    display: inline-block;
    transition: all .3s ease;
}
a:hover {
    text-decoration: none;
    color: var(--primary-color);
}
img {
    max-width: 100%;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
::selection {
    background-color: var(--primary-color);
    color: var(--light-color);
}
strong {
    font-weight: 600;
}

.section-py {
    padding: 110px 0;
}
.section-py.pt-0 {
    padding-top: 0;
}
.section-py.pb-0 {
    padding-bottom: 0;
}
.section-px {
    padding: 0 40px;
}
.bg-dark-section {
    background-color: var(--dark-color);
    color: var(--light-color);
}
.bg-surface {
    background-color: var(--surface-color);
}
.bg-p-light {
    background-color: var(--primary-light-color);
}
.border-top-light-color {
    border-top: 1px solid var(--primary-light-color);
}
.hover-effect {
    position: relative;
}
.mt-30px { margin-top: 30px; }
.mt-40px { margin-top: 40px; }
.mt-60px { margin-top: 60px; }
.pt-60px { padding-top: 60px; }


.section-title {
    margin-bottom: 50px;
}
.section-title.center {
    text-align: center;
}
.section-title .suffix {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--light-color);
    background-color: var(--dark-color);
    padding: 7px 14px;
    margin-bottom: 20px;
    border-radius: var(--border-radius);
}
.section-title .title {
    font-size: 42px;
    font-weight: 400;
    max-width: 720px;
}
.section-title.center .title {
    margin-left: auto;
    margin-right: auto;
}
.section-title .desc {
    margin-top: 18px;
    color: var(--steel-color);
    max-width: 560px;
    font-size: 16px;
}
.section-title .title .soft {
    color: var(--steel-color);
}


.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--dark-color);
    color: var(--light-color);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 15px 28px;
    border: 1px solid var(--dark-color);
    border-radius: var(--border-radius);
}
.primary-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-color);
}
.primary-btn i {
    font-size: 13px;
}
.outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    color: var(--dark-color);
    font-size: 14px;
    font-weight: 500;
    padding: 15px 28px;
    border: 1px solid var(--dark-color);
    border-radius: var(--border-radius);
}
.outline-btn:hover {
    background-color: var(--dark-color);
    color: var(--light-color);
}
.bg-dark-section .outline-btn {
    color: var(--light-color);
    border-color: rgba(255, 255, 255, .4);
}
.bg-dark-section .outline-btn:hover {
    background-color: var(--light-color);
    color: var(--dark-color);
    border-color: var(--light-color);
}
.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-color);
    border-bottom: 1px solid var(--dark-color);
    padding-bottom: 3px;
}
.link-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    gap: 12px;
}
.diagonal-arrow {
    transform: rotate(-45deg);
    transition: transform .3s ease;
}
a:hover .diagonal-arrow,
.service-slide-card:hover .diagonal-arrow,
.inspiration-card:hover .diagonal-arrow {
    transform: rotate(0deg);
}


.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader .spinner {
    width: 42px;
    height: 42px;
    border: 2px solid var(--line-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: loader-spin .8s linear infinite;
}
@keyframes loader-spin {
    to { transform: rotate(360deg); }
}


header {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--primary-light-color);
    border-bottom: none;
    -webkit-backdrop-filter: blur(16px);
    transition: all .3s ease;
}
header .navbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
    padding: 0;
}
header.sticky .navbar {
    height: 68px;
}
header .logo img {
    height: 55px;
    width: auto;
}
header .nav {
    display: flex;
    align-items: center;
    gap: 30px;
}
header .nav > li {
    position: relative;
}
header .mega-dropdown {
    position: static !important;
}
header .nav-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--dark-color);
    padding: 30px 0;
}
header .nav-link:hover,
header .nav-link:focus {
    color: var(--dark-color);
}
header .nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 26px;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width .3s ease;
}
header .nav-link:hover:after {
    width: 100%;
}
header .controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
header .circle-control,
header .navbar-toggler {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--surface-color);
    border: 1px solid rgba(28, 29, 31, .12);
    border-radius: 50%;
    color: var(--dark-color);
    font-size: 16px;
    cursor: pointer;
    transition: all .3s ease;
}
header .circle-control:hover,
header .navbar-toggler:hover {
    background-color: var(--dark-color);
    border-color: var(--dark-color);
    color: var(--light-color);
}
header .language-switch {
    position: relative;
}
header .language-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 74px;
    padding: 8px;
    background-color: rgba(255, 255, 255, .96);
    border: 1px solid rgba(28, 29, 31, .1);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(28, 29, 31, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .25s ease;
    z-index: 1002;
}
header .language-switch:hover .language-menu,
header .language-switch:focus-within .language-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
header .language-menu a {
    display: block;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--dark-color);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
header .language-menu a:hover,
header .language-menu a.active {
    background-color: var(--dark-color);
    color: var(--light-color);
}
header .navbar-toggler {
    display: none;
    font-size: 20px;
}


.mega-dropdown .mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    transform: translate(-50%, 12px);
    width: 100%;
    max-width: none;
    background-color: rgba(255, 255, 255, .94);
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    box-shadow: 0 18px 44px rgba(28, 29, 31, .12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 22px;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    z-index: 1000;
}
.mega-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.mega-dropdown .mega-menu > .container {
    max-width: none;
    padding: 0;
}
.mega-menu .mega-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.mega-menu .mega-item {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 calc(33.333% - 12px);
    min-width: 260px;
    padding: 12px;
    border: 1px solid rgba(28, 29, 31, .1);
    border-radius: 14px;
    transition: all .3s ease;
}
.mega-menu .mega-item:hover {
    border-color: rgba(166, 73, 31, .24);
    background-color: rgba(166, 73, 31, .08);
}
.mega-menu .mega-item .image {
    width: 74px;
    height: 58px;
    flex-shrink: 0;
    overflow: hidden;
}
.mega-menu .mega-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.mega-menu .mega-item .content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mega-menu .mega-item .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-color);
}
.mega-menu .mega-item .desc {
    font-size: 13px;
    color: var(--steel-color);
    line-height: 1.4;
}
.mega-menu .mega-all {
    display: flex;
    width: fit-content;
    margin-top: 18px;
    margin-left: auto;
}


.dropdown .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background-color: rgba(255, 255, 255, .96);
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    box-shadow: 0 18px 40px rgba(28, 29, 31, .12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 10px;
    transform: translateY(12px);
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    z-index: 1000;
}
.dropdown:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown .sub-menu a {
    display: block;
    font-size: 14px;
    color: var(--dark-color);
    padding: 9px 12px;
    border-radius: 12px;
}
.dropdown .sub-menu a:hover {
    background-color: rgba(166, 73, 31, .08);
    color: var(--dark-color);
    padding-left: 16px;
}


.search-panel {
    position: fixed;
    top: 104px;
    left: 0;
    right: 0;
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .28s ease, transform .28s ease;
}
.search-panel.active {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}
.search-box {
    position: relative;
    max-width: 760px;
    margin-left: auto;
    padding: 26px;
    background-color: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: var(--border-radius);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 44px rgba(28, 29, 31, .14);
}
.search-box label {
    display: block;
    margin-bottom: 18px;
    color: var(--dark-color);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.05;
    font-weight: 500;
}
.search-box .input-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 10px 10px 18px;
    background-color: var(--surface-color);
    border: 1px solid rgba(28, 29, 31, .12);
    border-radius: var(--border-radius);
}
.search-box .input-wrap i {
    color: var(--primary-color);
    font-size: 18px;
}
.search-box input {
    width: 100%;
    min-width: 0;
    height: 48px;
    border: none;
    outline: none;
    color: var(--dark-color);
    background-color: transparent;
    font-size: 16px;
}
.search-box input::placeholder {
    color: var(--dark-soft-color);
}
.search-box button[type="submit"] {
    height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: 14px;
    background-color: var(--dark-color);
    color: var(--light-color);
    font-weight: 600;
}
.search-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(28, 29, 31, .12);
    border-radius: 50%;
    background-color: var(--surface-color);
    color: var(--dark-color);
    cursor: pointer;
}


.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 88%;
    height: 100%;
    background-color: var(--surface-color);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform .35s ease;
    overflow-y: auto;
}
.mobile-nav.active {
    transform: translateX(0);
}
.mobile-nav .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid var(--line-color);
}
.mobile-nav .head .logo img {
    height: 26px;
}
.mobile-nav .head .close {
    font-size: 22px;
    cursor: pointer;
}
.mobile-nav .body {
    padding: 20px 26px 40px;
}
.mobile-nav .links {
    display: flex;
    flex-direction: column;
}
.mobile-nav .links .item {
    font-size: 16px;
    font-weight: 500;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-color);
}
.mobile-nav .links .item:last-child {
    border-bottom: none;
}
.mobile-nav .social {
    display: flex;
    gap: 10px;
    margin-top: 26px;
}
.mobile-nav .social a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-color);
    border-radius: 50%;
}
.mobile-nav .social a:hover {
    background-color: var(--dark-color);
    color: var(--light-color);
    border-color: var(--dark-color);
}
.mobile-nav .contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
    padding: 16px;
    background-color: var(--bg-color);
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
}
.mobile-nav .contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-color);
}
.mobile-nav .contact i {
    color: var(--primary-color);
    margin-right: 0;
}
.nav-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(28, 29, 31, .5);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}
.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}


.hero-area {
    padding: 40px 0 0;
}
.hero-area .hero-inner {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.hero-area .image {
    height: 640px;
}
.hero-area .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-area .content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 60px;
    background: linear-gradient(to top, rgba(28, 29, 31, .82) 0%, rgba(28, 29, 31, 0) 100%);
    color: var(--light-color);
}
.hero-area .suffix {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--light-color);
    border: 1px solid rgba(255, 255, 255, .4);
    padding: 6px 14px;
    margin-bottom: 22px;
}
.hero-area .title {
    font-size: 60px;
    font-weight: 400;
    max-width: 760px;
    color: var(--light-color);
}
.hero-area .desc {
    margin-top: 22px;
    max-width: 560px;
    font-size: 17px;
    color: rgba(255, 255, 255, .82);
}
.hero-area .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}
.hero-area .primary-btn {
    background-color: var(--light-color);
    color: var(--dark-color);
    border-color: var(--light-color);
}
.hero-area .primary-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-color);
}
.hero-area .outline-btn {
    color: var(--light-color);
    border-color: rgba(255, 255, 255, .5);
}
.hero-area .outline-btn:hover {
    background-color: var(--light-color);
    color: var(--dark-color);
}

.brand-universe-area .head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 50px;
    gap: 30px;
}
.brand-universe-area .head .section-title {
    margin-bottom: 0;
}
.brand-card {
    display: block;
    background-color: var(--surface-color);
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 100%;
    transition: all .3s ease;
}
.brand-card:hover {
    border-color: var(--dark-color);
}
.brand-card .image {
    height: 220px;
    overflow: hidden;
}
.brand-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.brand-card:hover .image img {
    transform: scale(1.05);
}
.brand-card .content {
    padding: 28px;
}
.brand-card .number {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 0.06em;
}
.brand-card .title {
    font-size: 22px;
    font-weight: 500;
    margin-top: 12px;
}
.brand-card .desc {
    font-size: 14px;
    color: var(--steel-color);
    margin-top: 10px;
}
.brand-card .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 18px;
}
.brand-card:hover .link {
    color: var(--primary-color);
    gap: 12px;
}
.brand-grid-row > [class*="col-"] {
    margin-bottom: 24px;
}


.service-design-area {
    background-color: var(--dark-color);
    color: var(--light-color);
}
.service-design-area .suffix {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--light-color);
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 7px 14px;
    margin-bottom: 22px;
}
.service-design-area .title {
    font-size: 40px;
    font-weight: 400;
    color: var(--light-color);
    max-width: 520px;
}
.service-design-area .desc {
    margin-top: 20px;
    color: rgba(255, 255, 255, .7);
    max-width: 480px;
}
.service-design-area .image {
    height: 100%;
    min-height: 360px;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.service-design-area .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.stats-block {
    margin-top: 60px;
    border-top: 1px solid var(--line-dark-color);
    padding-top: 60px;
}
.stats-block .item {
    padding: 20px;
    border: 1px solid var(--line-dark-color);
    border-radius: var(--border-radius);
}
.stats-block .num {
    font-size: 60px;
    font-weight: 500;
    color: var(--light-color);
}
.stats-block .num .plus {
    color: var(--primary-color);
}
.stats-block .label {
    font-size: 18px;
    color: rgba(255, 255, 255, .6);
    margin-top: 8px;
    font-weight: 300;
}
.capability-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}
.capability-row .cap {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    border: 1px solid var(--line-dark-color);
    padding: 8px 16px;
    border-radius: 40px;
}


.featured-category-area .category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.featured-category-area .category-grid .category-card {
    flex: 1 1 calc(25% - 18px);
}
.category-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    height: 300px;
}
.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.category-card:hover img {
    transform: scale(1.06);
}
.category-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28, 29, 31, .88) 0%, rgba(28, 29, 31, .28) 64%);
}
.category-card .content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 24px;
    color: var(--light-color);
}
.category-card .number {
    display: none;
}
.category-card .title {
    font-size: 19px;
    font-weight: 500;
    color: var(--light-color);
    margin-top: 8px;
}
.category-card .desc {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    margin-top: 6px;
}
.category-card-list {
    height: 340px;
}
.category-card-list .items {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    line-height: 1.45;
}


.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
    gap: 30px;
}
.section-head .section-title {
    margin-bottom: 0;
}
.sector-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    height: 380px;
}
.sector-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.sector-card:hover img {
    transform: scale(1.05);
}
.sector-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28, 29, 31, .8) 0%, rgba(28, 29, 31, .05) 65%);
}
.sector-card .content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 28px;
    color: var(--light-color);
}
.sector-card .title {
    font-size: 21px;
    font-weight: 500;
    color: var(--light-color);
}
.sector-card .desc {
    font-size: 14px;
    color: rgba(255, 255, 255, .78);
    margin-top: 8px;
}
.sector-card .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--light-color);
    margin-top: 14px;
}
.sector-card.compact-card {
    height: 280px;
}
.sector-solution-area .owl-nav {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.owl-nav button, .custom-nav button {
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-color) !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    font-size: 15px;
    transition: all .3s ease;
}
.owl-nav button:hover, .custom-nav button:hover {
    background-color: var(--dark-color) !important;
    color: var(--light-color) !important;
    border-color: var(--dark-color) !important;
}


.inspiration-area .head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 50px;
    gap: 30px;
}
.inspiration-area .head .section-title {
    margin-bottom: 0;
}
.inspiration-card {
    display: block;
    height: 100%;
}
.inspiration-card .image {
    overflow: hidden;
    border-radius: var(--border-radius);
    height: 320px;
}
.inspiration-card.large .image {
    height: 500px;
}
.inspiration-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.inspiration-card:hover .image img {
    transform: scale(1.04);
}
.inspiration-card .content {
    padding: 22px 0 0;
}
.inspiration-card .tag {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-color);
}
.inspiration-card .title {
    font-size: 22px;
    font-weight: 400;
    margin-top: 10px;
}
.inspiration-card.large .title {
    font-size: 28px;
}
.inspiration-card .desc {
    font-size: 14px;
    color: var(--steel-color);
    margin-top: 10px;
}
.inspiration-card .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 14px;
}
.inspiration-card:hover .link {
    color: var(--primary-color);
    gap: 12px;
}
.inspiration-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
}


.project-reference-area {
    background-color: var(--surface-color);
}
.project-reference-area .head-big {
    margin-bottom: 50px;
}
.project-reference-area .suffix {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--light-color);
    background-color: var(--dark-color);
    padding: 7px 14px;
    margin-bottom: 24px;
}
.project-reference-area .big-title {
    font-size: 52px;
    font-weight: 300;
    max-width: 820px;
}
.project-reference-area .big-title .soft {
    color: var(--steel-color);
}
.project-card {
    display: block;
    height: 100%;
}
.project-card .image {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    height: 300px;
}
.project-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.project-card:hover .image img {
    transform: scale(1.05);
}
.project-card .image .count {
    display: none;
}
.project-card .content {
    padding: 22px 0 0;
}
.project-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.project-card .tags span {
    font-size: 12px;
    color: var(--primary-color);
    border: 1px solid var(--line-color);
    border-radius: 999px;
    padding: 4px 12px;
}
.project-card .title {
    font-size: 22px;
    font-weight: 400;
}
.project-card .desc {
    font-size: 14px;
    color: var(--steel-color);
    margin-top: 10px;
}
.project-card .meta {
    font-size: 13px;
    color: var(--dark-color);
    margin-top: 12px;
}
.project-card .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 14px;
}
.project-card:hover .link {
    color: var(--primary-color);
    gap: 12px;
}


.faq-preview-area .faq-head .suffix,
.faq-area .section-title .suffix {
    display: inline-block;
    margin-bottom: 20px;
}
.faq-preview-area .faq-head .title {
    font-size: 40px;
    font-weight: 400;
    max-width: 420px;
}
.faq-preview-area .faq-head .desc {
    margin-top: 20px;
    color: var(--steel-color);
    max-width: 400px;
}
.faq-preview-area .faq-head .link-btn {
    margin-top: 26px;
}
.faq-list {
    border-top: 1px solid var(--line-color);
}
.faq-item {
    border-bottom: 1px solid var(--line-color);
}
.faq-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 18px;
    font-weight: 500;
    padding: 24px 0;
    cursor: pointer;
    position: relative;
}
.faq-title .icon {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--primary-color);
    transition: transform .3s ease;
}
.faq-title.active .icon {
    transform: rotate(45deg);
}
.faq-content {
    display: none;
    padding-bottom: 26px;
}
.faq-content p {
    color: var(--steel-color);
    font-size: 15px;
    max-width: 760px;
}
.faq-group-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin: 46px 0 10px;
}


.blog-list-area {
    background-color: var(--surface-color);
}
.blog-tools {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 44px;
    padding: 24px;
    background-color: var(--bg-color);
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
}
.blog-search {
    flex: 1 1 52%;
}
.blog-search label,
.popular-tags .label {
    display: block;
    margin-bottom: 12px;
    color: var(--dark-color);
    font-size: 13px;
    font-weight: 700;
}
.blog-search .input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 8px 8px 8px 18px;
    background-color: var(--surface-color);
    border: 1px solid rgba(28, 29, 31, .12);
    border-radius: var(--border-radius);
}
.blog-search .input-wrap i {
    color: var(--primary-color);
}
.blog-search input {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    color: var(--dark-color);
    background: transparent;
    font-size: 15px;
}
.blog-search button {
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 14px;
    color: var(--light-color);
    background-color: var(--dark-color);
    font-weight: 600;
}
.popular-tags {
    flex: 1 1 48%;
}
.popular-tags .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.popular-tags .tags a {
    padding: 9px 14px;
    color: var(--dark-color);
    background-color: var(--surface-color);
    border: 1px solid rgba(28, 29, 31, .12);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.popular-tags .tags a:hover {
    border-color: rgba(166, 73, 31, .32);
    color: var(--primary-color);
}
.blog-preview-area .head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 50px;
    gap: 30px;
}
.blog-preview-area .head .section-title {
    margin-bottom: 0;
}
.blog-card {
    display: block;
    height: 100%;
}
.blog-card .image {
    overflow: hidden;
    border-radius: var(--border-radius);
    height: 300px;
}
.blog-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.blog-card:hover .image img {
    transform: scale(1.05);
}
.blog-card .content {
    padding: 20px 0 0;
}
.blog-card .tag {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel-color);
}
.blog-card .title {
    font-size: 20px;
    font-weight: 500;
    margin-top: 10px;
}
.blog-card .desc {
    font-size: 14px;
    color: var(--steel-color);
    margin-top: 10px;
}
.blog-card .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 14px;
}
.blog-card:hover .link {
    color: var(--primary-color);
    gap: 12px;
}


.marquee-strip {
    background-color: var(--dark-color);
    color: var(--light-color);
    padding: 30px 0;
    overflow: hidden;
    white-space: nowrap;
}
.marquee-strip .track {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    animation: marquee 28s linear infinite;
}
.marquee-strip .track span {
    font-size: 25px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, .85);
}
.marquee-strip .track i {
    color: var(--primary-color);
    font-size: 8px;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}


.final-cta-area {
    position: relative;
    overflow: hidden;
    background-color: var(--dark-color);
    background-image: url("../img/real-image/slider-1.jpg");
    background-size: cover;
    background-position: center;
    color: var(--light-color);
    text-align: center;
}
.final-cta-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(28, 29, 31, .8), rgb(22 60 84));
}
.final-cta-area .container {
    position: relative;
    z-index: 1;
}
.final-cta-area .suffix {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.final-cta-area .title {
    font-size: 48px;
    font-weight: 300;
    color: var(--light-color);
    max-width: 720px;
    margin: 0 auto;
}
.final-cta-area .desc {
    margin: 22px auto 0;
    color: rgba(255, 255, 255, .7);
    max-width: 520px;
}
.final-cta-area .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 36px;
}
.final-cta-area .primary-btn {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.final-cta-area .primary-btn:hover {
    background-color: var(--light-color);
    border-color: var(--light-color);
    color: var(--dark-color);
}


.page-intro-area {
    padding: 56px 0 0;
    background-color: var(--primary-light-color);
}
.breadcrumb-area {
    padding: 26px 0;
    background-color: var(--primary-light-color);
    border-top: 1px solid var(--line-color);
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--steel-color);
    margin: 0;
}
.breadcrumb a {
    color: var(--steel-color);
}
.breadcrumb a:hover {
    color: var(--primary-color);
}
.breadcrumb .sep {
    color: var(--line-color);
}
.breadcrumb .current {
    color: var(--dark-color);
}
.page-intro {
    padding: 20px 0 50px;
    border-bottom: none;
}
.page-intro .suffix {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--light-color);
    background-color: var(--dark-color);
    padding: 7px 14px;
    margin-bottom: 22px;
    border-radius: var(--border-radius);
}
.page-intro .title {
    font-size: 52px;
    font-weight: 300;
    max-width: 840px;
}
.page-intro .title .soft {
    color: var(--steel-color);
}
.page-intro .desc {
    margin-top: 22px;
    color: var(--steel-color);
    max-width: 620px;
    font-size: 17px;
}


.image-text-split .image {
    overflow: hidden;
    border-radius: var(--border-radius);
    height: 100%;
    min-height: 380px;
}
.image-text-split .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-text-split .content .suffix {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 18px;
}
.image-text-split .content .title {
    font-size: 34px;
    font-weight: 400;
}
.image-text-split .content .desc {
    margin-top: 20px;
    color: var(--steel-color);
}
.image-text-split .content .desc + .desc {
    margin-top: 16px;
}
.text-content p,
.article .content p,
.service-cover-content .content p,
.brand-story-area .content p,
.sector-content-area .content p,
.inspiration-content-area .content p,
.blog-detail-area .content p,
.product-about p {
    color: var(--steel-color);
    margin-bottom: 16px;
}
.text-content p:last-child,
.article .content p:last-child,
.service-cover-content .content p:last-child,
.brand-story-area .content p:last-child,
.sector-content-area .content p:last-child,
.inspiration-content-area .content p:last-child,
.blog-detail-area .content p:last-child,
.product-about p:last-child {
    margin-bottom: 0;
}
.text-content h2,
.text-content h3,
.text-content h4,
.article .content h2,
.article .content h3,
.article .content h4,
.service-cover-content .content h2,
.service-cover-content .content h3,
.service-cover-content .content h4,
.brand-story-area .content h2,
.brand-story-area .content h3,
.brand-story-area .content h4,
.sector-content-area .content h2,
.sector-content-area .content h3,
.sector-content-area .content h4,
.inspiration-content-area .content h2,
.inspiration-content-area .content h3,
.inspiration-content-area .content h4,
.project-copy h2,
.project-copy h3,
.project-copy h4,
.product-about h2,
.product-about h3,
.product-about h4 {
    color: var(--dark-color);
    font-weight: 500;
    line-height: 1.3;
}
.text-content h2,
.article .content h2,
.service-cover-content .content h2,
.brand-story-area .content h2,
.sector-content-area .content h2,
.inspiration-content-area .content h2,
.project-copy h2,
.product-about h2 {
    font-size: 30px;
    margin: 38px 0 14px;
}
.text-content h1,
.article .content h1,
.service-cover-content .content h1,
.brand-story-area .content h1,
.sector-content-area .content h1,
.inspiration-content-area .content h1,
.project-copy h1,
.product-about h1 {
    color: var(--dark-color);
    font-size: 36px;
    font-weight: 500;
    line-height: 1.25;
    margin: 42px 0 16px;
}
.text-content h3,
.article .content h3,
.service-cover-content .content h3,
.brand-story-area .content h3,
.sector-content-area .content h3,
.inspiration-content-area .content h3,
.project-copy h3,
.product-about h3 {
    font-size: 23px;
    margin: 30px 0 12px;
}
.text-content h4,
.article .content h4,
.service-cover-content .content h4,
.brand-story-area .content h4,
.sector-content-area .content h4,
.inspiration-content-area .content h4,
.project-copy h4,
.product-about h4 {
    font-size: 18px;
    margin: 24px 0 10px;
}
.text-content h5,
.text-content h6,
.article .content h5,
.article .content h6,
.service-cover-content .content h5,
.service-cover-content .content h6,
.brand-story-area .content h5,
.brand-story-area .content h6,
.sector-content-area .content h5,
.sector-content-area .content h6,
.inspiration-content-area .content h5,
.inspiration-content-area .content h6,
.project-copy h5,
.project-copy h6,
.product-about h5,
.product-about h6 {
    color: var(--dark-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 20px 0 8px;
}
.text-content > :first-child,
.article .content > :first-child,
.service-cover-content .content > :first-child,
.brand-story-area .content > :first-child,
.sector-content-area .content > :first-child,
.inspiration-content-area .content > :first-child,
.project-copy > :first-child,
.product-about > :first-child {
    margin-top: 0;
}
.image-text-split .content .list {
    margin-top: 24px;
}
.image-text-split .content .list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    color: var(--dark-color);
    font-size: 15px;
}
.image-text-split .content .list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
}


.brand-hero-area {
    padding: 40px 0 0;
}
.brand-hero-area.brand-page-hero {
    padding: 0;
}
.brand-hero-area.brand-page-hero .hero-inner {
    border-radius: 0;
    height: 500px;
}
.brand-hero-area .breadcrumb {
    margin-bottom: 18px;
}
.brand-hero-area .breadcrumb a,
.brand-hero-area .breadcrumb .current {
    color: rgba(255, 255, 255, .82);
}
.brand-hero-area .breadcrumb .sep {
    color: rgba(255, 255, 255, .45);
}
.brand-hero-area.detail-hero {
    padding: 20px 0 0;
}
.brand-hero-area.flush-hero {
    padding: 0;
}
.brand-hero-area .hero-inner {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    height: 520px;
}
.brand-hero-area .hero-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.brand-hero-area .content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 54px;
    background: linear-gradient(to top, rgba(28, 29, 31, .82) 0%, rgba(28, 29, 31, 0) 100%);
    color: var(--light-color);
}
.brand-hero-area .badge-brand {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--light-color);
    background-color: var(--primary-color);
    padding: 6px 14px;
    margin-bottom: 20px;
}
.brand-hero-area .title {
    font-size: 52px;
    font-weight: 400;
    color: var(--light-color);
}
.brand-hero-area .desc {
    margin-top: 16px;
    max-width: 560px;
    color: rgba(255, 255, 255, .82);
}


.grid-row > [class*="col-"] {
    margin-bottom: 24px;
}


.product-card {
    display: block;
    background-color: var(--surface-color);
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 100%;
    transition: all .3s ease;
}
.product-card:hover {
    border-color: var(--dark-color);
}
.product-card .image {
    height: 240px;
    overflow: hidden;
}
.product-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.product-card:hover .image img {
    transform: scale(1.05);
}
.product-card .content {
    padding: 22px;
}
.product-card .tag {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-color);
}
.product-card .title {
    font-size: 18px;
    font-weight: 500;
    margin-top: 10px;
}
.product-card .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 16px;
}
.product-card:hover .link {
    color: var(--primary-color);
    gap: 12px;
}


.material-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--dark-color);
    background-color: var(--bg-color);
    border: 1px solid var(--line-color);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 6px 6px 0;
}


.filter-sidebar {
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    background-color: var(--surface-color);
    padding: 28px;
}
.filter-sidebar .filter-group {
    margin-bottom: 28px;
}
.filter-sidebar .filter-group:last-child {
    margin-bottom: 0;
}
.filter-sidebar .filter-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-color);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line-color);
}
.filter-sidebar .filter-list li {
    margin-bottom: 8px;
}
.filter-sidebar .filter-list a {
    font-size: 14px;
    color: var(--steel-color);
}
.filter-sidebar .filter-list a:hover,
.filter-sidebar .filter-list a.active {
    color: var(--primary-color);
}
.filter-toggle {
    display: none;
}


.product-gallery .main-image {
    overflow: hidden;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    height: 460px;
    margin-bottom: 16px;
}
.product-gallery .main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-gallery .main-image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-gallery .thumbs {
    width: 100%;
}
.product-gallery .thumbs.owl-carousel {
    display: block;
    width: 100%;
}
.product-gallery .thumbs .owl-stage-outer {
    width: 100%;
}
.product-gallery .thumbs a {
    flex: 1 1 calc(25% - 12px);
    min-width: 120px;
    width: 100%;
    display: block;
    overflow: hidden;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    height: 100px;
}
.product-gallery .thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-gallery .owl-nav,
.brand-project-slider .owl-nav,
.service-slider .owl-nav,
.blog-slider .owl-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}
.product-gallery .owl-nav button,
.brand-project-slider .owl-nav button,
.service-slider .owl-nav button,
.blog-slider .owl-nav button {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(28, 29, 31, .16) !important;
    border-radius: 50%;
    background-color: var(--surface-color) !important;
    color: var(--dark-color) !important;
}
.product-detail-area .info .tag {
    display: inline-flex;
    width: fit-content;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-color);
}
.product-detail-area .info .title {
    font-size: 38px;
    font-weight: 400;
    margin-top: 12px;
}
.product-detail-area .info .desc {
    margin-top: 20px;
    color: var(--steel-color);
}
.product-detail-area .info .badges {
    margin-top: 24px;
}
.product-detail-area .info .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}


.specs-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--line-color);
}
.specs-table tr {
    border-bottom: 1px solid var(--line-color);
}
.specs-table th {
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-color);
    padding: 16px 20px 16px 0;
    width: 40%;
}
.specs-table td {
    font-size: 14px;
    color: var(--steel-color);
    padding: 16px 0;
}


.catalog-card {
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 100%;
    transition: all .3s ease;
}
.catalog-card:hover {
    border-color: var(--dark-color);
}
.catalog-card .image {
    height: 300px;
    overflow: hidden;
    background-color: var(--bg-color);
}
.catalog-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.catalog-card .content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.catalog-card .tag {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
}
.catalog-card .title {
    font-size: 19px;
    font-weight: 500;
    margin-top: 10px;
}
.catalog-card .desc {
    font-size: 14px;
    color: var(--steel-color);
    margin-top: 10px;
}
.catalog-card .link-btn {
    margin-top: auto;
    padding-top: 20px;
    border-bottom: none;
}


.value-card {
    padding: 32px;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    background-color: var(--surface-color);
    height: 100%;
}
.value-card .num {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
}
.value-card .title {
    font-size: 20px;
    font-weight: 500;
    margin-top: 14px;
}
.value-card .desc {
    font-size: 14px;
    color: var(--steel-color);
    margin-top: 12px;
}


.contact-area .info .section-title {
    margin-bottom: 28px;
}
.contact-area .info-card {
    height: 100%;
    padding: 28px;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    background-color: var(--surface-color);
    transition: border-color .3s ease, color .3s ease;
}
.contact-area .info-card:hover {
    border-color: var(--primary-color);
}
.contact-area .info-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 50%;
    background-color: rgb(243 244 246);
    color: var(--primary-color);
    font-size: 20px;
}
.contact-area .info-card .label {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-color);
}
.contact-area .info-card .value {
    display: block;
    color: var(--steel-color);
    font-size: 16px;
    margin-top: 8px;
}
.contact-area .info-card a.value:hover {
    color: var(--primary-color);
}
.contact-area .address-card iframe {
    margin-top: 22px;
}
.social-inline {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.social-inline a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-color);
    border-radius: 50%;
}
.social-inline a:hover {
    background-color: var(--dark-color);
    color: var(--light-color);
    border-color: var(--dark-color);
}
.contact-area iframe {
    width: 100%;
    height: 300px;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    margin-top: 0;
}
.contact-form-wrap {
    margin-top: 36px;
    padding: 34px;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    background-color: var(--surface-color);
}
.form-group {
    position: relative;
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}
.form-control {
    width: 100%;
    font-family: var(--title-font);
    font-size: 15px;
    color: var(--dark-color);
    background-color: var(--surface-color);
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    padding: 13px 16px;
    box-shadow: none;
    outline: none;
}
.form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary-color);
}
.form-error {
    display: none;
    font-size: 12px;
    color: var(--primary-color);
    margin-top: 6px;
}
.form-group.error .form-control {
    border-color: var(--primary-color);
}
.form-group.error .form-error {
    display: block;
}

.project-hero-area .project-cover > .breadcrumb {
    margin-bottom: 18px;
}
.project-detail-area .project-copy {
    color: var(--steel-color);
    max-width: 900px;
}
.project-detail-area .project-copy p {
    margin-bottom: 18px;
}
.project-detail-area .project-copy p:last-child {
    margin-bottom: 0;
}
.project-detail-area .project-copy + .project-copy {
    margin-top: 18px;
}
.text-link {
    color: var(--primary-color);
}
.text-link:hover {
    color: var(--primary-dark-color);
}


.empty-state {
    text-align: center;
    padding: 70px 20px;
    border: 1px dashed var(--line-color);
    border-radius: var(--border-radius);
}
.empty-state i {
    font-size: 40px;
    color: var(--steel-color);
}
.empty-state .title {
    font-size: 22px;
    font-weight: 500;
    margin-top: 20px;
}
.empty-state .desc {
    color: var(--steel-color);
    margin-top: 12px;
}
.empty-state .primary-btn {
    margin-top: 24px;
}


.pagination-area {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 50px;
}
.pagination-area a {
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1px solid var(--line-color);
    padding: 0 8px;
}
.pagination-area a.active,
.pagination-area a:hover {
    background-color: var(--dark-color);
    color: var(--light-color);
    border-color: var(--dark-color);
}


.next-project-area .next-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 40px;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    background-color: var(--surface-color);
}
.next-project-area .label {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel-color);
}
.next-project-area .title {
    font-size: 28px;
    font-weight: 400;
    margin-top: 10px;
}


.error-area {
    text-align: center;
    margin: 110px 0;
}
.error-area .code {
    font-size: 140px;
    font-weight: 300;
    line-height: 1;
    color: var(--dark-color);
}
.error-area .title {
    font-size: 30px;
    font-weight: 400;
    margin-top: 16px;
}
.error-area .subtitle {
    font-size: 20px;
    font-weight: 400;
    margin-top: 12px;
    color: var(--steel-color);
}
.error-area .desc {
    color: var(--steel-color);
    margin-top: 14px;
}
.error-area .primary-btn {
    margin-top: 28px;
}


.blog-detail-area .article {
    max-width: 760px;
}
@media (max-width: 575px) {
    .blog-detail-area {
        overflow-x: hidden;
    }
}
.blog-detail-area .article .meta {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-color);
}
.blog-detail-area .article .title {
    font-size: 40px;
    font-weight: 400;
    margin-top: 16px;
}
.blog-detail-area .article .cover {
    overflow: hidden;
    border-radius: var(--border-radius);
    height: 420px;
    margin: 30px 0;
}
.blog-detail-area .article .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-faq-item {
    max-width: 760px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line-color);
}
.search-faq-item h3 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 10px;
}
.search-faq-item .desc {
    color: var(--steel-color);
}
.blog-detail-area .article p {
    color: var(--dark-soft-color);
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 20px;
}
.blog-detail-area .article h3 {
    font-size: 26px;
    font-weight: 500;
    margin: 34px 0 16px;
}
.blog-sidebar {
    position: sticky;
    top: 100px;
    padding: 24px;
    background-color: var(--surface-color);
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
}
.blog-sidebar > .title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
}
.latest-blog {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--line-color);
}
.latest-blog img {
    width: 92px;
    height: 72px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 14px;
}
.latest-blog span {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.latest-blog strong {
    color: var(--dark-color);
    font-size: 15px;
    line-height: 1.35;
}
.latest-blog small {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
}
.blog-sidebar .link-btn {
    margin-top: 18px;
}


.values-area,
.capability-area {
    background-color: var(--primary-light-color);
}
.gallery-area a {
    display: block;
    height: 250px;
    overflow: hidden;
    border-radius: var(--border-radius);
    border: 1px solid var(--line-color);
}
.gallery-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.gallery-area a:hover img {
    transform: scale(1.05);
}
.brand-universe-wide {
    overflow: hidden;
}
.brand-universe-wide .section-title {
    margin-bottom: 42px;
}
.brand-universe-wide .brand-slider-wrap {
    border-radius: 0;
    padding: 30px;
    background-color: var(--light-color);
}
.brand-universe-wide .brand-slider-wrap .owl-dots .owl-dot {
    background-color: rgba(0,0,0,.2) !important;
}
.brand-universe-wide .brand-slider-wrap .owl-dots .owl-dot.active {
    background-color: var(--primary-color) !important;
}
.catalog-download-panel {
    display: flex;
    align-items: stretch;
    gap: 40px;
    padding: 36px;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    background-color: var(--surface-color);
}
.catalog-download-panel .section-title {
    flex: 1 1 42%;
    margin-bottom: 0;
}
.catalog-download-list {
    flex: 1 1 58%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.catalog-download-list a {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    color: var(--dark-color);
    font-weight: 600;
}
.catalog-download-list a:hover {
    border-color: rgba(166, 73, 31, .32);
    color: var(--primary-color);
}
.catalog-download-list span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.catalog-download-item {
    min-height: 68px;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--surface-color);
    transition: border-color .3s ease;
}
.catalog-download-item:hover {
    border-color: rgba(166, 73, 31, .32);
}
.catalog-download-item .catalog-title {
    min-height: 68px;
    flex: 1 1 auto;
    justify-content: flex-start;
    border: none;
    border-radius: 0;
    padding: 18px 20px;
}
.catalog-download-item .catalog-thumb {
    width: 84px;
    height: 58px;
    flex: 0 0 84px;
    overflow: hidden;
    border-radius: 12px;
}
.catalog-download-item .catalog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.catalog-download-item .catalog-action {
    min-height: 68px;
    width: 92px;
    flex: 0 0 92px;
    justify-content: center;
    border: none;
    border-left: 1px solid var(--line-color);
    border-radius: 0;
    padding: 0;
}
.catalog-download-item .catalog-action i + i {
    margin-left: 8px;
}
.catalog-download-item:hover .catalog-action {
    color: var(--primary-color);
}
.catalog-page-list {
    max-width: 960px;
    margin: 0 auto;
    gap: 14px;
}
.other-sector-list {
    padding: 20px;
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    background-color: var(--surface-color);
}
.other-sector-list > .title {
    font-size: 24px;
    margin-bottom: 18px;
}
.other-sector-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-color);
    color: var(--dark-color);
    font-weight: 600;
}
.other-sector-list a:last-child {
    border-bottom: none;
}
.other-sector-list img {
    width: 92px;
    height: 70px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 12px;
}
.service-cover-content .cover {
    display: block;
    height: 500px;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.service-cover-content .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-cover-content .content {
    margin-top: 34px;
    max-width: 820px;
}
.service-cover-content .title,
.text-content .title {
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 22px;
}
.related-content-area {
    border-top: 1px solid var(--line-color);
}
.inspiration-list-area .inspiration-card,
.related-content-area .inspiration-card {
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--surface-color);
}
.inspiration-list-area .inspiration-card .content,
.related-content-area .inspiration-card .content {
    padding: 24px;
}
.inspiration-list-area .inspiration-card .tag,
.related-content-area .inspiration-card .tag {
    display: none;
}
.popular-tags {
    min-width: 0;
}
.popular-tags .tags {
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.popular-tags .tags a,
.blog-search .input-wrap {
    min-height: 58px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}


.inspiration-content-area .article {
    max-width: 860px;
    margin: 0 auto;
}
.inspiration-content-area .article p {
    color: var(--dark-soft-color);
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 20px;
}
.inspiration-content-area .article h3 {
    font-size: 26px;
    font-weight: 500;
    margin: 34px 0 16px;
}
.inspiration-content-area .full-image {
    overflow: hidden;
    border-radius: var(--border-radius);
    height: 480px;
    margin: 34px 0;
}
.inspiration-content-area .full-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media screen and (max-width: 1199px) {
    .hero-area .title { font-size: 50px; }
    .project-reference-area .big-title { font-size: 42px; }
    .page-intro .title { font-size: 42px; }
}
@media screen and (max-width: 991px) {
    header .nav { display: none; }
    header .navbar-toggler { display: block; }
    header .navbar { height: 70px; }
    .section-py { padding: 60px 0; }
    .hero-area .image { height: 480px; }
    .hero-area .content { padding: 40px; }
    .hero-area .title { font-size: 40px; }
    .featured-category-area .category-grid .category-card { flex-basis: calc(50% - 12px); }
    .stats-block .item { width: 50%; }
    .stats-block .item { padding: 26px 20px 20px 0; }
    .service-design-area .image { min-height: 300px; margin-bottom: 40px; }
    .inspiration-card.large .image { height: 360px; }
    .inspiration-col { margin-top: 40px; }
    .section-title .title { font-size: 34px; }
    .project-reference-area .big-title { font-size: 34px; }
    .final-cta-area .title { font-size: 36px; }
    .page-intro .title { font-size: 36px; }
    .brand-hero-area .hero-inner { height: 420px; }
    .brand-hero-area .content { padding: 40px; }
    .brand-hero-area .title { font-size: 40px; }
    .brand-universe-area .head,
    .sector-solution-area .section-head,
    .inspiration-area .section-head,
    .blog-preview-area .section-head { flex-direction: column; align-items: flex-start; }
    .product-gallery { margin-bottom: 40px; }
    .next-project-area .next-inner { flex-direction: column; align-items: flex-start; text-align: left; }
    .blog-tools { flex-direction: column; }
    .blog-sidebar { position: static; margin-top: 34px; }
}
@media screen and (max-width: 767px) {
    .section-py { padding: 48px 0; }
    .hero-area { padding: 20px 0 0; }
    .hero-area .image { height: 420px; }
    .hero-area .content { padding: 28px; }
    .hero-area .title { font-size: 32px; }
    .hero-area .desc { font-size: 15px; }
    .hero-area .buttons { flex-direction: column; align-items: stretch; }
    .hero-area .buttons .primary-btn,
    .hero-area .buttons .outline-btn { justify-content: center; }
    .featured-category-area .category-grid .category-card { flex-basis: 100%; }
    .stats-block .item { width: 100%; }
    .section-title .title { font-size: 28px; }
    .section-title { margin-bottom: 36px; }
    .service-design-area .title { font-size: 30px; }
    .stats-block .num { font-size: 34px; }
    .project-reference-area .big-title { font-size: 28px; }
    .final-cta-area .title { font-size: 28px; }
    .final-cta-area .buttons { flex-direction: column; }
    .page-intro .title { font-size: 30px; }
    .page-intro { padding-bottom: 36px; }
    .blog-detail-area .article .title { font-size: 30px; }
    .blog-detail-area .article .cover { height: 260px; }
    .blog-tools { padding: 18px; }
    .blog-search .input-wrap { flex-wrap: wrap; }
    .blog-search button { width: 100%; }
    .latest-blog img { width: 78px; height: 64px; }
    .product-gallery .main-image { height: 320px; }
    .product-detail-area .info .title { font-size: 30px; }
    .filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 500;
        padding: 12px 18px;
        border: 1px solid var(--line-color);
        margin-bottom: 20px;
        cursor: pointer;
    }
    .filter-sidebar { display: none; margin-bottom: 30px; }
    .filter-sidebar.active { display: block; }
    .error-area .code { font-size: 96px; }
}


body.home-page header {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    z-index: 1002;
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
}
body.home-page header.sticky {
    position: fixed;
    top: 12px;
    border-bottom: none;
    box-shadow: none;
}
body.home-page header .navbar {
    height: 66px;
    padding: 0 18px;
    background-color: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--border-radius);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
body.home-page header.sticky .navbar {
    height: 62px;
    border-bottom: none;
    box-shadow: 0 12px 34px rgba(28, 29, 31, .2);
}
body.home-page header .nav-link {
    padding: 22px 0;
}
body.home-page header .nav-link:after {
    bottom: 18px;
}
body.home-page .section-title .suffix,
body.home-page .suffix {
    border-radius: 999px;
}


body.home-page .hero-area {
    padding: 0;
    background-color: var(--dark-color);
}
body.home-page .hero-area .hero-slider,
body.home-page .hero-area .owl-stage-outer,
body.home-page .hero-area .owl-stage,
body.home-page .hero-area .owl-item,
body.home-page .hero-area .hero-slide {
    height: 100vh;
    height: 100svh;
    min-height: 720px;
}
body.home-page .hero-area .hero-slide {
    position: relative;
    overflow: hidden;
}
body.home-page .hero-area .hero-slide:after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            linear-gradient(90deg, rgba(28, 29, 31, .84) 0%, rgba(28, 29, 31, .42) 52%, rgba(28, 29, 31, .18) 100%),
            linear-gradient(0deg, rgba(28, 29, 31, .5), rgba(28, 29, 31, 0) 46%);
    z-index: 1;
}
body.home-page .hero-area .hero-media,
body.home-page .hero-area .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
body.home-page .hero-area .hero-media img,
body.home-page .hero-area .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}
body.home-page .hero-area .container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}
body.home-page .hero-area .content {
    position: absolute;
    left: 12px;
    bottom: clamp(72px, 10vh, 118px);
    width: auto;
    max-width: 860px;
    padding: 0;
    background: none;
    color: var(--light-color);
}
body.home-page .hero-area .review-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--light-color);
    background-color: rgba(28, 29, 31, .54);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 8px 14px 8px 8px;
    margin-bottom: 24px;
}
body.home-page .hero-area .review-pill .avatars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 32px;
    padding: 0 10px;
    color: var(--dark-color);
    background-color: #a4dbfe;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
body.home-page .hero-area .review-pill span:last-child {
    font-size: 13px;
    color: rgba(255, 255, 255, .84);
}
body.home-page .hero-area .title {
    max-width: 820px;
    font-size: clamp(44px, 7vw, 92px);
    line-height: .98;
    font-weight: 600;
    color: var(--light-color);
    text-transform: none;
    text-wrap: balance;
}
body.home-page .hero-area .desc {
    max-width: 610px;
    margin-top: 24px;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
}
body.home-page .hero-area .buttons {
    margin-top: 34px;
}
body.home-page .hero-area .primary-btn {
    background-color: #a4dbfe;
    border-color: #a4dbfe;
    color: var(--dark-color);
}
body.home-page .hero-area .primary-btn:hover {
    background-color: var(--light-color);
    border-color: var(--light-color);
    color: var(--dark-color);
}
body.home-page .hero-area .outline-btn {
    color: var(--light-color);
    border-color: rgba(255, 255, 255, .46);
}
body.home-page .hero-area .outline-btn:hover {
    background-color: var(--light-color);
    color: var(--dark-color);
}
body.home-page .hero-area .owl-dots {
    position: absolute;
    right: calc((100vw - min(1320px, 100vw - 40px)) / 2);
    bottom: 86px;
    z-index: 3;
    display: flex;
    gap: 8px;
}
body.home-page .hero-area .owl-dot {
    width: 34px;
    height: 3px;
    background-color: rgba(255, 255, 255, .34) !important;
    border-radius: 999px;
}
body.home-page .hero-area .owl-dot.active {
    background-color: #a4dbfe !important;
}


.about-us-area {
    background-color: var(--surface-color);
}
.about-us-area .about-cover {
    position: relative;
    height: 560px;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.about-us-area .about-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.about-us-area .about-cover:hover img {
    transform: scale(1.04);
}
.about-us-area .content {
    padding: 22px 0 22px 32px;
}
.about-us-area .content .suffix,
.brand-copy .suffix,
.inspiration-area .section-head .suffix,
.service-design-area .section-head .suffix {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--light-color);
    background-color: var(--dark-color);
    padding: 7px 14px;
    margin-bottom: 22px;
}
.about-us-area .content .title {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 500;
    max-width: 760px;
}
.about-us-area .content .desc {
    margin-top: 24px;
    color: var(--steel-color);
    max-width: 720px;
}
.about-us-area .content .link-btn {
    margin-top: 26px;
}


body.home-page .brand-universe-area {
    background-color: var(--primary-light-color);
    --edge-space: max(12px, calc((100vw - 1320px) / 2));
}
.brand-copy-shell {
    height: 100%;
    padding-left: var(--edge-space);
}
.brand-copy {
    height: 100%;
    background-color: transparent;
    border-radius: 0;
    padding: clamp(34px, 5vw, 58px) 0;
}
.brand-copy .title {
    font-size: clamp(42px, 6vw, 74px);
    line-height: .98;
    font-weight: 400;
    text-wrap: balance;
}
.brand-copy .soft {
    color: var(--steel-color);
}
.brand-copy .desc {
    margin-top: 28px;
    color: var(--steel-color);
    max-width: 430px;
}
.brand-copy .primary-btn {
    margin-top: 34px;
}
.brand-slider-wrap {
    position: relative;
    min-width: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-color);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    padding: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.brand-slider-wrap .owl-stage-outer {
    padding-right: 0;
}
.brand-slide-card {
    position: relative;
    display: block;
    min-height: 540px;
    overflow: hidden;
    border-radius: var(--border-radius);
    color: var(--light-color);
    background-color: var(--light-color);
}
.brand-slide-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28, 29, 31, .86), rgba(28, 29, 31, .08) 64%);
}
.brand-slide-card img {
    width: 100%;
    height: 540px;
    object-fit: contain;
    transition: transform .7s ease;
}
.brand-slide-card:hover img {
    transform: scale(1.04);
}
.brand-slide-card .content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 34px;
}
.brand-slide-card .title {
    color: var(--light-color);
    font-size: 34px;
    font-weight: 500;
    margin-top: 10px;
}
.brand-slide-card .desc {
    max-width: 440px;
    margin-top: 10px;
    color: rgba(255, 255, 255, .76);
}
.brand-slider-wrap .owl-nav,
.service-design-area .owl-nav,
.blog-preview-area .owl-nav {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-direction: row;
    justify-content: space-between;
}
.brand-slider-wrap .owl-nav {
}
.brand-slider-wrap .owl-nav button,
.service-design-area .owl-nav button,
.blog-preview-area .owl-nav button,
.inspiration-custom-nav button {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(28, 29, 31, .16) !important;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92) !important;
    color: var(--dark-color) !important;
    transition: all .3s ease;
}
.brand-slider-wrap .owl-nav button:hover,
.service-design-area .owl-nav button:hover,
.blog-preview-area .owl-nav button:hover,
.inspiration-custom-nav button:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--light-color) !important;
}
.brand-slider-wrap .owl-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}
.brand-slider-wrap .owl-dot,
.service-design-area .owl-dot,
.inspiration-area .owl-dot,
.blog-preview-area .owl-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background-color: rgba(255,255,255,.3) !important;
    transition: all .3s ease;
}
.inspiration-area .owl-dot {
    background-color: rgba(0,0,0,.3) !important;
}
.brand-slider-wrap .owl-dot.active,
.service-design-area .owl-dot.active,
.inspiration-area .owl-dot.active,
.blog-preview-area .owl-dot.active {
    width: 28px;
    background-color: var(--primary-color) !important;
}

body.home-page .faq-preview-area .faq-head {
    padding-right: 42px;
}
body.home-page .faq-preview-area .faq-head .suffix {
    margin-bottom: 30px;
}


body.home-page .sector-solution-area {
    overflow: hidden;
}
body.home-page .sector-solution-area .sector-slider {
    margin-top: 6px;
}
body.home-page .sector-card {
    height: auto;
    background-color: var(--surface-color);
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}
body.home-page .sector-card .image {
    height: 260px;
    overflow: hidden;
}
body.home-page .sector-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
body.home-page .sector-card:hover .image img {
    transform: scale(1.04);
}
body.home-page .sector-card .overlay,
body.home-page .sector-card .link {
    display: none;
}
body.home-page .sector-card .content {
    position: relative;
    padding: 22px;
    color: var(--dark-color);
}
body.home-page .sector-card .title {
    color: var(--dark-color);
    font-size: 22px;
}
body.home-page .sector-card .desc {
    color: var(--steel-color);
    margin-bottom: 0;
}


body.home-page .service-design-area {
    background-color: #071912;
    color: var(--light-color);
    overflow: hidden;
}
.service-design-area .section-head {
    gap: 40px;
    margin-bottom: 48px;
}
.service-design-area .section-head > * {
    flex: 1 1 0;
}
.service-design-area .section-head .suffix {
    color: var(--dark-color);
    background-color: #a4dbfe;
}
.service-design-area .section-head .title {
    max-width: 780px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.02;
    font-weight: 500;
    color: var(--light-color);
}
.service-design-area .section-head .desc {
    color: rgba(255, 255, 255, .68);
    max-width: 520px;
}
.service-slide-card {
    position: relative;
    display: block;
    min-height: 430px;
    overflow: hidden;
    border-radius: var(--border-radius);
    color: var(--light-color);
}
.service-slide-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            linear-gradient(135deg, rgba(234, 240, 76, .56) 0%, rgba(166, 73, 31, .36) 34%, rgba(28, 29, 31, .22) 62%),
            linear-gradient(to top, rgba(28, 29, 31, .9), rgba(28, 29, 31, .08));
}
.service-slide-card img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    transition: transform .7s ease;
}
.service-slide-card:hover img {
    transform: scale(1.04);
}
.service-slide-card .content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
}
.service-slide-card .tag {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}
.service-slide-card .title {
    max-width: 470px;
    margin-top: 12px;
    color: var(--light-color);
    font-size: 28px;
    font-weight: 500;
}
.service-slide-card .arrow,
.inspiration-card .arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-color);
    background-color: #a4dbfe;
    border-radius: 50%;
}
.service-design-area .owl-nav button {
    border-color: rgba(255, 255, 255, .22) !important;
}
body.home-page .service-design-area .owl-nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
}
body.home-page .service-design-area .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: -28px;
    min-height: 44px;
}
body.home-page .service-design-area .owl-dot {
    background-color: rgba(255, 255, 255, .28) !important;
}
body.home-page .service-design-area .owl-dot.active {
    background-color: #a4dbfe !important;
}


body.home-page .inspiration-area {
    background-color: var(--bg-color);
    overflow: hidden;
}
body.home-page .inspiration-area > .container > .row {
    margin-bottom: 44px;
}
.inspiration-area .section-head {
    max-width: 760px;
    display: block;
    margin-bottom: 0;
}
.inspiration-area .section-head .suffix {
    color: var(--light-color);
    background-color: var(--dark-color);
}
.inspiration-area .section-head .title {
    font-size: clamp(38px, 5vw, 70px);
    line-height: 1.02;
    font-weight: 500;
    color: var(--dark-color);
    text-wrap: balance;
}
.inspiration-area .section-head .link-btn {
    margin-top: 26px;
}
.inspiration-custom-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
}
body.home-page .inspiration-slider {
    padding-left: max(20px, calc((100vw - 1320px) / 2));
}
body.home-page .inspiration-card {
    position: relative;
    display: block;
    height: 520px;
    overflow: hidden;
    border-radius: var(--border-radius);
}
body.home-page .inspiration-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
body.home-page .inspiration-card:hover img {
    transform: scale(1.04);
}
body.home-page .inspiration-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28, 29, 31, .82), rgba(28, 29, 31, .08) 62%);
}
body.home-page .inspiration-card .title {
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 2;
    max-width: 520px;
    color: var(--light-color);
    font-size: 34px;
    font-weight: 500;
}
body.home-page .inspiration-area .owl-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}


body.home-page .blog-preview-area {
    background-color: var(--primary-light-color);
}
.blog-preview-area .section-head {
    margin-bottom: 34px;
}
.blog-preview-area .section-head .title {
    font-size: clamp(32px, 4.2vw, 56px);
    font-weight: 500;
}
.blog-card .meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--dark-color);
    font-size: 13px;
    font-weight: 500;
}
body.home-page .blog-preview-area .owl-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
}
body.home-page .marquee-strip {
    /* margin-top: 60px; */
}


footer {
    background-color: var(--primary-dark-color);
    color: var(--dark-color);
    padding: 52px 0 30px;
}
footer .footer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(28, 29, 31, .12);
}
footer .footer-logo img {
    height: 55px;
    width: auto;
}
footer .footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
footer .footer-socials a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dark-color);
    background-color: var(--surface-color);
    border: 1px solid rgba(28, 29, 31, .12);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
}
footer .footer-grid {
    padding-top: 36px;
}
footer .item {
    margin-bottom: 28px;
}
footer .item .title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--light-color);
}
footer .links li {
    margin-bottom: 8px;
}
footer .links a,
footer .desc,
footer .desc a,
footer .copyright .desc {
    color: var(--line-color);
    font-size: 17px;
}
footer .links a:hover,
footer .copyright .desc:hover {
    text-decoration: underline;
}
footer .desc p {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
footer .desc i {
    color: var(--primary-color);
    margin-top: 4px;
}
footer .footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
footer .desc .footer-contact-link,
footer .desc .footer-contact-location {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    color: var(--dark-color);
    background-color: rgba(255, 255, 255, .72);
    border: 1px solid rgba(28, 29, 31, .12);
    border-radius: 14px;
    font-weight: 600;
}
footer .desc .footer-contact-link:hover {
    color: var(--dark-color);
    background-color: var(--surface-color);
    border-color: rgba(166, 73, 31, .32);
}
footer .desc .footer-contact-link i,
footer .desc .footer-contact-location i {
    width: 18px;
    margin-top: 0;
    flex-shrink: 0;
}
footer .footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
    color: var(--light-color);
    font-weight: 600;
    border-bottom: 1px solid var(--light-color);
}
footer .copyright {
    padding-top: 22px;
    margin-top: 10px;
    border-top: 1px solid rgba(28, 29, 31, .12);
}

@media screen and (max-width: 1199px) {
    .brand-slider-wrap {
        width: 100%;
        margin-right: 0;
    }
    .brand-slide-card,
    .brand-slide-card img {
        min-height: 460px;
        height: 460px;
    }
}
@media screen and (max-width: 991px) {
    body.home-page header {
        top: 12px;
    }
    body.home-page header .navbar {
        height: 62px;
    }
    .search-panel {
        top: 86px;
    }
    .search-box {
        margin-left: 0;
    }
    body.home-page .hero-area .hero-slide {
        min-height: 680px;
    }
    body.home-page .hero-area .content {
        bottom: 74px;
    }
    .about-us-area .about-cover {
        height: 440px;
    }
    .about-us-area .content {
        padding-left: 0;
    }
    .section-head {
        align-items: start;
        flex-direction: column;
    }
    .service-design-area .section-head > * {
        flex: 0 1 auto;
    }
    .inspiration-custom-nav {
        justify-content: flex-start;
        margin-top: 24px;
        padding-top: 0;
    }
    footer .footer-head {
        align-items: flex-start;
        flex-direction: column;
    }
    body.home-page .faq-preview-area .faq-head {
        padding-right: 0;
        margin-bottom: 34px;
    }
}
@media screen and (max-width: 767px) {
    body.home-page .hero-area .hero-slide {
        height: 100svh;
        min-height: 620px;
    }
    body.home-page .hero-area .content {
        left: 0;
        right: 0;
        bottom: 62px;
    }
    body.home-page .hero-area .title {
        font-size: 42px;
    }
    body.home-page .hero-area .buttons {
        align-items: stretch;
        flex-direction: column;
    }
    .search-box {
        padding: 22px;
    }
    .search-box .input-wrap {
        flex-wrap: wrap;
    }
    .search-box button[type="submit"] {
        width: 100%;
    }
    body.home-page .hero-area .owl-dots {
        left: 20px;
        right: auto;
        bottom: 28px;
    }
    .brand-slider-wrap {
        border-radius: var(--border-radius) 0 0 var(--border-radius);
        padding: 18px 18px 82px;
    }
    .brand-slider-wrap .owl-nav {
        left: 18px;
        bottom: 18px;
    }
    .brand-slider-wrap .owl-dots {
        left: auto;
        right: 18px;
        bottom: 35px;
    }
    .brand-slide-card,
    .brand-slide-card img {
        min-height: 420px;
        height: 420px;
    }
    .brand-slide-card .content,
    .service-slide-card .content {
        padding: 22px;
    }
    body.home-page .inspiration-card {
        height: 420px;
    }
    body.home-page .inspiration-card .title,
    .service-slide-card .title {
        font-size: 24px;
    }
}


/* Liste açıklamaları */
.expandable-description {
    min-width: 0;
    text-align: left;
}
.expandable-description .expandable-description-text {
    margin-bottom: 0;
}
.expandable-description-text > :first-child {
    margin-top: 0;
}
.expandable-description-text > :last-child {
    margin-bottom: 0;
}
.expandable-description.is-collapsible:not(.is-expanded) .expandable-description-text {
    max-height: var(--description-height);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.expandable-description.is-collapsible:not(.is-expanded) .expandable-description-text :is(div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, blockquote) {
    display: inline;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
}
.description-toggle {
    display: block;
    margin: 4px 0 0 auto;
    padding: 5px 0 5px 12px;
    border: 0;
    background: transparent;
    color: var(--primary-color);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.description-toggle[hidden] {
    display: none;
}
.description-toggle:focus-visible,
.product-navigation a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}
.product-navigation {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 24px 0;
    padding: 16px 0;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
}
.product-navigation a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--dark-color);
}
.product-navigation a:hover {
    color: var(--primary-color);
}

.wcm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}