:root {
  --adrasa-navy-2: #1c3066;
  --adrasa-cyan: #3fb6e2;

  /* Point these to YOUR real SVG files in assets */
  --adrasa-icon-arrow-navy: url("../svg/arrow-up-right-navy.svg");
  --adrasa-icon-arrow-light: url("../svg/arrow-up-right-light.svg");
  --adrasa-icon-arrow-cyan: url("../svg/arrow-up-right-cyan.svg");
}

.adrasa-btn {
  /* IMPORTANT: do not inherit section scale by default */
  --adrasa-btn-scale: 0.88;

  /* Fluid defaults (still override-friendly via --btn-*) */
  --_btn-h: var(--btn-h, clamp(40px, 3.2vw, calc(44px * var(--adrasa-btn-scale))));
  --_btn-px: var(--btn-px, clamp(18px, 2.4vw, calc(28px * var(--adrasa-btn-scale))));
  --_btn-radius: var(--btn-radius, clamp(18px, 2.0vw, calc(22px * var(--adrasa-btn-scale))));
  --_btn-gap: var(--btn-gap, clamp(10px, 1.4vw, calc(14px * var(--adrasa-btn-scale))));

  --_btn-font-size: var(--btn-font-size, clamp(13px, 1.1vw, calc(16px * var(--adrasa-btn-scale))));
  --_btn-letter-spacing: var(--btn-letter-spacing, 0.02em);
  --_btn-font-weight: var(--btn-font-weight, 600);

  --_btn-icon-size: var(--btn-icon-size, clamp(16px, 1.6vw, calc(18px * var(--adrasa-btn-scale))));

  /* Icon URL (only used when .adrasa-btn__icon--bg is present) */
  --btn-icon-url: var(--btn-icon-url, var(--adrasa-icon-arrow-navy));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_btn-gap);

  height: var(--_btn-h);
  padding: 0 var(--_btn-px);
  border-radius: var(--_btn-radius);

  width: auto;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  font-family: "Roboto", sans-serif;
  font-weight: var(--_btn-font-weight);
  font-size: var(--_btn-font-size);
  letter-spacing: var(--_btn-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.13;
  white-space: nowrap;

  border: 1px solid transparent;

  /* Hover behavior everywhere = lift only */
  transition: transform 0.15s ease;
}


/* Ensure anchors don't get global link styles leaking in */
a.adrasa-btn {
  text-decoration: none;
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .adrasa-btn:hover {
    transform: translateY(-1px);
  }
}

.adrasa-btn:focus-visible {
  outline: 2px solid rgba(63, 182, 226, 0.6);
  outline-offset: 2px;
}

/* Icon container (Elementor-friendly) */
.adrasa-btn__icon {
  width: var(--_btn-icon-size);
  height: var(--_btn-icon-size);
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* No icon replacement by default */
  background: none;
}

