/* =========================================================
   بهین پلاست | FINAL MAIN STYLE
   نایلون سازان بهین پلاست
   Green Industrial Edition
========================================================= */


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

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: Tahoma, Arial, sans-serif;
    background: #f5f8f7;
    color: #17332d;
    direction: rtl;
    line-height: 1.7;
    overflow-x: hidden;
}

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

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

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

::selection {
    background: #087f5b;
    color: #ffffff;
}


/* =========================================================
   CONTAINER
========================================================= */

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


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

.header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid rgba(7, 95, 69, 0.08);

    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header .container {
    min-height: 78px;

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

    gap: 25px;

    position: relative;
}


/* =========================================================
   BRAND / LOGO
========================================================= */

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-logo {
    width: 65px;
    height: 65px;

    object-fit: contain;

    display: block;
    flex-shrink: 0;

    border: none;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
    padding: 0;
}

.brand > span {
    color: #17332d;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.4;
}

.brand > span strong {
    color: #075f45;

    font-size: 21px;
    font-weight: 900;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.nav a {
    position: relative;

    color: #073b34;

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

    white-space: nowrap;

    transition: color 0.3s ease;
}

.nav a:not(.nav-quote)::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: #087f5b;

    transition: width 0.3s ease;
}

.nav a:hover {
    color: #087f5b;
}

.nav a:not(.nav-quote):hover {
    font-weight: 800;
}

.nav a:not(.nav-quote):hover::after {
    width: 100%;
}

.nav-quote {
    display: inline-flex;

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

    padding: 11px 19px;

    border-radius: 8px;

    background: #087f5b;
    color: #ffffff !important;

    font-size: 13px;

    box-shadow: 0 5px 15px rgba(8, 127, 91, 0.15);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.nav-quote:hover {
    background: #075f45;
    transform: translateY(-2px);
}


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

.menu-toggle {
    display: none;

    border: none;

    background: transparent;

    color: #075f45;

    font-size: 30px;

    line-height: 1;

    padding: 6px;

    z-index: 3000;
}


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

.hero {
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(6, 46, 41, 0.95),
            rgba(6, 46, 41, 0.78),
            rgba(6, 46, 41, 0.38)
        ),
        url("images/hero.jpg")
        center center / cover no-repeat;

    overflow: hidden;
}

.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(50, 201, 151, 0.12),
            transparent 35%
        );

    pointer-events: none;
}

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

    max-width: 780px;

    color: #ffffff;

    padding: 90px 0;

    animation: fadeUp 0.9s ease both;
}

.hero-label {
    display: inline-block;

    color: #32c997;

    font-size: 15px;
    font-weight: bold;

    padding-right: 12px;

    margin-bottom: 20px;

    border-right: 3px solid #32c997;
}

.hero-content h1 {
    color: #ffffff;

    font-size: 52px;

    line-height: 1.5;

    font-weight: 900;

    margin-bottom: 22px;
}

.hero-content h1 strong {
    color: #32c997;
}

.hero-content > p {
    max-width: 720px;

    color: #e1eeeb;

    font-size: 18px;

    line-height: 2;

    margin-bottom: 30px;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 35px;
}

.btn {
    display: inline-flex;

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

    min-height: 50px;

    padding: 13px 27px;

    border-radius: 8px;

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

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.btn-primary {
    background: #087f5b;
    color: #ffffff;

    box-shadow:
        0 8px 22px rgba(8, 127, 91, 0.20);
}

.btn-primary:hover {
    background: #075f45;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(8, 127, 91, 0.28);
}

.btn-outline {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.55);
}

.btn-outline:hover {
    background: #ffffff;
    color: #075f45;

    transform: translateY(-3px);
}


/* =========================================================
   HERO FEATURES
========================================================= */

.hero-features {
    display: flex;
    flex-wrap: wrap;

    gap: 25px;
}

.hero-features div {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #e1eeeb;

    font-size: 14px;
}

.hero-features div span {
    color: #32c997;

    font-size: 18px;
    font-weight: bold;
}


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

.stats {
    background: #ffffff;

    border-bottom: 1px solid #e6eeeb;
}

.stats-grid {
    display: grid;

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

    gap: 0;
}

.stat-item {
    text-align: center;

    padding: 27px 15px;

    border-left: 1px solid #e8efec;
}

.stat-item:last-child {
    border-left: none;
}

.stat-item strong {
    display: block;

    color: #087f5b;

    font-size: 25px;
    font-weight: 900;

    margin-bottom: 5px;
}

.stat-item span {
    display: block;

    color: #687772;

    font-size: 13px;
}


/* =========================================================
   GENERAL SECTION
========================================================= */

.section {
    padding: 100px 0;
}

.section-title {
    max-width: 730px;

    text-align: center;

    margin: 0 auto 50px;
}

.section-title > span {
    display: inline-block;

    color: #087f5b;

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

    margin-bottom: 6px;
}

.section-title h2 {
    color: #073b34;

    font-size: 38px;

    line-height: 1.5;

    margin: 5px 0 12px;

    font-weight: 900;
}

.section-title h2 strong {
    color: #087f5b;
}

.section-title p {
    color: #697773;

    font-size: 15px;

    line-height: 2;
}


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

.products-section {
    background: #ffffff;
}

.products-grid {
    display: grid;

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

    gap: 22px;
}

.product-card {
    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e3ebe8;

    border-radius: 16px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

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

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.10);
}

.product-image {
    height: 235px;

    background: #edf4f1;

    overflow: hidden;
}

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

    object-fit: cover;

    transition: transform 0.5s ease;
}

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

.product-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 22px;
}

.product-content > span {
    color: #087f5b;

    font-size: 12px;
    font-weight: bold;
}

