/* /////////////////// INDEX /////////////////// */
/*

    01. root
    02. global
        02.1. header
        02.2. footer
    03. home
    04. cerca
    05. descobreix
    06. ficha contingut
    07. ficha agenda
    08. llistat flex
    09. llistat agenda
    10. icona favoritos
*/

/* 01. root ********************************** */
:root {
  /* azules */
  --blau: #6babb5;
  --blau-dark: #257c8a;
  --blau-light: #80bec8;
  --blau-light-bg: #dce9eb;
  /* naranjas */
  --tronja: #df7254;
  --tronja-dark: #b65139;
  --tronja-light: #e58967;
  --tronja-light-bg: #fce9e2;
  /* verde */
  --verd: #739166;
  --verd--dark: #647f59;
  --verd-light: #7ea672;
  --verd-light-bg: #e7eee5;
  /* amarillo */
  --groc: #eda252;
  --groc-dark: #d07716;
  --groc-light: #f0b370;
  --groc-light-bg: #ffead3;
  /* rosa */
  --rosa: #e77171;
  --rosa-dark: #db6667;
  --rosa-light: #ed918a;
  /* black */
  --black-100: #000000;
  --black-80: #333333;
  --black-60: #666666;
  --black-30: #999999;
  --grey: #f5f5f5;
  --white: #ffffff;
  --main-font: "Goku", "Times New Roman", Times, serif;

  /*  */
}
/* 01.1 type ********************************** */

@font-face {
  font-family: "Goku";
  src: url("../../type/Goku.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* 02. global ********************************** */
h2 {
  font-family: var(--main-font);
}
h3,
h4,
h5,
h6,
p,
a,
li,
button,
form > * {
  font-family: "Poppins", sans-serif;
}
p {
  font-family: "Poppins", sans-serif;
  color: var(--black-60);
  font-size: 16px;
}

#suport-hero-text {
  padding: 64px 0;
  background-color: var(--tronja-light-bg);
}
#suport-hero-text p {
  font-size: 20px;
  color: var(--black-100);
  text-align: center;
  margin: 0;
}

a.default-btn-dark-green,
a.default-btn-dark-tronja,
a.default-btn-dark-blue {
  color: #fff;
  font-size: 18px;
  padding: 8px 16px;
  text-transform: uppercase;
  font-weight: 400;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.3s ease-in;
}
a.default-btn-dark-green {
  background-color: var(--verd--dark);
}
a.default-btn-dark-tronja {
  background-color: var(--tronja-dark);
}
a.default-btn-dark-blue {
  background-color: var(--blau-dark);
}

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

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

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

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

/* header */

header {
  background-color: var(--blau-dark);
  padding: 24px 24px 0 24px;
  position: relative;
}

header #close-mobile-nav,
header #show-mobile-menu,
header .menu-mobile {
  display: none;
}

header #menu {
  gap: 40px;
  padding: 0 48px;
  display: flex;
  flex-direction: row;
  list-style: none;
  /* height: 100%; */
  align-items: center;
  margin: 0 0;
}
header #menu li {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}
header #menu li a {
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  padding: 8px;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
header #menu li a::after {
  content: "";
  width: 0%;
  height: 2px;
  background-color: var(--white);
  opacity: 1;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
  transition: 0.4s ease-in;
}
header #menu li a.active::after,
header #menu li a:hover::after {
  width: 100%;
}
header #secundari-menu.secundari-menu {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  padding: 0 48px;
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: fit-content;
  margin: auto 0;
}
header #secundari-menu.secundari-menu li {
  height: 100%;
}
header #secundari-menu.secundari-menu a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
header #secundari-menu.secundari-menu a span {
  display: none;
}
header nav form.multiidioma {
  margin: auto 0;
  padding: 0 0 0 40px;
}
header nav form.multiidioma label {
    color: #fff;
}
header nav form.multiidioma select {
  background-color: transparent;
  color: #fff;
  border: 0px solid transparent;
  outline: 0px solid transparent;
}
header .controler-menus-header {
  width: fit-content;
  display: flex;
  flex-direction: row;
}
header nav {
  display: flex;
  flex-direction: row;
}
header nav a.menu-logo {
  margin: 0 auto 0 0;
  max-width: 300px;
  display: flex;
}
header nav a.menu-logo img {
  margin: auto 0;
  width: 100%;
}

header nav ul#menu li.expanded-menu {
  position: relative;
}
header .expanded-menu-descobreix {
  opacity: 0;
  position: fixed;
  top: 170px;
  left: 0;
  width: 100vw;
  height: 0;
  overflow: hidden;
  background-color: #fff;
  z-index: 2;
  padding: 24px 0px 24px 36px;
  transition: 0.4s ease-in-out;
  pointer-events: none;
}
header .expanded-menu-descobreix.expanded {
  opacity: 1;
  pointer-events: inherit;
  height: 460px;
}
header .expanded-menu-descobreix a.btn-descobreix {
  background-color: var(--blau-dark);
  font-size: 16px !important;
  padding: 16px 32px !important;
  font-weight: 400 !important;
  transition: 0.3sease-in;
  display: block !important;
  width: fit-content;
  height: fit-content !important;
}
@media (max-width: 1478px) {
  header nav a.menu-logo {
    max-width: 150px;
  }
  header #menu li a {
    font-size: 14px;
  }
  header #menu {
    padding: 0 12px;
    gap: 12px;
  }
  header #secundari-menu.secundari-menu {
    padding: 0 12px;
  }
  header nav form.multiidioma {
    padding-left: 20px;
  }
}
@media (max-width: 991px) {
  header {
    position: relative;
    padding: 24px;
  }
  header nav {
    flex-direction: row;
  }
  header nav a.menu-logo {
    max-width: 200px;
  }
  header #close-mobile-nav,
  header #show-mobile-menu {
    display: flex;
  }
  header .menu-mobile {
    display: block;
  }
  header .collapse-custom {
    display: none;
  }
  header .collapse-custom.show {
    display: block !important;
  }
  header #show-mobile-menu {
    background-color: transparent;
    border: 0;
    width: auto;
    display: block;
  }
  header #show-mobile-menu img {
    height: 26px;
    width: auto;
  }
  header .controler-menus-header {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 100%;
    width: 100vw;
    height: 100vh;
    background-color: var(--blau-dark);
    z-index: 9999999;
    transition: 0.3s ease-in-out;
    padding: 24px;
  }
  header .controler-menus-header.expanded {
    left: 0;
    overflow: scroll;
  }
  header nav ul#menu {
    flex-direction: column;
    position: relative;
    padding: 0;
    gap: 12px;
    align-items: start;
    text-align: left;
    width: 100%;
    order: 3;
    height: fit-content;
    border-top: 2px solid #ffffff20;
    padding: 20px 0;
  }
  header .expanded-menu-descobreix {
    display: none !important;
  }
  header #menu li {
    height: fit-content;
    display: flex;
    width: fit-content;
    justify-content: inherit;
    align-items: inherit;
    padding: 0;
    width: 100%;
    font-size: 18px;
  }
  header #menu li a::after {
    display: none;
  }
  header #menu li a {
    width: 100%;
    justify-content: inherit;
    align-items: inherit;
    padding: 8px 16px;
    font-size: 24px;
  }
  header #menu li a.active {
    background-color: #ffffff20;
    border-radius: 8px;
  }

  header #secundari-menu.secundari-menu {
    order: 2;
    width: 100%;
    height: fit-content;
    border: none;
    padding: 20px 0;
    margin: 20px 0 0 0;
    border-top: 2px solid #ffffff20;
  }
  header #secundari-menu.secundari-menu li {
    width: 25%;
    padding: 12px;
    border: 2px solid #ffffff20;
    border-radius: 8px;
  }
  header #secundari-menu.secundari-menu a {
    display: flex;
    flex-direction: column;
    justify-content: inherit;
    align-items: inherit;
    text-decoration: none;
  }
  header #secundari-menu.secundari-menu a img {
    height: 32px;
    width: auto;
    opacity: 0.7;
  }
  header #secundari-menu.secundari-menu a span {
    display: block;
    color: var(--blau-light-bg);
    text-align: center;
    width: 100%;
    text-decoration: none;
    font-size: 12px;
    margin-top: 8px;
  }
  header nav form.multiidioma {
    order: 1;
    margin: 0;
    width: fit-content;
    height: fit-content;
    padding: 0;
    margin: 0;
    font-size: 24px;
  }

  header nav form.multiidioma label {
    font-size: 16px;
    display: block;
  }

  header #close-mobile-nav {
    top: 28px;
    right: calc(calc(var(--bs-gutter-x) * 0.5) + 24px);
    position: absolute;
    background-color: transparent;
    border: 0;
    width: auto;
    height: auto;
    display: block;
  }
  header #close-mobile-nav img {
    height: 26px;
    width: auto;
  }
}

