:root {
  --blue: #003b99;
  --blue-soft: #6f92d3;
  --pink: #ff0068;
  --white: #fff;
  --light: #f4f4f4;
  --container: 114rem;
  --pink: #e51667;
  --pink-soft: #ff67a2;
  --field: #ffd0e0;
  --blue: #003b99;
  --orange: #df8700;
  --blue-soft: #748fc8;
  --blue-light: #dbe6f7;
  --border: #d9e3f5;
  --dark-gray: #555555;

  --azeco-blue: #243f8f;
  --azeco-blue-dark: #173374;
  --azeco-pink: #ed0b64;
  --azeco-orange: #f4a000;
  --azeco-light-blue: #dfe7f6;
  --azeco-soft-blue: #f5f7fc;
  --azeco-soft-pink: #fff0f6;
  --azeco-text: #203669;
  --azeco-muted: #6f7ca2;
  --azeco-border: #dce3f1;
  --white: #ffffff;
  --shadow: 0 20px 50px rgba(36, 63, 143, .08);
  --radius-lg: 28px;
  --radius-md: 18px;
}

strong,
b {
	font-family: 'ProximaNova-Extrabold', 'Raleway', sans-serif;
}

.page-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
}

.page-head .banner-icon {
  width: 4rem;
  margin-bottom: 1rem;
}

/* Button  */
.btn:first-child:active,
.btn:first-child:active:focus-visible,
:not(.btn-check) + .btn:active,
:not(.btn-check) + .btn:active:focus-visible {
  border-color: transparent;
}

.azeco_button {
  display: inline-flex;
  align-items: center;
  gap: 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background .3s ease;
  color: var(--white);
  border: 2px solid transparent;
  font-size: 1.1rem;
}

.azeco_button.btn-curve:hover {
  border-color: var(--hover-border-color);
  color: var(--hover-text-color) !important;
  background: transparent !important;
}

.azeco_button__icon {
  position: relative;
  width: 1.35rem;
  height: 1rem;
  overflow: visible;
}

.azeco_button.arrow-reverse .azeco_button__icon {
  transform: scaleX(-1);
}

.azeco_button__trail {
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  gap: .15rem;
  transform: translateY(-50%);
}

.azeco_button__trail span {
  width: .25rem;
  height: .14rem;
  background: currentColor;
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity .15s ease,
    transform .2s ease;
}

.azeco_button__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .45s cubic-bezier(.23, 1, .32, 1);
}

.azeco_button__text {
  line-height: 1;
  white-space: nowrap;
  font-size: 1.1rem;
  transition: transform .45s cubic-bezier(.23, 1, .32, 1);
}

.azeco_button__arrow svg {
  width: 1.45rem;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.azeco_button:hover .azeco_button__arrow {
  transform: translate(1.53rem, -50%);
}

.azeco_button:not(.btn-curve):hover .azeco_button__text {
  transform: translateX(16px);
}

.azeco_button:hover .azeco_button__trail span {
  opacity: 1;
  transform: scaleX(1);
}

.azeco_button:hover .azeco_button__trail span {
  opacity: 1;
  transform: scaleX(1);
}

.azeco_button:hover .azeco_button__trail span:nth-child(1) {
  transition-delay: .05s;
}

.azeco_button:hover .azeco_button__trail span:nth-child(2) {
  transition-delay: .12s;
}

.azeco_button:hover .azeco_button__trail span:nth-child(3) {
  transition-delay: .19s;
}

.azeco_button:hover .azeco_button__trail span:nth-child(4) {
  transition-delay: .26s;
}

.azeco_button:not(:hover) .azeco_button__trail span:nth-child(1) {
  transition-delay: .21s;
}

.azeco_button:not(:hover) .azeco_button__trail span:nth-child(2) {
  transition-delay: .14s;
}

.azeco_button:not(:hover) .azeco_button__trail span:nth-child(3) {
  transition-delay: .07s;
}

.azeco_button:not(:hover) .azeco_button__trail span:nth-child(4) {
  transition-delay: 0s;
}


/* Horizontal Filter */
.filter-wrap {
  border-top: .15rem solid var(--blue-soft);
  border-bottom: .15rem solid var(--blue-soft);
  padding: 1rem 0;
  margin-bottom: 3rem;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1.4rem;
}

.filter-dropdown {
  position: relative;
}

.filter-btn {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: .5rem;
  background: var(--blue-soft);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-btn.active {
  background: var(--blue-soft);
  color: var(--blue);
}

.filter-btn i {
  font-size: 1.5rem;
  color: var(--white);
  display: flex;
}

.filter-btn.active i {
  color: var(--blue);
}

.filter-menu {
  position: absolute;
  left: 0;
  top: calc(100% + .8rem);
  z-index: 2;
  min-width: 18rem;
  width: 100%;
  padding: 1.4rem;
  border-radius: .4rem;
  background: var(--blue-light);
  box-shadow: 0 1rem 2.4rem rgba(0, 59, 153, .14);
  display: none;
}

.filter-dropdown.is-open .filter-menu {
  display: block;
}

.filter-check {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #222;
  margin-bottom: .8rem;
  cursor: pointer;
}

.filter-check:last-child {
  margin-bottom: 0;
}

.filter-check input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--orange, #ff9b00);
}

.selected-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .4rem .3rem .4rem .8rem;
  border-radius: .4rem;
  background: var(--dark-gray);
  color: var(--white);
  border: none;
  font-size: .8rem;
}

