:root {
    --green: #4dab00;
    --green-deep: #236600;
    --green-dark: #123b08;
    --green-soft: #f2f9ed;
    --green-pale: #e8f5df;
    --ink: #173018;
    --muted: #6b766b;
    --cream: #fafcf8;
    --line: #e2ebdf;
    --shadow: 0 18px 55px rgba(31, 76, 14, .10);
    --shadow-sm: 0 8px 26px rgba(31, 76, 14, .08)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.65;
    overflow-x: hidden
}

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

.container {
    max-width: 1180px
}

.topbar {
    background: #0b2805;
    color: #dfeeda;
    font-size: 11px;
    padding: 7px 0
}

.topbar a {
    color: #eaf6e4;
    transition: .25s
}

.topbar a:hover {
    color: #9bea5d
}

.main-nav {
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(77, 171, 0, .08);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all .3s ease
}

.main-nav .container {
    min-height: 76px;
    transition: min-height .3s ease
}

.main-nav.scrolled {
    box-shadow: 0 8px 30px rgba(22, 54, 10, .13)
}

.main-nav.scrolled .container {
    min-height: 62px
}

.navbar-brand {
    color: var(--green-dark) !important;
    font-weight: 900;
    letter-spacing: -.5px
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--green), var(--green-deep));
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 7px 18px rgba(77, 171, 0, .24);
    transition: .3s
}

.main-nav.scrolled .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px
}

.brand-text {
    font-size: 17px;
    line-height: 1.05
}

.brand-text strong {
    color: var(--green)
}

.brand-text small {
    display: block;
    font-size: 8px;
    letter-spacing: 1.35px;
    color: #6b8067;
    margin-top: 4px
}

.nav-link {
    font-size: 13px;
    font-weight: 700;
    color: #263a25 !important;
    padding: .8rem .55rem !important;
    position: relative;
    transition: .25s
}

.nav-link:hover,
.nav-link.active {
    color: var(--green) !important
}

.nav-link:before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    height: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: center;
    transition: .25s
}

.nav-link:hover:before,
.nav-link.active:before {
    transform: scaleX(1)
}

.nav-link i {
    font-size: 9px;
    margin-left: 3px
}

.dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    border: 0;
    padding: 8px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    min-width: 215px;
    transition: .22s
}

.dropdown:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto
}

.dropdown-item {
    font-size: 13px;
    font-weight: 600;
    padding: 9px 11px;
    border-radius: 8px;
    transition: .2s
}

.dropdown-item:hover {
    background: var(--green-soft);
    color: var(--green);
    transform: translateX(3px)
}

.btn-green {
    background: var(--green);
    border: 1px solid var(--green);
    color: #fff !important;
    border-radius: 7px;
    font-weight: 800;
    padding: 11px 18px;
    transition: all .25s;
    box-shadow: 0 8px 22px rgba(77, 171, 0, .17)
}

.btn-green:hover {
    background: var(--green-deep);
    border-color: var(--green-deep);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(35, 102, 0, .22)
}

.btn-outline-green {
    border: 1px solid var(--green);
    color: var(--green);
    background: #fff;
    border-radius: 7px;
    font-weight: 800;
    padding: 10px 17px;
    transition: .25s
}

.btn-outline-green:hover {
    background: var(--green-deep);
    border-color: var(--green-deep);
    color: #fff;
    transform: translateY(-2px)
}

.hero-home {
    position: relative;
    height: 560px;
    background: #0c2408;
    overflow: hidden
}

.hero-slide {
    height: 560px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center
}

.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 25, 2, .86) 0%, rgba(7, 31, 3, .66) 46%, rgba(7, 26, 3, .16) 100%)
}

.hero-copy {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 660px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--green-deep);
    background: rgba(77, 171, 0, .10);
    border: 1px solid rgba(77, 171, 0, .18);
    border-radius: 50px;
    padding: 6px 11px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase
}

.hero-copy .eyebrow {
    color: #bdf486;
    background: rgba(77, 171, 0, .14);
    border-color: rgba(189, 244, 134, .28)
}

.hero-copy h1 {
    font-size: clamp(36px, 4.3vw, 58px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -2px;
    margin: 17px 0
}

.hero-copy h1 span {
    color: #8fe345
}

.hero-copy p {
    font-size: 15px;
    color: #dce8d9;
    max-width: 610px;
    margin-bottom: 22px
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.btn-ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 7px;
    padding: 10px 17px;
    font-weight: 800;
    transition: .25s
}

.btn-ghost:hover {
    background: #fff;
    color: var(--green-deep);
    transform: translateY(-2px)
}

.hero-nav {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 27px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px
}

.hero-nav button {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border-radius: 50%;
    transition: .25s
}

.hero-nav button:hover {
    background: var(--green);
    border-color: var(--green);
    transform: translateY(-2px)
}

.hero-counter {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 12px;
    font-weight: 800
}

.hero-counter .line {
    width: 55px;
    height: 1px;
    background: rgba(255, 255, 255, .35)
}

.hero-counter .current {
    color: #9bea5d;
    transition: .25s
}

.hero-counter:hover .current {
    transform: translateX(3px);
    color: #fff
}

@keyframes heroZoomIn {
    0% {
        opacity: 0;
        transform: scale(.94) translateY(12px)
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.hero-copy.hero-animate {
    animation: heroZoomIn .9s ease both
}

.stats-strip {
    margin-top: -28px;
    position: relative;
    z-index: 10
}

.stats-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.stat-item {
    text-align: center;
    padding: 20px 10px;
    border-right: 1px solid var(--line);
    transition: .25s
}

.stat-item:hover {
    background: var(--green-soft);
    transform: translateY(-2px)
}

.stat-item:last-child {
    border-right: 0
}

.stat-item strong {
    display: block;
    font-size: 31px;
    line-height: 1;
    color: var(--green-deep);
    font-weight: 900
}

.stat-item span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 800
}

.section {
    padding: 76px 0
}

.section-soft {
    background: var(--green-soft)
}

.section-head {
    text-align: center;
    max-width: 730px;
    margin: 0 auto 35px
}

.section-head h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -1px;
    margin: 8px 0 9px
}

.section-head p {
    font-size: 14px;
    color: var(--muted);
    margin: 0
}

.kicker {
    display: block;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 900
}

.image-frame {
    position: relative;
    overflow: hidden;
    border-radius: 17px;
    box-shadow: var(--shadow);
    isolation: isolate
}

.image-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1)
}

