*, *::before, *::after {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

.hs-form-frame > iframe {
  border: none !important;
  outline: none !important;
}

.wp-block-button .wp-element-button {
  transition: background-color 0.2s ease-in-out, 
    box-shadow 0.18s ease-in-out, 
    color 0.2s ease-in-out, 
    transform 0.2s ease-in-out;
}

header {
  background: var(--wp--preset--color--base-1);
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 100;
}

main {
  overflow-x: hidden;
}

main > div.entry-content, 
footer {
  margin: 0;
}

#site-logo {
  align-items: center;
  display: flex;
}

#site-logo :focus, 
.wp-block-navigation ul li :focus {
  outline: none;
}

#site-logo .custom-logo {
  width: 300px !important;
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
  font-size: var(--wp--preset--font-size--regular);
  margin-top: -1px;
  padding-left: 0.3rem;
  width: max-content;
}

.provider-col > .wp-block-column {
  align-items: flex-start;
  gap: var(--wp--preset--spacing--30) 0;
}

.provider-col > .wp-block-column svg {
  height: 3.6rem;
}

.wp-block-column.hb-form {
  align-items: flex-end;
  display: flex;
}

.wp-block-column.hb-form > .wp-block-group {
  width: 100%;
}

.recent-posts-container {
  display: flex;
  flex-flow: row wrap;
  gap: 0 var(--wp--preset--spacing--20);
  margin: 0;
  padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}

.recent-posts-container > a {
  height: 100%;
  margin: 0;
  padding: 1.5em 0;
  text-decoration: none;
  width: 100%;
}

.recent-posts-container > a:first-child {
  padding: 0 0 1.5em;
}

.recent-posts-container > a:not(:first-child) {
  border-top: 1px solid var(--wp--preset--color--border);
}

.recent-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--wp--preset--spacing--20);
}

.recent-posts-container .recent-post__thumbnail {
  aspect-ratio: 100 / 52;
  border-radius: 8px;
  flex: 0 0 100%;
  overflow: hidden;
}

.recent-posts-container a .recent-post__thumbnail > img {
  height: auto;
  transition: transform 0.3s ease-in-out;
  width: 100%;
}

.recent-posts-container a:hover .recent-post__thumbnail > img {
  transform: scale(1.05);
}

.recent-posts-container .recent-post__title {
  color: var(--wp--preset--color--base-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.6em;
  margin: 0 0 var(--wp--preset--spacing--10);
  overflow: hidden;
  transition: color 0.2s ease-in-out;
}

.recent-posts-container a:hover .recent-post__title {
  color: var(--wp--preset--color--accent-1) !important;
}

.recent-post__date {
  color: var(--wp--preset--color--accent-6);
  font-size: var(--wp--preset--font-size--x-small);
  margin-top: auto;
}

.social-links a {
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
}

/* Project grid style */

.projects-container {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  grid-template-columns: 1fr;
}

.projects-container > #spinner {
  grid-column: 1 / -1;
}

/* Custom cards style */

.card {
  background-color: var(--wp--preset--color--base-1);
  border-radius: var(--wp--preset--spacing--10);
  box-shadow: 0px 8px 10px #00000029;
  color: var(--wp--preset--color--contrast-2);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  width: 100%;
}

