@layer bricks {.brxe-code{width:100%}}@layer bricks {.brxe-text-link{gap:5px}.brxe-text-link,.brxe-text-link span{align-items:center;display:inline-flex}.brxe-text-link span{justify-content:center}.brxe-text-link .icon{flex-shrink:0}}@layer bricks {@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes scrolling{0%{opacity:1}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}a.brxe-image{display:inline-block}figure.brxe-image{margin:0}:where(.brxe-image).tag{display:inline-block;height:fit-content;position:relative;width:auto}:where(.brxe-image).caption{position:relative}:where(.brxe-image).caption:has(figcaption.bricks-image-caption){overflow:hidden}:where(.brxe-image).overlay{position:relative}:where(.brxe-image).overlay:before{bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}:where(.brxe-image):before{border-radius:inherit}:where(.brxe-image) a{border-radius:inherit;position:static;transition:inherit}:where(.brxe-image) picture{border-radius:inherit;transition:inherit}:where(.brxe-image) img{border-radius:inherit;height:100%;position:static!important;transition:inherit;width:100%}:where(.brxe-image) img.bricks-lazy-hidden+figcaption{display:none}:where(.brxe-image) .icon{color:#fff;font-size:60px;pointer-events:none;position:absolute;right:50%;text-align:center;top:50%;transform:translate(50%,-50%);z-index:5}:where(.brxe-image) .bricks-image-caption{background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent);bottom:0;color:#fff;font-size:inherit;margin:0;padding:10px 15px;pointer-events:none;position:absolute;text-align:center;width:100%;z-index:1}}@layer bricks {:where(.brxe-heading).has-separator{align-items:center;display:inline-flex;gap:20px}:where(.brxe-heading)>[contenteditable]{display:inline-block;text-decoration:inherit}:where(.brxe-heading) .separator{border-top:1px solid;flex-grow:1;flex-shrink:0;height:1px}}#brxe-vnrxij {font-family: "Kanit"; font-weight: 700; font-size: 56px; line-height: 1.48}@media (max-width: 991px) {#brxe-vnrxij {font-size: 44px}}@media (max-width: 478px) {#brxe-vnrxij {font-size: 36px}}#brxe-zwkpok {font-family: "Inter"; font-weight: 500}#brxe-tfhcqg {font-family: "Kanit"; font-weight: 700}#brxe-odjtyi {flex-direction: row-reverse}#brxe-hcsvot {font-family: "Kanit"; font-weight: 700}#brxe-baxecg {flex-direction: row-reverse}#brxe-brruaj {font-family: "Kanit"; font-weight: 700}#brxe-xiqews {flex-direction: row-reverse}#brxe-vgroto {font-family: "Kanit"; font-weight: 700}#brxe-ptpubk {flex-direction: row-reverse}#brxe-pxkyol {font-family: "Kanit"; font-weight: 700}#brxe-povxte {flex-direction: row-reverse}#brxe-ixdulp {font-family: "Kanit"; font-weight: 700}#brxe-bujtpr {flex-direction: row-reverse}@media (prefers-reduced-motion: reduce) { .services .service-card, .services .service-card__image, .services .service-card__text, .services .service-card__link { transition: none; }}@media (max-width: 991px) { .services .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}@media (max-width: 478px) { .brxe-section.services { padding: 40px 24px; } .services .services__inner { gap: 32px; } .services .services__title { font-size: 36px; } .services .services__intro { font-size: 16px; } .services .services__grid { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 24px; width: calc(100% + 48px); max-width: none; margin-inline: -24px; padding-inline: 48px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 48px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .services .services__grid::-webkit-scrollbar { display: none; } .services .service-card { flex: 0 0 calc(100vw - 96px); max-width: 334px; align-items: center; gap: 24px; padding: 25px; text-align: center; scroll-snap-align: center; } .services .service-card__title { font-size: 22px; } .services .service-card__text { font-size: 16px; } .services .services__controls-wrap:has(.services__controls) { display: block; } .services .services__controls-wrap > pre { display: none; }} .brxe-section.services { --svc-bg: #faf9fd; --svc-card: #eeeafe; --svc-card-active: #382d66; --svc-text: #12122c; --svc-muted: rgba(18, 18, 44, 0.8); --svc-accent: #630099; --svc-line: rgba(18, 18, 44, 0.2); background-color: var(--svc-bg); padding: clamp(56px, 5.6vw, 88px) clamp(20px, 6.6vw, 104px);} .services .services__inner { width: 100%; max-width: 1370px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 3vw, 48px);} .services .services__header { width: 100%; max-width: 672px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; color: var(--svc-text);} .services .services__title { margin: 0; font-family: "Kanit", sans-serif; font-size: clamp(2.5rem, 3.6vw, 3.5rem); font-weight: 700; line-height: 1.48; color: var(--svc-text);} .services .services__intro { margin: 0; font-family: "Inter", sans-serif; font-size: 18px; font-weight: 500; line-height: 1.64; letter-spacing: 0.72px; color: var(--svc-muted);} .services .services__grid { position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 24px;} .services .service-card { width: 100%; height: auto; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 32px; border-radius: 16px; overflow: hidden; background-color: var(--svc-card); color: var(--svc-text); transition: background-color 0.25s ease, color 0.25s ease;} .services .service-card__image { width: 100px; height: 100px; flex-shrink: 0;} .services .service-card__image img { width: 100px; height: 100px; flex-shrink: 0;} .services img.service-card__image { width: 100px; height: 100px; flex-shrink: 0;} .services .service-card__image { display: block; border-radius: 48px; overflow: hidden; background-color: rgba(255, 255, 255, 0.4); transition: background-color 0.25s ease;} .services .service-card__image img { object-fit: cover;} .services img.service-card__image { object-fit: cover;} .services .service-card__body { width: 100%; display: flex; flex-direction: column; gap: 8px;} .services .service-card__title { margin: 0; font-family: "Kanit", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.64; color: inherit;} .services .service-card__text { margin: 0; font-family: "Inter", sans-serif; font-size: 18px; font-weight: 500; line-height: 1.64; letter-spacing: 0.72px; color: var(--svc-muted); transition: color 0.25s ease;} .services .service-card__link { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; padding: 16px 20px; border: 1px solid var(--svc-accent); border-radius: 8px; background-color: transparent; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 800; line-height: 15px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--svc-accent); text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;} .services .service-card__link:focus-visible { outline: 2px solid var(--svc-accent); outline-offset: 4px;} .services .service-card:hover { background-color: var(--svc-card-active); color: #ffffff;} .services .service-card:focus-within { background-color: var(--svc-card-active); color: #ffffff;} .services .service-card:hover .service-card__text { color: #ffffff;} .services .service-card:focus-within .service-card__text { color: #ffffff;} .services .service-card:hover .service-card__image { background-color: rgba(255, 255, 255, 0.1);} .services .service-card:focus-within .service-card__image { background-color: rgba(255, 255, 255, 0.1);} .services .service-card:hover .service-card__link { background-color: #ffffff; border-color: #ffffff; color: var(--svc-card-active);} .services .service-card:focus-within .service-card__link { background-color: #ffffff; border-color: #ffffff; color: var(--svc-card-active);} .services .service-card:focus-within .service-card__link:focus-visible { outline-color: #ffffff;} .services .services__controls-wrap { display: none; width: 100%;} .services .services__controls { display: flex; align-items: center; justify-content: center; gap: 32px;} .services .services__nav { display: flex; align-items: center; justify-content: center; padding: 13px; border: 1px solid var(--svc-line); border-radius: 8px; background: transparent; color: var(--svc-text); cursor: pointer;} .services .services__nav svg { width: 16px; height: 16px;} .services .services__nav:focus-visible { outline: 2px solid var(--svc-accent); outline-offset: 2px;} .services .services__dot:focus-visible { outline: 2px solid var(--svc-accent); outline-offset: 2px;} .services .services__dots { display: flex; gap: 8px;} .services .services__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background-color: var(--svc-line); cursor: pointer;} .services .services__dot.is-active { background-color: var(--svc-accent);}