.reset-link {
  color: #333;
  text-decoration: underline;
  font-weight: 700;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

/* Vertical Filter */
.filter {
  width: 100%;
}

.filter-header {
  max-width: 78rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.filter-header__icon {
  width: 7rem;
  height: 7rem;
  margin: 0 auto 1.8rem;
  color: var(--blue-soft);
  font-size: 5rem;
}

.filter-header__title {
  margin-bottom: 1.7rem;
  font-size: clamp(3rem, 4vw, 3.8rem);
  font-weight: 400;
  line-height: 1.1;
}

.filter-header__text {
  margin: 0;
  line-height: 1.45;
}

.search-container .filter-group {
  padding: unset;
  background: unset;
}

.filter-search {
  display: grid;
  grid-template-columns: 1fr 8rem;
  border: .15rem solid var(--blue-soft);
  border-radius: 1rem;
  overflow: hidden;
  margin: 3rem 0;
}

.filter-search__input {
  border: 0;
  padding: 0 2rem;
  outline: 0;
  font-size: 1.8rem;
  color: var(--blue);
}

.filter-search__input::placeholder {
  color: var(--blue-soft);
}

.filter-search__button {
  border: 0;
  background: var(--blue-light);
  padding: 1rem;
}

.filter-search__icon {
  width: 2.8rem;
  height: 2.8rem;
  margin: auto;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.filter-divider {
  border-top: .15rem solid var(--blue-soft);
  margin-bottom: 3.5rem;
}

.filter-layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.filter--vertical .filter-layout {
  grid-template-columns: 22rem 1fr;
}

.filter-sidebar__title {
  padding: 0.8rem 1rem;
  border-radius: .5rem;
  background: var(--blue-soft);
  color: #fff;
  margin-bottom: 1rem;
}

.filter-group {
  padding: 1.5rem;
  border-radius: .5rem;
  background: var(--blue-light);
  margin-bottom: 1rem;
  color: #222;
}

.filter-group__title,
.sidebar-filter__group .form-label{
  margin: 0 0 1.6rem;
  color: #333;
  font-size: 1.2rem;
}

.ewm-filter__choices .form-check {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .7rem;
  cursor: pointer;
}

.ewm-filter__choices .form-check:last-child {
  margin-bottom: 0;
}

.ewm-filter__choices .form-check .form-check-input  {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--orange);
  margin-left: unset;
  -webkit-appearance: checkbox;
}

.filter-reset {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: .5rem;
  background: var(--blue-soft);
  color: #fff;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.filter-grid .ewm-filter__results .ewm-filter__results-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.card {
  position: relative;
  padding: 1.2rem;
  border: .8rem solid var(--blue-light);
  border-radius: 1.8rem;
  background: #fff;
  min-height: 36rem;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

.card__image {
  height: 16rem;
  border-radius: .5rem;
  margin-bottom: 2.2rem;
  overflow: hidden;
  background: #0ab;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__title {
  font-family: 'ProximaNova-Bold';
  margin: 0 0 1.4rem;
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 800;
  color: var(--blue);
}

.card__content {
  margin: 0 0 2rem;
  color: var(--blue);
  line-height: 1.45;
}

.card__footer {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.card__button {
  padding: .5rem 2.5rem;
  border-radius: .6rem;
  background: var(--pink);
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.card__button:hover {
  background: #d9005b;
  color: #fff;
}

.card__lock {
  position: absolute;
  right: 2.4rem;
  top: 18rem;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  z-index: 2;
}

.filter-pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.filter-pagination__arrow {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--blue-soft);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-pagination__arrow--next {
  background: var(--pink);
}

.filter-pagination__numbers {
  color: var(--blue);
  font-weight: 700;
}
/* --  */

/* Main */
.color-blue {
	color: var(--blue);
}
.color-pink {
	color: var(--pink);
}
.btn {
  border-radius: 9999px;
  padding: .4rem 0;
}
.btn.btn-curve {
  font-family: 'ProximaNova-Semibold', 'Raleway', sans-serif;
  padding: .4rem 2.5rem;
  font-size: 1.1rem;
  letter-spacing: .5px;
}
.btn.btn-curve-slight {
  border-radius: .7rem;
  padding: .6rem 2.5rem;
}

.btn-pink {
  background: var(--pink);
  color: var(--white);
}

.btn-pink:hover {
  background: var(--pink);
  color: var(--white);
  border-color: var(--white);
}

.btn-blue {
  background: var(--blue);
  color: var(--white);
}

.btn-blue:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--white);
}

.btn-plain {
  background: none;
}

.btn-plain-red,
.btn-plain-red:hover {
	color: #FF0000;
}

.btn-orange {
  background: var(--orange);
  color: var(--white);
}

.btn-orange:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--white);
}

.post-categories.tag-white a {
  background: var(--white);
  color: var(--blue-soft);
}

.intro-text {
  font-size: 1.3rem;
  letter-spacing: .08rem;
  margin-bottom: 1rem;
}

.btn-read-article {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
}

.btn-read-article:hover {
  background: var(--pink-hover);
  color: #fff;
}

.btn-read-article svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* --- */

/* News More */
.more-news-grid {
  display: flex;
  gap: 1.4rem;
  align-items: stretch;
}

.more-news-card {
  position: relative;
  border-radius: 1.6rem;
}

.more-news-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.more-news-card {
  background: var(--white);
  padding: 1.25rem;
  flex: 1;
}

.more-news-card.more-news-featured {
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1;
  min-width: 40rem;
}

.more-news-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13rem;
  min-height: 4.8rem;
  padding: .8rem 2rem;
  border-radius: .5rem;
  background: var(--blue-soft);
  color: var(--white);
  font-size: 2rem;
  font-weight: 800;
}

