/* ========================================
   GLOBAL RESET
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #252525;
    background: #ffffff;
    line-height: 1.6;
}

img {
    width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


/* ========================================
   HEADER
======================================== */

.header {
    width: 100%;
    background: #fffdf9;
    border-bottom: 1px solid #e8e3dc;
}

.header-inner {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.logo a {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #172b3a;
    white-space: nowrap;
}

.navbar {
    display: flex;
    align-items: center;
    gap: 25px;
}

.navbar a {
    position: relative;

    font-size: 14px;
    font-weight: 600;
    color: #444;

    padding: 30px 0;

    transition: color 0.3s ease;
}

.navbar a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 22px;

    width: 0;
    height: 2px;

    background: #b47a45;

    transition: width 0.3s ease;
}

.navbar a:hover,
.navbar a.active {
    color: #172b3a;
}

.navbar a:hover::after,
.navbar a.active::after {
    width: 100%;
}

.header-btn {
    background: #b47a45;
    color: #ffffff;

    padding: 12px 20px;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;

    border-radius: 2px;

    transition: all 0.3s ease;
}

.header-btn:hover {
    background: #946039;
    transform: translateY(-2px);
}


/* ========================================
   BUTTONS
======================================== */

.btn {
    display: inline-block;

    padding: 14px 27px;

    font-size: 14px;
    font-weight: 600;

    border-radius: 2px;

    transition: all 0.3s ease;
}

.btn-primary {
    background: #172b3a;
    color: #ffffff;
}

.btn-primary:hover {
    background: #292929;
    transform: translateY(-2px);
}

.btn-outline {
    border: 1px solid #ffffff;
    color: #ffffff;
}

.btn-outline:hover {
    background: #ffffff;
    color: #172b3a;
}

.btn-dark {
    background: #172b3a;
    color: #ffffff;
}

.btn-dark:hover {
    background: #244355;
    transform: translateY(-2px);
}

.btn-white {
    background: #ffffff;
    color: #172b3a;
}

.btn-white:hover {
    background: #eee8df;
}


/* ========================================
   HERO SECTION
======================================== */

.hero {
    min-height: 650px;

    position: relative;

    display: flex;
    align-items: center;

    background-image: url("images/hero.jpg");
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(23, 43, 58, 0.72);
}

.hero-content {
    position: relative;
    z-index: 2;

    color: #ffffff;
}

.hero-small {
    font-size: 15px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #dfdfdf;

    margin-bottom: 18px;
    margin-left: 7px;
}

.hero h1 {
    max-width: 800px;

    font-size: 56px;
    line-height: 1.15;
    font-weight: 700;

    margin-bottom: 22px;
}

.hero-text {
    max-width: 650px;

    font-size: 18px;

    color: #eeeeee;

    margin-bottom: 32px;
}

.hero-buttons {
    display: flex;
    gap: 14px;
}


/* ========================================
   GENERAL SECTIONS
======================================== */

.section {
    padding: 90px 0;
}

.section-label {
    font-size: 15px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #000000;

    margin-bottom: 12px;
}

.section-heading {
    max-width: 700px;

    margin: 0 auto 50px;

    text-align: center;
}

.section-heading h2 {
    font-size: 38px;
    line-height: 1.2;

    color: #172b3a;

    margin-bottom: 18px;
}

.section-heading p:last-child {
    color: #6c6c6c;
}


/* ========================================
   INTRO / ABOUT
======================================== */

.intro {
    background: #f5f1eb;
}

.intro-grid {
    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 80px;

    align-items: center;
}

.intro-content h2 {
    font-size: 40px;
    line-height: 1.2;

    color: #172b3a;

    margin-bottom: 22px;
}

.intro-content p {
    color: #626262;

    margin-bottom: 18px;
}

.text-link {
    display: inline-block;

    margin-top: 12px;

    font-weight: 700;

    color: #172b3a;

    border-bottom: 1px solid #b47a45;

    padding-bottom: 4px;

    transition: all 0.3s ease;
}

.text-link:hover {
    color: #b47a45;
}


/* ========================================
   STATISTICS
======================================== */