.product-content h3 {
    color: #073b34;

    font-size: 18px;

    line-height: 1.7;

    margin: 6px 0;
}

.product-content p {
    color: #687772;

    font-size: 13px;

    line-height: 1.9;

    flex: 1;
}

.product-content a {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-top: 14px;

    color: #087f5b;

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

    transition: color 0.3s ease;
}

.product-content a:hover {
    color: #075f45;
}

.section-action {
    text-align: center;

    margin-top: 40px;
}


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

.why-us {
    background: #f2f7f5;
}

.features-grid {
    display: grid;

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

    gap: 20px;
}

.feature-card {
    text-align: center;

    background: #ffffff;

    padding: 32px 22px;

    border: 1px solid #e1e9e6;

    border-radius: 16px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

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

    box-shadow:
        0 15px 38px rgba(0, 0, 0, 0.08);
}

.feature-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    background: #e4f4ee;

    color: #087f5b;

    font-size: 15px;
    font-weight: 900;
}

.feature-card h3 {
    color: #073b34;

    font-size: 18px;

    margin-bottom: 10px;
}

.feature-card p {
    color: #687772;

    font-size: 13px;

    line-height: 2;
}


/* =========================================================
   PRODUCTION
========================================================= */

.production-section {
    background: #062e29;

    color: #ffffff;
}

.production-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}

.production-image {
    height: 520px;

    border-radius: 20px;

    overflow: hidden;

    background: #17463f;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.18);
}

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

    object-fit: cover;
}

.production-steps {
    display: flex;
    flex-direction: column;

    gap: 24px;
}

.production-step {
    display: flex;

    align-items: flex-start;

    gap: 18px;
}

.production-step > span {
    width: 50px;
    min-width: 50px;
    height: 50px;

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

    border: 1px solid #32c997;

    border-radius: 50%;

    color: #32c997;

    font-size: 14px;
    font-weight: bold;
}

.production-step h3 {
    color: #ffffff;

    font-size: 17px;

    margin-bottom: 5px;
}

.production-step p {
    color: #a9bfba;

    font-size: 13px;

    line-height: 1.9;
}


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

.about-section {
    background: #ffffff;
}

.about-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}

.about-image {
    height: 520px;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.12);
}

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

    object-fit: cover;

    transition: transform 0.5s ease;
}

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

.about-content {
    padding: 10px 0;
}

.section-label {
    display: inline-block;

    color: #087f5b;

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

    border-right: 3px solid #32c997;

    padding-right: 10px;

    margin-bottom: 14px;
}

.about-content h2 {
    color: #073b34;

    font-size: 38px;

    line-height: 1.5;

    margin-bottom: 20px;
}

.about-content h2 strong {
    color: #087f5b;
}

.about-content p {
    color: #66746f;

    font-size: 15px;

    line-height: 2.1;

    margin-bottom: 14px;
}

.about-list {
    list-style: none;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin: 25px 0 30px;
}

.about-list li {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px 13px;

    background: #f3f8f6;

    border-radius: 9px;

    color: #40514b;

    font-size: 13px;
}

.about-list li span {
    color: #087f5b;

    font-weight: bold;

    font-size: 16px;
}


/* =========================================================
   GALLERY
========================================================= */

.gallery-section {
    background: #f3f8f6;
}

.gallery-grid {
    display: grid;

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

    gap: 18px;
}

.gallery-grid figure {
    height: 270px;

    margin: 0;

    border-radius: 15px;

    overflow: hidden;

    background: #dfe9e5;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.05);
}

.gallery-grid img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.45s ease;
}

.gallery-grid figure:hover img {
    transform: scale(1.07);
}


/* =========================================================
   QUOTE
========================================================= */

.quote-section {
    background: #ffffff;
}

.quote-form {
    max-width: 950px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px 20px;

    background: #ffffff;

    padding: 35px;

    border-radius: 18px;

    border: 1px solid #e5eeea;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.07);
}

.form-group {
    margin: 0;
}

.form-group label {
    display: block;

    color: #073b34;

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

    margin-bottom: 7px;
}

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

    border: 1px solid #dce7e3;

    background: #f8fbfa;

    border-radius: 9px;

    padding: 13px 14px;

    color: #333333;

    font-size: 14px;

    outline: none;

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

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9aa7a3;
}

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

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(8, 127, 91, 0.08);
}

.form-group textarea {
    min-height: 130px;

    resize: vertical;
}

.form-full {
    grid-column: 1 / -1;
}

.form-submit {
    grid-column: 1 / -1;

    text-align: center;

    padding-top: 5px;
}

.form-submit .btn {
    border: none;

    min-width: 230px;
}

.form-submit p {
    color: #7a8783;

    font-size: 12px;

    margin-top: 10px;
}


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

.contact-section {
    background: #f2f7f5;

    text-align: center;
}

.contact-grid {
    display: grid;

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

    gap: 15px;
}

.contact-card {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 92px;

    padding: 16px;

    background: #ffffff;

    border: 1px solid #e2eae7;

    border-radius: 15px;

    text-align: right;

    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.10);
}

.contact-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;

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

    border-radius: 12px;

    background: #eef4f1;

    color: #087f5b;

    font-size: 21px;
}

.contact-card h3 {
    color: #073b34;

    font-size: 14px;

    margin-bottom: 4px;
}

.contact-card p {
    color: #74817d;

    font-size: 11px;

    line-height: 1.7;

    direction: ltr;

    text-align: right;

    word-break: break-word;
}


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

.footer {
    background: #062e29;

    color: #ffffff;
}

.footer-grid {
    display: grid;

    grid-template-columns: 1.5fr 0.8fr 1fr;

    gap: 45px;

    padding-top: 48px;

    padding-bottom: 42px;
}

