/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/style.scss ***!
  \**************************************************************************************************************/
@charset "UTF-8";
/*------------------------ Init */
@font-face {
  font-family: "PPFormula";
  src: url(../fonts/PPFormula-bold.woff2) format("woff2"), url(../fonts/PPFormula-bold.woff) format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPFormula";
  src: url(../fonts/PPFormula-Medium.woff2) format("woff2"), url(../fonts/PPFormula-Medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPFormula";
  src: url(../fonts/PPFormula-MediumItalic.woff2) format("woff2"), url(../fonts/PPFormula-MediumItalic.woff) format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PPFormula";
  src: url(../fonts/PPFormula-Light.woff2) format("woff2"), url(../fonts/PPFormula-Light.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPFormula";
  src: url(../fonts/PPFormula-Semibold.woff2) format("woff2"), url(../fonts/PPFormula-Semibold.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPFormula";
  src: url(../fonts/PPFormula-Regular.woff2) format("woff2"), url(../fonts/PPFormula-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url(../fonts/Poppins-Regular.woff2) format("woff2"), url(../fonts/Poppins-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url(../fonts/Poppins-Bold.woff2) format("woff2"), url(../fonts/Poppins-Bold.woff) format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/*
Mixins are defined using the @mixin at-rule, which is written @mixin <name> { ... }
*/
/*------------------------ Header */
#page .masthead {
  position: fixed !important;
  top: var(--body-padding-arround) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
  left: var(--body-padding-arround) !important;
  right: var(--body-padding-arround) !important;
  border-radius: 0;
  width: initial !important;
  transition: all 0.5s !important;
}
#page .masthead .header-bar {
  height: initial !important;
}
#page .masthead .header-bar .branding img {
  max-width: var(--header-logo-width);
}
#page .masthead::before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  backdrop-filter: blur(12px);
  transition: all 0.5s;
  opacity: 0;
}

.mobile-header-bar .mobile-branding img {
  max-width: var(--header-logo-width);
}
.mobile-header-bar .mobile-mini-widgets {
  gap: 8px;
}

.menu-text {
  font-family: PPFormula, serif !important;
}

.mini-widgets {
  gap: 10px;
}

#primary-menu > .menu-item > a {
  /*
  margin-top: var(--main-nav-margin-top);
  margin-bottom: var(--main-nav-margin-bottom);
  */
  margin-top: 65px;
  margin-bottom: 65px;
  transition: all 0.7s;
}
#primary-menu > .menu-item.two_cols .sub-nav {
  padding-right: 460px !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
#primary-menu > .menu-item.two_cols .sub-nav .setbg {
  position: absolute;
  top: 50px;
  left: initial !important;
  right: 35px;
  bottom: 50px;
  width: 400px;
  border-radius: 10px;
  overflow: hidden;
  height: initial !important;
  background-color: transparent;
}
#primary-menu .sub-nav {
  padding: 35px 18px !important;
  border-radius: 0 0 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.3) !important;
  transform: translateX(-30px) !important;
  box-shadow: none !important;
  backdrop-filter: blur(15px) !important;
}
#primary-menu .sub-nav .mega-menu-img img {
  opacity: 0;
  visibility: hidden;
  height: 0;
  width: 0;
}
#primary-menu .sub-nav a {
  border-radius: 6px;
}
#primary-menu .sub-nav a:hover {
  background-color: #E6DCD1 !important;
}
#primary-menu .sub-nav a:hover .menu-text {
  color: #676f53 !important;
}
#primary-menu .dt-mega-menu-wrap {
  padding: 0;
  margin: 0;
  box-shadow: none !important;
  border-radius: 0 0 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px);
}
#primary-menu .dt-mega-menu-wrap .sub-nav {
  padding-right: 445px !important;
  transform: none !important;
  backdrop-filter: initial !important;
  background: transparent !important;
  border: 0 !important;
}

.l-to-r-line > li > a i.underline {
  border-radius: 2px;
  background-color: #E6DCD1 !important;
}

.mini-contacts {
  font-family: "PPFormula", serif !important;
  padding: 5px 8px 5px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  box-sizing: border-box;
  line-height: 1.1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: 10px;
  margin: 0 !important;
  transition: all 0.4s;
}
.mini-contacts i {
  display: block;
  position: relative;
  margin: 0;
  width: 38px;
  height: 38px;
  background-color: #E6DCD1;
  border-radius: 10px;
  transition: all 0.4s;
}
.mini-contacts i::before, .mini-contacts i::after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 55%;
  transition: all 0.5s;
}
.mini-contacts.multipurpose_1 {
  width: 150px;
}
.mini-contacts.multipurpose_1 i::before {
  background-image: url(../fonts/icon-03.svg);
}
.mini-contacts.multipurpose_1 i::after {
  opacity: 0;
  transform: translateX(-10px);
  background-image: url(../fonts/icon-03.svg);
}
.mini-contacts.multipurpose_2 {
  width: 150px;
}
.mini-contacts.multipurpose_2 i::before {
  background-image: url(../fonts/icon-02.svg);
}
.mini-contacts.multipurpose_2 i::after {
  opacity: 0;
  transform: translateX(-10px);
  background-image: url(../fonts/icon-02.svg);
}
.mini-contacts.multipurpose_3 {
  width: 170px;
}
.mini-contacts.multipurpose_3 i::before {
  background-image: url(../fonts/icon-01.svg);
}
.mini-contacts.multipurpose_3 i::after {
  opacity: 0;
  transform: translateX(-10px);
  background-image: url(../fonts/icon-01.svg);
}
.mini-contacts:hover {
  border: 1px solid #ffffff !important;
  opacity: 1 !important;
  color: #676F53 !important;
  background-color: #E6DCD1 !important;
}
.mini-contacts:hover i {
  background-color: #ffffff !important;
}
.mini-contacts:hover i::before {
  opacity: 0;
  transform: translateX(10px);
}
.mini-contacts:hover i::after {
  opacity: 1;
  transform: translateX(0);
}

.mobile-mini-widgets-in-menu {
  gap: 10px;
  max-width: 220px;
}
.mobile-mini-widgets-in-menu .mini-contacts {
  padding: 8px 8px 8px 18px;
  width: 100% !important;
}

.dt-mobile-header {
  width: 100% !important;
}
.dt-mobile-header .mobile-header-scrollbar-wrap {
  width: 100% !important;
  max-width: 400px !important;
  margin-left: auto;
  margin-right: auto;
}

.right-mobile-menu .show-mobile-header .dt-mobile-header {
  right: 100% !important;
}

#page .dt-mobile-menu-icon .lines-button {
  width: 36px;
  height: 20px;
}
#page .dt-mobile-menu-icon .lines-button .menu-line {
  width: 100% !important;
  height: 3px !important;
  border-radius: 2px !important;
}
#page .dt-mobile-menu-icon .lines-button .menu-line::before, #page .dt-mobile-menu-icon .lines-button .menu-line::after {
  background-color: #ffffff !important;
}
#page .dt-mobile-menu-icon .lines-button .menu-line:nth-child(2) {
  top: 8px;
}
#page .dt-mobile-menu-icon .lines-button .menu-line:nth-child(3) {
  top: 16px;
}

#page .dt-close-mobile-menu-icon .close-line-wrap {
  width: 28px;
  height: 26px;
}
#page .dt-close-mobile-menu-icon .close-line-wrap .close-line {
  width: 28px !important;
  height: 3px;
  border-radius: 2px;
}

.logo-close-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.logo-close-wrap .dt-close-mobile-menu-icon {
  position: relative;
  margin: 0 !important;
  top: initial !important;
}

.dt-mobile-header .next-level-button svg {
  width: 20px;
  fill: #ffffff !important;
}

.sitescroll-active #page .masthead {
  top: 0 !important;
  border-radius: 10px;
}
.sitescroll-active #page .masthead::before {
  opacity: 1;
}
.sitescroll-active #primary-menu > .menu-item > a {
  margin-top: 30px;
  margin-bottom: 30px;
}

#primary-menu > li.two_cols > .sub-nav > li.setbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  background: #151515;
}

/* Hai lớp ảnh chồng lên nhau */
#primary-menu > li.two_cols > .sub-nav > li.setbg .setbg-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.12);
  filter: blur(8px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

/* Ảnh đang hiển thị */
#primary-menu > li.two_cols > .sub-nav > li.setbg .setbg-layer.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Tôn trọng cài đặt giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  #primary-menu > li.two_cols > .sub-nav > li.setbg .setbg-layer {
    transition: none;
  }
}
/*------------------------ Common */
/* -------------- common */
/* --------------- Units
vw: Viewport Width
vh: Viewport Height
vmin: Min of Width or Height of Viewport
vmax: Max of Width or Height of viewport
cqw: Container Query Width
cqh: Container Query Height
cqb: Container Query Block
cqi: Container Query Inline
dvw: Dynamic Viewport Width
dvh: Dynamic Viewport Height
*/
html.lenis, html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

html, body, body.page, .wf-container > * {
  font-family: "PPFormula", serif;
  font-weight: 300;
  font-size: 18px;
  -webkit-font-smoothing: antialiased !important;
  -webkit-tap-highlight-color: transparent;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --body-padding-arround: 35px;
  --main-nav-margin-top: 65px;
  --main-nav-margin-bottom: 65px;
  --header-logo-width: 285px;
  --swiper-nav-button-width: clamp(56px, 5vw, 96px);
  --swiper-nav-button-height: clamp(47px, 4.5vw, 87px);
  --slider-bullet-width: 120px;
  --button-inside-button-width: 53px;
  --button-inside-button-height: 54px;
  --faq-icon-width: clamp(55px, 4vw, 76px);
  --slider-nav-width: 95px;
  --slider-nav-height: 86px;
  --footer-width-col1: 32%;
  --footer-width-col2: 32%;
  --footer-width-col3: 18%;
  --footer-width-col4: 18%;
}

/*
#footer > .wf-wrap,
#footer #bottom-bar > .wf-wrap,
#main > .wf-wrap{
    padding: 0 var(--body-padding-left) 0 var(--body-padding-left);
}
*/
.the7-cpg-lightbox-open .masthead {
  opacity: 0;
  visibility: hidden;
}

body {
  padding: var(--body-padding-arround);
}

#main {
  background-color: #ffffff;
  z-index: 3;
  border-radius: 0 0 30px 30px;
  margin-bottom: 96px;
}

#page .vc_row_zindex-1 {
  z-index: -1;
}

#page .vc_row_zindex0 {
  z-index: 0;
}

#page .vc_row_zindex1 {
  z-index: 1;
}

#page .vc_section_relative {
  position: relative;
}

#page .vc_section_absolute {
  position: absolute;
}

#page .vc_section_initial {
  position: initial;
}

#page .vc_section_zindex-1 {
  z-index: -1;
}

#page .vc_section_zindex0 {
  z-index: 0;
}

#page .vc_section_zindex1 {
  z-index: 1;
}

#page .vc_section_zindex2 {
  z-index: 2;
}

#page .vc_section_overflowinitial {
  overflow: initial;
}

#page .vc_section_overflowinherit {
  overflow: inherit;
}

#page .vc_section_overflowhidden {
  overflow: hidden;
}

#page .vc_row_overflow_hidden {
  overflow: hidden !important;
}

#page .vc_row_overflow_initial {
  overflow: initial !important;
}

.zindex-1 {
  z-index: -1;
}

.zindex0 {
  z-index: 0;
}

.zindex1 {
  z-index: 1;
}

.zindex2 {
  z-index: 2;
}

.zindex3 {
  z-index: 3;
}

.zindex4 {
  z-index: 4;
}

.vc_row_zindex0 {
  z-index: 0;
}

.vc_row_zindex1 {
  z-index: 1;
}

.vc_row_zindex2 {
  z-index: 2;
}

.vc_row_zindex3 {
  z-index: 3;
}

.vc_row_zindex4 {
  z-index: 4;
}

.vc_row_overflow_initial {
  overflow: initial !important;
}

.clip-text {
  overflow: hidden;
}

.vc_column-inner.maxwidth200 > .wpb_wrapper {
  max-width: 200px;
}

.vc_column-inner.maxwidth210 > .wpb_wrapper {
  max-width: 210px;
}

.vc_column-inner.maxwidth220 > .wpb_wrapper {
  max-width: 220px;
}

.vc_column-inner.maxwidth230 > .wpb_wrapper {
  max-width: 230px;
}

.vc_column-inner.maxwidth240 > .wpb_wrapper {
  max-width: 240px;
}

.vc_column-inner.maxwidth250 > .wpb_wrapper {
  max-width: 250px;
}

.vc_column-inner.maxwidth260 > .wpb_wrapper {
  max-width: 260px;
}

.vc_column-inner.maxwidth270 > .wpb_wrapper {
  max-width: 270px;
}

.vc_column-inner.maxwidth280 > .wpb_wrapper {
  max-width: 280px;
}

.vc_column-inner.maxwidth290 > .wpb_wrapper {
  max-width: 290px;
}

.vc_column-inner.maxwidth300 > .wpb_wrapper {
  max-width: 300px;
}

.vc_column-inner.maxwidth310 > .wpb_wrapper {
  max-width: 310px;
}

.vc_column-inner.maxwidth320 > .wpb_wrapper {
  max-width: 320px;
}

.vc_column-inner.maxwidth330 > .wpb_wrapper {
  max-width: 330px;
}

.vc_column-inner.maxwidth340 > .wpb_wrapper {
  max-width: 340px;
}

.vc_column-inner.maxwidth350 > .wpb_wrapper {
  max-width: 350px;
}

.vc_column-inner.maxwidth360 > .wpb_wrapper {
  max-width: 360px;
}

.vc_column-inner.maxwidth370 > .wpb_wrapper {
  max-width: 370px;
}

.vc_column-inner.maxwidth380 > .wpb_wrapper {
  max-width: 380px;
}

.vc_column-inner.maxwidth390 > .wpb_wrapper {
  max-width: 390px;
}

.vc_column-inner.maxwidth400 > .wpb_wrapper {
  max-width: 400px;
}

.vc_column-inner.maxwidth410 > .wpb_wrapper {
  max-width: 410px;
}

.vc_column-inner.maxwidth420 > .wpb_wrapper {
  max-width: 420px;
}

.vc_column-inner.maxwidth430 > .wpb_wrapper {
  max-width: 430px;
}

.vc_column-inner.maxwidth440 > .wpb_wrapper {
  max-width: 440px;
}

.vc_column-inner.maxwidth450 > .wpb_wrapper {
  max-width: 450px;
}

.vc_column-inner.maxwidth460 > .wpb_wrapper {
  max-width: 460px;
}

.vc_column-inner.maxwidth470 > .wpb_wrapper {
  max-width: 470px;
}

.vc_column-inner.maxwidth480 > .wpb_wrapper {
  max-width: 480px;
}

.vc_column-inner.maxwidth490 > .wpb_wrapper {
  max-width: 490px;
}

.vc_column-inner.maxwidth500 > .wpb_wrapper {
  max-width: 500px;
}

.vc_column-inner.maxwidth510 > .wpb_wrapper {
  max-width: 510px;
}

.vc_column-inner.maxwidth520 > .wpb_wrapper {
  max-width: 520px;
}

.vc_column-inner.maxwidth530 > .wpb_wrapper {
  max-width: 530px;
}

.vc_column-inner.maxwidth540 > .wpb_wrapper {
  max-width: 540px;
}

.vc_column-inner.maxwidth550 > .wpb_wrapper {
  max-width: 550px;
}

.vc_column-inner.maxwidth560 > .wpb_wrapper {
  max-width: 560px;
}

.vc_column-inner.maxwidth570 > .wpb_wrapper {
  max-width: 570px;
}

.vc_column-inner.maxwidth580 > .wpb_wrapper {
  max-width: 580px;
}

.vc_column-inner.maxwidth590 > .wpb_wrapper {
  max-width: 590px;
}

.vc_column-inner.maxwidth600 > .wpb_wrapper {
  max-width: 600px;
}

.vc_column-inner.maxwidth610 > .wpb_wrapper {
  max-width: 610px;
}

.vc_column-inner.maxwidth620 > .wpb_wrapper {
  max-width: 620px;
}

.vc_column-inner.maxwidth630 > .wpb_wrapper {
  max-width: 630px;
}

.vc_column-inner.maxwidth640 > .wpb_wrapper {
  max-width: 640px;
}

.vc_column-inner.maxwidth650 > .wpb_wrapper {
  max-width: 650px;
}

.vc_column-inner.maxwidth660 > .wpb_wrapper {
  max-width: 660px;
}

.vc_column-inner.maxwidth670 > .wpb_wrapper {
  max-width: 670px;
}

.vc_column-inner.maxwidth680 > .wpb_wrapper {
  max-width: 680px;
}

.vc_column-inner.maxwidth690 > .wpb_wrapper {
  max-width: 690px;
}

.vc_column-inner.maxwidth700 > .wpb_wrapper {
  max-width: 700px;
}

.vc_column-inner.maxwidth710 > .wpb_wrapper {
  max-width: 710px;
}

.vc_column-inner.maxwidth720 > .wpb_wrapper {
  max-width: 720px;
}

.vc_column-inner.maxwidth730 > .wpb_wrapper {
  max-width: 730px;
}

.vc_column-inner.maxwidth740 > .wpb_wrapper {
  max-width: 740px;
}

.vc_column-inner.maxwidth750 > .wpb_wrapper {
  max-width: 750px;
}

.vc_column-inner.maxwidth760 > .wpb_wrapper {
  max-width: 760px;
}

.vc_column-inner.maxwidth770 > .wpb_wrapper {
  max-width: 770px;
}

.vc_column-inner.maxwidth780 > .wpb_wrapper {
  max-width: 780px;
}

.vc_column-inner.maxwidth790 > .wpb_wrapper {
  max-width: 790px;
}

.vc_column-inner.maxwidth800 > .wpb_wrapper {
  max-width: 800px;
}

.vc_column-inner.maxwidth810 > .wpb_wrapper {
  max-width: 810px;
}

.vc_column-inner.maxwidth820 > .wpb_wrapper {
  max-width: 820px;
}

.vc_column-inner.maxwidth830 > .wpb_wrapper {
  max-width: 830px;
}

.vc_column-inner.maxwidth840 > .wpb_wrapper {
  max-width: 840px;
}

.vc_column-inner.maxwidth850 > .wpb_wrapper {
  max-width: 850px;
}

.vc_column-inner.maxwidth860 > .wpb_wrapper {
  max-width: 860px;
}

.vc_column-inner.maxwidth870 > .wpb_wrapper {
  max-width: 870px;
}

.vc_column-inner.maxwidth880 > .wpb_wrapper {
  max-width: 880px;
}

.vc_column-inner.maxwidth890 > .wpb_wrapper {
  max-width: 890px;
}

.vc_column-inner.maxwidth900 > .wpb_wrapper {
  max-width: 900px;
}

.vc_column-inner.maxwidth910 > .wpb_wrapper {
  max-width: 910px;
}

.vc_column-inner.maxwidth920 > .wpb_wrapper {
  max-width: 920px;
}

.vc_column-inner.maxwidth930 > .wpb_wrapper {
  max-width: 930px;
}

.vc_column-inner.maxwidth940 > .wpb_wrapper {
  max-width: 940px;
}

.vc_column-inner.maxwidth950 > .wpb_wrapper {
  max-width: 950px;
}

.vc_column-inner.maxwidth960 > .wpb_wrapper {
  max-width: 960px;
}

.vc_column-inner.maxwidth970 > .wpb_wrapper {
  max-width: 970px;
}

.vc_column-inner.maxwidth980 > .wpb_wrapper {
  max-width: 980px;
}

.vc_column-inner.maxwidth990 > .wpb_wrapper {
  max-width: 990px;
}

.vc_column-inner.maxwidth1000 > .wpb_wrapper {
  max-width: 1000px;
}

.vc_column-inner.maxwidth1010 > .wpb_wrapper {
  max-width: 1010px;
}

.vc_column-inner.maxwidth1020 > .wpb_wrapper {
  max-width: 1020px;
}

.vc_column-inner.maxwidth1030 > .wpb_wrapper {
  max-width: 1030px;
}

.vc_column-inner.maxwidth1040 > .wpb_wrapper {
  max-width: 1040px;
}

.vc_column-inner.maxwidth1050 > .wpb_wrapper {
  max-width: 1050px;
}

.vc_column-inner.maxwidth1060 > .wpb_wrapper {
  max-width: 1060px;
}

.vc_column-inner.maxwidth1070 > .wpb_wrapper {
  max-width: 1070px;
}

.vc_column-inner.maxwidth1080 > .wpb_wrapper {
  max-width: 1080px;
}

.vc_column-inner.maxwidth1090 > .wpb_wrapper {
  max-width: 1090px;
}

.vc_column-inner.maxwidth1100 > .wpb_wrapper {
  max-width: 1100px;
}

.vc_column-inner.maxwidth1110 > .wpb_wrapper {
  max-width: 1110px;
}

.vc_column-inner.maxwidth1120 > .wpb_wrapper {
  max-width: 1120px;
}

.vc_column-inner.maxwidth1130 > .wpb_wrapper {
  max-width: 1130px;
}

.vc_column-inner.maxwidth1140 > .wpb_wrapper {
  max-width: 1140px;
}

.vc_column-inner.maxwidth1150 > .wpb_wrapper {
  max-width: 1150px;
}

.vc_column-inner.maxwidth1160 > .wpb_wrapper {
  max-width: 1160px;
}

.vc_column-inner.maxwidth1170 > .wpb_wrapper {
  max-width: 1170px;
}

.vc_column-inner.maxwidth1180 > .wpb_wrapper {
  max-width: 1180px;
}

.vc_column-inner.maxwidth1190 > .wpb_wrapper {
  max-width: 1190px;
}

.vc_column-inner.maxwidth1200 > .wpb_wrapper {
  max-width: 1200px;
}

.vc_column-inner.maxwidth1210 > .wpb_wrapper {
  max-width: 1210px;
}

.vc_column-inner.maxwidth1220 > .wpb_wrapper {
  max-width: 1220px;
}

.vc_column-inner.maxwidth1230 > .wpb_wrapper {
  max-width: 1230px;
}

.vc_column-inner.maxwidth1240 > .wpb_wrapper {
  max-width: 1240px;
}

.vc_column-inner.maxwidth1250 > .wpb_wrapper {
  max-width: 1250px;
}

.vc_column-inner.maxwidth1260 > .wpb_wrapper {
  max-width: 1260px;
}

.vc_column-inner.maxwidth1270 > .wpb_wrapper {
  max-width: 1270px;
}