.intro-box {
    display: grid;

    grid-template-columns: 1fr 1fr;

    background: #ffffff;

    border: 1px solid #ded8d0;

    box-shadow: 0 10px 30px rgba(23, 43, 58, 0.06);
}

.stat {
    min-height: 170px;

    padding: 35px 25px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-right: 1px solid #e2ddd6;
    border-bottom: 1px solid #e2ddd6;
}

.stat:nth-child(2n) {
    border-right: none;
}

.stat:nth-child(3),
.stat:nth-child(4) {
    border-bottom: none;
}

.stat strong {
    font-size: 38px;
    line-height: 1;

    color: #b47a45;

    margin-bottom: 10px;
}

.stat span {
    font-size: 13px;

    color: #626262;
}


/* ========================================
   PRODUCTS
======================================== */

.products {
    background: #ffffff;
}

.product-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;
}

.product-card {
    background: #f7f7f5;

    border: 1px solid #e6dcc4;

    overflow: hidden;

    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);

    border-color: #b8a896;

    box-shadow: 0 10px 25px rgba(23, 43, 58, 0.08);
}

.product-image {
    height: 270px;
    overflow: hidden;
    background: white;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.product-card:hover img {
    transform: scale(1.04);
}

.product-info {
    padding: 22px;
}

.product-info h3 {
    font-size: 18px;

    color: #172b3a;

    margin-bottom: 8px;
}

.product-info p {
    font-size: 13px;

    color: #6b6b6b;
}

.center-button {
    text-align: center;

    margin-top: 45px;
}


/* ========================================
   WHY CHOOSE US
======================================== */

.why-us {
    background: #edf2f3;
}

.features-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}

.feature {
    background: #ffffff;

    padding: 35px 28px;

    border: 1px solid #dfe5e6;

    transition: all 0.3s ease;
}

.feature:hover {
    transform: translateY(-4px);

    border-color: #b8c6ca;

    box-shadow: 0 8px 22px rgba(23, 43, 58, 0.06);
}

.feature-number {
    font-size: 13px;
    font-weight: 700;

    color: #b47a45;

    margin-bottom: 30px;
}

.feature h3 {
    font-size: 20px;

    color: #172b3a;

    margin-bottom: 12px;
}

.feature p {
    font-size: 14px;

    color: #666;
}


/* ========================================
   MANUFACTURING PROCESS
======================================== */

.process {
    background: #172b3a;

    color: #ffffff;
}

.process-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

.process-content .section-label {
    color: #d6a16e;
}

.process-content h2 {
    font-size: 40px;
    line-height: 1.2;

    margin-bottom: 20px;
}

.process-content p {
    color: #c8d0d4;

    margin-bottom: 20px;
}

.process-content .text-link {
    color: #ffffff;

    border-color: #d6a16e;
}