.card:not(.card--img) {
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.benefit-swiper .card {
  margin: 0 10px;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.card.card--light-blue {
  background-color: var(--wp--preset--color--accent-6);
}

a.card {
  text-decoration: none;
}

.card.card--img {
  overflow: hidden;
  transition: all 0.3s ease-in-out, filter 0.1s ease-in-out;
}

.card.card--proj {
  transition: all 0.3s ease-in-out;
}

.card.card--proj:hover {
  transform: scale(1.03);
}

.card.card--img.card--img--overlay {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.card.card--img.card--img--overlay::before {
  content: "";
  background: linear-gradient(180deg, 
    rgba(0,44,83,0) 50%, 
    rgba(0,44,83,0.7) 68%, 
    rgba(0,44,83,0.85) 90%, 
    rgba(0,44,83,1) 100%);
  height: 100%;
  position: absolute;
  transition: background 0.4s ease-in-out;
  width: 100%;
  z-index: 1;
}

.card.card--img.card--img--overlay .card__img-bg {
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  pointer-events: none;
  position: absolute;
  transition: all 0.2s ease-in-out, 
    transform 0.4s cubic-bezier(0.351,-0.330,0.558,1.225);
  width: 100%;
  z-index: 0;
}

.card__icon {
  position: relative;
}

.card--icon--bg .card__icon {
  background: var(--wp--preset--color--accent-4);
  border-radius: 50%;
  height: 4rem;
  flex: 0 0 4rem;
  margin-bottom: 1em;
  overflow: hidden;
  width: 4rem;
}

.card--icon--bg .card__icon > svg {
  left: 50%;
  height: auto;
  object-fit: contain;
  object-position: 50% 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}

.card.card--img img {
  aspect-ratio: var(--wp--preset--aspect-ratio--3-2);
  border-radius: var(--wp--preset--spacing--10);
  height: auto !important;
  object-fit: cover;
  object-position: 50% 50%;
  width: 100% !important;
}

.card .card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card.card--img.card--img--overlay .card__content {
  color: var(--wp--preset--color--base-1);
  justify-content: flex-end;
  opacity: 1;
  padding: 24px 24px var(--wp--preset--spacing--20);
  position: absolute;
  transition: opacity 0.4s ease-in-out, 
    visibility 0.4s ease-in-out;
  visibility: visible;
  width: 100%;
  z-index: 2;
}

.card--icon--bg .card__overline {
  margin-bottom: 6px;
}

.benefit-swiper .card .card__title, 
.projects-container .card .card__title {
  color: var(--wp--preset--color--contrast-1);
  line-height: 1.3em;
  margin-bottom: 1rem;
}

.benefit-swiper .card .card__title {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400;
}

.projects-container .card .card__title {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
}

.card.card--img.card--img--overlay .card__title {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1em;
  z-index: 1;
}

.card .card__content .text-btn {
  bottom: var(--wp--preset--spacing--8);
  display: block;
  font-weight: 500;
  margin: auto 0 0 auto;
  width: max-content;
}

.card.card--img.card--img--overlay .card__content .text-btn {
  margin: 10px 0 calc(var(--wp--preset--spacing--8)*-1) auto;
  padding: 13px 0;
  position: relative;
}

.text-btn::after {
  aspect-ratio: 1/1;
  content: "";
  display: block;
  height: 24px;
  position: relative;
  width: auto;
}

.card--proj .text-btn::after {
  height: 20px;
}

.card.card--proj .text-btn.text-btn-arrow-right::after {
  background-color: var(--wp--preset--color--accent-2);
  mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='SVGRepo_bgCarrier' stroke-width='0'%3e%3c/g%3e%3cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3e%3c/g%3e%3cg id='SVGRepo_iconCarrier'%3e %3cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e %3c/g%3e%3c/svg%3e");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color 0.2s ease-in-out;
}

.card.card--proj:hover .text-btn.text-btn-arrow-right::after {
  background-color: var(--wp--preset--color--accent-4);
}

.card.card--img.card--img--overlay .text-btn.text-btn-arrow-right::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='SVGRepo_bgCarrier' stroke-width='0'%3e%3c/g%3e%3cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3e%3c/g%3e%3cg id='SVGRepo_iconCarrier'%3e %3cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e %3c/g%3e%3c/svg%3e");
}

.text-btn.text-btn-arrow-up-right > span::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='SVGRepo_bgCarrier' stroke-width='0'%3e%3c/g%3e%3cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3e%3c/g%3e%3cg id='SVGRepo_iconCarrier'%3e %3cpath d='M7 17L17 7M17 7H7M17 7V17' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e %3c/g%3e%3c/svg%3e");
}

.card.card--img.card--img--overlay .card__content .text-btn span {
  display: block;
  position: absolute;
  right: calc(100% + 0.7rem);
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  width: max-content;
}

#spinner {
  display: flex;
  margin: 0 auto;
}

.loader {
  animation: dots 1s infinite linear alternate;
  aspect-ratio: 1;
  border-radius: 50%;
  width: 15px;
}

.loader.loader--white {
  animation: dots-white 1s infinite linear alternate;
}

