:root {
    --red: #c8161d;
    --red2: #a80f15;
    --ink: #000;
    --mut: #000;
    --bg: #f8fafc;
    --line: #e8edf3;
    --pink: #fdecec;
    --red-dark: #a80f15;
    --primary: #c8161d;
    --accent: #e53935;
    --accent-glow: #c8161d59;
    --dark: #1b1b1d;
    --body: #000;
    --text: #000;
    --muted: #7a7a80;
    --soft: #f1f3f7;
    --border-color: #e8edf3;
    --radius: 12px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --heading-font: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --plp-red: #c8161d;
    --plp-red-dark: #b82b1f;
    --plp-ink: #1b1b1d;
    --plp-muted: #7a7a80;
    --plp-line: #e3e3e6;
    --plp-tile: #efeff1;
    --plp-bg: #f7f7f8;
    --plp-font: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --plp-mono: var(--plp-font);
    --plp-accent: #d9381e;
    --plp-sticky-top: 90px
}

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

html {
    scroll-behavior: smooth
}

body {
    color: var(--ink);
    background: #fff;
    font-family: Poppins, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5
}

a {
    color:#000;
    text-decoration: none
}

button {
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0
}

.wrap {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 20px
}

h1,
h2,
h3 {
    font-weight: 600
}

.red {
    color: var(--red)
}

.tag {
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red);
    font-size: 13px;
    font-weight: 700
}

.top {
    background: var(--red);
    color: #fff;
    font-size: 16px
}

.top .wrap {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    display: flex
}

.top b {
    margin-right: 12px;
    font-weight: 600
}

.top span {
    opacity: .92;
    font-size: 14px
}

.top .r {
    align-items: center;
    gap: 16px;
    display: flex
}

.iso {
    font-size: 13px;
    font-weight: 600
}

header {
    z-index: 49;
    background: #fff;
    position: sticky;
    top: 0;
    box-shadow: 0 4px 8px #0000000f, 0 6px 20px #0000001a
}

header .wrap {
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    display: flex;
    position: relative
}

.logo {
    border-radius: 5px;
    padding: 6px 0 14px;
    position: relative
}

.logo img {
    width: 260px
}

.logo sup {
    color: var(--ink);
    font-size: 16px;
    position: absolute;
    top: -8px;
    right: -12px
}

nav {
    gap: 6px;
    display: flex
}

nav a {
    white-space: nowrap;
    color: #000;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 500
}

nav a.on {
    background: var(--pink);
    color: var(--red);
    border-bottom: 2px solid var(--red);
    font-weight: 700
}

.acts {
    align-items: center;
    gap: 8px;
    display: flex
}

.menu {
    background: var(--pink);
    border: 1px solid #f3c7c9;
    border-radius: 10px;
    flex-direction: column;
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 36px;
    height: 36px;
    display: none
}

.menu span {
    background: var(--red);
    border-radius: 2px;
    width: 18px;
    height: 2px;
    transition: all .3s
}

.menu.open span:first-child {
    transform: translateY(7px)rotate(45deg)
}

.menu.open span:nth-child(2) {
    opacity: 0
}

.menu.open span:nth-child(3) {
    transform: translateY(-3px)rotate(-45deg)
}

.mob-cta {
    display: none
}

.btn {
    background: var(--red);
    color: #fff;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    box-shadow: 0 8px 18px -8px #c8161db3
}

.btn:hover {
    background: var(--red2)
}

.wa {
    /* border: 1px solid var(--line); */
    /* background: #eef3f9; */
    border-radius: 8px;
    align-items: center;
    gap: 7px;
    padding: 8px 8px;
    font-size: 14px;
    font-weight: 600;
    display: flex
}

.user {
    background: var(--pink);
    width: 30px;
    height: 30px;
    color: var(--red);
    border: 1px solid #f3c7c9;
    border-radius: 50%;
    place-items: center;
    font-size: 16px;
    display: grid
}

.hero {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
    border-radius: 24px;
    height: clamp(200px, 34vw, 600px);
    margin: 16px auto 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px -18px #0f172a40
}

.hero.drag {
    cursor: grabbing
}

.htrk {
    will-change: transform;
    height: 100%;
    transition: transform .5s;
    display: flex
}

.hero.drag .htrk {
    transition: none
}

.hs {
    flex-direction: column;
    flex: 0 0 100%;
    justify-content: center;
    height: 100%;
    padding: 0 clamp(48px, 9vw, 70px);
    display: flex;
    box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030
}

.hs:first-child {
    background: url(/assets/images/slider1.jpg) 0 0/cover no-repeat
}

.hs:nth-child(2) {
    background: url(/assets/images/slider2.jpg) 0 0/cover no-repeat
}

.hs:nth-child(3) {
    background: url(/assets/images/slider3.jpg) 0 0/cover no-repeat
}

.hs h1,
.hs h2 {
    max-width: 560px;
    margin: 0;
    font-size: clamp(22px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.15
}

.hs p {
    color: var(--mut);
    max-width: 480px;
    margin-top: 10px;
    font-size: 16px
}

.arr {
    z-index: 3;
    background: #fff;
    border-radius: 50%;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 18px;
    line-height: 1;
    display: grid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 12px #0f172a26
}

.arr.l {
    left: 14px
}

.arr.r {
    right: 14px
}

.hdots {
    z-index: 3;
    gap: 6px;
    display: flex;
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translate(-50%)
}

.hdots i {
    cursor: pointer;
    background: #fff;
    border-radius: 8px;
    width: 8px;
    height: 8px;
    transition: all .3s;
    box-shadow: 0 1px 4px #00000040
}

.hdots i.on {
    background: var(--red);
    width: 26px
}

.stats {
    background: #fff;
    border-radius: 18px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 36px;
    display: grid;
    box-shadow: 0 10px 30px -14px #0f172a2e
}

.stats div {
    text-align: center;
    border-right: 1px solid var(--line);
    padding: 22px 10px
}

.stats div:last-child {
    border: 0
}

.stats strong {
    color: var(--red);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    display: block
}

.stats strong small {
    font-size: 16px
}

.stats strong em {
    color: var(--ink);
    font-style: normal
}

.stats b {
    margin-top: 4px;
    font-size: 16px;
    display: block
}

.stats span {
    color: var(--mut);
    font-size: 15px
}

span.cnt {
    font-size: 28px
}

.find {
    text-align: center;
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    padding: 40px 0
}

.find h2 {
    font-size: 30px;
    font-weight: 700
}

.find p {
    color: #000;
    max-width: 430px;
    margin: 8px auto 22px;
    font-size: 16px
}

.sbox {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    align-items: center;
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
    padding: 8px;
    display: flex;
    box-shadow: 0 12px 30px -14px #0f172a40
}

.sbox span {
    color: var(--red);
    padding-left: 10px
}

.sbox input {
    font: inherit;
    border: 0;
    outline: 0;
    flex: 1;
    font-size: 15px
}

.sbox button {
    background: var(--red);
    color: #fff;
    border-radius: 9px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 700
}

.pop {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 16px;
    display: flex
}

.pop b {
    color: var(--red);
    letter-spacing: .06em;
    margin-right: 4px;
    font-size: 13px
}

.pop a {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 20px;
    padding: 5px 12px;
    font-weight: 500
}

.about {
    padding: 70px 0 50px
}

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

.about_usimage {
    background-image: url(/assets/images/digital-multimeters.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 20px;
    height: 478px;
    position: relative;
    overflow: hidden
}

.photo {
    background-image: url(/assets/images/kusam_meco-image.png);
    background-size: cover;
    border-radius: 20px;
    height: 540px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px -18px #0f172a66
}

.photo .sign {
    background: var(--red);
    color: #fff;
    letter-spacing: -.03em;
    text-align: center;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 20px;
    font-weight: 800;
    display: none;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-10%)
}

.photo .sign small {
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 500;
    display: block
}

.photo .desk {
    background: #d9d5d0;
    position: absolute;
    left: 0;
    right: 0
}

.chips {
    gap: 12px;
    display: flex;
    position: absolute;
    bottom: 14px;
    left: 20px;
    right: 20px
}

.chips div {
    border-left: 4px solid var(--red);
    color: var(--red);
    text-transform: uppercase;
    background: #fff;
    border-radius: 10px;
    flex: 1;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700
}

.chips div b {
    color: var(--ink);
    text-transform: none;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 600;
    display: block
}

.about h2 {
    margin: 8px 0 14px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4
}

.about .tag:before {
    content: "";
    background: var(--red);
    vertical-align: middle;
    width: 22px;
    height: 2px;
    margin-right: 8px;
    display: inline-block
}

.about p {
    color: #000;
    font-size: 16px;
    line-height: 1.75
}

.vm {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
    display: grid
}

.flip {
    perspective: 900px;
    cursor: pointer;
    height: 260px
}

.flip .in {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s;
    position: relative
}

.flip.f .in {
    transform: rotateY(180deg)
}

.face {
    backface-visibility: hidden;
    border: 1px solid var(--line);
    border-top: 2px solid var(--red);
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    border-radius: 14px;
    flex-direction: column;
    padding: 18px;
    display: flex;
    position: absolute;
    inset: 0
}

.face.b {
    background: var(--red);
    color: #fff;
    justify-content: center;
    transform: rotateY(180deg)
}

.face .ic {
    background: var(--pink);
    width: 30px;
    height: 30px;
    color: var(--red);
    border: 1px solid #f3c7c9;
    border-radius: 8px;
    place-items: center;
    margin-bottom: 12px;
    font-size: 16px;
    display: grid
}

.face h3 {
    margin-bottom: 6px;
    font-size: 16px
}

.face p {
    color: #000;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5
}

.face.b p {
    color: #fff
}

.face .ck {
    color: var(--red);
    text-transform: uppercase;
    margin-top: auto;
    font-size: 13px;
    font-weight: 700
}

.more {
    color: var(--red);
    margin-top: 18px;
    font-size: 16px;
    font-weight: 700;
    display: inline-block
}

.cats {
    background: var(--bg);
    padding: 50px 0 60px
}

.head {
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 26px;
    display: flex
}

.head h2 {
    font-weight: 700;
    line-height: 1.1;
    font-size: 30px !important
}

.head p {
    color: var(--mut);
    margin-top: 10px;
    font-size: 16px
}

.ghost {
    color: var(--red);
    text-transform: uppercase;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #f0c3c5;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700
}

.grid4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    display: grid
}

.cat {
    background: #fff;
    border-radius: 18px;
    flex-direction: column;
    min-height: 250px;
    padding: 22px;
    transition: all .25s;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px -16px #0f172a33
}

@media (hover:hover) {
    .flip:hover .in {
        transform: rotateY(180deg)
    }
}

.cat:hover {
    border-color: #f0c3c5;
    transform: translateY(-4px) !important
}

.cat .ic {
    background: var(--pink);
    width: 48px;
    height: 48px;
    color: var(--red);
    border-radius: 50%;
    flex: none;
    place-items: center;
    margin-bottom: 16px;
    font-size: 22px;
    display: grid
}

.cat small {
    color: var(--red);
    letter-spacing: .04em;
    font-size: 14px;
    font-weight: 700
}

.cat h3 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 2px 0 6px;
    font-size: 18px;
    display: -webkit-box;
    overflow: hidden
}

.cat p {
    color: var(--mut);
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.55
}

.cat .ex {
    color: var(--red);
    border-top: 1px solid var(--line);
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.feat {
    padding: 40px 0 50px
}

.feat .head h2 {
    font-size: 30px
}

.pill {
    background: var(--pink);
    color: var(--red);
    text-transform: uppercase;
    border: 1px solid #f3c7c9;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700
}

.grid3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    display: grid
}

.prod {
    border: 1px solid var(--line);
    border-radius: 18px;
    flex-direction: column;
    padding: 12px;
    display: flex;
    box-shadow: 0 4px 8px #00000014, 0 6px 20px #00000021
}

.prod:hover {
    border: 1px solid #c8161d;
    transform: translateY(-4px)
}

.pimg {
    text-align: center
}

.pimg img {
    height: 250px;
    margin: 0 auto
}

.pimg .n {
    background: var(--red);
    color: #fff;
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 13px;
    font-weight: 700;
    position: absolute;
    top: 10px;
    left: 10px
}

.pimg .n.d {
    background: var(--ink)
}

.pimg .b {
    color: var(--red);
    text-transform: uppercase;
    background: #fff;
    border: 1px solid #f3c7c9;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 700;
    position: absolute;
    top: 10px;
    right: 10px
}