.process-steps {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.process-step {
    display: flex;
    align-items: center;

    gap: 25px;

    padding: 24px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.process-step span {
    font-size: 13px;

    color: #d6a16e;

    width: 30px;
}

.process-step h3 {
    font-size: 19px;

    font-weight: 500;
}


/* ========================================
   SERVICES
======================================== */

.services {
    background: #f8f6f2;
}

.service-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.service-card {
    background: #ffffff;

    padding: 38px;

    border: 1px solid #e5e0d9;

    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);

    border-color: #b47a45;

    box-shadow: 0 10px 25px rgba(23, 43, 58, 0.07);
}

.service-card > span {
    font-size: 13px;

    color: #b47a45;
}

.service-card h3 {
    font-size: 23px;

    color: #172b3a;

    margin: 25px 0 15px;
}

.service-card p {
    color: #666;

    font-size: 14px;

    margin-bottom: 22px;
}

.service-card a {
    font-size: 13px;

    font-weight: 700;

    color: #172b3a;

    transition: color 0.3s ease;
}

.service-card a:hover {
    color: #b47a45;
}


/* ========================================
   CTA
======================================== */

.cta {
    padding: 90px 0;

    background: #e7ded2;

    color: #172b3a;

    text-align: center;
}

.cta .section-label {
    color: #9a643b;
}

.cta h2 {
    max-width: 750px;

    margin: 0 auto 18px;

    font-size: 40px;

    line-height: 1.2;

    color: #172b3a;
}

.cta p:not(.section-label) {
    color: #5e5e5e;

    max-width: 600px;

    margin: 0 auto 30px;
}


/* ========================================
   FOOTER
======================================== */

.footer {
    background: #243b4a;

    color: #ffffff;
}

.footer-grid {
    display: grid;

    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;

    gap: 50px;

    padding: 70px 0;
}

.footer h3 {
    font-size: 18px;

    color: #ffffff;

    margin-bottom: 18px;
}

.footer h4 {
    font-size: 15px;

    color: #ffffff;

    margin-bottom: 18px;
}

.footer p {
    font-size: 13px;

    color: #c5cfd3;

    margin-bottom: 15px;
}

.footer-links {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.footer-links a {
    color: #c5cfd3;

    font-size: 13px;

    margin-bottom: 9px;

    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #e0b487;
}

.footer-contact strong {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);

    padding: 20px 0;
}

.footer-bottom p {
    margin: 0;

    font-size: 12px;

    color: #aebbc0;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .navbar {
        gap: 15px;
    }

    .navbar a {
        font-size: 13px;
    }

    .header-btn {
        display: none;
    }

    .hero h1 {
        font-size: 48px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

    .container {
        width: 92%;
    }

    .header-inner {
        min-height: 70px;
    }

    .logo a {
        font-size: 16px;
    }

    .navbar {
        display: none;
    }

    .hero {
        min-height: 580px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .hero-text {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: flex-start;
    }

    .section {
        padding: 65px 0;
    }

    .section-heading h2,
    .intro-content h2,
    .process-content h2,
    .cta h2 {
        font-size: 31px;
    }

    .intro-grid,
    .process-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }
}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 480px) {

    .hero h1 {
        font-size: 32px;
    }

    .hero-small {
        font-size: 11px;

        letter-spacing: 1.3px;
    }

    .intro-box {
        grid-template-columns: 1fr;
    }

    .stat {
        border-right: none;

        border-bottom: 1px solid #e2ddd6 !important;
    }

    .stat:last-child {
        border-bottom: none !important;
    }

    .product-image {
        height: 240px;
    }

    .btn {
        padding: 13px 22px;
    }
}


/* ========================================
   ABOUT PAGE HERO
======================================== */

.page-hero {
    min-height: 390px;

    position: relative;

    display: flex;
    align-items: center;

    background-image: url("images/about-hero.jpg");
    background-size: cover;
    background-position: center;
}

.page-hero-overlay {
    position: absolute;

    inset: 0;

    background: rgba(23, 43, 58, 0.72);
}

.page-hero-content {
    position: relative;

    z-index: 2;

    color: #ffffff;
}

.page-hero-content h1 {
    font-size: 52px;

    line-height: 1.1;

    margin-bottom: 15px;
}

.page-hero-content > p:last-child {
    color: #e5e5e5;

    font-size: 17px;
}


/* ========================================
   ABOUT COMPANY
======================================== */

.about-company {
    background: #ffffff;
}

.about-company-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}

.about-image {
    height: 500px;

    overflow: hidden;

    background: #eee;
}

.about-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.about-image:hover img {
    transform: scale(1.03);
}

.about-content h2 {
    font-size: 40px;

    line-height: 1.2;

    color: #172b3a;

    margin-bottom: 22px;
}

.about-content p {
    color: #626262;

    margin-bottom: 17px;
}


/* ========================================
   JOURNEY
======================================== */

.journey {
    background: #f5f1eb;
}

.timeline {
    max-width: 850px;

    margin: 0 auto;

    border-left: 2px solid #d5c6b7;
}

.timeline-item {
    display: grid;

    grid-template-columns: 110px 1fr;

    gap: 35px;

    padding: 0 0 45px 35px;

    position: relative;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: "";

    position: absolute;

    left: -7px;

    top: 4px;

    width: 12px;
    height: 12px;

    background: #b47a45;

    border-radius: 50%;
}

.timeline-year {
    font-size: 14px;

    font-weight: 700;

    color: #b47a45;
}

.timeline-content {
    background: #ffffff;

    padding: 25px 28px;

    border: 1px solid #e3ddd5;
}

