/* ----------------------------------------
   1. GLOBAL STYLES
---------------------------------------- */
div {
  color: inherit;
}

body.modal-open {
  padding-right: var(--scrollbar-width, 0px) !important;
  overflow: hidden !important;
}

html.modal-open {
  padding-right: var(--scrollbar-width, 0px) !important;
  overflow: hidden !important;
}

/* ----------------------------------------
   2. INSIGHT CARDS
---------------------------------------- */
.insight_card_wrap .u-text {
  justify-content: inherit !important;
  align-items: inherit !important;
  text-align: inherit !important;
  color: inherit !important;
}

/* ----------------------------------------
   3. CASE STUDY CARD ICON MASK
---------------------------------------- */
.cs_card_icon {
  -webkit-mask-image: linear-gradient(to bottom left, black 10%, transparent 100%);
  mask-image: linear-gradient(to bottom left, black 10%, transparent 100%);
}

/* ----------------------------------------
   4. MAIN BUTTON ANIMATIONS
---------------------------------------- */
.button_arrow_icon {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.button_arrow_icon.cc-static {
  transform: translate(0, 0);
}

.button_arrow_icon.cc-hover {
  transform: translate(-1.5rem, 0);
}

.button_arrow_element {
  transition:
    width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    border-radius 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    border 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

[btn-arrow]:hover .button_arrow_icon.cc-static {
  transform: translate(2.5rem, 0);
}

[btn-arrow]:hover .button_arrow_icon.cc-hover {
  transform: translate(0, 0);
}

[btn-arrow]:hover .button_arrow_element {
  width: 2.5rem;
  border-radius: 0.375rem;
}

/** Scale up .button_popup_wrap on hover and rotate its child .button_popup_element */
.button_popup_wrap {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.button_popup_element {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-modal-trigger]:hover {
  transform: scale(1.1);
}

[data-modal-trigger]:hover .button_popup_element {
  transform: rotate(90deg);
}

/* ----------------------------------------
   5. GRADIENTS
---------------------------------------- */
.u-g-stroke {
  background:
    linear-gradient(var(--_gradient-style---gradient--g-stroke-fill), var(--_gradient-style---gradient--g-stroke-fill)) padding-box,
    linear-gradient(135deg,
      var(--_gradient-style---gradient--g-c1) var(--_gradient-style---gradient--g-c1-pos),
      var(--_gradient-style---gradient--g-c2) var(--_gradient-style---gradient--g-c2-pos),
      var(--_gradient-style---gradient--g-c3) var(--_gradient-style---gradient--g-c3-pos),
      var(--_gradient-style---gradient--g-c4) var(--_gradient-style---gradient--g-c4-pos)) border-box;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
}

.u-g-stroke>* {
  margin: calc(0px - var(--gradient--gs-border));
}


/* ----------------------------------------
   6. MODAL 
---------------------------------------- */
.modal_dialog::backdrop { opacity: 0; }


html {
  overflow-y: scroll !important;
}

/* Hide scrollbar visually but keep the space */
html::-webkit-scrollbar {
  width: 0px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: transparent;
}

html {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}

/* When modal is open, prevent scrolling but keep scrollbar space */
body.modal-open {
  position: fixed !important;
  width: 100% !important;
  top: var(--scroll-top, 0) !important;
  left: 0 !important;
  overflow: clip !important;
}

/* Ensure html keeps scrollbar space when modal is open */
html.modal-open {
  overflow-y: scroll !important;
}

/*----------------------------------------
  7. ACCORDION
----------------------------------------*/
.accordion_toggle_btn_wrap,
.accordion_toggle_btn_contain {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.accordion_toggle_btn_wrap:hover {
  transform: scale(1.1);
}

.accordion_toggle_btn_wrap:hover .accordion_toggle_btn_contain {
  transform: rotate(90deg);
}

/*----------------------------------------
  8. SWIPER
----------------------------------------*/
.swiper-bullet-wrapper .swiper-bullet:nth-child(2) {
  transform: rotate(90deg);
}

.swiper-bullet-wrapper .swiper-bullet:nth-child(3) {
  transform: rotate(180deg);
}

.swiper-bullet-wrapper .swiper-bullet:nth-child(4) {
  transform: rotate(270deg);
}

/*----------------------------------------
  9. BRAND LOGOS
----------------------------------------*/
.wf-design-mode .brand_logos_group > :nth-child(2),
.wf-design-mode .brand_logos_group > :nth-child(3) {
  display: none !important;
}

/*----------------------------------------
  10. NAV
----------------------------------------*/

/** Make .nav_resource_icon color change on .nav_resource_link hover */
.nav_resource_link .nav_resource_icon {
  color: #C4D3E3;
  transition: color 0.2s;
}
.nav_resource_link:hover .nav_resource_icon {
  color: #3a55ff;
}