@charset "utf-8";

 @font-face{
  font-family: 'Metropolis';
  src: url('../fonts/metropolis-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Metropolis';
  src: url('../fonts/metropolis-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Metropolis';
  src: url('../fonts/metropolis-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Use Metropolis as default */
html, body{
  font-family: 'Metropolis', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

 
 h1, h2, h3, h4 { font-family: 'Metropolis', serif; }
 
 

@media (max-width: 1200px) {}
@media (max-width: 991px) {}
@media (max-width: 768px) {}
@media screen and (max-width: 600px) {
    #wpadminbar {
           position: fixed;
    }

  }

/*===========================================================================================================*/
/*=========================================== BTN-LAYOUT ====================================================*/
/*===========================================================================================================*/
.btn-layout{
  --btn-blue:#187BCD;
  --btn-h: 68px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  height: var(--btn-h);
  padding-left: 34px;
  padding-right: 10px;
  border-radius: 999px;
  border: 2px solid var(--btn-blue);
  background: var(--btn-blue);
  color:#FFF;
  font-family: Metropolis, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  text-decoration:none;
  white-space: nowrap;
  padding-right: 2px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* keep text centered visually */
.btn-layout{
  gap: 22px;
}

.btn-layout::after{
  content:"";
  width: calc(var(--btn-h) - 10px);
  height: calc(var(--btn-h) - 6px);
  flex: 0 0 calc(var(--btn-h) - 7px);
  border-radius: 999px;
  background:#FFF;
  background-color:#FFF; /* circle */
  -webkit-mask: none;
  mask: none;
  transition: background-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}

/* arrow INSIDE the circle */
.btn-layout::before{
  content:"";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-left: auto;

  /* place it over the circle */
  position: absolute;
  transform: translateX(calc(100% - 22px - -7px));
  right: 28px;
  top: 50%;
  translate: 0 -50%;
  background-color: var(--btn-blue);
  -webkit-mask: url('../img/icons/long-arrow-right.svg') no-repeat center / contain;
  mask: url('../img/icons/long-arrow-right.svg') no-repeat center / contain;
  transition: background-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}

/* needed for ::before absolute positioning */
.btn-layout{ position:relative; }

/* hover invert */
.btn-layout:hover,
.btn-layout:focus-visible{
  background:#FFF;
  color: var(--btn-blue);
}

.btn-layout:hover::after,
.btn-layout:focus-visible::after{
  background: var(--btn-blue);
}

.btn-layout:hover::before,
.btn-layout:focus-visible::before{
  background-color:#FFF;
  transform: translateX(calc(100% - 22px - 02px + 13px));
}

/* Responsive */
@media (max-width: 480px){
  .btn-layout{
    --btn-h: 58px;
    font-size: 16px;
    padding-left: 22px;
    /* padding-right: 8px; */
    gap: 16px;
    align-self: center;
  }

  .btn-layout::before{
    /* width: 18px; */
    /* height: 18px; */
    right: 22px;
    /* transform: translateX(calc(100% - 18px - 24px)); */
  }

  .btn-layout:hover::before,
  .btn-layout:focus-visible::before{
    transform: translateX(calc(100% - 18px + 04px + 4px));
  }
}