/* slider nav descobreix */
.expanded-menu-descobreix {
  display: flex;
  flex-direction: row;
}
.expanded-menu-descobreix .caption-expanded-menu-descobreix {
  width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.expanded-menu-descobreix .caption-expanded-menu-descobreix p {
  font-size: 20px;
  font-weight: 400;
  color: var(--black-60);
  margin-top: 40px;
}
.expanded-menu-descobreix .slider-controler-descobreix {
  width: 67%;
  min-height: 412px;
}

.expanded-menu-descobreix .slider-controler-descobreix .descobreix-menu-controler {
  padding: 0 0 0 24px;
}
.expanded-menu-descobreix .slider-controler-descobreix .descobreix-menu-item {
  height: 350px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.expanded-menu-descobreix .slider-controler-descobreix .descobreix-menu-item a {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.expanded-menu-descobreix .slider-controler-descobreix .descobreix-menu-item a::after {
  position: absolute;
  content: "";
  top: 0 !important;
  left: 0 !important;
  transform: inherit;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.expanded-menu-descobreix .slick-prev.slick-arrow,
.expanded-menu-descobreix .slick-next.slick-arrow {
  position: absolute;
  bottom: 0;
  transition: 0.3s ease-in-out;
  font-size: 0px;
  border: transparent 0px solid;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 12px;
  color: #fff;
  background-color: var(--blau-dark);
  padding: 20px;
  z-index: 1000;
}
.expanded-menu-descobreix .slick-prev.slick-arrow {
  left: 24px;
  background-image: url(/themes/custom/b5subtheme/img/chevron-left-rt.svg);
}
.expanded-menu-descobreix .slick-next.slick-arrow {
  left: 80px;
  background-image: url(/themes/custom/b5subtheme/img/chevron-right-rt.svg);
}

/* header menu dropdown */
.customiced-dropdown {
    position: relative;

}
.customiced-dropdown .component-customiced-dropdown{
    display: none;
    position: absolute;
    background-color: #fff;
    padding: var(--bs-gutter-x)!important;
    border-radius: 8px;
    border: 1px solid var(--black-30);
    /* display: flex; */
    flex-direction: column;
    opacity: 0;
    top: 105%;
    left: 0;
    height: fit-content;
    width: fit-content;
    transition: 0.3s ease-in-out;
    z-index: 999;
    gap: 12px;
}

header #menu .customiced-dropdown .component-customiced-dropdown li{
    padding: 0;
    width: fit-content;
    text-align:left;
    color:var(--blau-dark);
    white-space:nowrap;

}
header #menu .customiced-dropdown .component-customiced-dropdown li a{
    color: var(--blau-dark);
    width: fit-content;
    text-align:left;
    color:var(--blau-dark);
    padding:0;

}

.customiced-dropdown:hover .component-customiced-dropdown{
    opacity: 1;
    top: 100%;
    display: flex;
}

/* footer */
footer {
  background-color: var(--blau-dark);
  color: #fff;
  padding: 96px 0;
}
footer .icons-footer {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 56px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 0 32px 0;
  border-bottom: 1px solid var(--blau-light-bg);
  margin-bottom: 56px;
}

footer .icons-footer li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  gap: 16px;
  color: #fff;
  font-size: 18px;
}
footer .icons-footer li a img {
  width: 48px;
  height: 48px;
}

footer .title-footer {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
footer ul.footer-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 8px 0;
  list-style: none;
  padding: 0;
  gap: 4px;
}
@media (max-width: 991px) {
  footer {
    padding: 40px 0;
  }
  footer .icons-footer {
    width: 100%;
    height: fit-content;
    margin-bottom: 32px;
    gap: 16px;
    padding: 0 0 20px 0;
    border-bottom: 2px solid #ffffff20;
    justify-content: space-between;
    align-items: inherit;
  }

  footer .icons-footer li {
    text-align: center;
    padding: 12px;
    border: 2px solid #ffffff20;
    border-radius: 8px;
    width: 25%;
  }
  footer .icons-footer li a {
    font-size: 12px;
    gap: 8px;
  }
  footer .icons-footer li a img {
    height: 32px;
    width: auto;
    opacity: 0.7;
  }
  footer .title-footer {
    margin: 0 0 8px 0;
    text-align: center;
  }
  footer ul.footer-list {
    text-align: center;
    margin-bottom: 32px;
  }
}

footer ul.footer-list li a {
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
}

/* 03. home ********************************** */

.custom-hero-item {
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#carouselHeroHome .carousel-control-prev span,
#carouselHeroHome .carousel-control-next span,
#carouselHeroHomeMobile .carousel-control-prev span,
#carouselHeroHomeMobile .carousel-control-next span {
  background-color: var(--groc-light);
  padding: 20px;
  border-radius: 500px;
  background-size: 70%;
}

#descobreix {
  padding: 96px 0;
  background-color: #f9f9f9;
}
#descobreix h1 {
  color: var(--blau-dark);
  font-size: 56px;
  text-align: center;
  width: 100%;
  margin-bottom: 12px;
  font-family: var(--main-font);
}
@media (max-width: 991px) {
  #descobreix {
    padding: 64px 0;
  }
  #descobreix h1 {
    font-size: 40px;
  }
}