/* If Elementor injects <img> */
.adrasa-btn__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* If Elementor injects inline <svg> */
.adrasa-btn__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Optional fallback mode: use real asset SVG as background-image */
.adrasa-btn__icon--bg {
  background-image: var(--btn-icon-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* =========================
   Variants
========================= */

.adrasa-btn--primary {
  background: var(--adrasa-navy-2);
  border-color: transparent;

  /* icon */
  --btn-icon-url: var(--adrasa-icon-arrow-light);
}

/* LOCK primary text color against WP/Elementor link states */
a.adrasa-btn--primary,
a.adrasa-btn--primary:link,
a.adrasa-btn--primary:visited,
a.adrasa-btn--primary:hover,
a.adrasa-btn--primary:active,
a.adrasa-btn--primary:focus,
a.adrasa-btn--primary:focus-visible {
  color: #c6e3ee !important;
  text-decoration: none !important;
}

.adrasa-btn--outline {
  background: transparent;
  border-color: rgba(28, 48, 102, 0.6);

  /* icon */
  --btn-icon-url: var(--adrasa-icon-arrow-cyan);
}

/* LOCK outline text color against WP/Elementor link states */
a.adrasa-btn--outline,
a.adrasa-btn--outline:link,
a.adrasa-btn--outline:visited,
a.adrasa-btn--outline:hover,
a.adrasa-btn--outline:active,
a.adrasa-btn--outline:focus,
a.adrasa-btn--outline:focus-visible {
  color: var(--adrasa-navy-2) !important;
  text-decoration: none !important;
}

/* Sizes */
.adrasa-btn--lg {
  --btn-h: 70px;
  --btn-px: 44px;
  --btn-font-size: 22px;
}

.adrasa-btn--sm {
  --btn-h: 44px;
  --btn-px: 22px;
  --btn-font-size: 14px;
}

/* =========================================
   ADRASA Resources section
========================================= */

.adrasa-resources {
  --adrasa-scale: 0.80;

  --adrasa-navy: #1c3463;
  --adrasa-navy-2: #1c3066;

  --adrasa-cyan: #009dd8;
  --adrasa-cyan-soft: rgba(0, 157, 216, 0.20);

  --adrasa-radius: calc(18px * var(--adrasa-scale));
  --adrasa-shadow: 15px 17px 25.7px -5px rgba(28, 52, 99, 0.06);

  --adrasa-gap: calc(44px * var(--adrasa-scale));

  /*padding: calc(70px * var(--adrasa-scale)) 0;*/
}

.adrasa-resources__grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: var(--adrasa-gap);
  align-items: center;
}

@media (max-width: 991.98px) {
  .adrasa-resources__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* LEFT: Carousel */
.adrasa-resources__carousel {
  position: relative;
}

.adrasa-resources__track {
  display: flex;
  gap: calc(18px * var(--adrasa-scale));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  border-radius: var(--adrasa-radius);
  padding-bottom: calc(10px * var(--adrasa-scale));
}

.adrasa-resources__track::-webkit-scrollbar {
  display: none;
}

.adrasa-resources__card {
  flex: 0 0 100%;
  scroll-snap-align: start;

  border-radius: var(--adrasa-radius);
  box-shadow: var(--adrasa-shadow);
  overflow: hidden;

  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  padding: calc(28px * var(--adrasa-scale));
  min-height: calc(330px * var(--adrasa-scale));
  position: relative;
}

@media (min-width: 992px) {
  .adrasa-resources__card {
    min-height: calc(350px * var(--adrasa-scale));
  }
}

.adrasa-resources__card-top {
  display: flex;
  justify-content: space-between;
  gap: calc(12px * var(--adrasa-scale));
  margin-bottom: calc(26px * var(--adrasa-scale));
}

.adrasa-resources__pill {
  display: inline-flex;
  align-items: center;
  padding: calc(10px * var(--adrasa-scale)) calc(16px * var(--adrasa-scale));
  border-radius: 999px;

  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(18px * var(--adrasa-scale));
  color: var(--adrasa-navy-2);

  background: rgba(191, 224, 238, 0.45);
}

.adrasa-resources__pill--date {
  background: rgba(191, 224, 238, 0.22);
  border: 1px solid rgba(63, 182, 226, 0.35);
}

.adrasa-resources__card-title {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: calc(44px * var(--adrasa-scale));
  line-height: 1.05;
  color: var(--adrasa-navy-2);
  margin: 0 0 calc(10px * var(--adrasa-scale)) 0;
}

.adrasa-resources__card-abstract {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: calc(18px * var(--adrasa-scale));
  line-height: 1.4;
  color: var(--adrasa-navy-2);
  margin: 0 0 calc(18px * var(--adrasa-scale)) 0;
  opacity: 0.9;
}

/* LEFT card CTA (small outline) */
.adrasa-resources__card .adrasa-btn {
  --btn-h: 34px;
  --btn-px: 18px;
  --btn-radius: 999px;
  --btn-gap: 10px;
  --btn-font-size: calc(16px * var(--adrasa-scale));
  --btn-font-weight: 500;
  --btn-letter-spacing: 0.03em;

  margin-top: calc(6px * var(--adrasa-scale));

  background: transparent;
  border-color: rgba(28, 48, 102, 0.6);
  text-decoration: none;
}

/* If your card CTA icon is a boxed icon */
.adrasa-resources__card .adrasa-btn__icon {
  width: calc(14.14px * var(--adrasa-scale));
  height: calc(14.14px * var(--adrasa-scale));
  /*margin-left: calc(10px * var(--adrasa-scale));*/

  border: 1px solid rgba(28, 48, 102, 0.35);
  border-radius: calc(4px * var(--adrasa-scale));
}

/* Dots */
.adrasa-resources__dots {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--adrasa-scale));
  margin-top: calc(18px * var(--adrasa-scale));
}

.adrasa-resources__dot {
  appearance: none;
  border: 0;
  padding: 0;

  height: calc(6px * var(--adrasa-scale));
  width: calc(64px * var(--adrasa-scale));
  border-radius: 999px;

  background: rgba(63, 182, 226, 0.30);
  cursor: pointer;
}