.timeline-content h3 {
    color: #172b3a;

    font-size: 21px;

    margin-bottom: 10px;
}

.timeline-content p {
    color: #666;

    font-size: 14px;
}


/* ========================================
   VALUES
======================================== */

.values {
    background: #ffffff;
}

.values-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}

.value-card {
    padding: 32px 25px;

    background: #f7f7f5;

    border: 1px solid #e5e2dc;

    transition: all 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);

    background: #f5f1eb;

    border-color: #cdbda9;
}

.value-number {
    color: #b47a45;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 25px;
}

.value-card h3 {
    color: #172b3a;

    font-size: 21px;

    margin-bottom: 12px;
}

.value-card p {
    color: #666;

    font-size: 14px;
}


/* ========================================
   ABOUT STATS
======================================== */

.about-stats {
    background: #edf2f3;

    padding: 65px 0;
}

.about-stats-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    text-align: center;
}

.about-stat {
    padding: 20px;

    border-right: 1px solid #d5dddf;
}

.about-stat:last-child {
    border-right: none;
}

.about-stat strong {
    display: block;

    color: #b47a45;

    font-size: 42px;

    line-height: 1;

    margin-bottom: 10px;
}

.about-stat span {
    color: #4f5c60;

    font-size: 14px;
}


/* ========================================
   ABOUT MANUFACTURING
======================================== */

.about-manufacturing {
    background: #f8f6f2;
}

.about-manufacturing-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: start;
}

.about-manufacturing h2 {
    color: #172b3a;

    font-size: 38px;

    line-height: 1.2;
}

.about-manufacturing p {
    color: #666;

    margin-bottom: 18px;
}


/* ========================================
   ABOUT PAGE RESPONSIVE
======================================== */

@media (max-width: 900px) {

    .about-company-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-image {
        height: 400px;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stat:nth-child(2) {
        border-right: none;
    }

    .about-manufacturing-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}


@media (max-width: 600px) {

    .page-hero {
        min-height: 320px;
    }

    .page-hero-content h1 {
        font-size: 40px;
    }

    .page-hero-content > p:last-child {
        font-size: 15px;
    }

    .about-image {
        height: 300px;
    }

    .about-content h2 {
        font-size: 31px;
    }

    .timeline {
        margin-left: 5px;
    }

    .timeline-item {
        grid-template-columns: 1fr;

        gap: 10px;

        padding-left: 25px;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .about-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-stat {
        border-right: none;
        border-bottom: 1px solid #d5dddf;
    }

    .about-stat:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    .about-manufacturing h2 {
        font-size: 31px;
    }

}


@media (max-width: 400px) {

    .about-stats-grid {
        grid-template-columns: 1fr;
    }

    .about-stat {
        border-bottom: 1px solid #d5dddf !important;
    }

    .about-stat:last-child {
        border-bottom: none !important;
    }

}


/* ========================================
   PRODUCTS PAGE
======================================== */

.products-intro {
    padding-bottom: 45px;
}


/* ========================================
   PRODUCT LIST
======================================== */

.product-list {
    padding: 30px 0 90px;

    background: #ffffff;
}

.product-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 480px;

    margin-bottom: 30px;

    background: #f5f1eb;

    border: 1px solid #e4ddd4;
}

.product-row:last-child {
    margin-bottom: 0;
}

.product-row-reverse {
    background: #edf2f3;
}


/* IMAGE */

.product-row-image {
    max-height: 480px;
    width: 500px;
    overflow: hidden;
}

.product-row-image img {
    width: 100%;
    height: 100%;

    object-fit: fill;

    transition: transform 0.5s ease;
}

.product-row:hover .product-row-image img {
    transform: scale(1.03);
}


/* CONTENT */

.product-row-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px;
}

.product-number {
    font-size: 13px;

    font-weight: 700;

    color: #b47a45;

    margin-bottom: 20px;
}

.product-row-content h2 {
    font-size: 36px;

    line-height: 1.2;

    color: #172b3a;

    margin-bottom: 18px;
}

.product-row-content p {
    max-width: 480px;

    color: #666;

    font-size: 15px;

    margin-bottom: 18px;
}

.product-row-content .text-link {
    align-self: flex-start;

    margin-top: 5px;
}