#descobreix .col-md-12 p {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: var(--blau-dark);
  margin-bottom: 56px;
}
#descobreix .card-descobreix {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 8px;
  height: 100%;
  gap: 20px;
}
@media (max-width: 1199px) {
  #descobreix .custom-mb-responsive {
    margin-bottom: 20px;
  }
}

#descobreix .card-descobreix p a {
  color: var(--blau-dark);
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  width: 100%;
  display: block;
}

#descobreix .card-descobreix figure {
  background-position: center center;
  background-size: cover;
  height: 220px;
  width: 100%;
  margin: 0;
}

#inspirem.inspirem {
  padding: 96px 0;
}
#inspirem.inspirem h2 {
  color: var(--blau-dark);
  font-size: 56px;
  text-align: center;
  width: 100%;
  margin-bottom: 12px;
}
@media (max-width: 991px) {
  #inspirem.inspirem {
    padding: 64px 0;
  }
  #inspirem.inspirem h2 {
    font-size: 40px;
  }
}

#inspirem.inspirem .col-md-12 p {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 56px;
}
#inspirem.inspirem .card-inspirem a {
  text-decoration: none;
  color: var(--black-60);
}
#inspirem.inspirem .card-inspirem {
  display: flex;
  flex-direction: column;
}
#inspirem.inspirem .card-inspirem .pre-figure {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 0 16px;
}
#inspirem.inspirem .card-inspirem .pre-figure.taronja {
  background-color: var(--groc);
}
#inspirem.inspirem .card-inspirem .pre-figure.rosa {
  background-color: var(--rosa-dark);
}
#inspirem.inspirem .card-inspirem .pre-figure.groc {
  background-color: var(--groc-light);
}
#inspirem.inspirem .card-inspirem .pre-figure.blau {
  background-color: var(--blau);
}
#inspirem.inspirem .card-inspirem .pre-figure p {
  margin: auto 0;
  color: black;
}

#inspirem.inspirem .card-inspirem figure {
  width: 100%;
  height: 350px;
  margin: 0 0 24px 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
}
#inspirem.inspirem .card-inspirem figure::after {
  content: "";
  background-color: #00000060;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 0;
}
#inspirem.inspirem .card-inspirem figure h3 {
  padding: 24px;
  width: 80%;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  margin: auto 0 0 0;
  z-index: 1;
}

#inspirem.inspirem a.default-btn-dark-blue {
  margin: 64px auto 0 auto;
}

#no-et-pots-perdre {
  padding: 96px 0;
  background-color: var(--verd-light-bg);
}

#no-et-pots-perdre a.default-btn-dark-green {
  margin: 64px auto 0 auto;
}
#no-et-pots-perdre h2 {
  color: var(--verd--dark);
  font-size: 56px;
  text-align: center;
  width: 100%;
  margin-bottom: 12px;
}
@media (max-width: 991px) {
  #no-et-pots-perdre h2 {
    font-size: 40px;
  }
  #no-et-pots-perdre {
    padding: 64px 0;
  }
}

#no-et-pots-perdre .col-md-12 p {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 56px;
}

#no-et-pots-perdre .card-no-pots {
  display: flex;
  flex-direction: row;
  margin-bottom: var(--bs-gutter-x);
  position: relative;
}

#no-et-pots-perdre .caption-card-no-pots {
  width: 50%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

#no-et-pots-perdre .caption-card-no-pots a::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
}
#no-et-pots-perdre .caption-card-no-pots h3 {
  margin: 0 0 auto 0;
}
#no-et-pots-perdre .caption-card-no-pots h3 a {
  font-size: 24px;
  font-weight: 500;
  color: #000000;
  text-decoration: none;
}

#no-et-pots-perdre .caption-card-no-pots p {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-bottom: 16px;
}

#no-et-pots-perdre .card-no-pots figure {
  width: 50%;
  padding: 0 calc(var(--bs-gutter-x) * 0.5);
  height: 450px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}
@media (max-width: 1199px) {
  #no-et-pots-perdre .card-no-pots {
    flex-direction: column;
  }
  #no-et-pots-perdre .card-no-pots figure,
  #no-et-pots-perdre .caption-card-no-pots {
    width: 100%;
  }
}

#experiencia-destacada {
  padding: 96px 0;
  background-color: #fff;
}
#experiencia-destacada a.default-btn-dark-tronja {
  margin: 64px auto 0 auto;
}
#experiencia-destacada h2 {
  color: var(--tronja);
  font-size: 56px;
  text-align: center;
  width: 100%;
  margin-bottom: 12px;
}

@media (max-width: 991px) {
  #experiencia-destacada {
    padding: 64px 0;
  }
  #experiencia-destacada h2 {
    font-size: 40px;
  }
}
#experiencia-destacada .col-md-12 p {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 56px;
}
#experiencia-destacada .card-experiencia-destacada {
  position: relative;
}
#experiencia-destacada .card-experiencia-destacada figure {
  height: 300px;
  width: 100%;
  margin: 0;
  background-position: center center;
  background-size: cover;
}
#experiencia-destacada .card-experiencia-destacada .caption-experiencia {
  padding: 32px;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  margin-bottom: var(--bs-gutter-x);
}
#experiencia-destacada .card-experiencia-destacada .caption-experiencia h3 {
  margin: 0 0 56px 0;
}

#experiencia-destacada .card-experiencia-destacada .caption-experiencia p a {
  font-size: 24px;
  font-weight: 500;
  color: #000000;
  text-decoration: none;
}
#experiencia-destacada
  .card-experiencia-destacada
  .caption-experiencia
  h3
  a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
}
#experiencia-destacada .card-experiencia-destacada .caption-experiencia p {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-bottom: 16px;
}

/* 04. cerca ********************************** */