.dev {
    background: linear-gradient(#f28b1f, #c9680d);
    border: 3px solid #333;
    border-radius: 10px;
    width: 56px;
    height: 120px;
    display: none;
    position: relative
}

.dev:after {
    content: "";
    background: #d8e4cf;
    border-radius: 3px;
    height: 28px;
    position: absolute;
    top: 10px;
    left: 6px;
    right: 6px
}

.dev.g {
    background: linear-gradient(#444, #1c1c1c);
    width: 34px;
    height: 110px
}

.dev.g:after {
    background: #66d17a;
    height: 16px
}

.prod .m {
    color: var(--red);
    letter-spacing: .06em;
    margin: 0 8px;
    font-size: 13px;
    font-weight: 700
}

.prod h3 {
    margin: 2px 8px 4px;
    font-size: 15.65px;
    line-height: 1.55
}

.prod p {
    color: var(--mut);
    margin: 0 8px 10px;
    font-size: 15px;
    display:none;
}
.prod .btn::after{
    animation:none;
}

.tags {
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 8px 14px;
    display: none;
}

.tags span {
    color: #475569;
    text-transform: uppercase;
    background: #eef2f7;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 700
}

.tags span:first-child {
    background: var(--pink);
    color: var(--red)
}

.prod .btn {
    text-align: center;
    border-radius: 9px;
    margin-top: auto
}

.sec {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    padding: 50px 0 60px
}

.sec .head h2 {
    font-size: 25px
}

.sgrid {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 16px;
    height: 500px;
    display: grid
}

.big {
    color: #fff;
    background: linear-gradient(135deg, #b3141a 40%, #c8161d 60%, #1a0508 100%);
    border-radius: 20px;
    flex-direction: column;
    grid-row: 1/3;
    padding: 26px;
    transition: all .3s;
    display: flex;
    box-shadow: 0 24px 40px -20px #780a0f99
}

.big .pl {
    letter-spacing: .06em;
    background: #00000059;
    border-radius: 20px;
    align-self: flex-start;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700
}

.big h3 {
    max-width: 300px;
    margin: 34px 0 14px;
    font-size: 24px;
    line-height: 1.2
}

.big p {
    opacity: .92;
    max-width: 330px;
    font-size: 16px;
    line-height: 1.7
}

.big .ft {
    border-top: 1px solid #fff3;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.sc {
    border: 1px solid var(--line);
    border-top: 2px solid var(--red);
    cursor: pointer;
    background: #fff;
    border-radius: 16px;
    flex-direction: column;
    padding: 16px 18px;
    transition: all .25s;
    display: flex
}

.sc:hover,
.sc.on {
    border-color: var(--red);
    box-shadow: 0 14px 28px -16px #c8161d73
}

.sc small {
    color: var(--red);
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.sc h3 {
    margin: 6px 0 4px;
    font-size: 16px
}

.sc p {
    color: var(--mut);
    font-size: 13px;
    line-height: 1.5
}

.sc .vs {
    color: var(--red);
    justify-content: space-between;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.testi {
    text-align: center;
    padding: 20px 0 30px
}

.testi .tag {
    background: var(--pink);
    border: 1px solid #f3c7c9;
    border-radius: 20px;
    padding: 4px 12px;
    display: inline-block
}

.testi h2 {
    margin: 8px 0 4px;
    font-size: 28px;
    font-weight: 700
}

.testi>.wrap>p {
    color: var(--mut);
    font-size: 16px
}

.tg {
    text-align: left;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 28px;
    display: grid
}

.tc {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    border-radius: 16px;
    flex-direction: column;
    padding: 20px;
    display: flex
}

.tc .st {
    color: #f5a623;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-size: 16px
}

.tc q {
    color: #475569;
    quotes: "“" "”";
    font-size: 16px;
    font-style: italic;
    line-height: 1.65
}

.tc .w {
    border-top: 1px solid var(--line);
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    display: flex
}

.tc .w i {
    background: var(--red);
    color: #fff;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    display: grid
}

.tc .w b {
    font-size: 16px;
    line-height: 1.3;
    display: block
}

.apps {
    text-align: center;
    padding: 15px 0 50px
}

.apps h2 {
    font-size: 30px;
    font-weight: 700
}

.apps>.wrap>p {
    color: var(--mut);
    margin-top: 8px;
    font-size: 16px
}

.car {
    margin: 28px 0 18px;
    padding: 0 52px;
    position: relative
}

.car .arr.l {
    left: 0
}

.car .arr.r {
    right: 0
}

.vp {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
    padding: 18px 0 20px;
    overflow: hidden
}

.vp.drag {
    cursor: grabbing
}

.trk {
    will-change: transform;
    gap: 14px;
    transition: transform .45s;
    display: flex
}

.vp.drag .trk {
    transition: none
}

.ac {
    border: 1px solid var(--line);
    text-align: center;
    background: #fff;
    border-radius: 16px;
    flex-direction: column;
    flex: none;
    height: 320px;
    transition: all .3s;
    display: flex;
    overflow: hidden;
    box-shadow: 0 8px 20px -14px #0f172a4d
}

.ac .im {
    color: #777;
    text-align: left;
    background: #eff2f7;
    flex: 1;
    padding: 4px 8px;
    font-size: 16px
}

.ac .tx {
    padding: 24px 6px 12px;
    position: relative
}

.ac .tx i {
    background: var(--red);
    color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-style: normal;
    display: none;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translate(-50%)
}

.ac b {
    font-size: 16px;
    display: block
}

.ac span {
    color: var(--mut);
    font-size: 13px
}

.ac.on {
    border: 1.5px solid var(--red);
    transform: translateY(-8px);
    box-shadow: 0 14px 28px -12px #c8161d59
}

.dots {
    justify-content: center;
    gap: 6px;
    margin-bottom: 36px;
    display: flex
}

.dots i {
    cursor: pointer;
    background: #d6dce5;
    border-radius: 8px;
    width: 8px;
    height: 8px
}

.dots i.on {
    background: var(--red);
    border-radius: 8px;
    width: 22px
}

.apps .ghost {
    border-color: var(--red)
}

.deal {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    border-bottom: 1px solid #f0c3c5;
    padding: 50px 0 60px
}

.dc {
    border-left: 7px solid var(--red);
    background: #fff;
    border-radius: 22px;
    grid-template-columns: 1.45fr 1fr;
    display: grid;
    overflow: hidden;
    box-shadow: 0 20px 40px -22px #0f172a59
}

.dl {
    padding: 20px 18px
}

.dl .tag:before {
    content: "";
    background: var(--red);
    vertical-align: middle;
    width: 22px;
    height: 2px;
    margin-right: 8px;
    display: inline-block
}

.dl h2 {
    margin: 6px 0 0;
    font-size: 30px;
    font-weight: 700
}

.dl p {
    color: #000;
    max-width: 470px;
    font-size: 16px;
    line-height: 1.75
}

.pts {
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    display: flex
}

.pts span:before {
    content: "◯";
    color: var(--red);
    margin-right: 6px;
    font-size: 13px
}

.dr {
    background: var(--red);
    color: #fff;
    text-align: center;
    padding: 34px 36px;
    position: relative;
    overflow: hidden
}

.dr:before,
.dr:after {
    content: "";
    border: 14px solid #ffffff14;
    border-radius: 50%;
    position: absolute
}

.dr:before {
    width: 150px;
    height: 150px;
    top: -50px;
    right: -30px
}

.dr:after {
    width: 130px;
    height: 130px;
    bottom: -40px;
    left: -20px
}

.dr>* {
    position: relative
}

.dr .ic {
    width: 44px;
    height: 44px;
    color: var(--red);
    background: #fff;
    border-radius: 12px;
    place-items: center;
    margin: 0 auto 16px;
    font-size: 18px;
    display: grid
}

.dr h3 {
    font-size: 20px
}

.dr p {
    margin: 6px 0 16px;
    font-size: 16px
}

.dr .wb {
    color: var(--red);
    text-transform: uppercase;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    display: block
}

.dr small {
    margin-top: 12px;
    font-size: 16px;
    display: block
}

@media (width<=1180px) {
    .menu {
        display: flex
    }

    .acts .wa,
    .acts .btn.q {
        display: none
    }

    nav {
        border-bottom: 1px solid var(--line);
        z-index: 60;
        background: #fff;
        flex-direction: column;
        gap: 2px;
        padding: 12px 20px 18px;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: 0 20px 30px -18px #0f172a4d
    }

    nav.open {
        display: flex
    }

    nav a {
        padding: 12px 14px
    }

    nav a.on {
        border-bottom: 0;
        border-left: 3px solid var(--red)
    }

    .mob-cta {
        gap: 10px;
        margin-top: 10px;
        display: flex
    }

    .mob-cta .btn,
    .mob-cta .wa {
        text-align: center;
        flex: 1;
        justify-content: center;
        min-width: 160px
    }

    header .wrap {
        justify-content: space-between
    }

    .acts {
        margin-left: auto
    }
}

@media (width<=980px) {
    .top .r span.lab {
        display: none
    }

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

    .about .wrap,
    .dc,
    .grid3 {
        grid-template-columns: 1fr
    }

    .sgrid {
        grid-template-columns: 1fr;
        height: auto
    }

    .big {
        grid-row: auto
    }

    .head {
        flex-direction: column;
        align-items: flex-start
    }

    .stats div:nth-child(2) {
        border-right: 0
    }

    .stats div:nth-child(-n+2) {
        border-bottom: 1px solid var(--line)
    }
}

@media (width<=640px) {
    .top .r {
        display: none
    }

    /* .grid4,
    .tg,
    .stats,
    .vm {
        grid-template-columns: 1fr
    } */

    .stats div {
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .about h2,
    .head h2,
    .apps h2 {
        font-size: 26px
    }

    .photo {
        height: 300px
    }

    .chips {
        flex-direction: column
    }

    .flip {
        height: 230px
    }

    .hs {
        padding: 0 44px
    }

    .arr {
        width: 32px;
        height: 32px
    }

    .hero .arr.l {
        left: 6px
    }

    .hero .arr.r {
        right: 6px
    }

    .car {
        padding: 0 40px
    }

    .dl,
    .dr {
        padding: 28px 22px
    }

    .logo {
        font-size: 16px
    }
}

footer {
    color: #111;
    background: #fff;
    border-top: 1px solid #ddd;
    font-size: 16px
}

footer .fw {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 20px
}

.lg img {
    width: 100%
}

.fprod {
    border-bottom: 1px solid #ccc;
    padding: 22px 0 24px
}

.fp-h {
    cursor: pointer;
    text-align: left;
    color: #111;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    display: flex
}

.fp-h .ch {
    color: var(--red);
    font-size: 18px;
    transition: all .3s
}

.fprod.shut .ch {
    transform: rotate(180deg)
}

.fprod.shut .fp-grid {
    display: none
}

.fp-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 38px;
    padding-left: 9px;
    display: grid
}

.fp-col {
    flex-direction: column;
    gap: 6px;
    max-width: 254px;
    display: flex
}

.fp-it {
    color: #b8232a;
    text-transform: uppercase;
    cursor: pointer;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 10px 14px 10px 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    display: flex
}

.fp-it i {
    color: var(--red);
    flex: none;
    font-size: 14px;
    font-style: normal
}

.fmain {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 22px 0 20px;
    display: grid
}

.fmain h4 {
    color: #111;
    margin: 2px 0 12px;
    font-size: 16px;
    font-weight: 700
}

.finfo {
    padding-left: 9px
}

.flogo {
    margin-bottom: 10px;
    display: inline-block
}

.flogo small {
    text-align: center;
    border-bottom: 3px solid var(--red);
    color: #111;
    margin-top: 6px;
    padding-bottom: 0;
    font-size: 12px;
    line-height: 1.1;
    display: block
}

.flogo sup {
    color: #111;
    font-size: 14px
}

.finfo p {
    color: #111;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 23px
}

.finfo p b {
    font-weight: 700
}

.chan {
    text-transform: uppercase;
    border: 1px solid #f0a347;
    border-radius: 30px;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex
}

.map {
    background: #e8e8e8;
    border: 0;
    width: 100%;
    height: 314px;
    display: block
}

.fbot {
    border-top: 1px solid #ccc;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 11px 0 12px;
    font-size: 14px;
    display: grid
}

.fbot span:last-child {
    padding-left: 0
}

.fbot,
.finfo {
    font-size: 14px
}

.fab {
    z-index: 70;
    position: fixed
}

.enq {
    writing-mode: vertical-rl;
    color: #fff;
    letter-spacing: .16em;
    background: #a8262d;
    border-radius: 8px 0 0 8px;
    padding: 20px 8px;
    top: 333px;
    left: 0;
    transform: rotate(180deg);
    box-shadow: 0 4px 12px #00000040;
    font-size: 13px !important
}

.wapp {
    color: #fff;
    background: #25d366;
    border-radius: 50%;
    place-items: center;
    width: 46px;
    height: 46px;
    font-size: 24px;
    display: grid;
    top: 530px;
    right: 4px;
    box-shadow: 0 4px 12px #00000040
}

.totop {
    color: #fff;
    background: #a8262d;
    border-radius: 50%;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 18px;
    display: grid;
    bottom: 70px;
    right: 10px;
    box-shadow: 0 4px 12px #00000040
}

@media (width<=980px) {
    .fp-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .fmain {
        grid-template-columns: 1fr 1fr
    }

    .finfo {
        grid-column: 1/-1
    }
}

@media (width<=640px) {

    .fp-grid,
    .fmain,
    .fbot {
        grid-template-columns: 1fr
    }

    .fp-col {
        max-width: none
    }

    .fp-grid {
        padding-left: 0
    }

    .enq {
        top: auto;
        bottom: 140px
    }

    .wapp {
        top: auto;
        bottom: 260px
    }

    .totop {
        bottom: 70px
    }

    .map {
        height: 260px
    }
}

.pvp {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
    margin: 0 -12px;
    padding: 10px 12px 30px;
    overflow: hidden
}

.pvp.drag {
    cursor: grabbing
}

.ptrk {
    will-change: transform;
    gap: 20px;
    transition: transform .5s;
    display: flex
}

.pvp.drag .ptrk {
    transition: none
}

.ptrk .prod {
    background: #fff;
    flex: none;
    position: relative
}

.ptrk .pimg {
    position: relative
}

.ptrk .pimg img {
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    max-width: 100%;
    height: 250px;
    margin: 0 auto;
    display: block
}

.pnav {
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    display: flex
}

.parr {
    border: 1px solid var(--line);
    width: 42px;
    height: 42px;
    color: var(--ink);
    background: #fff;
    border-radius: 50%;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    transition: all .2s;
    display: grid;
    box-shadow: 0 4px 12px #0f172a1f
}

.parr:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red)
}

.pdots {
    align-items: center;
    gap: 7px;
    display: flex
}

.pdots i {
    cursor: pointer;
    background: #d6dce5;
    border-radius: 8px;
    width: 8px;
    height: 8px;
    transition: all .3s
}

.pdots i.on {
    background: var(--red);
    width: 22px
}

.sgrid {
    height: 420px
}

.sx {
    perspective: 1000px;
    cursor: pointer
}

.sx-big {
    grid-row: 1/3
}

.sx .sin {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.4, .2, .2, 1);
    position: relative
}

@media (hover:hover) {
    .sx:hover .sin {
        transform: rotateY(180deg)
    }
}

.sx.f .sin {
    transform: rotateY(180deg)
}

.sf {
    backface-visibility: hidden;
    border-radius: 18px;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.sf.fr {
    border: 1px solid var(--line);
    border-top: 2px solid var(--red);
    background: #fff;
    flex-direction: column;
    padding: 16px 18px;
    display: flex;
    box-shadow: 0 8px 24px -16px #0f172a40
}

.sf.fr small {
    color: var(--red);
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.sf.fr h3 {
    margin: 6px 0 4px;
    font-size: 16px
}

.sf.fr p {
    color: var(--mut);
    font-size: 14px;
    line-height: 1.5
}

.sf.fr .vs {
    color: var(--red);
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.sx-big .sf.fr {
    color: #fff;
    background: linear-gradient(135deg, #b3141a 40%, #c8161d 60%, #1a0508 100%);
    border: 0;
    padding: 26px;
    box-shadow: 0 24px 40px -20px #780a0f99
}

.sx-big .sf.fr h3 {
    max-width: 320px;
    margin: 34px 0 14px;
    font-size: 24px;
    line-height: 1.2
}

.sx-big .sf.fr p {
    color: #fff;
    opacity: .92;
    max-width: 340px;
    font-size: 16px;
    line-height: 1.7
}

.sx-big .sf.fr .ft {
    border-top: 1px solid #fff3;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.sf .pl {
    letter-spacing: .06em;
    color: #fff;
    background: #00000059;
    border-radius: 20px;
    align-self: flex-start;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700
}

.sf.bk {
    border: 2px solid var(--red);
    background-color: #2b2f36;
    background-position: 50%;
    background-size: cover;
    transform: rotateY(180deg)
}

.sf.bk:before {
    content: "";
    background: linear-gradient(#0000000d 40%, #000000c7);
    position: absolute;
    inset: 0
}

.sf.bk .cap {
    color: #fff;
    padding: 16px 18px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.sf.bk .cap .pl {
    background: var(--red);
    display: inline-block
}

.sf.bk .cap h3 {
    margin-top: 8px;
    font-size: 16px
}

.sx-big .sf.bk .cap h3 {
    font-size: 24px
}

@media (width<=980px) {
    .sgrid {
        grid-template-rows: none;
        grid-template-columns: repeat(2, 1fr);
        height: auto
    }

    .sx {
        height: 240px
    }

    .sx-big {
        grid-area: auto/1/auto/-1;
        height: 350px
    }
}

@media (width<=640px) {
    .sgrid {
        grid-template-columns: 1fr
    }
}

.ac .im {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.kf-top {
    border-bottom: 1px solid #e5e5e5;
    grid-template-columns: 1fr 1.1fr 1.1fr;
    padding: 40px 0 20px;
    display: grid
}

.kf-top>div {
    padding: 0 32px
}

.kf-top>div:first-child {
    padding-left: 0
}

.kf-top>div+div {
    border-left: 1px solid #e5e5e5
}

.kf h4 {
    letter-spacing: .02em;
    color: var(--red);
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700
}

.kf h5 {
    color: #111;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700
}

.kf-contact h5 {
    color: #0b2a5b;
    margin-bottom: 2px
}

.kf-iso {
    color: #d9480f;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    display: block
}

.kf-about .flogo {
    max-width: 240px;
    margin-bottom: 16px
}

.kf-about p {
    color: #000;
    font-size: 14px;
    line-height: 1.7
}

.kf-form {
    max-width: 380px;
    display: flex
}

.kf-form input {
    min-width: 0;
    height: 40px;
    font: inherit;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-right: 0;
    outline: 0;
    flex: 1;
    padding: 0 12px;
    font-size: 13px
}

.kf-form button {
    background: var(--red);
    color: #fff;
    letter-spacing: .04em;
    white-space: nowrap;
    height: 40px;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 700
}

.kf-form button:hover {
    background: var(--red2)
}

.kf-ack {
    color: #333;
    align-items: flex-start;
    gap: 8px;
    max-width: 380px;
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
    display: flex
}

.kf-ack input {
    flex: none;
    margin-top: 3px
}

.kf-ack a {
    text-decoration: underline
}

.kf-dl {
    border: 1px solid var(--red);
    color: var(--red);
    border-radius: 3px;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    transition: all .2s;
    display: inline-flex
}

.kf-dl:hover {
    background: var(--red);
    color: #fff
}

.kf-addr {
    margin-bottom: 10px
}

.kf-addr b {
    color: #000;
    font-size: 14px
}

.kf-addr p {
    color: #111;
    margin: 2px 0 4px;
    font-size: 14px;
    line-height: 1.6
}

.kf-dir {
    color: #0b2a5b;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex
}

.kf-dir i,
.kf-dir:hover {
    color: var(--red)
}

.kf-line {
    color: #111;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.6
}

.kf-line i {
    color: var(--red);
    width: 18px
}

.kf-soc {
    gap: 16px;
    margin-top: 16px;
    display: flex
}

.kf-soc a {
    font-size: 20px;
    transition: all .2s
}

.kf-soc a:hover {
    color: var(--red)
}

.kf-links {
    border-bottom: 1px solid #e5e5e5;
    grid-template-columns: 1fr 1fr;
    padding: 26px 0;
    display: grid
}

.kf-lk {
    padding: 0 32px
}

.kf-lk:first-child {
    padding-left: 0
}

.kf-lk+.kf-lk {
    border-left: 1px solid #e5e5e5
}

.kf-2c {
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    display: grid
}

.kf ul {
    list-style: none
}

.kf-2c li {
    margin-bottom: 10px
}

.kf-2c a {
    color: #222;
    font-size: 14px
}

.kf-2c a:hover,
.kf-pc li a:hover {
    color: var(--red)
}

.kf-prod {
    grid-template-columns: repeat(4, 1fr);
    padding: 22px 0;
    display: grid
}

.kf-pc {
    padding: 0 28px
}

.kf-pc:first-child {
    padding-left: 0
}

.kf-pc+.kf-pc {
    border-left: 1px solid #e5e5e5
}

.kf-pc h6 {
    color: #0b2a5b;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700
}

.kf-pc li {
    margin-bottom: 6px
}

.kf-pc li a {
    color: #222;
    font-size: 14px;
    line-height: 1.4;
    display: inline-block
}

@media (width<=980px) {
    .kf-top {
        grid-template-columns: 1fr
    }

    .kf-top>div {
        padding: 0 0 24px
    }

    .kf-top>div+div {
        border-top: 1px solid #e5e5e5;
        border-left: 0;
        padding-top: 24px
    }

    .kf-links {
        grid-template-columns: 1fr
    }

    .kf-lk {
        padding: 0 0 20px
    }

    .kf-lk+.kf-lk {
        border-top: 1px solid #e5e5e5;
        border-left: 0;
        padding-top: 20px
    }

    .kf-prod {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 24px
    }

    .kf-pc:nth-child(odd) {
        border-left: 0;
        padding-left: 0
    }
}

@media (width<=640px) {

    .kf-2c,
    .kf-prod {
        grid-template-columns: 1fr
    }

    .kf-pc,
    .kf-pc+.kf-pc {
        border-bottom: 1px solid #e5e5e5;
        border-left: 0;
        padding: 0 0 16px
    }

    .kf-form {
        flex-direction: column
    }

    .kf-form input {
        border-right: 1px solid #ddd
    }
}

.cats {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff
}

.cat {
    border: 1px solid var(--line);
    isolation: isolate;
    border-radius: 22px;
    box-shadow: 0 10px 30px -18px #0f172a40
}

.cat:after {
    content: "";
    background: var(--img, url(/assets/images/products_images.jpg)) no-repeat right bottom / contain;
    opacity: .22;
    z-index: -1;
    pointer-events: none;
    width: 36%;
    height: 40%;
    position: absolute;
    bottom: 60px;
    right: 8px;
    -webkit-mask-image: linear-gradient(270deg, #000 35%, #0000 100%);
    mask-image: linear-gradient(270deg, #000 35%, #0000 100%)
}

@keyframes shine {
    0% {
        left: -120%
    }

    60%,
    to {
        left: 160%
    }
}

@keyframes textshim {
    0% {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

@keyframes skel {
    0% {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

.btn,
.dr .wb,
.sbox button {
    position: relative;
    overflow: hidden
}

.btn:after,
.dr .wb:after,
.sbox button:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(120deg, #0000, #ffffff8c, #0000);
    width: 8%;
    height: 100%;
    animation: 3s infinite shine;
    position: absolute;
    top: 0;
    left: -120%;
    transform: skew(-20deg)
}

.center_btn {
    text-align: center;
    margin-top: 20px
}

.dr .wb:after {
    background: linear-gradient(120deg, #0000, #c8161d2e, #0000)
}

.cat,
.prod {
    position: relative;
    overflow: hidden
}

.cat:before {
    content: "";
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(120deg, #0000, #ffffffb3, #0000);
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -120%;
    transform: skew(-20deg)
}

.prod:before {
    content: "";
    pointer-events: none;
    z-index: 2;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -120%;
    transform: skew(-20deg)
}

.cat:hover:before,
.prod:hover:before {
    animation: .9s shine
}

.hs .red,
.about h2 .red,
.head h2 .red,
.apps h2 .red,
.dl h2 .red {
    background: linear-gradient(90deg, var(--red) 0%, #ff6b70 45%, var(--red) 90%);
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: 3s linear infinite textshim
}

.skel {
    background: linear-gradient(90deg, #eceff3 25%, #f8fafc 50%, #eceff3 75%) 0 0/200% 100%;
    border-radius: 12px;
    min-height: 250px;
    animation: 1.4s linear infinite skel
}

.skel img {
    opacity: 0
}

.pimg img {
    transition: opacity .4s
}

@keyframes imgshine {
    0% {
        left: -30%
    }

    to {
        left: 130%
    }
}

.pimg:after,
.ac .im:after,
.photo:after,
.sf.bk:after {
    content: "";
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(120deg, #0000 0%, #ffffff8c 50%, #0000 100%);
    width: 5%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -30%;
    transform: skew(-20deg)
}

.pimg,
.ac .im,
.photo {
    position: relative;
    overflow: hidden
}

.pimg {
    border-radius: 12px
}

.ac:hover .im:after {
    animation: .9s imgshine
}

.photo:hover:after {
    animation: 1.1s imgshine
}

@media (hover:hover) {
    .sx:hover .sf.bk:after {
        animation: 1s .5s imgshine
    }
}

.sx.f .sf.bk:after {
    animation: 1s .5s imgshine
}

.logos {
    background: #fff;
    padding: 50px 0 40px
}

.logos-head {
    text-align: center;
    margin-bottom: 30px
}

.logos-head h2 {
    margin-top: 6px;
    font-size: 30px;
    font-weight: 700
}

.lg-slider {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
    mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000)
}

.lg-track {
    width: max-content;
    animation: 30s linear infinite lgScroll;
    display: flex
}

.lg-slider:hover .lg-track {
    animation-play-state: paused
}

.lg-item {
    /* border: 1px solid var(--line); */
    background: #fff;
    border-right:0.5px solid #efefef;
    /* border-radius: 14px; */
    flex: none;
    justify-content: center;
    align-items: center;
    width: 230px;
    height: 130px;
    /* margin: 0 14px;
    padding: 16px 20px; */
    transition: all .3s;
    display: flex;
    /* box-shadow: 0 8px 20px -16px #0f172a4d */
}

.lg-item img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    transition: all .3s
}

.lg-item:hover {
    border-color: #f0c3c5;
    transform: translateY(-3px)
}

.lg-item:hover img {
    filter: none;
    opacity: 1
}

@keyframes lgScroll {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@media (width<=640px) {
    .logos {
        padding: 36px 0
    }

    .logos-head h2 {
        font-size: 24px
    }

    .lg-item {
        width: 150px;
        height: 80px;
        margin: 0 10px;
        padding: 12px 16px
    }

    .lg-track {
        animation-duration: 22s
    }
}

@media (prefers-reduced-motion:reduce) {
    .lg-track {
        animation: none
    }
}

.kf-soc a i {
    transition: all .3s
}

.kf-soc a[aria-label=LinkedIn] i {
    color: #0a66c2
}

.kf-soc a[aria-label=YouTube] i {
    color: red
}

.kf-soc a[aria-label=Facebook] i {
    color: #1877f2
}

.kf-soc a[aria-label=X] i {
    color: #000
}

.kf-soc a[aria-label=WhatsApp] i {
    color: #25d366
}

.kf-soc a[aria-label=Instagram] i {
    color: #e4405f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0% 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text
}

.kf-soc a:hover i {
    transform: translateY(-3px)scale(1.1)
}

.crumbs {
    color: var(--muted);
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    border-radius: 28px;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    display: flex
}

.crumbs a:hover {
    color: var(--red)
}

.crumbs b {
    color: var(--ink);
    font-weight: 600
}

.crumbs i {
    opacity: .6;
    font-style: normal
}

.product {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
    align-items: start;
    gap: 64px;
    padding: 0 0 30px;
    display: grid
}

.gallery {
    border-radius: 20px;
    min-width: 0;
    padding: 15px;
    position: relative;
    box-shadow: 0 4px 8px #0000000f, 0 6px 20px #0000001a
}

.badge-ul {
    z-index: 6;
    border: 1px solid var(--line);
    color: var(--red);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    position: absolute;
    top: 14px;
    left: 14px
}

.badge-ul svg {
    width: 14px;
    height: 14px
}

.viewport {
    border-radius: var(--radius);
    background: var(--soft);
    aspect-ratio: 5/3;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    overflow: hidden
}

.viewport.zoomed {
    cursor: grab;
    touch-action: none
}

.viewport.dragging {
    cursor: grabbing
}

.track {
    height: 100%;
    transition: transform .7s var(--ease);
    display: flex
}

.slide {
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden
}

.slide img {
    object-fit: contain;
    will-change: transform;
    -webkit-user-drag: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
    transition: transform .28s
}

.viewport.dragging .slide img {
    transition: none
}

.arrow {
    z-index: 5;
    border: 1px solid var(--line);
    background: #ffffffeb;
    border-radius: 50%;
    place-items: center;
    width: 40px;
    height: 40px;
    transition: background .2s, color .2s, opacity .2s;
    display: grid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.arrow:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

.arrow svg {
    width: 16px;
    height: 16px
}

.arrow.prev {
    left: 12px
}

.arrow.next {
    right: 12px
}

.viewport.zoomed .arrow {
    opacity: 0;
    pointer-events: none
}

.zoom {
    z-index: 6;
    align-items: center;
    gap: 8px;
    display: flex;
    position: absolute;
    bottom: 16px;
    right: 14px
}

.zoom .level {
    color: var(--body);
    border: 1px solid var(--line);
    text-align: center;
    background: #ffffffeb;
    border-radius: 999px;
    min-width: 44px;
    padding: 4px 9px;
    font-size: 11px
}

.zoom button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 50%;
    place-items: center;
    width: 38px;
    height: 38px;
    transition: background .2s, color .2s, border-color .2s;
    display: grid
}

.zoom button:hover:not(:disabled) {
    background: var(--red);
    border-color: var(--red);
    color: #fff
}

.zoom button:disabled {
    opacity: .35;
    cursor: not-allowed
}

.zoom svg {
    width: 16px;
    height: 16px
}

.progress {
    background: var(--red);
    z-index: 4;
    width: 0;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0
}

.thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
    display: grid
}

.thumb {
    border: 1.5px solid var(--line);
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 6px 6px 8px;
    transition: border-color .2s, box-shadow .2s
}

.thumb img {
    aspect-ratio: 7/3;
    object-fit: contain;
    background: var(--soft);
    border-radius: 8px;
    width: 100%
}

.thumb span {
    color: var(--muted);
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    transition: color .2s;
    display: none
}

.thumb:hover {
    border-color: #cfcac3
}

.thumb.active {
    border-color: var(--red);
    box-shadow: 0 0 0 3px #d6392d1f
}

.thumb.active span {
    color: var(--red);
    font-weight: 600
}

.info {
    min-width: 0
}

.eyebrow {
    color: var(--red);
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex
}

.eyebrow:before {
    content: "";
    background: var(--red);
    border-radius: 50%;
    width: 6px;
    height: 6px
}

.info h1 {
    letter-spacing: -.02em;
    margin: 12px 0;
    font-weight: 700;
    line-height: 1.35;
    font-size: 28px !important
}

.model-line {
    color: var(--muted);
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12px;
    display: flex
}

.model-line b {
    color: var(--red);
    font-weight: 700
}

.lead {
    color: #000;
    margin: 8px 0 4px;
    font-size: 16px;
    line-height: 1.75
}

.special {
    color: #c8161d;
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600
}

.stat strong {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    display: block
}

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

.cta {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 18px;
    display: flex
}

.points_wise {
    padding-bottom: 16px;
    list-style-type: none
}

.points_wise li {
    padding: 4px 0
}

.btn {
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s, transform .2s;
    display: inline-flex
}

.btn.dark {
    color: #fff;
    background: #2a2b2f
}

.btn.dark:hover {
    background: var(--red)
}

.btn.text {
    border-bottom: 1.5px solid #0000;
    font-weight: 600
}

.btn.text:hover {
    color: #fff;
    background-color: #000
}

.btn svg {
    width: 16px;
    height: 16px
}

.chips {
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 12px 32px;
    margin-top: 36px;
    padding-top: 24px;
    display: flex
}

.chip {
    color: var(--body);
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    display: flex
}

.chip:before {
    content: "";
    background: var(--red);
    border-radius: 50%;
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 5px
}

.tabs-section {
    padding-bottom: 36px
}

.layout {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    border-radius: 8px;
    padding: 10px 20px
}

.tablist {
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
    gap: 36px;
    display: flex;
    position: relative;
    overflow-x: auto
}

.tablist::-webkit-scrollbar {
    display: none
}

.tab {
    color: #000;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    transition: color .2s;
    position: relative
}

.tab:hover,
.tab[aria-selected=true] {
    color: var(--ink)
}

.tab-indicator {
    background: var(--red);
    width: 0;
    height: 2px;
    transition: transform .35s var(--ease), width .35s var(--ease);
    position: absolute;
    bottom: -1px;
    left: 0
}

.panel {
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: start;
    gap: 56px;
    padding-top: 16px;
    display: none
}

.panel.active {
    display: grid
}

.panel h2 {
    letter-spacing: -.01em;
    font-size: 20px;
    font-weight: 600
}

.panel .sub {
    color: var(--muted);
    margin-top: 4px;
    font-size: 13px
}

.features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 40px;
    display: grid
}

.feature .tag {
    color: var(--red);
    font-size: 13px;
    font-weight: 700
}

.feature h3 {
    margin: 14px 0 8px;
    font-size: 15px;
    font-weight: 600
}

.feature p {
    color: var(--body);
    font-size: 13.5px
}

.tab-product {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
    background: #fff;
    padding: 12px;
    position: sticky;
    top: 24px
}

.tab-product img {
    aspect-ratio: 4/3;
    object-fit: contain;
    background: var(--soft);
    border-radius: 10px;
    width: 100%
}

.tab-product .m {
    color: var(--red);
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700
}

.tab-product .v {
    color: var(--muted);
    font-size: 12px;
    display: none
}

.spec-wrap {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    overflow: hidden
}

.spec-table {
    border-collapse: collapse;
    color: #222;
    width: 100%;
    font-size: 14px
}

.spec-table caption {
    text-align: left;
    letter-spacing: .4px;
    background: #fafafa;
    border-bottom: 1px solid #e3e3e3;
    padding: 14px 16px;
    font-size: 15px
}

.spec-table thead th {
    text-align: left;
    color: #fff;
    background: linear-gradient(135deg, #e53935, #b71c1c);
    padding: 10px 16px;
    font-weight: 600
}

.spec-table th,
.spec-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
    border-bottom: 1px solid #eee;
    padding: 10px 16px
}

.spec-table tbody th {
    text-align: left;
    color: #8e1a1a;
    background: #fff5f5;
    width: 150px;
    font-weight: 700
}

.spec-table tbody tr:nth-child(2n) td {
    background: #fcfcfc
}

.spec-table tbody tr:hover td,
.spec-table tbody tr:hover th {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
    border-bottom: 0
}

@media (width<=768px) {
    .spec-table {
        table-layout: fixed;
        font-size: 13px
    }

    .spec-table caption {
        padding: 12px;
        font-size: 14px
    }

    .spec-table thead th,
    .spec-table th,
    .spec-table td {
        padding: 8px 10px
    }

    .spec-table thead th:first-child {
        width: 27%
    }

    .spec-table thead th:nth-child(2) {
        width: 45%
    }

    .spec-table thead th:nth-child(3) {
        width: 28%
    }

    .spec-table tbody th {
        width: auto
    }
}

@media (width<=480px) {
    .spec-table {
        font-size: 11.5px
    }

    .spec-table caption {
        padding: 10px;
        font-size: 12.5px
    }

    .spec-table thead th,
    .spec-table th,
    .spec-table td {
        padding: 6px
    }
}

.note {
    color: var(--muted);
    margin-top: 14px;
    font-size: 12px
}

.list {
    gap: 0;
    margin-top: 20px;
    list-style: none;
    display: grid
}

.list li {
    color: var(--body);
    gap: 14px;
    padding: 10px 0;
    font-size: 14px;
    display: flex
}

.list li strong {
    color: var(--ink);
    margin-bottom: 2px;
    font-weight: 600;
    display: block
}

.list li:before {
    content: "";
    background: var(--red);
    border-radius: 50%;
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 9px
}

.dl {
    gap: 12px;
    list-style: none;
    display: grid
}

.dl a {
    border: 1px solid var(--line);
    border-radius: 12px;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .2s, background .2s;
    display: flex
}

.dl a:hover {
    border-color: var(--red);
    background: #fff7f6
}

.dl small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    display: block
}

.dl .ico {
    background: var(--soft);
    width: 38px;
    height: 38px;
    color: var(--red);
    border-radius: 50%;
    flex: none;
    place-items: center;
    display: grid
}

.dl .ico svg {
    width: 16px;
    height: 16px
}

.related-head {
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
    display: flex
}

.related-head h2 {
    letter-spacing: -.01em;
    font-size: 26px;
    font-weight: 600
}

.related-head p {
    color: var(--muted);
    margin-top: 4px;
    font-size: 13px
}

.rnav {
    gap: 8px;
    display: flex
}

.rnav button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 50%;
    place-items: center;
    width: 40px;
    height: 40px;
    transition: background .2s, color .2s;
    display: grid
}

.rnav button:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

.rnav svg {
    width: 16px;
    height: 16px
}

.rwin {
    touch-action: pan-y;
    overflow: hidden
}

.rtrack {
    transition: transform .6s var(--ease);
    gap: 20px;
    display: flex
}

.dots {
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    display: flex
}

.dots button {
    background: #d8d4ce;
    border: 0;
    border-radius: 999px;
    width: 8px;
    height: 8px;
    padding: 0;
    transition: width .3s, background .3s
}

.dots button.on {
    background: var(--red);
    width: 26px
}

@media (width<=980px) {
    .product {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .panel {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .panel .tab-product {
        order: -1;
        max-width: 260px;
        position: static
    }

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

@media (width<=560px) {
    .wrap {
        padding: 0 18px
    }

    .stats {
        gap: 12px 28px
    }

    .thumbs {
        gap: 8px
    }

    .btn {
        padding: 8px 16px
    }

    .tablist {
        gap: 26px
    }

    .related-head {
        flex-direction: column;
        align-items: flex-start
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }
}

.plp {
    --plp-red: var(--red, #d8382a);
    --plp-red-dark: #b82b1f;
    --plp-ink: #1b1b1d;
    --plp-muted: #7a7a80;
    --plp-line: #e3e3e6;
    --plp-tile: #efeff1;
    font-family: var(--plp-font);
    color: var(--plp-ink);
    background: var(--plp-bg);
    -webkit-font-smoothing: antialiased;
    padding-bottom: 24px;
    line-height: 1.5
}

.plp.has-tray {
    padding-bottom: 96px
}

.plp,
.plp *,
.plp :before,
.plp :after {
    box-sizing: border-box
}

.plp * {
    margin: 0;
    padding: 0
}

.plp a {
    color:#000;
    text-decoration: none
}

.plp button {
    font: inherit;
    color:#000;
    cursor: pointer
}

.plp ul {
    list-style: none
}

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

.plp :focus-visible {
    outline: 2px solid var(--plp-red);
    outline-offset: 2px
}

.plp-wrap {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 24px
}

.plp-crumbs {
    color: #000;
    padding: 18px 0 4px;
    font-size: 12px
}

.plp-crumbs a:hover {
    color: var(--plp-red)
}

.plp-crumbs span {
    margin: 0 8px
}

.plp-crumbs b {
    color: var(--plp-ink);
    font-weight: 600
}

.plp-hero {
    grid-template-columns: 3.5fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 10px 0 28px;
    display: grid
}

.plp-cert {
    font-family: var(--plp-mono);
    color: var(--plp-red);
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex
}

.plp-cert i {
    background: var(--plp-red);
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: block
}

.plp-hero h1 {
    margin: 5px 0 8px;
    font-weight: 650;
    line-height: 1.15;
    font-size: 32px !important
}

.plp-lead {
    color: #000;
    margin-top: 16px;
    font-size: 15px
}

.plp-cats::marker {
    display: none
}

ul {
    list-style-type: none
}

.plp-chips {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    display: none
}

.plp-chip {
    border: 1px solid var(--plp-line);
    color: #55555b;
    background: #fff;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    transition: background .2s, color .2s, border-color .2s
}

.plp-chip:hover {
    border-color: #bdbdc3
}

.plp-chip.is-on {
    background: var(--plp-ink);
    border-color: var(--plp-ink);
    color: #fff
}

.plp-banners {
    background: var(--plp-ink);
    aspect-ratio: 16/9;
    color: #fff;
    touch-action: pan-y;
    border-radius: 14px;
    display: none;
    position: relative;
    overflow: hidden
}

.plp-bslide {
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 30px;
    transition: opacity .6s;
    display: none;
    position: absolute;
    inset: 0
}

.plp-bslide.is-on {
    opacity: 1;
    pointer-events: auto
}

.plp-bslide:first-child {
    background: linear-gradient(135deg, #25252a 0%, #3a2623 100%)
}

.plp-bslide:nth-child(2) {
    background: linear-gradient(135deg, #1f2a33 0%, #2a3d4d 100%)
}

.plp-bslide:nth-child(3) {
    background: linear-gradient(135deg, #2b1f1f 0%, #d8382a 160%)
}

.plp-btag {
    font-family: var(--plp-mono);
    color: #ffb3aa;
    margin-bottom: 8px;
    font-size: 11px
}

.plp-bslide h3 {
    max-width: 14em;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15
}

.plp-bslide a {
    border-bottom: 2px solid var(--plp-red);
    align-self: flex-start;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700
}

.plp-big {
    font-family: var(--plp-mono);
    opacity: .13;
    font-size: 64px;
    font-weight: 700;
    position: absolute;
    top: 20px;
    right: 26px
}

.plp-barrow {
    color: #fff;
    z-index: 3;
    opacity: 0;
    background: #00000040;
    border: 1px solid #ffffff40;
    border-radius: 50%;
    place-items: center;
    width: 36px;
    height: 36px;
    transition: opacity .2s, background .2s;
    display: grid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.plp-banners:hover .plp-barrow,
.plp-barrow:focus-visible {
    opacity: 1
}

.plp-barrow:hover {
    background: var(--plp-red);
    border-color: var(--plp-red)
}

.plp-barrow svg {
    width: 15px;
    height: 15px
}

.plp-barrow.is-prev {
    left: 12px
}

.plp-barrow.is-next {
    right: 12px
}

.plp-bdots {
    z-index: 3;
    gap: 7px;
    display: flex;
    position: absolute;
    bottom: 18px;
    right: 20px
}

.plp-bdots button {
    background: #ffffff59;
    border: 0;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    padding: 0;
    transition: background .2s, width .2s
}

.plp-bdots button.is-on {
    background: #fff;
    border-radius: 999px;
    width: 22px
}

.plp-stats {
    justify-content: flex-end;
    gap: 40px;
    margin-top: 14px;
    display: none
}

.plp-stat b {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    display: block
}

.plp-stat small {
   color:#000;
    font-size: 11px
}

.plp-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 36px;
    padding-bottom: 40px;
    display: grid
}

.plp-sidebar {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    border-radius: 10px;
    padding: 20px;
    position: sticky;
    top: 24px
}

.plp-side-title {
    color: #a8262d;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700
}

.plp-cats li a {
    color: #000;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 4px;
    font-size: 14px;
    transition: color .2s;
    display: flex
}

.plp-cats li a span {
    font-family: var(--plp-mono);
   color:#000;
    font-size: 14px
}

.plp-cats li a:hover {
    color: #ad2518
}

.plp-cats li a.is-active {
    color: var(--plp-red);
    border-left: 3px solid var(--plp-red);
    padding-left: 10px;
    font-weight: 600
}

.plp-why {
    border: 1px solid var(--plp-line);
    background: #fff;
    border-radius: 10px;
    margin-top: 28px;
    padding: 18px
}

.plp-why h4 {
    color: var(--plp-red);
    margin-bottom: 8px;
    font-size: 13px
}

.plp-why p {
    color: #000;
    font-size: 13.5px
}

.plp-toolbar {
   color:#000;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 13px;
    display: flex
}

.plp-toolbar b {
    color: var(--plp-ink)
}

.plp-sort {
    align-items: center;
    gap: 8px;
    display: flex
}

.plp-sort select {
    font: inherit;
    border: 1px solid var(--plp-line);
    color: var(--plp-ink);
    cursor: pointer;
    background: #fdf5f5;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 600
}

.plp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    display: grid
}

.plp-card {
    background: #fff;
    border: 1px solid #e3e3e6;
    border-radius: 12px;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    display: flex;
    overflow: hidden
}

.plp-card:hover {
    border-color: #cfcfd4;
    transform: translateY(-2px)
}

.plp-card.is-selected {
    border-color: #d8382a;
    box-shadow: 0 0 0 1px #d8382a
}

@keyframes plp-in {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.plp-thumb {
    text-align: center;
    position: relative
}

.plp-ul {
    text-align: center;
    margin: 0 auto;
    display: none
}

.plp-km {
    color: var(--plp-red);
    letter-spacing: .02em;
    font-size: 22px;
    font-weight: 800;
    display: none
}

.plp-info {
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
    display: flex
}

.plp-model {
    font-family: var(--plp-mono);
    color: #a8262d;
    font-size: 11px;
    font-weight: 700
}

.plp-info h3 {
    margin: 6px 0 8px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45
}

.plp-actions {
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    display: flex
}

.plp-details {
    color: var(--plp-ink);
    font-size: 13px;
    font-weight: 600;
    transition: color .2s
}

.plp-details:hover {
    color: var(--plp-red)
}

.plp-cmp {
    color: #000;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex
}

.plp-cmp input {
    appearance: none;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #9a9aa1;
    border-radius: 4px;
    flex: none;
    place-items: center;
    width: 17px;
    height: 17px;
    display: grid
}

.plp-cmp input:checked {
    background: #d8382a;
    border-color: #d8382a
}

.plp-cmp input:checked:after {
    content: "";
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    width: 9px;
    height: 5px;
    transform: rotate(-45deg)translate(1px, -1px)
}

.plp-cmp input:disabled {
    opacity: .4;
    cursor: not-allowed
}

.plp-empty {
    text-align: center;
   color:#000;
    background: #fff;
    border: 1px dashed #c9c9ce;
    border-radius: 12px;
    grid-column: 1/-1;
    padding: 60px 20px
}

.plp-pager {
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
    font-size: 13px;
    display: flex
}

.plp-pager button {
    color: #55555b;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-weight: 700;
    transition: background .2s, color .2s;
    display: grid
}

.plp-pager button:hover:not(:disabled):not(.is-on) {
    background: #ececef
}

.plp-pager button.is-on {
    background: var(--plp-ink);
    color: #fff
}

.plp-pager button.is-wide {
    border-radius: 999px;
    padding: 0 14px
}

.plp-pager button:disabled {
    opacity: .35;
    cursor: not-allowed
}

.plp-tray {
    border-top: 1px solid var(--plp-line);
    z-index: 40;
    visibility: hidden;
    background: #fff;
    transition: transform .3s;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    box-shadow: 0 -8px 24px #0000000f
}

.plp-tray.is-show {
    visibility: visible;
    transform: none
}

.plp-tray .plp-wrap {
    align-items: center;
    gap: 18px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex
}

.plp-tray-label {
    white-space: nowrap;
    font-size: 15px;
    font-weight: 650
}

.plp-tray-label small {
   color:#000;
    font-size: 11px;
    font-weight: 600;
    display: block
}

.plp-slots {
    flex: 1;
    gap: 10px;
    display: flex;
    overflow-x: auto
}

.plp-slot {
    min-width: 150px;
    max-width: 220px;
   color:#000;
    border: 1.5px dashed #c9c9ce;
    border-radius: 8px;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 12px;
    display: flex
}

.plp-slot.is-filled {
    border-style: solid;
    border-color: var(--plp-line);
    background: var(--plp-bg);
    color: var(--plp-ink)
}

.plp-slot b {
    font-family: var(--plp-mono);
    color: var(--plp-red);
    font-size: 11px;
    display: block
}

.plp-slot button {
   color:#000;
    background: 0 0;
    border: 0;
    font-size: 18px;
    line-height: 1
}

.plp-slot button:hover {
    color: var(--plp-red)
}

.plp-btn {
    color: #fff;
    background: #c8161d;
    border: 0;
    border-radius: 8px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
    transition: background .2s
}

.plp-btn:hover:not(:disabled) {
    background: #c8161d
}

.plp-btn:disabled {
    cursor: not-allowed;
    background: #c9c9ce
}

.plp-btn.is-ghost {
   color:#000;
    background: #c9c9ce;
    padding: 11px 16px;
    font-weight: 600
}

.plp-btn.is-ghost:hover {
    color: var(--plp-red);
    background: 0 0
}

.plp-modal {
    z-index: 60;
    background: #1414188c;
    justify-content: center;
    align-items: flex-end;
    display: none;
    position: fixed;
    inset: 0
}

.plp-modal.is-open {
    display: flex
}

.plp-sheet {
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: min(1100px, 100%);
    max-height: 88vh;
    padding: 26px 28px 32px;
    animation: .3s both plp-up;
    overflow: auto
}

@keyframes plp-up {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.plp-sheet-head {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    display: flex
}

.plp-sheet-head h2 {
    font-size: 22px;
    font-weight: 650
}

.plp-close {
    background: #fff;
    border: 2px solid #c8161d;
    border-radius: 8px;
    padding: 7px 14px;
    font-weight: 600
}

.plp-close:hover {
    border-color: var(--plp-red);
    color: var(--plp-red)
}

.plp-table-scroll {
    overflow-x: auto
}

.plp-cmp-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
    font-size: 13.5px
}

.plp-cmp-table th,
.plp-cmp-table td {
    text-align: left;
    vertical-align: top;
    border: 1px solid #efefef;
    padding: 12px 14px
}

.plp-cmp-table thead th {
    background: var(--plp-bg)
}

.plp-cmp-table th.plp-rowh {
    background: var(--plp-bg);
    width: 160px;
   color:#000;
    font-size: 12px;
    font-weight: 700
}

.plp-cmp-table .plp-m {
    font-family: var(--plp-mono);
    color: var(--plp-red);
    font-size: 11px;
    font-weight: 700;
    display: block
}

.plp-cmp-table .plp-t {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35
}

.plp-cmp-table a {
    color: var(--plp-red);
    font-weight: 700
}

.plp-yes {
    color: #1c8a4b;
    font-weight: 700
}

.plp-no {
    color: #a0a0a6
}

@media (width<=1020px) {
    .plp-hero {
        grid-template-columns: 1fr
    }

    .plp-stats {
        justify-content: flex-start
    }

    .plp-layout {
        grid-template-columns: 1fr
    }

    .plp-sidebar {
        position: static
    }

    .plp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width<=640px) {
    .plp-wrap {
        padding: 0 16px
    }

    .plp-grid {
        grid-template-columns: 1fr
    }

    .plp-tray .plp-wrap {
        flex-wrap: wrap;
        gap: 10px 14px
    }

    .plp-slots {
        flex-basis: 100%;
        order: 3
    }

    .plp-toolbar {
        flex-direction: column;
        align-items: flex-start
    }

    .plp-sheet {
        padding: 20px 16px 26px
    }
}

@media (prefers-reduced-motion:reduce) {
    .plp * {
        transition: none !important;
        animation: none !important
    }
}

.about-hero {
    background: #fff;
    padding: 30px 0 70px
}

.about-hero .container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 44px;
    display: grid
}

.about-hero h1 {
    font-family: var(--heading-font);
    color: var(--red);
    margin-bottom: 10px;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.2
}

.about-hero p {
    text-align: justify;
    margin-bottom: 16px;
    font-size: 15.5px;
    line-height: 1.75
}

.about-hero p strong {
    color: #333;
    font-weight: 700
}

.btn-contact {
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    text-transform: uppercase;
    border-radius: 5px;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 15px 34px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    display: inline-flex;
    box-shadow: 0 6px 14px #8a1c2c40
}

.btn-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px #8a1c2c52
}

.btn-contact:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px
}

.about-img {
    background: linear-gradient(135deg, #c9eefa, #f2f2f2);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 34px #0000001f
}

.about-img img {
    width: 100%;
    height: auto;
    display: block
}

@media (width<=900px) {
    .about-hero {
        padding: 40px 0 50px
    }

    .about-hero .container {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 24px
    }

    .about-hero p {
        text-align: left
    }
}

.counters {
    padding: 40px 0 60px
}

.counters .container {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    display: grid
}

.counter-box {
    text-align: center;
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    border-radius: 12px;
    padding: 34px 16px 30px;
    box-shadow: 0 6px 20px #0000000f
}

.counter-box .num {
    color: var(--red);
    font-variant-numeric: tabular-nums;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    display: block
}

.counter-box .label {
    text-transform: uppercase;
    color: var(--text);
    margin-top: 10px;
    font-size: 15px;
    font-weight: 500;
    display: block
}

@media (width<=900px) {
    .counters .container {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (width<=480px) {
    .counter-box .num {
        font-size: 44px
    }
}

.milestone-section {
    box-sizing: border-box;
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    width: 100%;
    padding: 50px 0
}

.controls-wrapper {
    z-index: 100;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 50px;
    display: flex;
    position: sticky;
    top: 90px
}

.year-nav-wrapper {
    justify-content: center;
    width: 100%;
    display: flex
}

.year-nav {
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    scrollbar-width: none;
    background: #ffffffe6;
    border-radius: 40px;
    gap: 6px;
    max-width: 98vw;
    padding: 8px 16px;
    display: flex;
    overflow-x: auto;
    box-shadow: 0 10px 30px #065baa14
}

.year-nav::-webkit-scrollbar {
    display: none
}

.year-btn {
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
    background: 0 0;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 18px;
    font-weight: 700;
    transition: all .3s
}

.year-btn:hover,
.year-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 4px var(--accent-glow);
    transform: translateY(-1px)
}

.timeline-container {
    padding: 30px 0;
    position: relative
}

.timeline-track {
    background: #a8262d;
    border-radius: 2px;
    width: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

.timeline-progress {
    background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 100%);
    width: 4px;
    height: 0%;
    box-shadow: 0 0 12px var(--accent-glow);
    border-radius: 2px;
    transition: height .1s linear;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.timeline-item {
    opacity: 0;
    justify-content: flex-end;
    margin-bottom: 30px;
    padding-right: 50%;
    transition: all .6s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    position: relative;
    transform: translateY(35px)scale(.6)
}

.timeline-item.filtered-out {
    display: none !important
}

.timeline-item.show {
    opacity: 1;
    transform: translateY(0)scale(1)
}

.timeline-item:nth-child(2n) {
    justify-content: flex-start;
    padding-left: 50%;
    padding-right: 0
}

.timeline-dot {
    z-index: 10;
    background: #fff;
    border: 3px solid #a8262d;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
    display: flex;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 0 4px #065baa1f
}

.dot-inner {
    background: #a8262d;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    transition: all .3s
}

.timeline-item.show .timeline-dot {
    border-color: #a8262d;
    box-shadow: 0 0 0 6px #a8262d47
}

.timeline-item.show .dot-inner {
    background: #a8262d
}

.timeline-item:hover .timeline-dot {
    background: #a8262d;
    transform: translate(-50%)scale(1.35)
}

.timeline-item:hover .dot-inner {
    background: #fff
}

.timeline-card {
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 20px;
    margin: 0 35px;
    padding: 20px;
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
    position: relative;
    box-shadow: 0 10px 30px #065baa14
}

.timeline-card:hover {
    border-color: #65bc4666;
    transform: translateY(-6px)
}

.card-header {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    display: flex
}

.card-year {
    color: var(--primary);
    letter-spacing: .5px;
    background: #fcf2f3;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 18px;
    font-weight: 700
}

.timeline-card p {
    color: #000;
    text-align: justify;
    margin: 0;
    font-size: 16px;
    line-height: 1.75
}

@media screen and (width<=768px) {
    .controls-wrapper {
        top: 10px
    }

    .timeline-track,
    .timeline-progress {
        left: 20px
    }

    .timeline-item,
    .timeline-item:nth-child(2n) {
        justify-content: flex-start;
        padding-left: 45px;
        padding-right: 0
    }

    .timeline-dot {
        width: 20px;
        height: 20px;
        left: 20px
    }

    .dot-inner {
        width: 6px;
        height: 6px
    }

    .timeline-card {
        width: 100%;
        margin: 0;
        padding: 20px
    }
}

section#about {
    padding: 50px 0
}

.vmt {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    padding: 60px 0;
}

.vmt-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px
}

.vmt-head h2 {
    color: #000;
    font-size: 34px;
    line-height: 1.2
}

.vmt-head h2 span {
    color: var(--red)
}

.vmt-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    display: grid
}

.vmt-card {
    border: 1px solid #eee;
    border-top: 4px solid var(--red);
    text-align: center;
    background: #fff;
    border-radius: 12px;
    /* padding: 26px 30px 34px; */
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 6px 20px #0000000f
}

.vmt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px #8a1c2c26
}

.icon {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    border-radius: 50%;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    transition: background .25s;
    display: grid
}

.icon svg {
    fill: none;
    width: 36px;
    height: 36px;
    stroke: var(--red);
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .25s
}

.vmt-card:hover .icon {
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    border: 2px solid var(--red-dark)
}

.counter_heading {
    text-align: center;
    margin-bottom: 30px
}

.counter_heading h2 {
    color: #000;
    font-size: 34px;
    line-height: 1.2
}

.counter_heading h2 span {
    color: var(--red)
}

.vmt-card:hover .icon svg {
    stroke: #fff
}

.vmt-card h3 {
    color: #fff;
    margin-bottom: 6px;
    font-size: 18px;
    padding: 6px 0;
    background: #c8161d;
    margin-top:8px;
}

.vmt-card p {
    color: #000;
    font-size: 16px;
    margin-bottom:20px;
    line-height: 1.75;
}

@media (width<=900px) {
    .vmt-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto
    }
}

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

    .vmt-card,
    .icon,
    .icon svg {
        transition: none
    }

    .vmt-card:hover {
        transform: none
    }
}

.certs {
    padding: 20px 0 50px
}

.certs .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px
}

.certs-head {
    text-align: center;
    margin-bottom: 42px
}

.certs-head h2 {
    color: #000;
    font-size: 34px
}

.certs-head h2 span {
    color: var(--red)
}

.certs-head h2:after {
    content: "";
    background: var(--red);
    width: 60px;
    height: 3px;
    margin: 8px auto 18px;
    display: block
}

.certs-head p {
    font-size: 15.5px
}

.cert-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    display: grid
}

.cert-card {
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 18px 18px 22px;
    box-shadow: 0 6px 20px #00000012
}

.cert-thumb {
    cursor: zoom-in;
    aspect-ratio: 3/4;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    width: 100%;
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden
}

.cert-thumb img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    transition: transform .35s;
    display: block
}

.cert-thumb:after {
    content: "Click to enlarge";
    color: #fff;
    opacity: 0;
    background: linear-gradient(#0000, #8a1c2ce0);
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all .3s;
    position: absolute;
    inset: auto 0 0;
    transform: translateY(8px)
}

.cert-thumb:hover img {
    transform: scale(1.04)
}

.cert-thumb:hover:after,
.cert-thumb:focus-visible:after {
    opacity: 1;
    transform: none
}

.cert-thumb:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px
}

.cert-card h3 {
    color: var(--red);
    margin-top: 18px;
    font-size: 22px
}

.cert-card p {
    margin-top: 4px
}

dialog.lightbox {
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 24px
}

dialog.lightbox[open] {
    display: flex
}

dialog.lightbox::backdrop {
    background: #0f0f12d1
}

.lb-inner {
    flex-direction: column;
    align-items: center;
    max-width: min(900px, 100%);
    max-height: 100%;
    animation: .25s pop;
    display: flex;
    position: relative
}

.lb-inner img {
    background: #fff;
    border-radius: 8px;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    box-shadow: 0 20px 60px #00000080
}

.lb-caption {
    color: #fff;
    text-align: center;
    margin-top: 12px;
    font-size: 16px
}

.lb-close:focus-visible {
    outline-offset: 2px;
    outline: 3px solid #fff
}

@keyframes pop {
    0% {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (width<=640px) {
    .cert-grid {
        grid-template-columns: 1fr
    }

    .lb-close {
        top: -10px;
        right: -6px
    }
}

@media (prefers-reduced-motion:reduce) {
    .lb-inner {
        animation: none
    }

    .cert-thumb img,
    .cert-thumb:after {
        transition: none
    }
}

.clients {
    padding: 10px 0 60px;
}

.clients .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px
}

.head1 {
    margin: 0 auto 35px
}

.head1 h1 {
    color: #000;
    font-size: 36px;
    line-height: 1.2
}

.head1 h1 span {
    color: var(--red)
}

.head1 h1:after {
    content: "";
    background: var(--red);
    width: 60px;
    height: 3px;
    margin: 14px auto 12px;
    display: none
}

.head1 p {
    margin-top: 10px;
    font-size: 15.5px
}

.logo-grid {
       display: grid;
    grid-template-columns: repeat(10, 1fr);
}

.logo-card {
    aspect-ratio: 3/3;
    cursor: pointer;
    background: #fff;
    margin: 8px 0;
        border-right: 1px solid #efefef;
    /* border: 1px solid #eee; */
    /* border-radius: 12px; */
    place-items: center;
    padding: 18px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    display: grid;
    position: relative;
    overflow: hidden;
    /* box-shadow: 0 4px 14px #0000000d */
}

.logo-card .fallback {
    color: #777;
    text-align: center;
    font-family: Times New Roman, Times, serif;
    font-size: 19px;
    font-weight: 700
}

.logo-card:after {
    content: "View all logos";
    text-align: center;
    /* background: linear-gradient(135deg, var(--red), var(--red-dark)); */
    color: #fff;
    padding: 9px;
    font-size: 13.5px;
    font-weight: 500;
    transition: transform .25s;
    position: absolute;
    inset: auto 0 0;
    transform: translateY(100%)
}

/* .logo-card:hover,
.logo-card:focus-visible {
    border-color: var(--red);
    transform: translateY(-5px);
    box-shadow: 0 12px 26px #8a1c2c29
} */

/* .logo-card:hover img,
.logo-card:focus-visible img {
    filter: none;
    opacity: 1
} */

/* .logo-card:hover:after,
.logo-card:focus-visible:after {
    transform: none
}

.logo-card:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px
} */

dialog.lb {
    background: 0 0;
    border: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 20px
}

dialog.lb[open] {
    justify-content: center;
    align-items: center;
    display: flex
}

dialog.lb::backdrop {
    background: #0f0f12d9
}

.lb-box {
    background: #fff;
    border-radius: 14px;
    width: min(820px, 100%);
    padding: 26px 26px 20px;
    animation: .25s pop;
    position: relative
}

.lb-close {
    background: var(--red);
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 1;
    position: absolute;
    top: -14px;
    right: -10px;
    box-shadow: 0 4px 12px #00000059
}

.lb-close:hover {
    background: var(--red-dark)
}

.lb-stage {
    align-items: center;
    gap: 12px;
    display: flex;
    position: relative
}

.lb-view {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    flex: 1;
    place-items: center;
    height: min(360px, 48vh);
    display: grid
}

.lb-view img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%
}

.lb-view .fallback {
    color: var(--red);
    text-align: center;
    font-family: Times New Roman, Times, serif;
    font-size: 34px;
    font-weight: 700
}

.lb-arrow {
    width: 44px;
    height: 44px;
    color: var(--red);
    cursor: pointer;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    flex: none;
    font-size: 22px;
    transition: all .2s
}

.lb-arrow:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red)
}

.lb-meta {
    text-align: center;
    margin: 8px 0 14px
}

.lb-name {
    color: var(--red);
    font-family: Times New Roman, Times, serif;
    font-size: 22px
}

.lb-count {
    color: #777;
    font-size: 14px
}

.lb-thumbs {
    justify-content: flex-start;
    gap: 10px;
    padding: 4px 2px 8px;
    display: flex;
    overflow-x: auto
}

.lb-thumbs button {
    cursor: pointer;
    opacity: .65;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 8px;
    flex: none;
    place-items: center;
    width: 78px;
    height: 52px;
    padding: 5px;
    transition: all .2s;
    display: grid
}

.lb-thumbs button img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%
}

.lb-thumbs button .fallback {
    color: #777;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1
}

.lb-thumbs button[aria-current=true] {
    border-color: var(--red);
    opacity: 1
}

.lb-close:focus-visible,
.lb-arrow:focus-visible,
.lb-thumbs button:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 2px
}

@media (width<=900px) {
    .logo-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (width<=640px) {
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px
    }

    .logo-card {
        padding: 14px
    }

    .lb-box {
        padding: 20px 14px 14px
    }

    .lb-arrow {
        width: 36px;
        height: 36px;
        font-size: 18px
    }

    .lb-close {
        right: -4px
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important;
        animation: none !important
    }
}

.contact {
    padding: 10px 0 50px
}

.contact .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px
}

.contact-head {
    margin-bottom: 36px
}

.contact-head h2 {
    color: var(--dark);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2
}

.contact-head h2 span {
    color: var(--red)
}

.contact-head h2:after {
    content: "";
    background: var(--red);
    width: 60px;
    height: 3px;
    margin: 14px auto 12px;
    display: none
}

.contact-head p {
    color: #000;
    margin-top: 10px;
    font-size: 15px
}

.contact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
    display: grid
}

.contact-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    min-height: 305px;
    padding: 30px 24px 34px;
    transition: box-shadow .25s, transform .25s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px #00000008
}

.contact-card:before {
    content: "";
    background: var(--red);
    width: 0;
    height: 3px;
    transition: width .55s;
    position: absolute;
    top: 0;
    left: 0
}

.contact-card:hover:before,
.contact-card:focus-within:before {
    width: 100%
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px #00000017
}

.c-icon {
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    border-radius: 50%;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    display: grid;
    box-shadow: 0 4px 10px #8a1c2c38
}

.c-icon svg {
    fill: #fff;
    width: 22px;
    height: 22px
}

.contact-card h3 {
    color: #a8262d;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700
}

.contact-card p {
    color: #000;
    font-size: 15px;
    line-height: 1.92
}

.contact-card strong {
    color: var(--dark);
    font-weight: 700
}

.contact-card a {
    color:#000;
    text-decoration: none
}

.contact-card a:hover {
    color: var(--red)
}

.gap {
    margin-top: 22px
}

@media (width<=1000px) {
    .contact-grid {
        gap: 24px
    }
}

@media (width<=820px) {
    .contact-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto
    }

    .contact-card {
        min-height: 0
    }
}

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

    .contact-card,
    .contact-card:before {
        transition: none
    }

    .contact-card:hover {
        transform: none
    }
}

.locations {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    padding: 40px 0 50px
}

.locations .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 56px
}

.loc-head {
    margin-bottom: 30px
}

.loc-head h2 {
    color: var(--dark);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2
}

.loc-head h2 span {
    color: var(--red)
}

.loc-head h2:after {
    content: "";
    background: var(--red);
    width: 60px;
    height: 3px;
    margin: 14px auto 12px;
    display: none
}

.loc-head p {
    color: #000;
    margin-top: 10px;
    font-size: 15px
}

.loc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    display: grid
}

.loc-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    transition: box-shadow .25s, transform .25s;
    overflow: hidden;
    box-shadow: 0 4px 16px #0000000f
}

.loc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px #0000001c
}