/* ========================================
   PRODUCT CTA
======================================== */

.product-cta {
    padding: 65px 0;

    background: #e7ded2;
}

.product-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}

.product-cta h2 {
    color: #172b3a;

    font-size: 32px;

    line-height: 1.2;

    margin-bottom: 10px;
}

.product-cta p:not(.section-label) {
    color: #5e5e5e;
}


/* ========================================
   PRODUCTS PAGE RESPONSIVE
======================================== */

@media (max-width: 800px) {

    .product-row {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .product-row-image {
        height: 350px;

        min-height: auto;
    }

    .product-row-content {
        padding: 40px;
    }

    .product-row-content h2 {
        font-size: 30px;
    }

    .product-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 500px) {

    .product-row-image {
        height: 280px;
    }

    .product-row-content {
        padding: 30px 25px;
    }

    .product-row-content h2 {
        font-size: 27px;
    }

    .product-row-content p {
        font-size: 14px;
    }

    .product-cta h2 {
        font-size: 27px;
    }

}


/* ========================================
   MANUFACTURING PAGE
======================================== */

.manufacturing-hero {
    background-image: url("images/manufacturing-hero.jpg");
}


/* ========================================
   MANUFACTURING INTRO
======================================== */

.manufacturing-intro {
    background: #ffffff;
}

.manufacturing-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}

.manufacturing-intro-image {
    height: 480px;

    overflow: hidden;
}

.manufacturing-intro-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.manufacturing-intro-image:hover img {
    transform: scale(1.03);
}

.manufacturing-intro-content h2 {
    color: #172b3a;

    font-size: 40px;

    line-height: 1.2;

    margin-bottom: 22px;
}

.manufacturing-intro-content p {
    color: #666;

    margin-bottom: 17px;
}


/* ========================================
   MANUFACTURING PROCESS
======================================== */

.manufacturing-process {
    background: #f5f1eb;
}

.manufacturing-steps {
    max-width: 900px;

    margin: 0 auto;

    border-top: 1px solid #d9d0c5;
}

.manufacturing-step {
    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 35px;

    padding: 35px 0;

    border-bottom: 1px solid #d9d0c5;
}

.step-number {
    color: #b47a45;

    font-size: 14px;

    font-weight: 700;

    padding-top: 3px;
}

.step-content h3 {
    color: #172b3a;

    font-size: 24px;

    margin-bottom: 10px;
}

.step-content p {
    color: #666;

    font-size: 14px;

    max-width: 650px;
}


/* ========================================
   QUALITY CONTROL
======================================== */

.quality-control {
    background: #edf2f3;
}

.quality-control-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

.quality-content h2 {
    color: #172b3a;

    font-size: 40px;

    line-height: 1.2;

    margin-bottom: 20px;
}

.quality-content p {
    color: #626262;

    margin-bottom: 17px;
}

.quality-list {
    background: #ffffff;

    border: 1px solid #dce3e5;
}

.quality-item {
    display: flex;

    gap: 20px;

    padding: 25px;

    border-bottom: 1px solid #e1e5e6;
}

.quality-item:last-child {
    border-bottom: none;
}

.quality-item > span {
    color: #b47a45;

    font-size: 13px;

    font-weight: 700;

    min-width: 25px;
}

.quality-item h3 {
    color: #172b3a;

    font-size: 17px;

    margin-bottom: 5px;
}

.quality-item p {
    color: #6b6b6b;

    font-size: 13px;

    margin: 0;
}


/* ========================================
   MANUFACTURING STATS
======================================== */

.manufacturing-stats {
    padding: 90px 0;

    background: #ffffff;
}

.manufacturing-stats-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}

.manufacturing-stat {
    text-align: center;

    padding: 30px 20px;

    background: #f8f6f2;

    border: 1px solid #e5dfd7;
}

.manufacturing-stat strong {
    display: block;

    color: #b47a45;

    font-size: 40px;

    line-height: 1;

    margin-bottom: 10px;
}

.manufacturing-stat span {
    color: #626262;

    font-size: 13px;
}


/* ========================================
   MANUFACTURING CTA
======================================== */