#queFer-hero {
  width: 100vw;
  height: 50vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
}
#queFer-hero .container {
  margin-top: auto;
  margin-bottom: auto;
}
#queFer-hero h1 {
  color: #fff;
  font-family: var(--main-font);
  font-size: 56px;
  text-align: center;
  width: 100%;
  margin: 0;
}
@media (max-width: 991px) {
  #queFer-hero h1 {
    font-size: 40px;
  }
  #suport-hero-text {
    padding: 40px 0;
  }
}

#cerca {
  padding: 64px 0;
}
#cerca h2 {
  color: var(--blau-dark);
  font-size: 56px;
  text-align: center;
}
#cerca .col-md-12 p {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: var(--black-60);
  margin-bottom: 56px;
}
#cerca .justifier-col {
  border-left: 1px solid var(--blau-dark);
  padding-left: 40px;
}
@media (max-width: 991px) {
  #cerca h2 {
    font-size: 40px;
  }
  #cerca .col-md-12 p {
    font-size: 20px;
    margin-bottom: 40px;
  }
  #cerca .justifier-col {
    border-left: none;
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
}
#cerca .cerca-filtres {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  gap: 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#cerca .cerca-filtres li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* justify-content: center; */
  align-items: center;
  max-width: 90px;
  text-align: center;
}

#cerca .cerca-filtres li button {
  width: fit-content;
  padding: 20px;
  border: 1px solid var(--blau-light);
  background-color: transparent;
  border-radius: 4px;
  transition: 0.3s ease-in-out;
}
#cerca .cerca-filtres li button img {
  stroke: var(--blau-dark);
}
@media (max-width: 991px) {
  #cerca .cerca-filtres {
    margin: 20px 0;
    gap: 0;
  }
  #cerca .cerca-filtres li {
    font-size: 12px;
    width: 25%;
    margin-bottom: 20px;
  }
  #cerca .cerca-filtres li button {
    padding: 12px;
  }
}
#cerca .cerca-filtres li button.active,
#cerca .cerca-filtres li button:hover {
  background-color: var(--blau-dark);
}
#cerca .cerca-filtres li button svg {
  stroke: var(--blau-dark);
  width: 40px;
  height: 40px;
}
#cerca .cerca-filtres li button:hover svg,
#cerca .cerca-filtres li button.active svg {
  stroke: #fff;
}
#cerca p.title-search-cerca {
  font-size: 20px;
  color: var(--black-80);
  margin-bottom: 24px;
  display: block;
  width: 100%;
}
#cerca .controler-filtres-cerca {
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
}
#cerca .controler-filtres-cerca button {
  border-radius: 4px;
  padding: 8px 16px;
  border: 2px solid var(--blau-dark);
}
#cerca .controler-filtres-cerca button.submit-btn {
  background-color: var(--blau-dark);
  color: #fff;
}
#cerca .controler-filtres-cerca button.clean-btn {
  color: var(--blau-dark);
  background-color: #fff;
}

@media (max-width: 991px) {
  #cerca .controler-filtres-cerca {
    margin: 0px 0 40px 0;
    gap: calc(var(--bs-gutter-x) * 0.5);
  }
  #cerca .controler-filtres-cerca button {
    width: 50%;
  }
}

#reus-pasejant .card-cerca,
#cerca .card-cerca {
  display: flex;
  flex-direction: column;
  margin-bottom: 56px;
  width: 100%;
}

#vermut-reus .card-cerca figure,
#reus-pasejant .card-cerca figure,
#cerca .card-cerca figure {
  height: 350px;
  width: 100%;
  margin-bottom: 24px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  position: relative;
}
#vermut-reus .card-cerca figure span.icon,
#reus-pasejant .card-cerca figure span.icon,
#cerca .card-cerca figure span.icon {
  background-color: var(--tronja-light);
  height: 40px;
  width: 40px;
  position: relative;
  z-index: 2;
}
#vermut-reus .card-cerca figure span.icon img,
#reus-pasejant .card-cerca figure span.icon img,
#cerca .card-cerca figure span.icon img {
  width: auto;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#vermut-reus .card-cerca figure::after,
#reus-pasejant .card-cerca figure::after,
#cerca .card-cerca figure::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #00000050;
  z-index: 1;
}
#vermut-reus .card-cerca h3,
#reus-pasejant .card-cerca h3,
#cerca .card-cerca h3 {
  margin-bottom: 16px;
  color: #000;
  font-size: 20px;
  width: 100%;
}
#vermut-reus.card-cerca p,
#reus-pasejant .card-cerca p,
#cerca .card-cerca p {
  font-size: 16px;
  color: var(--black-60);
  margin-bottom: 24px;
}
#vermut-reus .card-cerca a,
#reus-pasejant .card-cerca a,
#cerca .card-cerca a {
  display: flex;
  border-radius: 4px;
  padding: 8px 16px;
  border: 2px solid var(--blau-dark);
  background-color: var(--blau-dark);
  color: #fff;
  text-decoration: none;
  width: fit-content;
}

@media (max-width: 991px) {
  #vermut-reus .card-cerca a,
  #reus-pasejant .card-cerca a,
  #cerca .card-cerca a {
    width: 100%;
    justify-content: center;
    margin-bottom: 32px;
  }
}

/* 05. descobreix ********************************** */

#descobreix-hero {
  width: 100vw;
  height: 50vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
}
#descobreix-hero .container {
  margin-top: auto;
  margin-bottom: auto;
}
#descobreix-hero h1 {
  color: #fff;
  font-family: var(--main-font);
  font-size: 56px;
  text-align: center;
  width: 100%;
  margin: 0;
}

#ciutat-gaudi {
  background-color: var(--blau-light-bg);
  padding: 64px 0;
}
#ciutat-gaudi figure {
  height: 400px;
  width: 100%;
  margin-bottom: 24px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#ciutat-gaudi figure span {
  background-color: var(--tronja-light);
  height: 40px;
  width: 40px;
  position: relative;
  z-index: 2;
}
#ciutat-gaudi figure span.icon img {
  width: auto;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#ciutat-gaudi h2 {
  font-size: 48px;
  color: var(--black-100);
  margin-bottom: 8px;
  margin-top: 64px;
}
#ciutat-gaudi h3 {
  font-size: 20px;
  font-weight: 400;
  color: var(--black-100);
  margin-bottom: 8px;
}
#ciutat-gaudi p {
  font-size: 16px;
  color: var(--black-80);
  margin-bottom: 24px;
}
#ciutat-gaudi a {
  display: flex;
  width: fit-content;
  background-color: var(--blau-dark);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  padding: 8px 16px;
  margin: auto 0 0 0;
  text-decoration: none;
}
#ciutat-gaudi .col-md-5 p {
  font-size: 20px;
}
#ciutat-gaudi .col-md-5 a {
  padding: 16px 32px;
}
#ciutat-gaudi .col-md-3 {
  display: flex;
  flex-direction: column;
}