.more-news-tag-light {
  background: var(--white);
  color: var(--blue-soft);
}

.tag-top-right {
  position: absolute;
  top: 3rem;
  right: 3rem;
  z-index: 4;
}

.more-news-title {
  font-size: clamp(1rem, 4vw, 1.7rem);
  line-height: 1.05;
  font-weight: 400;
  margin-bottom: 5rem;
}

.more-news-title strong {
  font-weight: 900;
}

.more-news-title-sm {
  font-size: clamp(1rem, 3vw, 1.4rem);
  line-height: 1.05;
  margin-bottom: 2rem;
}

.more-news-title-image {
  width: 17rem;
  margin-bottom: 0;
}

.more-news-text {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 3.5rem;
}

.more-news-card-blue .more-news-title,
.more-news-card-blue .more-news-text {
  color: var(--white);
}

.more-news-card-blue .more-news-title strong {
  color: var(--blue);
}
/* -- */

/* Footer Form */
.sample-section {
  position: relative;
  min-height: 100vh;
  padding: 7rem 0;
  overflow: hidden;
  background: var(--pink);
  color: var(--white);
}

.sample-section::after {
  content: "";
  position: absolute;
  right: -11rem;
  top: 21rem;
  width: 45rem;
  aspect-ratio: 178 / 205;
  opacity: .18;
  background: #ff2a82;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 205"><path fill="black" d="M89 4 C96 4 103 6 109 10 L166 43 C172 47 176 53 176 61 L176 144 C176 152 172 158 166 162 L109 195 C103 199 96 201 89 201 C82 201 75 199 69 195 L12 162 C6 158 2 152 2 144 L2 61 C2 53 6 47 12 43 L69 10 C75 6 82 4 89 4 Z"/></svg>') center / 100% 100% no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 205"><path fill="black" d="M89 4 C96 4 103 6 109 10 L166 43 C172 47 176 53 176 61 L176 144 C176 152 172 158 166 162 L109 195 C103 199 96 201 89 201 C82 201 75 199 69 195 L12 162 C6 158 2 152 2 144 L2 61 C2 53 6 47 12 43 L69 10 C75 6 82 4 89 4 Z"/></svg>') center / 100% 100% no-repeat;
}