.footer-about p {
    max-width: 370px;

    color: #c8d8d4;

    line-height: 1.9;

    font-size: 12px;

    margin-top: 14px;
}

.footer-brand {
    display: inline-flex;

    align-items: center;

    gap: 11px;
}

.footer-brand img {
    width: 52px;
    height: 52px;

    object-fit: contain;

    background: transparent;

    border: none;

    border-radius: 0;
}

.footer-brand span {
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
}

.footer-brand strong {
    color: #32c997;

    font-size: 18px;
}

.footer h3 {
    color: #32c997;

    font-size: 15px;

    margin-bottom: 13px;
}

.footer-links,
.footer-contact {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.footer-links a,
.footer-contact a {
    color: #d7e5e2;

    font-size: 12px;

    transition: color 0.3s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: #32c997;
}

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

    padding: 14px 0;

    text-align: center;
}

.footer-bottom p {
    color: #a9bfba;

    font-size: 11px;
}


/* =========================================================
   FLOATING CALL
========================================================= */

.call-float {
    position: fixed;

    left: 25px;
    bottom: 95px;

    width: 58px;
    height: 58px;

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

    border-radius: 50%;

    background: #087f5b;

    color: #ffffff;

    font-size: 24px;

    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.22);

    z-index: 998;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.call-float:hover {
    transform: scale(1.10);

    box-shadow:
        0 9px 28px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.whatsapp-float {
    position: fixed;

    left: 25px;
    bottom: 25px;

    width: 58px;
    height: 58px;

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

    border-radius: 50%;

    background: #25d366;

    color: #ffffff;

    font-size: 27px;

    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.24);

    z-index: 999;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.10);

    box-shadow:
        0 9px 28px rgba(0, 0, 0, 0.30);
}


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

.product-page-hero {
    min-height: 420px;

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

    text-align: center;

    padding: 80px 20px;

    background:
        linear-gradient(
            rgba(6, 46, 41, 0.88),
            rgba(7, 95, 69, 0.88)
        ),
        url("images/hero.jpg")
        center / cover no-repeat;

    color: #ffffff;
}

.product-page-hero-content {
    max-width: 800px;
}

.product-page-hero span {
    color: #32c997;

    font-size: 14px;
    font-weight: bold;
}

.product-page-hero h1 {
    font-size: 48px;

    line-height: 1.5;

    margin: 18px 0;
}

.product-page-hero h1 strong {
    color: #32c997;
}

.product-page-hero p {
    color: #e2eeeb;

    font-size: 17px;

    line-height: 2;
}

.all-products {
    padding: 90px 0;

    background: #f5f8f7;
}

.all-products-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    margin-top: 45px;
}

.product-detail-card {
    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.07);

    transition: transform 0.3s ease;
}

.product-detail-card:hover {
    transform: translateY(-8px);
}

.product-detail-image {
    height: 300px;

    overflow: hidden;
}

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

    object-fit: cover;

    transition: transform 0.5s ease;
}

.product-detail-card:hover .product-detail-image img {
    transform: scale(1.06);
}

.product-detail-content {
    padding: 30px;
}

.product-number {
    color: #087f5b;

    font-size: 13px;
    font-weight: bold;
}

.product-detail-content h3 {
    color: #073b34;

    font-size: 24px;

    margin: 8px 0;
}

.product-detail-content p {
    color: #666666;

    line-height: 2;
}

.product-detail-content ul {
    padding-right: 20px;

    margin: 18px 0;

    color: #444444;

    line-height: 2.2;
}

.product-button {
    display: inline-flex;

    padding: 12px 24px;

    border-radius: 8px;

    background: #087f5b;

    color: #ffffff;

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

    transition: 0.3s ease;
}

.product-button:hover {
    background: #075f45;

    transform: translateY(-2px);
}

.product-cta {
    padding: 70px 20px;

    text-align: center;

    background: #062e29;

    color: #ffffff;
}

.product-cta h2 {
    font-size: 32px;

    margin-bottom: 12px;
}

.product-cta p {
    color: #c8d8d4;

    line-height: 2;

    margin-bottom: 25px;
}

.product-cta a {
    display: inline-flex;

    padding: 14px 30px;

    border-radius: 8px;

    background: #32c997;

    color: #062e29;

    font-weight: bold;
}


/* =========================================================
   PRODUCT DETAIL
========================================================= */

.product-detail-page {
    padding: 90px 0;

    background: #f5f8f7;
}

.product-detail-container {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;
}

.product-main-image {
    height: 520px;

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.08);
}

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

    object-fit: cover;
}

.product-main-info {
    padding: 10px;
}

.product-label {
    color: #087f5b;

    font-size: 14px;
    font-weight: bold;
}

.product-main-info h1 {
    color: #073b34;

    font-size: 43px;

    line-height: 1.5;

    margin: 12px 0 18px;
}

.product-main-info h1 strong {
    color: #087f5b;
}

.product-intro {
    color: #666666;

    font-size: 16px;

    line-height: 2;

    margin-bottom: 25px;
}

.product-features {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-bottom: 28px;
}

.product-features div {
    background: #ffffff;

    padding: 17px;

    border-radius: 10px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.05);
}

.product-features span {
    display: block;

    color: #888888;

    font-size: 12px;

    margin-bottom: 5px;
}

.product-features strong {
    color: #087f5b;

    font-size: 14px;
}

.main-product-button {
    display: inline-flex;

    padding: 14px 27px;

    border-radius: 9px;

    background: #087f5b;

    color: #ffffff;

    font-weight: bold;

    transition: 0.3s ease;
}