.loc-title {
    align-items: center;
    gap: 12px;
    padding: 16px 28px 15px;
    display: flex
}

.loc-title svg {
    width: 17px;
    height: 17px;
    fill: var(--red);
    flex: none
}

.loc-title h3 {
    color: var(--dark);
    font-size: 15px;
    font-weight: 700
}

.loc-map {
    border: 0;
    width: 100%;
    height: 320px;
    display: block
}

@media (width<=1000px) {
    .locations .container {
        padding: 0 24px
    }

    .loc-grid {
        gap: 24px
    }
}

@media (width<=760px) {
    .loc-grid {
        grid-template-columns: 1fr
    }

    .loc-map {
        height: 280px
    }

    .loc-title {
        padding: 14px 18px
    }
}

@media (prefers-reduced-motion:reduce) {
    .loc-card {
        transition: none
    }

    .loc-card:hover {
        transform: none
    }
}

.grid4 .cat:first-child {
    --img: url(/assets/images/multimerter3.jpg)
}

.grid4 .cat:nth-child(2) {
    --img: url(/assets/images/multimeter2.jpg)
}

.grid4 .cat:nth-child(3) {
    --img: url(/assets/images/multimeter4.jpg)
}

.grid4 .cat:nth-child(4) {
    --img: url(/assets/images/multimeter5.jpg)
}