.vc_column-inner.maxwidth1280 > .wpb_wrapper {
  max-width: 1280px;
}

.vc_column-inner.maxwidth1290 > .wpb_wrapper {
  max-width: 1290px;
}

.vc_column-inner.maxwidth1300 > .wpb_wrapper {
  max-width: 1300px;
}

.vc_column-inner.maxwidth1310 > .wpb_wrapper {
  max-width: 1310px;
}

.vc_column-inner.maxwidth1320 > .wpb_wrapper {
  max-width: 1320px;
}

.vc_column-inner.maxwidth1330 > .wpb_wrapper {
  max-width: 1330px;
}

.vc_column-inner.maxwidth1340 > .wpb_wrapper {
  max-width: 1340px;
}

.vc_column-inner.maxwidth1350 > .wpb_wrapper {
  max-width: 1350px;
}

.vc_column-inner.maxwidth1360 > .wpb_wrapper {
  max-width: 1360px;
}

.vc_column-inner.maxwidth1370 > .wpb_wrapper {
  max-width: 1370px;
}

.vc_column-inner.maxwidth1380 > .wpb_wrapper {
  max-width: 1380px;
}

.vc_column-inner.maxwidth1390 > .wpb_wrapper {
  max-width: 1390px;
}

.vc_column-inner.maxwidth1400 > .wpb_wrapper {
  max-width: 1400px;
}

.vc_column-inner.maxwidth1410 > .wpb_wrapper {
  max-width: 1410px;
}

.vc_column-inner.maxwidth1420 > .wpb_wrapper {
  max-width: 1420px;
}

.vc_column-inner.maxwidth1430 > .wpb_wrapper {
  max-width: 1430px;
}

.vc_column-inner.maxwidth1440 > .wpb_wrapper {
  max-width: 1440px;
}

.vc_column-inner.maxwidth1450 > .wpb_wrapper {
  max-width: 1450px;
}

.vc_column-inner.maxwidth1460 > .wpb_wrapper {
  max-width: 1460px;
}

.vc_column-inner.maxwidth1470 > .wpb_wrapper {
  max-width: 1470px;
}

.vc_column-inner.maxwidth1480 > .wpb_wrapper {
  max-width: 1480px;
}

.vc_column-inner.maxwidth1490 > .wpb_wrapper {
  max-width: 1490px;
}

.vc_column-inner.maxwidth1500 > .wpb_wrapper {
  max-width: 1500px;
}

.vc_column-inner.maxwidth1510 > .wpb_wrapper {
  max-width: 1510px;
}

.vc_column-inner.maxwidth1520 > .wpb_wrapper {
  max-width: 1520px;
}

.vc_column-inner.maxwidth1530 > .wpb_wrapper {
  max-width: 1530px;
}

.vc_column-inner.maxwidth1540 > .wpb_wrapper {
  max-width: 1540px;
}

.vc_column-inner.maxwidth1550 > .wpb_wrapper {
  max-width: 1550px;
}

.vc_column-inner.maxwidth1560 > .wpb_wrapper {
  max-width: 1560px;
}

.vc_column-inner.maxwidth1570 > .wpb_wrapper {
  max-width: 1570px;
}

.vc_column-inner.maxwidth1580 > .wpb_wrapper {
  max-width: 1580px;
}

.vc_column-inner.maxwidth1590 > .wpb_wrapper {
  max-width: 1590px;
}

.vc_column-inner.maxwidth1600 > .wpb_wrapper {
  max-width: 1600px;
}

.vc_column-inner.maxwidth1610 > .wpb_wrapper {
  max-width: 1610px;
}

.vc_column-inner.maxwidth1620 > .wpb_wrapper {
  max-width: 1620px;
}

.vc_column-inner.maxwidth1630 > .wpb_wrapper {
  max-width: 1630px;
}

.vc_column-inner.maxwidth1640 > .wpb_wrapper {
  max-width: 1640px;
}

.vc_column-inner.maxwidth1650 > .wpb_wrapper {
  max-width: 1650px;
}

.vc_column-inner.maxwidth1660 > .wpb_wrapper {
  max-width: 1660px;
}

.vc_column-inner.maxwidth1670 > .wpb_wrapper {
  max-width: 1670px;
}

.vc_column-inner.maxwidth1680 > .wpb_wrapper {
  max-width: 1680px;
}

.vc_column-inner.maxwidth1690 > .wpb_wrapper {
  max-width: 1690px;
}

.vc_column-inner.maxwidth1700 > .wpb_wrapper {
  max-width: 1700px;
}

.vc_column-inner.maxwidth1710 > .wpb_wrapper {
  max-width: 1710px;
}

.vc_column-inner.maxwidth1720 > .wpb_wrapper {
  max-width: 1720px;
}

.vc_column-inner.maxwidth1730 > .wpb_wrapper {
  max-width: 1730px;
}

.vc_column-inner.maxwidth1740 > .wpb_wrapper {
  max-width: 1740px;
}

.vc_column-inner.maxwidth1750 > .wpb_wrapper {
  max-width: 1750px;
}

.vc_column-inner.maxwidth1760 > .wpb_wrapper {
  max-width: 1760px;
}

.vc_column-inner.maxwidth1770 > .wpb_wrapper {
  max-width: 1770px;
}

.vc_column-inner.maxwidth1780 > .wpb_wrapper {
  max-width: 1780px;
}

.vc_column-inner.maxwidth1790 > .wpb_wrapper {
  max-width: 1790px;
}

.vc_column-inner.maxwidth1800 > .wpb_wrapper {
  max-width: 1800px;
}

.vc_row_inner_200 {
  max-width: 200px;
}

.vc_row_inner_210 {
  max-width: 210px;
}

.vc_row_inner_220 {
  max-width: 220px;
}

.vc_row_inner_230 {
  max-width: 230px;
}

.vc_row_inner_240 {
  max-width: 240px;
}

.vc_row_inner_250 {
  max-width: 250px;
}

.vc_row_inner_260 {
  max-width: 260px;
}

.vc_row_inner_270 {
  max-width: 270px;
}

.vc_row_inner_280 {
  max-width: 280px;
}

.vc_row_inner_290 {
  max-width: 290px;
}

.vc_row_inner_300 {
  max-width: 300px;
}

.vc_row_inner_310 {
  max-width: 310px;
}

.vc_row_inner_320 {
  max-width: 320px;
}

.vc_row_inner_330 {
  max-width: 330px;
}

.vc_row_inner_340 {
  max-width: 340px;
}

.vc_row_inner_350 {
  max-width: 350px;
}

.vc_row_inner_360 {
  max-width: 360px;
}

.vc_row_inner_370 {
  max-width: 370px;
}

.vc_row_inner_380 {
  max-width: 380px;
}

.vc_row_inner_390 {
  max-width: 390px;
}

.vc_row_inner_400 {
  max-width: 400px;
}

.vc_row_inner_410 {
  max-width: 410px;
}

.vc_row_inner_420 {
  max-width: 420px;
}

.vc_row_inner_430 {
  max-width: 430px;
}

.vc_row_inner_440 {
  max-width: 440px;
}

.vc_row_inner_450 {
  max-width: 450px;
}

.vc_row_inner_460 {
  max-width: 460px;
}

.vc_row_inner_470 {
  max-width: 470px;
}

.vc_row_inner_480 {
  max-width: 480px;
}

.vc_row_inner_490 {
  max-width: 490px;
}

.vc_row_inner_500 {
  max-width: 500px;
}

.vc_row_inner_510 {
  max-width: 510px;
}

.vc_row_inner_520 {
  max-width: 520px;
}

.vc_row_inner_530 {
  max-width: 530px;
}

.vc_row_inner_540 {
  max-width: 540px;
}

.vc_row_inner_550 {
  max-width: 550px;
}

.vc_row_inner_560 {
  max-width: 560px;
}

.vc_row_inner_570 {
  max-width: 570px;
}

.vc_row_inner_580 {
  max-width: 580px;
}

.vc_row_inner_590 {
  max-width: 590px;
}

.vc_row_inner_600 {
  max-width: 600px;
}

.vc_row_inner_610 {
  max-width: 610px;
}

.vc_row_inner_620 {
  max-width: 620px;
}

.vc_row_inner_630 {
  max-width: 630px;
}

.vc_row_inner_640 {
  max-width: 640px;
}

.vc_row_inner_650 {
  max-width: 650px;
}

.vc_row_inner_660 {
  max-width: 660px;
}

.vc_row_inner_670 {
  max-width: 670px;
}

.vc_row_inner_680 {
  max-width: 680px;
}

.vc_row_inner_690 {
  max-width: 690px;
}

.vc_row_inner_700 {
  max-width: 700px;
}

.vc_row_inner_710 {
  max-width: 710px;
}

.vc_row_inner_720 {
  max-width: 720px;
}

.vc_row_inner_730 {
  max-width: 730px;
}

.vc_row_inner_740 {
  max-width: 740px;
}

.vc_row_inner_750 {
  max-width: 750px;
}

.vc_row_inner_760 {
  max-width: 760px;
}

.vc_row_inner_770 {
  max-width: 770px;
}

.vc_row_inner_780 {
  max-width: 780px;
}

.vc_row_inner_790 {
  max-width: 790px;
}

.vc_row_inner_800 {
  max-width: 800px;
}

.vc_row_inner_810 {
  max-width: 810px;
}

.vc_row_inner_820 {
  max-width: 820px;
}

.vc_row_inner_830 {
  max-width: 830px;
}

.vc_row_inner_840 {
  max-width: 840px;
}

.vc_row_inner_850 {
  max-width: 850px;
}

.vc_row_inner_860 {
  max-width: 860px;
}

.vc_row_inner_870 {
  max-width: 870px;
}

.vc_row_inner_880 {
  max-width: 880px;
}

.vc_row_inner_890 {
  max-width: 890px;
}

.vc_row_inner_900 {
  max-width: 900px;
}

.vc_row_inner_910 {
  max-width: 910px;
}

.vc_row_inner_920 {
  max-width: 920px;
}

.vc_row_inner_930 {
  max-width: 930px;
}

.vc_row_inner_940 {
  max-width: 940px;
}

.vc_row_inner_950 {
  max-width: 950px;
}

.vc_row_inner_960 {
  max-width: 960px;
}

.vc_row_inner_970 {
  max-width: 970px;
}

.vc_row_inner_980 {
  max-width: 980px;
}

.vc_row_inner_990 {
  max-width: 990px;
}

.vc_row_inner_1000 {
  max-width: 1000px;
}

.vc_row_inner_1010 {
  max-width: 1010px;
}

.vc_row_inner_1020 {
  max-width: 1020px;
}

.vc_row_inner_1030 {
  max-width: 1030px;
}

.vc_row_inner_1040 {
  max-width: 1040px;
}

.vc_row_inner_1050 {
  max-width: 1050px;
}

.vc_row_inner_1060 {
  max-width: 1060px;
}

.vc_row_inner_1070 {
  max-width: 1070px;
}

.vc_row_inner_1080 {
  max-width: 1080px;
}

.vc_row_inner_1090 {
  max-width: 1090px;
}

.vc_row_inner_1100 {
  max-width: 1100px;
}

.vc_row_inner_1110 {
  max-width: 1110px;
}

.vc_row_inner_1120 {
  max-width: 1120px;
}

.vc_row_inner_1130 {
  max-width: 1130px;
}

.vc_row_inner_1140 {
  max-width: 1140px;
}

.vc_row_inner_1150 {
  max-width: 1150px;
}

.vc_row_inner_1160 {
  max-width: 1160px;
}

.vc_row_inner_1170 {
  max-width: 1170px;
}

.vc_row_inner_1180 {
  max-width: 1180px;
}

.vc_row_inner_1190 {
  max-width: 1190px;
}

.vc_row_inner_1200 {
  max-width: 1200px;
}

.vc_row_inner_1210 {
  max-width: 1210px;
}

.vc_row_inner_1220 {
  max-width: 1220px;
}

.vc_row_inner_1230 {
  max-width: 1230px;
}

.vc_row_inner_1240 {
  max-width: 1240px;
}

.vc_row_inner_1250 {
  max-width: 1250px;
}

.vc_row_inner_1260 {
  max-width: 1260px;
}

.vc_row_inner_1270 {
  max-width: 1270px;
}

.vc_row_inner_1280 {
  max-width: 1280px;
}

.vc_row_inner_1290 {
  max-width: 1290px;
}

.vc_row_inner_1300 {
  max-width: 1300px;
}

.vc_row_inner_1310 {
  max-width: 1310px;
}

.vc_row_inner_1320 {
  max-width: 1320px;
}

.vc_row_inner_1330 {
  max-width: 1330px;
}

.vc_row_inner_1340 {
  max-width: 1340px;
}

.vc_row_inner_1350 {
  max-width: 1350px;
}

.vc_row_inner_1360 {
  max-width: 1360px;
}

.vc_row_inner_1370 {
  max-width: 1370px;
}

.vc_row_inner_1380 {
  max-width: 1380px;
}

.vc_row_inner_1390 {
  max-width: 1390px;
}

.vc_row_inner_1400 {
  max-width: 1400px;
}

.vc_row_inner_1410 {
  max-width: 1410px;
}

.vc_row_inner_1420 {
  max-width: 1420px;
}

.vc_row_inner_1430 {
  max-width: 1430px;
}

.vc_row_inner_1440 {
  max-width: 1440px;
}

.vc_row_inner_1450 {
  max-width: 1450px;
}

.vc_row_inner_1460 {
  max-width: 1460px;
}

.vc_row_inner_1470 {
  max-width: 1470px;
}

.vc_row_inner_1480 {
  max-width: 1480px;
}

.vc_row_inner_1490 {
  max-width: 1490px;
}

.vc_row_inner_1500 {
  max-width: 1500px;
}

.vc_row_inner_1510 {
  max-width: 1510px;
}

.vc_row_inner_1520 {
  max-width: 1520px;
}

.vc_row_inner_1530 {
  max-width: 1530px;
}

.vc_row_inner_1540 {
  max-width: 1540px;
}

.vc_row_inner_1550 {
  max-width: 1550px;
}

.vc_row_inner_1560 {
  max-width: 1560px;
}

.vc_row_inner_1570 {
  max-width: 1570px;
}

.vc_row_inner_1580 {
  max-width: 1580px;
}

.vc_row_inner_1590 {
  max-width: 1590px;
}

.vc_row_inner_1600 {
  max-width: 1600px;
}

.vc_row_inner_1610 {
  max-width: 1610px;
}

.vc_row_inner_1620 {
  max-width: 1620px;
}

.vc_row_inner_1630 {
  max-width: 1630px;
}

.vc_row_inner_1640 {
  max-width: 1640px;
}

.vc_row_inner_1650 {
  max-width: 1650px;
}

.vc_row_inner_1660 {
  max-width: 1660px;
}

.vc_row_inner_1670 {
  max-width: 1670px;
}

.vc_row_inner_1680 {
  max-width: 1680px;
}

.vc_row_inner_1690 {
  max-width: 1690px;
}

.vc_row_inner_1700 {
  max-width: 1700px;
}

.vc_row_inner_1710 {
  max-width: 1710px;
}

.vc_row_inner_1720 {
  max-width: 1720px;
}

.vc_row_inner_1730 {
  max-width: 1730px;
}

.vc_row_inner_1740 {
  max-width: 1740px;
}

.vc_row_inner_1750 {
  max-width: 1750px;
}

.vc_row_inner_1760 {
  max-width: 1760px;
}

.vc_row_inner_1770 {
  max-width: 1770px;
}

.vc_row_inner_1780 {
  max-width: 1780px;
}

.vc_row_inner_1790 {
  max-width: 1790px;
}

.vc_row_inner_1800 {
  max-width: 1800px;
}

