header i.icon-cross::after,
header i.icon-cross::before {
  background-color: var(--yellow-500);
}


header.header-visible {
  background-color: var(--green-100);
  /* transition: all .8s ease-in .2s !important; */
  padding: 40rem 20rem !important;
}

.icon-arrow-cta-up-right.text-green-500 .diagonal,
.icon-arrow-cta-up-right.text-green-500:before,
.icon-arrow-cta-up-right.text-green-500:after {
  background: var(--green-500);
}

.module-contact-form .top-wrapper i.icon-cross::after,
.module-contact-form .top-wrapper i.icon-cross::before {
  background-color: var(--green-100);
}



.bg-gradient {
  background: linear-gradient(to right,
      #bc9c64 30%,
      #bc9c64 10%,
      #b4bab9 10%,
      #b4bab9 70%);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.area-icon {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 2;
}

.bg-img-overlay {
  inset: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.bg-img-overlay img {
  height: 100%;
  width: 100%;
}

.bg-img-full {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.top-radius {
  border-radius: 60rem 60rem 0 0;
}

.mt-20 {
  margin-top: 40rem;
}

.fl-col {
  flex-direction: column;
}

.fs-italic {
  font-style: italic;
}

.b-mask {
  position: relative;
}

.expertise-area {
  position: relative;
}

.expertise-area .area-icon {
  opacity: 0;
  transition: all .3s ease;
}

.expertise-area:focus .area-icon,
.expertise-area:hover .area-icon,
.expertise-area.active .area-icon {
  opacity: 1;
}

.b-mask-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.b-mask-layer img {
  width: 100%;
  height: 100%;
}

.home-services .container {
  position: relative;
  z-index: 2;
}

.approach-container {
  margin-top: 80rem;
}

.approach-single {
  display: flex;
}

.approach-single-number {
  font-weight: 500;
}

.approach-single-content-title {
  font-weight: 700;
}

.approach-item {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}

.approach-item-number {
  color: #e6e6e6;
  font-weight: 500;
}

.approach-item-content-title {
  font-weight: 700;
}

.approach-cycle {
  position: relative;
}

.circle-title {
  text-align: center;
  width: 340px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.circle-title .fs-h5 {
  font-weight: 500;
}

.exit-single {
  border-left: 2px solid #33cc99;
  margin-bottom: 40rem;
}

.exit-highlight {
  color: #e2bd81;
  margin-bottom: 0;
  padding: 6rem 20rem;
}

.exit-highlight span {
  display: block;
}


.exit-bottom-container {
  margin-top: 60rem;
}

.exit-due {
  align-items: flex-start;
  flex-direction: row;
  margin-bottom: 26rem;
  width: 100%;
}

.exit-due svg {
  flex: 0 0 auto;
  margin-top: 8px;
  height: 24rem;
  width: 24rem;
}


.home-fs p {
  width: 100%;
}

.home-contact-request {
  position: relative;
  top: 50%;
}


.home-contact p {
  margin-bottom: 20rem;
}

.home-contact-container {
  display: flex;
  gap: 20rem;
  justify-content: space-between;
}

.home-contact-item {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  gap: 20rem;
}

.home-contact-item svg {
  height: 40rem;
  width: 40rem;
}


.cfg-mask {
  position: relative;
}

.module-expertise-areas-cards .container,
.module-expertise-areas-cards .content .cards-w {
  z-index: 3 !important;
}

.mk-c,
.mask-f,
.mask-g {
  position: absolute;
  pointer-events: none;
  transform-origin: top left;
  z-index: 2;
}

.mk-c {
  right: 2%;
  top: 20%;
  width: 680px;
}

.mk-c .animated {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}

.mask-f {
  left: 2%;
  top: 5%;
  width: 780px;
  z-index: 0;
}

.mask-f .animated {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}

.mask-g {
  right: 2%;
  top: 55%;
  width: 780px;
  z-index: 0;
}

.mask-g .animated {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}

.high-z-index {
  z-index: 50 !important;
}

.values-row {
  display: flex;
  justify-content: space-between;
  gap: 20rem;
}

.values-row .value-single {
  flex: 1 1 0
}

.values-row .value-single p {
  line-height: 34rem;
}

.arrow-description-button[data-background="bg-night-blue"] .background {
  background-color: var(--green-100);
}

#footer {
  position: relative;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

#footer .arrow-description-button {
  flex-direction: column;
  align-items: flex-start;
  max-width: 640px;
  padding: 20rem;
}

#footer .arrow-description-button .content {
  align-self: flex-end;
}

#footer .arrow-description-button ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  width: 100%;
}

#footer .arrow-description-button ul li {
  flex: 0 0 33%;
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: left;
}