.sample-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.sample-inner .section-title {
  max-width: 38rem;
  margin: 0 auto 3.5rem;
  font-size: clamp(1rem, 5vw, 2.2rem);
  line-height: 1.15;
}

.sample-inner .section-lead {
  max-width: 53rem;
  margin: 0 auto 2rem;
  font-size: 1.3rem;
}

.sample-inner .section-text {
  max-width: 53rem;
  margin: 0 auto 2rem;
  font-size: 1.3rem;
}

.form-box {
  max-width: 96rem;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 2rem;
  background: var(--pink-soft);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

.form-control,
.form-check-box,
.form-select {
  width: 100%;
  border: 0;
  border-radius: .7rem;
  color: #111;
  font-size: 1rem;
  padding: 1rem 1.4rem;
}

.sample-section .form-control {
	background: var(--field);
}

.form-check-box .form-check-input {
  margin-left: unset;
}

.form-control::placeholder {
  color: #111;
  opacity: 1;
}

textarea.form-control {
  min-height: 11rem;
  resize: vertical;
}

.form-check-box {
  text-align: left;
}

.check-title {
  display: block;
  margin-bottom: .8rem;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.form-check {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0 22px 0 0;
  min-height: auto;
  padding: 0;
}

.form-check-input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-radius: .2rem;
}

.form-check-label {
  color: #111;
  font-size: 1rem;
}

.form-actions {
  display: flex;
  align-items: end;
  justify-content: end;
}

/* --- */

/* Ingredient */
.ingredient-grid .ewm-filter__results .ewm-filter__results-inner{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
}

.ingredient-card {
  padding: 1rem;
  border-radius: 1.8rem;
  background: var(--light);
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .22);
  border: .8rem solid #fff;
}

.ingredient-image {
  width: 100%;
  height: 22rem;
  border-radius: .5rem;
  overflow: hidden;
  margin-bottom: 2.4rem;
  background: #00b7bd;
}

.ingredient-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ingredient-title {
  margin: 0 0 1.4rem;
  color: var(--blue);
  font-size: clamp(1rem, 4vw, 1.7rem);
  line-height: 1.05;
  font-weight: 800;
}

.ingredient-text {
  max-width: 55rem;
  color: var(--blue);
  line-height: 1.45;
  margin-bottom: 2.4rem;
}

.ingredient-actions {
  display: flex;
  justify-content: flex-end;
}
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 30rem;
  gap: 3rem;
  align-items: center;
  color: #213c83;
}

.text-block {
  max-width: 70rem;
  font-weight: 700;
}

.text-block p + p {
  margin-top: 2.5rem;
  font-weight: 400;
}

.logo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: end;
  max-width: 65rem;
  margin-top: 4rem;
}

.logo-item {
  height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-align: center;
}

.logo-item img {
  height: 100%;
}

.hero-shape {
	background: url('../img/hex-bg-gray.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 4rem;
}

.hero-shape .hex-wrap-wrapper {
	width: 70%;
  inset: 0;
  background: var(--blue);
  border: 3px solid var(--blue);
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 178 205'><path fill='black' d='M81 2 C86 -1 92 -1 97 2 L171 45 C176 48 178 53 178 59 L178 147 C178 153 176 157 171 160 L97 203 C92 206 86 206 81 203 L7 160 C2 157 0 153 0 147 L0 59 C0 53 2 48 7 45 Z'/></svg>") left / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 178 205'><path fill='black' d='M81 2 C86 -1 92 -1 97 2 L171 45 C176 48 178 53 178 59 L178 147 C178 153 176 157 171 160 L97 203 C92 206 86 206 81 203 L7 160 C2 157 0 153 0 147 L0 59 C0 53 2 48 7 45 Z'/></svg>") left / 100% 100% no-repeat;
}

.hero-shape .hex-wrap-wrapper .hero-wrap-image {
	background: #003b99;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 178 205'><path fill='black' d='M81 2 C86 -1 92 -1 97 2 L171 45 C176 48 178 53 178 59 L178 147 C178 153 176 157 171 160 L97 203 C92 206 86 206 81 203 L7 160 C2 157 0 153 0 147 L0 59 C0 53 2 48 7 45 Z'/></svg>") center / 100% 100% no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 178 205'><path fill='black' d='M81 2 C86 -1 92 -1 97 2 L171 45 C176 48 178 53 178 59 L178 147 C178 153 176 157 171 160 L97 203 C92 206 86 206 81 203 L7 160 C2 157 0 153 0 147 L0 59 C0 53 2 48 7 45 Z'/></svg>") center / 100% 100% no-repeat;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.hero-shape .hex-wrap-wrapper .hero-wrap-image img {
  width: 100%;
  height: 511px;
  object-fit: cover;
  mask: inherit;
  -webkit-mask: inherit;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 96rem;
  margin: 0 auto;
  color: #213c83;
}

.info-card {
  background: var(--light);
  border: .7rem solid var(--white);
  border-radius: 2rem;
  padding: 4rem;
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .22);
  min-height: 42rem;
  display: flex;
  flex-direction: column;
}