.main-product-button:hover {
    background: #075f45;

    transform: translateY(-3px);
}


/* =========================================================
   APPLICATIONS
========================================================= */

.applications {
    padding: 90px 0;

    background: #ffffff;
}

.applications-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 45px;
}

.application-card {
    text-align: center;

    padding: 30px 20px;

    border-radius: 15px;

    background: #f5f8f7;

    transition: transform 0.3s ease;
}

.application-card:hover {
    transform: translateY(-6px);
}

.application-card > div {
    font-size: 38px;

    margin-bottom: 12px;
}

.application-card h3 {
    color: #073b34;

    font-size: 17px;

    margin-bottom: 8px;
}

.application-card p {
    color: #666666;

    font-size: 13px;

    line-height: 1.9;
}


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

.advantages {
    padding: 90px 0;

    background: #f2f7f5;
}

.advantages-container {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;
}

.advantages-container > div:first-child > span {
    color: #087f5b;

    font-weight: bold;
}

.advantages-container h2 {
    color: #073b34;

    font-size: 36px;

    line-height: 1.6;

    margin: 10px 0 15px;
}

.advantages-container h2 strong {
    color: #087f5b;
}

.advantages-container p {
    color: #666666;

    line-height: 2;
}

.advantages-list {
    display: flex;

    flex-direction: column;

    gap: 13px;
}

.advantages-list div {
    background: #ffffff;

    padding: 17px 20px;

    border-radius: 10px;

    color: #444444;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.04);
}

.advantages-list strong {
    color: #087f5b;

    margin-left: 8px;
}


/* =========================================================
   PRODUCT ORDER
========================================================= */

.product-order {
    padding: 80px 20px;

    text-align: center;

    background: #062e29;

    color: #ffffff;
}

.product-order h2 {
    font-size: 33px;
}

.product-order p {
    color: #c8d8d4;

    line-height: 2;

    margin: 12px 0 25px;
}

.product-order a {
    display: inline-flex;

    padding: 14px 30px;

    border-radius: 8px;

    background: #32c997;

    color: #062e29;

    font-weight: bold;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* RESPONSIVE FIX - prevent header/menu overflow on medium desktop/tablet widths */
@media (max-width: 1500px) {
  .header .container { gap: 12px; }
  .menu-toggle {
    display: block;
    margin-inline-start: auto;
  }
  .nav {
    display: none !important;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    background: #fff;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    z-index: 2500;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  .nav.active { display: flex !important; }
  .nav a {
    width: 100%;
    padding: 13px 15px;
    border-bottom: 1px solid #edf1ef;
    text-align: right;
    font-size: 14px;
    white-space: normal;
  }
  .nav a::after { display: none !important; }
  .nav a:last-child { border-bottom: none; }
  .nav-quote { margin-top: 8px; text-align: center !important; }
}
@media (max-width: 500px) {
  .nav { top: 66px; }
}

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

@media (max-width: 1100px) {

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

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

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

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

}


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

@media (max-width: 900px) {

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

    .menu-toggle {
        display: block;
    }

    .nav {
        display: none !important;

        position: absolute;

        top: 70px;

        right: 0;
        left: 0;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 10px;

        background: #ffffff;

        border-radius: 0 0 14px 14px;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.12);

        z-index: 2500;
    }

    .nav.active {
        display: flex !important;
    }

    .nav a {
        width: 100%;

        padding: 13px 15px;

        border-bottom: 1px solid #edf1ef;

        text-align: right;

        font-size: 14px;
    }

    .nav a::after {
        display: none !important;
    }

    .nav a:last-child {
        border-bottom: none;
    }

    .nav-quote {
        margin-top: 8px;

        text-align: center !important;
    }


    /* HERO */

    .hero {
        min-height: 620px;
    }

    .hero-content {
        padding: 70px 0;
    }

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


    /* PRODUCTION */

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

        gap: 45px;
    }

    .production-image {
        height: 400px;
    }


    /* ABOUT */

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

        gap: 40px;
    }

    .about-image {
        height: 400px;
    }


    /* FOOTER */

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

        gap: 35px;
    }


    /* PRODUCT DETAIL */

    .product-detail-container {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .product-main-image {
        height: 420px;
    }

    .advantages-container {
        grid-template-columns: 1fr;
    }


    /* PRODUCTS PAGE */

    .all-products-grid {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 700px) {

    .container {
        width: 92%;
    }


    /* BRAND */

    .brand-logo {
        width: 54px;
        height: 54px;
    }

    .brand > span {
        font-size: 14px;
    }

    .brand > span strong {
        font-size: 18px;
    }


    /* HERO */

    .hero {
        min-height: 610px;

        background:
            linear-gradient(
                90deg,
                rgba(6, 46, 41, 0.97),
                rgba(6, 46, 41, 0.86)
            ),
            url("images/hero.jpg")
            center center / cover no-repeat;
    }

    .hero-content {
        padding: 60px 0;
    }

    .hero-content h1 {
        font-size: 34px;

        line-height: 1.55;
    }

    .hero-content > p {
        font-size: 15px;

        line-height: 2;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-features {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }


    /* STATS */

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

    .stat-item {
        border-left: none;

        padding: 20px 8px;
    }

    .stat-item strong {
        font-size: 21px;
    }

    .stat-item span {
        font-size: 11px;
    }


    /* SECTION */

    .section {
        padding: 70px 0;
    }

    .section-title {
        margin-bottom: 35px;
    }

    .section-title h2 {
        font-size: 29px;
    }

    .section-title p {
        font-size: 13px;
    }


    /* PRODUCTS */

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

    .product-image {
        height: 245px;
    }


    /* WHY US */

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


    /* PRODUCTION */

    .production-image {
        height: 320px;
    }


    /* ABOUT */

    .about-image {
        height: 330px;
    }

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

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


    /* GALLERY */

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

    .gallery-grid figure {
        height: 260px;
    }


    /* QUOTE */

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

        padding: 22px;
    }

    .form-full {
        grid-column: auto;
    }

    .form-submit {
        grid-column: auto;
    }

    .form-submit .btn {
        width: 100%;
    }


    /* CONTACT */

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

    .contact-card {
        min-height: 85px;
    }


    /* FOOTER */

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

        padding-top: 40px;
        padding-bottom: 35px;

        gap: 27px;
    }


    /* FLOATING */

    .call-float {
        left: 18px;
        bottom: 88px;

        width: 52px;
        height: 52px;

        font-size: 21px;
    }

    .whatsapp-float {
        left: 18px;
        bottom: 20px;

        width: 52px;
        height: 52px;

        font-size: 24px;
    }


    /* PRODUCT DETAIL */

    .product-detail-page {
        padding: 70px 0;
    }

    .product-main-image {
        height: 320px;
    }

    .product-main-info h1 {
        font-size: 31px;
    }

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


    /* PRODUCTS PAGE */

    .product-page-hero {
        min-height: 350px;

        padding: 60px 20px;
    }

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

    .product-page-hero p {
        font-size: 15px;
    }

    .all-products {
        padding: 70px 0;
    }

    .product-detail-image {
        height: 240px;
    }

    .product-detail-content {
        padding: 22px;
    }

    .product-cta {
        padding: 60px 20px;
    }

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

    .product-order h2 {
        font-size: 28px;
    }

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

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 500px) {

    .header .container {
        min-height: 66px;
    }

    .brand-logo {
        width: 48px;
        height: 48px;
    }

    .brand > span {
        font-size: 12px;
    }

    .brand > span strong {
        font-size: 16px;
    }

    .menu-toggle {
        font-size: 27px;
    }

    .nav {
        top: 66px;
    }

    .hero {
        min-height: 570px;
    }

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

    .hero-label {
        font-size: 13px;
    }

    .hero-content > p {
        font-size: 14px;
    }

    .hero-features div {
        font-size: 12px;
    }

    .section-title h2 {
        font-size: 27px;
    }

    .about-image {
        height: 290px;
    }

    .production-image {
        height: 280px;
    }

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

    .product-main-info h1 {
        font-size: 28px;
    }

    .stat-item strong {
        font-size: 19px;
    }

    .stat-item span {
        font-size: 10px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .product-card:hover,
    .feature-card:hover,
    .contact-card:hover {
        transform: none;
    }

    .product-card:hover .product-image img,
    .gallery-grid figure:hover img {
        transform: none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}
/* =====================================================
   MESSENGER SELECT MODAL
===================================================== */

/* =====================================================
   MESSENGER SELECT MODAL - FIX MOBILE
===================================================== */

body.modal-open {
    overflow: hidden !important;
}

#messengerModal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 999999 !important;

    display: none;
    align-items: center !important;
    justify-content: center !important;

    padding: 20px;
    box-sizing: border-box;
}

#messengerModal.active {
    display: flex !important;
}