.manufacturing-cta {
    padding: 65px 0;

    background: #e7ded2;
}

.manufacturing-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}

.manufacturing-cta h2 {
    color: #172b3a;

    font-size: 32px;

    line-height: 1.2;

    margin-bottom: 10px;

    max-width: 650px;
}

.manufacturing-cta p:not(.section-label) {
    color: #5e5e5e;
}


/* ========================================
   MANUFACTURING RESPONSIVE
======================================== */

@media (max-width: 850px) {

    .manufacturing-intro-grid,
    .quality-control-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .manufacturing-intro-image {
        height: 380px;
    }

    .manufacturing-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .manufacturing-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .manufacturing-intro-content h2,
    .quality-content h2 {
        font-size: 31px;
    }

    .manufacturing-intro-image {
        height: 300px;
    }

    .manufacturing-step {
        grid-template-columns: 45px 1fr;

        gap: 20px;

        padding: 28px 0;
    }

    .step-content h3 {
        font-size: 20px;
    }

    .manufacturing-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .manufacturing-cta h2 {
        font-size: 27px;
    }

}


@media (max-width: 400px) {

    .manufacturing-stats-grid {
        grid-template-columns: 1fr;
    }

}


/* ========================================
   MACHINERY PAGE
======================================== */

.machinery-hero {
    background-image: url("images/machinery-hero.jpg");
}


/* ========================================
   MACHINERY INTRO
======================================== */

.machinery-intro {
    background: #ffffff;
}

.machinery-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}

.machinery-intro-grid h2 {
    color: #172b3a;

    font-size: 40px;

    line-height: 1.2;

    margin-bottom: 20px;
}

.machinery-intro-grid p {
    color: #666;

    margin-bottom: 17px;
}

.machinery-intro-image {
    height: 430px;

    overflow: hidden;
}

.machinery-intro-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.machinery-intro-image:hover img {
    transform: scale(1.03);
}


/* ========================================
   MACHINERY CARDS
======================================== */

.machinery-list {
    background: #f5f1eb;
}

.machinery-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;
}

.machine-card {
    background: #ffffff;

    border: 1px solid #e2ddd5;

    transition: transform 0.3s ease;
}

.machine-card:hover {
    transform: translateY(-5px);
}

.machine-image {
    height: 320px;

    overflow: hidden;
}

.machine-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.machine-card:hover .machine-image img {
    transform: scale(1.03);
}

.machine-content {
    padding: 25px;
}

.machine-content > span {
    color: #b47a45;

    font-size: 13px;

    font-weight: 700;
}

.machine-content h3 {
    color: #172b3a;

    font-size: 22px;

    line-height: 1.25;

    margin: 12px 0;
}

.machine-content p {
    color: #666;

    font-size: 14px;

    margin: 0;
}


/* ========================================
   MACHINERY BENEFITS
======================================== */

.machinery-benefits {
    background: #ffffff;
}

.machinery-benefits-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}

.machinery-benefit {
    padding: 30px 25px;

    background: #edf2f3;

    border-left: 3px solid #b47a45;
}

.machinery-benefit > span {
    color: #b47a45;

    font-size: 13px;

    font-weight: 700;
}

.machinery-benefit h3 {
    color: #172b3a;

    font-size: 20px;

    margin: 18px 0 10px;
}

.machinery-benefit p {
    color: #666;

    font-size: 14px;

    margin: 0;
}


/* ========================================
   MACHINERY CTA
======================================== */

.machinery-cta {
    padding: 65px 0;

    background: #e7ded2;
}

.machinery-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}

.machinery-cta h2 {
    color: #172b3a;

    font-size: 32px;

    line-height: 1.2;

    max-width: 650px;
}


/* ========================================
   MACHINERY RESPONSIVE
======================================== */

@media (max-width: 850px) {

    .machinery-intro-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .machinery-intro-image {
        height: 380px;
    }

    .machinery-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .machinery-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .machinery-intro-grid h2 {
        font-size: 31px;
    }

    .machinery-intro-image {
        height: 300px;
    }

    .machinery-grid {
        grid-template-columns: 1fr;
    }

    .machine-image {
        height: 250px;
    }

    .machinery-benefits-grid {
        grid-template-columns: 1fr;
    }

    .machinery-cta h2 {
        font-size: 27px;
    }

}