.image-frame.tall img {
    aspect-ratio: 4/3
}

.image-frame:hover img {
    transform: scale(1.055)
}

.image-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(77, 171, 0, .02), rgba(77, 171, 0, .20));
    opacity: 0;
    transition: .4s;
    pointer-events: none
}

.image-frame:hover .image-glow {
    opacity: 1
}

.media-card,
.blog-card,
.product-card,
.team-card,
.info-panel,
.contact-info,
.mission-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    height: 100%;
    transition: all .3s
}

.media-card:hover,
.blog-card:hover,
.product-card:hover,
.team-card:hover,
.info-panel:hover,
.contact-info:hover,
.mission-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.media-image,
.blog-image,
.product-image {
    position: relative;
    display: block;
    overflow: hidden;
    background: #e9f2e5
}

.media-image img,
.blog-image img,
.product-image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform .65s
}

.media-card:hover .media-image img,
.blog-card:hover .blog-image img,
.product-card:hover .product-image img {
    transform: scale(1.075)
}

.media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 39, 4, .02) 30%, rgba(7, 29, 3, .72) 100%);
    opacity: .72;
    transition: .35s
}

.media-card:hover .media-overlay,
.blog-card:hover .media-overlay,
.product-card:hover .media-overlay {
    opacity: .95
}

.view-chip {
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #fff;
    background: rgba(77, 171, 0, .9);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    transform: translateY(8px);
    opacity: 0;
    transition: .3s
}

.media-card:hover .view-chip,
.product-card:hover .view-chip {
    opacity: 1;
    transform: translateY(0)
}

.media-body,
.blog-body,
.product-body,
.team-body {
    padding: 17px
}

.media-body h3,
.blog-body h3,
.product-body h3,
.team-body h3,
.info-panel h3,
.mission-card h2 {
    font-size: 18px;
    font-weight: 850;
    margin-bottom: 7px
}

.media-body p,
.blog-body p,
.product-body p,
.team-body p,
.info-panel p,
.mission-card p {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px
}

.text-link {
    color: var(--green);
    font-size: 12px;
    font-weight: 850;
    transition: .25s
}

.text-link:hover {
    color: var(--green-deep);
    letter-spacing: .2px
}

.swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    margin-top: 20px
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #b8c9b0;
    opacity: 1
}

.swiper-pagination-bullet-active {
    background: var(--green);
    width: 22px;
    border-radius: 8px
}

.complianceSwiper .swiper-slide {
    height: auto
}

.compliance-section {
    background: #fcfaf6
}

.compliance-section .media-card {
    background: #fff
}

.technology-section {
    background: #fff
}

.technology-section h2,
.employee-copy h2,
.excellence-section h2,
.contact-hero-card h2 {
    font-size: clamp(28px, 3.3vw, 42px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -1px
}

.check-list {
    display: grid;
    gap: 8px;
    margin-top: 15px
}

.check-list span {
    font-size: 12px;
    font-weight: 700;
    color: #455342
}

.check-list i {
    color: var(--green);
    margin-right: 7px
}

.cert-row {
    margin-top: 40px;
    text-align: center
}

.cert-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--muted);
    font-weight: 800;
    margin-bottom: 10px
}

.cert-visual,
.client-reference {
    max-width: 720px;
    margin: auto;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
    padding: 5px
}

.cert-visual img,
.client-reference img {
    display: block;
    width: 100%;
    height: 72px;
    object-fit: cover
}

.employee-section {
    padding-top: 0
}

.employee-section .row {
    background: #fff
}

.employee-copy {
    padding: 40px
}

.employee-copy p {
    color: var(--muted);
    font-size: 13px
}

.rounded-start-lg {
    border-radius: 17px 0 0 17px
}

.serviceSwiper .swiper-slide {
    height: auto
}

.serviceSwiper .media-card {
    min-height: 100%
}

.service-prev,
.service-next {
    position: absolute;
    top: 45%;
    z-index: 4;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    color: var(--green);
    cursor: pointer;
    transition: .25s
}

.service-prev {
    left: -18px
}

.service-next {
    right: -18px
}

.service-prev:hover,
.service-next:hover {
    background: var(--green);
    color: #fff;
    transform: scale(1.05)
}

.product-section {
    background: var(--cream)
}

.product-card {
    overflow: hidden
}

.product-tag {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 900
}

.process-section {
    background: #fcfaf6
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    position: relative
}

.process-grid:before {
    content: "";
    position: absolute;
    top: 38px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: #cfdac8
}

.process-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid var(--line);
    padding: 18px;
    border-radius: 11px;
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: .3s
}

.process-card:hover {
    transform: translateY(-5px);
    border-color: rgba(77, 171, 0, .45);
    box-shadow: var(--shadow)
}

.process-card > span {
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--green);
    font-weight: 900
}

.process-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    color: var(--green-deep);
    border: 4px solid #e4f1dc;
    margin: 10px 0 12px
}

.process-card h3 {
    font-size: 15px;
    font-weight: 850
}

.process-card p {
    font-size: 11px;
    color: var(--muted);
    margin: 0
}

.why-section {
    background: linear-gradient(135deg, #0e2808, #173e0a);
    color: #fff
}

.why-section .section-head .kicker {
    color: #9bea5d
}

.why-section .section-head h2 {
    color: #fff
}

.why-section .section-head p {
    color: #d2e1cb
}

.why-card {
    height: 100%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    padding: 20px;
    transition: .35s
}

.why-card:hover {
    background: var(--green);
    border-color: var(--green);
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2)
}

.why-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(77, 171, 0, .18);
    display: grid;
    place-items: center;
    color: #a9ee6c;
    font-size: 21px;
    margin-bottom: 14px;
    transition: .3s
}

.why-card:hover .why-icon {
    background: #fff;
    color: var(--green-deep);
    transform: rotate(-4deg)
}

.why-card h3 {
    font-size: 15px;
    font-weight: 850;
    transition: .3s
}

.why-card p {
    font-size: 11px;
    color: #c9d9c3;
    margin: 0;
    transition: .3s
}

.why-card:hover h3,
.why-card:hover p {
    color: #fff
}

.excellence-section {
    background: #fff
}