.info-card h2 {
  font-size: 1.8rem;
  font-weight: 400;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: .2rem solid var(--blue);
}

.info-card ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.info-card ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.info-card ul li::before {
  content: "";
  width: .6rem;
  height: .6rem;
  background: var(--pink);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 8px;
}

.benefits-list {
  display: grid;
  gap: 3rem;
}

.benefit-card {
  background-color: #6f92d3;
  border-radius: 2rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: 24rem 1fr;
  gap: 5rem;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.benefit-line-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 3px;
  background: #fff;
  transform: rotate(33deg);
  transform-origin: left center;
}

.bg-white-bottom-line {
	width: 24rem;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.benefit-card.benefit-card-reverse .bg-white-bottom-line {
	left: unset;
	right: 0;
}
.benefit-card .bg-white-bottom-line::before {
	content: "";
  position: absolute;
  left: 50%;
  bottom: 0%;
  width: 3px;
  height: 50%;
  background: #fff;
}

.benefit-card .benefit-content {
	color: var(--white);
}

.benefit-card .benefit-content a.btn {
  color: #173d88; 
}

.benefit-card-reverse {
  grid-template-columns: 1fr 24rem;
}

.benefit-card-reverse .benefit-visual {
  right: -2rem;
}

.benefit-content p {
  color: #fff;
  font-weight: 700;
  margin-bottom: 2rem;
}

.benefit-visual {
  position: relative;
  width: 22rem;
  height: 17rem;
}

.benefit-image-wrapper {
	position: relative;
	height: 100%;
}

.benefit-image-container {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 205"><path fill="black" d="M89 4 C96 4 103 6 109 10 L166 43 C172 47 176 53 176 61 L176 144 C176 152 172 158 166 162 L109 195 C103 199 96 201 89 201 C82 201 75 199 69 195 L12 162 C6 158 2 152 2 144 L2 61 C2 53 6 47 12 43 L69 10 C75 6 82 4 89 4 Z"/></svg>') center / 100% 100% no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 205"><path fill="black" d="M89 4 C96 4 103 6 109 10 L166 43 C172 47 176 53 176 61 L176 144 C176 152 172 158 166 162 L109 195 C103 199 96 201 89 201 C82 201 75 199 69 195 L12 162 C6 158 2 152 2 144 L2 61 C2 53 6 47 12 43 L69 10 C75 6 82 4 89 4 Z"/></svg>') center / 100% 100% no-repeat;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--white);
  border: 3px solid var(--white);
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
}
.benefit-image-wrapper::before {
	content: "";
  position: absolute;
  top: 22%;
  left: -8%;
  width: 45%;
  height: 3px;
  background: #fff;
  transform: rotate(30deg);
}

.benefit-card-reverse .benefit-image-wrapper::before {
	left: unset;
	top: 22%;
  right: -8%;
  transform: rotate(-30deg);
}

.benefit-image {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 205"><path fill="black" d="M89 4 C96 4 103 6 109 10 L166 43 C172 47 176 53 176 61 L176 144 C176 152 172 158 166 162 L109 195 C103 199 96 201 89 201 C82 201 75 199 69 195 L12 162 C6 158 2 152 2 144 L2 61 C2 53 6 47 12 43 L69 10 C75 6 82 4 89 4 Z"/></svg>') center / 100% 100% no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 205"><path fill="black" d="M89 4 C96 4 103 6 109 10 L166 43 C172 47 176 53 176 61 L176 144 C176 152 172 158 166 162 L109 195 C103 199 96 201 89 201 C82 201 75 199 69 195 L12 162 C6 158 2 152 2 144 L2 61 C2 53 6 47 12 43 L69 10 C75 6 82 4 89 4 Z"/></svg>') center / 100% 100% no-repeat;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.benefit-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benefit-line {
  position: absolute;
  background: #fff;
}

.benefit-line-left {
  width: 8.5rem;
  height: 0.3rem;
  left: -2rem;
  top: 3.1rem;
  transform: rotate(30deg);
}

.benefit-line-bottom {
  width: .3rem;
  height: 4rem;
  left: 10.8rem;
  bottom: -1rem;
}

.benefit-visual-right .benefit-line-left {
  left: auto;
  right: -2.1rem;
  transform: rotate(-30deg);
}

.benefit-visual-right .benefit-line-bottom {
  left: auto;
  right: 10.8rem;
}
/* -- */

/* Knowledge Base */
.vertical-grid-filter .ewm-filter__results .ewm-filter__results-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

/* FAQ */
#faq {
	color: var(--blue);
}
#faq .search-form {
  display: grid;
  grid-template-columns: 1fr 7rem;
  border: .1rem solid var(--blue-soft);
  border-radius: 1.2rem;
  overflow: hidden;
  background: var(--white);
}