@keyframes dots {
  0%  { 
    box-shadow: 20px 0 #002c53, -20px 0 #002c5322;
    background: #002c53; 
  }

  33% { 
    box-shadow: 20px 0 #002c53, -20px 0 #002c5322;
    background: #002c5322; 
  }

  66% { 
    box-shadow: 20px 0 #002c5322, -20px 0 #002c53;
    background: #002c5322;
  }

  100%{ 
    box-shadow: 20px 0 #002c5322, -20px 0 #002c53; 
    background: #002c53; 
  }
}

@keyframes dots-white {
  0%  { 
    box-shadow: 20px 0 #fff, -20px 0 #fff2;
    background: #fff; 
  }

  33% { 
    box-shadow: 20px 0 #fff, -20px 0 #fff2;
    background: #fff2; 
  }

  66% { 
    box-shadow: 20px 0 #fff2, -20px 0 #fff;
    background: #fff2;
  }

  100%{ 
    box-shadow: 20px 0 #fff2, -20px 0 #fff; 
    background: #fff;
  }
}

@media (640px >= width) {
  
  h1, 
  p.has-heading-1-font-size, 
  div.has-heading-1-font-size {
    font-size: (--wp--preset--font-size--heading-2) !important;
  }

  .footer-bottom {
    flex-direction: column;
  }

}

@media (640px < width) {

  .w-90 {
    width: 90%;
  }

  .w-80 {
    width: 80%;
  }

  #hero .wp-block-cover__inner-container > div.wp-block-group > * {
    width: 70%;
  }

  .wp-block-group.full-text > *, 
  p.full-text {
    width: 75%;
  }

  .wp-block-group.full-text > h2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .recent-posts-container {
    gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
  }

  .recent-posts-container a {
    border-top: none !important;
    flex: 0 0 calc( ( 100% - var(--wp--preset--spacing--20)) / 2 );
    padding: 0 !important;
  }
 
  .footer-top {
    justify-content: space-between;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.footer-links, 
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.social-links {
    flex: 0 0 max-content !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.footer-links > .wp-block-group, 
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.social-links > .wp-block-group {
    width: max-content;
  }

  /* Project grid style */

  .projects-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Custom cards style */

  .card.card--img.card--img--overlay {
    border-radius: 0;
    min-width: 100%;
  }

  .card.card--img.card--img--overlay .card__content .card__title {
    margin-bottom: 0;
  }

  .card.card--img.card--img--overlay .card__content .text-btn span {
    opacity: 0;
  }
    
}

@media (1024px >= width) {
  
  .wp-block-navigation #contact {
    margin-top: var(--wp--preset--spacing--20);
    position: relative;
  }

  .wp-block-navigation #contact::before {
    content: "";
    background: var(--wp--preset--color--border);
    height: 1px;
    left: calc(var(--wp--preset--spacing--30) * -1);
    position: absolute;
    top: calc(var(--wp--preset--spacing--20) * -1);
    width: 100vw;
  }

  .example-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

}

@media (782px > width) {
  
  .hidden--sm {
    display: none !important;
  }

  .sm--order-2 {
    order: 2;
  }

  .wp-block-column:has(> .banner-sep) {
    border: none !important;
    outline: none !important;
  }

  .provider-col > .wp-block-column svg {
    width: auto;
  }

  .experts {
    justify-content: center;
  }
  
  .experts.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex: 0 0 calc((100% - var(--wp--preset--spacing--20) ) / 2) !important
  }

  .expert-banner .wp-block-column {
    text-align: center;
  }
  
  .example-grid {
    gap: var(--wp--preset--spacing--10) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .example-grid > .wp-block-group {
    padding: var(--wp--preset--spacing--20) !important;
  }

  .example-grid > .wp-block-group .wp-block-boldblocks-svg-block__inner {
    height: 3rem !important;
  }

  .example-grid > .wp-block-group > p {
    font-size: var(--wp--preset--font-size--regular) !important;
  }

  .wp-block-group:has(> .benefits-container) {
    margin: 0 !important;
    padding: 0 !important;
  }

  .cta-banner {
    margin-top: var(--wp--preset--spacing--20) !important;
  }

}