.mini-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    padding: 11px;
    border-radius: 9px;
    transition: .25s;
    background: #fff
}

.mini-feature:hover {
    border-color: rgba(77, 171, 0, .4);
    background: var(--green-soft);
    transform: translateY(-2px)
}

.mini-feature > i {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--green-soft);
    display: grid;
    place-items: center;
    color: var(--green);
    flex: 0 0 auto
}

.mini-feature strong {
    display: block;
    font-size: 11px
}

.mini-feature small {
    display: block;
    font-size: 9px;
    color: var(--muted)
}

.standards {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px
}

.standards span,
.badge-soft {
    font-size: 9px;
    font-weight: 850;
    color: var(--green-deep);
    background: var(--green-soft);
    border: 1px solid #d8eacb;
    border-radius: 6px;
    padding: 6px 8px
}

.blog-section {
    background: #fafcf8
}

.blog-date {
    position: absolute;
    left: 12px;
    top: 12px;
    background: #fff;
    color: var(--green-deep);
    font-size: 9px;
    font-weight: 900;
    padding: 5px 7px;
    border-radius: 5px
}

.blogSwiper .swiper-slide {
    height: auto
}

.faq-section {
    background: #fcfaf6
}

.image-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    color: #fff;
    z-index: 2
}

.image-caption strong {
    display: block;
    font-size: 16px
}

.image-caption span {
    font-size: 10px;
    color: #e3f3dc
}

.premium-accordion .accordion-item {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    margin-bottom: 7px;
    overflow: hidden;
    background: #fff;
    transition: .25s
}

.premium-accordion .accordion-item:hover {
    border-color: rgba(77, 171, 0, .45) !important;
    box-shadow: 0 7px 18px rgba(77, 171, 0, .08)
}

.premium-accordion .accordion-button {
    font-size: 12px;
    font-weight: 800;
    color: var(--ink);
    padding: 14px 16px;
    box-shadow: none;
    background: #fff
}

.premium-accordion .accordion-button:not(.collapsed) {
    color: var(--green-deep);
    background: var(--green-soft)
}

.premium-accordion .accordion-body {
    font-size: 12px;
    color: var(--muted);
    padding: 0 16px 14px;
    background: var(--green-soft)
}

.client-strip {
    background: #fff;
    padding-bottom: 55px
}

.client-reference {
    max-width: 650px
}

.client-logo {
    height: 72px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    display: grid;
    place-items: center;
    transition: .3s
}

.client-logo span {
    font-size: 12px;
    font-weight: 900;
    color: #60705c;
    letter-spacing: .7px
}

.client-logo:hover {
    border-color: var(--green);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px)
}

.client-logo:hover span {
    color: var(--green)
}

.page-hero {
    min-height: 330px;
    display: flex;
    align-items: center;
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 27, 3, .88), rgba(9, 36, 4, .46))
}

.page-hero h1 {
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -1.5px;
    margin: 13px 0 8px
}

.page-hero p {
    max-width: 720px;
    color: #e2ebdf;
    font-size: 14px
}

.breadcrumb {
    margin: 0;
    font-size: 11px
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #d8e8d2
}

.breadcrumb-item.active {
    color: #a8eb6a
}

.info-panel,
.mission-card {
    padding: 27px
}

.big-icon {
    width: 56px;
    height: 56px;
    border-radius: 13px;
    background: var(--green-soft);
    color: var(--green-deep);
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 17px
}

.quote-box {
    margin-top: 17px;
    border-left: 4px solid var(--green);
    padding: 12px 15px;
    background: var(--green-soft);
    border-radius: 0 8px 8px 0;
    font-weight: 700;
    color: #3e5538
}

.portrait-frame {
    overflow: hidden;
    border-radius: 17px;
    box-shadow: var(--shadow)
}

.portrait-frame img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: .7s
}

.portrait-frame:hover img {
    transform: scale(1.05)
}

.signature-line {
    border-top: 1px solid var(--line);
    margin-top: 25px;
    padding-top: 15px
}

.signature-line strong {
    display: block;
    font-size: 14px
}

.signature-line span {
    font-size: 11px;
    color: var(--muted)
}

.team-image {
    overflow: hidden
}

.team-image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: .6s
}

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

.team-body h3 {
    margin-bottom: 2px
}

.team-body > span {
    font-size: 10px;
    color: var(--green);
    font-weight: 800
}

.team-body p {
    margin-top: 9px;
    line-height: 1.9
}

.verification-box {
    max-width: 900px;
    margin: auto;
    padding: 40px;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    background: #fff;
    text-align: center
}

.verification-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green-deep);
    display: grid;
    place-items: center;
    font-size: 32px;
    margin: 0 auto 16px
}

.verification-form {
    max-width: 680px;
    margin: 22px auto 0
}

.verification-form .form-control {
    border: 1px solid #d8e5d3;
    border-radius: 7px 0 0 7px;
    padding: 13px 15px
}

.verification-form .btn {
    border-radius: 0 7px 7px 0
}

.step-mini {
    height: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px;
    background: var(--green-soft);
    transition: .3s;
    text-align: left
}

.step-mini:hover {
    background: #fff;
    border-color: var(--green);
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm)
}

.step-mini > span {
    font-size: 9px;
    font-weight: 900;
    color: var(--green)
}

.step-mini > i {
    display: block;
    font-size: 23px;
    color: var(--green-deep);
    margin: 10px 0
}

.step-mini h3 {
    font-size: 14px;
    font-weight: 850
}

.step-mini p {
    font-size: 11px;
    color: var(--muted);
    margin: 0
}

.contact-premium {
    background: var(--green-soft)
}

.contact-hero-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 40px;
    height: 100%;
    box-shadow: var(--shadow)
}

.contact-hero-card p {
    color: var(--muted);
    max-width: 620px
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px
}

.contact-image {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    height: 100%;
    min-height: 360px;
    box-shadow: var(--shadow)
}

.contact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s
}

.contact-image:hover img {
    transform: scale(1.06)
}

.contact-image-caption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    color: #fff;
    z-index: 2
}

.contact-image-caption strong {
    display: block;
    font-size: 18px
}

.contact-image-caption span {
    font-size: 11px
}

.contact-info {
    padding: 22px;
    background: #fff
}

.contact-info > i {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    color: var(--green-deep);
    font-size: 21px;
    margin-bottom: 12px
}