@media (max-width: 991px) {
  #descobreix-hero h1 {
    font-size: 40px;
  }
  #ciutat-gaudi {
    padding: 40px 0;
  }
  #ciutat-gaudi h2 {
    font-size: 40px;
    margin-top: 0;
  }
  #ciutat-gaudi .col-md-5 a {
    margin-bottom: 32px;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  #ciutat-gaudi a {
    margin-bottom: 32px;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}

#joia-modernista {
  padding: 64px 94px;
  /* background-color: var(--tronja-light-bg); */
}
#joia-modernista h2 {
  font-size: 48px;
  color: var(--blau-dark);
  margin-bottom: 8px;
  margin-top: 64px;
  text-align: right;
}
#joia-modernista h3 {
  font-size: 20px;
  font-weight: 400;
  color: var(--black-100);
  margin-bottom: 8px;
}
#joia-modernista .col-md-4 p {
  text-align: right;
  font-size: 20px;
}
#joia-modernista p {
  font-size: 16px;
  color: var(--black-80);
  margin-bottom: 24px;
}
#joia-modernista .col-md-4 a {
  display: flex;
  width: fit-content;
  background-color: var(--blau-dark);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  padding: 16px 32px;
  margin: auto 0 0 auto;
  text-decoration: none;
}
#joia-modernista a {
  display: flex;
  width: fit-content;
  background-color: var(--blau-dark);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  padding: 8px 16px;
  margin: auto 0 0 0;
  text-decoration: none;
}
#joia-modernista .col-md-2 {
  display: flex;
  flex-direction: column;
}
#joia-modernista figure {
  height: 400px;
  width: 100%;
  margin-bottom: 24px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#joia-modernista figure span {
  background-color: var(--tronja-light);
  height: 40px;
  width: 40px;
  position: relative;
  z-index: 2;
}
#joia-modernista figure span.icon img {
  width: auto;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 991px) {
  #joia-modernista {
    padding: 40px 0;
  }
  #joia-modernista h2 {
    margin-top: 0;
    text-align: left;
    font-size: 40px;
  }
  #joia-modernista .col-md-4 p {
    text-align: left;
  }
  #joia-modernista a,
  #joia-modernista .col-md-4 a {
    margin: 0 0 32px 0;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

#reus-pasejant {
  background-color: var(--blau-light-bg);
  padding: 120px 0;
}

#reus-pasejant .extra-margin {
  padding: 64px 0 0 0;
}
#reus-pasejant .col-md-8 h2 {
  font-size: 48px;
  color: var(--black-100);
  display: block;
  width: 100%;
  text-align: center;
}
#reus-pasejant .col-md-8 p {
  font-size: 20px;
  margin: 8px 0 40px 0;
  width: 100%;
  text-align: center;
}
#reus-pasejant .col-md-10 h2 {
  font-size: 32px;
  color: var(--black-100);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  margin-top: 64px;
  margin-bottom: 8px;
}
.nav-tabs.customer-tabs-reus {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 88px;
  margin: 0;
  padding: 0;
  border: none;
}
.nav-tabs.customer-tabs-reus li {
  border: none;
}
.nav-tabs.customer-tabs-reus li button {
  opacity: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  gap: 24px;
  max-width: 136px;
  text-align: center;
  transition: 0.3s ease-in-out;
  color: var(--black-80);
  font-weight: 600;
}
.nav-tabs.customer-tabs-reus li button.active {
  opacity: 1;
  border: none;
}
.nav-tabs.customer-tabs-reus li button img {
  transition: 0.3s ease-in-out;
  outline: 0px solid var(--blau-light-bg);
  border-radius: 100000px;
  height: 136px;
  width: 136px;
}
.nav-tabs.customer-tabs-reus li button.active img {
  outline: 16px solid var(--white);
}

#reus-pasejant .nav-link.active {
    background: none;
}

@media (max-width: 991px) {
  #reus-pasejant {
    padding: 40px 0;
  }
  #reus-pasejant .col-md-8 h2 {
    font-size: 40px;
    text-align: left;
  }
  #reus-pasejant .col-md-10 h2 {
    margin-top: 20px;
    font-size: 28px;
  }
  #reus-pasejant .col-md-8 p {
    text-align: left;
  }
  .nav-tabs.customer-tabs-reus {
    gap: 0;
    justify-content: space-between;
  }
  .nav-tabs.customer-tabs-reus li {
    max-width: 30%;
    padding: 12px;
  }

  .nav-tabs.customer-tabs-reus li button {
    width: 100%;
    gap: 20px;
    font-size: 12px;
    padding: 0;
  }
  .nav-tabs.customer-tabs-reus li button img {
    width: 100%;
    height: auto;
  }
  .nav-tabs.customer-tabs-reus li button.active img {
    outline: 9px solid var(--blau-light-bg);
  }
  #reus-pasejant .extra-margin {
    padding: 0;
  }
}

#comparar-pasejant {
  padding: 64px 0;
  /* background-color: var(--verd-light-bg); */
}
#comparar-pasejant h2 {
  font-size: 48px;
  color: var(--blau-dark);
  display: block;
  width: 100%;
  text-align: center;
}
#comparar-pasejant p {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 56px;
}
#comparar-pasejant .row-comprar-passejant {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-top: 40px;
}
#comparar-pasejant .row-comprar-passejant .comprar-passejant-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 20%;
}
#comparar-pasejant .row-comprar-passejant .comprar-passejant-card h3 {
  font-size: 20px;
  color: var(--black-80);
  margin-top: 16px;
  margin-bottom: 24px;
  font-family: "Poppins", sans-serif;
  text-align: center;
  width: 100%;
}
#comparar-pasejant .row-comprar-passejant .comprar-passejant-card a {
  background-color: var(--blau-dark);
  border-radius: 4px;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  display: block;
  width: fit-content;
  margin: auto auto 0 auto;
}
#comparar-pasejant .row-comprar-passejant .comprar-passejant-card img {
  width: 55%;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 991px) {
  #comparar-pasejant {
    padding: 40px 0;
  }
  #comparar-pasejant h2 {
    text-align: left;
    font-size: 40px;
  }
  #comparar-pasejant p {
    text-align: left;
  }
  #comparar-pasejant .row-comprar-passejant {
    flex-wrap: wrap;
  }
  #comparar-pasejant .row-comprar-passejant .comprar-passejant-card {
    width: 50%;
    margin-bottom: 40px;
  }
  #comparar-pasejant .row-comprar-passejant .comprar-passejant-card h3 {
    margin: 8px 0;
  }
}