@media (782px <= width) {
  
  .hidden--lg {
    display: none !important;
  }

  .admin-bar header {
    top: 32px;
  }

  main {
    margin-top: 92px !important;
  }

  .intro > .wp-block-columns:last-child {
    margin-block-start: var(--wp--preset--spacing--40);
  }

  .banner-sep {
    padding-left: var(--wp--preset--spacing--30);
  }

  .provider-col > .wp-block-column:first-child, 
  .provider-col > .wp-block-column:last-child {
    min-height: clamp(22rem, calc(33rem - 10vw), 40rem);
  }

  .provider-col > .wp-block-column:nth-child(2) {
    min-height: clamp(25rem, calc(36rem - 10vw), 45rem);
  }

  .provider-col > .wp-block-column svg {
    height: 4rem;
  }

  .experts {
    gap: var(--wp--preset--spacing--40) !important;
  }

  .report-img {
    min-height: 25rem !important;
  }

  .hb-form {
    margin-top: -15rem !important;
  }

  .list-container .wp-block-column {
    flex: 0 0 calc((100% - var(--wp--preset--spacing--40)) / 2) !important;
  }

  .benefits-banner {
    justify-content: space-between;
  }

  #projects-wrapper {
    padding-top: var(--wp--preset--spacing--60);
  }

}

@media (782px < width <= 1024px) {

  .provider-col {
    gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
  }
  
  .benefits-banner .wp-block-column:first-child {
    flex-basis: 40% !important;
  }

}

@media (1024px < width) {
  
  #site-logo + nav {
    position: relative;
  }

  #site-logo + nav::before {
    background: var(--wp--preset--color--border);
    content: "";
    height: 60%;
    left: calc( var(--wp--preset--spacing--30) * -1);
    position: absolute;
    width: 1px;
  }

  .wp-block-navigation .wp-block-navigation__container, 
  .wp-block-navigation .wp-block-navigation-item {
    height: 100%;
  }

  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    border: none;
    border-top: 3px solid var(--wp--preset--color--accent-2);
    border-radius: 0 0 var(--wp--preset--spacing--8) var(--wp--preset--spacing--8);
    box-shadow: 1px 1px 30px rgba(0,0,0,.06);
    min-width: 15rem !important;
    padding: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--20);
    top: calc(100% + 1px);
  }

  .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--accent-4);
    padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--20);
  }
  
  #hero .wp-block-cover__inner-container > div.wp-block-group > * {
    width: 46%;
  }

  .provider-col > .wp-block-column:first-child, 
  .provider-col > .wp-block-column:last-child {
    min-height: 22rem;
  }

  .provider-col > .wp-block-column:nth-child(2) {
    min-height: 25rem;
  }

  .report-img {
    min-height: 30rem !important;
  }

  .list-container .wp-block-column {
    flex: 0 0 max-content !important;
  }

  .list-container .wp-block-list {
    width: max-content;
  }

  .recent-posts-container {
    flex-flow: row nowrap;
  }
  
  .recent-posts-container a {
    flex: 0 0 calc( ( 100% - var(--wp--preset--spacing--60) ) / 4 );
  }
 
  /* Project grid style */

  .projects-container {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media (hover: hover) {

  .wp-block-button .wp-element-button:hover {
    background-color: var(--wp--preset--color--accent-4) !important;
    box-shadow: 0px 8px 10px #00000029 !important;
    color: var(--wp--preset--color--base-1);
    transform: translateY(-2px);
  }

  .wp-block-navigation .wp-block-navigation-item__content {
    transition: color 0.1s ease-in-out;
  }

  header .wp-block-navigation .wp-block-navigation-item__content:hover, 
  header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent-2);
  }

  footer .wp-block-navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent-1);
  }

  .wp-block-navigation a {
    text-decoration: none;
  }

  .social-links a:hover {
    opacity: 0.8;
  }
  
  /* Custom cards style */

  a.card:hover {
    color: var(--wp--preset--color--contrast-2);
  }

  a.card.card--img.card--img--overlay:hover .card__img-bg {
    transform: scale(1.03);
  }

  .card.card--img.card--img--overlay:hover .card__content .text-btn span {
    opacity: 1;
  }
    
}