.contact-info h3 {
    font-size: 15px;
    font-weight: 850
}

.contact-info p,
.contact-info a {
    font-size: 11px;
    color: var(--muted);
    margin: 0
}

.contact-info a:hover {
    color: var(--green)
}

.map-placeholder {
    margin-top: 28px;
    min-height: 250px;
    border-radius: 16px;
    background: linear-gradient(135deg, #e2f1db, #f8fbf5);
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px dashed #bdd7ae;
    color: var(--green-deep)
}

.map-placeholder i {
    font-size: 36px
}

.industry-table-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden
}

.table {
    margin: 0
}

.table thead th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--green-deep);
    background: var(--green-soft);
    padding: 14px;
    border: 0
}

.table td {
    font-size: 12px;
    padding: 12px;
    border-color: var(--line);
    vertical-align: middle
}

.industry-name {
    display: flex;
    align-items: center;
    gap: 10px
}

.industry-name img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    transition: .4s
}

.industry-row {
    transition: .25s
}

.industry-row:hover {
    background: #fbfef9;
    transform: translateX(3px)
}

.industry-row:hover .industry-name img {
    transform: scale(1.08)
}

.share-row {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 11px
}

.share-row a {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--green);
    transition: .25s
}

.share-row a:hover {
    background: var(--green);
    color: #fff;
    transform: translateY(-2px)
}

.related-section h3 {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 15px
}

.service-detail-band,
.quality-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border-radius: 14px;
    background: var(--green-soft);
    border: 1px solid #d9e9d1
}

.service-detail-band h3,
.quality-banner h3 {
    font-size: 20px;
    font-weight: 900;
    margin: 4px 0
}

.service-detail-band p,
.quality-banner p {
    font-size: 12px;
    color: var(--muted);
    margin: 0
}

.quality-banner {
    background: #fff
}

.check-panel {
    display: grid;
    gap: 9px
}

.check-row {
    display: flex;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    transition: .25s
}

.check-row:hover {
    border-color: var(--green);
    transform: translateX(3px);
    box-shadow: var(--shadow-sm)
}

.check-row > i {
    color: var(--green);
    font-size: 19px
}

.check-row strong {
    font-size: 13px
}

.check-row p {
    font-size: 11px;
    color: var(--muted);
    margin: 3px 0 0
}

.cta-section {
    padding: 0 0 0;
    background: #fff
}

.cta-box {
    background: linear-gradient(135deg, var(--green), var(--green-deep));
    color: #fff;
    border-radius: 16px 16px 0 0;
    padding: 34px 40px;
    box-shadow: 0 -10px 35px rgba(35, 102, 0, .09)
}

.cta-box h2 {
    font-size: 29px;
    font-weight: 900;
    margin: 8px 0
}

.cta-box p {
    font-size: 12px;
    color: #e5f2dd;
    margin: 0
}

.eyebrow-light {
    color: #d7ffb5;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .18)
}

.cta-box .btn-light {
    font-weight: 850;
    border-radius: 7px
}

.cta-box .btn-outline-light {
    border-radius: 7px;
    font-weight: 800
}

.site-footer {
    background: #061706;
    color: #b8c9b1;
    padding: 48px 0 0
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 16px;
    font-weight: 900
}

.footer-brand .brand-mark {
    width: 37px;
    height: 37px
}

.site-footer p,
.site-footer a {
    font-size: 11px;
    color: #aebfa7;
    line-height: 1.75
}

.site-footer a {
    display: block;
    margin: 6px 0;
    transition: .25s
}

.site-footer a:hover {
    color: #9bea5d;
    transform: translateX(3px)
}

.site-footer h5 {
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    margin-bottom: 14px
}

.social-links {
    display: flex;
    gap: 7px
}

.social-links a {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 !important;
    color: #cbe4c2
}

.social-links a:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    transform: translateY(-3px)
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 16px 0;
    font-size: 10px;
    color: #82917d
}

.whatsapp-float {
    position: fixed;
    right: 21px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #20c66a;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 27px;
    z-index: 1100;
    box-shadow: 0 0 0 0 rgba(32, 198, 106, .55);
    animation: waPulse 1.8s infinite;
    transition: .25s
}

.whatsapp-float:hover {
    color: #fff;
    transform: scale(1.08)
}

@keyframes waPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 198, 106, .55)
    }
    70% {
        box-shadow: 0 0 0 18px rgba(32, 198, 106, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgba(32, 198, 106, 0)
    }
}

.lightbox {
    cursor: zoom-in
}

.lightbox img {
    transition: .55s
}

.lightbox:hover img {
    transform: scale(1.05)
}