.messenger-overlay {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 20, 17, 0.78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.messenger-box {
    position: relative !important;
    z-index: 1000000 !important;

    width: 100%;
    max-width: 430px;

    max-height: calc(100vh - 40px);
    overflow-y: auto;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 22px;

    padding: 30px 25px 25px;

    text-align: center;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.30);

    animation: messengerBoxIn 0.25s ease;
}

@keyframes messengerBoxIn {

    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

.messenger-close {
    position: absolute;

    top: 12px;
    left: 14px;

    width: 35px;
    height: 35px;

    border: 0;
    border-radius: 50%;

    background: #f1f5f3;

    color: #17332d;

    font-size: 25px;

    line-height: 35px;

    cursor: pointer;

    z-index: 5;
}

.messenger-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #e9f7f1;

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

    font-size: 30px;
}

.messenger-box h3 {
    margin: 0 0 8px;

    color: #062e29;

    font-size: 23px;
}

.messenger-box > p {
    margin: 0 0 22px;

    color: #64736f;

    font-size: 14px;
}

.messenger-options {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.messenger-option {
    width: 100%;
    min-height: 70px;

    border: 1px solid #e1e9e6;
    border-radius: 15px;

    background: #fff;

    display: flex;
    align-items: center;

    text-align: right;

    padding: 10px 14px;

    cursor: pointer;

    transition: 0.2s ease;

    font-family: inherit;
}

.messenger-option:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.08);
}

.messenger-logo {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

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

    font-size: 27px;

    margin-left: 13px;
}

.messenger-option strong {
    display: block;

    color: #17332d;

    font-size: 16px;

    margin-bottom: 3px;
}

.messenger-option small {
    display: block;

    color: #7a8985;

    font-size: 12px;
}

.whatsapp-option:hover {
    border-color: #25d366;
}

.bale-option:hover {
    border-color: #229ed9;
}

.rubika-option:hover {
    border-color: #7b4ab5;
}

.messenger-note {
    margin-top: 18px;

    padding: 10px 12px;

    border-radius: 10px;

    background: #f5f8f7;

    color: #687772;

    font-size: 11px;

    line-height: 1.8;
}


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