/* ========================================
   SERVICES PAGE
======================================== */

.services-hero {
    background-image: url("images/services-hero.jpg");
}


/* ========================================
   SERVICES INTRO
======================================== */

.services-intro {
    background: #ffffff;
}

.services-intro-content {
    max-width: 800px;
    text-align: center;
}

.services-intro-content .section-label {
    text-align: center;
}

.services-intro-content h2 {
    color: #172b3a;

    font-size: 40px;

    line-height: 1.2;

    margin-bottom: 20px;
}

.services-intro-content p:not(.section-label) {
    color: #666;

    margin-bottom: 12px;
}


/* ========================================
   SERVICES CARDS
======================================== */

.services-list {
    background: #f5f1eb;
}

.services-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;
}

.service-card {
    background: #ffffff;

    border: 1px solid #e2ddd5;

    padding: 40px;

    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);

    border-color: #cdbda9;
}

.service-number {
    color: #b47a45;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 22px;
}

.service-card h2 {
    color: #172b3a;

    font-size: 27px;

    line-height: 1.2;

    margin-bottom: 15px;
}

.service-card > p {
    color: #666;

    font-size: 14px;

    margin-bottom: 22px;
}

.service-card ul {
    margin: 0 0 25px;

    padding: 0;

    list-style: none;
}

.service-card li {
    color: #555;

    font-size: 14px;

    padding: 8px 0;

    border-bottom: 1px solid #eee;
}

.service-card li::before {
    content: "—";

    color: #b47a45;

    margin-right: 10px;
}


/* ========================================
   HOW WE WORK
======================================== */

.how-we-work {
    background: #ffffff;
}

.work-process {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid #ddd7d0;

    border-bottom: 1px solid #ddd7d0;
}

.work-item {
    padding: 30px 25px;

    border-right: 1px solid #ddd7d0;
}

.work-item:last-child {
    border-right: none;
}

.work-item > span {
    color: #b47a45;

    font-size: 13px;

    font-weight: 700;
}

.work-item h3 {
    color: #172b3a;

    font-size: 19px;

    line-height: 1.3;

    margin: 18px 0 10px;
}

.work-item p {
    color: #666;

    font-size: 14px;

    margin: 0;
}


/* ========================================
   SERVICE ADVANTAGES
======================================== */

.service-advantages {
    background: #edf2f3;
}

.service-advantages-grid {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 80px;
}

.service-advantages-grid > div:first-child h2 {
    color: #172b3a;

    font-size: 38px;

    line-height: 1.2;
}

.advantages-list {
    background: #ffffff;

    border: 1px solid #dce3e5;
}

.advantage {
    display: flex;

    gap: 20px;

    padding: 25px;

    border-bottom: 1px solid #e1e5e6;
}

.advantage:last-child {
    border-bottom: none;
}

.advantage > span {
    color: #b47a45;

    font-size: 13px;

    font-weight: 700;

    min-width: 25px;
}

.advantage h3 {
    color: #172b3a;

    font-size: 17px;

    margin-bottom: 5px;
}

.advantage p {
    color: #666;

    font-size: 13px;

    margin: 0;
}


/* ========================================
   SERVICES CTA
======================================== */

.services-cta {
    padding: 80px 0;

    background: #e7ded2;

    text-align: center;
}

.services-cta-content {
    max-width: 700px;
}

.services-cta .section-label {
    text-align: center;
}

.services-cta h2 {
    color: #172b3a;

    font-size: 40px;

    line-height: 1.2;

    margin-bottom: 15px;
}

.services-cta p:not(.section-label) {
    color: #5e5e5e;

    margin-bottom: 25px;
}


/* ========================================
   SERVICES RESPONSIVE
======================================== */