@media(max-width:991.98px) {
    .topbar {
        font-size: 10px
    }
    .main-nav .container,
    .main-nav.scrolled .container {
        min-height: 68px
    }
    .navbar-collapse {
        background: #fff;
        padding: 10px 0;
        border-top: 1px solid var(--line)
    }
    .nav-link {
        padding: .65rem .3rem !important
    }
    .nav-link:before {
        display: none
    }
    .dropdown-menu {
        display: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        border-left: 2px solid var(--green);
        border-radius: 0;
        padding: 3px 0 3px 9px;
        margin-left: 8px
    }
    .dropdown.show-mobile > .dropdown-menu {
        display: block
    }
    .dropdown-link {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .dropdown-link i {
        transition: .25s
    }
    .dropdown.show-mobile .dropdown-link i {
        transform: rotate(180deg)
    }
    .nav-cta {
        margin-top: 8px
    }
    .hero-home,
    .hero-slide {
        height: 570px
    }
    .hero-copy {
        max-width: 600px
    }
    .hero-copy h1 {
        font-size: 43px
    }
    .process-grid {
        grid-template-columns: repeat(2, 1fr)
    }
    .process-grid:before {
        display: none
    }
    .employee-section {
        padding-top: 0
    }
    .rounded-start-lg {
        border-radius: 17px
    }
    .employee-copy {
        padding: 30px
    }
    .service-prev {
        left: 4px
    }
    .service-next {
        right: 4px
    }
    .page-hero {
        background-attachment: scroll
    }
    .quality-banner,
    .service-detail-band {
        flex-direction: column;
        align-items: flex-start
    }
    .contact-image {
        min-height: 320px
    }
}

@media(max-width:575.98px) {
    .topbar .container {
        justify-content: center !important;
        text-align: center
    }
    .top-links {
        width: 100%
    }
    .brand-text {
        font-size: 15px
    }
    .brand-text small {
        font-size: 7px
    }
    .hero-home,
    .hero-slide {
        height: 570px
    }
    .hero-copy h1 {
        font-size: 36px;
        letter-spacing: -1.2px
    }
    .hero-copy p {
        font-size: 13px
    }
    .hero-nav {
        bottom: 18px
    }
    @keyframes heroZoomIn {
        0% {
            opacity: 0;
            transform: scale(.94) translateY(12px)
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0)
        }
    }
    .hero-copy.hero-animate {
        animation: heroZoomIn .9s ease both
    }
    .stats-strip {
        margin-top: -18px
    }
    .stat-item {
        padding: 16px 7px
    }
    .stat-item strong {
        font-size: 25px
    }
    .stat-item span {
        font-size: 8px
    }
    .section {
        padding: 56px 0
    }
    .section-head {
        margin-bottom: 27px
    }
    .section-head h2 {
        font-size: 30px
    }
    .image-frame img,
    .image-frame.tall img {
        aspect-ratio: 4/3
    }
    .employee-copy {
        padding: 25px 18px
    }
    .process-grid {
        grid-template-columns: 1fr
    }
    .verification-box {
        padding: 25px 15px
    }
    .verification-form .input-group {
        display: block
    }
    .verification-form .form-control,
    .verification-form .btn {
        width: 100%;
        border-radius: 7px;
        margin-bottom: 7px
    }
    .cta-box {
        padding: 28px 20px
    }
    .cta-box h2 {
        font-size: 24px
    }
    .cta-box .btn {
        margin-bottom: 7px
    }
    .site-footer {
        padding-top: 35px
    }
    .whatsapp-float {
        right: 14px;
        bottom: 14px;
        width: 52px;
        height: 52px
    }
    .page-hero {
        min-height: 290px
    }
    .page-hero h1 {
        font-size: 34px
    }
    .table {
        min-width: 760px
    }
    .industry-table-wrap {
        overflow: auto
    }
    .cert-visual img,
    .client-reference img {
        height: 58px
    }
    .contact-hero-card {
        padding: 27px 20px
    }
    .contact-image {
        min-height: 280px
    }
    .hero-actions .btn {
        width: 100%
    }
}

.lightbox-modal {
    position: fixed;
    inset: 0;
    background: rgba(3, 18, 2, .88);
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 30px;
    opacity: 0;
    transition: .25s
}

.lightbox-modal.show {
    opacity: 1
}

.lightbox-modal img {
    max-width: min(1100px, 94vw);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .4)
}

.lightbox-modal button {
    position: absolute;
    right: 24px;
    top: 20px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 18px
}

.lightbox-modal button:hover {
    background: var(--green);
    border-color: var(--green)
}

/* =========================================================
   GREENTEX PREMIUM REFINEMENT v3
   ========================================================= */
:root {
    --green: #4dab00;
    --green-deep: #2f7600;
    --green-dark: #123d06;
    --green-deeper: #0d2e04;
    --green-soft: #f1f8eb;
    --green-pale: #e5f3da;
    --ink: #173018;
    --muted: #687367;
    --line: #dfe9da;
    --shadow-soft: 0 10px 30px rgba(28, 76, 10, .10);
    --shadow-premium: 0 18px 55px rgba(28, 76, 10, .14);
}

html,
body {
    font-size: 14px
}

body {
    line-height: 1.7
}

.topbar {
    font-size: 14px;
    padding: 6px 0
}

.topbar a {
    font-size: 14px
}

/* Desktop-first navbar: horizontal like the reference, mobile collapses only below lg. */
.main-nav {
    position: sticky;
    top: 0;
    min-height: 72px;
    transition: background .35s ease, box-shadow .35s ease, transform .35s ease
}

.main-nav .container {
    min-height: 72px
}

.navbar-brand {
    flex: 0 0 auto
}

.nav-link {
    font-size: 14px;
    padding: .55rem .48rem !important;
    white-space: nowrap
}

.nav-link i {
    font-size: 10px
}

.nav-cta .btn {
    font-size: 13px;
    padding: 9px 13px
}

.main-nav.scrolled {
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 35px rgba(13, 46, 4, .16)
}

.main-nav.scrolled .container {
    min-height: 60px
}

.main-nav.scrolled .nav-link {
    padding: .42rem .45rem !important
}

.main-nav.scrolled .brand-text {
    font-size: 15px
}

.main-nav.scrolled .brand-text small {
    font-size: 7px
}

.main-nav.scrolled .brand-mark {
    width: 35px;
    height: 35px
}

.navbar-toggler {
    border-color: rgba(47, 118, 0, .25);
    box-shadow: none !important
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 .18rem rgba(77, 171, 0, .15) !important
}

/* Hover dropdown on desktop; no click is required. */
@media(min-width:992px) {
    .main-nav .dropdown-menu {
        top: calc(100% - 2px);
        left: 0;
        margin: 0
    }
    .main-nav .dropdown:hover > .dropdown-menu {
        display: block
    }
    .main-nav .dropdown:hover > .dropdown-link {
        color: var(--green) !important
    }
    .main-nav .dropdown:hover > .dropdown-link i {
        transform: rotate(180deg)
    }
    .main-nav .dropdown-link i {
        transition: transform .25s ease
    }
}

/* Mobile keeps Bootstrap's collapsed navbar and uses click/tap fallback. */
@media(max-width:991.98px) {
    .main-nav,
    .main-nav .container,
    .main-nav.scrolled .container {
        min-height: 64px
    }
    .navbar-brand .brand-mark {
        width: 38px;
        height: 38px
    }
    .navbar-collapse {
        max-height: calc(100vh - 64px);
        overflow-y: auto
    }
    .nav-link {
        font-size: 14px !important;
        padding: .62rem .3rem !important
    }
    .dropdown-menu {
        font-size: 14px
    }
}

/* Every primary section heading stays centered. */
.section-heading,
.section-head,
.section-title-center {
    text-align: center !important
}

.section-heading {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto
}

.section-head h2,
.section-heading h2 {
    font-size: clamp(28px, 3.1vw, 40px);
    margin-top: 8px
}

.section-head p,
.section-heading p {
    font-size: 14px
}

.kicker {
    font-size: 14px;
    letter-spacing: 1.25px
}