.grid4 .cat:nth-child(5) {
    --img: url(/assets/images/product-image.jpg)
}

.grid4 .cat:nth-child(6) {
    --img: url(/assets/images/products_images.jpg)
}

.grid4 .cat:nth-child(7) {
    --img: url(/assets/images/products_images-removebg-preview.png)
}

.grid4 .cat:nth-child(8) {
    --img: url(/assets/images/multimeter4.jpg)
}

header nav .nv-dd {
    align-items: center;
    display: flex;
    position: relative
}

header nav .nv-btn {
    cursor: pointer;
    width: 26px;
    height: 26px;
    color:#000;
    background: 0 0;
    border: 0;
    place-items: center;
    margin-left: -8px;
    display: grid
}

header nav .nv-btn:before {
    content: "";
    border: 2px solid;
    border-width: 0 2px 2px 0;
    width: 7px;
    height: 7px;
    transition: transform .2s;
    transform: translateY(-2px)rotate(45deg)
}

header nav .nv-dd.open .nv-btn:before {
    transform: translateY(1px)rotate(-135deg)
}

header nav .nv-btn:focus-visible,
header nav .nv-panel a:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #b0242f
}

header nav .nv-panel {
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: 3px solid #b0242f;
    border-radius: 0 0 8px 8px;
    min-width: 240px;
    padding: 8px 0;
    transition: all .2s;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(8px);
    box-shadow: 0 14px 30px #0000001f
}