@media (max-width: 600px) {

    #messengerModal {
        padding: 12px !important;
    }

    .messenger-box {
        width: 100%;

        max-width: 420px;

        max-height: calc(100vh - 24px);

        padding:
            28px 16px 18px;

        border-radius: 18px;
    }

    .messenger-icon {
        width: 55px;
        height: 55px;

        font-size: 26px;

        margin-bottom: 10px;
    }

    .messenger-box h3 {
        font-size: 20px;
    }

    .messenger-box > p {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .messenger-options {
        gap: 8px;
    }

    .messenger-option {
        min-height: 62px;

        padding: 8px 12px;
    }

    .messenger-logo {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 24px;

        margin-left: 10px;
    }

    .messenger-option strong {
        font-size: 15px;
    }

    .messenger-option small {
        font-size: 11px;
    }

    .messenger-note {
        margin-top: 12px;

        font-size: 10px;
    }

}

/* =========================================================
   MULTILINGUAL SITE
========================================================= */
.language-switcher{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.language-switcher a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:34px;padding:0 9px;border:1px solid rgba(8,127,91,.25);border-radius:7px;background:#fff;color:#075f45;font-size:11px;font-weight:800;line-height:1;transition:.25s ease;}
.language-switcher a:hover,.language-switcher a.active{background:#087f5b;color:#fff;border-color:#087f5b;}
html[lang="en"] body{direction:ltr;text-align:left;}
html[lang="en"] .hero-content,html[lang="en"] .section-title,html[lang="en"] .about-content,html[lang="en"] .product-main-info{text-align:left;}
html[lang="en"] .hero-label{padding-left:12px;padding-right:0;border-left:3px solid #32c997;border-right:0;}
html[lang="en"] .nav a:not(.nav-quote)::after{left:0;right:auto;}
html[lang="en"] .contact-section .section-title,html[lang="en"] .product-page-hero{text-align:center;}
html[lang="ar"] body{direction:rtl;text-align:right;}
html[lang="ar"] .hero-content,html[lang="ar"] .section-title,html[lang="ar"] .about-content,html[lang="ar"] .product-main-info{text-align:right;}
html[lang="ar"] .contact-section .section-title,html[lang="ar"] .product-page-hero{text-align:center;}
html[lang="ar"] .hero-label{padding-right:12px;padding-left:0;border-right:3px solid #32c997;border-left:0;}
@media (max-width:900px){.language-switcher{margin-right:8px;}.language-switcher a{min-width:40px;height:31px;padding:0 7px;font-size:10px;}html[lang="en"] .language-switcher{margin-left:8px;margin-right:0;}}
@media (max-width:700px){.language-switcher{gap:3px;}.language-switcher a{min-width:37px;height:29px;font-size:9px;padding:0 6px;}}

/* SEO keyword guide */
.keyword-guide-grid{align-items:stretch}.keyword-card{height:100%;display:flex;flex-direction:column}.keyword-card h2{margin:.55rem 0 .75rem;font-size:1.15rem}.keyword-card p{line-height:2;margin:0}.keyword-card .product-number{display:inline-block;margin-bottom:.2rem}


/* Consistent footer/header support for all pages */
.footer-brand { text-decoration: none; }
.footer-brand img { flex-shrink: 0; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .brand-logo { width: 58px; height: 58px; }
}


.keyword-card-link{display:inline-block;margin-top:12px;font-weight:700;text-decoration:none;}
.keyword-card-link:hover{text-decoration:underline;}

/* SEO STEP 3 - INTERNAL LINKING */
.related-seo-links{padding:52px 20px;background:#f5f8f7}
.related-seo-links .container{max-width:1180px;margin:0 auto}
.related-seo-links .section-heading{text-align:center;margin-bottom:24px}
.related-seo-links .section-heading span{display:block;color:#087f5b;font-size:13px;font-weight:700;margin-bottom:6px}
.related-seo-links .section-heading h2{margin:0 0 8px;color:#073b34;font-size:26px}
.related-seo-links .section-heading p{margin:0;color:#687773;line-height:1.9}
.related-seo-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.related-seo-grid a{display:inline-flex;align-items:center;justify-content:center;padding:11px 17px;border:1px solid #d7e5e1;border-radius:9px;background:#fff;color:#075f45;font-size:13px;font-weight:700;transition:.25s ease}
.related-seo-grid a:hover{background:#087f5b;color:#fff;border-color:#087f5b;transform:translateY(-2px)}
@media(max-width:700px){.related-seo-links{padding:40px 16px}.related-seo-links .section-heading h2{font-size:22px}.related-seo-grid a{width:100%}}

/* FINAL HEADER FIX: desktop must stay desktop while fitting all controls */
@media (min-width: 1101px) {
  .header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 96%;
    max-width: 1500px;
  }
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand > span { font-size: 15px; white-space: nowrap; }
  .brand > span strong { font-size: 19px; }
  .brand-logo { width: 58px; height: 58px; }
  .nav {
    display: flex !important;
    position: static !important;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.15vw, 22px);
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .nav a {
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: clamp(12px, .82vw, 14px);
    white-space: nowrap;
    text-align: center;
    flex: 0 1 auto;
  }
  .nav .nav-quote {
    margin-top: 0 !important;
    padding: 13px 18px !important;
    flex-shrink: 0;
  }
  .menu-toggle { display: none !important; }
  .language-switcher { flex: 0 0 auto; }
}

/* Medium laptop: keep desktop navigation, but compact it further */
@media (min-width: 1101px) and (max-width: 1450px) {
  .header .container { width: 97%; gap: 7px; }
  .brand > span { font-size: 13px; }
  .brand > span strong { font-size: 17px; }
  .brand-logo { width: 52px; height: 52px; }
  .nav { gap: 9px; }
  .nav a { font-size: 11.5px; }
  .nav .nav-quote { padding: 11px 13px !important; }
  .language-switcher { gap: 3px; }
  .language-switcher a { min-width: 39px; padding: 0 6px; font-size: 10px; }
}

/* 1100px and below: mobile/tablet menu */
@media (max-width: 1100px) {
  .header .container { min-height: 70px; width: 90%; }
  .menu-toggle { display: block !important; }
  .nav {
    display: none !important;
    position: absolute !important;
    top: 70px !important;
    right: 0 !important;
    left: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 10px !important;
    background: #fff !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
    z-index: 2500 !important;
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
  }
  .nav.active { display: flex !important; }
  .nav a { width: 100% !important; padding: 13px 15px !important; border-bottom: 1px solid #edf1ef !important; text-align: right !important; font-size: 14px !important; white-space: normal !important; }
  .nav a::after { display: none !important; }
  .nav-quote { margin-top: 8px !important; text-align: center !important; }
}


/* FINAL DESKTOP OVERRIDE - keep navigation horizontal on real desktop */
@media (min-width: 1101px) {
  .header .container {
    flex-direction: row !important;
  }
  .nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .nav a {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
  .menu-toggle {
    display: none !important;
  }
}

/* FINAL NAV STYLE - clean bold desktop menu like reference */
@media (min-width: 1101px) {
  .nav { gap: 14px !important; }
  .nav a {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #073b34 !important;
    line-height: 1.3 !important;
    transition: color .2s ease, font-weight .2s ease !important;
  }
  .nav a:not(.nav-quote)::after {
    height: 2px !important;
    bottom: -7px !important;
    background: #087f5b !important;
    width: 0 !important;
    transition: width .22s ease !important;
  }
  .nav a:not(.nav-quote):hover { color: #087f5b !important; font-weight: 900 !important; }
  .nav a:not(.nav-quote):hover::after { width: 100% !important; }
  .nav .nav-quote { font-size: 14px !important; font-weight: 800 !important; }
}

/* =========================================================
   SEO KEYWORD GUIDE CLUSTERS — STEP 6
========================================================= */
.keyword-guide-group-title {
    grid-column: 1 / -1;
    margin: 26px 0 2px;
    padding: 8px 4px 2px;
}
.keyword-guide-group-title h2 {
    margin: 0 0 6px;
    color: #073b34;
    font-size: 24px;
    line-height: 1.6;
    font-weight: 900;
}
.keyword-guide-group-title p {
    margin: 0 0 10px;
    color: #687772;
    font-size: 13px;
    line-height: 1.9;
}
.keyword-card h3 {
    color: #073b34;
    font-size: 18px;
    line-height: 1.7;
    margin: 6px 0;
}
@media (max-width: 600px) {
    .keyword-guide-group-title {
        margin-top: 18px;
    }
    .keyword-guide-group-title h2 {
        font-size: 21px;
    }
}


/* STEP 7.1 — FINAL HEADER FIT FIX */
@media (min-width: 1101px) {
  .header .container {
    width: 98% !important;
    max-width: 1720px !important;
    gap: 8px !important;
    min-height: 78px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  .brand {
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }
  .brand-logo { width: 56px !important; height: 56px !important; }
  .brand > span, .brand-text {
    font-size: 14px !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
  }
  .brand > span strong, .brand-text strong { font-size: 18px !important; }
  .nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(7px, .65vw, 13px) !important;
    overflow: visible !important;
  }
  .nav a {
    flex: 0 1 auto !important;
    width: auto !important;
    padding: 0 !important;
    font-size: clamp(12px, .76vw, 14px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }
  .nav .nav-quote {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: clamp(11px, .72vw, 13px) !important;
    margin: 0 !important;
  }
  .language-switcher {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
  .language-switcher a {
    min-width: 43px !important;
    height: 32px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }
  .menu-toggle { display: none !important; }
}

@media (min-width: 1101px) and (max-width: 1450px) {
  .header .container { width: 99% !important; gap: 5px !important; }
  .brand-logo { width: 50px !important; height: 50px !important; }
  .brand > span, .brand-text { font-size: 12px !important; }
  .brand > span strong, .brand-text strong { font-size: 16px !important; }
  .nav { gap: 6px !important; }
  .nav a { font-size: 11px !important; }
  .nav .nav-quote { padding: 9px 10px !important; font-size: 10.5px !important; }
  .language-switcher a { min-width: 37px !important; padding: 0 5px !important; font-size: 9px !important; }
}

/* STEP 7.1 — RELATED CONTENT CARDS */
.related-seo-links {
  padding: 58px 20px !important;
  background: #f5f8f7 !important;
}
.related-seo-links .section-heading {
  text-align: center !important;
  margin-bottom: 28px !important;
}
.related-seo-links .section-heading span {
  display: block !important;
  color: #087f5b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-bottom: 5px !important;
}
.related-seo-links .section-heading h2 {
  margin: 0 0 8px !important;
  color: #073b34 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
}
.related-seo-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
.related-seo-grid a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 58px !important;
  padding: 14px 18px !important;
  border: 1px solid #d7e5e1 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #075f45 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: right !important;
  transition: .25s ease !important;
}
.related-seo-grid a::after { content: "←"; margin-right: 10px; opacity: .75; }
.related-seo-grid a:hover {
  background: #087f5b !important;
  color: #fff !important;
  border-color: #087f5b !important;
  transform: translateY(-2px) !important;
}
@media (max-width: 800px) {
  .related-seo-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .related-seo-links { padding: 42px 16px !important; }
  .related-seo-links .section-heading h2 { font-size: 23px !important; }
  .related-seo-grid a { width: 100% !important; }
}



/* FINAL LANGUAGE-SPECIFIC HEADER LAYOUT */
@media (min-width:1101px) {
  html[lang="en"] .header .container {
    width:98% !important; max-width:1760px !important; min-height:78px !important;
    display:grid !important; align-items:center !important; gap:18px !important;
    flex-wrap:nowrap !important; overflow:visible !important;
  }
  html[lang="en"] .brand { min-width:0 !important; width:auto !important; }
  html[lang="en"] .brand-logo { width:54px !important; height:54px !important; }
  html[lang="en"] .brand-text, html[lang="en"] .brand > span { white-space:nowrap !important; overflow:visible !important; line-height:1.25 !important; }
  html[lang="en"] .nav { min-width:0 !important; width:auto !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; position:static !important; overflow:visible !important; flex-wrap:nowrap !important; }
  html[lang="en"] .nav a { flex:0 1 auto !important; width:auto !important; white-space:nowrap !important; padding:0 !important; margin:0 !important; line-height:1.25 !important; }
  html[lang="en"] .nav .nav-quote { flex:0 0 auto !important; margin:0 !important; white-space:nowrap !important; }
  html[lang="en"] .language-switcher { width:auto !important; flex:0 0 auto !important; white-space:nowrap !important; margin:0 !important; }
  html[lang="en"] .menu-toggle { display:none !important; }
}
@media (max-width:1100px) { html[lang="en"] .header .container { display:flex !important; } }

@media (min-width:1101px) {
  html[lang="en"] .header .container { grid-template-columns:260px minmax(0,1fr) 170px !important; direction:ltr !important; }
  html[lang="en"] .brand { grid-column:1; justify-self:start; }
  html[lang="en"] .nav { grid-column:2; gap:clamp(7px,.7vw,14px) !important; }
  html[lang="en"] .language-switcher { grid-column:3; justify-self:end; gap:5px !important; }
  html[lang="en"] .brand-text { font-size:14px !important; }
  html[lang="en"] .brand-text strong { font-size:18px !important; }
  html[lang="en"] .nav a { font-size:13px !important; font-weight:800 !important; }
  html[lang="en"] .nav .nav-quote { font-size:13px !important; padding:11px 15px !important; }
  html[lang="en"] .language-switcher a { min-width:48px !important; height:34px !important; padding:0 8px !important; font-size:11px !important; }
}
@media (min-width:1101px) and (max-width:1450px) {
  html[lang="en"] .header .container { grid-template-columns:225px minmax(0,1fr) 145px !important; gap:10px !important; }
  html[lang="en"] .brand-logo { width:50px !important; height:50px !important; }
  html[lang="en"] .brand-text { font-size:12px !important; }
  html[lang="en"] .brand-text strong { font-size:16px !important; }
  html[lang="en"] .nav { gap:5px !important; }
  html[lang="en"] .nav a { font-size:11px !important; }
  html[lang="en"] .nav .nav-quote { font-size:10px !important; padding:9px 9px !important; }
}

/* RELATED HEADING CLEANUP */
.related-seo-links .section-heading span{display:none !important;}

/* =========================================================
   ALL-FIVE SEO + CONVERSION UPGRADE
========================================================= */
.quote-helper-strip{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:0 auto 22px;padding:14px 18px;border:1px solid rgba(8,127,91,.16);border-radius:12px;background:linear-gradient(90deg,rgba(8,127,91,.06),rgba(23,105,170,.04));color:#24443c;font-size:.94rem}.quote-helper-strip strong{color:#075f45;font-weight:900}.quote-helper-note{width:100%;font-size:.84rem;opacity:.82}.quick-quote-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:30px auto 10px}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:11px 19px;border-radius:8px;border:1px solid rgba(8,127,91,.28);color:#075f45;background:#fff;font-weight:800}.specialist-guide{background:#fff}.specialist-guide .feature-card{height:100%}.specialist-guide h3{color:#075f45}.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:#087f5b;box-shadow:0 0 0 3px rgba(8,127,91,.10);outline:none}.quote-section .form-submit button{min-width:230px;font-weight:900}.quote-section .form-submit p{margin-top:8px}.seo-context-link{margin:18px auto;max-width:1200px;padding:0 5%;font-weight:700;color:#075f45}.seo-context-link a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.quote-helper-strip{font-size:.88rem;padding:12px 14px}.quick-quote-actions .btn{width:100%}.quick-quote-actions a{width:100%}}

/* Product guide: compact merged categories */
.keyword-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.keyword-card{height:100%;}
.keyword-card .guide-subitems{margin:14px 0 4px;padding:0 20px 0 0;color:#52635d;line-height:2;}
.keyword-card .guide-subitems li{margin:2px 0;}
@media(max-width:800px){.keyword-guide-grid{grid-template-columns:1fr;}}

/* SEO content upgrade: buyer guide */
.buyer-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px}.buyer-guide-card{padding:26px;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.06);border:1px solid rgba(6,46,41,.08)}.buyer-guide-card h2,.buyer-guide-card h3{margin-top:0}.buyer-guide-card p{line-height:2}.buyer-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 0;padding:0;list-style:none}.buyer-checklist li{padding:14px 16px;border-radius:12px;background:#f3f7f5;line-height:1.9}.buyer-faq{display:grid;gap:14px;margin-top:22px}.buyer-faq details{background:#fff;border:1px solid rgba(6,46,41,.12);border-radius:14px;padding:16px 18px}.buyer-faq summary{cursor:pointer;font-weight:800}.buyer-faq p{line-height:2;margin:12px 0 0}.buyer-guide-intro{max-width:900px;margin:0 auto;line-height:2.1;font-size:1.05rem}.buyer-guide-cta{text-align:center;margin-top:34px}.buyer-guide-cta a{display:inline-block;margin-top:12px}.buyer-related{margin-top:34px}@media(max-width:800px){.buyer-guide-grid,.buyer-checklist{grid-template-columns:1fr}}