/* Kuzey Marmara: consistent colour and depth across the existing site. */
:root {
    --km-navy: #112b49;
    --km-blue: #2463a9;
    --km-teal: #188b91;
    --km-gold: #efa948;
    --km-orange: #d97642;
    --km-ink: #20354a;
    --km-soft: #f3f8fc;
}

.header-upper {
    background: linear-gradient(110deg, #0e213b 0%, #174775 55%, #2463a9 100%);
}
.header-upper-left:before {
    background: linear-gradient(125deg, #091c33, #153c66);
}
.header-upper-left .logo a {
    padding: 8px 13px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}
.header-upper-right:before {
    background: transparent;
}
.header-contact-info ul li .icon span:before {
    color: #7bd2d0;
}
.header-lawer .outer-box:before {
    left: 0;
    right: 0;
    transform: none;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(13, 39, 68, .18);
}
.header-lawer-right .button a,
.mobile-call {
    background: linear-gradient(135deg, #e89050, var(--km-orange));
    box-shadow: 0 7px 18px rgba(196, 88, 41, .22);
}
.header-lawer-right .button a:hover,
.mobile-call:hover {
    filter: brightness(.94);
    transform: translateY(-2px);
    color: #fff;
}
.sticky-header {
    background: rgba(13, 34, 59, .96);
    box-shadow: 0 10px 28px rgba(8, 27, 49, .22);
}
.sticky-header .logo a {
    padding: 4px 9px;
    border-radius: 8px;
    background: #fff;
}
.sticky-header .main-menu .navigation > li > a:hover {
    color: #8dded9;
}

.main-slider .slide .image-layer:before {
    z-index: 0;
    background: linear-gradient(90deg, rgba(8, 24, 43, .75), rgba(7, 23, 44, .46) 60%, rgba(7, 23, 44, .28));
}
.main-slider.style1 .slide {
    padding: 180px 0;
}
.main-slider.style1 .content {
    max-width: 790px;
    padding: 0;
    border: 0;
}
.main-slider.style1 .content:before {
    display: none;
}
.main-slider.style1 .content h3 {
    color: #f5c276;
    font-weight: 700;
}
.main-slider.style1 .content h2 {
    letter-spacing: -.03em;
    line-height: 1.12;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .24);
}
.main-slider.style1 .content p {
    max-width: 690px;
    font-size: 18px;
    line-height: 1.55;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .26);
}
.hero-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}
.hero-contact-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 58px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(6, 21, 40, .24);
    transition: transform .2s ease, filter .2s ease;
}
.hero-contact-action i {
    font-size: 21px;
}
.hero-contact-action:hover {
    transform: translateY(-3px);
    filter: brightness(.96);
}
.hero-contact-action--call {
    background: #ffd000;
    color: #142638;
}
.hero-contact-action--call:hover {
    color: #142638;
}
.hero-contact-action--whatsapp {
    background: #21c95f;
    color: #fff;
}
.hero-contact-action--whatsapp:hover {
    color: #fff;
}
.main-slider .btn-one,
.about-style1-area .btn-one,
.single-project-style1-content .btn-one {
    filter: drop-shadow(0 8px 15px rgba(7, 30, 53, .18));
}