#faq .search-form input[type='text'] {
  border: 0;
  padding: 1rem 2rem;
  font-size: 1.7rem;
  color: var(--blue);
  outline: none;
  height: 100%;
  width: 100%;
}

#faq .search-form input::placeholder {
  color: var(--blue-soft);
}

#faq .search-form button {
  border: 0;
  background: var(--blue-light);
  color: var(--white);
  font-size: 2.6rem;
  position: relative;
}
#faq .search-form button.color-pink {
	background-color: var(--pink);
}
#faq .search-form button.color-pink span {
	background: var(--white);
}
#faq .search-form button.color-pink span i {
	color: var(--pink);
}

#faq .search-form button span {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--pink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#faq .search-form button span i {
	font-size: 1.2rem;
	line-height: normal;
}
#faq .faq-description {
	width: 70%;
	margin: 0 auto;
}
#faq .accordion .accordion-item{
	border: none;
}
#faq .accordion .accordion-item h2.accordion-header button.accordion-button {
	background: var(--blue-soft);
	color: var(--white);
	border-radius: .5rem;
	padding: 1.2rem;
}
#faq .accordion .accordion-item h2.accordion-header button.accordion-button::after {
	font-family: bootstrap-icons !important;
	color: var(--white);
	content: '\F229';
	background-image: none;
	font-size: 1.3rem;
	line-height: normal;
}
#faq .accordion .accordion-item h2.accordion-header button.accordion-button::after {
  transition: transform 0.5s ease;
}
#faq .accordion .accordion-item h2.accordion-header button.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}
#faq .accordion .accordion-item h2.accordion-header button.accordion-button:focus {
	box-shadow:  unset;
}
#faq .accordion .accordion-item > .accordion-collapse > .accordion-body {
	background: var(--blue-light);
	margin-top: 5px;
	border-radius: .5rem;
}
#faq .accordion .accordion-item > .accordion-collapse > .accordion-body .accordion {
	border-bottom: 1px solid var(--blue);
}
#faq .accordion .accordion-item > .accordion-collapse > .accordion-body .accordion .accordion-item {
	background: none;
	color: var(--blue);
}
#faq .accordion .accordion-item > .accordion-collapse > .accordion-body .accordion .accordion-item h2.accordion-header button.accordion-button {
	background: none;
	color: var(--blue);
}
#faq .accordion .accordion-item > .accordion-collapse > .accordion-body .accordion .accordion-item h2.accordion-header button.accordion-button::after {
	background-image: none;
	content: "";
	width: 0;
	height: 0;
}
#faq .accordion .accordion-item > .accordion-collapse > .accordion-body .accordion .accordion-item h2.accordion-header button.accordion-button .accordion-icon-container {
	width: 35px;
  height: 35px;
  background: #FFF;
  align-self: flex-end;
  border-radius: .5rem;
}
#faq .accordion .accordion-item > .accordion-collapse > .accordion-body .accordion .accordion-item h2.accordion-header button.accordion-button .accordion-icon-container .accordion-icon::after {
	content: "\f64d";
	font-family: bootstrap-icons !important;
	font-size: 1.3rem;
	display: inline-block;
  margin-top: 2px;
  transition: transform 0.5s ease;
  color: var(--blue);
}
#faq .accordion .accordion-item > .accordion-collapse > .accordion-body .accordion .accordion-item h2.accordion-header button.accordion-button:not(.collapsed) .accordion-icon-container .accordion-icon::after {
	transform: rotate(360deg);
	content: "\f2ea";
}
/* -- */
/* Contact */
.card-box {
  background: #fff;
  border: .1rem solid var(--border);
  border-radius: 1.6rem;
  box-shadow: 0 1.2rem 4rem rgba(0, 59, 153, .08);
  height: 100%;
}