@media (max-width: 850px) {

    .services-grid {
        grid-template-columns: 1fr;
    }

    .work-process {
        grid-template-columns: repeat(2, 1fr);
    }

    .work-item:nth-child(2) {
        border-right: none;
    }

    .work-item:nth-child(-n + 2) {
        border-bottom: 1px solid #ddd7d0;
    }

    .service-advantages-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


@media (max-width: 600px) {

    .services-intro-content h2 {
        font-size: 31px;
    }

    .service-card {
        padding: 30px 25px;
    }

    .service-card h2 {
        font-size: 24px;
    }

    .work-process {
        grid-template-columns: 1fr;
    }

    .work-item {
        border-right: none;

        border-bottom: 1px solid #ddd7d0;
    }

    .work-item:last-child {
        border-bottom: none;
    }

    .service-advantages-grid > div:first-child h2 {
        font-size: 31px;
    }

    .services-cta h2 {
        font-size: 31px;
    }

}


/* ========================================
   CONTACT PAGE
======================================== */

.contact-hero {
    background-image: url("images/contact-hero.jpg");
}


/* ========================================
   CONTACT SECTION
======================================== */

.contact-section {
    background: #ffffff;
}

.contact-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 80px;

    align-items: start;
}


/* CONTACT INFORMATION */

.contact-information h2 {
    color: #172b3a;

    font-size: 40px;

    line-height: 1.2;

    margin-bottom: 18px;
}

.contact-intro {
    color: #666;

    font-size: 15px;

    margin-bottom: 35px;

    max-width: 500px;
}

.contact-detail {
    display: flex;

    gap: 18px;

    padding: 20px 0;

    border-bottom: 1px solid #e5e1dc;
}

.contact-detail:first-of-type {
    border-top: 1px solid #e5e1dc;
}

.contact-icon {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: #e7ded2;

    color: #b47a45;

    font-size: 13px;

    font-weight: 700;
}

.contact-detail h3 {
    color: #172b3a;

    font-size: 16px;

    margin-bottom: 5px;
}

.contact-detail p {
    color: #666;

    font-size: 14px;

    margin: 0;
}

.contact-detail a {
    color: #666;

    text-decoration: none;

    transition: color 0.3s ease;
}

.contact-detail a:hover {
    color: #b47a45;
}


/* ========================================
   CONTACT FORM
======================================== */

.contact-form-wrapper {
    padding: 40px;

    background: #f5f1eb;

    border: 1px solid #e2ddd5;
}

.contact-form-heading h2 {
    color: #172b3a;

    font-size: 30px;

    line-height: 1.2;

    margin-bottom: 30px;
}

.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    color: #172b3a;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #d7d0c8;

    background: #ffffff;

    color: #333;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    border-radius: 0;

    transition: border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #b47a45;

    box-shadow: 0 0 0 2px rgba(180, 122, 69, 0.08);
}

.form-group textarea {
    resize: vertical;

    min-height: 140px;
}

.form-submit {
    border: none;

    cursor: pointer;
}

.form-message {
    display: none;

    margin-top: 15px;

    font-size: 14px;
}


/* ========================================
   MAP
======================================== */

.map-section {
    padding: 80px 0;

    background: #edf2f3;
}

.map-heading {
    margin-bottom: 30px;
}

.map-heading h2 {
    color: #172b3a;

    font-size: 36px;
}

.map-wrapper {
    width: 100%;

    overflow: hidden;

    border: 1px solid #d7dfe0;

    background: #ffffff;
}

.map-wrapper iframe {
    display: block;

    width: 100%;

    min-height: 450px;
}

.map-button {
    display: inline-block;

    margin-top: 18px;

    color: #172b3a;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.3s ease;
}

.map-button:hover {
    color: #b47a45;
}


/* ========================================
   CONTACT CTA
======================================== */

.contact-cta {
    padding: 65px 0;

    background: #e7ded2;
}

.contact-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}

.contact-cta h2 {
    color: #172b3a;

    font-size: 32px;

    line-height: 1.2;

    max-width: 650px;
}


/* ========================================
   CONTACT RESPONSIVE
======================================== */

@media (max-width: 850px) {

    .contact-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .contact-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .contact-information h2 {
        font-size: 31px;
    }

    .contact-form-wrapper {
        padding: 30px 22px;
    }

    .contact-form-heading h2 {
        font-size: 26px;
    }

    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .map-section {
        padding: 60px 0;
    }

    .map-wrapper iframe {
        min-height: 350px;
    }

    .contact-cta h2 {
        font-size: 27px;
    }

}