#ciutat-cultural {
  padding: 64px 0;
  background-color: var(--blau-light-bg);
}
#ciutat-cultural h2 {
  font-size: 48px;
  color: var(--black-100);
  display: block;
  width: 100%;
  text-align: center;
}
#ciutat-cultural p {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 56px;
}
#ciutat-cultural .row-ciutat-cultural {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-top: 40px;
}
#ciutat-cultural .row-ciutat-cultural .ciutat-cultural-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 20%;
}
#ciutat-cultural .row-ciutat-cultural .ciutat-cultural-card h3 {
  font-size: 20px;
  color: var(--black-80);
  margin-top: 16px;
  margin-bottom: 24px;
  font-family: "Poppins", sans-serif;
  text-align: center;
  width: 100%;
}
#ciutat-cultural .row-ciutat-cultural .ciutat-cultural-card a {
  background-color: var(--blau-dark);
  border-radius: 4px;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  display: block;
  width: fit-content;
  margin: auto auto 0 auto;
}
#ciutat-cultural .row-ciutat-cultural .ciutat-cultural-card img {
  width: 55%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 991px) {
  #ciutat-cultural {
    padding: 40px 0;
  }
  #ciutat-cultural h2 {
    text-align: left;
    font-size: 40px;
  }
  #ciutat-cultural p {
    text-align: left;
  }
  #ciutat-cultural .row-ciutat-cultural {
    flex-wrap: wrap;
  }
  #ciutat-cultural .row-ciutat-cultural .ciutat-cultural-card {
    width: 50%;
    margin-bottom: 40px;
  }
  #ciutat-cultural .row-ciutat-cultural .ciutat-cultural-card h3 {
    margin: 8px 0;
  }
}

#vermut-reus {
  padding: 120px 0px;
}

#vermut-reus .col-md-8 h2 {
  color: var(--blau-dark);
  font-size: 48px;
  display: block;
  width: 100%;
  text-align: center;
}
#vermut-reus .col-md-8 p {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 56px;
}

#vermut-reus .col-md-8 a {
  background-color: var(--blau-dark);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  display: flex;
  width: fit-content;
  margin: 24px auto 40px auto;
  padding: 16px 32px;
  text-decoration: none;
}
@media (max-width: 991px) {
  #vermut-reus {
    padding: 40px 0;
  }
  #vermut-reus .col-md-8 h2 {
    font-size: 40px;
    text-align: left;
  }
  #vermut-reus .col-md-8 p {
    text-align: left;
    margin-bottom: 32px;
  }
  #vermut-reus .col-md-8 a {
    width: 100%;
    justify-content: center;
  }
}

#gastronomia-section {
  padding: 64px 94px;
  background-color: var(--blau-light-bg);
}
#gastronomia-section h2 {
  font-size: 48px;
  color: var(--black-100);
  margin-bottom: 8px;
  margin-top: 64px;
  text-align: right;
}
#gastronomia-section h3 {
  font-size: 20px;
  font-weight: 400;
  color: var(--black-100);
  margin-bottom: 8px;
}
#gastronomia-section .col-md-4 p {
  text-align: right;
  font-size: 20px;
}
#gastronomia-section p {
  font-size: 16px;
  color: var(--black-80);
  margin-bottom: 24px;
}
#gastronomia-section .col-md-4 a {
  display: flex;
  width: fit-content;
  background-color: var(--blau-dark);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  padding: 16px 32px;
  margin: auto 0 0 auto;
  text-decoration: none;
}
#gastronomia-section a {
  display: flex;
  width: fit-content;
  background-color: var(--blau-dark);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  padding: 8px 16px;
  margin: auto 0 0 0;
  text-decoration: none;
}
#gastronomia-section .col-md-2 {
  display: flex;
  flex-direction: column;
}
#gastronomia-section figure {
  height: 400px;
  width: 100%;
  margin-bottom: 24px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#gastronomia-section figure span {
  background-color: var(--tronja-light);
  height: 40px;
  width: 40px;
  position: relative;
  z-index: 2;
}
#gastronomia-section figure span.icon img {
  width: auto;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 991px) {
  #gastronomia-section {
    padding: 40px 0;
  }
  #gastronomia-section h2 {
    text-align: left;
    font-size: 40px;
    margin-top: 0;
  }
  #gastronomia-section .col-md-4 p {
    text-align: left;
  }
  #gastronomia-section .col-md-4 a {
    margin: 0px 0 32px 0;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  #gastronomia-section a {
    width: 100%;
    justify-content: center;
    margin-bottom: 32px;
  }
}

#cor-costa-dorada {
  padding: 64px 94px;
}
#cor-costa-dorada h2 {
  font-size: 48px;
  color: var(--blau-dark);
  margin-bottom: 8px;
  margin-top: 64px;
}
#cor-costa-dorada h3 {
  font-size: 20px;
  font-weight: 400;
  color: var(--black-100);
  margin-bottom: 8px;
}
#cor-costa-dorada .col-md-4 p {
  font-size: 20px;
}
#cor-costa-dorada p {
  font-size: 16px;
  color: var(--black-80);
  margin-bottom: 24px;
}
#cor-costa-dorada .col-md-4 a {
  display: flex;
  width: fit-content;
  background-color: var(--blau-dark);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  padding: 16px 32px;
  text-decoration: none;
}
#cor-costa-dorada a {
  display: flex;
  width: fit-content;
  background-color: var(--blau-dark);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  padding: 8px 16px;
  margin: auto 0 0 0;
  text-decoration: none;
}
#cor-costa-dorada .col-md-2 {
  display: flex;
  flex-direction: column;
}
#cor-costa-dorada figure {
  height: 400px;
  width: 100%;
  margin-bottom: 24px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#cor-costa-dorada figure span {
  background-color: var(--tronja-light);
  height: 40px;
  width: 40px;
  position: relative;
  z-index: 2;
}
#cor-costa-dorada figure span.icon img {
  width: auto;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 991px) {
  #cor-costa-dorada {
    padding: 40px 0;
  }
  #cor-costa-dorada h2 {
    margin-top: 0;
    font-size: 40px;
  }
  #cor-costa-dorada .col-md-4 a {
    margin-bottom: 32px;
  }
  #cor-costa-dorada a {
    width: 100%;
    margin-bottom: 32px;
    justify-content: center;
  }
}