.about-style1-area {
    background: linear-gradient(130deg, #fff 0%, #f2f8fc 70%, #eaf4f8 100%);
}
.about-style1-image-box .image-box img {
    border-radius: 14px;
    box-shadow: 0 22px 42px rgba(20, 55, 85, .18);
}
.about-style1-text-box .title h5 {
    color: var(--km-teal);
    letter-spacing: .12em;
}
.about-style1-text-box {
    margin-right: 0;
}
.about-style1-text-box .inner-contant .text {
    margin-right: 0;
}
.about-style1-text-box .title h2,
.sec-title h2,
.single-project-style1-content .title h2 {
    color: var(--km-navy);
}
.about-style1-text-box .inner-contant .text:before {
    border-color: #a8d6d5;
}
.about-style1-text-box .inner-contant .text .inner {
    border-radius: 0 12px 12px 0;
    box-shadow: 0 10px 26px rgba(21, 63, 99, .08);
}
.about-style1-text-box .inner-contant ul li:before {
    color: var(--km-teal);
}

.services-style1-area .outer-container,
.services-style1-area.service-page {
    background: var(--km-soft);
}
.services-style1-area .layer-outer::before {
    background: linear-gradient(120deg, rgba(12, 36, 61, .94), rgba(13, 67, 92, .86));
}
.single-service-style1 .img-holder {
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(13, 45, 72, .18);
}
.single-service-style1 .img-holder > img {
    transition: transform .5s ease;
}
.single-service-style1:hover .img-holder > img {
    transform: scale(1.06);
}
.single-service-style1 .img-holder .title {
    right: 45px;
}
.single-service-style1 .img-holder .title h3 {
    font-weight: 700;
}

.latest-project-style1-area {
    background: #fbfdff;
}
.latest-project-style1-area .bg-color {
    background: linear-gradient(155deg, #174d77, #1a6ba2);
    transition: background .25s ease;
}
.latest-project-style1-area:has(.tab-btn[data-tab="#engine"].active-btn) .bg-color {
    background: linear-gradient(155deg, #8e452b, #b66b33);
}
.latest-project-style1-area:has(.tab-btn[data-tab="#wheel"].active-btn) .bg-color {
    background: linear-gradient(155deg, #0b6067, #187c80);
}
.latest-project-style1-area:has(.tab-btn[data-tab="#air"].active-btn) .bg-color {
    background: linear-gradient(155deg, #403970, #685497);
}
.project-tabs .tab-button-column {
    padding-bottom: 36px;
}
.project-tabs .tab-buttons .tab-btn {
    float: none;
    margin: 0 8px 10px 0;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--tab-accent);
    color: #fff;
    opacity: .78;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.project-tabs .tab-buttons .tab-btn[data-tab="#diagnostics"] {
    --tab-accent: #2463a9;
}
.project-tabs .tab-buttons .tab-btn[data-tab="#engine"] {
    --tab-accent: #d97642;
}
.project-tabs .tab-buttons .tab-btn[data-tab="#wheel"] {
    --tab-accent: #188b91;
}
.project-tabs .tab-buttons .tab-btn[data-tab="#air"] {
    --tab-accent: #7657a5;
}
.project-tabs .tab-buttons .tab-btn:hover,
.project-tabs .tab-buttons .tab-btn.active-btn {
    background: var(--tab-accent);
    color: #fff;
    opacity: 1;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 17px rgba(17, 43, 73, .2);
}
.single-project-style1-content .title .counts {
    color: #dcecf3;
}
.project-slider img {
    border-radius: 14px;
    box-shadow: 0 18px 35px rgba(8, 37, 63, .2);
}

.latest-blog-area {
    background: #f3f8fc;
}
.single-blog-post {
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(13, 45, 72, .1);
    transition: transform .25s ease, box-shadow .25s ease;
}
.single-blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 38px rgba(13, 45, 72, .16);
}
.single-blog-post .text-holder {
    padding: 24px 26px 30px;
}
.single-blog-post .text-holder .blog-title a {
    color: var(--km-navy);
}
.single-blog-post .text-holder .blog-title a:hover {
    color: var(--km-teal);
}
.single-blog-post .text-holder .btn-one {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 16px;
    border-radius: 7px;
    background: var(--km-blue);
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}
.single-blog-post .text-holder .btn-one:hover {
    background: var(--km-teal);
}
.single-blog-post .text-holder .btn-one:before,
.single-blog-post .text-holder .btn-one:after {
    display: none;
}
.single-blog-post .text-holder .btn-one .txt,
.single-blog-post .text-holder .btn-one .icon {
    float: none;
}
.single-blog-post .text-holder .btn-one .icon {
    width: auto;
    height: auto;
    margin: 0;
    line-height: 1;
}
.breadcrumb-area::before {
    background: linear-gradient(90deg, rgba(9, 29, 52, .88), rgba(15, 78, 105, .68));
}
.footer-area:before {
    background: linear-gradient(120deg, rgba(7, 24, 43, .96), rgba(12, 42, 65, .91));
}
.footer-bottom {
    background: var(--km-navy);
}

.footer-area .service-region-links {
    max-height: 160px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--km-teal) rgba(255, 255, 255, .15);
}
.footer-area .service-region-links:focus-visible {
    outline: 2px solid var(--km-teal);
    outline-offset: 3px;
}

.main-menu.style1 .navigation > li {
    margin-right: 26px;
}
.main-menu.style1 .navigation > li:last-child {
    margin-right: 0;
}
.main-menu .navigation > li.dropdown:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.service-areas-area {
    padding: 100px 0 80px;
}
.service-areas-area .sec-title p {
    max-width: 700px;
    margin: 16px auto 0;
}
.service-area-card {
    height: calc(100% - 24px);
    margin-bottom: 24px;
    padding: 30px;
    border: 1px solid #e4eaf0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(7, 24, 43, .07);
    scroll-margin-top: 110px;
}
.service-area-card h3 {
    margin-bottom: 12px;
    color: var(--km-navy);
    font-size: 21px;
}
.service-area-card p {
    min-height: 75px;
    margin-bottom: 18px;
}
.service-area-card a {
    color: var(--km-blue);
    font-weight: 700;
}
.service-area-card a:hover,
.service-area-card a:focus {
    color: var(--km-teal);
}
.service-area-card a i {
    margin-left: 6px;
}

@media (max-width: 991px) {
    .main-slider.style1 .slide {
        padding: 140px 0;
    }
    .main-slider.style1 .content {
        max-width: 690px;
    }
    .header-upper-left .logo a {
        padding: 4px 8px;
    }
    .header-lawer .outer-box:before {
        border-radius: 9px;
    }
    .about-style1-text-box {
        margin-right: 0;
    }
    .service-areas-area {
        padding: 70px 0 50px;
    }
}
@media (max-width: 767px) {
    .main-slider.style1 .slide {
        padding: 100px 0;
    }
    .main-slider.style1 .content {
        padding: 0;
    }
    .main-slider.style1 .content h2 {
        letter-spacing: -.02em;
        font-size: 38px;
        line-height: 1.15;
    }
    .main-slider.style1 .content p {
        font-size: 16px;
    }
    .hero-contact-actions {
        gap: 10px;
    }
    .hero-contact-action {
        min-height: 52px;
        padding: 10px 17px;
        font-size: 15px;
    }
    .project-tabs .tab-buttons .tab-btn {
        margin-right: 5px;
        padding: 8px 10px;
        font-size: 12px;
    }
    .single-blog-post .text-holder {
        padding: 20px;
    }
}
@media (max-width: 480px) {
    .hero-contact-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-contact-action {
        width: 100%;
    }
}