/* geral */

:root {
    /*colors*/
    --blue: #0d5985;
    --lighter-blue: #3c77a9;
    --bg-blue: #eaf1f9;
    --pink: #9c1135;
    --mid-pink: #e88194;
    --light-pink: #f6e2e5;
    --lighter-pink: #fefafb;
    --yellow: #ff9900;
    --mid-yellow: #ffe2b6;
    --light-yellow: #fff7eb;
    --black-text: rgb(40, 40, 40);
    --light-grey: rgb(200, 200, 200);
    --bg-magnolia: rgb(255, 254, 252);
    --bg-grey: rgb(238, 238, 238);
    --light-dark-blue: rgb(108, 123, 153);
    --light-blue: rgb(179, 195, 226);
    --smooth-black-text: #383838;
    --gradient-blue-pink: linear-gradient(180deg, #2b688f 0%, #d61444 100%);
    --gradient-blue-pink-softer: linear-gradient( 90deg, rgba(118, 140, 163, 0.8) 0%, rgba(203, 150, 167, 0.8) 120.77% );
    /*backdrop-filter: blur(2px);*/

    --ff-primary: "Barlow", sans-serif;
    --ff-secondary: "Source Sans Pro", sans-serif;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500; /* não existe na Source Sans Pro */
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-black: 900;
    /*rems em relação a 16px*/

    --fs-8: 0.5rem;
    --fs-10: 0.625rem;
    --fs-12: 0.75rem;
    --fs-14: 0.875rem; /*14px*/
    --fs-16: 1rem; /*16px*/
    --fs-18: 1.125rem; /*18px*/
    --fs-20: 1.25rem; /*20px*/
    --fs-25: 1.563rem; /*25px*/
    --fs-32: 2rem; /*32 px*/
    --fs-40: 2.5rem;
    --fs-45: 2.813rem;
    --fs-50: 3.125rem; /*50px*/
    --fs-60: 3.75rem;
    --fs-70: 4.375rem;
    /*tamanhos para margin e padding*/

    --size-100: 0.25rem;
    --size-200: 0.5rem;
    --size-300: 0.75rem;
    --size-400: 1rem;
    --size-500: 1.5rem;
    --size-600: 2rem;
    --size-700: 3rem;
    --size-800: 4rem;
    --size-900: 5rem;
    --size-1000: 6rem;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*AOS Animation*/

/* Remove default margin */

* {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  background-color: #fff;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html,
body {
  background-color: #fff;
}

/* navbar */

.logo img {
  width: 140px;
  height: auto;
  object-fit: cover;
}

.mobile-drawer-logo {
  width: 140px;
  height: auto;
  object-fit: cover;
}

/*navigation*/

.primary-header {
  padding-top: var(--size-200);
  padding-bottom: var(--size-200);
  /*background-color: white;*/
}

.container-nav {
  width: 93%;
  margin: 0 auto;
}



.mobile-nav-toggle {
  display: none;
}

.nav-list {
  display: flex;
  gap: var(--size-600);
  font-size: var(--fs-14);
  font-family: var(--ff-secondary);
}

.nav-list a {
  text-decoration: none;
  color: #adadad;
  font-family: var(--ff-secondary);
  font-weight: var(--fw-regular);
}

.nav-list a:hover,
.nav-list a:focus {
  color: var(--blue);
}

.active a {
  font-weight: var(--fw-semi-bold);
  color: var(--blue);
}

.active a:hover,
.active a:focus {
}

.sub-menu {
  z-index: 2;
  position: absolute;
  background: white;
  border-radius: 5px;
  box-shadow: 0 0 0.75em rgba(0, 0, 0, 0.05);
}

.sub-menu-text:hover {
  color: var(--blue);
}

.sub-menu-item:hover {
  background-color: var(--bg-blue);
}

.nav-list li ul li a div p {
  font-family: var(--ff-secondary);
  font-weight: var(--fw-medium);
}

.admin-login, .academy-login {
    opacity: 95%;
}

.admin-login:hover, .academy-login:hover {
  opacity: 100%;
  color: var(--blue);
  transform: translateY(-2px);
  transition: 0.5s;
}

.nav-CTA {
    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    background-color: transparent;
    color: var(--lighter-blue);
    text-transform: uppercase;
    border-radius: 10px;
    border: 1px solid var(--lighter-blue);
    padding: 0.4rem 1rem;
}

.nav-CTA:hover {
    background-color: var(--lighter-blue);
    color: white;
    transition: 1s;
 }

@media (max-width: 65em) {
  .primary-navigation {
    display: none;

    position: fixed;
    padding: var(--size-700);
    inset: 7rem var(--size-600) auto;
    background-color: var(--bg-magnolia);
    border-radius: var(--size-100);
    box-shadow: 0 0 0.75em rgba(0, 0, 0, 0.25);
  }

  .primary-header[data-overlay] {
    content: "";
    position: fixed;
    inset: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  }

  .nav-list {
    display: grid;
    gap: var(--size-600);
    text-align: center;
  }

  .nav-list a {
    text-decoration: none;
    color: var(--black-text);
    font-weight: var(--fw-regular);
  }

  .nav-list a:hover,
  .nav-list a:focus {
    color: var(--blue);
    font-weight: var(--fw-regular);
  }

  .primary-navigation[data-visible] {
    display: block;
  }

  .mobile-nav-toggle {
    display: block;
    position: fixed;
    right: var(--size-200);
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 1rem;
  }

  .mobile-nav-toggle .icon-close {
    display: none;
  }

  .icon-hamburger {
    color: var(--blue);
  }
}

/*End of header*/

/*Hero*/

.container-hero-bg {
  background-image: url(./img/bg-hero-solid-06.svg);
  background-size: 75em;
  background-repeat: no-repeat;
  background-position-x: 25rem;
}

.gradient-hero-bg {
    background-image: url('./img/Group 1171275291 (3).webp');
    background-size: cover;
    fill-opacity: 0.6;
}

.gradient-section-bg {
    background-image: url('./img/Group 1171275291 (3).webp');
    background-size: cover;
    fill-opacity: 0.6;
}

h1 {
  font-family: var(--ff-primary);
  font-weight: var(--fw-semi-bold);
  line-height: 0.98;
  color: var(--light-blue);
  padding-bottom: 2rem;
  max-width: 90%;
}

p {
  font-family: var(--ff-secondary);
  font-size: var(--fs-16);
}

.subtitle {
  color: var(--smooth-black-text);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
  font-size: var(--fs-16);
  line-height: 1.2;
  padding-bottom: 2em;
  max-width: 90%;
}

.button-box {
  text-decoration: none;
}

.quote-standard-btn,
.demo-standard-btn, .read-more-button-pink {
    font-family: var(--ff-primary);
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
    padding: 0.4rem 1.2rem;
    border-radius: 10px;
}

.quote-standard-btn {
    background-color: var(--lighter-blue);
    color: white;
    border: 1px solid var(--lighter-blue);
    opacity: 80%;
}

.quote-standard-btn:hover {
    opacity: 100%;

}

    .quote-standard-btn,
    .quote-standard-btn:hover,
    .quote-standard-btn:focus {
        color: #fff !important;
    }
.demo-standard-btn {
    background-color: transparent;
    color: var(--lighter-blue);
    border: 1px solid var(--lighter-blue);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.demo-standard-btn:hover {
    gap: 3rem;
    transition: 2s;
 }

.read-more-button-pink {
    background-color:transparent;
    color: var(--pink);
    border: 1px solid var(--pink);
    display: flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
}

.scroll-text-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.dashboard-placeholder {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
}

.hero-img {
  max-height: 800px;
  object-fit: contain;
}

.img-dashboard {
  min-width: 600px;
}

@media (max-width: 85em) {
    .container-hero-bg {
        background-image: url(./img/bg-hero-solid-06.svg);
        background-size: 75em;
        background-repeat: no-repeat;
        background-position-x: 25rem;
    }

  .hero-img {
    flex: 40%;
  }

  .img-dashboard {
    min-width: 600px;
  }
}

@media (max-width: 65em) {
    .container-hero-bg {
        background-image: none;
    }

  h1 {
    font-size: var(--fs-50);
  }

  .img-dashboard {
    min-width: 460px;
  }

  .padding-block-300:nth-of-type(1) {
    display: none;
  }
}

@media (max-width: 57em) {

  .img-dashboard {
    min-width: 370px;
  }

  h1 {
    font-size: var(--fs-40);
  }
}

@media (max-width: 45em) {

  .products-button {
    padding: 0.5rem 1rem;
    margin-top: -1rem;
    font-size: 12px;
  }

  h1 {
    font-size: var(--fs-40);
  }

  .subtitle {
    font-size: var(--fs-16);
  }

  .last-img {
    max-width: 70%;
  }
}

/* fim do hero */


/* Homepage reports section styles */
.reports-toggle-btns {
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.reports-tab-btn {
    background: var(--bg-blue);
    border: 1px solid #bcd0e0;
    color: #1a3a5d;
    font-weight: 600;
    font-family: var(--ff-primary);
    border-radius: 2rem; 
    padding: 0.5rem 1rem;
    min-width: 180px;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    box-shadow: none;
}

    .reports-tab-btn.active,
    .reports-tab-btn:focus {
        background: var(--lighter-blue);
        color: #fff;
        
    }

@media (max-width: 576px) {
    .reports-tab-btn {
        width: 100%;
        min-width: unset;
        text-align: center;
    }

    .reports-toggle-btns {
        flex-direction: column;
        gap: 0.5rem;
    }
}

.mini-report-card {
    background: #fff;
    border: 1px solid #e3e8ee;
    box-shadow: 0 2px 8px rgba(30, 60, 90, 0.04);
    min-height: 110px;
    transition: box-shadow 0.2s;
}

    .mini-report-card:hover {
        border: 1px solid var(--blue);
    }

.mini-report-img {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1rem;
}

    .mini-report-img img {
        width: 80px;
        height: 80px;
        object-fit: contain;
        border-radius: 0.75rem;
        background: transparent;
    }

.smooth-bg {
    background: linear-gradient(135deg, #eaf3fa 0%, #f7fafd 100%);
}

.hpt-bg {
    background: #d7d7d7; /* matches original */
    background: linear-gradient(90deg, #d7d7d7 0%, #e6e6e6 100%);
}



/* segunda secção homepage */

.hp-feature-box {
    background-color: #ffffff;
    transition: transform 220ms ease, box-shadow 220ms ease;
    padding: 1.25rem !important;
}

    .hp-feature-box p {
        margin: 0;
        line-height: 1.35;
        color: var(--smooth-black-text);
        font-size: var(--fs-16);
    }

   
 

@media (max-width: 575.98px) {
    .hp-feature-box {
        text-align: center;
        min-height: unset;
    }
}

/* first content index */

.section-title {
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--light-blue);
  font-family: var(--ff-secondary);
  margin: 0 auto 1rem;
}

.two-uneven-columns {
  max-width: 80%;
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto 5rem;
  gap: 5rem;
  justify-content: space-between;
}

.left-column {
  flex: 40%;
  flex-grow: 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 11rem;
}

.right-column {
  flex: 45%;
  flex-grow: 0;
}

.left-column h2 {
  font-size: var(--fs-25);
  font-family: var(--ff-secondary);
  margin-bottom: 2rem;
  font-weight: var(--fw-bold);
  color: var(--smooth-black-text);
}

.left-column p {
  text-align: justify;
  font-size: var(--fs-14);
}

.img-and-text-card {
  display: flex;
  flex-flow: row nowrap;
  background-color: #fbfcff;
  border-radius: 10px;
  padding: 1rem;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.img-and-text-card-first {
  flex: 10%;
}

.img-and-text-card-second {
  flex: 60%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.img-and-text-card p {
  max-width: 90%;
}

.small-img-square {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.blue-number-holder {
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #eaf1f9;
}

.soft-blue-bg {
    background-color: #eaf1f9;
}

.right-column ul {
  margin-bottom: 2rem;
}

.right-column ul li {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 4rem;
}

.number {
  flex: 2%;
  font-weight: var(--fw-black);
  font-size: var(--fs-25);
  font-family: var(--ff-primary);
  color: var(--blue);
  background-image: url(img/bg-shape.svg);
  background-repeat: no-repeat;
  background-position-x: 0.2rem;
  background-size: 45px;
  padding-bottom: 1rem;
  text-align: center;
  padding-top: 0.2rem;
}

.li-text {
  flex: 80%;
  font-family: var(--ff-secondary);
  text-align: justify;
  font-weight: var(--fw-regular);
}

@media (max-width: 65em) {
  .number {
    flex: 10%;
  }

  .img-and-text-card-first {
    flex: 30%;
  }

  .img-and-text-card-second p {
    line-height: 1;
    max-width: unset;
  }
}

@media (max-width: 57em) {
  .number {
    flex: 15%;
  }
}

/* features */

/*.section-bg {
  background-image: url(img/second-container-bg.svg);
  background-repeat: no-repeat;
  background-size: 95rem;
  background-position-x: 10rem;
  background-position-y: 0rem;
}*/

.flexbox-container {
  display: flex;
  flex-flow: column wrap;
  width: 90%;
  margin: 5rem auto;
  gap: 2rem;
  border-radius: 10px;
}

.two-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 2rem auto 0;
  padding: 0 0 0 3rem;
}

.fourty-container {
  flex: 60%;
}

.sixty-container {
  flex: 40%;
}

.sixty-container {
  display: flex;
  flex-flow: column;
}

.turn-data-img {
  height: auto;
  width: auto;
  object-fit: cover;
  border-radius: 10px;
  background-color: var(--light-pink);
}

.index-card {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  width: fit-content;
  top: 75%;
}

.index-card-top {
  top: 15%;
  left: 45%;
}

.index-card-stats {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  width: 20%;
  margin-left: 0rem;
  margin-top: 21rem;
}

.index-card-text {
  font-size: var(--fs-14);
  line-height: 0.98;
}

h3 {
  font-family: var(--ff-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  color: var(--smooth-black-text);
  padding-bottom: 0.5em;
  padding-top: 3em;
  line-height: 0.98;
}

.content-subtitle {
  color: var(--smooth-black-text);
  font-weight: var(--fw-light);
  font-size: var(--fs-20);
  padding-bottom: 2em;
  max-width: 80%;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

ul li {
  list-style: none;
}

.features {
  display: flex;
  gap: 2em;
}

.feature i {
  padding: 1rem;
}

.features li {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  max-width: 40%;
}

.feature-tag {
  max-width: 130px;
  line-height: 1rem;
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
  font-size: var(--fs-14);
}

.check-button {
  margin-top: 1.25rem;
  margin-bottom: 5em;
  padding: 0.6em 1em;
  line-height: 1;
  border-radius: 6px;
  background-color: transparent;
  color: var(--smooth-black-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  cursor: pointer;
  border: 0.5px solid;
  font-family: var(--ff-primary);
  font-weight: var(--fw-bold);
}

.check-button:hover {
  gap: 5rem;
  transition: 2s;
}

.check-button-pink:hover {
  color: var(--pink);
}

.check-button-blue:hover {
  color: var(--blue);
}

hr {
  width: 85%;
  margin: 0 auto;
}

.two-container-reverse {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem 3rem;
}

.sixty-container-reverse {
  flex: 50%;
}

.fourty-container-reverse {
  flex: 40%;
}

.unique-img {
  height: auto;
  width: auto;
  object-fit: cover;
  border-radius: 10px;
  background-color: var(--light-blue);
}

.index-card-stats-two {
  margin-top: -25rem;
  margin-left: 18rem;
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  width: 20%;
}

.secure-img {
  height: 450px;
  width: auto;
  object-fit: cover;
  border-radius: 10px;
  background-color: var(--light-pink);
  padding: 0 1rem;
  position: relative;
  margin-left: 9rem;
}

.h3-reverse {
  text-align: right;
  line-height: 0.98;
  max-width: 70%;
  float: right;
}

.p-reverse {
  text-align: right;
  max-width: 80%;
  float: right;
}

.features-reverse {
  display: flex;
  justify-content: flex-end;
  gap: 2em;
  margin-right: 1em;
  float: right;
}

.features-reverse li {
  display: flex;
  flex-direction: row-reverse;
  align-items: top;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  max-width: 40%;
  text-align: right;
}

.check-button-reverse {
  margin-top: 1.25rem;
  margin-bottom: 5em;
  padding: 0.6em 1em;
  line-height: 1;
  border-radius: 6px;
  background-color: transparent;
  color: var(--smooth-black-text);
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  cursor: pointer;
  border: 2px solid;
  font-family: var(--ff-primary);
  font-weight: var(--fw-bold);
  float: right;
}

.check-button-reverse:hover {
  color: #355c7d;
  background-color: white;
  border: solid white;
  gap: 5rem;
  transition: 2s;
}

@media (max-width: 65em) {
  .two-container {
    padding: 0;
  }

  .fourty-container {
    flex: 50%;
  }

  .turn-data-img {
    height: 380px;
  }

  .index-card-stats {
    margin-top: 19rem;
    width: 30%;
  }

  .two-container-reverse {
    padding: 0;
  }

  .fourty-container-reverse {
    flex: 50%;
  }

  .sixty-container-reverse {
  }

  .unique-img {
    width: 350px;
  }

  .index-card-stats-two {
    width: 29%;
  }

  .secure-img {
    height: 380px;
  }

  .section-bg {
    background-size: 110rem;
    background-position-x: 3rem;
    background-position-y: -5rem;
  }
}

@media (max-width: 57em) {
  

  .index-card-stats-two {
    margin-left: 14rem;
  }

  .two-container-reverse {
    gap: 0rem;
  }

  .fourty-container-reverse {
    flex: 30%;
  }

  .sixty-container-reverse {
    flex: 50%;
    flex-grow: 1;
  }

  

  .features-reverse li {
    max-width: 50%;
  }

  .content-subtitle,
  .p-reverse {
    max-width: unset;
  }
}

@media (max-width: 45em) {
  .spaceship-img {
    width: 200px;
  }

  .box {
    width: 200px;
    height: 150px;
  }

  .h3-reverse {
    max-width: 90%;
  }

  .p-reverse {
    max-width: 90%;
  }

  .feature {
    font-size: var(--fs-14);
    max-width: 80%;
  }

  .secure-img {
    width: 180px;
  }
}

/* fim das features */
/* Tabs: left buttons + right content matched to site style */
.hp-tab-btn {
    background-color: rgba(204, 208, 239, 0.8);
    border: 1px solid rgba(13,89,133,0.06);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    color: var(--smooth-black-text);
    transition: transform .22s ease, box-shadow .22s ease, background-color .18s ease, color .16s ease;
    font-family: var(--ff-secondary);
    font-weight: var(--fw-medium);
}

    .hp-tab-btn:hover,
    .hp-tab-btn:focus {
        transform: translateX(3px);
        background-color: rgba(10,67,100,0.03);
        outline: none;
    }

.nav-link.active.hp-tab-btn,
#hp-tabs .nav-link.hp-tab-btn.active,
#hp-tabs .nav-link.hp-tab-btn.active:focus,
#hp-tabs .nav-link.hp-tab-btn.active:hover {
    background-color: var(--lighter-blue);
    color: #fff;
    border-color: rgba(13,89,133,0.12);
    font-weight: var(--fw-medium);
    box-shadow: none;
}

#hp-tabs .nav-link.hp-tab-btn:not(.active),
#hp-tabs .nav-link.hp-tab-btn:not(.active):hover,
#hp-tabs .nav-link.hp-tab-btn:not(.active):focus {
    color: var(--smooth-black-text);
    font-weight: 500;
    background-color: rgba(240, 242, 255, 0.5);
}

#hp-tabs .nav-link.hp-tab-btn {
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: none;
    background-clip: padding-box;
}

.hp-tab-card {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 8px 20px rgba(13,89,133,0.03);
    min-height: 140px;
    position: relative;
    overflow:hidden;
}

    #pane-individual .hp-tab-card,
    #pane-group .hp-tab-card,
    #pane-hc .hp-tab-card,
    .hp-tab-card.h-100 {
        box-shadow: none;
        border: 1px solid rgba(0,0,0,0.04);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

.hp-card-illustration {
    position: absolute;
    right: -5.4rem;
    top: -5.5rem;
    width: 300px;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.hp-card-illustration-mobile {
    position: absolute;
    right: -2.4rem;
    bottom: -4rem;
    width: 200px;
    height: auto;
    z-index: 1;
    pointer-events: none;
}
    /* Tab pane transitions */
    .hp-tab-pane {
    transform: translateY(8px);
    transition: transform .36s ease, opacity .36s ease;
    opacity: 0;
}

    .hp-tab-pane.show,
    .hp-tab-pane.hp-visible {
        transform: translateY(0);
        opacity: 1;
    }
/* Responsive: horizontal tabs on small screens */
@media (max-width: 575.98px) {
    #hp-tabs {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
    }

    .hp-tab-btn {
        flex: 0 0 auto;
        min-width: 160px;
    }

    .hp-tab-card {
        min-height: auto;
    }

    #hp-tabs .nav-link.hp-tab-btn {
        min-width: 140px;
    }
}
/* Tab group visibility */
.hp-tab-group {
    display: none;
}

    .hp-tab-group[data-tab].active,
    .hp-tab-group[style*="display:block"],
    .hp-tab-group.show {
        display: block;
    }
    /* Flex utilities for tab group columns */
    .hp-tab-group .col-12.d-flex,
    .hp-tab-group .col-12.col-md-6.d-flex,
    .hp-tab-group .col-md-6.d-flex {
        display: flex;
        align-items: stretch;
    }

@media (max-width: 767.98px) {
    .hp-tab-group .col-md-6.d-flex {
        align-items: flex-start;
    }
}
/* Multi-content and multi-pane for two-pane layout */
.hp-multi-content {
    position: relative;
    height: 100%;
    min-height: 190px;
}

.hp-multi-pane {
    display: none;
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: transform .36s ease, opacity .36s ease;
}

    .hp-multi-pane.show,
    .hp-multi-pane.hp-visible {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
/* Reset older overlay/absolute pane rules if present */
.hp-multi-content {
    position: static !important;
}

.hp-multi-pane {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}

/* tailor made section */

.img-tailor-made {
    object-fit:fill;
    max-height: 350px;
}

/* service highlight section */

.hp-product-carousel-wrapper {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.hp-highlighted-product-box {
  flex: 49%;
  flex-grow: 0;
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 2rem;
}

.hp-product-img-placeholder {
  flex: 35%;
  flex-grow: 0;
  height: 100%;
  background-color: var(--bg-grey);
  border-radius: 10px;
}

.hp-highlighted-product-text {
  flex: 50%;
}

.hp-highlighted-product-title {
  font-family: var(--ff-primary);
  font-weight: var(--fw-semi-bold);
  font-size: var(--fs-32);
  color: var(--smooth-black-text);
  margin-bottom: 0.5rem;
}

.hp-highlighted-product-subtitle {
  font-family: var(--ff-secondary);
  font-size: var(--fs-14);
  color: var(--smooth-black-text);
  margin-bottom: 1rem;
}

.hp-highlighted-product-text ul li {
  font-family: var(--ff-secondary);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  align-items: center;
  margin-left: 1rem;
}

.hp-highlighted-product-text ul {
  margin-bottom: 1.5rem;
}

.hp-highlighted-product-quote,
.hp-highlighted-product-learn-more {
  cursor: pointer;
  padding: 0.6rem 1rem;
  font-family: var(--ff-primary);
}

.hp-highlighted-product-quote {
  border-radius: 10px;
  border: none;
  background-color: var(--bg-blue);
  color: var(--smooth-black-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
}

.hp-highlighted-product-learn-more {
  border: none;
  background-color: transparent;
  font-weight: var(--fw-semi-bold);
}

.hp-highlighted-product-learn-more:hover,
.hp-highlighted-product-quote:hover {
  text-decoration: underline;
}

/*new products sections*/

.products-homepage-container {
  display: flex;
  flex-flow: row wrap;
  max-width: 90%;
  margin: 2rem auto 4rem;
  gap: 2rem;
}

.reports-and-tests-container {
  flex: 60%;
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
}

.partnership-container {
  flex: 1 1 30%;
}

.reports-box-container,
.tests-box-container {
  padding: 2rem;
  border-radius: 10px;
}

.reports-box-container {
  /*background: linear-gradient(0deg, rgba(244, 244, 244, 0.4), rgba(244, 244, 244, 0.4)), linear-gradient(257.13deg, #355C7D 33.47%, rgba(168, 41, 88, 0.4) 160.06%);*/
  background-color: var(--light-blue);
}

.reports-box-container:hover {
  transform: scale(1.02);
  transition: 2s;
}

.tests-box-container {
  border: 2px solid #355c7d;
}

.tests-box-container:hover {
  transform: scale(1.02);
  transition: 2s;
}

.product-box-container-hp {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 3rem;
}

.text-product-box-container-hp {
  flex: 50%;
}

.img-product-box-container-hp {
  flex: 10%;
}

.relative-img-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 400px;
    display: flex;
    align-items: stretch;
}

.img-equal-height-hp {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: 100%;
    max-width: 400px;
    position: relative;
    overflow: hidden; 
}

.img-cover-hp {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0.75rem;
}

.top-right-img {
    position: absolute;
    top: -10%;
    left: 10%;
    width: 80px; /* Adjust as needed */
    height: auto;
    z-index: 2;
    box-shadow: rgba(0,0,0, 0.4) 10px 10px inset;
}



.partnership-container {
  /*background: linear-gradient(180deg, rgba(244, 244, 244, 0.6), rgba(244, 244, 244, 0.4)), linear-gradient(120deg, #355C7D 33.47%, rgba(168, 41, 88, 0.8) 160.06%);*/
  background-color: var(--bg-blue);
  backdrop-filter: blur(5px);
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  padding: 1rem;
  border-radius: 10px;
}

.partnership-container:hover {
  transform: scale(1.02);
  transition: 2s;
}

h5 {
  font-family: var(--ff-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  margin-bottom: 2rem;
  line-height: 0.98;
}

.h5-subtitle {
  font-family: var(--ff-secondary);
  font-weight: var(--fw-light);
  line-height: 1.1;
  font-size: var(--fs-20);
}

.invert-colors-h5 {
  color: var(--blue);
}

.a-partnership-container {
  padding: 2rem;
}

.img-partnerships {
  max-width: 250px;
  margin: 0 auto;
}

@media (max-width: 65em) {
  .reports-and-tests-container {
    flex: 50%;
  }

  h5 {
    font-size: var(--fs-25);
  }

  .h5-subtitle {
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
  }
}

@media (max-width: 45em) {
  .reports-and-tests-container {
    flex: 100%;
  }

  .partnership-container {
    flex: 100%;
  }

  .text-product-box-container-hp {
    flex: 100%;
    text-align: center;
  }

  .img-product-box-container-hp {
    max-width: 200px;
    margin: 0 auto;
  }

  h5 {
    font-size: var(--fs-25);
  }

  .h5-subtitle {
    font-size: var(--fs-16);
  }

  .img-partnerships {
    max-width: 200px;
  }
}

/* fim dos products */

/* cta */

.cta-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  max-width: 90%;
  margin: 4rem auto 2rem;
  gap: 1rem;
}

.no-padding {
  padding: unset;
}

.no-padding-top {
  padding-top: unset;
}

.email-and-select {
  display: flex;
  flex-flow: row wrap;
  flex-shrink: 1;
  gap: 1rem;
}

.dropdown-edit {
  padding: 0.5rem 1.5rem;
  font-family: var(--ff-primary);
  color: var(--light-grey);
  border: 1px solid var(--light-grey);
  border-radius: 5px;
}

.email-input-edit {
  padding: 0.5rem 1rem;
  color: var(--light-grey);
  border: 1px solid var(--light-grey);
  border-radius: 5px;
  width: 21em;
}

.email-input-edit::placeholder {
  font-family: var(--ff-primary);
  font-size: var(--fs-14);
}

.submit-drop-and-email {
  cursor: pointer;
  padding: 0.5rem 4rem;
  border-style: none;
  font-family: var(--ff-primary);
  font-weight: var(--fw-semi-bold);
  border-radius: 5px;
  color: white;
  background-color: var(--blue);
  text-transform: uppercase;
}

.submit-drop-and-email:hover {
  box-shadow: 0px 4px 20px 4px rgba(60, 119, 169, 0.4);
}

@media (max-width: 65em) {
  .cta-container {
    gap: 2rem;
  }
}

@media (max-width: 45em) {
  .small-note {
    margin-top: 1rem;
  }
}

/* fim do cta */

/* Consulting Flow */

.au-flow-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    background: var(--bg-blue);
    border-radius: 10px;
    padding: 2rem;
    flex-wrap: wrap;
    overflow-x: auto;
}

.au-flow-step {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem 1.25rem 1rem 1.25rem;
    min-width: 220px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: 0 0.2rem;
    transition: transform 0.3s;
    border: 0.5px solid #fff;
}

    .au-flow-step:hover {
        border: 0.5px solid var(--blue);
        box-shadow: 0 8px 24px rgba(60,119,169,0.08);
    }

.au-flow-title {
    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-18);
    color: var(--smooth-black-text);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.au-flow-desc {
    font-family: var(--ff-secondary);
    font-size: var(--fs-14);
    color: var(--smooth-black-text);
    margin-bottom: 0;
    opacity: 0.7;
}

.au-flow-arrow {
    color: var(--lighter-blue);
    font-size: 1rem;
    margin: 0 0.5rem;
    flex-shrink: 0;
    transition: color 0.2s;
    opacity: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 767.98px) {
    .au-flow-arrow {
        transform: rotate(90deg);
        margin: 0.5rem 0;

    }
}

@media (max-width: 991.98px) {
    .au-flow-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .au-flow-step {
        margin: 0.5rem 0;
        max-width: 100%;
        min-width: 0;
    }

}

/* Consulting flow: md-xxl screens */

.au-flow-grid-container {
    background: var(--bg-blue);
    border-radius: 10px;
    padding: 2rem 1rem;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
}

@media (min-width: 991.98px) {
    .au-flow-grid-container {
        width: 70%;
        margin: 0 auto;
    }
}

.au-flow-grid-row {
    min-height: 1px;
}


.au-flow-grid-step {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem 1.25rem 1rem 1.25rem;
    min-width: 220px;
    max-width: 260px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border: 0.5px solid #fff;
    transition: box-shadow 0.3s, border 0.3s;
    margin: 0;
}

    .au-flow--grid-step:hover {
        border: 0.5px solid var(--blue);
        box-shadow: 0 8px 24px rgba(60,119,169,0.08);
    }

.au-flow-arrow-vertical {
    flex-direction: column;
    height: 40px;
}
/* academy homepage */

.index-academy-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  width: 90%;
  margin: 0rem auto;
  gap: 3rem;
  padding: 8rem 2rem;
  border-radius: 10px;
}
/*
  .index-academy-bg {
    background-image: url(img/bg-academy-1-b&w.svg);
    background-repeat: no-repeat;
    background-size: 100rem;
    background-position-x: 50rem;
    background-position-y: -7rem;
  }
  */

.text-academy-container {
  flex: 50%;
  flex-grow: 0;
}

.text-academy-container p {
  margin-bottom: 2rem;
  font-size: var(--fs-18);
  max-width: 90%;
  font-weight: var(--fw-regular);
  color: var(--light-grey);
  line-height: 1.1;
}

.small-logo {
  max-width: 130px;
  margin-bottom: 2rem;
}

.text-academy-container p {
  color: var(--smooth-black-text);
  font-weight: var(--fw-light);
}

.index-acad-box-wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}

.index-acad-box {
  border: 1px solid black;
  border-radius: 5px;
  flex: 25%;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  gap: 1rem;
}

.index-acad-box p {
  font-size: var(--fs-14);
  margin: 0.5rem;
  text-align: center;
}

.index-acad-box p.bold-text {
  font-weight: var(--fw-bold);
}

.index-acad-sign-up-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.index-acad-sign-up-wrapper img {
  max-width: 350px;
  position: relative;
  border-radius: 10px;
  border: 1px solid black;
}

.index-acad-sign-up-container {
  border: 1px solid black;
  border-radius: 10px;
  max-width: 350px;
  padding: 2rem;
  background-color: var(--light-yellow);
  position: relative;
  margin-top: -30rem;
  margin-left: -20rem;
  margin-right: 18rem;
}

.check-the-programs-button {
  padding: 0.5rem 0rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--ff-secondary);
  font-size: var(--fs-16);
  font-weight: var(--fw-semi-bold);
  border-style: none;
  margin-top: 2rem;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: center;
  background-color: transparent;
}

.check-the-programs-button:hover {
  text-decoration: underline;
}

@media (max-width: 85em) {
}

@media (max-width: 65em) {
  .index-academy-container {
    width: 95%;
  }

  /*
    .index-academy-bg {
      background-position-x: 35rem;
    }*/

  .text-academy-container {
    flex: 30%;
  }
}

@media (max-width: 57em) {
  .sign-up-button {
    margin-right: unset;
  }
}

/* site-map & location */

.site-map {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 6rem;
}

.site-map-left {
  flex: 40%;
  flex-grow: 0;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  gap: 2rem;
}

.questools-logo-bw {
  max-width: 50%;
}

.site-map-text {
  font-size: var(--fs-14);
  color: var(--smooth-black-text);
  font-weight: var(--fw-light);
  text-align: justify;
}

.site-map-list {
  flex: 50%;
}

.site-map-list-wrapper {
  display: flex;
  flex-flow: row wrap;
}

.site-map-1st-column,
.site-map-2nd-column,
.site-map-3rd-column {
  flex: 15%;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}

.site-map-1st-column ul li a,
.site-map-2nd-column ul li a,
.site-map-3rd-column ul li a {
  color: var(--smooth-black-text);
  text-decoration: none;
  font-weight: var(--fw-semi-bold);
  font-family: var(--ff-secondary);
  font-size: var(--fs-14);
}

.site-map-1st-column ul li ul li a,
.site-map-2nd-column ul li ul li a,
.site-map-3rd-column ul li ul li a {
  font-weight: var(--fw-light);
}

.site-map-list li {
  margin: 5px;
}

@media (max-width: 65em) {
  .site-map {
    width: 95%;
  }
}

@media (max-width: 60em) {
  .site-map {
    gap: 2rem;
  }

  .site-map-left {
    align-items: center;
    flex: 100%;
  }

  .site-map-list li {
    text-align: center;
  }

  .site-map-list {
    flex: 100%;
  }

  .questools-logo-bw {
    max-width: 70%;
  }

  .site-map-left p {
    text-align: center;
    max-width: 90%;
  }

  .site-map-1st-column,
  .site-map-2nd-column,
  .site-map-3rd-column {
    flex: 30%;
  }
}

@media (max-width: 57em) {
  .questools-logo-bw {
    max-width: 300px;
  }

  .site-map {
    margin-bottom: 5rem;
  }
}

.location-container {
  width: 90%;
  margin: 0 auto;
}

.location-grid {
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
}

.location {
  padding: 1.5rem 3.25rem 1.5rem 3.25rem;
}

.location p {
  font-size: var(--fs-14);
  text-align: center;
}

p.city {
  font-weight: var(--fw-semi-bold);
}

@media (max-width: 85em) {
  .location {
    flex: 20%;
  }
}

@media (max-width: 60em) {
  .location-grid {
    justify-content: center;
  }
}

@media (max-width: 45em) {
  .location-container {
    margin-top: 4rem;
  }
}

/* site-map & location fim */

/* Reports, Tests & Partnership Hero */

.products-container {
  display: flex;
  flex-flow: row wrap;
  max-width: 90%;
  margin: 0 auto;
  gap: 6rem;
}

.left-products-container {
  flex: 27%;
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.right-products-container {
  flex: 65%;
  flex-grow: 0;
}

.left-products-img {
  border-radius: 20px;
  position: relative;
}

.percent-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  margin-top: 29rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  width: 23%;
}

.percent-card-percentage {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
}

.percentage {
  font-family: var(--ff-primary);
  font-weight: var(--fw-semi-bold);
  font-size: var(--fs-32);
  padding-left: 1rem;
  color: var(--smooth-black-text);
}

.small-arrow-up {
  color: #3ecc77;
  margin-top: 1rem;
}

.percent-card-text {
  font-weight: var(--fw-semi-bold);
  max-width: 100%;
  line-height: 1;
  padding-right: 0;
  color: var(--smooth-black-text);
}

.products-tag {
  cursor: pointer;
  background-color: rgba(60, 119, 169, 0.4);
  padding: 0.6rem 0.8rem;
  border-style: none;
  color: white;
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
  border-radius: 5px;
  margin-right: 0.5rem;
  margin-top: 4rem;
}

.reports-hero-title {
  margin: 1rem 0rem;
}

.h1-subtitle {
  font-family: var(--ff-secondary);
  font-size: var(--fs-25);
  font-weight: var(--fw-light);
  color: var(--light-grey);
  line-height: 0.98;
  max-width: 60%;
}

.align-left {
  margin: 1rem 6rem;
  border-color: rgba(60, 119, 169, 0.4);
  height: 140px;
}

.scroll-text-button-inline {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  color: var(--lighter-blue);
}

@media (max-width: 85em) {
  .products-container {
    gap: 5rem;
  }

  .left-products-container {
    flex-shrink: 1;
    height: fit-content;
  }

  .left-products-img {
    max-height: 500px;
  }

  .percent-card {
    position: unset;
    margin: -5rem auto 0.5rem;
    width: fit-content;
  }

  .right-products-container {
    flex-shrink: 1;
    flex: 100%;
    margin: 0 auto;
  }

  .h1-subtitle {
    font-size: var(--fs-20);
    text-align: center;
    margin: 0 auto;
  }

  .buttons-inline {
    margin: 0 auto;
    text-align: center;
    height: fit-content;
    max-width: 90%;
  }

  .products-tag {
    margin: 0.2rem 0;
  }

  .align-left {
    margin: 1rem auto;
  }

  .scroll-text-button-inline {
    justify-content: center;
  }
}

/* fim da página de reports, testes, partnership*/

/* Reports dedicated page */

.single-report-hero {
  width: 90%;
  margin: 2rem auto 5rem;
}

.tag-container-report { 
  border-radius: 10px;
  width: fit-content;
  padding: 0.5rem;
  padding-left:1rem;
  padding-right: 1rem;
  text-align: center;
  margin-bottom: 1rem;
  font-family: var(--ff-primary);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
}

.single-report-hero-title {
  max-width: 50%;
  font-weight: var(--fw-semi-bold);
  font-size:var(--fs-32);
  color: var(--smooth-black-text);
}

@media (max-width: 767.98px) {
    .single-report-hero-title {
        max-width: 80%;
        font-size: var(--fs-25);
    }
}

.single-report-hero-subtitle {
    color: var(--light-grey);
    max-width: 55%;
}

.two-buttons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 3rem 0 0;
  align-items: center;
}


.button-text-icon {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border: none;
    background-color: var(--lighter-blue);
    border-radius: 10px;
    color: white;
    font-family: var(--ff-secondary);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-16);
}

.button-no-bg-blue {
    cursor: pointer;
    background-color: var(--bg-blue);
    color: var(--lighter-blue);
    font-family: var(--ff-secondary);
    font-weight: var(--fw-semi-bold);
    border: none;
    font-size: var(--fs-16);
    padding: 0.5rem 1rem;
    border-radius: 10px;
}

.two-even-images {
  width: 90%;
  margin: 0 auto 5rem;
  display: flex;
  flex-flow: row wrap;
  gap: 2rem;
}

.grey-placeholder {
  background-color: var(--bg-grey);
  height: 500px;
  flex: 45%;
  border-radius: 10px;
}

.section-title-and-button {
  width: 90%;
  margin: 0 auto 2rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
}

.report-goals-title {
  font-weight: var(--fw-bold);
  color: var(--smooth-black-text);
  font-size: var(--fs-32);
  font-family: var(--ff-secondary);
}

.report-goals-subtitle {
  color: var(--light-grey);
  max-width: 60%;
}

.section-top-button-and-tags {
  display: flex;
  flex-flow: column wrap;
  gap: 1rem;
  align-items: flex-end;
}

.rounded-button-blue {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: none;
  background-color: var(--lighter-blue);
  color: white;
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
}

.small-button-tags {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}

.small-grey-text {
  color: var(--light-grey);
  font-size: var(--fs-12);
}

.report-goals-wrapper {
  width: 90%;
  margin: 0 auto 5rem;
  background-color: var(--bg-grey);
  border-radius: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 2.5rem 3rem;
}

.goal-column-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.goal-title-and-icon-box {
  display: flex;
  gap: 2rem;
  background-color: white;
  border-radius: 30px;
}

.goal-title-box {
  padding: 0.5rem 1rem;
}

.goal-title {
  font-weight: var(--fw-semi-bold);
}

.goal-icon-box {
  background-color: var(--lighter-blue);
  width: 40px;
  height: 40px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goal-achiever-box {
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  /*width: 219.58px;*/
  width: 250px;
  border-radius: 10px;
}

.goal-achiever-title-wrapper {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.8rem;
}

.side-colored-slash {
  width: 10px;
  height: 48px;
  background-color: var(--bg-blue);
  border-radius: 5px;
}

.goal-achiever-title {
  font-weight: var(--fw-bold);
}

.goal-achiever-subtitle {
  font-size: var(--fs-14);
}

.goal-achiever-img-placeholder {
  background-color: var(--light-grey);
  border-radius: 10px;
  height: 100px;
}

.goal-achiever-end-slash {
  height: 10px;
  background-color: var(--bg-grey);
  border-radius: 10px;
}

.report-faqs-wrapper {
  width: 90%;
  margin: 0 auto 5rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.report-faqs-text {
  flex: 45%;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.report-faqs-accordion {
  flex: 55%;
  flex-grow: 0;
}

.no-bg-blue {
  cursor: pointer;
  margin-top: 2rem;
  border: none;
  padding: 0.5rem 0;
  background-color: transparent;
  color: var(--lighter-blue);
  font-size: var(--fs-16);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-bold);
}

.faqs-report-container {
  border-bottom: 1px solid var(--light-grey);
  margin-bottom: 1rem;
  padding: 1rem;
  position: relative;
}

.faqs-report-label {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.faqs-report-content p {
  font-size: var(--fs-14);
  color: var(--light-grey);
}

.img-text-two-columns {
  display: flex;
  flex-flow: row wrap;
  width: 90%;
  margin: 0 auto 5rem;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
}

.img-left-column {
  flex: 30%;
  flex-grow: 0;
}

.text-right-column {
  flex: 60%;
  flex-grow: 0;
}

.graphs-card-report {
  border-radius: 10px;
  background-color: var(--bg-blue);
  padding: 1rem 0 0 2rem;
}

/* end of reports dedicated page */

/* ACADEMY */

/* Academy Hero */

.academy-hero-wrapper {
  width: 90%;
  margin: 0 auto;
  padding: 2rem 0;
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  justify-content: space-between;
}

.left-wrapper-academy {
  margin-bottom: 2rem;
  flex: 50%;
}

.right-wrapper-academy {
  flex: 40%;
}

.acad-hero-h1 {
  color: var(--smooth-black-text);
}

.acad-hero-button-1,
.acad-hero-button-2 {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--ff-secondary);
  font-size: var(--fs-16);
  font-weight: var(--fw-semi-bold);
  border-style: none;
  margin-top: 1rem;
}

.acad-hero-button-1 {
  background-color: var(--yellow);
  border: 1px solid black;
}

.acad-hero-button-2 {
  background-color: transparent;
}

.acad-hero-button-2:hover,
.acad-hero-button-1:hover {
  text-decoration: underline;
}

.academy-hero-box-wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: 2rem;
  margin-top: 7rem;
}

.acad-hero-box {
  max-width: 25%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.3);
}

.acad-hero-box-img {
  max-width: 80px;
}

.acad-hero-box p {
  font-size: var(--fs-14);
  text-align: center;
}

.acad-hero-img {
  height: 450px;
  width: auto;
  object-fit: cover;
  margin: 0 auto 1rem;
  border-radius: 10px;
  position: relative;
  border: 1px solid black;
}

.acad-hero-img-and-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.acad-hero-card-1,
.acad-hero-card-2 {
  background-color: rgba(255, 255, 255, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid black;
  padding: 1rem;
  display: flex;
  flex-flow: row nowrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}

.acad-hero-card-1 {
  margin-top: 2rem;
  margin-right: 22rem;
  width: 18%;
}

.acad-hero-card-2 {
  margin-top: 26rem;
  margin-left: 22rem;
  width: 15%;
}

.acad-card-number {
  font-family: var(--ff-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
}

.card-subtitle {
  font-family: var(--ff-secondary);
  font-size: var(--fs-14);
  line-height: 1.1;
}

.right-acad-hero-text {
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.right-acad-hero-title {
  font-weight: var(--fw-semi-bold);
  font-size: var(--fs-18);
}

.right-acad-hero-subtitle {
  font-weight: var(--fw-light);
  max-width: 100%;
}

/* Academy Stats */

.academy-numbers-wrapper {
  width: 90%;
  margin: 3rem auto;
  display: flex;
  flex-flow: row wrap;
  opacity: 0.2;
  gap: 3rem;
  justify-content: center;
}

.acad-number-text-wrapper {
  flex: 15%;
  flex-grow: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.acad-big-number {
  font-size: var(--fs-40);
  font-weight: var(--fw-bold);
  font-family: var(--ff-primary);
}

.acad-big-number-sub {
  font-size: var(--fs-14);
  text-align: center;
  max-width: 90%;
}

/* Academy How Does it Work? */

.acad-section-title {
  font-size: var(--fs-32);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
  text-align: center;
  margin-top: 8rem;
}

.acad-section-subtitle {
  font-size: var(--fs-16);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-light);
  text-align: center;
}

.vertical-tab-wrapper {
  width: 80%;
  margin: 3rem auto 4rem;
}

.tab {
  float: left;
  border: 1px solid #ccc;
  border-radius: 10px 0 0 10px;
  background-color: var(--light-yellow);
  width: 30%;
}

.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 1rem;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-family: var(--ff-primary);
  font-size: var(--fs-20);
  font-weight: var(--fw-semi-bold);
}

.tab button:nth-of-type(1) {
  border-radius: 10px 0 0 0;
}

.tab button:nth-of-type(4) {
  border-radius: 0 0 0 10px;
}

.tab button:hover {
  background-color: var(--mid-yellow);
}

.tab button.active {
  background-color: var(--mid-yellow);
  border: 1px solid black;
}

.tabcontent {
  display: none;
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  border-radius: 0 10px 10px 0;
  width: 70%;
  border-left: none;
  height: 228px;
}

.tab-content-wrapper {
  display: flex;
  flex-flow: row nowrap;
  padding: 2rem;
  align-items: center;
  height: 228px;
}

.tab-content-title {
  font-size: var(--fs-20);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
}

.tab-content-subtitle {
  font-weight: var(--fw-light);
  max-width: 90%;
  margin-top: 0.5rem;
}

.tab-acad-button {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--ff-secondary);
  font-size: var(--fs-16);
  font-weight: var(--fw-semi-bold);
  border-style: none;
  margin-top: 2rem;
  border: 1px solid black;
  background-color: transparent;
}

.tab-acad-button:hover {
  text-decoration: underline;
}

.tab-content-img {
  flex: 30%;
}

.certificate-tab-img {
  max-width: 70%;
  float: right;
}

/* Academy Programs */

.three-even-columns {
  width: 90%;
  margin: 3rem auto;
  display: flex;
  flex-flow: row wrap;
  gap: 2rem;
  justify-content: center;
}

.acad-program-box {
  flex: 25%;
  flex-grow: 0;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border: 1px solid black;
  border-radius: 10px;
}

.acad-program-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
}

.acad-program-button-1,
.acad-program-button-2 {
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--ff-secondary);
  font-size: var(--fs-16);
  font-weight: var(--fw-semi-bold);
  border-style: none;
}

.acad-program-button-1:hover,
.acad-program-button-2:hover {
  text-decoration: underline;
}

.acad-program-button-1 {
  background-color: var(--yellow);
  border: 1px solid black;
  padding: 0.5rem 1rem;
}

.acad-program-button-2 {
  background-color: transparent;
  padding: 1rem;
}

ul.acad-program-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.acad-program-features li {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  font-family: var(--ff-secondary);
  font-size: var(--fs-14);
}

/* Enroll Academy */

.acad-enroll-form-wrapper {
  width: 90%;
  margin: 4rem auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  border: 1px solid black;
  border-radius: 10px;
  padding: 1rem;
  gap: 1rem;
}

.acad-enroll-form-img {
  flex: 30%;
  flex-grow: 0;
  background-color: var(--light-yellow);
}

.acad-enroll-form-img img {
  border-radius: 10px 0 0 10px;
  opacity: 1;
}

.acad-enroll-form {
  flex: 25%;
  border-radius: 0 10px 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.acad-enroll-form-title {
  font-size: var(--fs-32);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
  text-align: center;
}

.acad-enroll-form-subtitle {
  font-size: var(--fs-16);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-light);
  text-align: center;
}

.social-container {
  margin: 20px 0;
}

.social-container a {
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  height: 40px;
  width: 40px;
  color: black;
}

.acad-enroll-form form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.name-input-edit-bigger {
  padding: 0.55rem 1rem;
  border: 1px solid var(--light-grey);
  border-radius: 5px;
  width: 21em;
  font-family: var(--ff-primary);
}

.name-input-edit-bigger::placeholder {
  font-size: var(--fs-14);
}

.acad-submit-edit {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--ff-secondary);
  font-size: var(--fs-16);
  font-weight: var(--fw-semi-bold);
  border-style: none;
  margin-top: 1rem;
  background-color: var(--yellow);
  border: 1px solid black;
}

.acad-submit-edit:hover {
  text-decoration: underline;
}

/* Help Page */

/* FAQS */

.support-title {
  font-size: var(--fs-32);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
  display: flex;
  flex-flow: row nowrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.faqs-wrapper {
  max-width: 80%;
  margin: 0 auto;
}

.faqs-section-title {
  font-size: var(--fs-14);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
}

.accordion {
  cursor: pointer;
  padding: 0.5rem 1rem 1rem;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  color: var(--smooth-black-text);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid var(--bg-grey);
  border-radius: 5px;
  margin: 1rem 0rem;
}

.panel {
  padding: 0.2rem 2rem 1rem;
  background-color: white;
  display: none;
  overflow: hidden;
}

.panel p {
  font-size: var(--fs-14);
  color: var(--light-grey);
}

.faqs-separator {
  width: 100%;
  opacity: 0.1;
}

/* Contact Form */

.contact-support-container {
  width: 80%;
  margin: 0 auto;
  background-color: var(--bg-grey);
  border-radius: 5px;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: space-between;
}

.contact-support-form {
  display: flex;
  flex-flow: column;
  gap: 2rem;
  padding: 3rem 3rem;
  flex: 60%;
}

.support-contacts-container {
  background: var(--gradient-blue-pink-softer);
  border-radius: 0px 5px 5px 0;
  flex: 30%;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  padding: 4rem;
}

.prefix-and-name {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  align-items: stretch;
}

.form-support-subtitle {
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
  font-size: var(--fs-14);
  margin-bottom: 0.5rem;
}

.name-input-edit {
  padding: 0.55rem 1rem;
  border: 1px solid var(--light-grey);
  border-radius: 5px;
  font-family: var(--ff-primary);
}

.name-input-edit::placeholder {
  font-size: var(--fs-14);
}

.textarea-edit {
  border: 1px solid var(--light-grey);
  border-radius: 5px;
  padding: 0.55rem 1rem;
}

.submit-support-form-edit {
  cursor: pointer;
  padding: 0.55rem 2rem;
  border: 1px solid var(--light-grey);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-semi-bold);
  color: var(--smooth-black-text);
  background-color: white;
  border-radius: 5px;
}

.phone-contact {
  color: white;
  font-family: var(--ff-secondary);
  font-size: var(--fs-32);
  font-weight: var(--fw-semi-bold);
  margin-bottom: 2rem;
  text-align: center;
}

.phone-number-columns {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

.support-phone-img {
  max-width: 30%;
  margin-bottom: 2rem;
}

.phone-number-edit,
.book-a-call-submit {
  padding: 0.55rem 1rem;
  border-radius: 5px;
  border: 1px solid var(--light-grey);
}

.book-a-call-submit {
  cursor: pointer;
  font-family: var(--ff-secondary);
  font-size: var(--fs-16);
  font-weight: var(--fw-semi-bold);
  margin-bottom: 2.5rem;
  background-color: transparent;
  color: white;
}

.book-a-call-submit:hover {
  background-color: white;
  color: var(--blue);
}

/* ABOUT PAGE */

.about-img-glued {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: 0 2rem 2rem 0; /* match your box style */
    max-width: 100%;
}

.card-signature-hover {
    transition: transform 0.22s cubic-bezier(.4,0,.2,1), border-color 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.22s cubic-bezier(.4,0,.2,1);
    border-color: #e3e6ef;
}

    .card-signature-hover:hover,
    .card-signature-hover:focus {
        transform: translateY(-6px) scale(1.02);
        border-color: var(--lighter-blue);
        box-shadow: 0 8px 24px rgba(60,119,169,0.08);
        z-index: 2;
    }

/* Mobile Menu */
/* Mobile Drawer Styles */
.mobile-nav-toggle {
    position: absolute;
    top: 0rem;
    right: 0.5rem;
    z-index: 120;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: right 0.3s;
    display: block;
}

.icon-hamburger, .icon-close {
    transition: opacity 0.3s, transform 0.3s;
    display: inline-block;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: -100vw;
    width: fit-content;
    max-width: fit-content;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 16px rgba(0,0,0,0.12);
    z-index: 110;
    transition: right 0.4s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    padding-top: 4rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

    .mobile-drawer.open {
        right: 0;
    }

.mobile-drawer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

    .mobile-drawer-list .menu-item a,
    .mobile-drawer-list .menu-item button {
        font-size: 1.1rem;
        font-family: var(--ff-secondary);
        color: var(--blue);
        text-decoration: none;
        font-weight: var(--fw-semi-bold);
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        padding: 0.5rem 0;
    }

        .mobile-drawer-list .menu-item button.quote-standard-btn {
            background-color: var(--lighter-blue);
            font-family: var(--ff-primary);
            color: #fff;   
            border-radius: 10px;
            font-weight: var(--fw-bold);  
            margin-top: 1rem;
        }


.mobile-drawer .sub-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    background: none;
}


.mobile-drawer .sub-menu-item a {
    font-size: 1rem;
    color: var(--lighter-blue);
    background: none;
    border: none;
}


/* Mobile submenu: no border, match mobile menu items, add left padding */
.mobile-drawer .sub-menu {
    background: none !important;
    box-shadow: none !important;
}

.mobile-drawer .sub-menu-list .sub-menu-item {
    background: none !important;
}

.mobile-drawer .sub-menu-item a {
    color: var(--blue);
    font-family: var(--ff-secondary);
    font-weight: var(--fw-semi-bold);
    padding: 0.5rem 0;
    background: none;
    border: none;
    text-align: left;
    display: block;
}


@media (min-width: 992px) {
    .mobile-nav-toggle,
    .mobile-drawer {
        display: none !important;
    }
}

/* Consulting Page */

.tag-container-report {
    background-color: var(--bg-blue);
    border-radius: 10px;
    width: fit-content;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-family: var(--ff-primary);
    font-size: var(--fs-16);
    color: var(--lighter-blue);
    font-weight: var(--fw-bold);
}

.img-equal-height {
    height: 100%;
    min-height: 250px; /* or your preferred minimum */
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

    .img-equal-height img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

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

.au-numbers-wrapper-box {
    border-radius: 10px;
    background-color: var(--bg-blue);
    padding: 2rem;
}

@media (max-width: 767.98px) {
    .au-numbers-wrapper-box {
        padding: 1rem;
    }    
}

.au-numbers-box {
    border-radius: 10px;
    background-color: white;
    padding: 1rem 2rem;
}

    .au-numbers-box:hover {
        box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.06);
    }

.au-number {
    font-size: var(--fs-50);
    font-weight: var(--fw-bold);
    font-family: var(--ff-primary);
    margin: 0 auto;
    line-height: 1.3;
}

.plus-size {
    font-size: var(--fs-20);
}

.au-number-label {
    font-family: var(--ff-secondary);
    margin: 0 auto;
    font-size: var(--fs-14);
}

.cta-img-wrapper,
.cta-content-wrapper {
    max-height: 460px; /* Adjust as needed */
    display: flex;
    align-items: stretch;
}

.cta-img-wrapper {
    flex: 1 1 0;
}

.cta-content-wrapper {
    flex: 1 1 0;
    border-radius: 1rem;
}

.cta-img-rounded {
    border-radius: 1rem !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive stacking for mobile */
@media (max-width: 767.98px) {
    .cta-img-wrapper,
    .cta-content-wrapper {
        min-height: 180px;
    }

    .cta-content-wrapper {
        margin-top: 1rem;
    }
}

.contact-cta-button {
    border: 1px solid var(--blue);
}

/* Reports Page */
/* Fixed size for all report image containers */
.report-img-container {
    width: 100%;
    height: 360px;
    min-width: 220px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Unique backgrounds for each report */
.report-bg-360 {
    background: #fff5f5;
    background: linear-gradient(180deg, rgba(255, 245, 245, 1) 0%, rgba(245, 215, 226, 1) 100%);
}

.report-bg-720 {
    background: linear-gradient(135deg, #eaf1f9 0%, #b3d8ff 100%);
}

.report-bg-group {
    background: #f2f5ff;
    background: linear-gradient(20deg, rgba(242, 245, 255, 1) 0%, rgba(199, 224, 255, 0.39) 100%);
}

.report-bg-teams {
    background: #e3dede;
    background: linear-gradient(145deg,rgba(227, 222, 222, 1) 0%, rgba(192, 192, 192, 0) 100%);
}

.report-bg-climate {
    background: linear-gradient(135deg, #f6e2e5 0%, #eaf1f9 100%);
}

.report-bg-wellbeing {
    background: #fff7f2;
    background: linear-gradient(20deg, rgba(255, 247, 242, 1) 0%, rgba(255, 207, 145, 0.39) 100%);
}

/* Image scaling and offset for each report */
.report-img-360 {
    position: absolute;
    width: 140%;
    left: -15%;
    top: 20%;
    transform: scale(1.1);
    max-width: none;
    height: auto;
}

.report-img-720 {
    position: absolute;
    width: 140%;
    left: 5%;
    top: 0;
    transform: scale(1.4);
    max-width: none;
    height: auto;
}

.report-img-group {
    position: absolute;
    width: 120%;
    left: -5%;
    top: 0%;
    transform: scale(1.2);
    max-width: none;
    height: auto;
}

.report-img-teams {
    position: absolute;
    width: 110%;
    left: 0;
    top: -5%;
    transform: scale(1.02);
    max-width: none;
    height: auto;
}

.report-img-climate {
    position: absolute;
    width: 100%;
    left: 0;
    top: 10%;
    transform: scale(1.4);
    max-width: none;
    height: auto;
}

.report-img-wellbeing {
    position: absolute;
    width: 130%;
    left: -10%;
    top: 0%;
    transform: scale(1.15);
    max-width: none;
    height: auto;
}

/* Responsive adjustments for mobile */
@media (max-width: 767.98px) {
    .report-img-container {
        max-width: 100%;
        height: 280px;
        min-height: 280px;
    }
}

/* Utility classes */

.fs-60 {
    font-size: var(--fs-60);
}

.fs-50-responsive {
  font-size: var(--fs-50);
}

.fs-45 {
  font-size: var(--fs-45);
}

.fs-40 {
  font-size: var(--fs-40);
}

.fs-40-responsive {
    font-size: var(--fs-40);
}

.fs-32 {
  font-size: var(--fs-32);
}

.fs-32-responsive {
  font-size: var(--fs-25);
}

.fs-25 {
  font-size: var(--fs-25);
}

.fs-25-responsive {
    font-size: var(--fs-20);
}

.fs-20 {
  font-size: var(--fs-20);
}

.fs-20-responsive {
    font-size: var(--fs-18);
}

.fs-18 {
  font-size: var(--fs-18);
}

.fs-18-responsive {
    font-size: var(--fs-16);
}

.fs-14 {
  font-size: var(--fs-14);
}

.fs-12 {
  font-size: var(--fs-12);
}

.fs-10 {
  font-size: var(--fs-10);
}

.fs-8 {
    font-size: var(--fs-8);
}

.mw-90 {
  max-width: 90%;
}

.text-justify {
  text-align: justify;
}

.sm-icon {
  max-width: 60px;
  object-fit: contain;
}

.grey-hl {
  color: black;
  -webkit-filter: opacity(10%);
}

.border-blue {
    border-right: 2px solid var(--lighter-blue);
}

.drop-shadow-below {
  box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.13);
}

.drop-shadow-up {
  box-shadow: 0px -4px 4px 1px rgba(0, 0, 0, 0.13);
}

.card-shadow {
    box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.13);
}

.lang-active {
    opacity: 100%;
}

.lang-inactive {
    opacity: 50%;
}

.line-height {
  line-height: 0.98;
}

.blue-background {
  background-color: #0a4364;
}

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

.mid-pink-bg {
  background-color: var(--mid-pink);
}

.yellow-bg {
  background-color: var(--yellow);
}

.mid-yellow-bg {
  background-color: var(--mid-yellow);
}

.smooth-black-bg {
  background-color: var(--smooth-black-text);
}

.no-border {
  border-style: none;
}

a {
  text-decoration: none;
}

.no-max-width {
  max-width: unset;
}

.max-width-60 {
  max-width: 60%;
}

.min-width-80px {
    min-width: 80px;
}

.max-width-200px {
    max-width: 200px;
}

.max-width-80px {
    max-width: 80px;
}

.gradient-pink-text {
  background: linear-gradient(
    144.24deg,
    rgba(156, 17, 53, 0.7) 6.44%,
    rgba(156, 92, 17, 0.15) 170.28%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-title {
  background: linear-gradient(93.56deg, #a82958 -5%, #dc8173 113.2%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-icon {
  background: linear-gradient(93.56deg, #a82958 -15.83%, #dc8173 130%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bold-text {
  font-weight: var(--fw-bold);
}

.semi-bold-text {
  font-weight: var(--fw-semi-bold);
}

.regular-text {
  font-weight: var(--fw-regular);
}

.light-text {
  font-weight: var(--fw-light);
}

.white-text {
  color: white;
}

.light-blue-text {
  color: var(--lighter-blue);
  opacity: 0.7;
}

.smooth-black-text {
  color: var(--smooth-black-text);
}

.lighter-blue-text {
  color: var(--lighter-blue);
}

.text-light-grey {
  color: var(--light-grey);
}

.blue-text {
  color: var(--blue);
}

.black-text {
  color: var(--black-text);
}

.pink-text {
  color: var(--pink);
}

.mid-pink-text {
  color: var(--mid-pink);
}

.light-pink-text {
  color: var(--light-pink);
}

.yellow-text {
  color: var(--yellow);
}

.mid-yellow-text {
  color: var(--mid-yellow);
}

.green-text {
  color: #3ecc77;
}

.centered-text {
  text-align: center;
}

.small-text {
  font-size: var(--fs-14);
}

.padding-block-900 {
  padding-block: var(--size-900);
}

.padding-block-700 {
  padding-block: var(--size-700);
}

.padding-block-300 {
  padding-block: var(--size-300);
}

.padding-block-400 {
  padding-block: var(--size-400);
}

.padding-block-500 {
  padding-block: var(--size-500);
}

.padding-block-600 {
  padding-block: var(--size-600);
}

.padding-block-700 {
  padding-block: var(--size-700);
}

.padding-block-1000 {
  padding-block: var(--size-1000);
}

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

/* Icons */

.md-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Backgrounds */

.bg-gradient-quest {
  background-color: var(--gradient-blue-pink);
}

.bg-gradient-quest-soft {
  background-color: var(--gradient-blue-pink-softer);
}

.grey-background {
  background-color: var(--bg-grey);
}

.bg-light-blue {
  background-color: var(--light-blue);
}

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

.blue-border {
  border: 1px solid var(--blue);
}

.footer-background-color {
  background-color: #8d99ae;
}

.hero-background-color {
  background-color: #fbfcff;
}

.light-yellow-bg {
  background-color: var(--light-yellow);
}

.light-pink-bg {
  background-color: var(--light-pink);
}

.lighter-pink-bg {
  background-color: var(--lighter-pink);
}

.fw-black {
  font-weight: var(--fw-black);
}

.fw-bold {
  font-weight: var(--fw-bold);
}

.fw-semi-bold {
  font-weight: var(--fw-semi-bold);
}

.fw-regular {
  font-weight: var(--fw-regular);
}

.fw-light {
  font-weight: var(--fw-light);
}

.ff-primary {
  font-family: var(--ff-primary);
}

.ff-secondary {
  font-family: var(--ff-secondary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.display-small-none {
  display: none;
}


@media (max-width: 60em) {
    .fs-50-responsive {
        font-size: var(--fs-40);
    }

    .fs-40-responsive {
        font-size: var(--fs-32);
    }

    .fs-32-responsive {
        font-size: var(--fs-25);
    }

    .fs-25-responsive {
        font-size: var(--fs-20);
    }

    .fs-20-responsive {
        font-size: var(--fs-18);
    }

    .fs-18-responsive {
        font-size: var(--fs-16);
    }

    .do-not-display-mobile {
        display: none;
    }
}

@media (max-width: 32em) {
    .fs-50-responsive {
        font-size: var(--fs-32);
    }

    .fs-40-responsive {
        font-size: var(--fs-25);
    }

    .fs-25-responsive {
        font-size: var(--fs-18);
    }

    .mw-90 {
        max-width: 100%;
    }
}


/* ===============
   Contact Page 
   =============== */

/* Card wrapper */
.cf-card {
    background: var(--bg-blue);
    background-image: url('./img/Group 1171275291 (3).webp');
    background-size: cover;
    background-blend-mode: soft-light;
    border: 1px solid #d3e4f0;
    border-radius: 1.25rem;
    padding: 2.25rem 2.25rem 1.75rem;
    box-shadow: 0 4px 24px rgba(13,89,133,0.08), 0 1px 4px rgba(13,89,133,0.04);
}

.cf-card.cf-consulting, .cf-card.cf-reports {
    border-radius: 0rem 1.25rem 1.25rem 0rem;
}

.cf-consulting-img, .cf-reports-img {
    border-radius: 1.25rem 0rem 0rem 1.25rem;
}

@media (max-width: 767.98px) {

    .cf-card.cf-consulting, .cf-card.cf-reports {
        border-radius: 1.25rem;
    }

    .cf-consulting-img, .cf-reports-img {
        border-radius: 1.25rem;
    }
}

/* Section spacing */
.cf-section {
    margin-bottom: 0.25rem;
}

/* Section label */
.cf-section-label {
    font-family: var(--ff-secondary);
    font-size: var(--fs-12);
    font-weight: var(--fw-semi-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--blue);
    opacity: 0.75;
    margin-bottom: 0.875rem;
}

/* Divider between sections */
.cf-divider {
    height: 1px;
    background: rgba(13,89,133,0.14);
    margin: 1.5rem 0 1.25rem;
}

/* ---- Radio tiles ---- */
.cf-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Horizontal on lg+ */
@media (min-width: 992px) {
    .cf-radio-group {
        flex-direction: row;
        gap: 0.75rem;
    }

    .cf-radio-tile {
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1.125rem 1rem 1rem 1rem;
    }

    .cf-radio-indicator {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        order: unset;
        align-self: unset;
        margin-bottom: unset;
    }
}

.cf-radio-tile {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    border: 1.5px solid rgba(255,255,255,0.65);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    background: rgba(255,255,255,0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    position: relative;
}

    .cf-radio-tile:hover {
        border-color: rgba(60,119,169,0.5);
        background: rgba(255,255,255,0.72);
    }

/* Hide native radio */
.cf-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom radio circle */
.cf-radio-indicator {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    border: 2px solid #b3c9db;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
}

    .cf-radio-indicator::after {
        content: '';
        width: 0.44rem;
        height: 0.44rem;
        border-radius: 50%;
        background: transparent;
        transition: background 0.15s;
    }

/* Checked state */
.cf-radio-input:checked ~ .cf-radio-indicator {
    border-color: var(--blue);
    background: var(--blue);
}

    .cf-radio-input:checked ~ .cf-radio-indicator::after {
        background: #fff;
    }

.cf-radio-tile:has(.cf-radio-input:checked) {
    border-color: var(--blue);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 0 3px rgba(13,89,133,0.1);
}

/* Radio icon (FontAwesome) */
.cf-radio-icon {
    display: block;
    font-size: 1.15rem;
    color: var(--lighter-blue);
    margin-bottom: 0.2rem;
    line-height: 1;
}

/* Radio text content */
.cf-radio-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}

.cf-radio-title {
    font-family: var(--ff-secondary);
    font-size: var(--fs-14);
    font-weight: var(--fw-semi-bold);
    color: #1a3a5d;
    line-height: 1.2;
}

.cf-radio-desc {
    font-family: var(--ff-secondary);
    font-size: var(--fs-12);
    color: #5a7a96;
    line-height: 1.35;
}

/* ---- Field & label ---- */
.cf-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cf-label {
    font-family: var(--ff-secondary);
    font-size: var(--fs-12);
    font-weight: var(--fw-semi-bold);
    color: #2c4f6a;
    line-height: 1.2;
}

.cf-required {
    color: var(--pink);
    font-size: var(--fs-12);
}

.cf-optional {
    font-size: var(--fs-12);
    font-weight: var(--fw-regular);
    color: #7fa3bc;
}

/* ---- Input wrapper & icon ---- */
.cf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cf-input-icon {
    position: absolute;
    left: 0.75rem;
    font-size: 0.8rem;
    color: #7fa3bc;
    pointer-events: none;
    z-index: 1;
}

/* ---- Text / email / tel / url inputs ---- */
.cf-input {
    width: 100%;
    padding: 0.5625rem 0.75rem 0.5625rem 2.25rem;
    font-family: var(--ff-secondary);
    font-size: var(--fs-14);
    color: #1a3a5d;
    background: rgba(255,255,255,0.82);
    border: 1.5px solid rgba(255,255,255,0.75);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.5;
}

    .cf-input::placeholder {
        color: #9bbacb;
        font-weight: var(--fw-regular);
    }

    .cf-input:focus {
        border-color: var(--lighter-blue);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(60,119,169,0.14);
    }

/* ---- Select – fully custom, matches inputs exactly ---- */
.cf-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .cf-select-wrap .cf-input-icon {
        left: 0.75rem;
        z-index: 1;
        pointer-events: none;
    }

.cf-select {
    width: 100%;
    padding: 0.5625rem 2.5rem 0.5625rem 2.25rem;
    font-family: var(--ff-secondary);
    font-size: var(--fs-14);
    color: #1a3a5d;
    background: rgba(255,255,255,0.82);
    border: 1.5px solid rgba(255,255,255,0.75);
    border-radius: 0.5rem;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    line-height: 1.5;
}

    .cf-select:focus {
        border-color: var(--lighter-blue);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(60,119,169,0.14);
    }

    .cf-select option {
        background: #fff;
        color: #1a3a5d;
        font-family: var(--ff-secondary);
    }

.cf-select-arrow {
    position: absolute;
    right: 0.75rem;
    font-size: 0.7rem;
    color: #7fa3bc;
    pointer-events: none;
    z-index: 1;
}

/* ---- Textarea ---- */
.cf-textarea {
    width: 100%;
    padding: 0.5625rem 0.75rem;
    font-family: var(--ff-secondary);
    font-size: var(--fs-14);
    color: #1a3a5d;
    background: rgba(255,255,255,0.82);
    border: 1.5px solid rgba(255,255,255,0.75);
    border-radius: 0.5rem;
    outline: none;
    resize: vertical;
    min-height: 88px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    line-height: 1.5;
}

    .cf-textarea::placeholder {
        color: #9bbacb;
        font-weight: var(--fw-regular);
    }

    .cf-textarea:focus {
        border-color: var(--lighter-blue);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(60,119,169,0.14);
    }

/* ---- Validation error messages ---- */
.cf-field-error {
    font-family: var(--ff-secondary);
    font-size: var(--fs-12);
    color: var(--pink);
    margin: 0.25rem 0 0;
    line-height: 1.3;
}

.cf-input.cf-error,
.cf-select.cf-error,
.cf-textarea.cf-error {
    border-color: var(--pink) !important;
    box-shadow: 0 0 0 3px rgba(156,17,53,0.1) !important;
    background: #fff !important;
}

/* ---- Footer ---- */
.cf-footer {
    margin-top: 0.5rem;
}

.cf-disclaimer {
    font-family: var(--ff-secondary);
    font-size: var(--fs-10);
    color: #5a7a96;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.cf-disclaimer-body {
    font-weight: var(--fw-regular);
}

.cf-footer-actions {
    display: flex;
    justify-content: flex-end;
}

.cf-submit-btn {
    font-family: var(--ff-primary);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.65rem 2rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

    .cf-submit-btn:hover {
        background: var(--lighter-blue);
        box-shadow: 0 4px 14px rgba(13,89,133,0.22);
        transform: translateY(-1px);
    }

/* ---- Custom listbox (select replacement) ---- */
.cf-listbox {
    position: relative;
}

.cf-listbox-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.5625rem 2.5rem 0.5625rem 2.25rem;
    font-family: var(--ff-secondary);
    font-size: var(--fs-14);
    color: #9bbacb;
    background: rgba(255,255,255,0.82);
    border: 1.5px solid rgba(255,255,255,0.75);
    border-radius: 0.5rem;
    outline: none;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    line-height: 1.5;
    position: relative;
}

    .cf-listbox-trigger:focus {
        border-color: var(--lighter-blue);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(60,119,169,0.14);
    }

    .cf-listbox-trigger .cf-input-icon {
        position: absolute;
        left: 0.75rem;
        font-size: 0.8rem;
        color: #7fa3bc;
        pointer-events: none;
    }

.cf-listbox-value {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cf-listbox-value--selected {
    color: #1a3a5d;
}

.cf-listbox-arrow {
    position: absolute;
    right: 0.75rem;
    font-size: 0.7rem;
    color: #7fa3bc;
    pointer-events: none;
}

.cf-listbox--open .cf-listbox-arrow {
    transform: rotate(180deg);
}

.cf-listbox-options {
    display: none;
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #d3e4f0;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(13,89,133,0.1), 0 2px 6px rgba(13,89,133,0.06);
    padding: 0.25rem;
    margin: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
}

.cf-listbox--open .cf-listbox-options {
    display: block;
    animation: cfListboxIn 0.14s ease;
}

@keyframes cfListboxIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cf-listbox-option {
    padding: 0.5rem 0.75rem;
    font-family: var(--ff-secondary);
    font-size: var(--fs-14);
    color: #1a3a5d;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    user-select: none;
}

    .cf-listbox-option:hover {
        background: var(--bg-blue);
        color: var(--blue);
    }

.cf-listbox-option--active {
    background: var(--bg-blue);
    color: var(--blue);
    font-weight: var(--fw-semi-bold);
}

.cf-listbox-trigger.cf-error {
    border-color: var(--pink) !important;
    box-shadow: 0 0 0 3px rgba(156,17,53,0.1) !important;
    background: #fff !important;
}

/* Responsive */
@media (max-width: 575.98px) {
    .cf-card {
        padding: 1.5rem 1.125rem 1.25rem;
        border-radius: 1rem;
    }

    .cf-radio-tile {
        padding: 0.875rem 1rem;
    }
}