/* Page Hero Section - Quality & R&D Page */

/* Icon Protection Fix - Hide   entity without affecting icon display */
.policy-icon-wrapper i,
.section-badge i,
.lab-title i,
.lab-badge i,
.lab-benefits li i,
i.improvement-icon,
i.cta-icon {
    font-size: 0;
}

.policy-icon-wrapper i::before,
.section-badge i::before,
.lab-title i::before,
.lab-badge i::before,
.lab-benefits li i::before,
i.improvement-icon::before,
i.cta-icon::before {
    font-size: 45px;
}

/* Specific icon sizes */
.section-badge i::before {
    font-size: 16px;
}

.lab-title i::before {
    font-size: 24px;
}

.lab-badge i::before {
    font-size: 13px;
}

.lab-benefits li i::before {
    font-size: 16px;
}

i.improvement-icon::before {
    font-size: 50px;
}

i.cta-icon::before {
    font-size: 50px;
}

/* CKEditor Image Alignment Fix - All Sections (EXCEPT lab-image-wrapper) */
.policy-section img:not(.lab-image-wrapper img),
.quality-values-section img,
.improvement-section img,
.cta-section img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Lab section images - only apply to images NOT in lab-image-wrapper */
.lab-section img:not(.lab-image-wrapper img) {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Center aligned images */
.policy-section figure.image,
.quality-values-section figure.image,
.improvement-section figure.image,
.cta-section figure.image {
    text-align: center;
    margin: 20px auto;
}

/* Lab section figures - only NOT in lab-image-wrapper */
.lab-section figure.image:not(.lab-image-wrapper figure.image) {
    text-align: center;
    margin: 20px auto;
}

.policy-section figure.image img,
.quality-values-section figure.image img,
.improvement-section figure.image img,
.cta-section figure.image img {
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

/* Paragraph wrapped images */
.policy-section p img,
.quality-values-section p img,
.improvement-section p img,
.cta-section p img {
    display: block;
    margin: 15px auto;
    border-radius: 10px;
}

/* Lab section paragraph images - exclude lab-image-wrapper */
.lab-section p:not(.lab-image-wrapper p) img {
    display: block;
    margin: 15px auto;
    border-radius: 10px;
}

/* CTA Section specific image styling */
.cta-section .cta-content img {
    max-width: 400px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* CKEditor alignment classes */
.image-style-align-center,
.image-style-side,
.image-style-block {
    margin-left: auto;
    margin-right: auto;
}

.image-style-align-left {
    float: left;
    margin-right: 20px;
}

.image-style-align-right {
    float: right;
    margin-left: 20px;
}

.quality-hero {
        position: relative;
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        padding: 50px 0 50px;
        overflow: hidden;
    }

    .quality-hero-pattern {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.03) 10px,
            rgba(255, 255, 255, 0.03) 20px
        );
    }

    .quality-hero-bg-icon {
        position: absolute;
        font-size: 175px;
        color: rgba(255, 255, 255, 0.05);
        z-index: 1;
    }

    .bg-icon-1 {
        top: -50px;
        left: -30px;
        transform: rotate(-15deg);
    }

    .bg-icon-2 {
        bottom: -40px;
        right: -40px;
        transform: rotate(15deg);
    }

    .quality-hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
    }

    .page-breadcrumb {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .page-breadcrumb a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .page-breadcrumb a:hover {
        color: #fff;
    }

    .page-breadcrumb .separator {
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
    }

    .page-breadcrumb .current {
        color: #fff;
        font-weight: 600;
        font-size: 14px;
    }

    .page-title {
        color: #fff;
        font-size: 42px;
        font-weight: 700;
        margin: 0 0 15px 0;
        letter-spacing: -1px;
    }

    .page-subtitle {
        color: rgba(255, 255, 255, 0.9);
        font-size: 18px;
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
    }

    /* Policy Section */
    .policy-section {
        padding: 80px 0;
        background: #fff;
        position: relative;
    }

    .policy-content {
        position: relative;
        z-index: 1;
    }

    /* Subtle Background Patterns */
    .bg-pattern-dots {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle, rgba(0, 86, 157, 0.12) 1.5px, transparent 1.5px);
        background-size: 28px 28px;
        pointer-events: none;
        z-index: 0;
    }

    .bg-pattern-circles {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            linear-gradient(to right, rgba(0, 163, 224, 0.03) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 163, 224, 0.04) 1px, transparent 1px);
        background-size: 24px 24px;
        pointer-events: none;
        z-index: 0;
    }

    .bg-pattern-waves {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            radial-gradient(ellipse at 50% 0%, rgba(0, 86, 157, 0.02) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 100%, rgba(0, 163, 224, 0.02) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }

    .section-with-pattern {
        position: relative;
        z-index: 1;
    }

    .policy-content {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    .policy-icon-wrapper {
        width: 100px;
        height: 100px;
        margin: 0 auto 30px;
        background: linear-gradient(135deg, #00569D 0%, #00A3E0 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 30px rgba(0, 86, 157, 0.2);
    }

    .policy-icon-wrapper i {
        font-size: 45px;
        color: #fff;
    }

    .policy-title {
        font-size: 32px;
        font-weight: 700;
        color: #1a1c1e;
        margin: 0 0 25px 0;
    }

    .policy-text {
        font-size: 18px;
        line-height: 1.8;
        color: #4a5568;
    }

    .policy-text strong {
        color: #00569D;
        font-weight: 600;
    }

    /* Quality Values Cards */
    .quality-values-section {
        padding: 30px 0;
        background: #fff;
        position: relative;
    }

    .quality-values-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            linear-gradient(to right, rgba(0, 86, 157, 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 86, 157, 0.04) 1px, transparent 1px);
        background-size: 20px 30px;
        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
        mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
    }

    .section-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .section-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, rgba(0, 86, 157, 0.1) 0%, rgba(0, 163, 224, 0.1) 100%);
        padding: 8px 20px;
        border-radius: 30px;
        margin-bottom: 20px;
    }

    .section-badge i {
        color: #00569D;
        font-size: 16px;
    }

    .section-badge span {
        color: #00569D;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .section-title {
        font-size: 36px;
        font-weight: 700;
        color: #1a1c1e;
        margin: 0 0 15px 0;
    }

    .section-title .highlight {
        background: linear-gradient(135deg, #00569D 0%, #00A3E0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .values-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
        margin-top: 50px;
    }

    .value-card {
        background: #fff;
        border-radius: 15px;
        padding: 35px 25px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .value-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #00569D 0%, #00A3E0 100%);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .value-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0, 86, 157, 0.15);
    }

    .value-card:hover::before {
        transform: scaleX(1);
    }

    .value-number {
        font-size: 48px;
        font-weight: 900;
        background: linear-gradient(135deg, rgba(0, 86, 157, 0.1) 0%, rgba(0, 163, 224, 0.1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 15px;
        line-height: 1;
    }

    .value-title {
        font-size: 18px;
        font-weight: 700;
        color: #1a1c1e;
        margin: 0 0 12px 0;
    }

    .value-text {
        font-size: 15px;
        line-height: 1.6;
        color: #4a5568;
    }

    /* Lab & R&D Section */
    .lab-section {
        padding: 80px 0;
        background: #fff;
        position: relative;
    }

    .lab-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            linear-gradient(to right, rgba(0, 163, 224, 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 163, 224, 0.03) 1px, transparent 1px);
        background-size: 20px 30px;
    }

    .lab-grid {
        display: grid;
        gap: 60px;
    }

    .lab-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
    }

    .lab-item:nth-child(even) {
        direction: rtl;
    }

    .lab-item:nth-child(even) > * {
        direction: ltr;
    }

    .lab-image {
        position: relative;
    }

    .lab-image-wrapper {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .lab-image-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 86, 157, 0.1) 0%, rgba(0, 163, 224, 0.1) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .lab-image-wrapper img {
        width: 100% !important;
        height: 350px !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.3s ease;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .lab-image-wrapper:hover img {
        transform: scale(1.05);
    }

    .lab-badge {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background: linear-gradient(135deg, #00569D 0%, #00A3E0 100%);
        color: #fff;
        padding: 10px 20px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 600;
        z-index: 2;
    }

    .lab-content {
        padding: 20px 0;
    }

    .lab-title {
        font-size: 28px;
        font-weight: 700;
        color: #1a1c1e;
        margin: 0 0 20px 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .lab-title i {
        color: #00569D;
        font-size: 24px;
    }

    .lab-description {
        font-size: 16px;
        line-height: 1.8;
        color: #4a5568;
        margin-bottom: 20px;
    }

    .lab-benefits {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .lab-benefits li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 15px;
        font-size: 15px;
        color: #4a5568;
        line-height: 1.6;
    }

    .lab-benefits li i {
        color: #10B981;
        font-size: 16px;
        margin-top: 3px;
    }

    /* Continuous Improvement */
    .improvement-section {
        padding: 80px 0;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        position: relative;
    }

    .improvement-pattern {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            linear-gradient(to right, rgba(0, 163, 224, 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 163, 224, 0.03) 1px, transparent 1px),
            linear-gradient(to left, rgba(0, 86, 157, 0.03) 1px, transparent 1px),
            linear-gradient(to top, rgba(0, 86, 157, 0.02) 1px, transparent 1px);
        background-size: 40px 40px;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    }

    .improvement-content {
        position: relative;
        z-index: 2;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    .improvement-icon {
        font-size: 50px;
        color: #00569D;
        margin-bottom: 25px;
    }

    .improvement-title {
        font-size: 32px;
        font-weight: 700;
        color: #1a1c1e;
        margin: 0 0 25px 0;
    }

    .improvement-text {
        font-size: 18px;
        line-height: 1.8;
        color: #4a5568;
    }

    .improvement-text strong {
        color: #00569D;
        font-weight: 600;
    }

    /* CTA Section */
    .cta-section {
        padding: 80px 0;
        background: #fff;
        text-align: center;
        position: relative;
    }

    .cta-pattern {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            linear-gradient(to right, rgba(0, 163, 224, 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 163, 224, 0.03) 1px, transparent 1px),
            linear-gradient(to left, rgba(0, 86, 157, 0.02) 1px, transparent 1px),
            linear-gradient(to top, rgba(0, 86, 157, 0.01) 1px, transparent 1px);
        background-size: 30px 30px;
    }

    .cta-content {
        position: relative;
        z-index: 2;
    }

    .cta-content {
        max-width: 800px;
        margin: 0 auto;
    }

    .cta-icon {
        font-size: 50px;
        color: #00569D;
        margin-bottom: 25px;
    }

    .cta-title {
        font-size: 32px;
        font-weight: 700;
        color: #1a1c1e;
        margin: 0 0 20px 0;
    }

    .cta-text {
        font-size: 18px;
        color: #4a5568;
        line-height: 1.7;
        margin-bottom: 30px;
    }

    .btn-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #00569D 0%, #00A3E0 100%);
        color: #fff;
        padding: 15px 40px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 5px 20px rgba(0, 86, 157, 0.3);
    }

    .btn-cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(0, 86, 157, 0.4);
    }

    .btn-cta i {
        font-size: 18px;
    }

    /* Responsive */
    @media (max-width: 992px) {
        .lab-item {
            grid-template-columns: 1fr;
        }

        .lab-item:nth-child(even) {
            direction: ltr;
        }

        .lab-image-wrapper img {
            height: 280px;
        }
    }

    @media (max-width: 768px) {
        .page-title {
            font-size: 32px;
        }

        .page-subtitle {
            font-size: 16px;
            padding: 0 20px;
        }

        .policy-section,
        .quality-values-section,
        .lab-section,
        .improvement-section,
        .cta-section {
            padding: 60px 0;
        }

        .policy-title,
        .improvement-title {
            font-size: 26px;
        }

        .policy-text,
        .improvement-text {
            font-size: 16px;
        }

        .section-title {
            font-size: 28px;
        }

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

        .lab-title {
            font-size: 24px;
        }

        .cta-title {
            font-size: 26px;
        }

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

        .btn-cta {
            padding: 12px 30px;
            font-size: 15px;
        }
    }