.card-box .form-control,
.card-box .form-select {
	color: var(--blue);
	border: .1rem solid var(--border);
}

.info-card {
  padding: 1.5rem;
  height: 100%;
}

.contact-list {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.contact-item {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}

.contact-item i {
  color: var(--blue);
  font-size: 1.4rem;
}

.contact-item a {
  color: var(--pink);
  font-weight: 700;
}

.expert-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.expert-mini a {
	color: var(--blue);
}

.expert-photo {
  width: 9rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--bs-heading-color);
}

.expert-photo .hex-wrap {
	width: 100%;
  inset: 0;
  background: var(--blue);
  border: 3px solid var(--blue);
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 205"><path fill="black" d="M89 4 C96 4 103 6 109 10 L166 43 C172 47 176 53 176 61 L176 144 C176 152 172 158 166 162 L109 195 C103 199 96 201 89 201 C82 201 75 199 69 195 L12 162 C6 158 2 152 2 144 L2 61 C2 53 6 47 12 43 L69 10 C75 6 82 4 89 4 Z"/></svg>') left / 100% 100% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 205"><path fill="black" d="M89 4 C96 4 103 6 109 10 L166 43 C172 47 176 53 176 61 L176 144 C176 152 172 158 166 162 L109 195 C103 199 96 201 89 201 C82 201 75 199 69 195 L12 162 C6 158 2 152 2 144 L2 61 C2 53 6 47 12 43 L69 10 C75 6 82 4 89 4 Z"/></svg>') left / 100% 100% no-repeat;
}

.expert-photo  .hex-wrap .hero-wrap-image {
	background: #003b99;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 205"><path fill="black" d="M89 4 C96 4 103 6 109 10 L166 43 C172 47 176 53 176 61 L176 144 C176 152 172 158 166 162 L109 195 C103 199 96 201 89 201 C82 201 75 199 69 195 L12 162 C6 158 2 152 2 144 L2 61 C2 53 6 47 12 43 L69 10 C75 6 82 4 89 4 Z"/></svg>') center / 100% 100% no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 205"><path fill="black" d="M89 4 C96 4 103 6 109 10 L166 43 C172 47 176 53 176 61 L176 144 C176 152 172 158 166 162 L109 195 C103 199 96 201 89 201 C82 201 75 199 69 195 L12 162 C6 158 2 152 2 144 L2 61 C2 53 6 47 12 43 L69 10 C75 6 82 4 89 4 Z"/></svg>') center / 100% 100% no-repeat;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.expert-photo .hex-wrap .hero-wrap-image img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  mask: inherit;
  -webkit-mask: inherit;
}

.expert-card {
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.expert-card h3 {
  color: var(--blue);
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
}

.expert-card p {
  margin: .4rem 0;
  font-size: 1.4rem;
}
/* -- */

/* Page Template */


/* Certificate Slider */
.certificate-slider .column-inner .card-inner {
  border: 1px solid var(--blue);
  padding: 3rem;
  border-radius: 2rem;
  height: 100%;
  display: flex;
  align-items: center;
}

.list-carousel .slider-controls {
  position: absolute;
  top: calc(50% -  30px);
  width: 100%;
}

.list-carousel .slider-controls .slider-prev {
  position: absolute;
  left: -35px;
}

.list-carousel .slider-controls .slider-next {
  position: absolute;
  right: -67px;
}

.list-carousel .bx-wrapper {
  margin-bottom: 2.2rem;
}

#certificate-carousel .bx-wrapper img {
  height: 200px;
  width: 100%;
  object-fit: contain;
}
/* --  */