.adrasa-resources__dot.is-active {
  background: rgba(28, 48, 102, 0.85);
}

.adrasa-resources__progress {
  position: absolute;
  left: calc(28px * var(--adrasa-scale));
  right: calc(28px * var(--adrasa-scale));
  bottom: calc(18px * var(--adrasa-scale));
  height: 0;
}

/* RIGHT: Featured Case */
.adrasa-resources__right-inner {
  max-width: 900px;
}

.adrasa-resources__right-title {
  margin: 0 0 calc(14px * var(--adrasa-scale)) 0;
  color: var(--adrasa-navy-2);
  line-height: 0.92;
}

.adrasa-resources__right-title-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: calc(48px * var(--adrasa-scale));
}

.adrasa-resources__right-title-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
  font-size: calc(54px * var(--adrasa-scale));
  margin-left: calc(10px * var(--adrasa-scale));
}

.adrasa-resources__right-text {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: calc(18px * var(--adrasa-scale));
  line-height: 1.45;
  color: var(--adrasa-navy-2);
  max-width: 820px;
}

/* Project line (one line on desktop) */
.adrasa-resources__project {
  margin-top: calc(22px * var(--adrasa-scale));

  display: flex;
  align-items: baseline;
  gap: calc(22px * var(--adrasa-scale));

  flex-wrap: nowrap;
  white-space: nowrap;

  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  line-height: 0.92;
}

.adrasa-resources__project-label {
  color: rgba(28, 48, 102, 1);
  font-size: calc(39px * var(--adrasa-scale));
}

.adrasa-resources__project-part {
  color: rgba(0, 157, 216, 1);
  font-size: calc(28px * var(--adrasa-scale));
}

.adrasa-resources__project-sep {
  color: var(--adrasa-cyan-soft);
  font-size: calc(28px * var(--adrasa-scale));
  transform: translateY(calc(-1px * var(--adrasa-scale)));
}

/* RIGHT CTA — force 211×44 / 16px even if --lg exists */
.adrasa-resources__right-inner .adrasa-btn {
  --btn-h: 44px;
  --btn-px: 22px;
  --btn-radius: 22px;
  --btn-gap: 14px;
  --btn-font-size: calc(16px * var(--adrasa-scale));
  --btn-font-weight: 500;
  --btn-letter-spacing: 0.02em;
  --btn-icon-size: 18.6px;

  /*width: 211px;*/
  max-width: 100%;

  justify-content: space-evenly;

  margin-top: calc(26px * var(--adrasa-scale));
  background: var(--adrasa-navy-2);
  border-color: transparent;
  text-decoration: none;
}

/* If your Resources icon span is empty, add .adrasa-btn__icon--bg to use the asset file */
.adrasa-resources__right-inner .adrasa-btn--primary {
  --btn-icon-url: var(--adrasa-icon-arrow-light);
}

.adrasa-resources__right-inner .adrasa-btn--outline {
  --btn-icon-url: var(--adrasa-icon-arrow-cyan);
}

/* Neutralize lg inside Resources */
.adrasa-resources__right-inner .adrasa-btn.adrasa-btn--lg {
  height: 44px;
  padding: 0 23px;
  font-size: calc(16px * var(--adrasa-scale));
  /*width: 220px;*/
}

/* Mobile refinements */
@media (max-width: 991.98px) {
  .adrasa-resources {
    padding: calc(56px * var(--adrasa-scale)) 0;
    --adrasa-gap: calc(26px * var(--adrasa-scale));
  }

  .adrasa-resources__card-title {
    font-size: calc(40px * var(--adrasa-scale));
  }

  .adrasa-resources__pill {
    font-size: calc(17px * var(--adrasa-scale));
    padding: calc(9px * var(--adrasa-scale)) calc(14px * var(--adrasa-scale));
  }

  .adrasa-resources__dot {
    width: calc(56px * var(--adrasa-scale));
  }

  .adrasa-resources__project {
    flex-wrap: wrap;
    white-space: normal;
    gap: calc(12px * var(--adrasa-scale)) calc(16px * var(--adrasa-scale));
  }
}

/* =========================================
   ADRASA TWO COLUMN (Reusable)
   Fix: buttons are fixed at 44px height (not scaled to 38.72)
========================================= */