#fires-convencions {
  padding: 64px 94px;
  background-color: var(--tronja-light-bg);
}
#fires-convencions h2 {
  font-size: 48px;
  color: var(--black-100);
  margin-bottom: 8px;
  margin-top: 64px;
  text-align: right;
}
#fires-convencions h3 {
  font-size: 20px;
  font-weight: 400;
  color: var(--black-100);
  margin-bottom: 8px;
}
#fires-convencions .col-md-4 p {
  text-align: right;
  font-size: 20px;
}
#fires-convencions p {
  font-size: 16px;
  color: var(--black-80);
  margin-bottom: 24px;
}
#fires-convencions .col-md-4 a {
  display: flex;
  width: fit-content;
  background-color: var(--tronja-dark);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  padding: 16px 32px;
  margin: auto 0 0 auto;
  text-decoration: none;
}
#fires-convencions a {
  display: flex;
  width: fit-content;
  background-color: var(--tronja-dark);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  padding: 8px 16px;
  margin: auto 0 0 0;
  text-decoration: none;
}
#fires-convencions .col-md-2 {
  display: flex;
  flex-direction: column;
}
#fires-convencions figure {
  height: 400px;
  width: 100%;
  margin-bottom: 24px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#fires-convencions figure span {
  background-color: var(--tronja-light);
  height: 40px;
  width: 40px;
  position: relative;
  z-index: 2;
}
#fires-convencions figure span.icon img {
  width: auto;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 991px) {
  #fires-convencions {
    padding: 40px 0;
  }
  #fires-convencions h2 {
    text-align: left;
    font-size: 40px;
    margin-top: 0;
  }
  #fires-convencions .col-md-4 p {
    text-align: left;
  }
  #fires-convencions .col-md-4 a {
    width: 100%;
    margin: 0 auto 32px auto;
    justify-content: center;
  }
  #fires-convencions a {
    width: 100%;
    margin: 0 auto 32px auto;
    justify-content: center;
  }
}

/* 06. ficha contingut ********************************** */

#hero-ficha {
  width: 100vw;
  height: 50vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
}

#block-title {
  padding-top: 64px;
  padding-bottom: 32px;
}
#block-title h1 {
  font-family: var(--main-font);
  font-size: 64px;
  color: var(--black-100);
}
#block-title p.suport-title {
  font-size: 20px;
  margin-bottom: 32px;
  color: var(--black-80);
}

.block-left,
.block-right {
  padding: 56px 0;
}
.block-left .col-md-6,
.block-right .col-md-6 {
  display: flex;
  flex-direction: column;
}
.block-left h2,
.block-right h2 {
  font-size: 28px;
  font-weight: 400;
  font-family: "Poppins";
}
.block-left img,
.block-right img {
  width: 90%;
}
.block-left img {
  margin-left: auto;
  margin-right: 0;
}
.block-right img {
  margin-right: auto;
  margin-left: 0;
}
#block-ckeditor,
.block-ckeditor {
  padding: 24px 0 56px 0;
}
.block-left p,
.block-right p,
#block-ckeditor p,
.block-ckeditor p {
  font-size: 18px;
  color: var(--black-80);
  margin-bottom: 12px;
}
.block-left ul,
.block-right ul,
#block-ckeditor ul,
.block-ckeditor ul {
  margin: 12px 0;
  font-size: 18px;
  color: var(--black-80);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.block-left p strong,
.block-right p strong {
  color: var(--blau-dark);
}

.block-left a.btn-turisme,
.block-right a.btn-turisme,
#block-ckeditor a.btn-turisme,
.block-ckeditor a.btn-turisme {
  text-decoration: none;
  color: white;
  border-radius: 4px;
  display: block;
  width: fit-content;
  margin: 24px 0 0 0;
  text-align: center;
  background-color: var(--blau-dark);
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  padding: 8px 16px;
}

.block-enlaces {
  padding: 56px 0;
}
.block-enlaces .row-enlaces {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-top: 40px;
}
.block-enlaces .row-enlaces .enlaces-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 20%;
}
.block-enlaces .row-enlaces .enlaces-card p {
  font-size: 20px;
  color: var(--black-80);
  margin-top: 16px;
  margin-bottom: 24px;
  font-family: "Poppins", sans-serif;
  text-align: center;
  width: 100%;
}
.block-enlaces .row-enlaces .enlaces-card a {
  background-color: var(--blau-dark);
  border-radius: 4px;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  display: block;
  width: fit-content;
  margin: auto auto 0 auto;
}
.block-enlaces .row-enlaces .enlaces-card img {
  width: 55%;
  height: auto;
  margin: 0 auto;
}
.block-img-paralaxed {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 50vh;
  width: 100vw;
  background-attachment: fixed;
  display: flex;
}
.block-img-paralaxed .container {
  margin-top: auto;
  margin-bottom: auto;
}
.block-img-paralaxed h2 {
  font-family: var(--main-font);
  color: #fff;
  font-size: 48px;
  text-align: center;
  display: block;
  width: 100%;
}
.block-img-paralaxed p {
  font-size: 20px;
  color: #fff;
  text-align: center;
}
.block-llistat-card {
  padding: 56px 0;
}
.card-llistat-card {
  display: flex;
  flex-direction: column;
  background-color: var(--blau-light-bg);
  border-radius: 8px;
  gap: 24px;
  padding: 36px;
  height: 100%;
}
.card-llistat-card figure {
  width: 100%;
  height: 400px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.card-llistat-card a {
  background-color: var(--blau-dark);
  font-size: 18px;
  color: #fff;
  margin: auto 0 0 0;
  display: block;
  width: fit-content;
  text-decoration: none;
  border-radius: 4px;
  padding: 8px 16px;
}
.block-links,
.block-downloads {
  padding: 56px 0;
  background-color: var(--grey);
  border-bottom: var(--blau-dark) 1px solid;
}
.block-links h3,
.block-downloads h2 {
  font-size: 32px;
  color: var(--black-100);
  margin: 0 0 48px 0;
  font-family: "Poppins", sans-serif;
}
.block-links p,
.block-downloads p {
  font-size: 24px;
  color: var(--black-80);
  margin: 0 0 12px 0;
  font-family: "Poppins", sans-serif;
}
.block-links a {
  color: var(--blau-dark);
  text-decoration: underline;
  font-size: 16px;
}
.block-downloads a {
  background-color: var(--blau-dark);
  text-decoration: none;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  display: flex;
  width: fit-content;
  padding: 8px 16px;
}

@media (max-width: 991px) {
  #hero-ficha {
    height: 40vh;
  }
  #block-title {
    padding: 40px 0 0 0;
  }
  #block-title h1 {
    font-size: 40px;
  }
  #block-title p.suport-title {
    margin-bottom: 0;
  }
  #block-ckeditor,
  .block-ckeditor {
    padding: 40px 0;
  }
  .block-left,
  .block-right {
    padding: 0 0 40px 0;
  }
  .block-left img,
  .block-right img {
    margin: 0;
    width: 100%;
  }
  .block-enlaces {
    padding: 40px 0;
  }
  .block-enlaces .row-enlaces {
    margin: 0;
    flex-wrap: wrap;
  }
  .block-enlaces .row-enlaces .enlaces-card {
    width: 50%;
    margin-bottom: 40px;
  }
  .block-enlaces .row-enlaces .enlaces-card p {
    margin: 8px 0;
  }
  .card-llistat-card {
    margin-bottom: var(--bs-gutter-x);
  }
  .block-img-paralaxed h2 {
    font-size: 40px;
  }
  .block-img-paralaxed p {
    font-size: 16px;
  }
  .block-llistat-card {
    padding: 40px 0;
  }
  .card-llistat-card {
    padding: 20px;
    gap: 12px;
  }
  .card-llistat-card a {
    width: 100%;
    text-align: center;
  }
  .card-llistat-card figure {
    height: 300px;
    margin-bottom: 0;
  }
  .block-links,
  .block-downloads {
    padding: 20px 0;
  }
  .block-links h3,
  .block-downloads h3 {
    font-size: 24px;
    margin-bottom: 16px;
  }
  .block-links p,
  .block-downloads p {
    font-size: 16px;
  }
}