header nav .nv-panel a {
    color: #000;
    white-space: nowrap;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 500;
    display: block;
    position: static
}

header nav .nv-panel a:hover {
    color: #b0242f;
    background: #f8e4e7
}

header nav .nv-dd.nv-mega {
    position: static
}

header nav .nv-mega .nv-panel {
    border-radius: 0;
    min-width: 0;
    padding: 0;
    left: 0;
    right: 0
}

.nv-mega-in {
    grid-template-columns: repeat(4, 1fr) 1fr;
    gap: 14px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 24px 34px;
    display: grid
}

header nav .nv-col a {
    white-space: normal;
    padding: 7px 0;
    transition: padding .15s, color .15s
}

header nav .nv-col a:hover {
    background: 0 0;
    padding-left: 6px
}

.nv-feature {
    color: #fff;
    background: linear-gradient(135deg, #b0242f, #8a1c2c);
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;
    padding: 26px 24px;
    display: flex
}

.nv-feature h4 {
    color: #fff;
    border: 0;
    margin: 0 0 8px;
    padding: 0;
    font-family: Times New Roman, Times, serif;
    font-size: 23px
}

.nv-feature p {
    color: #ffe9ec;
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.6
}

header nav .nv-feature a {
    color: #b0242f;
    background: #fff;
    border-radius: 5px;
    align-self: flex-start;
    padding: 10px 20px;
    font-weight: 700
}

header nav .nv-feature a:hover {
    color: #8a1c2c;
    background: #f8e4e7;
    padding-left: 20px
}

header nav a {
    position: relative
}

header nav>a.on,
header nav .nv-dd>a.on {
    color: #b0242f;
    font-weight: 700
}

header nav>a.on:after,
header nav .nv-dd>a.on:after {
    content: "";
    background: #b0242f;
    border-radius: 2px;
    height: 3px;
    position: absolute;
    bottom: 2px;
    left: 12px;
    right: 12px
}

header nav .nv-dd>a.on~.nv-btn {
    color: #b0242f
}

header nav .nv-panel a.on {
    color: #b0242f;
    background: #f8e4e7;
    font-weight: 700;
    box-shadow: inset 3px 0 #b0242f
}

@media (width>=1181px) {

    header nav .nv-dd:hover .nv-panel,
    header nav .nv-dd:focus-within .nv-panel,
    header nav .nv-dd.open .nv-panel {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    header nav .nv-dd:hover:after {
        content: "";
        height: 40px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0
    }
}

@media (width<=1180px) {
    header nav .nv-dd {
        flex-wrap: wrap
    }

    header nav .nv-dd>a {
        flex: 1
    }

    header nav .nv-btn {
        width: 44px;
        height: 44px;
        margin: 0
    }

    header nav .nv-panel,
    header nav .nv-mega .nv-panel {
        width: 100%;
        min-width: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        border: 0;
        border-left: 3px solid #b0242f;
        border-radius: 0;
        margin: 0 0 6px 14px;
        padding: 0;
        display: none;
        position: static;
        transform: none
    }

    header nav .nv-dd.open .nv-panel {
        display: block
    }

    .nv-mega-in {
        grid-template-columns: 1fr 1fr;
        gap: 4px 20px;
        padding: 6px 14px 14px
    }

    header nav>a.on:after,
    header nav .nv-dd>a.on:after {
        width: 36px;
        left: 0;
        right: auto
    }
}

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

    header nav .nv-panel,
    header nav .nv-btn:before,
    header nav .nv-col a {
        transition: none
    }
}

.testi h2 {
    margin: 12px 0 8px;
    font-size: 30px
}

.testi p {
    color: #666;
    margin: 0
}

.tc .st {
    color: #f2a20c;
    letter-spacing: 2px;
    margin-bottom: 12px
}

.tc q {
    color: #000;
    quotes: none;
    font-size: 15px;
    line-height: 1.7;
    display: block
}

.tc .w {
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    display: flex
}

.tc .w i {
    color: #fff;
    background: #b0242f;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    font-style: normal;
    font-weight: 700;
    display: grid
}

.tc .w b {
    display: block
}

.tc .w span {
    color: #000;
    font-size: 13px
}

.testi .tvp {
    touch-action: pan-y;
    padding: 6px 2px 10px;
    overflow: hidden
}

.testi .tvp .tg {
    will-change: transform;
    grid-template-columns: none;
    gap: 20px;
    transition: transform .5s cubic-bezier(.22, .7, .2, 1);
    display: flex
}

.testi .tvp .tg.drag {
    cursor: grabbing;
    transition: none
}

.testi .tvp .tc {
    -webkit-user-select: none;
    user-select: none;
    flex: none
}

.tctl {
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    display: flex
}

.tbtn {
    cursor: pointer;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 1;
    transition: all .2s
}

.tbtn:hover {
    color: #fff;
    background: #b0242f;
    border-color: #b0242f
}

.tbtn:focus-visible,
.tdots button:focus-visible {
    outline-offset: 2px;
    outline: 3px solid #b0242f
}

.tdots {
    gap: 8px;
    display: flex
}

.tdots button {
    cursor: pointer;
    background: #d4d4d4;
    border: 0;
    border-radius: 10px;
    width: 10px;
    height: 10px;
    padding: 0;
    transition: all .3s
}

.tdots button.on {
    background: #b0242f;
    width: 28px
}

@media (width<=560px) {
    .tbtn {
        width: 38px;
        height: 38px
    }

    .nv-mega-in {
        display: block
    }

    .top .wrap {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .testi .tvp .tg {
        transition: none
    }
}

html {
    -webkit-text-size-adjust: 100%
}

body {
    overflow-x: clip
}

img,
video,
svg,
canvas,
iframe {
    max-width: 100%
}

.logo img {
    width: clamp(150px, 46vw, 260px);
    height: auto;
    display: block
}

header nav a.on {
    background: 0 0;
    border-bottom: 0
}

@media (width>=1181px) and (width<=1360px) {
    .logo img {
        width: 200px
    }

    header nav {
        gap: 2px
    }

    header nav a {
        padding: 6px 8px;
        font-size: 15px
    }

    header nav .nv-btn {
        margin-left: -6px
    }

    .acts {
        gap: 8px
    }

    .acts .btn {
        padding: 8px 12px
    }

    .acts .wa {
        font-size: 14px
    }

    header nav>a.on:after,
    header nav .nv-dd>a.on:after {
        left: 8px;
        right: 8px
    }
}

@media (width<=1180px) {
    header nav {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100dvh - 110px);
        overflow-y: auto
    }

    header nav .nv-panel a {
        white-space: normal
    }

    header nav .nv-dd>a {
        padding: 12px 14px
    }

    header nav>a.on,
    header nav .nv-dd>a.on {
        background: var(--pink);
        border-left: 3px solid var(--red);
        border-radius: 8px
    }

    header nav>a.on:after,
    header nav .nv-dd>a.on:after {
        display: none
    }

    header nav .nv-mega .nv-panel {
        margin-left: 10px
    }

    .nv-mega-in {
        grid-template-columns: 1fr 1fr;
        max-width: none;
        display: grid
    }

    .nv-col {
        min-width: 0
    }

    header nav .nv-col a {
        padding: 9px 4px;
        font-size: 14.5px;
        line-height: 1.35
    }
}

@media (width<=640px) {
    header .wrap {
        gap: 10px;
        min-height: 60px
    }

    .nv-mega-in {
        grid-template-columns: 1fr;
        padding: 4px 10px 12px
    }

    .mob-cta .btn,
    .mob-cta .wa {
        flex: 100%;
        min-width: 0
    }

    .testi h2 {
        font-size: 24px
    }

    .tctl {
        gap: 12px
    }

    .hs p {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
        display: -webkit-box;
        overflow: hidden
    }

    .sbox {
        flex-wrap: wrap
    }

    .sbox input {
        width: 100%;
        min-width: 0
    }
}

@media (width<=360px) {
    .wrap {
        padding: 0 14px
    }

    .logo img {
        width: 140px
    }

    .menu {
        width: 40px;
        height: 40px
    }

    .tbtn {
        width: 34px;
        height: 34px
    }
}

@media (hover:none) {
    header nav .nv-btn {
        width: 44px;
        height: 44px
    }

    .tdots button {
        min-width: 10px
    }
}

@media (width>=1600px) {
    body {
        font-size: 16px
    }
}

@media only screen and (width<=430px) and (width>=320px) {
    .sec .head h2 {
        font-size: 24px
    }

    .find h2 {
        font-size: 22px;
    }

    .head h2 {
        line-height: 1.5;
        font-size: 26px !important
    }

    .gallery {
        padding: 10px
    }

    .viewport {
        aspect-ratio: 4/3
    }

    .ul-badge1 {
        display: none !important
    }

    .info h1 {
        font-size: 24px !important
    }

    .tab {
        font-size: 14px
    }
}

@media only screen and (width<=1024px) and (width>=787px) {
    .cat {
        height: 270px
    }

    .flip {
        height: 260px
    }
}

.pcl {
    background: var(--bg);
    padding-bottom: 70px
}

.pcl-crumbs {
    padding: 18px 0 6px;
    font-size: 13px
}

.pcl-crumbs a:hover {
    color: var(--red)
}

.pcl-crumbs span {
    color: #888;
    margin: 0 8px
}

.pcl-crumbs b {
    font-weight: 600
}

.pcl-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 0 36px
}

.pcl-intro h1 {
    margin: 8px 0 12px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15
}

.pcl-intro p {
    font-size: 16px;
    line-height: 1.7
}

.pcl-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
    margin-bottom: 50px;
    display: grid
}

.pcl-card {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 16px;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 22px -18px #0f172a59
}

.pcl-card:before {
    content: "";
    z-index: 2;
    background: var(--red);
    width: 0;
    height: 3px;
    transition: width .5s;
    position: absolute;
    top: 0;
    left: 0
}

.pcl-card:hover {
    border-color: #f0c3c5;
    transform: translateY(-5px);
    box-shadow: 0 18px 34px -18px #c8161d59
}

.pcl-card:hover:before {
    width: 100%
}

.pcl-media {
    aspect-ratio: 4/3;
    background: radial-gradient(circle at 50% 40%, #fff, var(--pink) 130%);
    border-bottom: 1px solid var(--line);
    place-items: center;
    display: grid;
    position: relative;
    overflow: hidden
}

.pcl-media i {
    color: var(--red);
    opacity: .35;
    font-size: 54px
}

.pcl-media img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    padding: 16px;
    transition: transform .4s;
    position: absolute;
    inset: 0
}

.pcl-card:hover .pcl-media img {
    transform: scale(1.06)
}

.pcl-body {
    flex: 1;
    padding: 18px 20px 6px
}

.pcl-body h2 {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.3
}

.pcl-body h2 a:hover {
    color: var(--red)
}

.pcl-body p {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: 1.65;
    display: -webkit-box;
    overflow: hidden
}

.pcl-btn {
    background: var(--red);
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 14px 20px 20px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s;
    display: flex
}

.pcl-btn i {
    transition: transform .25s
}

.pcl-btn:hover {
    background: var(--red2)
}

.pcl-btn:hover i {
    transform: translate(5px)
}

.pcl-btn:focus-visible,
.pcl-body h2 a:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px
}

@media (width<=1200px) {
    .pcl-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (width<=900px) {
    .pcl-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px
    }
}

@media (width<=560px) {
    .pcl-grid {
        grid-template-columns: 1fr
    }

    .pcl-intro {
        padding-bottom: 24px
    }
}

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

    .pcl-card,
    .pcl-card:before,
    .pcl-media img,
    .pcl-btn i {
        transition: none
    }

    .pcl-card:hover {
        transform: none
    }
}

#plp {
    --plp-accent: #d9381e
}

#plp {
    --plp-sticky-top: 90px
}

@media (width>=901px) {
    #plp .plp-sidebar {
        top: var(--plp-sticky-top);
        max-height: calc(100vh - var(--plp-sticky-top) - 20px);
        align-self: start;
        position: sticky;
        overflow-y: auto
    }
}

#plp .plp-refine {
    border-top: 1px solid #e8e8ec;
    margin-top: 24px;
    padding-top: 18px
}

#plp .plp-refine-head {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    display: flex
}

#plp .plp-refine-head b {
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #1c1c22;
    font-size: 12px
}

#plp .plp-refine-toggle {
    width: 100%;
    font: inherit;
    color: #1c1c22;
    cursor: pointer;
    background: #fff;
    border: 1px solid #d9d9df;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    display: none
}

#plp .plp-refine-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform .2s
}

#plp .plp-refine.is-open-m .plp-refine-toggle svg {
    transform: rotate(180deg)
}

#plp .plp-fgroup {
    border-bottom: 1px solid #ececf0
}

#plp .plp-fhead {
    width: 100%;
    font: inherit;
    color: #1c1c22;
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

#plp .plp-fhead svg {
    color: #8a8a94;
    width: 16px;
    height: 16px;
    transition: transform .2s
}

#plp .plp-fgroup.is-open .plp-fhead svg {
    transform: rotate(180deg)
}

#plp .plp-fbody {
    padding: 0 0 12px;
    display: none
}

#plp .plp-fgroup.is-open .plp-fbody {
    display: block
}

#plp .plp-fopt {
    color: #000;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    display: flex
}

#plp .plp-fopt input {
    accent-color: #a8262d;
    cursor: pointer;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0
}

#plp .plp-fopt em {
    color: #000;
    margin-left: auto;
    font-size: 12px;
    font-style: normal
}

#plp .plp-fopt:hover span {
    color: #000
}

#plp .plp-reset {
    border: 1.5px solid var(--plp-accent);
    color: #a8262d;
    width: 100%;
    font: inherit;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
    background: #fff;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 700;
    transition: background .2s, color .2s;
    display: flex
}

#plp .plp-reset svg {
    width: 15px;
    height: 15px
}

#plp .plp-reset:hover {
    color: #fff;
    background: #c8161d
}

@media (width<=900px) {
    #plp .plp-refine-toggle {
        display: flex
    }

    #plp .plp-refine-main {
        margin-top: 10px;
        display: none
    }

    #plp .plp-refine.is-open-m .plp-refine-main {
        display: block
    }

    #plp .plp-refine-head b {
        display: none
    }

    #plp .plp-refine-head {
        justify-content: flex-end
    }
}

#plp .plp-icmp {
    border-top: 1px solid #e8e8ec;
    margin-top: 15px;
    padding-top: 28px
}

#plp .plp-icmp-head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 16px;
    display: flex
}

#plp .plp-icmp-head h2 {
    text-transform: uppercase;
    color: #1c1c22;
    margin: 0;
    font-size: 16px
}

#plp .plp-icmp-tools {
    color: #000;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    display: flex
}

#plp .plp-icmp-clear {
    font: inherit;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #555;
    cursor: pointer;
    background: #fff;
    border: 1px solid #d6d6dc;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700
}

#plp .plp-icmp-clear:hover {
    color: #a8262d;
    border-color: #a8262d
}

#plp .plp-icmp-table {
    table-layout: fixed;
    border-collapse: collapse;
    color: #333;
    background: #fff;
    border: 1px solid #e8e8ec;
    width: 100%;
    margin-bottom: 50px;
    font-size: 13px
}

#plp .plp-icmp-table th,
#plp .plp-icmp-table td {
    text-align: center;
    vertical-align: middle;
    overflow-wrap: anywhere;
    border-bottom: 1px solid #eee;
    padding: 11px 12px
}