#footer .arrow-description-button ul li:not(:last-child) {
  margin-bottom: 20px;
}

#footer .arrow-description-button ul li:nth-child(3) {
  white-space: nowrap;
}

#footer .arrow-description-button ul li span {
  font-size: 14rem;
  width: 90%;
}

#footer .arrow-description-button ul li svg {
  width: 10%;
}

.footer-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 0;
  inset: 0;
  opacity: .7;
}

#footer .footer-links,
#footer .back-to-top-btn {
  z-index: 4;
}

#footer .back-to-top-btn {
  border-color: var(--green-100);
}

.footer-bg-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.footer-bg-mask img {
  height: 100%;
  width: 100%;
}

.footer-bayline {
  position: absolute;
  max-width: 50%;
  bottom: 25%;
  z-index: 2;
}

.footer-bayline h2 {
  font-size: 3.8vw;
}

.module-presentation .desc-2 {
  margin-top: 20rem;
}

.profile-info {
  position: relative;
  flex: 0 0 auto;
  width: 280rem;
  height: 280rem;
  border-radius: 50%;
  transition: margin 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (min-width: 1025px) {
  .profile-info {
    width: 230rem;
    height: 230rem;
  }
}

@media (min-width: 1440px) {
  .profile-info {
    width: 260rem;
    height: 260rem;
  }
}


@media (min-width: 1025px) {
  .profile-info.margin-right {
    margin-right: 74rem;
  }
}

@media (min-width: 1440px) {
  .profile-info.margin-right {
    margin-right: 106rem;
  }
}

@media (min-width: 1025px) {
  .profile-info.margin-left {
    margin-left: 104rem;
  }
}

@media (min-width: 1440px) {
  .profile-info.margin-left {
    margin-left: 171rem;
  }
}

.profile-info.active {
  margin: 60rem 0;
  z-index: 5;
}

.profile-info.active .circle {
  opacity: 1;
  transform: translate3d(20%, 0, 0) scaleZ(1);
}

@media (min-width: 1025px) {
  .profile-info.active .img-wrapper {
    transform: scale3d(1.2, 1.2, 1.2);
  }

  .profile-info.active .circle {
    opacity: 1;
    transform: translate3d(20%, 0, 0) scale3d(1.2, 1.2, 1.2);
  }
}

@media (min-width: 1440px) {
  .profile-info.active .img-wrapper {
    transform: scale3d(1.35, 1.35, 1.35);
  }

  .profile-info.active .circle {
    opacity: 1;
    transform: translate3d(20%, 0, 0) scale3d(1.35, 1.35, 1.35);
  }
}

.profile-info .img-wrapper {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.profile-info .img-wrapper .img-wrapper-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  cursor: pointer;
}

.profile-info .img-wrapper .img-wrapper-content::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: calc(100% - 6rem);
  height: calc(100% - 6rem);
  border-radius: 50%;
  border: 3px solid #3e8cff;
  transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.profile-info .img-wrapper .img-wrapper-content img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info .img-wrapper .img-wrapper-content .default {
  position: relative;
  width: 100%;
  height: 100%;
  background: #07101f;
}

.profile-info .circle {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  aspect-ratio: 1/1;
  border: 1px solid rgba(160, 200, 243, 0.2);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
    transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.info-wrapper {
  position: relative;
  z-index: 4;
  min-height: 180rem;
  max-width: 235rem;
}

@media (min-width: 768px) {
  .info-wrapper {
    max-width: 330rem;
  }
}

@media (min-width: 1440px) {
  .info-wrapper {
    max-width: 405rem;
  }
}

.info-wrapper .associate-job .identity-position {
  margin-top: 2rem;
}

.info-wrapper .informations-row {
  display: flex;
  justify-content: space-between;
  gap: 32rem;
  margin-top: 8rem;
}

.info-wrapper .informations-row .associate-location {
  display: flex;
  align-items: center;
  gap: 10rem;
  margin-top: 32rem;
}

.info-wrapper .informations-row .associate-location.hidden {
  display: none;
}

.info-wrapper .informations-row .associate-location i {
  font-size: 16rem;
}

.info-wrapper .informations-row .associates-connexions {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.info-wrapper .informations-row .associates-connexions.hidden {
  display: none;
}

.info-wrapper .informations-row .associates-connexions a {
  transition: color 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (hover: hover) and (pointer: fine) {
  .info-wrapper .informations-row .associates-connexions a:hover {
    color: #a0c8f3;
  }
}

.info-wrapper .informations-row .associates-connexions a.hidden {
  display: none;
}



.search-results #header.active:before,
.search-no-results #header.active:before,
.page-template-full-screen #header.active:before {
  background-color: var(--green-100);
  height: 122rem;
}

.search-results #header,
.search-no-results #header,
.page-template-full-screen #header {
  padding: 40rem 20rem;
}


/* Responsive - stack vertically on smaller screens */
@media (max-width: 600px) {
  .circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  .item {
    position: static;
    transform: none;
    margin: 10px 0;
  }
}

@media (min-width: 1499.99px) {
  /* 
  .page.homepage .module-hero-homepage p.description {
    margin-bottom: 0;
    margin-left: 180rem;
    margin-top: inherit;
  }
     */

  .offer-card .content h5 {
    font-size: 30rem;
  }

  .offer-card .overlay .overlay-inner .fs-p4 {
    /* font-size: 13rem; */
  }
}

@media (min-width: 1199.98px) {

  .values-row .value-single:not(:first-child) {
    padding: 40rem;
  }

  .values-row .value-single:nth-child(2) {
    margin-top: 110rem;
  }

  .values-row .value-single:nth-child(3) {
    margin-top: 220rem;
  }

  .circle-container {
    position: relative;
    width: 900px;
    height: 900px;
    margin: 150rem auto;
    background-image: url(images/circle_bg.svg);
    background-size: 97%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
  }

  .item {
    position: absolute;
    width: 300px;
    height: 300px;
    color: white;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Positioning the 5 items like a pentagon using trigonometry */
  .circle-container .item:nth-child(1) {
    top: -10%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .circle-container .item:nth-child(2) {
    top: 40%;
    left: 100%;
    transform: translate(-50%, -50%);
  }

  .circle-container .item:nth-child(3) {
    bottom: 0%;
    left: 78%;
    transform: translate(-50%, 0);
  }

  .circle-container .item:nth-child(4) {
    bottom: 0%;
    left: 22%;
    transform: translate(-50%, 0);
  }

  .circle-container .item:nth-child(5) {
    top: 40%;
    left: 0%;
    transform: translate(-50%, -50%);
  }
}

/* 
@media screen and (min-width: 1920px) {}
@media screen and (min-width: 1600px) {}
@media screen and (max-width: 1440px) {}
@media screen and (max-width: 1366px) {}
@media screen and (max-width: 1280px) {}
@media (min-width: 992px) and (max-width: 1199.98px) {}
@media (min-width: 768px) and (max-width: 991.98px) {}
*/
@media (max-width: 767.98px) {
  header.header-visible {
    padding: 20rem !important;
  }

  .header-logo svg,
  .header-logo img,
  .header-logo-container svg,
  .header-logo-container img {
    height: 50rem;
  }

    .search-results #header.active:before,
    .search-no-results #header.active:before,
    .page-template-full-screen #header.active:before {
      height: 90rem;
    }
  
    .search-results #header,
    .search-no-results #header,
    .page-template-full-screen #header {
      padding: 20rem;
    }


  .homepage .background-top {
    height: auto;
  }

  .homepage .background-top img {
    height: 60vh;
  }

  .page.homepage .module-hero-homepage {
    height: auto;
    min-height: auto;
  }

  .page.homepage .module-hero-homepage .title {
    font-size: 22rem;
    line-height: 30rem;
  }

  .page.homepage .module-hero-homepage p.description {
    margin-left: auto;
    max-width: 180rem;
    margin-top: 47rem;
    font-size: 15rem;
  }

  .page.homepage .module-hero-homepage .discoverBtn {
    margin-left: auto;
  }

  .page.homepage .module-hero-homepage .discoverBtn .btn-fill {
    margin-top: 20px;
    padding: 11rem 28rem;
    width: auto;
  }


  .home-services {
    padding: 250rem 0 120rem;
  }

  .top-radius {
    border-radius: 20rem 20rem 0 0;
  }

  .bg-gradient {
    background: linear-gradient(180deg,
        #bc9c64 30%,
        #bc9c64 10%,
        #b4bab9 10%,
        #b4bab9 70%);
  }


  .service-module {
    border-radius: 20rem;
  }

  .service-module h3,
  .home-services h3 {
    font-size: 24rem;
  }

  .exit-module p,
  .approach-section p,
  .service-module p,
  .home-services p {
    font-size: 16rem;
  }

  .approach-section p {
    margin-bottom: 30rem;
  }


  .service-module .module-offers-list {
    padding-bottom: 0;
    min-height: auto;
  }

  .offer-card {
    height: 455rem;
    padding: 22rem;
    width: 260rem;
  }

  .offer-card .content h5 {
    font-size: 26rem;
    letter-spacing: 0;
  }

  .offer-card .overlay .overlay-inner {
    padding: 22rem;
  }

  .offer-card .overlay .overlay-inner p {
    font-size: 14rem;
  }



  .exit-highlight span {
    display: inline-block;
  }

  .home-contact-container {
    flex-direction: column;
  }

  .m-title {
    margin-top: 40rem;
  }

  .home-contact .home-p {
    padding-top: 95rem;
  }

  .mk-c {
    width: 380px;
  }

  .module-expertise-areas-cards {
    background-color: #fff;
    padding-bottom: 130px;
  }

  .expertise-areas .expertise-area {
    font-size: 22rem;
    line-height: 26px;
  }

  .mask-f {
    top: 25%;
    width: 350px;
  }


  .mask-g {
    width: 350px;
  }

  .approach-container {
    margin-top: 0;
  }

  .approach-single {
    margin-bottom: 30px;
  }


  .approach-single .approach-single-content {
    padding-left: 20rem;
  }

  .approach-single .approach-single-content p {
    margin: 6rem 0;
  }

  .approach-single .approach-single-content-title {
    font-size: 26rem;
  }

  .approach-cycle {
    margin: 0 24px;
  }

  .circle-title {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin-top: 30rem;
  }

  .circle-title p {
    margin-top: 20rem;
  }

  .circle-container .approach-item {
    text-align: center;
  }

  .exit-single .exit-highlight {
    font-size: 18rem;
    letter-spacing: 0;
  }

  .exit-bottom-container h2 {
    font-size: 34rem;
  }

  .exit-due svg {
    height: 16rem;
    width: 16rem;
  }

  .home-contact-request {
    top: auto;
  }

  .values-row {
    flex-direction: column;
    gap: 60rem;
  }

  .module-presentation .title {
    font-size: 34rem;
    line-height: 38rem;
  }

  .module-presentation .description,
  .module-presentation .description p,
  .values-row .value-single p {
    font-size: 16rem;
    line-height: 26rem;
  }

  .dropdown .list h3 {
    font-size: 20rem;
  }

  .dropdown .list .content-wrapper .content ul,
  .dropdown .list .content-wrapper .content ul li,
  .dropdown .list .content-wrapper .content p {
    font-weight: 300;
    text-align: left;
  }

  .info-wrapper {
    min-height: auto;
  }

  .description-wrapper div {
    font-size: 16rem;
    line-height: 30rem;
  }



  #footer {
    background-size: 130%;
    padding-top: 40rem;
  }

  .footer-bayline {
    position: relative;
    max-width: 100%;
    bottom: auto;
    margin-bottom: 30rem;
  }

  .footer-bayline h2 {
    font-size: 10vw;
  }

  .footer-bg-mask img {
    height: 54%;
  }

  #footer .footer-links {
    margin-bottom: 160rem;
  }

  #footer .footer-links ul {
    display: flex;
    flex-direction: row;
    gap: 16rem;
    flex-wrap: wrap;
    width: 100%;
  }

  #footer .footer-links ul li {
    display: inline-flex;
    flex: 1 1 46%;
  }



  #footer .arrow-description-button ul li {
    flex: 0 0 49%;
  }
}