/* 07. ficha agenda ********************************** */
#contingut-agenda {
  padding: 64px 0;
}

#contingut-agenda .container-dades-ficha p.strong {
  display: flex;
  flex-direction: row;
  gap: 20px;
  font-size: 20px;
  font-weight: 400;
  color: var(--black-100);
}

#contingut-agenda .container-dades-ficha p.strong img {
  width: 24px;
  height: auto;
}
#contingut-agenda .container-dades-ficha p {
  font-size: 16px;
  font-weight: 400;
  color: var(--black-80);
}
#contingut-agenda h2 {
  font-family: var(--main-font);
  font-size: 64px;
  color: var(--black-100);
}

#contingut-agenda h3 {
  font-family: "poppins", sans-serif;
  font-weight: 400;
  font-size: 32px;
  margin: 20px 0 20px 0;
}

#contingut-agenda .default-btn-dark-blue {
  margin-top: 32px;
  margin-bottom: 32px;
  text-transform: inherit;
  display: block;
  width: fit-content;
}

#vermut-reus.ficha-agenda h2 {
  font-size: 64px;
}

/* 08. llistat flex ********************************** */

#hero-ficha.controler-custom-hero .container {
  margin-top: auto;
  margin-bottom: auto;
}

#hero-ficha.controler-custom-hero h1 {
  display: block;
  color: #fff;
  font-family: var(--main-font);
  font-size: 56px;
  text-align: center;
}

#flex-list {
  padding: 88px 0;
}

#flex-list .card-flex-listat {
  display: flex;
  flex-direction: column;
}

#flex-list .card-flex-listat figure {
  min-height: 300px;
  padding: 24px;
  display: flex;
  margin-bottom: 16px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

#flex-list .card-flex-listat figure::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: #00000030;
  top: 0;
  left: 0;
  z-index: 1;
}

#flex-list h2 {
  color: var(--blau-dark);
  font-size: 56px;
  width: 100%;
  margin-bottom: 12px;
}

#flex-list .card-flex-listat figure p {
  font-size: 24px;
  color: #fff;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin: auto 0 0 0;
  z-index: 2;
}

#flex-list .card-flex-listat a {
  display: block;
  width: fit-content;
  margin-top: 24px;
  margin-bottom: 40px;
  text-transform: inherit;
}

/* 09. llistat agenda ********************************** */

.agenda-avui {
  margin-bottom: 128px;
}

.agenda-avui a.default-btn-dark-green {
  margin: 64px auto 0 auto;
}
.agenda-avui h2 {
  font-size: 56px;
  text-align: left;
  width: 100%;
  margin-bottom: 12px;
}
@media (max-width: 991px) {
  .agenda-avui h2 {
    font-size: 40px;
  }
  .agenda-avui {
    padding: 64px 0;
  }
}

.agenda-avui .col-md-12 p {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 56px;
}

.agenda-avui .card-no-pots {
  display: flex;
  flex-direction: row;
  margin-bottom: var(--bs-gutter-x);
  position: relative;
  background-color: #f9f9f9;
}

.agenda-avui .caption-card-no-pots {
  width: 50%;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.agenda-avui .caption-card-no-pots a::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
}
.agenda-avui .caption-card-no-pots h3 {
  margin: 0 0 auto 0;
}
.agenda-avui .caption-card-no-pots h3 a {
  font-size: 24px;
  font-weight: 500;
  color: #000000;
  text-decoration: none;
}

.agenda-avui .caption-card-no-pots p {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-bottom: 16px;
}

.agenda-avui .card-no-pots figure {
  width: 50%;
  padding: 0 calc(var(--bs-gutter-x) * 0.5);
  height: 450px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}
@media (max-width: 1199px) {
  .agenda-avui .card-no-pots {
    flex-direction: column;
  }
  .agenda-avui .card-no-pots figure,
  .agenda-avui .caption-card-no-pots {
    width: 100%;
  }
}

/* 10. icona favoritos ********************************** */
.save-item-component {
    cursor: pointer;
    right: 0;
    top: 75vh;
    min-width: 180px;
    z-index: 1;
    height: 70px;
    background-color: #fff;
    padding-top: 1rem;
    padding-left: 4rem;
    padding-right: 0.5rem;
    background-size: cover;
}
.save-item-component p {
    color: #1f1f5c;
    font-size: 20px;
    margin-bottom: 0;
    line-height: .9;
}
.save-item-component p span {
    color: #1f1f5c;
    font-size: 14px;
    margin-top: -10px;
}
.save-item-image {
    background-image: url("/themes/custom/b5subtheme/img/cor.svg");
    width: 40px;
    height: 35px;
    position: absolute;
    left: 15px;
}
.save-item-component.included .save-item-image,
.save-item-component:hover .save-item-image {
    content: url("/themes/custom/b5subtheme/img/cor_ple.svg");
}

@media (max-width: 768px) {

    .save-item-component {
        min-width: 65px;
    }

    .save-item-component p {
        display: none;
    }

}

.main-font {
    font-family: var(--main-font) !important;
}