#plp .plp-icmp-table thead th {
    color: #111;
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    font-size: 13.5px
}

#plp .plp-icmp-table th:first-child {
    text-align: left;
    color: #1c1c22;
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff;
    width: 24%;
    font-weight: 700
}

#plp .plp-icmp-table tbody tr:last-child td,
#plp .plp-icmp-table tbody tr:last-child th {
    border-bottom: 0
}

#plp .plp-icmp-table tbody tr:hover td {
    background: radial-gradient(circle at 12% 18%, #c8161d14, #0000 38%), radial-gradient(circle at 92% 8%, #c8161d0f, #0000 34%), radial-gradient(circle at 60% 100%, #c8161d0a, #0000 40%), #fff
}

#plp .plp-icmp-hd {
    justify-content: center;
    align-items: center;
    gap: 6px;
    display: flex
}

#plp .plp-icmp-hd button {
    color: #555;
    cursor: pointer;
    background: #eee;
    border: 0;
    border-radius: 50%;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 14px;
    line-height: 20px
}

#plp .plp-icmp-hd button:hover {
    background: var(--plp-accent);
    color: #fff
}

#plp .plp-icmp-table .is-empty {
    color: #b5b5be;
    font-size: 12px;
    font-weight: 400
}

#plp .plp-ck {
    color: #1f9d55;
    font-size: 15px;
    font-weight: 700
}

#plp .plp-dash {
    color: #b5b5be
}

#plp .plp-icmp-table a {
    color: #a8262d;
    font-weight: 600;
    text-decoration: none
}

#plp .plp-icmp-table a:hover {
    text-decoration: underline
}

#plp .plp-icmp-img {
    object-fit: contain;
    width: 72px;
    height: 72px;
    margin: 0 auto;
    display: block
}

#plp .plp-icmp-desc {
    color: #000;
    font-size: 12px;
    line-height: 1.4
}

#plp .plp-icmp-note {
    color: #8a8a94;
    text-align: center;
    margin: 12px 0 0;
    font-size: 12px
}

#plp .plp-icmp-go {
    background: var(--plp-accent);
    color: #fff;
    min-width: 240px;
    font: inherit;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    padding: 13px 28px;
    font-size: 12.5px;
    font-weight: 700;
    transition: filter .2s, transform .2s
}

#plp .plp-icmp-go:hover:not(:disabled) {
    filter: brightness(.92);
    transform: translateY(-1px)
}

#plp .plp-icmp-go:disabled {
    cursor: not-allowed;
    background: #c9c9cf
}

@media (width<=640px) {
    #plp .plp-icmp-table {
        font-size: 11.5px
    }

    #plp .plp-icmp-table th,
    #plp .plp-icmp-table td {
        padding: 8px 5px
    }

    #plp .plp-icmp-table thead th {
        font-size: 11.5px
    }

    #plp .plp-icmp-table th:first-child {
        width: 25%
    }

    #plp .plp-icmp-hd button {
        width: 16px;
        height: 16px;
        font-size: 12px;
        line-height: 16px
    }

    #plp .plp-icmp-go {
        width: 100%
    }
}

@media (width<=420px) {
    #plp .plp-icmp-table {
        font-size: 10.5px
    }

    #plp .plp-icmp-table th,
    #plp .plp-icmp-table td {
        padding: 7px 3px
    }
}

#plp .plp-catopt span {
    color: #000;
    flex: 1
}

#plp .plp-catopt em {
    color: #000;
    font-size: 12px;
    font-style: normal
}

#plp .plp-catopt.is-active span {
    color: #a8262d;
    font-weight: 600
}

#plp .plp-fnone {
    color: #000;
    margin: 12px 0 0;
    font-size: 12.5px
}

.ul-badge1 {
    letter-spacing: .3px;
    color: #fff;
    background: linear-gradient(135deg, #e53935, #b71c1c);
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 10px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    position: absolute;
    top: 16px;
    left: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px #b71c1c59
}

.ul-badge1:after {
    content: "";
    background: linear-gradient(120deg, #0000, #ffffff73, #0000);
    width: 40%;
    height: 100%;
    animation: 3.5s infinite ulShine;
    position: absolute;
    top: 0;
    left: -60%;
    transform: skew(-20deg)
}

@keyframes ulShine {

    0%,
    65% {
        left: -70%
    }

    to {
        left: 140%
    }
}

.ul-badge {
    z-index: 5;
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    background: linear-gradient(135deg, #1e1e24 0%, #3b3b45 100%);
    border: 1px solid #ffffff1f;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    transition: transform .25s, box-shadow .25s;
    display: inline-flex;
    position: absolute;
    top: 16px;
    left: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px #00000040, inset 0 1px #ffffff26
}

.ul-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px #0000004d
}

.ul-icon {
    background: radial-gradient(circle at 30% 30%, #ff5a52, #c62828 70%);
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    width: 24px;
    height: 24px;
    display: grid;
    position: relative;
    box-shadow: 0 0 12px #e53935b3
}

.ul-icon:before {
    content: "";
    border: 2px solid #ff5a52;
    border-radius: 50%;
    animation: 2s ease-out infinite ulPulse;
    position: absolute;
    inset: 0
}

@keyframes ulPulse {
    0% {
        opacity: .8;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(1.7)
    }
}

.ul-text {
    flex-direction: column;
    line-height: 1.15;
    display: flex
}

.ul-text small {
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #ff8a80;
    font-size: 9.5px;
    font-weight: 600
}

.ul-text strong {
    letter-spacing: .3px;
    font-size: 14px;
    font-weight: 600
}

i.fa-solid.fa-angle-right {
    font-size: 12px
}

.ul-badge:after {
    content: "";
    background: linear-gradient(120deg, #0000, #ffffff40, #0000);
    width: 40%;
    height: 100%;
    animation: 4s infinite ulShine;
    position: absolute;
    top: 0;
    left: -70%;
    transform: skew(-20deg)
}

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

    .ul-icon:before,
    .ul-badge:after {
        animation: none
    }
}

#plp {
    --plp-accent: #d9381e;
    --plp-sticky-top: 90px
}

#plp [hidden] {
    display: none !important
}

@media (width>=901px) {
    #plp .plp-sidebar {
        top: var(--plp-sticky-top);
        max-height: calc(100vh - var(--plp-sticky-top) - 20px);
        align-self: start;
        position: sticky;
        overflow-y: auto
    }
}

#plp .plp-link-btn {
    font: inherit;
    color: #a8262d;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-size: 12px
}

#plp .plp-link-btn:hover {
    text-decoration: underline
}

#plp .plp-cats {
    margin: 0;
    padding: 0;
    list-style: none
}

#plp .plp-cats li {
    border: 0;
    margin: 0;
    padding: 0
}

#plp .plp-catopt {
    color: #3a3a44;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 13px;
    line-height: 1.35;
    display: flex
}

#plp .plp-catopt input {
    accent-color: #a8262d;
    cursor: pointer;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0
}

#plp .plp-catopt span {
    flex: 1
}

#plp .plp-catopt em {
    text-align: center;
    color: #6b6b76;
    background: #f3f3f6;
    border-radius: 999px;
    min-width: 26px;
    padding: 2px 7px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600
}

#plp .plp-catopt:hover span {
    color: #000
}

#plp .plp-side-clear {
    margin-top: 10px
}

#plp .plp-appcat {
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #a8262d;
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    display: block
}

#plp .plp-desc {
    color: #000;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.hl {
    color: var(--red)
}

.pg-head {
    padding: 20px 0 15px;
}

.pg-head .tag {
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--red);
    font-size: 13px;
    font-weight: 700;
    display: inline-block
}

.pg-head .tag:before {
    content: "";
    background: var(--red);
    vertical-align: middle;
    width: 22px;
    height: 2px;
    margin-right: 8px;
    display: inline-block
}

.pg-head h1 {
    margin: 10px 0 0;
    /* font-size: clamp(26px, 4vw, 38px); */
    font-weight: 700;
    line-height: 1.2;
}

.pg-head .pg-lead {
    color: var(--mut);
    /* max-width: 680px; */
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.7
}

.pg-body {
    padding: 50px 0 60px
}

.pg-body h2 {
    margin: 0px 0 16px;
    font-size: 24px;
    font-weight: 700
}

.pg-body>.wrap>h2:first-child {
    margin-top: 0
}

.pg-split {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
    gap: 28px;
    margin-top: 10px;
    display: grid
}

.pg-aside {
    /* background: var(--pink); */
    /* border: 1px solid #f0c3c5; */
        background: radial-gradient(circle at 12% 18%, rgba(200, 22, 29, 0.08), transparent 38%), radial-gradient(circle at 92% 8%, rgba(200, 22, 29, 0.06), transparent 34%), radial-gradient(circle at 60% 100%, rgba(200, 22, 29, 0.04), transparent 40%), rgb(255, 255, 255);
    border-radius: 18px;
    padding: 26px;
    margin-bottom: 20px;
}

.pg-aside h3 {
    margin-bottom: 8px;
    font-size: 19px;
    font-weight: 700
}

.pg-aside p {
    color: var(--mut);
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.65
}

.pg-aside small {
    color: var(--mut);
    margin-top: 14px;
    font-size: 14px;
    display: block
}

.pg-aside-wide {
    text-align: center;
    margin-top: 34px
}

.pg-aside-wide p {
    margin-inline: auto;
    max-width: 640px;
    margin-bottom: 18px
}

.pg-steps {
    counter-reset: step;
    gap: 14px;
    list-style: none;
    display: grid
}

.pg-steps li {
    counter-increment: step;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px 16px 62px;
    position: relative
}

.pg-steps li:before {
    content: counter(step);
    background: var(--red);
    color: #fff;
    border-radius: 50%;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 14px;
    font-weight: 700;
    display: grid;
    position: absolute;
    top: 16px;
    left: 18px
}

.pg-steps b {
    font-size: 16px;
    display: block
}

.pg-steps span {
    color: var(--mut);
    font-size: 15px;
    line-height: 1.6
}

.pg-dl {
    gap: 10px;
    display: grid
}

.pg-dl>div {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    grid-template-columns: 190px 1fr;
    gap: 14px;
    padding: 14px 18px;
    display: grid
}

.pg-dl dt {
    font-size: 15px;
    font-weight: 700
}

.pg-dl dd {
    color: var(--mut);
    font-size: 15px;
    line-height: 1.6
}

.vmt-grid-4 {
    grid-template-columns: repeat(4, 1fr)
}

.doc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    display: grid
}

.doc-card {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    transition: all .2s;
    display: flex
}

.doc-card:hover {
    border-color: #f0c3c5;
    transform: translateY(-2px)
}

.doc-card .ic {
    background: var(--pink);
    width: 44px;
    height: 44px;
    color: var(--red);
    border-radius: 10px;
    flex: none;
    place-items: center;
    font-size: 20px;
    display: grid
}

.doc-card b {
    font-size: 16px;
    display: block
}

.doc-card>div span {
    color: var(--mut);
    font-size: 14px
}

.doc-state {
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--red);
    background: var(--pink);
    border-radius: 999px;
    flex: none;
    margin-left: auto;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700
}

.job-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    display: grid
}

.job-card {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 16px;
    flex-direction: column;
    padding: 22px;
    transition: all .2s;
    display: flex;
    box-shadow: 0 10px 30px -22px #0f172a4d
}

.job-card:hover {
    border-color: #f0c3c5;
    transform: translateY(-4px)
}

.job-card h3 {
    font-size: 18px;
    font-weight: 700
}

.job-meta {
    color: var(--mut);
    flex-wrap: wrap;
    gap: 14px;
    margin: 8px 0 10px;
    font-size: 13px;
    display: flex
}

.job-meta i {
    color: var(--red);
    margin-right: 4px
}

.job-card p {
    color: var(--mut);
    font-size: 15px;
    line-height: 1.6
}

.job-apply {
    color: var(--red);
    margin-top: auto;
    padding-top: 14px;
    font-size: 14px;
    font-weight: 700
}

.job-apply i {
    margin-left: 6px
}

.blog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    display: grid
}

.blog-card {
    /* border: 1px solid var(--line); */
    background: #fff;
    border-radius: 16px;
    flex-direction: column;
    transition: all .2s;
    display: flex;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px -22px #0f172a4d
}

.blog-card:hover {
    border-color: #f0c3c5;
    transform: translateY(-4px)
}

.blog-img {
    background: var(--soft);
    height: 210px;
    position: relative;
    overflow: hidden
}

.blog-body {
    flex-direction: column;
    flex: 1;
    padding: 18px;
    display: flex
}

.blog-topic {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--red);
    background: var(--pink);
    border-radius: 999px;
    align-self: flex-start;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700
}

.blog-card h3 {
    margin: 10px 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35
}

.blog-card p {
    color: var(--mut);
    font-size: 15px;
    line-height: 1.6
}

.blog-soon {
    color: var(--mut);
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    font-weight: 700
}

.faq {
    gap: 12px;
    display: grid
}

.faq-item {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    overflow: hidden
}

.faq-item[open] {
    border-color: #f0c3c5
}

.faq-item summary {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 600;
    list-style: none;
    display: flex
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item summary i {
    color: var(--red);
    flex: none;
    transition: transform .25s
}

.faq-item[open] summary i {
    transform: rotate(180deg)
}

.faq-a {
    padding: 0 20px 18px
}

.faq-a p {
    color: var(--mut);
    font-size: 15px;
    line-height: 1.75
}

.legal {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 18px;
    /* max-width: 860px; */
    padding: 30px
}

.legal h2 {
    margin: 18px 0 8px;
    font-size: 18px;
    color: #c8161d;
}

.legal h2:first-child {
    margin-top: 0
}

.legal p {
    color: var(--mut);
    font-size: 15px;
    line-height: 1.8
}

.legal a {
    color: var(--red);
    font-weight: 600;
    text-decoration: underline
}

@media (width<=1100px) {

    .vmt-grid-4,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (width<=900px) {
    .pg-split {
        grid-template-columns: 1fr
    }
}

@media (width<=760px) {
    .pg-head {
        padding: 18px 0 26px
    }

    .pg-head .pg-lead {
        font-size: 16px
    }

    .vmt-grid-4,
    .doc-grid,
    .job-grid,
    .blog-grid {
        grid-template-columns: 1fr
    }

    .pg-dl>div {
        grid-template-columns: 1fr;
        gap: 2px
    }

    .doc-card {
        flex-wrap: wrap
    }

    .doc-state {
        margin-left: 58px
    }

    .legal {
        padding: 22px 18px
    }

    .faq-item summary {
        padding: 15px 16px;
        font-size: 15px
    }

    .faq-a {
        padding: 0 16px 16px
    }
}

.cmp-add {
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    background: #fff;
    border-radius: 8px;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    transition: all .2s;
    display: inline-flex
}

.cmp-add:hover {
    color: var(--red);
    border-color: #f0c3c5
}

.cmp-add.on {
    background: var(--red);
    border-color: var(--red);
    color: #fff
}

.cmp-tray {
    z-index: 60;
    border-top: 1px solid var(--line);
    background: #fff;
    padding: 12px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -10px 30px -18px #0f172a73
}

.cmp-tray-in {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    display: flex
}

.cmp-tray-title {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--red);
    flex: none;
    font-size: 14px
}

.cmp-tray-items {
    flex-wrap: wrap;
    flex: 1;
    gap: 8px;
    min-width: 0;
    display: flex
}

.cmp-chip {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    font-size: 13px;
    display: inline-flex
}

.cmp-chip img {
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    width: 34px;
    height: 34px
}

.cmp-chip button {
    color: var(--mut);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0 4px
}

.cmp-chip button:hover {
    color: var(--red)
}

.cmp-tray-acts {
    flex: none;
    align-items: center;
    gap: 14px;
    display: flex
}

.cmp-link {
    color: var(--red);
    cursor: pointer;
    background: 0 0;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline
}

.cmp-picker {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 18px;
    margin-bottom: 26px;
    padding: 22px
}

.cmp-picker-head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    display: flex
}

.cmp-picker-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700
}

.cmp-picker-acts {
    gap: 14px;
    display: flex
}

.cmp-groups {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    display: grid
}

.cmp-group {
    border: 0;
    min-width: 0
}

.cmp-group legend {
    margin-bottom: 8px
}

.cmp-chk {
    cursor: pointer;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 14px;
    display: flex
}

.cmp-chk input {
    width: 16px;
    height: 16px;
    accent-color: var(--red);
    flex: none
}

.cmp-chk-group span {
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--red);
    font-size: 13px;
    font-weight: 700
}

.cmp-params {
    gap: 2px;
    padding-left: 4px;
    display: grid
}

.cmp-wrap {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 18px;
    overflow-x: auto
}

.cmp-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px
}

.cmp-table th,
.cmp-table td {
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    padding: 14px 16px;
    font-size: 15px
}

.cmp-table tbody th[scope=row] {
    color: var(--ink);
    background: var(--bg);
    width: 220px;
    font-weight: 600
}

.cmp-table td {
    color: var(--mut)
}

.cmp-section th {
    background: var(--pink);
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
    font-weight: 700
}

.cmp-corner {
    background: var(--bg)
}

.cmp-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 170px;
    display: flex
}

.cmp-head img {
    object-fit: contain;
    background: #fff;
    width: 100%;
    max-width: 140px;
    height: 110px
}

.cmp-model {
    color: var(--red);
    letter-spacing: .03em;
    font-size: 12px;
    font-weight: 700
}

.cmp-name {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4
}

.cmp-name:hover {
    color: var(--red)
}

.cmp-remove {
    color: var(--mut);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-size: 12px
}

.cmp-remove:hover {
    color: var(--red)
}

.cmp-foot {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    display: flex
}

.cmp-note {
    color: var(--mut);
    margin-bottom: 18px;
    font-size: 15px
}

.cmp-empty {
    text-align: center;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 18px;
    padding: 50px 24px
}

.cmp-empty .ic {
    background: var(--pink);
    width: 64px;
    height: 64px;
    color: var(--red);
    border-radius: 50%;
    place-items: center;
    margin: 0 auto 16px;
    font-size: 26px;
    display: grid
}

.cmp-empty h2 {
    margin-bottom: 8px;
    font-size: 22px
}

.cmp-empty p {
    color: var(--mut);
    max-width: 420px;
    margin: 0 auto 18px
}

.app-chips {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 16px;
    display: grid
}

.app-chip {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    transition: all .2s;
    display: flex
}

.app-chip:hover {
    border-color: #f0c3c5;
    transform: translateY(-2px)
}

.app-chip .ic {
    background: var(--pink);
    width: 40px;
    height: 40px;
    color: var(--red);
    border-radius: 10px;
    flex: none;
    place-items: center;
    font-size: 17px;
    display: grid
}

.app-chip b {
    color: var(--ink);
    font-size: 15px;
    display: block
}

.app-chip small {
    color: var(--mut);
    font-size: 13px
}

@media (width<=900px) {
    .cmp-table tbody th[scope=row] {
        width: 150px
    }
}

@media (width<=760px) {
    .cmp-tray-in {
        gap: 10px
    }

    .cmp-tray-title {
        width: 100%
    }

    .cmp-tray-acts {
        justify-content: space-between;
        width: 100%
    }

    .cmp-chip b {
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 90px;
        overflow: hidden
    }

    .cmp-picker {
        padding: 18px 16px
    }

    .cmp-table th,
    .cmp-table td {
        padding: 11px 12px;
        font-size: 14px
    }

    body:has(.cmp-tray:not([hidden])) {
        padding-bottom: 96px
    }
}

.pg-steps-plain li {
    padding-left: 52px
}

.pg-steps-plain li:before {
    content: "";
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: 900;
    left: 16px
}