/* Green action language throughout the website. */
.btn-green,
.btn-outline-green {
    font-size: 14px
}

.btn-green {
    background: linear-gradient(135deg, #4dab00, #2f7600);
    border-color: #4dab00
}

.btn-green:hover {
    background: linear-gradient(135deg, #2f7600, #164700);
    border-color: #164700
}

.btn-outline-green:hover {
    background: linear-gradient(135deg, #2f7600, #164700)
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 7px;
    background: var(--green);
    color: #fff !important;
    font-size: 14px;
    box-shadow: 0 7px 18px rgba(77, 171, 0, .15)
}

.text-link:hover {
    background: var(--green-deep);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 11px 24px rgba(47, 118, 0, .22);
    letter-spacing: 0
}

/* Smooth universal hover language. */
.media-card,
.blog-card,
.product-card,
.team-card,
.info-panel,
.contact-info,
.mission-card,
.process-card,
.mini-feature,
.industry-table-wrap,
.industry-grid-card,
.check-row,
.step-mini,
.verification-box,
.contact-hero-card,
.contact-image,
.map-placeholder,
.cert-slide,
.inner-logo-card {
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .38s ease, border-color .3s ease, background .3s ease, color .3s ease
}

.media-card:hover,
.blog-card:hover,
.product-card:hover,
.team-card:hover,
.info-panel:hover,
.contact-info:hover,
.mission-card:hover,
.process-card:hover,
.mini-feature:hover,
.industry-grid-card:hover,
.check-row:hover,
.step-mini:hover,
.verification-box:hover,
.contact-hero-card:hover,
.map-placeholder:hover,
.cert-slide:hover,
.inner-logo-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-premium);
    border-color: rgba(77, 171, 0, .35)
}

/* Slider entering effect: scale down first, then settle with a soft reveal. */
.swiper-slide-active .media-card,
.swiper-slide-active .product-card,
.swiper-slide-active .blog-card,
.swiper-slide-active .cert-slide,
.swiper-slide-active .inner-logo-card {
    animation: gtSlideReveal 1.15s cubic-bezier(.2, .75, .2, 1) both
}

@keyframes gtSlideReveal {
    0% {
        opacity: .15;
        transform: scale(.90) translateY(16px)
    }
    65% {
        opacity: 1;
        transform: scale(1.015) translateY(-2px)
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.heroSwiper .swiper-slide-active .hero-copy > * {
    animation: gtHeroElement 1.25s cubic-bezier(.2, .8, .2, 1) both
}

.heroSwiper .swiper-slide-active .hero-copy > *:nth-child(1) {
    animation-delay: .15s
}

.heroSwiper .swiper-slide-active .hero-copy > *:nth-child(2) {
    animation-delay: .28s
}

.heroSwiper .swiper-slide-active .hero-copy > *:nth-child(3) {
    animation-delay: .42s
}

.heroSwiper .swiper-slide-active .hero-copy > *:nth-child(4) {
    animation-delay: .56s
}

@keyframes gtHeroElement {
    0% {
        opacity: 0;
        transform: scale(.88) translateY(24px)
    }
    70% {
        opacity: 1;
        transform: scale(1.01) translateY(-2px)
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

/* Hero controls/counter */
.hero-nav button {
    transition: all .32s ease
}

.hero-nav button:hover {
    background: var(--green);
    border-color: #8fe345;
    box-shadow: 0 8px 25px rgba(77, 171, 0, .35);
    transform: scale(1.08) translateY(-2px)
}

.hero-counter {
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 30px;
    transition: all .32s ease
}

.hero-counter:hover {
    background: rgba(77, 171, 0, .18);
    border-color: rgba(143, 227, 69, .55);
    transform: translateX(4px)
}

.hero-counter .current {
    transition: all .3s ease
}

/* 4:3 visual language for service/product/capability images. */
.media-image img,
.product-image img,
.blog-image img,
.team-image img {
    aspect-ratio: 4/3;
    object-fit: cover
}

.media-image,
.product-image,
.blog-image {
    background: #eaf4e4
}

.media-image:after,
.product-image:after,
.blog-image:after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    pointer-events: none
}

/* Quality & Compliance reference-template feel: compact, image-led cards. */
.compliance-section {
    background: linear-gradient(180deg, #fcfaf6 0%, #f7f8f1 100%)
}

.compliance-section .media-card {
    border: 0;
    box-shadow: 0 8px 26px rgba(46, 74, 24, .13);
    border-radius: 12px
}

.compliance-section .media-body {
    padding: 15px 16px 17px
}

.compliance-section .media-body h3 {
    font-size: 17px
}

.compliance-section .media-body p {
    font-size: 14px
}

.compliance-section .media-image img {
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.compliance-section .media-card:hover .media-image img {
    transform: scale(1.10)
}

.compliance-section .swiper-slide:nth-child(1) .media-card {
    animation-delay: 1s
}

.compliance-section .swiper-slide:nth-child(2) .media-card {
    animation-delay: 1.2s
}

.compliance-section .swiper-slide:nth-child(3) .media-card {
    animation-delay: 1.5s
}

.compliance-section .swiper-slide:nth-child(4) .media-card {
    animation-delay: 1.8s
}

/* Certification slider */
.certSwiper {
    padding: 7px 4px 34px
}

.cert-slide {
    height: 100%;
    min-height: 150px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.cert-slide img {
    width: 100%;
    height: 66px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: transform .45s ease, filter .35s ease
}

.cert-slide strong {
    font-size: 14px;
    color: var(--ink)
}

.cert-slide span {
    font-size: 14px;
    color: var(--muted)
}

.cert-slide:hover img {
    transform: scale(1.08);
    filter: drop-shadow(0 7px 10px rgba(47, 118, 0, .18))
}

/* Centered feature blocks */
.why-card {
    text-align: center
}

.why-icon {
    margin: 0 auto 14px
}

.why-card h3,
.why-card p {
    transition: all .35s ease
}

.why-card:hover h3 {
    transform: translateY(-2px);
    letter-spacing: .2px
}

.process-card {
    text-align: center
}

.process-icon {
    margin: 10px auto 12px
}

.mini-feature {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 7px
}

.mini-feature > i {
    margin: 0 auto
}

/* Committed to Excellence cards */
.excellence-section {
    background: linear-gradient(180deg, #fff 0%, #f8fbf5 100%)
}

.excellence-section .mini-feature {
    min-height: 125px;
    padding: 16px 12px;
    border-radius: 12px
}

.excellence-section .mini-feature strong {
    font-size: 14px
}

.excellence-section .mini-feature small {
    font-size: 14px
}

.excellence-section .standards {
    justify-content: center
}

.standards span,
.badge-soft {
    font-size: 14px
}

/* Bullet/check content hover */
.check-list {
    gap: 8px
}

.check-list span {
    display: block;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    transition: all .3s ease
}

.check-list span:hover {
    background: var(--green-soft);
    border-color: #cfe3c5;
    color: var(--green-deep);
    transform: translateX(5px);
    box-shadow: var(--shadow-soft)
}

.check-list i {
    transition: transform .3s ease
}

.check-list span:hover i {
    transform: scale(1.12) rotate(8deg)
}

/* Inner hero: subtle fixed/parallax feel + elegant green linear overlay. */
.page-hero {
    min-height: 355px;
    background-attachment: fixed;
    background-position: center 42%;
    overflow: hidden
}

.page-hero-overlay {
    background: linear-gradient(105deg, rgba(6, 30, 2, .92) 0%, rgba(17, 64, 5, .72) 48%, rgba(77, 171, 0, .22) 100%);
    transition: opacity .4s ease
}

.page-hero-content {
    animation: gtPageHeroIn 1.15s cubic-bezier(.2, .8, .2, 1) both
}

@keyframes gtPageHeroIn {
    0% {
        opacity: 0;
        transform: scale(.92) translateY(24px)
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.page-hero h1 {
    font-size: clamp(34px, 4vw, 52px)
}

.page-hero p {
    font-size: 14px;
    max-width: 760px
}

.page-hero .breadcrumb {
    display: inline-flex;
    align-items: center;
    margin-top: 9px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(4, 25, 2, .28);
    backdrop-filter: blur(8px);
    border-radius: 30px
}

.page-hero .breadcrumb-item,
.page-hero .breadcrumb-item a {
    font-size: 14px;
    color: #fff
}

.page-hero .breadcrumb-item.active {
    color: #c9f39f
}

.page-hero .breadcrumb-item + .breadcrumb-item:before {
    color: #a6d984
}

/* Inner page content hover */
.section .info-panel,
.section .mission-card,
.section .contact-info,
.section .team-card,
.section .media-card,
.section .product-card {
    will-change: transform
}

.info-panel,
.mission-card {
    position: relative;
    overflow: hidden
}

.info-panel:before,
.mission-card:before,
.contact-info:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green), #9be35d, var(--green-deep));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .38s ease
}

.info-panel:hover:before,
.mission-card:hover:before,
.contact-info:hover:before {
    transform: scaleX(1)
}

.big-icon {
    transition: all .38s ease
}

.info-panel:hover .big-icon {
    transform: translateY(-3px) rotate(-4deg) scale(1.05);
    background: var(--green);
    color: #fff;
    box-shadow: 0 10px 22px rgba(77, 171, 0, .22)
}

/* Calibration capability / related products */
.section .media-image {
    box-shadow: 0 12px 30px rgba(26, 70, 11, .12)
}

.related-section .product-image img {
    aspect-ratio: 4/3;
    min-height: 230px
}

.related-section .product-card {
    box-shadow: 0 10px 30px rgba(26, 70, 11, .11)
}

.related-section .product-card:hover .product-image img {
    transform: scale(1.09)
}

/* Laboratory services centered cards */
.lab-info-panel {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 245px
}

.lab-info-panel .big-icon {
    margin-bottom: 15px
}

.lab-info-panel .text-link {
    margin-top: auto
}

/* Accreditation image treatment */
.accreditationSwiper .media-image img {
    min-height: 250px;
    aspect-ratio: 4/3
}

.accreditationSwiper .media-card {
    box-shadow: 0 14px 38px rgba(24, 67, 10, .13)
}

/* Industries toggle + grid */
.industry-view-toggle {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-bottom: 15px
}

.view-toggle {
    border: 1px solid #cfe0c8;
    background: #fff;
    color: var(--green-deep);
    padding: 8px 13px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    transition: all .3s ease
}

.view-toggle:hover,
.view-toggle.active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    box-shadow: 0 8px 20px rgba(77, 171, 0, .18);
    transform: translateY(-2px)
}

.industry-grid-view {
    display: none
}

.industry-grid-view .industry-grid-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-soft)
}

.industry-grid-img {
    position: relative;
    overflow: hidden
}

.industry-grid-img img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform .7s ease
}

.industry-grid-card:hover .industry-grid-img img {
    transform: scale(1.08)
}

.industry-grid-body {
    padding: 18px
}

.industry-grid-body h3 {
    font-size: 18px;
    font-weight: 900;
    margin: 6px 0
}

.industry-grid-body p,
.industry-grid-body small {
    font-size: 14px;
    color: var(--muted)
}

.industry-grid-body .kicker {
    font-size: 12px
}

body.industry-grid-active .industry-table-wrap > table {
    display: none
}

body.industry-grid-active .industry-grid-view {
    display: block
}

body.industry-grid-active .industry-table-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible
}

/* Client / compliance logo sliders */
.inner-logo-block {
    margin-top: 48px;
    padding: 24px 0 0;
    border-top: 1px solid var(--line)
}

.inner-logo-title {
    text-align: center;
    margin-bottom: 17px
}

.inner-logo-title h3 {
    font-size: 22px;
    font-weight: 900;
    margin: 4px 0
}

.inner-logo-swiper {
    padding: 7px 4px 35px
}

.inner-logo-card {
    height: 105px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    place-items: center;
    padding: 12px;
    box-shadow: var(--shadow-soft)
}

.inner-logo-card img {
    width: 100%;
    height: 76px;
    object-fit: contain;
    transition: transform .4s ease, filter .35s ease
}

.inner-logo-card:hover img {
    transform: scale(1.08);
    filter: drop-shadow(0 6px 10px rgba(47, 118, 0, .16))
}

/* Contact page premium treatment */
.contact-premium {
    background: radial-gradient(circle at 85% 10%, rgba(77, 171, 0, .14), transparent 34%), linear-gradient(135deg, #f2f8ee, #fbfdf9)
}

.contact-hero-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px)
}

.contact-hero-card:after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    right: -80px;
    top: -80px;
    background: rgba(77, 171, 0, .10);
    pointer-events: none
}

.contact-actions .btn {
    min-width: 170px;
    text-align: center
}

.contact-image {
    min-height: 390px
}

.contact-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(7, 32, 3, .76));
    pointer-events: none
}