.vc_row_maxwidth200 > .wpb_column {
  max-width: 200px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth210 > .wpb_column {
  max-width: 210px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth220 > .wpb_column {
  max-width: 220px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth230 > .wpb_column {
  max-width: 230px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth240 > .wpb_column {
  max-width: 240px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth250 > .wpb_column {
  max-width: 250px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth260 > .wpb_column {
  max-width: 260px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth270 > .wpb_column {
  max-width: 270px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth280 > .wpb_column {
  max-width: 280px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth290 > .wpb_column {
  max-width: 290px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth300 > .wpb_column {
  max-width: 300px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth310 > .wpb_column {
  max-width: 310px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth320 > .wpb_column {
  max-width: 320px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth330 > .wpb_column {
  max-width: 330px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth340 > .wpb_column {
  max-width: 340px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth350 > .wpb_column {
  max-width: 350px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth360 > .wpb_column {
  max-width: 360px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth370 > .wpb_column {
  max-width: 370px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth380 > .wpb_column {
  max-width: 380px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth390 > .wpb_column {
  max-width: 390px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth400 > .wpb_column {
  max-width: 400px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth410 > .wpb_column {
  max-width: 410px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth420 > .wpb_column {
  max-width: 420px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth430 > .wpb_column {
  max-width: 430px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth440 > .wpb_column {
  max-width: 440px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth450 > .wpb_column {
  max-width: 450px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth460 > .wpb_column {
  max-width: 460px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth470 > .wpb_column {
  max-width: 470px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth480 > .wpb_column {
  max-width: 480px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth490 > .wpb_column {
  max-width: 490px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth500 > .wpb_column {
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth510 > .wpb_column {
  max-width: 510px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth520 > .wpb_column {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth530 > .wpb_column {
  max-width: 530px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth540 > .wpb_column {
  max-width: 540px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth550 > .wpb_column {
  max-width: 550px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth560 > .wpb_column {
  max-width: 560px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth570 > .wpb_column {
  max-width: 570px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth580 > .wpb_column {
  max-width: 580px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth590 > .wpb_column {
  max-width: 590px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth600 > .wpb_column {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth610 > .wpb_column {
  max-width: 610px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth620 > .wpb_column {
  max-width: 620px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth630 > .wpb_column {
  max-width: 630px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth640 > .wpb_column {
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth650 > .wpb_column {
  max-width: 650px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth660 > .wpb_column {
  max-width: 660px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth670 > .wpb_column {
  max-width: 670px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth680 > .wpb_column {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth690 > .wpb_column {
  max-width: 690px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth700 > .wpb_column {
  max-width: 700px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth710 > .wpb_column {
  max-width: 710px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth720 > .wpb_column {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth730 > .wpb_column {
  max-width: 730px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth740 > .wpb_column {
  max-width: 740px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth750 > .wpb_column {
  max-width: 750px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth760 > .wpb_column {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth770 > .wpb_column {
  max-width: 770px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth780 > .wpb_column {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth790 > .wpb_column {
  max-width: 790px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth800 > .wpb_column {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth810 > .wpb_column {
  max-width: 810px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth820 > .wpb_column {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth830 > .wpb_column {
  max-width: 830px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth840 > .wpb_column {
  max-width: 840px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth850 > .wpb_column {
  max-width: 850px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth860 > .wpb_column {
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth870 > .wpb_column {
  max-width: 870px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth880 > .wpb_column {
  max-width: 880px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth890 > .wpb_column {
  max-width: 890px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth900 > .wpb_column {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth910 > .wpb_column {
  max-width: 910px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth920 > .wpb_column {
  max-width: 920px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth930 > .wpb_column {
  max-width: 930px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth940 > .wpb_column {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth950 > .wpb_column {
  max-width: 950px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth960 > .wpb_column {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth970 > .wpb_column {
  max-width: 970px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth980 > .wpb_column {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth990 > .wpb_column {
  max-width: 990px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1000 > .wpb_column {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1010 > .wpb_column {
  max-width: 1010px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1020 > .wpb_column {
  max-width: 1020px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1030 > .wpb_column {
  max-width: 1030px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1040 > .wpb_column {
  max-width: 1040px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1050 > .wpb_column {
  max-width: 1050px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1060 > .wpb_column {
  max-width: 1060px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1070 > .wpb_column {
  max-width: 1070px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1080 > .wpb_column {
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1090 > .wpb_column {
  max-width: 1090px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1100 > .wpb_column {
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1110 > .wpb_column {
  max-width: 1110px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1120 > .wpb_column {
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1130 > .wpb_column {
  max-width: 1130px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1140 > .wpb_column {
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1150 > .wpb_column {
  max-width: 1150px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1160 > .wpb_column {
  max-width: 1160px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1170 > .wpb_column {
  max-width: 1170px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1180 > .wpb_column {
  max-width: 1180px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1190 > .wpb_column {
  max-width: 1190px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1200 > .wpb_column {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1210 > .wpb_column {
  max-width: 1210px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1220 > .wpb_column {
  max-width: 1220px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1230 > .wpb_column {
  max-width: 1230px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1240 > .wpb_column {
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1250 > .wpb_column {
  max-width: 1250px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1260 > .wpb_column {
  max-width: 1260px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1270 > .wpb_column {
  max-width: 1270px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1280 > .wpb_column {
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1290 > .wpb_column {
  max-width: 1290px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1300 > .wpb_column {
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1310 > .wpb_column {
  max-width: 1310px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1320 > .wpb_column {
  max-width: 1320px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1330 > .wpb_column {
  max-width: 1330px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1340 > .wpb_column {
  max-width: 1340px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1350 > .wpb_column {
  max-width: 1350px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1360 > .wpb_column {
  max-width: 1360px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1370 > .wpb_column {
  max-width: 1370px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1380 > .wpb_column {
  max-width: 1380px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1390 > .wpb_column {
  max-width: 1390px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1400 > .wpb_column {
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1410 > .wpb_column {
  max-width: 1410px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1420 > .wpb_column {
  max-width: 1420px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1430 > .wpb_column {
  max-width: 1430px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1440 > .wpb_column {
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1450 > .wpb_column {
  max-width: 1450px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1460 > .wpb_column {
  max-width: 1460px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1470 > .wpb_column {
  max-width: 1470px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1480 > .wpb_column {
  max-width: 1480px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1490 > .wpb_column {
  max-width: 1490px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1500 > .wpb_column {
  max-width: 1500px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1510 > .wpb_column {
  max-width: 1510px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1520 > .wpb_column {
  max-width: 1520px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1530 > .wpb_column {
  max-width: 1530px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1540 > .wpb_column {
  max-width: 1540px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1550 > .wpb_column {
  max-width: 1550px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1560 > .wpb_column {
  max-width: 1560px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1570 > .wpb_column {
  max-width: 1570px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1580 > .wpb_column {
  max-width: 1580px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1590 > .wpb_column {
  max-width: 1590px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1600 > .wpb_column {
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1610 > .wpb_column {
  max-width: 1610px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1620 > .wpb_column {
  max-width: 1620px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1630 > .wpb_column {
  max-width: 1630px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1640 > .wpb_column {
  max-width: 1640px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1650 > .wpb_column {
  max-width: 1650px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1660 > .wpb_column {
  max-width: 1660px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1670 > .wpb_column {
  max-width: 1670px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1680 > .wpb_column {
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1690 > .wpb_column {
  max-width: 1690px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1700 > .wpb_column {
  max-width: 1700px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1710 > .wpb_column {
  max-width: 1710px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1720 > .wpb_column {
  max-width: 1720px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1730 > .wpb_column {
  max-width: 1730px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1740 > .wpb_column {
  max-width: 1740px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1750 > .wpb_column {
  max-width: 1750px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1760 > .wpb_column {
  max-width: 1760px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1770 > .wpb_column {
  max-width: 1770px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1780 > .wpb_column {
  max-width: 1780px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1790 > .wpb_column {
  max-width: 1790px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

.vc_row_maxwidth1800 > .wpb_column {
  max-width: 1800px;
  margin-right: auto;
  margin-left: auto;
  float: none;
}

div[class*=vc_row_inner] {
  margin-left: auto;
  margin-right: auto;
}

#page .alignitems_baseline {
  align-items: baseline;
}

#page .alignitems_center {
  align-items: center;
}

#page .alignitems_end {
  align-items: end;
}

#page .alignitems_flex-end {
  align-items: flex-end;
}

#page .alignitems_flex-start {
  align-items: flex-start;
}

#page .alignitems_initial {
  align-items: initial;
}

#page .alignitems_inherit {
  align-items: inherit;
}

#page .alignitems_stretch {
  align-items: stretch;
}

#page .alignitems_normal {
  align-items: normal;
}

#page .col_inner_center > .wpb_wrapper {
  margin-left: auto;
  margin-right: auto;
}

#page .col_inner_right > .wpb_wrapper {
  margin-left: auto;
  margin-right: 0;
}

#content .wpb_text_columnNNNNNNNN {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(80px);
  transition: all 0.8s ease;
}
#content .wpb_text_columnNNNNNNNN.view {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
#content .wpb_text_columnNNNNNNNN p {
  margin-bottom: 25px;
}
#content .wpb_text_columnNNNNNNNN.white ul li::before {
  background-color: #ffffff;
}
#content .wpb_text_column ul {
  margin-top: -15px;
  margin-bottom: 35px;
}
#content .wpb_text_column li {
  margin-bottom: 15px;
}
#content .wpb_text_column li ul {
  margin-top: 10px !important;
  margin-bottom: 35px !important;
}
#content .wpb_text_column h1, #content .wpb_text_column h2, #content .wpb_text_column h3 {
  margin-top: 35px;
  margin-bottom: 10px;
}

.ra-fab {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.vc_column_inner_pos_relative {
  position: relative;
}

.vc_column_inner_pos_initial {
  position: initial;
}

.vc_column_inner_pos_inherit {
  position: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "PPFormula", sans-serif;
  font-weight: normal;
  margin-bottom: 35px;
}

h1.vc_custom_heading,
h2.vc_custom_heading,
h3.vc_custom_heading {
  line-height: 1.1;
}

.block_align_left,
.block_align_right,
.block_align_center {
  display: flex;
}

.block_align_right {
  justify-content: end;
}

.block_align_center {
  justify-content: center;
}

h2.vc_custom_heading {
  font-size: clamp(32px, 5vw, 50px) !important;
}

h1.vc_custom_heading {
  font-size: clamp(36px, 7vw, 85px) !important;
}

.mode-button,
.btn-block-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.wpb_single_image .vc_single_image-wrapper.vc_box_rounded, .wpb_single_image .vc_single_image-wrapper.vc_box_rounded img {
  border-radius: 24px;
}

#page .vc_box_border_circle {
  border-radius: 10px;
  border: 1px solid #ccc;
}
#page .vc_box_border_circle img {
  border-radius: 0 !important;
}

.wpb_single_image.radius30 img {
  border-radius: 30px !important;
}
.wpb_single_image.radius36 img {
  border-radius: 36px !important;
}
.wpb_single_image.radius40 img {
  border-radius: 40px !important;
}
.wpb_single_image.radius48 img {
  border-radius: 48px !important;
}

.animated-svg {
  overflow: hidden !important;
}

.ult-dual-color-heading .ult-dual-heading-text {
  font-family: "VictorSerifBasic";
  font-weight: 500 !important;
  line-height: 1.1 !important;
}
.ult-dual-color-heading .ult-dual-adv-heading-text {
  font-family: "TTHovesProTrial";
  font-weight: 300 !important;
  line-height: 1.1 !important;
}

#main-slideshow {
  border-radius: 24px;
  z-index: 3;
}

.wpb_text_column ul li {
  padding-left: 10px;
  margin-bottom: 15px;
}
.wpb_text_column p {
  margin-bottom: 30px;
}

.is-iphone .upb_row_bg {
  background-attachment: initial !important;
}

/* ------------------------------------------------------ Slider */
sr7-module .custombutton {
  font-size: 18px !important;
  line-height: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(20px);
  max-width: 320px !important;
  width: 100% !important;
  padding: 10px 12px 8px 34px !important;
  height: initial !important;
}
sr7-module .custombutton span {
  display: block;
  position: relative;
  width: 47px;
  aspect-ratio: 1 !important;
  border-radius: 10px;
  background-color: #E6DCD1;
  overflow: hidden;
  transition: all 0.3s;
}
sr7-module .custombutton span::before, sr7-module .custombutton span::after {
  position: absolute !important;
  content: "" !important;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32%;
  transition: all 0.3s;
}
sr7-module .custombutton span::before {
  background-image: url(../fonts/arrow-down.svg);
}
sr7-module .custombutton span::after {
  opacity: 0;
  transform: translateY(-10px);
  background-image: url(../fonts/arrow-down-white.svg);
}
sr7-module .custombutton:hover span {
  background-color: #676F53;
}
sr7-module .custombutton:hover span::before {
  opacity: 0;
  transform: translateY(10px);
}
sr7-module .custombutton:hover span::after {
  opacity: 1;
  transform: translateY(0);
}
sr7-module .sr7-leftarrow,
sr7-module .sr7-rightarrow {
  backdrop-filter: blur(10px);
  aspect-ratio: 95/86 !important;
  width: var(--slider-nav-width) !important;
  height: auto !important;
  min-height: 0 !important;
  bottom: 45px !important;
  transform: none !important;
  top: initial !important;
}
sr7-module .sr7-leftarrow::before,
sr7-module .sr7-rightarrow::before {
  position: absolute;
  content: "" !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32%;
}
sr7-module .sr7-rightarrow {
  border-radius: 0 10px 10px 0 !important;
  right: 70px !important;
}
sr7-module .sr7-rightarrow::before {
  background-image: url(../fonts/slider-next-white.svg) !important;
}
sr7-module .sr7-leftarrow {
  border-radius: 10px 0 0 10px !important;
  right: calc(var(--slider-nav-width) + 70px) !important;
}
sr7-module .sr7-leftarrow::before {
  background-image: url(../fonts/slider-prev-white.svg) !important;
}

sr7-bullets {
  margin-left: 20px !important;
  bottom: 0 !important;
}
sr7-bullets sr7-bullet {
  width: var(--slider-bullet-width) !important;
  backdrop-filter: blur(16px);
  border-radius: 10px !important;
  height: 13px !important;
  transition: all 0.5s !important;
}

/* ------------------------------------------------------ buttons */
.ubtn {
  padding-left: 30px !important;
  padding-right: 10px !important;
}
.ubtn.ubtn-sep-icon {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.ubtn.ubtn-sep-icon .ubtn-icon {
  display: block !important;
  width: 47px;
  height: 47px;
  border-radius: 12px;
  background: #676F53;
  position: relative !important;
  top: initial !important;
  right: initial !important;
  transform: none !important;
  overflow: hidden;
}
.ubtn.ubtn-sep-icon .ubtn-icon i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.ubtn.ubtn-sep-icon .ubtn-icon i::before, .ubtn.ubtn-sep-icon .ubtn-icon i::after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 42%;
  transition: all 0.5s;
}
.ubtn.ubtn-sep-icon .ubtn-icon i::before {
  background-image: url(../fonts/arrow-next-white.svg);
}
.ubtn.ubtn-sep-icon .ubtn-icon i::after {
  opacity: 0;
  background-image: url(../fonts/arrow-next.svg);
  transform: translateX(-20px);
}
.ubtn .ubtn-text {
  font-family: "PPFormula", sans-serif;
  font-weight: normal;
  padding-top: 5px;
}
.ubtn:hover .ubtn-icon i::before {
  opacity: 0;
  transform: translateX(20px);
}
.ubtn:hover .ubtn-icon i::after {
  opacity: 1;
  transform: translateX(0px);
}

#page .ubtn-link {
  opacity: 0;
  transition: all 0.5s;
  transform: scale(0.85);
}
#page .ubtn-link.view {
  opacity: 1;
  transform: scale(1);
}
#page .ubtn-link.olive .ubtn-icon {
  background-color: #ffffff;
}
#page .ubtn-link.olive .ubtn-icon i::before {
  background-image: url(../fonts/arrow-next-olive-gray.svg);
}
#page .ubtn-link.olive .ubtn-icon i::after {
  background-image: url(../fonts/arrow-next-olive-gray.svg);
}

/* ------------------------------------------ Sectors Table */
.sct-table-wrap {
  --sct-border: #B9BEAD;
  --sct-heading-bg: #676F53;
  --sct-text: #ffffff;
  --sct-muted: #667085;
  --sct-accent: #315efb;
  --sct-row-odd: #ffffff;
  --sct-row-even: #E4E7DD;
  --sct-row-hover: #dce2cc;
  width: 100%;
  margin-bottom: 35px;
  font-family: "PPFormula", sans-serif;
  font-weight: normal;
  color: var(--sct-text);
  font-size: 15px;
  line-height: 1.65;
  transition: all 0.6s;
  opacity: 0;
  transform: translateY(60px) scale(0.95);
}
.sct-table-wrap.view {
  opacity: 1;
  transform: translateY(0px) scale(1);
}
.sct-table-wrap *,
.sct-table-wrap *::before,
.sct-table-wrap *::after {
  box-sizing: border-box;
}

.sct-table {
  width: 100%;
  border: 1px solid var(--sct-border) !important;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  table-layout: fixed;
  background: #fff;
  overflow: hidden;
}
.sct-table thead th {
  font-family: "PPFormula", sans-serif;
  padding: 35px 22px;
  background: var(--sct-heading-bg);
  color: var(--sct-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
  border: 0;
  border-bottom: 1px solid var(--sct-border);
}
.sct-table th:nth-child(1),
.sct-table td:nth-child(1) {
  width: 17%;
}
.sct-table th:nth-child(2),
.sct-table td:nth-child(2) {
  width: 22%;
}
.sct-table th:nth-child(3),
.sct-table td:nth-child(3) {
  width: 55%;
}
.sct-table tbody tr {
  transition: background-color 0.2s ease;
}
.sct-table tbody tr:nth-child(odd) {
  background: var(--sct-row-odd);
}
.sct-table tbody tr:nth-child(even) {
  background: var(--sct-row-even);
}
.sct-table tbody tr:hover {
  background: var(--sct-row-hover);
}
.sct-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--sct-border);
}
.sct-table tbody tr:last-child td {
  border-bottom: 0;
}
.sct-table tbody td {
  padding: 18px 22px;
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: normal;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}
.sct-table tbody td.sct-sector {
  font-family: "PPFormula", sans-serif;
  color: #676F53;
  font-weight: bold;
}
.sct-table tbody td.sct-class {
  font-family: "PPFormula", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #8A9176;
}
.sct-table tbody td.sct-description {
  font-family: "PPFormula", sans-serif;
  font-weight: normal;
  font-size: 15px;
  color: #4B503C;
}
.sct-table .sct-empty {
  color: #98a2b3;
}

@media (max-width: 767px) {
  .sct-table-wrap {
    margin: 20px 0;
    font-size: 15px;
  }
  .sct-table {
    display: block;
    width: 100%;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }
  .sct-table thead {
    display: none;
  }
  .sct-table tbody {
    display: block;
    width: 100%;
  }
  .sct-table tbody tr {
    display: block;
    width: 100%;
    margin: 0 0 35px;
    padding: 10px 16px;
    border: 1px solid var(--sct-border);
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(16, 24, 40, 0.035);
    overflow: hidden;
  }
  .sct-table tbody tr:nth-child(odd) {
    background: var(--sct-row-odd);
  }
  .sct-table tbody tr:nth-child(even) {
    background: var(--sct-row-even);
  }
  .sct-table tbody tr:hover {
    background: var(--sct-row-hover);
  }
  .sct-table tbody tr td {
    display: block;
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #edf0f4;
    text-align: left;
  }
  .sct-table tbody tr td::before {
    display: block;
    margin-bottom: 4px;
    color: #8a94a6;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
  }
  .sct-table tbody tr td.sct-sector::before {
    content: "Sector";
  }
  .sct-table tbody tr td.sct-class::before {
    content: "Class";
  }
  .sct-table tbody tr td.sct-description::before {
    content: "Description";
  }
  .sct-table tbody tr td:last-child {
    border-bottom: 0;
  }
  .sct-table tbody tr:last-child td:last-child {
    border-bottom: 0;
  }
  .sct-table th:nth-child(n),
  .sct-table td:nth-child(n) {
    width: 100%;
  }
  .sct-table .sct-description,
  .sct-table .sct-sector,
  .sct-table .sct-class {
    font-size: 15px;
  }
  .sct-table .sct-description {
    line-height: 1.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sct-table tbody tr {
    transition: none;
  }
}
/* ------------------------------------------ Our Difference */
.ourdifference-list-wrapper {
  --ourdifference-image-width: clamp(220px, 20vw, 360px);
  --ourdifference-heading-size: clamp(22px, 3vw, 24px);
}

.ourdifference-list-wrapper {
  margin-bottom: 35px;
}
.ourdifference-list-wrapper .ourdifference-list {
  position: relative;
  margin-bottom: 10px;
  transition: all 0.5s;
}
.ourdifference-list-wrapper .ourdifference-list .ourdifference-list-inner {
  position: relative;
  background-color: #E6DCD1;
  border-radius: 10px;
  padding: clamp(28px, 3vw, 32px) calc(var(--ourdifference-image-width) + 66px) clamp(26px, 3vw, 30px) clamp(35px, 4vw, 80px);
  margin-bottom: 0;
  overflow: hidden;
  transition: all 0.6s;
  opacity: 0;
  transform: translateY(60px);
}
.ourdifference-list-wrapper .ourdifference-list .ourdifference-list-inner::before {
  position: absolute;
  content: "";
  display: block;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #E6DCD1;
  opacity: 0;
  transition: all 0.5s;
  border-radius: 10px;
  transform: translateY(10px) scale(1);
}
.ourdifference-list-wrapper .ourdifference-list.view .ourdifference-list-inner {
  opacity: 1;
  transform: translateY(0px);
}
.ourdifference-list-wrapper .ourdifference-list::after {
  position: absolute;
  content: "";
  display: block;
  height: 100%;
  width: var(--ourdifference-image-width);
  top: 0;
  right: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px;
  opacity: 0;
  transition: 0.5s;
  transform: translateY(-10px);
}
.ourdifference-list-wrapper .ourdifference-list .ourdifference-item-content {
  position: relative;
  z-index: 1;
}
.ourdifference-list-wrapper .ourdifference-list .ourdifference-item-media {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  z-index: 2;
  width: var(--ourdifference-image-width);
}
.ourdifference-list-wrapper .ourdifference-list .ourdifference-item-media img {
  max-width: var(--ourdifference-image-width);
  transition: all 0.8s;
  border-radius: 10px;
  opacity: 0;
  transform: translate(15px, 15px);
}
.ourdifference-list-wrapper .ourdifference-list .ourdifference-item-title {
  font-family: PPFormula, serif !important;
  font-weight: bold;
  line-height: 1.3;
  font-size: var(--ourdifference-heading-size);
  color: #676F53;
  margin: 10px 0 10px 0 !important;
  transition: all 0.5s;
}
.ourdifference-list-wrapper .ourdifference-list .ourdifference-item-description {
  font-family: PPFormula, serif !important;
  font-weight: 500;
  font-size: clamp(18px, 2.5vw, 20px);
  transition: all 0.5s;
}
.ourdifference-list-wrapper .ourdifference-list:hover .ourdifference-list-inner::before {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  background-color: #D4A88E;
  transform: translateY(0) scale(1);
}
.ourdifference-list-wrapper .ourdifference-list:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.ourdifference-list-wrapper .ourdifference-list:hover .ourdifference-item-description,
.ourdifference-list-wrapper .ourdifference-list:hover .ourdifference-item-title {
  color: #ffffff;
}
.ourdifference-list-wrapper .ourdifference-list:hover .ourdifference-item-media {
  z-index: 9999;
  overflow: visible !important;
}
.ourdifference-list-wrapper .ourdifference-list:hover .ourdifference-item-media img {
  opacity: 1;
  transform: translate(0, 0);
}

/* ------------------------------------------------------ Accessibility Matters */
#page .matters-wrapper {
  --item-title-size: 35px;
  --item-padding: clamp(70px, 10vw, 95px) 25px 50px 38px;
  margin: 35px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--items-gap);
}
#page .matters-wrapper .matters-item {
  background-color: var(--item-bg);
  backdrop-filter: blur(10px);
  padding: var(--item-padding);
  border-radius: 10px;
  transition: all 0.6s;
  opacity: 0;
  transform: translateX(50px);
}
#page .matters-wrapper .matters-item.view {
  opacity: 1;
  transform: translateX(0);
}
#page .matters-wrapper .matters-item:hover {
  transform: scale(1.02);
}
#page .matters-wrapper .matters-inner {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 25px;
  height: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
#page .matters-wrapper .counter-box,
#page .matters-wrapper .item-title {
  font-family: "PPFormula", sans-serif;
  font-size: clamp(67px, 7vw, 90px);
  font-weight: normal;
  line-height: 1 !important;
  color: var(--item-title-color);
  margin-bottom: 50px;
}
#page .matters-wrapper .counter-box {
  display: flex;
  flex-direction: row;
}
#page .matters-wrapper .item-description {
  font-family: "PPFormula", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: var(--item-text-color);
}
#page .matters-wrapper .link {
  font-family: "PPFormula", sans-serif;
  font-size: 18px;
  color: var(--item-title-color);
  display: inline-block;
  text-decoration: underline !important;
}

/* ------------------------------------------------------ Images Loop */
.images_loop_wrapper {
  white-space: nowrap;
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  /*
   mask-image: linear-gradient(
      to right,
      transparent,
      black 10%,
      black 90%,
      transparent
  );
  */
}
.images_loop_wrapper .images_loop_inner {
  margin-right: 40px;
  gap: 40px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
}
.images_loop_wrapper .images_loop_inner .images_loop_item {
  width: clamp(160px, 16vw, 280px);
}
.images_loop_wrapper .images_loop_inner img {
  flex-shrink: 0;
  border-radius: 24px;
  width: 100%;
  display: block;
  transition: all 0.3s;
  height: auto;
}
.images_loop_wrapper .images_loop_inner img:hover {
  transform: scale(1.1);
}

/* ------------------------------------------------------ quForm */
.quform {
  --quform-column-gap: 60px;
}

.quform .quform-element-row {
  margin: 0 calc(-1 * var(--quform-column-gap) / 2) !important;
}
.quform .quform-element-row > .quform-element-column {
  padding: 0 calc(var(--quform-column-gap) / 2);
}
.quform .quform-element-submit {
  margin: 0 !important;
}
.quform .quform-element-submit.white .quform-submit .quform-button-icon {
  background-color: #676f53;
}
.quform .quform-element-submit.white .quform-submit .quform-button-icon::before {
  background-image: url(../fonts/arrow-next-white.svg);
}
.quform .quform-field-select {
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 15px;
  background-image: url(../fonts/form-dropdown.svg);
}
.quform .quform-button-submit {
  margin: 0;
  float: none;
  width: 100%;
}
.quform .quform-button-submit .quform-submit {
  width: 100%;
  padding: 8px 10px 8px 26px;
  text-align: left;
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden;
  position: relative;
  line-height: 1.1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.quform .quform-button-submit .quform-submit .quform-button-text {
  font-family: "PPFormula", serif;
  font-weight: normal;
  font-size: 20px;
  position: relative;
  padding-top: 5px;
  z-index: 2;
  transition: all 0.4s;
}
.quform .quform-button-submit .quform-submit .quform-button-icon {
  position: relative;
  width: var(--button-inside-button-width);
  height: var(--button-inside-button-height);
  background-color: #ffffff;
  border-radius: 10px;
  transition: all 0.5s;
}
.quform .quform-button-submit .quform-submit .quform-button-icon i {
  display: none;
}
.quform .quform-button-submit .quform-submit .quform-button-icon::after, .quform .quform-button-submit .quform-submit .quform-button-icon::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 45%;
  transition: all 0.5s;
}
.quform .quform-button-submit .quform-submit .quform-button-icon::before {
  background-image: url(../fonts/arrow-next-olive-gray.svg);
}
.quform .quform-button-submit .quform-submit .quform-button-icon::after {
  background-image: url(../fonts/arrow-next-olive-gray.svg);
  opacity: 0;
  transform: translateX(-10px);
}
.quform .quform-button-submit .quform-submit:hover .quform-button-icon {
  background-color: #E6DCD1;
}
.quform .quform-button-submit .quform-submit:hover .quform-button-icon::before {
  opacity: 0;
  transform: translateX(10px);
}
.quform .quform-button-submit .quform-submit:hover .quform-button-icon::after {
  opacity: 1;
  transform: translateX(0);
}
.quform .quform-edit-form {
  display: none;
}
.quform .quform-upload-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-family: "PPFormula";
  font-size: 18px !important;
  font-weight: normal;
  padding: 16px 10px 16px 0;
  font-style: normal;
  background: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  outline: none !important;
}
.quform .quform-upload-button .quform-upload-button-icon {
  width: 20px !important;
  background-image: url(../fonts/upload.svg) !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  background-position: center !important;
}
.quform .quform-upload-button .quform-upload-button-icon i {
  opacity: 0 !important;
}
.quform .quform-element-file.white .quform-upload-button-icon {
  background-image: url(../fonts/upload-white.svg) !important;
}
.quform .quform-element-file.white .quform-upload-file {
  background-color: #676f53;
}
.quform .quform-description {
  font-family: "PPFormula";
  font-size: 16px !important;
  font-weight: normal;
  color: #B1B1B1;
}
.quform .quform-upload-file-name {
  font-family: "PPFormula";
  font-size: 16px;
  font-weight: normal;
}
.quform .quform-upload-button-text {
  font-family: "PPFormula";
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
}
.quform .quform-upload-file {
  border-radius: 4px !important;
}
.quform option {
  color: #676f53 !important;
}
.quform .quform-error > .quform-error-inner {
  line-height: 1.2;
  font-size: 15px;
  font-family: "PPFormula";
  font-weight: normal;
}

.quform-edit-form {
  display: none;
}

/*------------------------------------------ Swiper: scrollbar */
.swiper .swiper-slide {
  height: initial;
  transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}
.swiper .swiper-slide.view {
  opacity: 1;
  transform: translateX(0px);
}
.swiper .swiper-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  margin-top: 55px;
}
.swiper .swiper-scrollbar {
  position: relative;
  left: 0;
  top: initial;
  bottom: initial;
  width: 100%;
  height: 12px;
  background: #ffffff;
  display: block;
  border-radius: 0 !important;
}
.swiper .swiper-scrollbar .swiper-scrollbar-drag {
  background: #003768;
  border-radius: 0 !important;
}
.swiper .swiper-nav {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.swiper .swiper-nav button {
  position: relative;
  width: var(--swiper-nav-button-width);
  height: var(--swiper-nav-button-height);
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
  transition: all 0.5s;
}
.swiper .swiper-nav button span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  aspect-ratio: 1/1;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.swiper .swiper-nav button span::before, .swiper .swiper-nav button span::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.4s;
}
.swiper .swiper-nav button.swiper_button_next span::before {
  background-image: url(../fonts/arrow-next.svg);
}
.swiper .swiper-nav button.swiper_button_next span::after {
  opacity: 0;
  transform: translateX(-70%);
  background-image: url(../fonts/arrow-next.svg);
}
.swiper .swiper-nav button.swiper_button_next:hover span::before {
  transform: translateX(100%);
  opacity: 0;
}
.swiper .swiper-nav button.swiper_button_next:hover span::after {
  transform: translateX(0);
  opacity: 1;
}
.swiper .swiper-nav button.swiper_button_prev span::before {
  background-image: url(../fonts/arrow-next.svg);
}
.swiper .swiper-nav button.swiper_button_prev span::after {
  opacity: 0;
  transform: translateX(70%);
  background-image: url(../fonts/arrow-next.svg);
}
.swiper .swiper-nav button.swiper_button_prev:hover span::before {
  transform: translateX(-100%);
  opacity: 0;
}
.swiper .swiper-nav button.swiper_button_prev:hover span::after {
  transform: translateX(0);
  opacity: 1;
}

/*------------------------------------------ common for slider */
#page .swiper {
  border-radius: 10px 10px 0 10px;
}
#page .swiper .swiper-slide {
  background-color: var(--item-bg);
}
#page .swiper .swiper-slide .mode-item-inner {
  position: relative;
  transition: all 0.5s;
  transform: scale(0.55) translateX(60px);
  clip-path: inset(0 0 calc(var(--swiper-nav-button-height) + 30px) 0 round 10px);
}
#page .swiper .swiper-slide .mode-item-inner::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
  z-index: 0;
}
#page .swiper .swiper-slide.swiper-slide-active .mode-item-inner {
  clip-path: inset(0 0 0 0 round 10px);
}
#page .swiper .swiper-slide.swiper-slide-active .mode-item-inner .mode-item-description {
  opacity: 1;
  transform: translateY(0);
}
#page .swiper .swiper-slide.swiper-slide-visible .mode-item-inner {
  opacity: 1;
  transform: scale(1) translateX(0);
}
#page .swiper .swiper-slide .mode-item-media {
  text-align: center;
  overflow: hidden;
}
#page .swiper .swiper-slide .mode-item-media img {
  max-width: 100%;
  display: block;
  width: 100%;
  height: auto;
  border-width: var(--img-border-width);
  border-style: var(--img-border-style);
  border-color: var(--img-border-color);
  border-radius: var(--img-border-radius);
  overflow: hidden;
  box-sizing: border-box;
  transition: all 0.3s;
}
#page .swiper .swiper-slide .mode-item-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 15px clamp(20px, 2.4vw, 45px) clamp(20px, 3vw, 55px);
  box-sizing: border-box;
}
#page .swiper .swiper-slide .mode-item-index {
  font-family: "PPFormula";
  font-weight: 600;
  font-size: 31px;
  line-height: 30px;
  color: var(--item-title-color, #ffffff);
  margin-bottom: 12px;
}
#page .swiper .swiper-slide .mode-item-title {
  font-family: "PPFormula";
  font-weight: 500;
  font-size: clamp(22px, 2.1vw, 35px);
  line-height: 1.2;
  color: var(--item-title-color, #ffffff);
  margin-bottom: 22px;
}
#page .swiper .swiper-slide .mode-item-description {
  font-family: "PPFormula";
  font-weight: 300;
  color: var(--item-text-color, #ffffff);
  font-size: 15px;
  line-height: 1.2;
  max-width: 330px;
  opacity: 0;
  transition: all 0.9s;
  transform: translateY(30px);
}
#page .swiper .swiper-controls {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
#page .swiper .swiper-controls .swiper-scrollbar {
  opacity: 0;
  visibility: hidden;
  border: 0 !important;
  background-color: var(--scrollbar-bg, #000);
}
#page .swiper .swiper-controls .swiper-scrollbar .swiper-scrollbar-drag {
  background-color: var(--scrollbar-drag-bg, #000);
}
#page .swiper .swiper-controls .swiper-nav button {
  background-color: var(--nav-bg, #000);
}

/* ------------------------------------------------------ Solution works */
.solution-works-wrapper {
  --cp-default-card-bg: rgba(230, 220, 209, 0.4);
  --cp-default-number-bg: #676F53;
  --cp-default-title: #676F53;
  --cp-default-text: #676F53;
  --cp-default-border: #e8e0d9;
  width: 100%;
  margin-bottom: 35px;
  box-sizing: border-box;
}

.solution-works-wrapper *,
.solution-works-wrapper *::before,
.solution-works-wrapper *::after {
  box-sizing: border-box;
}

.solution-works-wrapper .solution-works-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.solution-works-wrapper .solution-works-card {
  position: relative;
  min-width: 0;
  margin-top: 19px;
  padding: 120px 22px 50px 22px;
  background: var(--cp-card-bg, var(--cp-default-card-bg));
  border: 1px solid var(--cp-card-border, var(--cp-default-border));
  border-radius: 10px;
  color: var(--cp-description-color, var(--cp-default-text));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-wrap: anywhere;
  transition: all 0.6s;
  opacity: 0;
  transform: translateX(30px) scale(0.9);
}
.solution-works-wrapper .solution-works-card.view {
  opacity: 1;
  transform: translateX(0px) scale(1);
}

.solution-works-wrapper .solution-works-number {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  min-width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-number-bg, var(--cp-default-number-bg));
  color: var(--cp-number-color, #ffffff);
  font-family: "PPFormula", serif;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  z-index: 2;
}

.solution-works-wrapper .solution-works-image {
  width: 100%;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution-works-wrapper .solution-works-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

.solution-works-wrapper .solution-works-title {
  font-family: "PPFormula", serif;
  font-size: 25px;
  font-weight: bold;
  width: 100%;
  margin: 35px 0;
  padding: 0;
  color: var(--cp-title-color, var(--cp-default-title));
}

.solution-works-wrapper .solution-works-description {
  width: 100%;
  margin: 0;
  color: inherit;
  font-family: "PPFormula", serif;
  font-weight: normal;
}

.solution-works-wrapper .solution-works-description p {
  margin: 0 0 10px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.solution-works-wrapper .solution-works-description p:last-child {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .solution-works-wrapper .solution-works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 18px;
  }
}
@media (max-width: 575px) {
  .solution-works-wrapper .solution-works-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .solution-works-wrapper .solution-works-card {
    padding: 96px 25px 35px;
  }
  .solution-works-wrapper .solution-works-title {
    font-size: 24px;
    margin-bottom: 25px;
    margin-top: 25px;
  }
}
/* ------------------------------------------------------ List icons */
#page .uavc-list li {
  margin-bottom: 20px !important;
  transition: all 0.6s;
  opacity: 0;
  transform: translateX(30px);
}
#page .uavc-list li.view {
  opacity: 1;
  transform: translateX(0);
}

/* ------------------------------------------------------ Box Container*/
.ult-content-box-container.box_link .ult-content-box {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px);
}

/* ----------------------------------------------------- Meet our team*/
.awsm-grid-wrapper {
  position: relative;
  z-index: 1;
}

.awsm-grid.drawer-style.style-2 {
  margin-left: -20px;
  margin-right: -20px;
  padding: 0;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding {
  max-width: 100%;
  padding: 15px 80px 35px 20px;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-details {
  width: 100%;
  padding-left: 0px;
  float: none;
  height: initial;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-details .awsm-content-scrollbar {
  color: #676F53;
  line-height: inherit;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-details .awsm-content-scrollbar p {
  line-height: inherit;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-details .awsm-content-scrollbar li {
  margin-bottom: 10px;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-details .awsm-personal-details,
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-details .mCustomScrollBox {
  max-height: initial !important;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-grid-close {
  width: clamp(55px, 5vw, 76px);
  height: initial;
  display: inline-block;
  right: 20px;
  aspect-ratio: 1;
  top: 8px;
  background-color: #ffffff;
  border-radius: 10px;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-grid-close::after, .awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-grid-close::before {
  width: 74%;
  left: 13%;
  background-color: #676F53 !important;
  height: 3px !important;
  border-radius: 2px;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-content-scrollbar h2.title {
  font-family: "PPFormula", serif;
  font-weight: bold;
  margin-bottom: 0;
  text-transform: initial;
  font-size: 25px;
  color: #676F53;
  margin-bottom: 5px !important;
  margin-top: 0 !important;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-content-scrollbar .position {
  font-family: "PPFormula", serif;
  font-weight: 300;
  font-size: 18px;
  margin-bottom: 0px;
  display: inline-block;
  margin-left: 0;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-content-scrollbar .awsm-team-short-desc {
  font-family: "PPFormula", serif;
  font-weight: normal;
  margin-top: 8px;
  margin-bottom: 25px;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-content-scrollbar .wpb_single_image,
.awsm-grid.drawer-style.style-2 .awsm-grid-padding .awsm-content-scrollbar .wpb_text_column {
  margin-bottom: 15px;
}
.awsm-grid.drawer-style.style-2 .awsm-header-wrapper {
  display: flex;
  flex-direction: row;
  gap: 35px;
  align-items: center;
  margin-bottom: 35px;
}
.awsm-grid.drawer-style.style-2 .awsm-header-wrapper .awsm-header-info {
  position: relative;
  padding-right: 35px;
}
.awsm-grid.drawer-style.style-2 .awsm-header-wrapper .awsm-header-info::before {
  display: block;
  position: absolute;
  content: "";
  background-color: #676F53;
  width: 1px;
  top: 5px;
  bottom: 5px;
  right: 0;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list {
  padding: 0 20px 50px 20px;
  transition: all 0.5s;
  opacity: 0;
  transform: translate(20px, 20px) scale(0.95);
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list.view {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list .awsm-grid-list-item figure {
  box-shadow: 0 0 18px #ebebeb;
  border-radius: 10px;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list .awsm-grid-list-item figure::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s;
  transform: translateY(30px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgb(0, 0, 0) 100%);
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list img {
  transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -webkit-transition: all 0.7s ease;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list .awsm-team-link-control:hover figure::before {
  opacity: 1;
  transform: translateY(0);
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list .awsm-team-link-control:hover img {
  transform: scale(1.05);
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list figcaption {
  padding: 14px 60px 14px 20px;
  transform: initial !important;
  background-color: rgba(103, 111, 83, 0.8);
  transition: all 0.4s cubic-bezier(0.43, 0.195, 0.02, 1);
  -moz-transition: all 0.4s cubic-bezier(0.43, 0.195, 0.02, 1);
  -webkit-transition: all 0.4s cubic-bezier(0.43, 0.195, 0.02, 1);
  z-index: 2;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list figcaption::after {
  content: "" !important;
  width: 45px;
  height: 45px;
  aspect-ratio: 1;
  top: 50% !important;
  right: 15px;
  margin-top: -22px;
  background-image: url(../fonts/arrow-down.svg);
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.5s cubic-bezier(0.43, 0.195, 0.02, 1);
  -moz-transition: all 0.5s cubic-bezier(0.43, 0.195, 0.02, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.43, 0.195, 0.02, 1);
  background-color: #ffffff;
  border-radius: 10px;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list .awsm-personal-info h3 {
  font-family: "PPFormula", serif;
  font-size: 16px;
  font-weight: bold;
  text-transform: initial;
  line-height: 1.1;
  margin-bottom: 5px !important;
  margin-top: 5px !important;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list .awsm-personal-info span {
  font-family: "PPFormula", serif;
  font-weight: 300;
  font-size: 10px;
  text-transform: initial;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list.awsm-expanded figcaption {
  background-color: #676F53;
}
.awsm-grid.drawer-style.style-2 .awsm-grid-list.awsm-expanded figcaption::after {
  transform: scaleY(-1) !important;
}
.awsm-grid.drawer-style.style-2 .awsm-social-icons {
  display: flex;
  flex-direction: row;
  gap: 15px;
  margin: 0;
  align-items: baseline;
}
.awsm-grid.drawer-style.style-2 .awsm-social-icons span {
  font-family: "PPFormula", serif;
  font-size: 18px;
  color: #676F53;
  font-weight: normal;
  border: 0;
  display: block;
  text-align: left;
  margin: 0;
  padding: 0;
  line-height: 1.1;
}
.awsm-grid.drawer-style.style-2 .awsm-social-icons span svg {
  display: block;
}
.awsm-grid.drawer-style.style-2 .awsm-social-icons a {
  font-family: "PPFormula", serif;
  font-size: 18px;
  font-weight: normal;
  color: #676F53;
  border: 0;
  text-decoration: none !important;
  transform: none !important;
  display: flex;
  flex-direction: row;
  gap: 15px;
  margin: 0;
  align-items: baseline;
}
.awsm-grid.drawer-style.style-2 .awsm-social-icons a svg {
  transition: all 0.3s;
  border-radius: 10px;
}
.awsm-grid.drawer-style.style-2 .awsm-social-icons a:hover svg {
  transform: scale(1.02);
  background-color: #ffffff;
}

/* ------------------------------------------------------ FAQ*/
#page .vc_do_toggle {
  transition: all 0.6s;
  opacity: 0;
  transform: translateY(60px);
}
#page .vc_do_toggle.view {
  opacity: 1;
  transform: translateY(0px);
}
#page .vc_do_toggle .vc_toggle_title {
  font-family: "PPFormula", serif;
  font-weight: 600;
  font-size: 20px;
  background-color: #676F53;
  border-radius: 10px;
  padding: 12px 15px 12px 35px;
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: space-between;
  align-items: center;
}
#page .vc_do_toggle .vc_toggle_title h4 {
  margin: 0;
  color: #ffffff;
}
#page .vc_do_toggle .vc_toggle_title .vc_toggle_icon {
  position: relative;
  width: var(--faq-icon-width);
  height: var(--faq-icon-width);
  aspect-ratio: 1;
  top: initial;
  transform: none;
  border-radius: 10px;
  background-color: #ffffff;
  border: 0 !important;
}
#page .vc_do_toggle .vc_toggle_title .vc_toggle_icon::before, #page .vc_do_toggle .vc_toggle_title .vc_toggle_icon::after {
  position: absolute;
  content: "";
  display: block;
  width: initial;
  height: initial;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 34%;
  transition: all 0.3s;
  background-color: transparent;
  border: 0;
  visibility: visible;
}
#page .vc_do_toggle .vc_toggle_title .vc_toggle_icon::before {
  background-image: url(../fonts/arrow-down.svg);
  transform: translate(0, 0);
}
#page .vc_do_toggle .vc_toggle_title .vc_toggle_icon::after {
  opacity: 0;
  background-image: url(../fonts/arrow-up.svg);
  transform: translate(0, 10px);
}
#page .vc_do_toggle.vc_toggle_active .vc_toggle_icon::before {
  opacity: 0;
  transform: translate(0, -10px);
}
#page .vc_do_toggle.vc_toggle_active .vc_toggle_icon::after {
  opacity: 1;
  transform: translate(0, 0px);
}
#page .vc_do_toggle .vc_toggle_content h3 {
  margin-top: 35px;
  margin-bottom: 10px;
  font-weight: 600;
}
#page .vc_do_toggle .vc_toggle_content p {
  margin-bottom: 25px;
}
#page .vc_do_toggle .vc_toggle_content li {
  margin-bottom: 15px;
}

/* ------------------------------------------ Advanced Tabs */
#page .ult_tabcontent {
  padding: 18px;
}
#page .ult_tabs {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 22px;
}
#page .ult_tabs .ult_tabmenu {
  max-width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-between;
}
#page .ult_tabs .ult_tabmenu .ult_tab_li {
  flex: 1;
  background-color: #E6DCD1;
  border-radius: 10px;
}
#page .ult_tabs .ult_tabmenu .ult_tab_li a {
  display: flex;
  align-items: center;
  padding: clamp(20px, 3vw, 25px) 10px clamp(20px, 3vw, 25px) clamp(20px, 3.6vw, 48px);
  width: 100%;
  height: 100%;
  white-space: initial;
  text-align: left;
}
#page .ult_tabs .ult_tabmenu .ult_tab_li .ult_tab_section {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}
#page .ult_tabs .ult_tabmenu .ult_tab_li .ult_tab_section .aio-icon {
  margin: 0;
  position: relative;
  width: 30px;
  height: 30px;
  min-width: 30px;
  display: block;
}
#page .ult_tabs .ult_tabmenu .ult_tab_li .ult_tab_section .aio-icon::before, #page .ult_tabs .ult_tabmenu .ult_tab_li .ult_tab_section .aio-icon::after {
  position: absolute;
  content: "";
  display: block;
  width: initial;
  height: initial;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.5s;
  background-color: transparent;
  border: 0;
  visibility: visible;
}
#page .ult_tabs .ult_tabmenu .ult_tab_li .ult_tab_section .aio-icon::before {
  background-image: url(../fonts/calculator.svg);
}
#page .ult_tabs .ult_tabmenu .ult_tab_li .ult_tab_section .aio-icon::after {
  opacity: 0;
  background-image: url(../fonts/calculator-white.svg);
  transform: translateX(-10px);
}
#page .ult_tabs .ult_tabmenu .ult_tab_li.current .ult_tab_section .aio-icon::before {
  opacity: 0;
  transform: translateX(10px);
}
#page .ult_tabs .ult_tabmenu .ult_tab_li.current .ult_tab_section .aio-icon::after {
  opacity: 1;
  transform: translateX(0);
}
#page .ult_tabs .ult-span-text {
  font-family: "PPFormula", sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 3vw, 20px) !important;
  margin: 0;
  line-height: 1.2;
}

/* ------------------------------------------ Form: Luminance Contrast Calculator */
.lcc-calculator {
  font-family: "PPFormula", sans-serif;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 35px;
  opacity: 0;
  transition: all 0.6s;
  transform: translateY(30px) scale(0.9);
}
.lcc-calculator.view {
  opacity: 1;
  transform: translateY(0px) scale(1);
}
.lcc-calculator *,
.lcc-calculator *::before,
.lcc-calculator *::after {
  box-sizing: border-box;
}
.lcc-calculator .lcc-field {
  margin: 0 0 20px;
}
.lcc-calculator .lcc-field .lcc-input-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: initial;
}
.lcc-calculator .lcc-field .lcc-input-wrap span {
  position: absolute;
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
  display: block;
  top: 50%;
  left: 22px;
  margin-top: -16px;
}
.lcc-calculator .lcc-field .lcc-input-wrap span::before, .lcc-calculator .lcc-field .lcc-input-wrap span::after {
  position: absolute;
  content: "";
  display: block;
  width: initial;
  height: initial;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.8s;
  background-color: transparent;
  border: 0;
}
.lcc-calculator .lcc-field .lcc-input-wrap.lrv1-wrap span::before {
  background-image: url(../fonts/light_mode.svg);
}
.lcc-calculator .lcc-field .lcc-input-wrap.lrv1-wrap span::after {
  background-image: url(../fonts/light_mode_focus.svg);
  opacity: 0;
  transform: translateX(-10px);
}
.lcc-calculator .lcc-field .lcc-input-wrap.lrv2-wrap span::before {
  background-image: url(../fonts/contrast.svg);
}
.lcc-calculator .lcc-field .lcc-input-wrap.lrv2-wrap span::after {
  background-image: url(../fonts/contrast_focus.svg);
  opacity: 0;
  transform: translateX(-10px);
}
.lcc-calculator .lcc-field .lcc-input-wrap.contrast-wrap span::before {
  background-image: url(../fonts/contrast.svg);
}
.lcc-calculator .lcc-field .lcc-input-wrap.contrast-wrap span::after {
  background-image: url(../fonts/contrast_focus.svg);
  opacity: 0;
  transform: translateX(-10px);
}
.lcc-calculator .lcc-field .lcc-input-wrap.lcc-captcha-control span {
  width: 28px;
  height: 28px;
  margin-top: -14px;
}
.lcc-calculator .lcc-field .lcc-input-wrap.lcc-captcha-control span::before {
  background-image: url(../fonts/lock.svg);
}
.lcc-calculator .lcc-field .lcc-input-wrap.lcc-captcha-control span::after {
  background-image: url(../fonts/lock_focus.svg);
  opacity: 0;
  transform: translateX(-10px);
}
.lcc-calculator .lcc-field .lcc-input-wrap.focus span::before {
  opacity: 0;
  transform: translateX(10px);
}
.lcc-calculator .lcc-field .lcc-input-wrap.focus span::after {
  opacity: 1;
  transform: translateX(0);
}
.lcc-calculator .lcc-label {
  font-family: "PPFormula", sans-serif;
  font-weight: bold;
  line-height: 1.3;
  color: #676F53;
  display: block;
  margin: 0 0 8px 0;
}
.lcc-calculator .lcc-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: clamp(18px, 3vw, 25px) 15px clamp(18px, 3vw, 25px) clamp(65px, 10vw, 85px) !important;
  margin: 0;
  border: 1px solid #EEEDEC;
  border-radius: 10px;
  background: #EEEDEC;
  color: #676F53;
  font-family: "PPFormula", sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-size: 16px !important;
  box-shadow: none;
  outline: none !important;
}
.lcc-calculator .lcc-input:focus {
  outline: none !important;
}
.lcc-calculator .lcc-result {
  width: 100%;
  display: block;
  min-width: 84px;
  min-height: 40px;
  font-family: "PPFormula", sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-size: 16px !important;
  padding: clamp(18px, 3vw, 25px) 15px clamp(18px, 3vw, 25px) clamp(65px, 10vw, 85px) !important;
  border-radius: 10px;
  background: #EEEDEC;
}
.lcc-calculator .lcc-captcha-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.lcc-calculator .lcc-question {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f5f5f5;
  font-weight: 700;
  white-space: nowrap;
}
.lcc-calculator .lcc-answer {
  flex: 1;
  min-width: 100px;
}
.lcc-calculator .lcc-actions {
  position: relative;
  border: 0;
  border-radius: 10px;
  background: #676F53;
  margin: 35px 0 35px 0 !important;
  padding: 0 !important;
}
.lcc-calculator .lcc-actions .lcc-button {
  font-family: "PPFormula", sans-serif !important;
  font-weight: bold !important;
  text-align: left;
  width: 100% !important;
  padding: 30px 20px 25px 80px !important;
  color: #fff;
  cursor: pointer;
  background: transparent !important;
  outline: none !important;
  border: 0 !important;
}
.lcc-calculator .lcc-actions .lcc-button:hover:not(:disabled) {
  background: #444;
}
.lcc-calculator .lcc-actions .lcc-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.lcc-calculator .lcc-actions span {
  position: absolute;
}
.lcc-calculator .lcc-actions span.icon {
  width: 32px;
  height: 32px;
  top: 50%;
  left: 22px;
  margin-top: -16px;
  display: block;
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.3s;
  background-image: url(../fonts/icon-calculator-white.svg);
}
.lcc-calculator .lcc-actions span.button_icon {
  position: absolute;
  top: 50%;
  margin-top: -27px;
  right: 12px;
  width: 52px;
  height: 54px;
  display: block;
  border-radius: 10px;
  background-color: #ffffff;
}
.lcc-calculator .lcc-actions span.button_icon::before, .lcc-calculator .lcc-actions span.button_icon::after {
  position: absolute;
  content: "";
  display: block;
  width: initial;
  height: initial;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 45%;
  transition: all 0.5s;
  background-color: transparent;
  border: 0;
  visibility: visible;
}
.lcc-calculator .lcc-actions span.button_icon::before {
  background-image: url(../fonts/arrow-next-olive-gray.svg);
}
.lcc-calculator .lcc-actions span.button_icon::after {
  opacity: 0;
  background-image: url(../fonts/arrow-next-olive-gray.svg);
  transform: translateX(-10px);
}
.lcc-calculator .lcc-actions:hover .button_icon::before {
  opacity: 0;
  transform: translateX(10px);
}
.lcc-calculator .lcc-actions:hover .button_icon::after {
  opacity: 1;
  transform: translateX(0);
}
.lcc-calculator .lcc-standards {
  margin-bottom: 15px;
}
.lcc-calculator .lcc-standard {
  font-family: "PPFormula", sans-serif;
  font-weight: normal;
  font-size: 15px;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(90px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #eee;
}
.lcc-calculator .lcc-standard p {
  margin: 0;
}
.lcc-calculator .lcc-notes {
  padding: clamp(32px, 7vw, 45px) clamp(20px, 5vw, 35px) 30px clamp(20px, 5vw, 35px);
  background-color: #EEEDEC;
  border-radius: 10px;
}
.lcc-calculator .lcc-notes .lcc-notes-inner {
  position: relative;
  font-family: "PPFormula", sans-serif;
  font-weight: normal;
  font-size: 15px;
  line-height: 20px;
  padding-left: clamp(55px, 9vw, 75px);
}
.lcc-calculator .lcc-notes .lcc-notes-inner::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../fonts/notes.svg);
}
.lcc-calculator .lcc-notes .lcc-notes-inner p {
  margin-bottom: 17px;
}
.lcc-calculator .lcc-status {
  font-weight: 700;
  white-space: nowrap;
}
.lcc-calculator [data-lcc-pass] {
  color: #16803c;
}
.lcc-calculator [data-lcc-fail] {
  color: #d63638;
}
.lcc-calculator [hidden] {
  display: none !important;
}
@media (max-width: 480px) {
  .lcc-calculator .lcc-field {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .lcc-calculator .lcc-standard {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
}

/* ------------------------------------------ Form: Slope & Gradients Calculator */
.slgradients-calculator {
  font-family: "PPFormula", sans-serif;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 35px;
  opacity: 0;
  transition: all 0.6s;
  transform: translateY(30px) scale(0.9);
}
.slgradients-calculator.view {
  opacity: 1;
  transform: translateY(0px) scale(1);
}
.slgradients-calculator *,
.slgradients-calculator *::before,
.slgradients-calculator *::after {
  box-sizing: border-box;
}
.slgradients-calculator .slgradients-field {
  margin: 0 0 20px;
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: initial;
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap span {
  position: absolute;
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
  display: block;
  top: 50%;
  left: 22px;
  margin-top: -16px;
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap span::before, .slgradients-calculator .slgradients-field .slgradients-input-wrap span::after {
  position: absolute;
  content: "";
  display: block;
  width: initial;
  height: initial;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.8s;
  background-color: transparent;
  border: 0;
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.slopeperc-wrap span {
  width: 21px;
  height: 21px;
  margin-top: -11px;
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.slopeperc-wrap span::before {
  background-image: url(../fonts/percent.svg);
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.slopeperc-wrap span::after {
  background-image: url(../fonts/percent-focus.svg);
  opacity: 0;
  transform: translateX(-10px);
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.slopedeg-wrap span {
  width: 22px;
  height: 22px;
  margin-top: -11px;
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.slopedeg-wrap span::before {
  background-image: url(../fonts/degrees.svg);
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.slopedeg-wrap span::after {
  background-image: url(../fonts/degrees-focus.svg);
  opacity: 0;
  transform: translateX(-10px);
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.sloperatio-wrap span {
  width: 26px;
  height: 26px;
  margin-top: -13px;
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.sloperatio-wrap span::before {
  background-image: url(../fonts/ratio.svg);
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.sloperatio-wrap span::after {
  background-image: url(../fonts/ratio-focus.svg);
  opacity: 0;
  transform: translateX(-10px);
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.slgradients-captcha-control span {
  width: 28px;
  height: 28px;
  margin-top: -14px;
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.slgradients-captcha-control span::before {
  background-image: url(../fonts/lock.svg);
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.slgradients-captcha-control span::after {
  background-image: url(../fonts/lock_focus.svg);
  opacity: 0;
  transform: translateX(-10px);
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.focus span::before {
  opacity: 0;
  transform: translateX(10px);
}
.slgradients-calculator .slgradients-field .slgradients-input-wrap.focus span::after {
  opacity: 1;
  transform: translateX(0);
}
.slgradients-calculator .slgradients-field .notes {
  font-family: "PPFormula";
  font-size: 14px;
  line-height: 20px;
  display: block;
  font-weight: 500;
  margin-top: -3px;
}
.slgradients-calculator .slgradients-label {
  font-family: "PPFormula", sans-serif;
  font-weight: bold;
  line-height: 1.3;
  color: #676F53;
  display: block;
  margin: 0 0 8px 0;
}
.slgradients-calculator .slgradients-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: clamp(18px, 3vw, 25px) 15px clamp(18px, 3vw, 25px) clamp(65px, 10vw, 85px) !important;
  margin: 0;
  border: 1px solid #EEEDEC;
  border-radius: 10px;
  background: #EEEDEC;
  color: #676F53;
  font-family: "PPFormula", sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-size: 16px !important;
  box-shadow: none;
  outline: none !important;
}
.slgradients-calculator .slgradients-input:focus {
  outline: none !important;
}
.slgradients-calculator .slgradients-result {
  width: 100%;
  display: block;
  min-width: 84px;
  min-height: 40px;
  font-family: "PPFormula", sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-size: 16px !important;
  padding: clamp(18px, 3vw, 25px) 15px clamp(18px, 3vw, 25px) clamp(65px, 10vw, 85px) !important;
  border-radius: 10px;
  background: #EEEDEC;
}
.slgradients-calculator .slgradients-captcha-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.slgradients-calculator .slgradients-question {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f5f5f5;
  font-weight: 700;
  white-space: nowrap;
}
.slgradients-calculator .slgradients-answer {
  flex: 1;
  min-width: 100px;
}
.slgradients-calculator .slgradients-actions {
  position: relative;
  border: 0;
  border-radius: 10px;
  background: #676F53;
  margin: 35px 0 35px 0 !important;
  padding: 0 !important;
}
.slgradients-calculator .slgradients-actions .slgradients-button {
  font-family: "PPFormula", sans-serif !important;
  font-weight: bold !important;
  text-align: left;
  width: 100% !important;
  padding: 30px 20px 25px 80px !important;
  color: #fff;
  cursor: pointer;
  background: transparent !important;
  outline: none !important;
  border: 0 !important;
}
.slgradients-calculator .slgradients-actions .slgradients-button:hover:not(:disabled) {
  background: #444;
}
.slgradients-calculator .slgradients-actions .slgradients-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.slgradients-calculator .slgradients-actions span {
  position: absolute;
}
.slgradients-calculator .slgradients-actions span.icon {
  width: 32px;
  height: 32px;
  top: 50%;
  left: 22px;
  margin-top: -16px;
  display: block;
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.3s;
  background-image: url(../fonts/icon-calculator-white.svg);
}
.slgradients-calculator .slgradients-actions span.button_icon {
  position: absolute;
  top: 50%;
  margin-top: -27px;
  right: 12px;
  width: 52px;
  height: 54px;
  display: block;
  border-radius: 10px;
  background-color: #ffffff;
}
.slgradients-calculator .slgradients-actions span.button_icon::before, .slgradients-calculator .slgradients-actions span.button_icon::after {
  position: absolute;
  content: "";
  display: block;
  width: initial;
  height: initial;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 45%;
  transition: all 0.5s;
  background-color: transparent;
  border: 0;
  visibility: visible;
}
.slgradients-calculator .slgradients-actions span.button_icon::before {
  background-image: url(../fonts/arrow-next-olive-gray.svg);
}
.slgradients-calculator .slgradients-actions span.button_icon::after {
  opacity: 0;
  background-image: url(../fonts/arrow-next-olive-gray.svg);
  transform: translateX(-10px);
}
.slgradients-calculator .slgradients-actions:hover .button_icon::before {
  opacity: 0;
  transform: translateX(10px);
}
.slgradients-calculator .slgradients-actions:hover .button_icon::after {
  opacity: 1;
  transform: translateX(0);
}
.slgradients-calculator .slgradients-standards {
  margin-bottom: 15px;
}
.slgradients-calculator .slgradients-standard {
  font-family: "PPFormula", sans-serif;
  font-weight: normal;
  font-size: 15px;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(90px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #eee;
}
.slgradients-calculator .slgradients-standard p {
  margin: 0;
}
.slgradients-calculator .slgradients-notes {
  padding: clamp(20px, 5vw, 35px) clamp(20px, 5vw, 35px) 30px clamp(20px, 5vw, 35px);
  background-color: #EEEDEC;
  border-radius: 10px;
}
.slgradients-calculator .slgradients-notes .slgradients-notes-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  font-family: "PPFormula", sans-serif;
  font-weight: normal;
  font-size: 15px;
  line-height: 20px;
  min-height: 42px;
  gap: clamp(12px, 9vw, 32px);
}
.slgradients-calculator .slgradients-notes .slgradients-notes-inner .note {
  min-width: 42px;
  width: 42px;
  height: 42px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../fonts/notes.svg);
}
.slgradients-calculator .slgradients-notes .slgradients-notes-inner p {
  margin-bottom: 17px;
}
.slgradients-calculator .slgradients-notes .slgradients-notes-inner > div p:last-child {
  margin: 0;
}
.slgradients-calculator .slgradients-status {
  font-weight: 700;
  white-space: nowrap;
}
.slgradients-calculator [data-lcc-pass] {
  color: #16803c;
}
.slgradients-calculator [data-lcc-fail] {
  color: #d63638;
}
.slgradients-calculator [hidden] {
  display: none !important;
}
@media (max-width: 480px) {
  .slgradients-calculator .slgradients-field {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .slgradients-calculator .slgradients-standard {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
}

/* ------------------------------------------ Secure Invoice Payment */
#page .aspg-form .aspg-field label {
  font-family: "PPFormula", sans-serif;
  font-size: 18px;
}
#page .aspg-form input {
  font-family: "PPFormula", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #676F53;
  padding: 15px 20px;
  border-radius: 10px;
  border: 1px solid #ccc;
}
#page .aspg-form .aspg-button {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  padding: 12px 12px 12px 25px;
  font-family: "PPFormula", sans-serif;
  font-weight: normal;
  font-size: 18px;
  color: #ffffff;
  background-color: #676F53;
  border-radius: 10px;
  border: 0;
  outline: none !important;
  cursor: pointer;
}
#page .aspg-form .aspg-button span {
  position: relative;
  width: 54px;
  height: 52px;
  display: block;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}
#page .aspg-form .aspg-button span::before, #page .aspg-form .aspg-button span::after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 42%;
  transition: all 0.5s;
}
#page .aspg-form .aspg-button span::before {
  background-image: url(../fonts/arrow-next-olive-gray.svg);
}
#page .aspg-form .aspg-button span::after {
  opacity: 0;
  background-image: url(../fonts/arrow-next-olive-gray.svg);
  transform: translateX(-20px);
}
#page .aspg-form .aspg-button:hover span::before {
  opacity: 0;
  transform: translateX(20px);
}
#page .aspg-form .aspg-button:hover span::after {
  opacity: 1;
  transform: translateX(0);
}

/* ------------------------------------------ Google map */
#page .ultimate-map-wrapper {
  transition: all 0.7s;
  opacity: 0;
  transform: translateY(40px);
}
#page .ultimate-map-wrapper.view {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------ Google Reviews */
#page .wp-gr .grw-row {
  flex-direction: column;
  gap: 35px;
}
#page .wp-gr .grw-row .grw-header {
  order: 2;
}
#page .wp-gr .grw-row .grw-header .wp-google-based {
  font-family: "PPFormula" !important;
  font-size: 12px !important;
  font-weight: normal !important;
}
#page .wp-gr .grw-row .grw-header .rpi-flx {
  align-items: center !important;
}
#page .wp-gr .grw-row .grw-header .rpi-stars {
  margin-left: auto !important;
  margin-right: auto !important;
}
#page .wp-gr .grw-row .grw-header .wp-google-wr,
#page .wp-gr .grw-row .grw-header .wp-google-powered {
  font-size: 46px !important;
}
#page .wp-gr .grw-row .grw-header .wp-google-wr span,
#page .wp-gr .grw-row .grw-header .wp-google-powered span {
  font-family: "PPFormula" !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}
#page .wp-gr .grw-row .grw-header .wp-google-wr {
  margin-top: 20px !important;
}
#page .wp-gr .grw-row .grw-header .wp-google-wr a {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-decoration: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-image: url(../fonts/google.svg) !important;
  color: transparent !important;
}
#page .wp-gr .grw-row .grw-header .wp-google-wr a svg {
  display: none !important;
}
#page .wp-gr .grw-row .grw-header .rpi-rating {
  font-family: "PPFormula" !important;
  font-weight: normal !important;
  font-size: 27px !important;
  color: #ffffff !important;
}
#page .wp-gr .grw-row .grw-header .rpi-stars {
  --star-size: 28px !important;
}
#page .wp-gr .grw-row .rpi-slides-root {
  width: 100% !important;
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt {
  width: 63px !important;
  height: 57px !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(6px) !important;
  overflow: hidden !important;
  transition: all 0.5s !important;
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt::after, #page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt::before {
  position: absolute !important;
  content: "" !important;
  display: block !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35%;
  background-color: transparent !important;
  mask: initial !important;
  width: initial !important;
  height: initial !important;
  transition: all 0.3s;
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-prev {
  margin-left: -40px !important;
  border-radius: 10px 0 0 10px !important;
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-prev::before {
  background-image: url(../fonts/arrow-prev-white.svg);
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-prev::after {
  background-image: url(../fonts/arrow-prev-white.svg);
  transform: translateX(20px);
  opacity: 0;
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-prev:hover::before {
  opacity: 0;
  transform: translateX(-20px);
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-prev:hover::after {
  opacity: 1;
  transform: translateX(0);
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-next {
  margin-right: -40px !important;
  border-radius: 0 10px 10px 0 !important;
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-next::before {
  background-image: url(../fonts/arrow-next-white.svg);
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-next::after {
  background-image: url(../fonts/arrow-next-white.svg);
  transform: translateX(-20px);
  opacity: 0;
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-next:hover::before {
  opacity: 0;
  transform: translateX(50%);
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-next:hover::after {
  opacity: 1;
  transform: translateX(0);
}
#page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt:hover {
  background-color: rgba(103, 111, 83, 0.6) !important;
  border: 1px solid rgba(103, 111, 83, 0.2) !important;
}
#page .wp-gr .grw-reviews {
  border-radius: 24px;
  mask: none !important;
  -webkit-mask: none !important;
}
#page .wp-gr .grw-review .grw-review-inner {
  padding: 26px !important;
  margin: 0 15px !important;
  border-radius: 24px !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
#page .wp-gr .grw-review .wp-google-feedback {
  font-family: "Poppins";
  font-weight: normal;
  height: 150px !important;
}
#page .wp-gr .grw-img {
  border-radius: 50% !important;
}
#page .wp-gr .grw-img-wrap::before {
  display: none !important;
}
#page .wp-gr .wp-google-name {
  font-family: "Poppins";
  font-weight: bold !important;
  font-size: 16px !important;
  color: #ffffff !important;
}
#page .wp-gr .wp-google-text {
  font-family: "Poppins";
  font-weight: normal;
  font-size: 15px !important;
  color: #ffffff !important;
  line-height: 20px !important;
}
#page .wp-gr .wp-more-toggle {
  display: block !important;
  margin-top: 5px !important;
  font-family: "Poppins";
  font-weight: bold !important;
  font-size: 15px !important;
  color: #ffffff !important;
  text-transform: capitalize;
}
#page .wp-gr .wp-google-powered,
#page .wp-gr .wp-google-time {
  display: none !important;
}
#page .wp-gr .grw-review-inner > svg {
  top: 30px !important;
  width: 28px !important;
  height: 28px !important;
}

.scroll-top {
  display: none;
}

#accessibility-links {
  transition: all 0.5s;
  transform: translateY(100%);
  opacity: 0;
}

.open-accessibility #accessibility-links {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------ Our Expertise Carousel */
.our_expertise_slider {
  --gap: 32px;
  --radius: 10px;
  --ease: cubic-bezier(.65, .05, .25, 1);
  --dur: .7s;
  --ink: #1c1a17;
  --paper: #f3efe8;
  --arrow-width: 96px;
  --arrow-height: 86px;
}

.our_expertise_slider {
  width: 100%;
  position: relative;
  margin-bottom: 35px;
}
.our_expertise_slider a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

/* ============ HÌNH HỌC CỦA SLIDER (đổi theo breakpoint) ============
   --W0 : chiều rộng slide active     --Ws : chiều rộng slide chờ
   --Hs : chiều cao slide chờ         --hs : tỉ lệ thu nhỏ heading ở slide chờ
   Desktop  (≥768px): 3 slide  = 2u + u + u + 2 gap
   Tablet   (<768px): 2 slide  = 2u + u + 1 gap
   Mobile   (<480px): 1 slide  = 100%                                    */
.viewport {
  --u: calc((100% - 2 * var(--gap)) / 4);
  --W0: calc(2 * var(--u));
  --Ws: var(--u);
  --Hs: 50%;
  --hs: .8;
  border-radius: var(--radius);
  position: relative;
  /*height: clamp(380px, 52vw, 560px);*/
  aspect-ratio: 16/6;
  overflow: hidden;
}

/* Phần tử đo kích thước thật (px) của slide active / slide chờ */
.probe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}

.probe.a {
  width: var(--W0);
}

.probe.s {
  width: var(--Ws);
}

.our_expertise_slider .slide {
  position: absolute;
  top: 0;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  will-change: left, width, height, opacity;
  contain: layout paint;
  transform: translateZ(0);
  transition: left var(--dur) var(--ease), width var(--dur) var(--ease), height var(--dur) var(--ease), transform 0.5s ease, opacity 0.5s ease;
}
.our_expertise_slider .slide .slide_inner {
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all 0.8s;
  transform: translateX(80px) scale(0.8);
}
.our_expertise_slider .slide .slide_inner::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.05) 70%);
}
.our_expertise_slider .slide.view .slide_inner {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/*
.our_expertise_slider .slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.05) 70%);
}
*/
/* Ảnh nền: dùng background-image, nhưng nằm trong một lớp có kích thước cố định
   (= kích thước slide active) và đặt giữa slide. Slide đổi cỡ thì chỉ cắt lớp này,
   ảnh không bị tính toán lại mỗi frame nên vẫn mượt. */
.bg {
  position: absolute;
  /*
  top: 50%; left: 50%;
  width: var(--aw, 100%); height: var(--ah, 100%);
  transform: translate(-50%, -50%);
  */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Vị trí (JS gán data-pos) — công thức dùng chung cho cả 3 breakpoint */
.slide[data-pos="-1"] {
  left: calc(-1 * (var(--Ws) + var(--gap)));
  width: var(--Ws);
  height: var(--Hs);
}

.slide[data-pos="0"] {
  left: 0;
  width: var(--W0);
  height: 100%;
  opacity: 1;
  pointer-events: auto;
  cursor: default;
}

.slide[data-pos="1"] {
  left: calc(var(--W0) + var(--gap));
  width: var(--Ws);
  height: var(--Hs);
  opacity: 1;
  pointer-events: auto;
}

.slide[data-pos="2"] {
  left: calc(var(--W0) + 2 * var(--gap) + var(--Ws));
  width: var(--Ws);
  height: var(--Hs);
  opacity: 1;
  pointer-events: auto;
}

.slide[data-pos="3"] {
  left: calc(var(--W0) + 3 * var(--gap) + 2 * var(--Ws));
  width: var(--Ws);
  height: var(--Hs);
}

/* Nội dung: bố cục cố định, chỉ dùng transform/opacity để chuyển.
   Slide chờ: khối nội dung được đẩy xuống bằng chiều cao text (--ph) nên heading nằm sát đáy. */
.our_expertise_slider .content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(14px, 2vw, 28px);
  z-index: 1;
  transform: translate3d(0, var(--ph, 0px), 0);
  transition: transform var(--dur) var(--ease);
  will-change: transform;
}

.our_expertise_slider .slide[data-pos="0"] .content {
  transform: translate3d(0, 0, 0);
}

.our_expertise_slider .content h2 {
  font-family: "PPFormula", sans-serif !important;
  color: #fff;
  font-weight: 500;
  line-height: 1.2;
  font-size: 30px;
  width: var(--hw, 100%);
  transform: scale(var(--hs));
  transform-origin: left bottom;
  transition: transform var(--dur) var(--ease);
  will-change: transform;
}

.our_expertise_slider .slide[data-pos="0"] h2 {
  transform: scale(1);
}

.our_expertise_slider .content p {
  font-family: "PPFormula", sans-serif !important;
  font-weight: 300;
  font-size: 15px;
  line-height: 25px;
  color: #fff;
  width: calc(min(var(--pw, 100%), 52ch) - 100px);
  margin-top: 12px;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: transform, opacity;
}

.our_expertise_slider .slide[data-pos="0"] .content p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.55s ease 0.3s, transform 0.75s var(--ease) 0.25s;
}

/* Điều khiển */
.our_expertise_slider .controls {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 60px;
}
.our_expertise_slider .controls .dots {
  display: none;
}
.our_expertise_slider .controls .arrows {
  display: flex;
  gap: 2px;
}
.our_expertise_slider .controls .arrows .arrow {
  position: relative;
  width: var(--arrow-width);
  height: var(--arrow-height);
  border: 0;
  background: #676F53;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, color 0.2s;
  overflow: hidden;
}
.our_expertise_slider .controls .arrows .arrow span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.our_expertise_slider .controls .arrows .arrow span::before, .our_expertise_slider .controls .arrows .arrow span::after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 38%;
  transition: all 0.5s;
}
.our_expertise_slider .controls .arrows .arrow#next {
  border-radius: 0 10px 10px 0;
}
.our_expertise_slider .controls .arrows .arrow#next span::before {
  background-image: url(../fonts/arrow-next.svg);
}
.our_expertise_slider .controls .arrows .arrow#next span::after {
  background-image: url(../fonts/arrow-next-white.svg);
  opacity: 0;
  transform: translateX(-40px);
}
.our_expertise_slider .controls .arrows .arrow#next:hover span::before {
  opacity: 0;
  transform: translateX(40px);
}
.our_expertise_slider .controls .arrows .arrow#next:hover span::after {
  opacity: 1;
  transform: translateX(0);
}
.our_expertise_slider .controls .arrows .arrow#prev {
  border-radius: 10px 0 0 10px;
}
.our_expertise_slider .controls .arrows .arrow#prev span::before {
  background-image: url(../fonts/arrow-prev.svg);
}
.our_expertise_slider .controls .arrows .arrow#prev span::after {
  background-image: url(../fonts/arrow-prev-white.svg);
  opacity: 0;
  transform: translateX(40px);
}
.our_expertise_slider .controls .arrows .arrow#prev:hover span::before {
  opacity: 0;
  transform: translateX(-40px);
}
.our_expertise_slider .controls .arrows .arrow#prev:hover span::after {
  opacity: 1;
  transform: translateX(0);
}

.dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #bdb6a8;
  transition: width 0.4s var(--ease), background 0.3s;
}

.dot[aria-current=true] {
  width: 32px;
  background: var(--ink);
}

.arrow:hover {
  background: var(--ink);
  color: var(--paper);
}

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

.arrow:focus-visible, .dot:focus-visible, .slide:focus-visible {
  outline: 3px solid #2b6cff;
  outline-offset: 3px;
}

/* Khi chưa chạy JS (hoặc trình thu thập không chạy JS): hiện các slide xếp dọc, đủ heading + text */
.no-js .viewport {
  height: auto;
  overflow: visible;
  display: grid;
  gap: var(--gap);
}

.no-js .slide {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  min-height: 280px;
}

.no-js .content, .no-js .content h2, .no-js .content p {
  transform: none;
  width: auto;
  opacity: 1;
}

.no-js .probe, .no-js .controls {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: .01s;
  }
  .content p {
    transition-duration: 0.01s !important;
  }
}
@media (max-width: 1600px) {
  .our_expertise_slider {
    --arrow-width: 86px;
    --arrow-height: 76px;
  }
}
@media (max-width: 1420px) {
  .our_expertise_slider .content h2 {
    font-size: 28px;
    margin-bottom: 25px;
  }
}
@media (max-width: 1280px) {
  .our_expertise_slider {
    --arrow-width: 76px;
    --arrow-height: 66px;
  }
  .our_expertise_slider .content h2 {
    font-size: 26px;
  }
  .our_expertise_slider .content p {
    line-height: 22px;
  }
}
@media (max-width: 1023px) {
  .viewport {
    --u: calc((100% - var(--gap)) / 3);
  }
  .our_expertise_slider {
    --gap:20px;
  }
  .our_expertise_slider .content h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) and (max-width: 860px) {
  .our_expertise_slider .content h2 {
    margin-bottom: 10px;
  }
  .our_expertise_slider .content p {
    font-size: 13px;
    line-height: 20px;
  }
}
@media (max-width: 767px) {
  :root {
    --gap: 0;
    --radius: 14px;
  }
  .our_expertise_slider {
    --gap: 1px;
  }
  .viewport {
    --u: calc((100% - var(--gap)) / 2);
    --hs: .6;
    height: 420px;
    aspect-ratio: initial;
  }
  .our_expertise_slider {
    --arrow-width: 66px;
    --arrow-height: 56px;
  }
  .our_expertise_slider .content p {
    width: calc(min(var(--pw, 100%), 52ch) - 10px);
  }
  .our_expertise_slider .controls {
    position: relative;
    margin-top: 35px;
  }
}
@media (max-width: 479px) {
  .our_expertise_slider .controls {
    position: relative;
    margin-top: 35px;
  }
}
/*------------------------ Footer */
#footer {
  font-family: PPFormula, serif !important;
  border-radius: 24px;
  position: fixed;
  bottom: var(--body-padding-arround);
  left: var(--body-padding-arround);
  right: var(--body-padding-arround);
  z-index: 0;
  opacity: 0;
}
#footer.footer-normal {
  position: static;
}
#footer .widget_block:nth-child(1) {
  width: var(--footer-width-col1);
}
#footer .widget_block:nth-child(2) {
  width: var(--footer-width-col2);
}
#footer .widget_block:nth-child(3) {
  width: var(--footer-width-col3);
}
#footer .widget_block:nth-child(4) {
  width: var(--footer-width-col4);
}
#footer .widget_block:nth-child(4) .wp-block-group {
  max-width: 128px;
  margin-right: 0;
  margin-left: auto;
}
#footer p {
  font-family: PPFormula, serif !important;
}
#footer .wf-wrap {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
#footer h2.wp-block-heading {
  font-size: 18px;
  font-weight: bold;
}
#footer .widget_nav_menu {
  padding: 0;
}
#footer .menu {
  margin-left: 0;
}
#footer .menu .menu-item {
  border: 0;
  padding: 0;
  margin: 0;
}
#footer .menu .menu-item a {
  font-size: 18px;
  padding: 14px 0;
}
#footer .menu .menu-item .sub-menu {
  display: none;
  margin-left: 15px;
  margin-top: 5px;
  margin-bottom: 0;
}
#footer .menu .menu-item .sub-menu a {
  font-size: 16px;
  padding: 8px 0;
}
#footer .menu .menu-item.menu-item-has-children > a::before {
  content: "\f012" !important;
  font-family: icomoon-the7-font;
  speak: none;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  font-size: 12px;
  line-height: 1;
  font-style: normal;
  position: absolute;
  left: 100px;
  top: 20px;
  transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1) 0s !important;
  -moz-transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1) 0s !important;
  -webkit-transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1) 0s !important;
  transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
}
#footer .menu .menu-item.menu-item-has-children.opensub > a::before {
  transform: rotate(270deg) scaleX(-1);
  -moz-transform: rotate(270deg) scaleX(-1);
  -webkit-transform: rotate(270deg) scaleX(-1);
  -ms-transform: rotate(270deg) scaleX(-1);
}
#footer .footer_button1,
#footer .footer_button2,
#footer .footer_button3,
#footer .footer_button4 {
  font-family: "PPFormula", serif;
  color: #ffffff;
  font-size: 14px;
  max-width: 265px;
  text-align: left;
  padding: 5px 8px 5px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  box-sizing: border-box;
  line-height: 1.3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 15px 0 !important;
  text-decoration: none !important;
  transition: all 0.4s;
}
#footer .footer_button1 .text,
#footer .footer_button2 .text,
#footer .footer_button3 .text,
#footer .footer_button4 .text {
  padding-top: 4px;
}
#footer .footer_button1 span.icon,
#footer .footer_button2 span.icon,
#footer .footer_button3 span.icon,
#footer .footer_button4 span.icon {
  display: block;
  position: relative;
  margin: 0;
  width: 41px;
  min-width: 41px;
  aspect-ratio: 1 !important;
  background-color: #E6DCD1;
  border-radius: 10px;
  transition: all 0.4s;
  overflow: hidden;
}
#footer .footer_button1 span.icon::before, #footer .footer_button1 span.icon::after,
#footer .footer_button2 span.icon::before,
#footer .footer_button2 span.icon::after,
#footer .footer_button3 span.icon::before,
#footer .footer_button3 span.icon::after,
#footer .footer_button4 span.icon::before,
#footer .footer_button4 span.icon::after {
  position: absolute !important;
  content: "" !important;
  display: block !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 52%;
  transition: all 0.5s;
}
#footer .footer_button1:hover,
#footer .footer_button2:hover,
#footer .footer_button3:hover,
#footer .footer_button4:hover {
  border: 1px solid #ffffff !important;
  opacity: 1 !important;
  color: #676F53 !important;
  background-color: #E6DCD1 !important;
}
#footer .footer_button1:hover span.icon,
#footer .footer_button2:hover span.icon,
#footer .footer_button3:hover span.icon,
#footer .footer_button4:hover span.icon {
  background-color: #ffffff;
}
#footer .footer_button1:hover span.icon::before,
#footer .footer_button2:hover span.icon::before,
#footer .footer_button3:hover span.icon::before,
#footer .footer_button4:hover span.icon::before {
  opacity: 0;
  transform: translateX(10px);
}
#footer .footer_button1:hover span.icon::after,
#footer .footer_button2:hover span.icon::after,
#footer .footer_button3:hover span.icon::after,
#footer .footer_button4:hover span.icon::after {
  opacity: 1;
  transform: translateX(0);
}
#footer .footer_button1 {
  color: #676F53;
  background-color: #ffffff;
  margin-top: 95px !important;
}
#footer .footer_button1 span.icon {
  background-color: #676F53;
}
#footer .footer_button1 span.icon::before {
  background-image: url(../fonts/arrow-next.svg);
}
#footer .footer_button1 span.icon::after {
  opacity: 0;
  transform: translateX(-10px);
  background-image: url(../fonts/arrow-next-olive-gray.svg);
}
#footer .footer_button2 span.icon::before {
  background-image: url(../fonts/icon-01.svg);
}
#footer .footer_button2 span.icon::after {
  opacity: 0;
  transform: translateX(-10px);
  background-image: url(../fonts/icon-01.svg);
}
#footer .footer_button3 span.icon::before {
  background-image: url(../fonts/icon-02.svg);
}
#footer .footer_button3 span.icon::after {
  opacity: 0;
  transform: translateX(-10px);
  background-image: url(../fonts/icon-02.svg);
}
#footer .footer_button4 span.icon::before {
  background-image: url(../fonts/icon-03.svg);
}
#footer .footer_button4 span.icon::after {
  opacity: 0;
  transform: translateX(-10px);
  background-image: url(../fonts/icon-03.svg);
}
#footer .social {
  display: inline-block;
  margin-right: 5px;
  transition: all 0.4s;
  border-radius: 15px;
  overflow: initial;
}
#footer .social:hover {
  background-color: #D4A88E;
  transform: scale(1.04);
}

#bottom-bar .wf-float-left {
  max-width: 625px;
}
#bottom-bar .wf-float-left span {
  display: block;
  font-weight: 600;
}
#bottom-bar .wf-float-right span {
  margin-top: 12px;
  display: inline-block;
}

.loaded #footer {
  opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Global styles for the host document, outside of the Shadow DOM             */
/* -------------------------------------------------------------------------- */
.modeVideoLightbox {
  position: fixed;
  visibility: hidden;
  will-change: clip-path;
  transition: all 0.9s;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #efebe7;
  z-index: 9999999999;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(100% 0 100% 0);
}
.modeVideoLightbox .modeVideoLightbox_inner {
  padding: 35px;
  max-width: 95%;
  width: 100%;
  max-height: 95vh;
}
.modeVideoLightbox media-container {
  max-height: 95vh;
}
.modeVideoLightbox .closeVideoLightbox {
  position: absolute;
  font-family: "TTHoves";
  top: 10px;
  right: 10px;
  background-color: #203933;
  border-radius: 50%;
  color: #fff;
  line-height: 1;
  padding: 6px;
  text-align: center;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  cursor: pointer;
  z-index: 9999;
}
.modeVideoLightbox.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
}

video-player,
live-video-player {
  display: contents;
}

/*
Required to override any default video and image styles (such as
Tailwind's CSS reset) and ensure they fill the container as expected.
*/
video-player video,
video-player [slot=poster],
live-video-player video,
live-video-player [slot=poster] {
  display: block;
  width: 100%;
  height: 100%;
}

video-player video::-webkit-media-text-track-container,
live-video-player video::-webkit-media-text-track-container {
  z-index: 1;
  font-family: inherit;
  scale: 0.98;
  translate: 0 var(--media-caption-track-y, 0);
  transition: translate var(--media-caption-track-duration, 0) ease-out;
  transition-delay: var(--media-caption-track-delay, 0);
}

/* -------------------------------------------------------------------------- */
/* Shared styles for all HTML skins                                           */
/* -------------------------------------------------------------------------- */
media-tooltip-group {
  display: contents;
}

:host {
  /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */
  display: grid;
  width: 100%;
}

media-container {
  min-width: 0;
  min-height: 0;
}

/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */
.media-popover--volume:has(media-volume-slider[data-availability=unsupported]) {
  display: none;
}

/* ==========================================================================
   Reset
   ========================================================================== */
.media-default-skin *,
.media-default-skin *::before,
.media-default-skin *::after {
  box-sizing: border-box;
}

.media-default-skin img,
.media-default-skin video,
.media-default-skin svg {
  display: block;
  max-width: 100%;
}

.media-default-skin button {
  font: inherit;
}

.media-default-skin [hidden][hidden] {
  /* Keep authored templates hidden even when component classes set display. */
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .media-default-skin {
    interpolate-size: allow-keywords;
  }
}
/* ==========================================================================
   Root Container
   ========================================================================== */
.media-default-skin {
  --media-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
  --media-current-shadow-color-subtle: oklch(from var(--media-current-shadow-color) l c h / calc(alpha * 0.4));
  --media-icon-size: 18px;
  --media-color-scrollbar-thumb: oklch(from currentColor l c h / 0.3);
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  container: media-root/inline-size;
  font-family: Inter Variable, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem; /* 13px at 100% font size */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  line-height: 1.5;
  letter-spacing: normal;
  outline: 2px solid transparent;
  outline-offset: -4px;
  scrollbar-color: var(--media-color-scrollbar-thumb) transparent;
  scrollbar-width: thin;
  border-radius: var(--media-border-radius, 2rem);
  isolation: isolate;
  transition-timing-function: ease-out;
  transition-duration: 100ms;
  transition-property: outline-offset, outline-color;
}
.media-default-skin:focus-visible {
  outline-color: currentColor;
  outline-offset: 2px;
}
.media-default-skin::-webkit-scrollbar-thumb {
  background: var(--media-color-scrollbar-thumb);
  border-radius: 9999px;
}
@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
  .media-default-skin {
    --media-color-scrollbar-thumb: oklch(from currentColor l c h / 0.8);
    scrollbar-width: auto;
  }
}

/* ==========================================================================
   Surface (shared glass effect for tooltips, popovers, controls)
   ========================================================================== */
.media-default-skin .media-surface {
  background-color: var(--media-surface-background-color);
  box-shadow: 0 0 0 1px var(--media-surface-outer-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);
  backdrop-filter: var(--media-surface-backdrop-filter);
  /* Inner border ring */
}
.media-default-skin .media-surface::after {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
}

/* ==========================================================================
   Media Element
   ========================================================================== */
.media-default-skin ::slotted(video),
.media-default-skin video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
}

.media-default-skin ::slotted(video) {
  border-radius: var(--media-video-border-radius);
}

.media-default-skin video {
  border-radius: inherit;
}

.media-default-skin:fullscreen ::slotted(video),
.media-default-skin:fullscreen video {
  object-fit: contain;
}

/* ==========================================================================
   Overlay / Scrim
   ========================================================================== */
.media-default-skin .media-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to top, oklch(0% 0 0deg / 0.5), oklch(0% 0 0deg / 0.3) 25%, oklch(0% 0 0deg / 0));
  border-radius: inherit;
  opacity: 0;
  backdrop-filter: blur(0) saturate(1);
  transition-timing-function: ease-out;
  transition-duration: var(--media-controls-transition-duration);
  transition-property: opacity, backdrop-filter;
}

.media-default-skin .media-error ~ .media-overlay {
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-duration: var(--media-error-dialog-transition-duration);
}

.media-default-skin .media-controls[data-visible] ~ .media-overlay,
.media-default-skin .media-error[data-open] ~ .media-overlay {
  opacity: 1;
}

.media-default-skin .media-buffering-indicator[data-visible] ~ .media-overlay {
  background: oklch(0% 0 0deg / 0.35);
  opacity: 1;
  backdrop-filter: blur(8px);
}

.media-default-skin .media-error[data-open] ~ .media-overlay {
  backdrop-filter: blur(16px) saturate(1.5);
}

/* ==========================================================================
   Buffering Indicator
   ========================================================================== */
.media-default-skin .media-buffering-indicator {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  place-content: center;
  color: oklch(100% 0 0deg);
  pointer-events: none;
}
.media-default-skin .media-buffering-indicator:not([data-visible]) {
  --media-spinner-animation: none;
}
.media-default-skin .media-buffering-indicator[data-visible] {
  display: grid;
}

/* ==========================================================================
   Error Dialog
   ========================================================================== */
.media-default-skin .media-error {
  outline: none;
}

.media-default-skin .media-error:not([data-open]) {
  display: none;
}

.media-default-skin .media-error__title {
  font-weight: 600;
  line-height: 1.25;
}

.media-default-skin .media-error__description {
  overflow-wrap: anywhere;
  opacity: 0.7;
}

.media-default-skin .media-error__actions {
  display: flex;
  gap: 0.5rem;
}
.media-default-skin .media-error__actions > * {
  flex: 1;
}

.media-default-skin .media-error[data-open] ~ .media-controls * {
  visibility: hidden;
}

/* ==========================================================================
   Controls
   ========================================================================== */
.media-default-skin .media-controls {
  display: flex;
  column-gap: 0.075rem;
  align-items: center;
  padding: 0.375rem;
  container: media-controls/inline-size;
  text-shadow: 0 1px 0 var(--media-current-shadow-color);
  border-radius: 1.5rem;
}

/* ==========================================================================
   Time Display
   ========================================================================== */
.media-default-skin .media-time-controls {
  display: flex;
  flex: 1;
  gap: 0.75rem;
  align-items: center;
  padding-inline: 0.5rem;
  container: media-time-controls/inline-size;
}

.media-default-skin .media-time {
  font-variant-numeric: tabular-nums;
}

.media-default-skin .media-time[role=button] {
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -2px;
  border-radius: 0.25rem;
  transition-timing-function: ease-out;
  transition-duration: 100ms;
  transition-property: outline-color, outline-offset;
}
.media-default-skin .media-time[role=button]:focus-visible {
  outline-color: currentColor;
  outline-offset: 2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
/* Base button */
.media-default-skin .media-button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.5rem 1rem;
  text-align: center;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  outline: 2px solid transparent;
  outline-offset: -2px;
  border: none;
  border-radius: calc(infinity * 1px);
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: background-color, outline-offset, scale;
  /* Fix weird jumping when clicking on the buttons in Safari. */
  will-change: scale;
}
.media-default-skin .media-button:focus-visible {
  outline-color: currentColor;
  outline-offset: 2px;
}
.media-default-skin .media-button:active {
  scale: 0.98;
}
.media-default-skin .media-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(1);
}
.media-default-skin .media-button[data-availability=unavailable], .media-default-skin .media-button[data-availability=unsupported] {
  display: none;
}

/* Primary button variant */
.media-default-skin .media-button--primary {
  font-weight: 500;
  color: oklch(0% 0 0deg);
  text-shadow: none;
  background: oklch(100% 0 0deg);
}

/* Subtle button variant */
.media-default-skin .media-button--subtle {
  color: inherit;
  text-shadow: inherit;
  background: transparent;
}
.media-default-skin .media-button--subtle:hover, .media-default-skin .media-button--subtle:focus-visible, .media-default-skin .media-button--subtle[aria-expanded=true] {
  text-decoration: none;
  background-color: oklch(from currentColor l c h/0.1);
}

/* Icon button variant */
.media-default-skin .media-button--icon {
  display: grid;
  width: 2.25rem;
  aspect-ratio: 1;
  padding: 0;
}
.media-default-skin .media-button--icon:active {
  scale: 0.9;
}
.media-default-skin .media-button--icon .media-icon__container {
  display: grid;
}
.media-default-skin .media-button--icon .media-icon {
  grid-area: 1/1;
  transition-behavior: allow-discrete;
  transition-property: display, opacity;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
}

/* Seek button */
.media-default-skin .media-button--seek .media-icon__label {
  position: absolute;
  right: -1px;
  bottom: -3px;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}
.media-default-skin .media-button--seek:has(.media-icon--flipped) .media-icon__label {
  right: unset;
  left: -1px;
}

/* Playback rate button */
.media-default-skin .media-button--playback-rate {
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.media-default-skin .media-button--playback-rate::after {
  width: 4ch;
  content: attr(data-rate) "×";
}
.media-default-skin .media-button--playback-rate[data-inline-rate-label]::after {
  content: none;
}

/* Settings button */
.media-default-skin .media-button--settings {
  display: none;
}
.media-default-skin .media-button--settings .media-icon--settings {
  transition: transform 150ms ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .media-default-skin .media-button--settings .media-icon--settings {
    transition-duration: 0ms;
  }
}
.media-default-skin .media-button--settings[aria-expanded=true] .media-icon--settings {
  transform: rotate(90deg);
}

.media-default-skin .media-button-group:has([data-availability=available]) .media-button--settings {
  display: grid;
}

/* Live button — wide pill button with a status dot (gray → red at the live
   edge) rendered via ::before, and "LIVE" text rendered as the button's own
   text content. */
.media-default-skin .media-button--live {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  width: auto;
  aspect-ratio: auto;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.media-default-skin .media-button--live::before {
  display: inline-block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  content: "";
  background-color: oklch(from currentColor l c h/0.4);
  border-radius: 50%;
  transition: background-color 150ms ease-out;
}
.media-default-skin .media-button--live[data-live-edge]::before {
  background-color: oklch(65% 0.22 27deg);
}

/* ==========================================================================
   Button Groups
   ========================================================================== */
.media-default-skin .media-button-group {
  display: flex;
  gap: 0.075rem;
  align-items: center;
}
@container media-root (width > 42rem) {
  .media-default-skin .media-button-group {
    gap: 0.125rem;
  }
}

/* ==========================================================================
   Badge
   ========================================================================== */
.media-default-skin .media-badge {
  padding: 0.125rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  color: oklch(from currentColor l c h/0.85);
  white-space: nowrap;
  background-color: oklch(from currentColor l c h/0.1);
  border-radius: calc(infinity * 1px);
}

/* ==========================================================================
   Icons
   ========================================================================== */
.media-default-skin .media-icon__container {
  position: relative;
}

.media-default-skin .media-icon {
  flex-shrink: 0;
  width: var(--media-icon-size);
  height: var(--media-icon-size);
}

.media-default-skin .media-icon--flipped {
  scale: -1 1;
}

/* ==========================================================================
   Poster Image
   ========================================================================== */
.media-default-skin media-poster,
.media-default-skin > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.25s;
}

.media-default-skin media-poster:not([data-visible]),
.media-default-skin > img:not([data-visible]),
.media-default-skin > img[data-visible]:not([data-loaded]) {
  opacity: 0;
}

.media-default-skin media-poster ::slotted(img),
.media-default-skin media-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: var(--media-video-border-radius);
}

.media-default-skin > img {
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: inherit;
}

/* Blurred placeholder: HTML path targets media-poster::before, React path targets the skin container::before */
.media-default-skin media-poster::before,
.media-default-skin::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image: var(--media-poster-placeholder, none);
  background-repeat: no-repeat;
  background-position: var(--media-object-position, center);
  background-size: var(--media-object-fit, contain);
  filter: blur(var(--media-poster-placeholder-blur, 20px));
}

/* React path: hidden by default, transitions in while poster loads */
.media-default-skin::before {
  opacity: 0;
  transition: opacity 0.25s;
}

/* Show placeholder while the poster is visible but not yet loaded */
.media-default-skin:has(img[data-visible]:not([data-loaded]))::before {
  opacity: 1;
}

.media-default-skin:fullscreen media-poster ::slotted(img),
.media-default-skin:fullscreen media-poster img,
.media-default-skin:fullscreen > img {
  object-fit: contain;
}

/* ==========================================================================
   Media thumbnail
   ========================================================================== */
.media-default-skin .media-thumbnail {
  pointer-events: none;
  background-color: oklch(0% 0 0deg / 0.9);
  border-radius: 0.75rem;
}
.media-default-skin .media-thumbnail .media-thumbnail__image {
  position: relative;
  display: block;
  overflow: clip;
  border-radius: inherit;
}
.media-default-skin .media-thumbnail .media-thumbnail__image::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image: linear-gradient(to top, oklch(0% 0 0deg / 0.8), oklch(0% 0 0deg / 0.3), oklch(0% 0 0deg / 0));
  border-radius: inherit;
}
.media-default-skin .media-thumbnail .media-thumbnail__time {
  position: absolute;
  inset-inline: 0;
  bottom: 0.5rem;
  text-align: center;
}
.media-default-skin .media-thumbnail .media-thumbnail__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  translate: -50% -50%;
}
.media-default-skin .media-thumbnail .media-thumbnail__image, .media-default-skin .media-thumbnail .media-thumbnail__spinner {
  transition: opacity 150ms ease-out;
}
.media-default-skin .media-thumbnail:not(:has(.media-thumbnail__image[data-loading])) .media-thumbnail__spinner {
  --media-spinner-animation: none;
}
.media-default-skin .media-thumbnail:has(.media-thumbnail__image[data-loading]) .media-thumbnail__image {
  opacity: 0;
}
.media-default-skin .media-thumbnail:has(.media-thumbnail__image[data-loading]) .media-thumbnail__spinner {
  opacity: 1;
}

/* ==========================================================================
   Slider
   ========================================================================== */
.media-default-skin .media-slider {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  border-radius: calc(infinity * 1px);
}
.media-default-skin .media-slider[data-orientation=horizontal] {
  width: 100%;
  min-width: 5rem;
  height: 2rem;
}
.media-default-skin .media-slider[data-orientation=vertical] {
  width: 2rem;
  height: 5rem;
}

/* Track */
.media-default-skin .media-slider__track {
  position: relative;
  overflow: hidden;
  user-select: none;
  border-radius: inherit;
  isolation: isolate;
}
.media-default-skin .media-slider__track[data-orientation=horizontal] {
  width: 100%;
  height: 0.25rem;
}
.media-default-skin .media-slider__track[data-orientation=vertical] {
  width: 0.25rem;
  height: 100%;
}

/* Thumb */
.media-default-skin .media-slider__thumb {
  position: absolute;
  z-index: 10;
  width: 0.625rem;
  height: 0.625rem;
  user-select: none;
  outline: 4px solid transparent;
  outline-offset: -4px;
  background-color: currentColor;
  border-radius: calc(infinity * 1px);
  box-shadow: 0 0 0 1px var(--media-current-shadow-color, oklch(0% 0 0deg / 0.1)), 0 1px 3px 0 oklch(0% 0 0deg / 0.35), 0 1px 2px -1px oklch(0% 0 0deg / 0.35);
  opacity: 0;
  translate: -50% -50%;
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: opacity, height, width, outline-offset;
}
.media-default-skin .media-slider__thumb[data-orientation=horizontal] {
  top: 50%;
  left: var(--media-slider-fill);
}
.media-default-skin .media-slider__thumb[data-orientation=vertical] {
  top: calc(100% - var(--media-slider-fill));
  left: 50%;
}
.media-default-skin .media-slider__thumb:hover, .media-default-skin .media-slider__thumb:focus {
  outline-color: oklch(from currentColor l c h/0.15);
  outline-offset: 0;
}
.media-default-skin .media-slider__thumb::after {
  position: absolute;
  inset: -4px;
  content: "";
  border-radius: inherit;
  box-shadow: 0 0 0 2px currentColor;
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: opacity, scale;
}
.media-default-skin .media-slider__thumb:not(:focus-visible)::after {
  opacity: 0;
  scale: 0.5;
}

.media-default-skin .media-slider:active .media-slider__thumb,
.media-default-skin .media-slider__thumb--persistent {
  width: 0.75rem;
  height: 0.75rem;
}

.media-default-skin .media-slider:hover .media-slider__thumb,
.media-default-skin .media-slider__thumb:focus-visible,
.media-default-skin .media-slider__thumb--persistent {
  opacity: 1;
}

/* Preview */
.media-default-skin .media-slider__preview .media-slider__value, .media-default-skin .media-slider__preview::before {
  opacity: 0;
  scale: 0.5;
  transition-timing-function: ease-out;
  transition-duration: 200ms;
  transition-property: opacity, scale;
}
.media-default-skin .media-slider__preview .media-slider__value {
  position: absolute;
  bottom: 2.25rem;
  text-shadow: 0 1px 0 var(--media-current-shadow-color);
  filter: blur(8px);
  translate: -50% 0.5rem;
  transition-property: filter, opacity, scale, translate;
}
.media-default-skin .media-slider__preview::before {
  display: block;
  min-width: 0.25rem;
  height: 0.25rem;
  content: "";
  background-color: currentColor;
  border-radius: 100%;
  box-shadow: 0 0 0 1px var(--media-current-shadow-color, oklch(0% 0 0deg / 0.15)), 0 1px 2px 0 oklch(0% 0 0deg / 0.35);
}
.media-default-skin .media-slider__preview[data-pointing] .media-slider__value, .media-default-skin .media-slider__preview[data-pointing]:not([data-dragging])::before {
  opacity: 1;
  scale: 1;
}
.media-default-skin .media-slider__preview[data-pointing] .media-slider__value {
  filter: blur(0);
  translate: -50% 0;
}

/* Shared track fills */
.media-default-skin .media-slider__buffer,
.media-default-skin .media-slider__fill {
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.media-default-skin .media-slider__buffer[data-orientation=horizontal],
.media-default-skin .media-slider__fill[data-orientation=horizontal] {
  inset-block: 0;
  left: 0;
}

.media-default-skin .media-slider__buffer[data-orientation=vertical],
.media-default-skin .media-slider__fill[data-orientation=vertical] {
  inset-inline: 0;
  bottom: 0;
}

/* Buffer */
.media-default-skin .media-slider__buffer {
  background-color: oklch(from currentColor l c h/0.2);
  transition-timing-function: ease-out;
  transition-duration: 0.25s;
}
.media-default-skin .media-slider__buffer[data-orientation=horizontal] {
  width: var(--media-slider-buffer);
  transition-property: width;
}
.media-default-skin .media-slider__buffer[data-orientation=vertical] {
  height: var(--media-slider-buffer);
  transition-property: height;
}

/* Fill */
.media-default-skin .media-slider__fill {
  background-color: currentColor;
}
.media-default-skin .media-slider__fill[data-orientation=horizontal] {
  width: var(--media-slider-fill);
}
.media-default-skin .media-slider__fill[data-orientation=vertical] {
  height: var(--media-slider-fill);
}

/* Dragging — thumb and fill follow the pointer position */
.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=horizontal] {
  left: var(--media-slider-pointer);
}

.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=vertical] {
  top: calc(100% - var(--media-slider-pointer));
}

.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=horizontal] {
  width: var(--media-slider-pointer);
}

.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=vertical] {
  height: var(--media-slider-pointer);
}

/* ==========================================================================
   Popups & Tooltips
   ========================================================================== */
.media-default-skin {
  --media-popup-transition:
    opacity var(--media-popup-transition-timing-function) var(--media-popup-transition-duration),
    filter var(--media-popup-transition-timing-function) var(--media-popup-transition-duration),
    transform var(--media-popup-transition-timing-function) var(--media-popup-transition-duration),
    scale var(--media-popup-transition-timing-function) var(--media-popup-transition-duration);
}

.media-default-skin .media-popover,
.media-default-skin .media-tooltip {
  --popup-translate-distance: 0.5rem;
  margin: 0;
  overflow: visible;
  color: inherit;
  border: 0;
  transition: var(--media-popup-transition);
}
.media-default-skin .media-popover[data-starting-style], .media-default-skin .media-popover[data-ending-style],
.media-default-skin .media-tooltip[data-starting-style],
.media-default-skin .media-tooltip[data-ending-style] {
  opacity: 0;
  filter: blur(4px);
  /* We have to use transform here for translate as the translate property is used for positioning by core. */
  transform: translate(var(--popup-translate-x-distance, 0), var(--popup-translate-y-distance, 0));
  scale: 0.95;
}
.media-default-skin .media-popover[data-ending-style],
.media-default-skin .media-tooltip[data-ending-style] {
  transform: none;
  /* Speed up the exit transition. */
  transition-duration: max(0ms, var(--media-popup-transition-duration) - 50ms);
}
.media-default-skin .media-popover[data-side=top],
.media-default-skin .media-tooltip[data-side=top] {
  --popup-translate-y-distance: var(--popup-translate-distance);
  transform-origin: bottom;
}
.media-default-skin .media-popover[data-side=bottom],
.media-default-skin .media-tooltip[data-side=bottom] {
  --popup-translate-y-distance: calc(var(--popup-translate-distance) * -1);
  transform-origin: top;
}
.media-default-skin .media-popover[data-side=left],
.media-default-skin .media-tooltip[data-side=left] {
  --popup-translate-x-distance: var(--popup-translate-distance);
  transform-origin: right;
}
.media-default-skin .media-popover[data-side=right],
.media-default-skin .media-tooltip[data-side=right] {
  --popup-translate-x-distance: calc(var(--popup-translate-distance) * -1);
  transform-origin: left;
}
.media-default-skin .media-popover,
.media-default-skin .media-tooltip {
  /* Safe area between trigger and popup */
}
.media-default-skin .media-popover::before,
.media-default-skin .media-tooltip::before {
  position: absolute;
  pointer-events: inherit;
  content: "";
}
.media-default-skin .media-popover[data-side=top]::before, .media-default-skin .media-popover[data-side=bottom]::before,
.media-default-skin .media-tooltip[data-side=top]::before,
.media-default-skin .media-tooltip[data-side=bottom]::before {
  inset-inline: 0;
  width: 100%;
}
.media-default-skin .media-popover[data-side=top]::before,
.media-default-skin .media-tooltip[data-side=top]::before {
  top: 100%;
}
.media-default-skin .media-popover[data-side=bottom]::before,
.media-default-skin .media-tooltip[data-side=bottom]::before {
  bottom: 100%;
}
.media-default-skin .media-popover[data-side=left]::before, .media-default-skin .media-popover[data-side=right]::before,
.media-default-skin .media-tooltip[data-side=left]::before,
.media-default-skin .media-tooltip[data-side=right]::before {
  inset-block: 0;
  height: 100%;
}
.media-default-skin .media-popover[data-side=left]::before,
.media-default-skin .media-tooltip[data-side=left]::before {
  left: 100%;
}
.media-default-skin .media-popover[data-side=right]::before,
.media-default-skin .media-tooltip[data-side=right]::before {
  right: 100%;
}

.media-default-skin .media-popover[data-side=top]::before, .media-default-skin .media-popover[data-side=bottom]::before {
  height: var(--media-popover-side-offset);
}
.media-default-skin .media-popover[data-side=left]::before, .media-default-skin .media-popover[data-side=right]::before {
  width: var(--media-popover-side-offset);
}

.media-default-skin .media-popover--volume {
  padding: 0.75rem 0;
  border-radius: calc(infinity * 1px);
}
.media-default-skin .media-popover--volume:has(media-volume-slider[data-availability=unsupported]) {
  display: none;
}

.media-default-skin .media-tooltip {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  white-space: nowrap;
  border-radius: calc(infinity * 1px);
  /* `display: flex` must not apply while closed — it overrides UA `[popover]` hiding. */
}
.media-default-skin .media-tooltip[data-open] {
  display: flex;
  column-gap: 0.25rem;
  align-items: center;
}
.media-default-skin .media-tooltip[data-side=top]::before, .media-default-skin .media-tooltip[data-side=bottom]::before {
  height: var(--media-tooltip-side-offset);
}
.media-default-skin .media-tooltip[data-side=left]::before, .media-default-skin .media-tooltip[data-side=right]::before {
  width: var(--media-tooltip-side-offset);
}
.media-default-skin .media-tooltip .media-tooltip__kbd {
  min-width: 1.5em;
  padding: 0.1em;
  font-family: inherit;
  font-size: 90%;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  background-color: oklch(from currentColor l c h/0.3);
  border-radius: 0.25rem;
}

/* ==========================================================================
   Menus
   Note: Menus use `.media-popover` styles for positioning and transitions.
   ========================================================================== */
.media-default-skin .media-menu {
  --menu-transition-duration: 250ms;
  --menu-max-height: 14rem;
  --menu-padding: 0.25rem;
  --menu-border-radius: 0.75rem;
  --menu-item-border-radius: calc(var(--menu-border-radius) - var(--menu-padding));
  box-sizing: border-box;
  max-width: var(--media-popover-available-width, none);
  max-height: min(var(--media-popover-available-height, var(--menu-max-height)), var(--menu-max-height));
  padding: var(--menu-padding);
  overflow: auto;
  overscroll-behavior: none;
  border-radius: var(--menu-border-radius);
}
@media (prefers-reduced-motion: reduce) {
  .media-default-skin .media-menu {
    --menu-transition-duration: 0ms;
  }
}
.media-default-skin .media-menu .media-menu__panel {
  position: absolute;
  inset: 0;
  padding: var(--menu-padding);
  overflow: auto;
  overscroll-behavior: none;
  outline: none;
  translate: 0 0;
  transition-timing-function: ease-in-out;
  transition-duration: var(--menu-transition-duration);
  transition-property: translate, filter;
  will-change: translate, filter;
}
.media-default-skin .media-menu .media-menu__panel[data-starting-style], .media-default-skin .media-menu .media-menu__panel[data-ending-style] {
  overflow: hidden;
}
.media-default-skin .media-menu .media-menu__panel {
  /* Root settings view — slides out when a submenu is active */
}
.media-default-skin .media-menu .media-menu__panel[data-menu-root-view][data-menu-view-state=inactive] {
  filter: blur(8px);
  translate: -100% 0;
  /* Hide the indicator while transitioning */
}
.media-default-skin .media-menu .media-menu__panel[data-menu-root-view][data-menu-view-state=inactive] .media-menu__group::before {
  display: none;
}
.media-default-skin .media-menu .media-menu__panel {
  /* Submenu panels — slide in/out alongside the root view */
}
.media-default-skin .media-menu .media-menu__panel[data-submenu] {
  z-index: 10;
}
.media-default-skin .media-menu .media-menu__panel[data-submenu]:not([data-open], [data-ending-style]) {
  translate: -100% 0;
  transition-property: none;
}
.media-default-skin .media-menu .media-menu__panel[data-submenu][data-starting-style], .media-default-skin .media-menu .media-menu__panel[data-submenu][data-ending-style] {
  pointer-events: none;
  filter: blur(8px);
}
.media-default-skin .media-menu .media-menu__panel[data-submenu][data-starting-style][data-direction=forward], .media-default-skin .media-menu .media-menu__panel[data-submenu][data-ending-style][data-direction=back] {
  translate: 100% 0;
}
.media-default-skin .media-menu .media-menu__panel[data-submenu][data-ending-style][data-direction=forward], .media-default-skin .media-menu .media-menu__panel[data-submenu][data-starting-style][data-direction=back] {
  translate: -100% 0;
}
.media-default-skin .media-menu .media-menu__separator {
  margin-block: 0.25rem;
  border-bottom: 1px solid oklch(0% 0 0deg / 0.1);
  box-shadow: 0 1px 0 0 oklch(100% 0 0deg / 0.075);
}
.media-default-skin .media-menu .media-menu__group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
@supports (top: anchor(top)) {
  .media-default-skin .media-menu .media-menu__group::before {
    position: absolute;
    position-anchor: --media-menu-item-highlight-anchor;
    inset: anchor(inside);
    pointer-events: none;
    content: "";
    background-color: oklch(from currentColor l c h/0.1);
    border-radius: var(--menu-item-border-radius);
    transition: inset ease-in-out 100ms;
  }
}
.media-default-skin .media-menu .media-menu__item, .media-default-skin .media-menu .media-menu__back {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.375rem 0.5rem;
  text-align: left;
  text-shadow: 0 1px 0 var(--media-current-shadow-color);
  cursor: pointer;
  user-select: none;
  outline: 2px solid transparent;
  outline-offset: -2px;
  border-radius: var(--menu-item-border-radius);
  transition: background-color, color;
  transition-timing-function: ease-out;
  transition-duration: 100ms;
}
.media-default-skin .media-menu .media-menu__item:focus-visible, .media-default-skin .media-menu .media-menu__back:focus-visible {
  outline-color: currentColor;
  outline-offset: 2px;
}
.media-default-skin .media-menu .media-menu__item:hover, .media-default-skin .media-menu .media-menu__item[data-highlighted], .media-default-skin .media-menu .media-menu__back:hover, .media-default-skin .media-menu .media-menu__back[data-highlighted] {
  background-color: oklch(from currentColor l c h/0.1);
}
@supports (top: anchor(top)) {
  .media-default-skin .media-menu .media-menu__item:hover, .media-default-skin .media-menu .media-menu__item[data-highlighted], .media-default-skin .media-menu .media-menu__back:hover, .media-default-skin .media-menu .media-menu__back[data-highlighted] {
    anchor-name: --media-menu-item-highlight-anchor;
    background-color: transparent;
  }
}
.media-default-skin .media-menu .media-menu__item .media-icon, .media-default-skin .media-menu .media-menu__back .media-icon {
  flex-shrink: 0;
  color: oklch(from currentColor l c h/0.65);
  filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
}
.media-default-skin .media-menu .media-menu__indicator {
  flex-shrink: 0;
  margin-right: -0.25rem;
  margin-left: auto;
  opacity: 0;
}
.media-default-skin .media-menu .media-menu__indicator .media-icon {
  filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
}
.media-default-skin .media-menu .media-menu__item {
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.media-default-skin .media-menu .media-menu__item[aria-disabled=true] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
.media-default-skin .media-menu .media-menu__item[aria-checked=true] .media-menu__indicator {
  opacity: 1;
}
.media-default-skin .media-menu .media-menu__item[data-availability=unavailable], .media-default-skin .media-menu .media-menu__item[data-availability=unsupported] {
  display: none;
}
.media-default-skin .media-menu .media-menu__tier {
  padding-top: 1px;
  padding-left: 0.125rem;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1;
  color: oklch(from currentColor l c h/0.7);
}
.media-default-skin .media-menu .media-menu__back {
  width: 100%;
  margin-bottom: 0.125rem;
}
.media-default-skin .media-menu .media-menu__hint {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  min-width: 0;
  padding-left: 0.5rem;
  margin-left: auto;
  font-size: 0.75rem;
  color: oklch(from currentColor l c h/0.65);
}
.media-default-skin .media-menu .media-menu__hint-label {
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-default-skin .media-menu .media-menu__chevron {
  width: 0.875rem;
  height: 0.875rem;
}
.media-default-skin .media-menu {
  /* Settings menu */
}
.media-default-skin .media-menu.media-menu--settings {
  width: var(--media-menu-width);
  min-width: 12rem;
  height: var(--media-menu-height);
  overflow: hidden;
  /* Add height and width transitions. */
  transition: var(--media-popup-transition), height var(--media-popup-transition-timing-function) var(--menu-transition-duration), width var(--media-popup-transition-timing-function) var(--menu-transition-duration);
  /* Don't transition width and height on open/close. */
}
.media-default-skin .media-menu.media-menu--settings[data-starting-style], .media-default-skin .media-menu.media-menu--settings[data-ending-style] {
  transition: var(--media-popup-transition);
}

/* ==========================================================================
   Native Caption Track
   ========================================================================== */
.media-default-skin {
  --media-caption-track-duration: var(--media-controls-transition-duration);
  --media-caption-track-delay: 25ms;
  --media-caption-track-y: -0.5rem;
}
.media-default-skin:has(.media-controls[data-visible]) {
  --media-caption-track-y: -5.5rem;
}
@container media-root (width > 42rem) {
  .media-default-skin:has(.media-controls[data-visible]) > * {
    --media-caption-track-y: -3.5rem;
  }
}

.media-default-skin video::-webkit-media-text-track-container {
  z-index: 1;
  font-family: inherit;
  scale: 0.98;
  translate: 0 var(--media-caption-track-y);
  transition: translate var(--media-caption-track-duration) ease-out;
  transition-delay: var(--media-caption-track-delay);
}

/* ==========================================================================
   Input Feedback
   ========================================================================== */
.media-default-skin .media-input-feedback {
  position: absolute;
  inset-inline: 0;
  top: 0;
  bottom: 3.5rem; /* Shift up a little in smaller containers */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  color: var(--media-color-primary, oklch(100% 0 0deg));
  pointer-events: none;
}
@container media-root (width > 24rem) {
  .media-default-skin .media-input-feedback {
    bottom: 0;
  }
}

/* --- Feedback islands ------------------------------------------------------- */
.media-default-skin .media-input-feedback-island {
  --media-surface-background-color: oklch(0 0 0 / 0.25);
  position: absolute;
  top: 0.75rem;
  font-weight: 500;
  color: inherit;
  pointer-events: none;
  border-radius: calc(infinity * 1px);
  transform-origin: top center;
  transition-timing-function: ease-out;
  transition-duration: 100ms;
}
.media-default-skin .media-input-feedback-island .media-input-feedback-island__content {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.25rem 0.625rem;
  /* Increase contrast of the content */
}
.media-default-skin .media-input-feedback-island .media-input-feedback-island__content * {
  mix-blend-mode: difference;
}
.media-default-skin .media-input-feedback-island .media-icon {
  display: none;
  flex-shrink: 0;
}
.media-default-skin .media-input-feedback-island .media-input-feedback-island__value {
  margin-left: auto;
}
@media (pointer: coarse) {
  .media-default-skin .media-input-feedback-island {
    transition-property: scale, translate, opacity;
    will-change: scale, translate, opacity;
  }
}
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .media-default-skin .media-input-feedback-island {
    transition-property: scale, translate, filter, opacity;
    will-change: scale, translate, filter, opacity;
  }
}
@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
  .media-default-skin .media-input-feedback-island {
    --media-surface-background-color: oklch(0 0 0);
  }
}
.media-default-skin .media-input-feedback-island {
  /* Default hidden state */
}
.media-default-skin .media-input-feedback-island[data-starting-style], .media-default-skin .media-input-feedback-island[data-ending-style] {
  opacity: 0;
  transition-timing-function: ease-in;
  transition-duration: 250ms;
}
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .media-default-skin .media-input-feedback-island[data-starting-style], .media-default-skin .media-input-feedback-island[data-ending-style] {
    filter: blur(8px);
    scale: 0.9;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .media-default-skin .media-input-feedback-island[data-starting-style][data-ending-style], .media-default-skin .media-input-feedback-island[data-ending-style][data-ending-style] {
    translate: 0 -25%;
  }
}

.media-default-skin .media-input-feedback-island--volume {
  width: min(80%, 12rem);
}
.media-default-skin .media-input-feedback-island--volume .media-input-feedback-island__content {
  --media-progress-fill: var(--media-volume-fill);
  background-image: linear-gradient(to right, currentColor 0%, currentColor var(--media-progress-fill), transparent var(--media-progress-fill), transparent 100%);
  border-radius: inherit;
  transition: --media-progress-fill 200ms linear;
}
.media-default-skin .media-input-feedback-island--volume[data-level=high] .media-icon--volume-high, .media-default-skin .media-input-feedback-island--volume[data-level=low] .media-icon--volume-low, .media-default-skin .media-input-feedback-island--volume[data-level=off] .media-icon--volume-off {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .media-default-skin .media-input-feedback-island--volume[data-min], .media-default-skin .media-input-feedback-island--volume[data-max] {
    animation: media-shake 300ms ease-in-out;
  }
}

.media-default-skin .media-input-feedback-island--status[data-status=captions-on] .media-icon--captions-on, .media-default-skin .media-input-feedback-island--status[data-status=captions-off] .media-icon--captions-off, .media-default-skin .media-input-feedback-island--status[data-status=fullscreen] .media-icon--fullscreen-enter, .media-default-skin .media-input-feedback-island--status[data-status=exit-fullscreen] .media-icon--fullscreen-exit, .media-default-skin .media-input-feedback-island--status[data-status=pip] .media-icon--pip-enter, .media-default-skin .media-input-feedback-island--status[data-status=exit-pip] .media-icon--pip-exit {
  display: block;
}

/* --- Bubble ---------------------------------------------------------------- */
.media-default-skin .media-input-feedback-bubble {
  display: grid;
  grid-row: 1;
  grid-column: 2;
  place-content: center;
  padding: 1rem;
  text-align: center;
  /* Central bubble (play, pause) */
}
.media-default-skin .media-input-feedback-bubble:not([data-direction]) {
  background: oklch(0% 0 0deg / 0.35);
  border-radius: 100%;
  backdrop-filter: blur(8px);
  transition-timing-function: ease-out;
  transition-duration: 200ms;
  transition-property: opacity, scale;
}
.media-default-skin .media-input-feedback-bubble:not([data-direction])[data-starting-style], .media-default-skin .media-input-feedback-bubble:not([data-direction])[data-ending-style] {
  opacity: 0;
  scale: 0.85;
}
.media-default-skin .media-input-feedback-bubble:not([data-direction])[data-ending-style] {
  transition-timing-function: ease-in;
  transition-duration: 100ms;
}
@media (prefers-reduced-motion: reduce) {
  .media-default-skin .media-input-feedback-bubble:not([data-direction]) {
    transition-duration: 50ms;
    transition-property: opacity;
  }
}
.media-default-skin .media-input-feedback-bubble {
  /* Directional bubbles (seek) */
}
.media-default-skin .media-input-feedback-bubble[data-direction] {
  gap: 0.25rem;
}
@container media-root (width > 24rem) {
  .media-default-skin .media-input-feedback-bubble[data-direction] {
    padding: 1.5rem;
  }
}
.media-default-skin .media-input-feedback-bubble[data-direction=backward] {
  grid-column: 1;
  justify-self: left;
}
.media-default-skin .media-input-feedback-bubble[data-direction=forward] {
  grid-column: 3;
  justify-self: right;
}
.media-default-skin .media-input-feedback-bubble {
  /* Icons */
}
.media-default-skin .media-input-feedback-bubble .media-icon {
  display: none;
  width: calc(var(--media-icon-size) * 1.5);
  height: calc(var(--media-icon-size) * 1.5);
}
.media-default-skin .media-input-feedback-bubble .media-icon.media-icon--play {
  translate: 1px 0;
}
.media-default-skin .media-input-feedback-bubble[data-direction] .media-icon--seek, .media-default-skin .media-input-feedback-bubble[data-status=pause] .media-icon--pause, .media-default-skin .media-input-feedback-bubble[data-status=play] .media-icon--play {
  display: block;
}
.media-default-skin .media-input-feedback-bubble[data-direction=backward] .media-icon--seek {
  scale: -1 1;
}
@media (prefers-reduced-motion: no-preference) {
  .media-default-skin .media-input-feedback-bubble .media-icon--seek {
    transition-timing-function: ease-in-out;
    transition-duration: 200ms;
    transition-property: translate, opacity;
  }
  .media-default-skin .media-input-feedback-bubble[data-starting-style] .media-icon--seek, .media-default-skin .media-input-feedback-bubble[data-ending-style] .media-icon--seek {
    opacity: 0;
  }
  .media-default-skin .media-input-feedback-bubble[data-direction=forward][data-starting-style] .media-icon--seek {
    translate: -60% 0;
  }
  .media-default-skin .media-input-feedback-bubble[data-direction=backward][data-starting-style] .media-icon--seek {
    translate: 60% 0;
  }
}

/* ==========================================================================
   Icon State Visibility for Video Skins

   Data-attribute-driven visibility rules for multi-state icon buttons.
   Uses :is() with both element selectors (for HTML custom element wrappers)
   and class selectors (for React rendered SVG elements).
   ========================================================================== */
/* --- All icons hidden by default --- */
.media-button--play .media-icon--restart,
.media-button--play .media-icon--play,
.media-button--play .media-icon--pause,
.media-button--mute .media-icon--volume-off,
.media-button--mute .media-icon--volume-low,
.media-button--mute .media-icon--volume-high,
.media-button--fullscreen .media-icon--fullscreen-enter,
.media-button--fullscreen .media-icon--fullscreen-exit,
.media-button--pip .media-icon--pip-enter,
.media-button--pip .media-icon--pip-exit,
.media-button--cast .media-icon--cast-enter,
.media-button--cast .media-icon--cast-exit,
.media-button--airplay .media-icon--airplay-enter,
.media-button--airplay .media-icon--airplay-exit,
.media-button--captions .media-icon--captions-off,
.media-button--captions .media-icon--captions-on {
  display: none;
  opacity: 0;
}

/* --- Active icon per state --- */
/* Play: ended → restart */
.media-button--play[data-ended] .media-icon--restart,
.media-button--play:not([data-ended])[data-paused] .media-icon--play,
.media-button--play:not([data-ended]):not([data-started]) .media-icon--play,
.media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause,
.media-button--mute[data-muted] .media-icon--volume-off,
.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,
.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high,
.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
.media-button--pip:not([data-pip]) .media-icon--pip-enter,
.media-button--pip[data-pip] .media-icon--pip-exit,
.media-button--cast:not([data-cast-state=connected]) .media-icon--cast-enter,
.media-button--cast[data-cast-state=connected] .media-icon--cast-exit,
.media-button--airplay:not([data-airplay-state=connected]) .media-icon--airplay-enter,
.media-button--airplay[data-airplay-state=connected] .media-icon--airplay-exit,
.media-button--captions:not([data-active]) .media-icon--captions-off,
.media-button--captions[data-active] .media-icon--captions-on {
  display: block;
  opacity: 1;
}

/* --- Pause keyframe animations on inactive icons --- */
/* The airplay-exit SVG defines its keyframes against CSS variables (mirroring
   the spinner pattern). When the AirPlay session isn't active the SVG is
   still in the DOM — just `display: none` — so its animations would keep
   running. Set the variables to `none` to short-circuit the keyframes. */
.media-button--airplay:not([data-airplay-state=connected]) {
  --media-icon--airplay__fill-animation: none;
  --media-icon--airplay__triangle-animation: none;
}

/* -------------------------------------------------------------------------- */
/* Global @keyframes for all video skins (CSS & Tailwind)                     */
/* -------------------------------------------------------------------------- */
@keyframes media-shake {
  0%, 100% {
    translate: 0 0;
  }
  20% {
    translate: -6px 0;
  }
  40% {
    translate: 4px 0;
  }
  60% {
    translate: -2px 0;
  }
  80% {
    translate: 1px 0;
  }
}
/* -------------------------------------------------------------------------- */
/* Global @properties for all video skins (CSS & Tailwind)                    */
/* -------------------------------------------------------------------------- */
@property --media-progress-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
/* ==========================================================================
   Root
   ========================================================================== */
.media-default-skin--video {
  --media-spring-timing-function: linear(
    0,
    0.034 1.5%,
    0.763 9.7%,
    1.066 13.9%,
    1.198 19.9%,
    1.184 21.8%,
    0.963 37.5%,
    0.997 50.9%,
    1
  );
  --media-border-color: oklch(0 0 0 / 0.1);
  --media-surface-background-color: oklch(1 0 0 / 0.1);
  --media-surface-inner-border-color: oklch(1 0 0 / 0.05);
  --media-surface-outer-border-color: oklch(0 0 0 / 0.1);
  --media-surface-shadow-color: oklch(0 0 0 / 0.15);
  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
  --media-video-border-radius: var(--media-border-radius, 2rem);
  --media-controls-transition-duration: 100ms;
  --media-controls-transition-timing-function: ease-out;
  --media-error-dialog-transition-duration: 350ms;
  --media-error-dialog-transition-delay: 100ms;
  --media-error-dialog-transition-timing-function: var(--media-spring-timing-function);
  --media-popup-transition-duration: 100ms;
  --media-popup-transition-timing-function: ease-out;
  --media-tooltip-side-offset: 0.75rem;
  --media-tooltip-boundary-offset: 0.5rem;
  --media-popover-side-offset: 0.5rem;
  --media-popover-boundary-offset: 0.5rem;
  overflow: clip;
  background: oklch(0% 0 0deg);
}
@media (prefers-reduced-motion: reduce) {
  .media-default-skin--video {
    --media-error-dialog-transition-duration: 50ms;
    --media-error-dialog-transition-delay: 0ms;
    --media-error-dialog-transition-timing-function: ease-out;
    --media-popup-transition-duration: 0ms;
  }
}
@media (prefers-color-scheme: dark) {
  .media-default-skin--video {
    --media-border-color: oklch(1 0 0 / 0.15);
  }
}
@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
  .media-default-skin--video {
    --media-surface-background-color: oklch(0 0 0);
    --media-surface-inner-border-color: oklch(1 0 0 / 0.25);
    --media-surface-outer-border-color: transparent;
  }
}
.media-default-skin--video:has(.media-controls:not([data-visible])) {
  /* Slight delay to hide controls on non-touch devices after interaction */
}
@media (pointer: fine) {
  .media-default-skin--video:has(.media-controls:not([data-visible])) {
    --media-controls-transition-duration: 300ms;
  }
}
@media (pointer: coarse) {
  .media-default-skin--video:has(.media-controls:not([data-visible])) {
    --media-controls-transition-duration: 150ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .media-default-skin--video:has(.media-controls:not([data-visible])) {
    --media-controls-transition-duration: 50ms;
  }
}
.media-default-skin--video {
  /* Inner border ring */
}
.media-default-skin--video::after {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--media-border-color);
}
.media-default-skin--video:fullscreen {
  --media-border-radius: 0;
}

/* ==========================================================================
   Error Dialog
   ========================================================================== */
.media-default-skin--video .media-error {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-default-skin--video .media-error__dialog {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 18rem;
  padding: 0.75rem;
  color: oklch(100% 0 0deg);
  text-shadow: 0 1px 0 oklch(0% 0 0deg / 0.25);
  border-radius: 1.75rem;
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-timing-function: var(--media-error-dialog-transition-timing-function);
  transition-duration: var(--media-error-dialog-transition-duration);
  transition-property: opacity, scale;
}

.media-default-skin--video .media-error[data-starting-style] .media-error__dialog,
.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
  opacity: 0;
  scale: 0.5;
}

.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
  transition-delay: 0ms;
}

.media-default-skin--video .media-error__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.375rem;
  text-shadow: inherit;
}

.media-default-skin--video .media-error__title {
  font-size: 1rem;
}

/* ==========================================================================
   Controls (hide/show behavior)
   ========================================================================== */
.media-default-skin--video .media-controls {
  position: absolute;
  inset-inline: 0.5rem;
  bottom: 0.5rem;
  z-index: 10;
  flex-wrap: wrap;
  color: var(--media-color-primary, oklch(100% 0 0deg));
  transform-origin: bottom;
  transition-timing-function: var(--media-controls-transition-timing-function);
  transition-duration: var(--media-controls-transition-duration);
}
@media (pointer: fine) {
  .media-default-skin--video .media-controls {
    transition-property: scale, filter, opacity;
    will-change: scale, filter, opacity;
  }
}
@media (pointer: coarse) {
  .media-default-skin--video .media-controls {
    transition-property: scale, opacity;
    will-change: scale, opacity;
  }
}
.media-default-skin--video .media-controls:not([data-visible]) {
  pointer-events: none;
  opacity: 0;
  scale: 0.95;
}
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .media-default-skin--video .media-controls:not([data-visible]) {
    filter: blur(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .media-default-skin--video .media-controls:not([data-visible]) {
    scale: 1;
  }
}
.media-default-skin--video .media-controls .media-time-controls {
  flex: 0 0 100%;
  order: -1;
  padding-inline: 0.625rem;
}
.media-default-skin--video .media-controls .media-button-group:first-child {
  flex: 1;
  text-align: left;
}
.media-default-skin--video .media-controls .media-button-group:last-child {
  flex: 1;
  justify-content: end;
}
@container media-root (width > 42rem) {
  .media-default-skin--video .media-controls {
    inset-inline: 0.75rem;
    bottom: 0.75rem;
    flex-wrap: nowrap;
    column-gap: 0.125rem;
    padding: 0.25rem;
  }
  .media-default-skin--video .media-controls .media-time-controls {
    flex: 1;
    order: unset;
  }
  .media-default-skin--video .media-controls .media-button-group:first-child, .media-default-skin--video .media-controls .media-button-group:last-child {
    flex: 0 0 auto;
  }
}

.media-default-skin--video .media-error[data-open] ~ .media-controls {
  display: none;
}

/* Hide cursor when controls are hidden */
.media-default-skin--video:has(.media-controls:not([data-visible])) {
  cursor: none;
}

/* ==========================================================================
   Sliders
   ========================================================================== */
.media-default-skin--video .media-slider__track {
  background-color: oklch(100% 0 0deg / 0.2);
  box-shadow: 0 0 0 1px oklch(0% 0 0deg / 0.05);
}

.media-default-skin--video .media-slider__thumbnail {
  --media-slider-thumbnail-max-width: 11rem;
  --media-slider-thumbnail-max-height: 8rem;
  --media-slider-thumbnail-padding: -1.125rem;
  /**
    Inset is the difference between the container width and the slider (100%) width.
    Divided by 2 as we render the time on both sides.
  */
  --media-slider-thumbnail-inset: calc((100cqi - 100%) / 2);
  position: absolute;
  bottom: calc(100% + 1.2rem);
  left: clamp(var(--media-slider-thumbnail-max-width) / 2 + var(--media-slider-thumbnail-padding) - var(--media-slider-thumbnail-inset), var(--media-slider-pointer), 100% - var(--media-slider-thumbnail-max-width) / 2 - var(--media-slider-thumbnail-padding) + var(--media-slider-thumbnail-inset));
  pointer-events: none;
  opacity: 0;
  filter: blur(8px);
  transform-origin: bottom;
  scale: 0.8;
  translate: -50%;
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: scale, opacity, filter;
}
.media-default-skin--video .media-slider__thumbnail .media-thumbnail__image {
  max-width: var(--media-slider-thumbnail-max-width);
  max-height: var(--media-slider-thumbnail-max-height);
}

.media-default-skin--video .media-slider[data-pointing] .media-slider__thumbnail:has([role=img]:not([data-hidden])) {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}

.media-default-skin--video .media-slider__thumbnail:has([role=img]:not([data-hidden])) + .media-slider__preview .media-slider__value {
  display: none;
}

/*------------------------ Media */
@media screen and (max-width: 1660px) {
  #page .wp-gr .grw-row .rpi-slides-root {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
}
@media screen and (max-width: 1500px) {
  :root {
    --header-logo-width: 200px;
  }
  #primary-menu .menu-text {
    font-size: 16px !important;
  }
  #primary-menu > .menu-item > a {
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 46px;
    margin-bottom: 46px;
  }
}
@media screen and (max-width: 1360px) {
  :root {
    --slider-nav-width: 80px;
    --slider-bullet-width: 90px;
  }
  #primary-menu .menu-text {
    font-size: 14px !important;
  }
}
@media screen and (max-width: 1024px) {
  :root {
    --footer-width-col1: 100%;
    --footer-width-col2: 50%;
    --footer-width-col3: 25%;
    --footer-width-col4: 25%;
  }
}
@media screen and (min-width: 993px) and (max-width: 1200px) {
  .awsm-grid.drawer-style.style-2 {
    margin-left: -12px;
    margin-right: -12px;
  }
  .awsm-grid.drawer-style.style-2 .awsm-grid-list {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media screen and (max-width: 1000px) {
  :root {
    --body-padding-arround: 20px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --slider-nav-width: 64px;
    --slider-bullet-width: 60px;
    --body-padding-arround: 12px;
    --footer-width-col1: 100%;
    --footer-width-col2: 100%;
    --footer-width-col3: 100%;
    --footer-width-col4: 100%;
  }
  body .vc_rtl-columns-reverse {
    flex-flow: column-reverse;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  #page .ult_tabcontent {
    padding: 0;
  }
  #page .ult_tabs .ult_tabmenu {
    flex-direction: column;
  }
  #page .ourdifference-list-wrapper .ourdifference-item-media {
    right: 20px;
  }
  #page .ourdifference-list-wrapper .ourdifference-item-media img {
    opacity: 1;
    transform: none;
  }
  #footer .logo img {
    max-width: 200px;
  }
  #footer .menu .menu-item a {
    padding: 6px 0;
  }
  #bottom-bar .wf-float-left {
    margin-bottom: 35px !important;
  }
  #footer .widget_block:nth-child(4) .wp-block-group {
    max-width: 100%;
  }
  #footer .menu .menu-item.menu-item-has-children > a::before {
    top: 10px;
  }
}
@media screen and (max-width: 560px) {
  #page .wp-gr .grw-reviews {
    margin: 0;
  }
  #page .wp-gr .grw-row .rpi-slides-root {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt {
    width: 56px !important;
    height: 50px !important;
  }
  #page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-prev {
    margin-left: -30px !important;
  }
  #page .wp-gr .grw-row .rpi-slides-root .rpi-ltgt.grw-next {
    margin-right: -30px !important;
  }
  #page .ourdifference-list-wrapper .ourdifference-item-media {
    display: none;
  }
  #page .ourdifference-list-wrapper .ourdifference-list .ourdifference-list-inner {
    padding: 35px !important;
  }
}
@media screen and (max-width: 480px) {
  :root {
    --body-padding-arround: 10px;
  }
  sr7-module .custombutton {
    font-size: 16px !important;
    padding: 8px 10px 8px 20px !important;
    max-width: max-content !important;
  }
  #page .ult_tabs {
    padding: 15px;
  }
  .matters-wrapper {
    display: block;
  }
}
@media screen and (max-width: 420px) {
  #page .ult_tabs {
    padding: 6px;
  }
}