.adrasa-two-col {
  --adrasa-scale: 0.88;

  --adrasa-navy: #1c3463;
  --adrasa-navy-2: #1c3066;
  --adrasa-cyan: #3fb6e2;

  --adrasa-title-size: calc(48px * var(--adrasa-scale));
  --adrasa-title-lh: 0.92;
  --adrasa-italic-size: calc(54px * var(--adrasa-scale));

  --adrasa-gap: calc(44px * var(--adrasa-scale));

  --adrasa-card-radius: calc(17px * var(--adrasa-scale));
  --adrasa-card-shadow: 15px 17px 25.7px -5px rgba(28, 52, 99, 0.06);
  --adrasa-card-min-h: calc(519px * var(--adrasa-scale));
  --adrasa-card-max-w: calc(722px * var(--adrasa-scale));

  --adrasa-card-bg-pos-x: calc(753px * var(--adrasa-scale));
  --adrasa-card-bg-pos-y: calc(620.94px * var(--adrasa-scale));
  --adrasa-card-bg-size-x: 110.526%;
  --adrasa-card-bg-size-y: 121.695%;

  --adrasa-card-bg: none;

  position: relative;
  padding: calc(80px * var(--adrasa-scale)) 0;
}

.adrasa-two-col__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--adrasa-gap);
  align-items: start;
}

@media (max-width: 991.98px) {
  .adrasa-two-col__grid {
    grid-template-columns: 1fr;
  }
}

.adrasa-two-col__right {
  display: flex;
  justify-content: flex-end;
}

.adrasa-two-col__title {
  margin: 0 0 calc(18px * var(--adrasa-scale)) 0;
  color: var(--adrasa-navy-2);
  line-height: var(--adrasa-title-lh);
  letter-spacing: 0;
}

.adrasa-two-col__title-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--adrasa-title-size);
}

.adrasa-two-col__title-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--adrasa-italic-size);
  margin: 0 calc(10px * var(--adrasa-scale));
}

.adrasa-two-col__left-text {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(18px * var(--adrasa-scale));
  color: var(--adrasa-navy-2);
}

.adrasa-two-col__left-text p {
  margin: 0 0 calc(14px * var(--adrasa-scale)) 0;
}

/* CTA row (button + side link) */
.adrasa-two-col__cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;

  --adrasa-side-link-color: var(--adrasa-cyan);
  --adrasa-side-link-hover-color: var(--adrasa-navy-2);
}

@media (min-width: 992px) {
  .adrasa-two-col__cta-row {
    flex-wrap: nowrap;
  }
}

/* Two Column buttons */
.adrasa-two-col__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  height: 44px;
  padding: 0 28px;
  border-radius: 22px;

  font-family: "Roboto", sans-serif;
  font-size: calc(16px * var(--adrasa-scale));
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.13;
  white-space: nowrap;

  transition: transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .adrasa-two-col__btn:hover {
    transform: translateY(-1px);
  }
}

.adrasa-two-col__btn--primary {
  background: var(--adrasa-navy-2);
  color: #c6e3ee !important;
  border: 1px solid transparent;
  cursor: pointer;
}

.adrasa-two-col__btn--secondary {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--adrasa-navy-2);
  color: var(--adrasa-navy-2) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer
}

.adrasa-two-col__btn--secondary:hover {
  /*background: rgba(255, 255, 255, 0.45);*/
}

.adrasa-two-col__btn-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.adrasa-two-col__btn-icon img,
.adrasa-two-col__btn-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Side link */
.adrasa-two-col .adrasa-two-col__cta-row .adrasa-two-col__cta-side-link {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  color: var(--adrasa-side-link-color) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.adrasa-two-col .adrasa-two-col__cta-row .adrasa-two-col__cta-side-link:hover {
  color: var(--adrasa-side-link-hover-color) !important;
}

/* Mobile behavior for Two Column CTA row */
@media (max-width: 991.98px) {
  .adrasa-two-col__cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .adrasa-two-col__btn {
    width: 100%;
    padding: 0 22px;
  }

  .adrasa-two-col .adrasa-two-col__cta-row .adrasa-two-col__cta-side-link {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }
}

/* =========================================
   Variant: Sustainability & compliance
========================================= */

.sustainability-compliance {
  background-image:
    linear-gradient(rgb(239 247 250 / 0), rgb(239 247 250 / 1)),
    url(/wp-content/uploads/2025/12/background-cristal-32.png) !important;
}

@media (max-width: 991.98px) {
  .sustainability-compliance {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-image:
      linear-gradient(rgba(239, 247, 250, 0.88), rgba(239, 247, 250, 0.88)),
      url(/wp-content/uploads/2025/12/background-cristal-32.png) !important;
  }
}

.adrasa-hero__btn--tertiary {
  background: rgba(128, 195, 221,1);
  color: #ffffff !important; 
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}