.contact-info {
    text-align: center;
    padding: 25px 18px
}

.contact-info > i {
    margin: 0 auto 13px;
    transition: .35s
}

.contact-info:hover > i {
    background: var(--green);
    color: #fff;
    transform: scale(1.08) rotate(-5deg)
}

.map-placeholder {
    background: linear-gradient(135deg, #e9f4e3, #fff);
    min-height: 240px;
    border: 1px solid #cfe2c7
}

/* Footer CTA: green-only, layered light/deep gradient */
.cta-section {
    background: #fff
}

.cta-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg, #4dab00 0%, #3c8d00 52%, #1f5c00 100%);
    border-radius: 0;
    padding: 40px 42px;
    box-shadow: 0 -10px 35px rgba(47, 118, 0, .10)
}

.cta-box:before,
.cta-box:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none
}

.cta-box:before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -160px;
    background: rgba(255, 255, 255, .10)
}

.cta-box:after {
    width: 190px;
    height: 190px;
    left: -75px;
    bottom: -130px;
    background: rgba(0, 36, 0, .12)
}

.cta-box > * {
    position: relative;
    z-index: 1
}

.cta-box h2 {
    font-size: 30px
}

.cta-box .btn-light {
    color: var(--green-deep);
    border-color: #fff;
    transition: .3s
}