.logo-card {
    /* aspect-ratio: auto;
    text-align: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px; */
    /* min-height: 170px; */
    padding: 16px 14px 16px;
    display: flex
}

/* .logo-box {
    flex: none;
    place-items: center;
    width: 100%;
    height: 72px;
    display: grid
} */

/* .logo-box img {
    object-fit: contain;
    filter: grayscale();
    opacity: .85;
    max-width: 100%;
    max-height: 100%;
    transition: all .3s
} */

/* .logo-card:hover .logo-box img,
.logo-card:focus-visible .logo-box img {
    filter: none;
    opacity: 1
} */

.client-name {
    color: var(--ink);
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    display: none;
    overflow: hidden
}

.logo-box .fallback {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 0 4px;
    font-size: 15px;
    line-height: 1.35;
    display: -webkit-box;
    overflow: hidden
}

.logo-card:has(.client-name) .logo-box .fallback {
    color: #bbb;
    font-size: 13px
}

.lb-view .fallback {
    color: #555;
    text-align: center;
    padding: 0 16px;
    font-family: Times New Roman, Times, serif;
    font-size: 26px;
    font-weight: 700
}

.lb-thumbs .fallback {
    color: #777;
    text-align: center;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 2px;
    font-size: 10px;
    line-height: 1.2;
    display: -webkit-box;
    overflow: hidden
}

@media (width<=640px) {
    .logo-card {
        min-height: 150px;
        padding: 14px 10px 28px
    }

    .logo-box {
        height: 58px
    }

    .client-name {
        font-size: 12.5px
    }
}

.c-icon i {
    color: #fff;
    font-size: 22px
}

.enquiry {
    padding: 10px 0 55px
}

.enquiry .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px
}

.enq-form {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    max-width: 900px;
    padding: 28px;
    box-shadow: 0 2px 8px #00000008
}

.enq-row {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    display: grid
}

.enq-about {
    background: var(--pink);
    border-left: 4px solid var(--red);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 12px 16px;
    font-size: 15px
}

.field {
    margin-bottom: 18px
}

.field label {
    color: var(--ink);
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    display: block
}

.field input,
.field textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s
}

.field textarea {
    resize: vertical;
    min-height: 130px
}

.field input:focus,
.field textarea:focus {
    border-color: var(--red);
    outline: 0;
    box-shadow: 0 0 0 3px #c8161d1f
}

.field input[aria-invalid=true],
.field textarea[aria-invalid=true] {
    border-color: var(--red);
    background: snow
}

.field input::placeholder,
.field textarea::placeholder {
    color: #9aa3b0
}

.req {
    color: var(--red)
}

.err {
    color: var(--red);
    margin-top: 5px;
    font-size: 13px;
    display: block
}

.enq-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 4px;
    display: flex
}

.enq-actions small {
    color: var(--mut);
    font-size: 13px
}

.alert {
    border-radius: 12px;
    max-width: 900px;
    margin-bottom: 22px;
    padding: 14px 18px;
    font-size: 15px
}

.alert-success {
    color: #0b6b3a;
    background: #ecfdf3;
    border: 1px solid #a6e8c0
}

.alert-error {
    color: #9b1c23;
    background: #fff1f1;
    border: 1px solid #f3b7b9
}

.alert ul {
    margin: 8px 0 0;
    padding-left: 20px;
    list-style: outside
}

.alert p {
    font-weight: 600
}

.loc-card iframe {
    background: #f1f3f7;
    border: 0;
    border-radius: 10px;
    width: 100%;
    display: block
}

@media (width<=760px) {
    .enq-row {
        grid-template-columns: 1fr
    }

    .enq-form {
        padding: 20px 16px
    }

    .loc-card iframe {
        height: 300px
    }
}

.panel .dl {
    gap: 10px;
    max-width: 620px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid
}

.panel .dl li {
    margin: 0
}

.panel .dl a {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    display: flex
}

.panel .dl a:hover {
    border-color: #f0c3c5;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -18px #0f172a66
}

.dl-main {
    align-items: center;
    gap: 14px;
    min-width: 0;
    display: flex
}

.dl-main>span:last-child {
    color: var(--ink);
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    display: block
}

.dl-main small {
    color: var(--mut);
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    display: block
}

.ico {
    background: var(--pink);
    width: 38px;
    height: 38px;
    color: var(--red);
    border-radius: 10px;
    flex: none;
    place-items: center;
    display: grid
}

.ico svg {
    width: 18px;
    height: 18px
}

.dl-cta {
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: .03em;
    flex: none;
    font-size: 12px;
    font-weight: 700
}

.tab-product .v {
    color: var(--mut);
    text-align: center;
    margin-top: 2px;
    font-size: 12px;
    display: block
}

.panel .sub {
    color: var(--mut);
    max-width: 620px;
    font-size: 15px;
    line-height: 1.75
}

.panel .sub a {
    color: var(--red);
    font-weight: 600;
    text-decoration: underline
}

.app-intro {
    padding-top: 0
}

.app-copy {
    max-width: 760px;
    color: var(--mut);
    font-size: 16px;
    line-height: 1.8
}

.plp-layout-right {
    grid-template-columns: minmax(0, 1fr) 260px
}

.app-products-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700
}

@media (width<=900px) {
    .plp-layout-right {
        grid-template-columns: 1fr
    }

    .plp-layout-right .plp-sidebar {
        order: 2
    }

    .plp-layout-right .plp-main {
        order: 1
    }
}

.plp-search {
    border: 1px solid var(--plp-line);
    background: #fff;
    border-radius: 10px;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 440px;
    transition: border-color .2s, box-shadow .2s;
    display: flex;
    position: relative
}

.plp-search:focus-within {
    border-color: var(--red);
    box-shadow: 0 0 0 3px #c8161d1a
}

.plp-search-icon {
    color: #9aa3b0;
    flex: none;
    place-items: center;
    width: 40px;
    font-size: 14px;
    display: grid
}

.plp-search input[type=search] {
    min-width: 0;
    font: inherit;
    color: var(--plp-ink);
    appearance: none;
    background: 0 0;
    border: 0;
    flex: 1;
    padding: 11px 4px 11px 0;
    font-size: 14px
}

.plp-search input[type=search]:focus {
    outline: 0
}

.plp-search input[type=search]::placeholder {
    color: #9aa3b0
}

.plp-search input[type=search]::-webkit-search-cancel-button {
    display: none
}

.plp-search-clear {
    color: #9aa3b0;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: 13px;
    transition: background .2s, color .2s;
    display: grid
}

.plp-search-clear:hover {
    background: var(--pink);
    color: var(--red)
}

.plp-search button[type=submit] {
    background: var(--red);
    color: #fff;
    height: 36px;
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 7px;
    flex: none;
    margin: 4px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s
}

.plp-search button[type=submit]:hover {
    background: var(--red2)
}

.plp-toolbar {
    flex-wrap: wrap;
    margin-bottom: 20px
}

.plp-count {
   color:#000;
    white-space: nowrap;
    margin: 0;
    font-size: 13px
}

.plp-side-title {
    border-bottom: 1px solid var(--plp-line);
    padding-bottom: 10px
}

#plp .plp-cats li a {
    color: #3a3a44;
    border-left: 3px solid #0000;
    border-radius: 0 6px 6px 0;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 6px 9px 12px;
    font-size: 13.5px;
    line-height: 1.4;
    transition: color .2s, background .2s, border-color .2s;
    display: flex
}

#plp .plp-cats li a:hover {
    color: var(--red);
    background: #fafafb
}

#plp .plp-cats li a.is-active {
    border-left-color: var(--red);
    background: var(--pink);
    color: var(--red);
    padding-left: 12px;
    font-weight: 600
}

#plp .plp-cats li a span {
    min-width: 0;
    color:#000;
    flex: 1;
    font-size: 13.5px
}

.top span a {
    color: #fff;
}
#plp .plp-cats li a em {
   color:#000;
    background: #f1f2f5;
    border-radius: 999px;
    flex: none;
    padding: 2px 8px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600
}

#plp .plp-cats li a.is-active em {
    background: var(--red);
    color: #fff
}

.plp-grid {
    gap: 20px
}

.plp-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px
}

.plp-card:hover {
    box-shadow: 0 12px 28px -20px #0f172a73
}

.plp-info {
    gap: 0;
    padding: 14px 16px 16px
}

.plp-model {
    letter-spacing: .04em;
    color: var(--red);
    background: var(--pink);
    border-radius: 4px;
    align-self: flex-start;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block
}

.plp-info h3 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 9px 0 6px;
    font-size: 14px;
    line-height: 1.45;
    display: -webkit-box;
    overflow: hidden
}

.plp-info h3 a {
    color: var(--plp-ink);
    transition: color .2s
}

.plp-info h3 a:hover {
    color: var(--red)
}

.plp-info>p {
   color:#000;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.55;
    display: -webkit-box;
    overflow: hidden
}

.plp-actions {
    border-top: 1px solid #f0f0f2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px
}

.plp-details {
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    display: inline-flex
}

.plp-actions .cmp-add {
    padding: 6px 10px;
    font-size: 12px
}

.plp-pager .pager {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.pager-btn {
    border: 1px solid var(--plp-line);
    color: #55555b;
    background: #fff;
    border-radius: 8px;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    transition: background .2s, color .2s, border-color .2s;
    display: grid
}

.pager-btn:hover {
    border-color: var(--red);
    color: var(--red)
}

.pager-btn.is-on {
    background: var(--red);
    border-color: var(--red);
    color: #fff
}

.pager-btn.is-off {
    opacity: .4;
    pointer-events: none
}

.pager-arrow i {
    font-size: 13px;
    line-height: 1
}

.pager-gap {
   color:#000;
    padding: 0 4px
}

.pager-info {
    text-align: center;
   color:#000;
    margin-top: 12px;
    font-size: 12.5px
}

@media (width<=760px) {
    .plp-search {
        max-width: none
    }

    .plp-toolbar {
        gap: 10px
    }

    .plp-info {
        padding: 12px 13px 14px
    }

    .plp-actions {
        flex-wrap: wrap
    }
}

.plp-thumb {
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #f0f0f2;
    flex: none;
    justify-content: center;
    align-items: center;
    min-width: 0;
    height: 190px;
    min-height: 0;
    padding: 14px;
    display: flex;
    overflow: hidden
}

.plp-thumb img,
.plp-pimg {
    object-fit: contain;
    object-position: center;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: block
}

.plp-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr))
}

.plp-side-head {
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    display: flex
}

.plp-side-reset {
    color: var(--red);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline
}

#plp .plp-catopt {
    color: #3a3a44;
    cursor: pointer;
    border-left: 3px solid #0000;
    border-radius: 0 6px 6px 0;
    align-items: center;
    gap: 9px;
    padding: 8px 6px 8px 9px;
    font-size: 13.5px;
    line-height: 1.4;
    transition: color .2s, background .2s, border-color .2s;
    display: flex
}

#plp .plp-catopt:hover {
    color: var(--red);
    background: #fafafb
}

#plp .plp-catopt input {
    width: 15px;
    height: 15px;
    accent-color: var(--red);
    cursor: pointer;
    flex: none;
    margin: 0
}

#plp .plp-catopt.is-active {
    border-left-color: var(--red);
    background: var(--pink);
    color: var(--red);
    font-weight: 600
}

#plp .plp-catopt:has(input:checked) {
    border-left-color: var(--red);
    background: var(--pink);
    color: var(--red);
    font-weight: 600
}

#plp .plp-catopt span {
    min-width: 0;
    color:#000;
    flex: 1;
    font-size: 13.5px
}

#plp .plp-catopt em {
   color:#000;
    background: #f1f2f5;
    border-radius: 999px;
    flex: none;
    padding: 2px 8px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600
}

#plp .plp-catopt.is-active em {
    background: var(--red);
    color: #fff
}

#plp .plp-catopt:has(input:checked) em {
    background: var(--red);
    color: #fff
}

.plp-filter-apply {
    background: var(--red);
    color: #fff;
    width: 100%;
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    margin-top: 14px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700
}

.plp-filter-apply[hidden],
.plp-grid[hidden],
.plp-pager[hidden],
.plp-empty[hidden] {
    display: none
}

.plp-empty {
    text-align: center;
    border: 1px dashed var(--plp-line);
   color:#000;
    background: #fff;
    border-radius: 12px;
    padding: 48px 24px
}

.plp-empty p {
    margin-bottom: 14px
}

.plp-link-btn {
    background: var(--red);
    color: #fff;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    display: inline-block
}

#plp .plp-fhead {
    width: 100%;
    font: inherit;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1c1c22;
    cursor: pointer;
    text-align: left;
    background: 0 0;
    border: 0;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    font-size: 12px;
    font-weight: 700;
    display: flex
}

#plp .plp-fhead i {
   color:#000;
    font-size: 12px;
    transition: transform .2s
}

#plp .plp-fgroup.is-open .plp-fhead i {
    transform: rotate(180deg)
}

#plp .plp-fbody {
    padding-bottom: 10px;
    display: none
}

#plp .plp-fopt span {
    flex: 1;
    min-width: 0
}

.plp-toolbar-end {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    display: flex
}

.plp-sort span {
   color:#000;
    white-space: nowrap;
    font-size: 13px
}

@media (width<=760px) {
    .plp-toolbar-end {
        justify-content: space-between;
        width: 100%;
        margin-left: 0
    }
}

#plp .plp-catopt.is-single:before {
    content: "";
    background: #fff;
    border: 1.5px solid #c9c9ce;
    border-radius: 50%;
    flex: none;
    width: 15px;
    height: 15px;
    transition: border-color .2s, box-shadow .2s
}

#plp .plp-catopt.is-single:hover:before {
    border-color: var(--red)
}

#plp .plp-catopt.is-single.is-active:before {
    border-color: var(--red);
    box-shadow: inset 0 0 0 3px var(--red)
}

.nav-progress {
    --p: 0%;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    height: 3px;
    transition: opacity .2s;
    position: fixed;
    inset: 0 0 auto
}

.nav-progress.is-on {
    opacity: 1
}

.nav-progress.is-done {
    opacity: 0
}

.nav-progress span {
    width: var(--p, 0%);
    background: linear-gradient(90deg, var(--red), #ff6b70);
    height: 100%;
    transition: width .18s;
    display: block;
    box-shadow: 0 0 10px #c8161d8c
}

@view-transition {
    navigation: auto
}

::view-transition-old(root) {
    animation: .18s both nav-fade-out
}

::view-transition-new(root) {
    animation: .22s both nav-fade-in
}

@keyframes nav-fade-out {
    to {
        opacity: 0
    }
}

@keyframes nav-fade-in {
    0% {
        opacity: 0
    }
}

@media (prefers-reduced-motion:reduce) {
    ::view-transition-old(root) {
        animation: none
    }

    ::view-transition-new(root) {
        animation: none
    }

    .nav-progress span {
        transition: none
    }
}

.plp-cat-picker {
    display: none
}

.plp-select {
    position: relative
}

.plp-select select {
    width: 100%;
    font: inherit;
    color: var(--plp-ink);
    border: 1px solid var(--plp-line);
    appearance: none;
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
    padding: 12px 38px 12px 14px;
    font-size: 14px;
    font-weight: 600
}

.plp-select select:focus {
    border-color: var(--red);
    outline: 0;
    box-shadow: 0 0 0 3px #c8161d1f
}

.plp-select i {
    pointer-events: none;
   color:#000;
    font-size: 13px;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%)
}

.plp-picker-toggle {
    width: 100%;
    font: inherit;
    color: var(--plp-ink);
    border: 1px solid var(--plp-line);
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .2s, box-shadow .2s;
    display: flex
}

.plp-picker-toggle:focus-visible {
    border-color: var(--red);
    outline: 0;
    box-shadow: 0 0 0 3px #c8161d1f
}

.plp-picker-label {
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.plp-picker-label em {
    color: #fff;
    background: var(--red);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 1
}

.plp-picker-label em[hidden] {
    display: none
}

.plp-picker-toggle i {
   color:#000;
    font-size: 13px;
    transition: transform .2s
}

.plp-sidebar.is-picking .plp-picker-toggle i {
    transform: rotate(180deg)
}

.plp-sidebar.is-picking .plp-picker-toggle {
    border-color: var(--red);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

@media (width<=900px) {
    .plp-sidebar.has-picker .plp-cat-picker {
        display: block
    }

    .plp-sidebar.has-picker .plp-cats {
        border: 1px solid var(--red);
        background: #fff;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        max-height: 46vh;
        margin: 0;
        padding: 6px;
        display: none;
        overflow-y: auto
    }

    .plp-sidebar.has-picker.is-picking .plp-cats {
        display: block
    }

    .plp-sidebar.has-picker .plp-side-head {
        margin-bottom: 10px
    }

    .plp-sidebar {
        padding: 16px
    }
}

@media (width<=1100px) {
    .plp-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 16px
    }

    .plp-thumb {
        height: 170px
    }
}

@media (width<=900px) {
    .plp-grid {
        grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
        gap: 14px
    }

    .plp-thumb {
        height: 160px
    }
}

@media (width<=640px) {
    .plp-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .plp-thumb {
        height: 200px;
        padding: 16px
    }

    .plp-info {
        padding: 14px 16px 16px
    }

    .plp-info h3 {
        -webkit-line-clamp: 3;
        line-clamp: 3;
        font-size: 15px
    }

    .plp-info>p {
        font-size: 13px
    }

    .plp-actions {
        padding-top: 12px
    }
}

.apps-index {
    padding: 10px 0 60px
}

.app-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    display: grid
}

.app-card {
    border: 1px solid var(--line);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
    background: #fff;
    border-radius: 16px;
    flex-direction: column;
    display: flex;
    overflow: hidden;
    box-shadow: 0 10px 30px -22px #0f172a59
}

.app-card:hover {
    border-color: #f0c3c5;
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -24px #0f172a80
}

.app-card-media {
    aspect-ratio: 16/10;
    background: var(--soft);
    position: relative;
    overflow: hidden
}

.app-card-media:before,
.blog-img:before {
    content: "";
    background: var(--photo, none) center / cover no-repeat;
    filter: blur(22px)saturate(1.15)brightness(.82);
    position: absolute;
    inset: -12%;
    transform: scale(1.06)
}

.app-card-media img,
.blog-img img {
    z-index: 1;
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
    display: block;
    position: relative
}

.app-card-media:after {
    content: "";
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(#0f172a59 0%, #0f172a00 42% 100%);
    position: absolute;
    inset: 0
}

.app-card-fallback {
    background: linear-gradient(135deg, var(--pink), #fff);
    position: absolute;
    inset: 0
}

.app-card-icon {
    z-index: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    border-radius: 10px;
    place-items: center;
    width: 38px;
    height: 38px;
    display:none;
    font-size: 16px;
    /* display: grid; */
    position: absolute;
    top: 12px;
    left: 12px;
    box-shadow: 0 4px 12px #8a1c2c59
}

.app-card-count {
    z-index: 1;
    letter-spacing: .02em;
    color: var(--ink);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #fffffff0;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 700;
    position: absolute;
    top: 14px;
    right: 12px
}

.app-card-body {
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
    display: flex
}

.app-card-body h3 {
    color: var(--ink);
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3
}

.app-card:hover .app-card-body h3 {
    color: var(--red)
}

.app-card-body p {
    color: var(--mut);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden
}

.app-card-cta {
    color: var(--red);
    border-top: 1px solid #f0f0f2;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex
}

.app-card-cta i {
    transition: transform .25s var(--ease)
}

.app-card:hover .app-card-cta i {
    transform: translate(4px)
}

@media (width<=900px) {
    .app-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 18px
    }
}

@media (width<=640px) {
    .app-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .app-card-media {
        aspect-ratio: 16/9
    }
}

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

    .app-card,
    .app-card-cta i {
        transition: none
    }

    .app-card:hover {
        transform: none
    }
}