.cta-box .btn-light:hover {
    background: #dff4cf;
    border-color: #dff4cf;
    transform: translateY(-2px)
}

.cta-box .btn-outline-light:hover {
    background: rgba(255, 255, 255, .16);
    transform: translateY(-2px)
}

/* Footer 5-column layout and social hover */
.site-footer {
    background: linear-gradient(180deg, #071d05 0%, #041304 100%)
}

.site-footer h5 {
    font-size: 14px
}

.site-footer p,
.site-footer a {
    font-size: 14px
}

.social-links a {
    transition: all .3s ease
}

.social-links a:hover {
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 8px 18px rgba(77, 171, 0, .25);
    transform: translateY(-4px) scale(1.04)
}

/* Minimum readable text size across content areas */
.media-body p,
.blog-body p,
.product-body p,
.team-body p,
.info-panel p,
.mission-card p,
.contact-info p,
.contact-info a,
.check-row p,
.step-mini p,
.industry-grid-body p,
.industry-grid-body small,
.process-card p,
.why-card p,
.mini-feature small,
.employee-copy p {
    font-size: 14px
}

@media(max-width:991.98px) {
    .page-hero {
        background-attachment: scroll;
        min-height: 310px
    }
    .cta-box {
        padding: 34px 25px
    }
}

@media(max-width:575.98px) {
    .topbar {
        font-size: 14px
    }
    .brand-text {
        font-size: 14px
    }
    .hero-copy h1 {
        font-size: 35px
    }
    .hero-copy p {
        font-size: 14px
    }
    .section {
        padding: 58px 0
    }
    .section-head h2,
    .section-heading h2 {
        font-size: 29px
    }
    .industry-view-toggle {
        justify-content: center
    }
    .cta-box {
        padding: 30px 18px
    }
    .cta-box h2 {
        font-size: 25px
    }
    .contact-actions .btn {
        width: 100%
    }
    .page-hero .breadcrumb {
        max-width: 100%;
        flex-wrap: wrap
    }
}

/* Final interaction polish */
@keyframes gtHeroElement {
    0% {
        opacity: 0;
        transform: scale(1.08) translateY(18px)
    }
    70% {
        opacity: 1;
        transform: scale(.995) translateY(-1px)
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

@keyframes gtSlideReveal {
    0% {
        opacity: .15;
        transform: scale(1.08) translateY(12px)
    }
    70% {
        opacity: 1;
        transform: scale(.995) translateY(-2px)
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.hero-copy.hero-animate {
    animation: gtHeroElement 1.2s cubic-bezier(.2, .8, .2, 1) both
}

.section ul:not(.navbar-nav):not(.dropdown-menu):not(.breadcrumb) li {
    transition: all .3s ease;
    border-radius: 7px;
    padding: 3px 7px
}

.section ul:not(.navbar-nav):not(.dropdown-menu):not(.breadcrumb) li:hover {
    background: var(--green-soft);
    color: var(--green-deep);
    transform: translateX(5px);
    box-shadow: 0 6px 18px rgba(47, 118, 0, .08)
}

.inner-logo-title p {
    font-size: 14px;
    color: var(--muted);
    margin: 3px 0 0
}

@media(max-width:991.98px) {
    .page-hero {
        background-attachment: scroll
    }
}

/* Typography floor: all visible text is at least 14px (icons remain optically sized). */
.brand-text small,
.hero-counter,
.stat-item span,
.view-chip,
.text-link,
.product-tag,
.blog-date,
.step-mini > span,
.share-row,
.site-footer .footer-bottom,
.site-footer h5,
.site-footer p,
.site-footer a {
    font-size: 14px
}

.eyebrow {
    font-size: 14px
}

.image-client-logo {
    height: 105px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    place-items: center;
    padding: 12px;
    box-shadow: var(--shadow-soft);
    transition: all .35s ease
}

.image-client-logo img {
    width: 100%;
    height: 75px;
    object-fit: contain;
    transition: transform .4s ease, filter .35s ease
}

.image-client-logo:hover {
    border-color: var(--green);
    box-shadow: var(--shadow-premium);
    transform: translateY(-5px)
}

.image-client-logo:hover img {
    transform: scale(1.08);
    filter: drop-shadow(0 6px 10px rgba(47, 118, 0, .16))
}

.relatedSwiper .product-image img,
.related-section .product-image img {
    min-height: 230px;
    aspect-ratio: 4/3;
    object-fit: cover
}

.relatedSwiper .product-card {
    box-shadow: 0 12px 34px rgba(26, 70, 11, .12)
}

.relatedSwiper .product-card:hover {
    box-shadow: 0 20px 48px rgba(26, 70, 11, .18)
}

.calibration-capability .media-image img {
    min-height: 245px
}