.pdots button {
    cursor: pointer;
    width: 8px;
    height: 8px;
    transition: width .25s var(--ease), background .25s;
    background: #d8d4ce;
    border: 0;
    border-radius: 999px;
    padding: 0
}

.pdots button:hover {
    background: #bdb8b1
}

.pdots button.on {
    background: var(--red);
    width: 26px
}

.pdots button:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px
}

.ms {
    z-index: 20;
    position: relative
}

.ms-panel {
    z-index: 30;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    text-align: left;
    background: #fff;
    border-radius: 14px;
    max-height: min(70vh, 520px);
    padding: 8px;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    overflow-y: auto;
    box-shadow: 0 24px 60px -24px #0f172a73
}

.ms-panel[hidden] {
    display: none
}

.ms-group+.ms-group {
    border-top: 1px solid #f0f0f2;
    margin-top: 6px;
    padding-top: 6px
}

.ms-group-title {
    letter-spacing: .08em;
    text-transform: uppercase;
   color:#000;
    padding: 8px 10px 6px;
    font-size: 11px;
    font-weight: 700
}

.ms-option {
    color: var(--ink);
    border-radius: 10px;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    transition: background .15s;
    display: flex
}

.ms-option:hover,
.ms-option.is-active {
    background: var(--pink)
}

.ms-option img {
    object-fit: contain;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 3px
}

.ms-option-icon {
    background: var(--pink);
    width: 42px;
    height: 42px;
    color: var(--red);
    border-radius: 8px;
    flex: none;
    place-items: center;
    font-size: 15px;
    display: grid
}

.ms-option-body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.ms-option-body b {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    overflow: hidden
}

.ms-option-body small {
   color:#000;
    font-size: 12px
}

.ms-all {
    color: var(--red);
    text-align: center;
    border-top: 1px solid #f0f0f2;
    border-radius: 0 0 10px 10px;
    margin-top: 6px;
    padding: 11px 10px;
    font-size: 13px;
    font-weight: 700;
    transition: background .15s;
    display: block
}

.ms-all:hover,
.ms-all.is-active {
    background: var(--pink)
}

.ms-none {
    text-align: center;
   color:#000;
    padding: 22px 12px;
    font-size: 14px
}

@media (width<=640px) {
    .ms-panel {
        max-height: 62vh;
        padding: 6px
    }

    .ms-option img,
    .ms-option-icon {
        width: 36px;
        height: 36px
    }
}

.find {
    z-index: 35;
    position: relative
}

section:has([data-instant-search]) {
    z-index: 35;
    position: relative
}

.find:has(.ms-panel:not([hidden])) {
    z-index: 45
}

section:has(.ms-panel:not([hidden])) {
    z-index: 45
}

@media (width<=640px) {
    .blog-img {
        height: 240px
    }
}

.rtrack .plp-card {
    content-visibility: visible;
    contain-intrinsic-size: auto;
    flex: none
}

.related {
    padding: 0 0 50px
}

.related-head h2 {
    font-size: 26px;
    font-weight: 700
}

@media (width<=640px) {
    .rtrack {
        gap: 14px
    }
}

.rnav[hidden],
.related .dots[hidden] {
    display: none
}











/* ---------- banner ---------- */
.ab-hero {
  position: relative;
  padding: 90px 0;
  text-align: center;
  color: #fff;
  background-color: var(--ab-red);
  background-image: var(--ab-banner, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* light red overlay: change the last number (0.55) to make it lighter or darker */
.ab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(200, 22, 29, 0.55);
}
.ab-hero .container { position: relative; z-index: 1; }
.ab-hero h1 { font-size: 40px; font-weight: 700; margin: 0 0 10px; color: #fff; }
.ab-crumb { font-size: 14px; color: rgba(255,255,255,.9); }
.ab-crumb a { color: #fff; text-decoration: none; }
.ab-crumb a:hover { text-decoration: underline; }
.ab-crumb span { margin: 0 8px; }

/* ---------- shared bits ---------- */
.ab-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ab-red); margin-bottom: 10px;
}
.ab-about h2, .ab-mission h2 {
  font-size: 32px; line-height: 1.25; font-weight: 700; color: var(--ab-heading); margin: 0 0 18px;
}
.ab-about h2 em, .ab-mission h2 em { font-style: italic; font-weight: 500; color: var(--ab-red); }
.ab-red { color: var(--ab-red); }

.ab-btn {
  display: inline-block; background: var(--ab-red); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 13px 28px; border-radius: 30px; transition: background .2s;
}
.ab-btn:hover { background: var(--ab-red-dark); color: #fff; }
.ab-btn i { margin-left: 6px; font-size: 12px; }

/* ---------- company about ---------- */
.ab-about { padding: 80px 0; background: #fff; }
.ab-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.ab-collage { position: relative; padding: 0 70px 90px 0; }
.ab-collage img { display: block; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.15); background: #f0f0f0; }
.ab-img-1 { width: 100%; height: 520px; }
.ab-img-2 {
  position: absolute; right: 0; bottom: 0; width: 56%; height: 230px;
  border: 6px solid #fff; box-sizing: border-box;
}
.ab-exp {
  position: absolute; top: 28px; right: 18px; z-index: 2;
  background: var(--ab-red); color: #fff; padding: 14px 30px 14px 22px;
  display: flex; align-items: center; gap: 10px;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.ab-exp strong { font-size: 34px; line-height: 1; }
.ab-exp span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; line-height: 1.3; }

.ab-about-text p { font-size: 15.5px; line-height: 1.95; color: #000; margin: 0 0 14px; }
.ab-about-text p b { color: var(--ab-red); }
.ab-sub { font-size: 17px; font-weight: 700; color: var(--ab-heading); margin: 22px 0 12px; }
.ab-checks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.ab-checks li { font-size: 15px; color: #000; display: flex; gap: 8px; align-items: flex-start; line-height: 1.85; }
.ab-checks i { color: var(--ab-red); margin-top: 2px; }

/* ---------- stats band ---------- */
.ab-stats { background: linear-gradient(135deg, var(--ab-red), var(--ab-red-dark)); padding: 40px 0; color: #fff; }
.ab-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ab-stat { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 18px; border-left: 1px solid rgba(255,255,255,.2); }
.ab-stat:first-child { border-left: 0; }
.ab-stat-ico {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.15); font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.ab-num { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; }
.ab-label { display: block; font-size: 13.5px; opacity: .92; margin-top: 2px; }

/* ---------- mission tabs ---------- */
.ab-mission { padding: 50px 0; background: #fff; }
.ab-mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.ab-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 24px; }
.ab-tab {
  border: 0; cursor: pointer; background: #fff; color: var(--ab-heading);
  font-size: 12.5px; font-weight: 700; padding: 11px 24px; border-radius: 30px;
  box-shadow: 0 3px 14px rgba(0,0,0,.1); transition: background .2s, color .2s;
}
.ab-tab:hover { color: var(--ab-red); }
.ab-tab.active { background: var(--ab-red); color: #fff; }

.ab-panel[hidden] { display: none; }
.ab-panel h3 { font-size: 20px; font-weight: 700; color: var(--ab-heading); margin: 0 0 10px; }
.ab-panel p  { font-size: 15px; line-height: 1.95; color: #000; margin: 0; }

.ab-mission-img img {
  display: block; width: 100%; height: 470px; object-fit: cover;
  border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.15); background: #f0f0f0;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .ab-about-grid, .ab-mission-grid { grid-template-columns: 1fr; gap: 40px; }
  .ab-stats-grid { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .ab-stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
  .ab-hero { padding: 60px 0; }
  .ab-hero h1 { font-size: 30px; }
  .ab-about, .ab-mission { padding: 50px 0; }
  .ab-about h2, .ab-mission h2 { font-size: 25px; }
  .ab-collage { padding: 0 30px 70px 0; }
  .ab-img-1 { height: 230px; }
  .ab-img-2 { height: 170px; }
  .ab-checks { grid-template-columns: 1fr; }
  .ab-stats-grid { grid-template-columns: 1fr; }
  .ab-stat { justify-content: flex-start; border-left: 0; }
  .ab-mission-img img { height: 250px; }
}





/* ---------- why choose us ---------- */
.ab-why { padding: 50px 0;     background: radial-gradient(circle at 12% 18%, rgba(200, 22, 29, 0.08), transparent 38%), radial-gradient(circle at 92% 8%, rgba(200, 22, 29, 0.06), transparent 34%), radial-gradient(circle at 60% 100%, rgba(200, 22, 29, 0.04), transparent 40%), rgb(255, 255, 255); }
.ab-why-head { text-align: center; margin-bottom: 46px; }
.ab-why-head h2 { font-size: 32px; font-weight: 700; color: var(--ab-heading); margin: 0; }

.ab-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
.ab-why-no { display: flex; align-items: center; gap: 10px; margin-bottom: 12px;width:20%; }
.ab-why-no span { font-size: 13px; font-weight: 700; color: var(--ab-red); }
.ab-why-no i { flex: 1; height: 1px; background: var(--ab-red); opacity: .6; }
.ab-why-item h3 { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ab-heading); margin: 0 0 10px; }
.ab-why-item p { font-size: 15px; line-height: 1.7; color: #000; margin: 0; }

/* ---------- years of experience ---------- */
.ab-years { padding: 50px 0; background: #fff; overflow: hidden; }
.ab-years-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }

.ab-circle { position: relative; width: 380px; height: 360px; margin: 0 auto; }
.ab-circle::before {            /* big red circle behind */
  content: ""; position: absolute; left: 0; top: 10px; width: 290px; height: 290px; border-radius: 50%;
  background: linear-gradient(135deg, #e0343b, var(--ab-red-dark));
}
.ab-circle-in {                  /* white circle in front */
  position: absolute; left: 60px; top: 70px; width: 270px; height: 270px; border-radius: 50%;
  background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.18);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.ab-num.ab-big { font-size: 86px; font-weight: 800; line-height: 1; color: var(--ab-red); }
.ab-circle-label { font-size: 15px; font-weight: 700; color: var(--ab-heading); line-height: 1.35; margin-top: 8px; }
.ab-dot { position: absolute; border-radius: 50%; background: var(--ab-red); }
.ab-dot-1 { width: 30px; height: 30px; right: 18px; top: 40px; }
.ab-dot-2 { width: 18px; height: 18px; right: 6px; top: 130px; }

.ab-years-stats > div { margin-bottom: 30px; }
.ab-years-stats > div:last-child { margin-bottom: 0; }
.ab-num.ab-side, .ab-side-num { display: block; font-size: 38px; font-weight: 800; line-height: 1.1; color: var(--ab-red); }
.ab-side-label { display: block; font-size: 16px; font-weight: 700; color: var(--ab-heading); margin-top: 4px; }
/* ---------- why choose us: flip-in animation ---------- */
.js .ab-why-grid { perspective: 1200px; }

/* heading */
.js .ab-why-head h2 {
  opacity: 0;
  transform: scale(.85);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.9,.3,1.3);
}
.js .ab-why-head h2::after {
  content: "";
  display: block;
  width: 0; height: 3px;
  margin: 12px auto 0;
  background: var(--ab-red);
  border-radius: 3px;
  transition: width .8s ease .5s;
}
.js .ab-why-head.is-visible h2 { opacity: 1; transform: none; }
.js .ab-why-head.is-visible h2::after { width: 70px; }

/* cards flip down from the top */
.js .ab-why-item {
  position: relative;
  padding-bottom: 18px;
  opacity: 0;
  transform: rotateX(-80deg) translateY(30px) scale(.9);
  transform-origin: top center;
  transition: opacity .6s ease, transform .9s cubic-bezier(.2,.9,.3,1.15);
  will-change: opacity, transform;
}
.js .ab-why-item.is-visible {
  opacity: 1;
  transform: none;
}

/* red bar sweeping along the bottom of each card */
.js .ab-why-item::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 3px;
  background: var(--ab-red);
  border-radius: 3px;
  transition: width .9s ease .5s;
}
.js .ab-why-item.is-visible::after { width: 100%; }

/* number pops in, line draws after */
.js .ab-why-no span {
  display: inline-block;
  transform: scale(0);
  transition: transform .6s cubic-bezier(.3,1.8,.5,1) .35s;
}
.js .ab-why-item.is-visible .ab-why-no span { transform: scale(1); }

.js .ab-why-no i {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s ease .5s;
}
.js .ab-why-item.is-visible .ab-why-no i { transform: scaleX(1); }

/* hover lift (works after the animation has finished) */
.js .ab-why-item.is-done {
  transition: transform .3s ease;
}
.js .ab-why-item.is-done:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
  .js .ab-why-head h2, .js .ab-why-item, .js .ab-why-no span, .js .ab-why-no i {
    opacity: 1; transform: none; transition: none;
  }
  .js .ab-why-head h2::after { width: 70px; transition: none; }
  .js .ab-why-item::after { width: 100%; transition: none; }
}







 /* ---------- banner ---------- */
.cx-hero1 {
  position: relative;
  padding: 80px 0 80px;
  text-align: center;
  color: #fff;
  /* image comes from the --cx-banner variable set on the section in contact-us-new.php;
     the red overlay is kept light so the photo stays visible and the text stays readable */
  background-color: #c8161d;
  background-image:url(assets/images/clients-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* slanted bottom edge like the reference */
  /* clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); */
}
.cx-hero1 h1 { font-size: 38px; font-weight: 700; margin: 0 0 12px; color: #fff; }
.cx-hero1 h1 span { color: #fff; }
.cx-hero1 p  { font-size: 16px; line-height: 1.6; max-width: 620px; margin: 0 auto; color: rgba(255,255,255,.92); }


/* light red overlay */
.cx-hero1::before {
  content: "";
  position: absolute;
  inset: 0;
  background:rgb(199 22 29 / 61%);
}

/* keep the text above the overlay */
.cx-hero1 .container { position: relative; z-index: 1; }



/* ---------- banner ---------- */
.cx-hero {
  position: relative;
  padding: 50px 0 150px;
  text-align: center;
  color: #fff;
  /* image comes from the --cx-banner variable set on the section in contact-us-new.php;
     the red overlay is kept light so the photo stays visible and the text stays readable */
  background-color: #c8161d;
  background-image:url(assets/images/desk-employee.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* slanted bottom edge like the reference */
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
.cx-hero h1 { font-size: 38px; font-weight: 700; margin: 0 0 12px; color: #fff; }
.cx-hero h1 span { color: #fff; }
.cx-hero p  { font-size: 16px; line-height: 1.6; max-width: 620px; margin: 0 auto; color: rgba(255,255,255,.92); }


/* ---------- main card (overlaps the banner) ---------- */
.cx-main { position: relative; z-index: 2; margin-top: -60px; padding-bottom: 60px; }


form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cx-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

/* ---------- LEFT: details ---------- */
.cx-info {     background: radial-gradient(circle at 12% 18%, rgba(200, 22, 29, 0.08), transparent 38%), radial-gradient(circle at 92% 8%, rgba(200, 22, 29, 0.06), transparent 34%), radial-gradient(circle at 60% 100%, rgba(200, 22, 29, 0.04), transparent 40%), rgb(255, 255, 255); 
padding: 40px 40px 20px; }
.cx-info h2,
.cx-form-wrap h2 { font-size: 28px; font-weight: 700; color: var(--cx-heading); margin: 0 0 12px; }
.cx-info h2 span,
.cx-form-wrap h2 span { color: #c8161d; }

.cx-intro { font-size: 13.5px; line-height: 1.6; color: #000; margin: 0 0 22px; }

.cx-list { list-style: none; margin: 0; padding: 0; }
.cx-list li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }

.cx-ico {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
  background: #c8161d; color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.cx-list h3 { font-size: 15.5px; font-weight: 700; color: var(--cx-heading); margin: 0 0 4px; }
.cx-list p  { font-size: 14px; line-height: 1.85; color: #000; margin: 0; }
.cx-list a  { color: #c8161d; text-decoration: none; font-weight: 600; }
.cx-list a:hover { text-decoration: underline; }

.cx-social { border-top: 1px solid #e6d6d6; padding-top: 18px; margin-top: 6px; }
.cx-social h4 { font-size: 14.5px; font-weight: 700; color: var(--cx-heading); margin: 0 0 12px; }
.cx-social-icons { display: flex; gap: 8px; }
.cx-social-icons a {
  width: 34px; height: 34px; border-radius: 50%;
  background: #c8161d; color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background .2s;
}
.cx-social-icons a:hover { background: var(--cx-red-dark); }

/* ---------- RIGHT: enquiry form area ---------- */
.cx-form-wrap { background: #fff; padding: 40px 44px; min-height: 480px; }

/* Look-only styling. It targets the fields inside .cx-form and does not change
   your form's markup, names, ids or validation. */
.cx-form label { display: block; font-size: 13px; font-weight: 600; color: var(--cx-heading); margin-bottom: 6px; }
.cx-form input[type="text"],
.cx-form input[type="email"],
.cx-form input[type="tel"],
.cx-form input[type="number"],

.cx-form select,
.cx-form textarea {
  width: 48%; box-sizing: border-box; margin-right: 10px;
  background: var(--cx-field); border: 1px solid transparent;
  border-radius: 24px; padding: 11px 18px;
      font-family: Poppins, system-ui, sans-serif;
  font-size: 13.5px; color: #000; outline: none; transition: border-color .2s, background .2s;
}
.cx-form input[type="file"] {
    width: 100%;
    box-sizing:border-box; margin-right: 10px;
  background: var(--cx-field); border: 1px solid transparent;
  border-radius: 24px; padding: 11px 18px;
      font-family: Poppins, system-ui, sans-serif;
  font-size: 13.5px; color: #000; outline: none; transition: border-color .2s, background .2s;
}
.file-captcha-group {
  display:block;
}
.cx-form textarea { border-radius: 18px; min-height: 110px; resize: vertical; }
.cx-form input:focus,
.cx-form select:focus,
.cx-form textarea:focus { border-color: #c8161d; background: #fff; }
.cx-form button[type="submit"],
.cx-form input[type="submit"],
.cx-form input[type="reset"] {
 cursor: pointer;
  background: #c8161d; color: #fff; border: 0; border-radius: 24px;
  padding: 13px 20px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  transition: background .2s;
}
.cx-form button[type="submit"]:hover,
.cx-form input[type="submit"]:hover { background: var(--cx-red-dark); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .cx-card { grid-template-columns: 1fr; }
  .cx-form-wrap { min-height: 0; }
}
@media (max-width: 640px) {
  .cx-hero { padding: 50px 0 120px; }
  .cx-hero h1 { font-size: 28px; }
  .cx-hero p  { font-size: 14px; }
  .cx-main { margin-top: -90px; }
  .cx-info, .cx-form-wrap { padding: 28px 22px; }
  .cx-info h2, .cx-form-wrap h2 { font-size: 24px; }
  .cx-ico { flex-basis: 42px; width: 42px; height: 42px; font-size: 16px; }
}

.cx-hero {
  position: relative;
  padding: 80px 0 160px;
  text-align: center;
  color: #fff;
  background-color: #c8161d;
  background-image: var(--cx-banner, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}

/* light red overlay */
.cx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:rgb(199 22 29 / 61%);
}

/* keep the text above the overlay */
.cx-hero .container { position: relative; z-index: 1; }


.form-container {
    box-shadow: none;
    padding: 0;
}

.cx-form input::placeholder,
.cx-form textarea::placeholder {
  color: #000;
  opacity: 1;            /* Firefox lowers placeholder opacity by default */
}

/* older browser prefixes (optional) */
.cx-form input::-webkit-input-placeholder,
.cx-form textarea::-webkit-input-placeholder { color: #000; opacity: 1; }
.cx-form input::-moz-placeholder,
.cx-form textarea::-moz-placeholder { color: #000; opacity: 1; }