.background,
.janko-ferlic-h9iq22jjlgk-unspl-icon {
  width: 100%;
  position: absolute;
  margin: 0 !important;
  right: 0;
  left: 0;
}
.background {
  height: 507px;
  top: 766px;
  background: linear-gradient(
    180deg,
    rgba(61, 89, 102, 0),
    rgba(61, 89, 102, 0.67) 25.46%,
    #3d5966 41.67%
  );
  z-index: 2;
}
.janko-ferlic-h9iq22jjlgk-unspl-icon {
  height: 100%;
  top: 0;
  bottom: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.coffee-sustainability-initiati {
  width: 150px;
  position: relative;
  line-height: 24px;
  font-weight: 500;
  /* white-space: pre-wrap;
  display: flex;
  align-items: center;
  flex-shrink: 0; */
}
.search {
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 26px;
  display: inline-block;
  font-family: var(--web-caption);
  color: var(--primary-2);
  text-align: left;
  min-width: 51px;
}
.text {
  cursor: pointer;
  border: 0;
  padding: var(--padding-3xs) var(--padding-8xs);
  background-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.icon-search {
  height: 23.8px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.icon,
.input-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}
.icon {
  height: 47px;
  justify-content: flex-end;
  padding: 11.600000000000025px var(--padding-3xs) 11.599999999999966px;
}
.input-search {
  width: 312px;
  border-radius: var(--br-xs);
  background-color: var(--color-whitesmoke-100);
  overflow: hidden;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 0 var(--padding-2xs) 0 var(--padding-base);
  gap: var(--gap-xl);
}
.home1 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 43px;
}
.button-menu,
.text1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-9xl-5);
}
.button-menu {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
  cursor: pointer;
  color: var(--highlight-1);
}
.home2 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
  white-space: nowrap;
}
.button-menu1,
.text2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-mid-5);
}
.button-menu1 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home3 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 58px;
}
.button-menu2,
.text3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-2xl);
}
.button-menu2 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home4 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
}
.button-menu3,
.text4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-mid-5);
}
.button-menu3 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home5 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 78px;
  white-space: nowrap;
}
.button-menu4,
.text5 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-2xs);
}
.button-menu4 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home6 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 83px;
  white-space: nowrap;
}
.text6 {
  justify-content: center;
  padding: 0 var(--padding-4xs-5);
}
/* .button-menu5,
.buttons-pages,
.header,
.text6 {
  display: flex;
  flex-direction: row;
  align-items: center;
} */
.button-menu5 {
  border-radius: var(--br-3xs);
  justify-content: center;
  padding: var(--padding-3xs) 0;
}
.buttons-pages,
.header {
  max-width: 100%;
  text-align: left;
  font-family: var(--web-caption);
}
.buttons-pages {
  margin: 0;
  justify-content: center;
  gap: var(--gap-6xl);
  font-size: var(--buttons-medium-size);
  color: var(--primary-2);
}
.header {
  align-self: stretch;
  background-color: var(--neutral-5);
  box-shadow: 0 4px 4px rgba(56, 60, 71, 0.25);
  justify-content: space-between;
  padding: var(--padding-5xl) var(--padding-83xl);
  box-sizing: border-box;
  top: 0;
  z-index: 99;
  position: sticky;
  font-size: var(--web-body3-size);
  color: var(--primary-1);
}
.description1,
.title {
  position: relative;
  max-width: 100%;
}
.title {
  margin: 0;
  width: 700px;
  font-size: inherit;
  line-height: 52px;
  font-weight: 600;
  font-family: inherit;
  display: flex;
  align-items: center;
  text-shadow: 0.8px 0 0#e6eaec, 0 0.8px 0#e6eaec, -0.8px 0 0#e6eaec,
    0-0.8px 0#e6eaec;
}
.description1 {
  flex: 1;
  line-height: 28px;
  font-weight: 500;
  display: inline-block;
}
.description,
.explanation {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.explanation {
  flex-direction: row;
  font-size: var(--web-body1-size);
}
.description {
  flex-direction: column;
  gap: var(--gap-13xl);
}
.icon-chevronleft {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 20px;
}
.button1 {
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 17px;
  font-weight: 500;
  font-family: var(--web-caption);
  color: var(--primary-1);
  text-align: left;
  display: inline-block;
  min-width: 88px;
}
.icon-arrowright {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 20px;
}
.button {
  cursor: pointer;
  border: 0;
  padding: var(--padding-lg) var(--padding-xl);
  background-color: var(--highlight-4);
  height: 56px;
  border-radius: var(--br-xs);
  overflow-x: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--gap-base);
}
.description-cta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-45xl);
  max-width: 100%;
  z-index: 1;
}
.explore-coffee-sustainability {
  align-self: stretch;
  position: relative;
}
.arrow1-icon,
.arrow2-icon,
.arrow3-icon {
  width: 48px;
  height: 24px;
  position: relative;
  object-fit: contain;
}
.arrow2-icon,
.arrow3-icon {
  display: none;
}
.arrows {
  height: 24px;
  flex-direction: column;
  justify-content: flex-start;
}
.arrows,
.arrows-wrapper,
.text-arrow {
  display: flex;
  align-items: flex-start;
}
.arrows-wrapper {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl);
}
.text-arrow {
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-4xl);
}
.calltoaction-map,
.calltoaction-map-wrapper {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  max-width: 100%;
}
.calltoaction-map {
  align-self: stretch;
  flex: 1;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--padding-27xl) 76px;
  z-index: 3;
}
.calltoaction-map-wrapper {
  width: 496px;
  height: 194px;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-39xl-5) 0 58px;
  text-align: center;
  font-size: var(--web-body3-size); margin: 0 auto;
}
.description-cta-parent {
  width: 950px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 69px;
  max-width: 100%;
}
.banner-principal,
.banner-principal-inner {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.banner-principal-inner {
  width: 1070px;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl);
}
.banner-principal {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 199px;
  position: relative;
  gap: 164px;
}
.icons-card {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  left: 2px;
  top: 4px;
  transform: scale(1.347);
}
.wrapper-icons-card {
  width: 49px;
  height: 49px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.browse-our-interactive {
  width: 197px;
  position: relative;
  line-height: 26px;
  display: inline-block;
}
.title-icon,
.title1 {
  display: flex;
  align-items: center;
}
.title1 {
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-5xs) 70.5px;
}
.title-icon {
  height: 99px;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-5xs);
}
.explore-the-world {
  height: 150px;
  flex: 1;
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.card-explanation,
.explication {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
}
.explication {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-5xs);
  font-size: var(--web-body3-size);
}
.card-explanation:hover {
    background: #7493a129;
    border-bottom: 5px solid #fff;
}

.card-explanation {
  width: 386px;
  border-radius: var(--br-13xl) var(--br-13xl) 0 0;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-5xl) var(--padding-7xs);
  gap: var(--gap-base);     color: #fff;
}
.icons-card1 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  left: 2px;
  top: 4px;
  transform: scale(1.347);
}
.wrapper-icons-card1 {
  width: 49px;
  height: 49px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.browse-our-interactive1 {
  width: 194px;
  position: relative;
  line-height: 26px;
  display: inline-block;
}
.title-icon1,
.title2 {
  display: flex;
  align-items: center;
}
.title2 {
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-5xs) 72px;
}
.title-icon1 {
  height: 99px;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-5xs);
}
.explore-the-world1 {
  height: 150px;
  flex: 1;
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.card-explanation1,
.explication1 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
}
.explication1 {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-5xs);
  font-size: var(--web-body3-size);
}
.card-explanation1 {
  width: 386px;
  border-radius: var(--br-13xl) var(--br-13xl) 0 0;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-5xl) var(--padding-7xs);
  gap: var(--gap-base);
}
.icons-card2 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  left: 2px;
  top: 4px;
  transform: scale(1.347);
}
.wrapper-icons-card2 {
  width: 49px;
  height: 49px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.browse-our-interactive2 {
  width: 184px;
  position: relative;
  line-height: 26px;
  display: inline-block;
}
.title-icon2,
.title3 {
  display: flex;
  align-items: center;
}
.title3 {
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-5xs) 77px;
}
.title-icon2 {
  height: 99px;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-5xs);
}
.explore-the-world2 {
  height: 150px;
  flex: 1;
  position: relative;
  /* white-space: pre-wrap; */
  display: inline-block;
  max-width: 100%;
}
.explication2 {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-5xs);
  font-size: var(--web-body3-size);
}
.card-explanation2,
.explication2,
.steps {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
}
.card-explanation2 {
  width: 386px;
  border-radius: var(--br-13xl) var(--br-13xl) 0 0;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-5xl) var(--padding-7xs);
  gap: var(--gap-base);
}
.steps {
  width: 1279px;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 var(--padding-xl);
  gap: var(--gap-xl);
}
.explore-coffee-sustainability1 {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 35px;
  font-weight: 500;
  font-family: inherit;
}
.title4 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-3xs) var(--padding-xl);
  text-align: left;
  font-size: var(--web-h3-size);
  color: var(--color-white);
}
.button-scroll-icon {
  width: 100%;
  height: 100%;
  z-index: 4;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1.321);
}
.wrapper-button-scroll {
  width: 56px;
  height: 56px;
  position: absolute;
  margin: 0 !important;
  bottom: 71px;
  right: 46px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-principal-parent,
.steps-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 100%;
}
.steps-parent {
  align-items: center;
  position: relative;
  gap: 104px;
  z-index: 3;
  margin-top: -167px;
  text-align: center;
  font-size: var(--buttons-medium-size);
}
.banner-principal-parent {
  align-items: flex-start;
  text-align: left;
  font-size: var(--web-h1-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.the-information-on {
  position: relative;
  line-height: 26px;
}
.alert {
  align-self: stretch;
  background-color: var(--primary-4);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-8xs) var(--padding-xl);
}
.copyright-icon,
.map-icon,
.top3-icon {
  position: absolute;
  height: 83.72%;
  width: 81.78%;
  top: 0;
  right: 18.17%;
  bottom: 16.28%;
  left: 0.06%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.copyright-icon,
.top3-icon {
  height: 16.27%;
  width: 81.66%;
  top: 83.72%;
  right: 18.28%;
  bottom: 0.01%;
}
.copyright-icon {
  height: 3.75%;
  width: 16.12%;
  top: 79.98%;
  right: 83.82%;
  bottom: 16.27%;
  z-index: 1;
}
.search-icon,
.zoom-rest-icon {
  width: 38px;
  height: 39px;
  position: relative;
  object-fit: cover;
}
.zoom-rest-icon {
  height: 139px;
}
.tools-map {
  position: absolute;
  height: 22.8%;
  width: 2.22%;
  top: 9.62%;
  right: 95.15%;
  bottom: 67.58%;
  left: 2.63%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.7000000000000455px 0;
  box-sizing: border-box;
  gap: 21px;
  z-index: 1;
}
.subtract-icon {
  height: 100px;
  width: 49px;
  position: relative;
}
.arrows-icon {
  height: 23.8px;
  width: 32px;
  margin: 0 !important;
  position: absolute;
  top: 38.1px;
  left: 10px;
  object-fit: contain;
  z-index: 1;
}
.button-hidefilter {
  height: 100px;
  width: 118px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-xl) 0 0;
  box-sizing: border-box;
  position: relative;
}
.map-filters {
  align-self: stretch;
  flex: 1;
  position: relative;
  letter-spacing: 0.02em;
}
.title-filter {
  position: absolute;
  top: 24px;
  left: 111px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}
.icon-location {
  height: 32px;
  width: 32px;
  position: relative;
}
.location {
  align-self: stretch;
  flex: 1;
  position: relative;
  line-height: 26px;
  display: flex;
  align-items: center;
}
.subtitle {
  height: 26px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.icon-alert {
  height: 16px;
  width: 16px;
  position: relative;
  display: none;
}
.subtitle-filter {
  width: 89px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-xl) 0 0;
  box-sizing: border-box;
  gap: var(--gap-9xs);
}
.time-icon {
  height: 13px;
  width: 220px;
  position: relative;
}
.div,
.div1,
.div2 {
  align-self: stretch;
  width: 26px;
  position: relative;
  line-height: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.div1,
.div2 {
  width: 30px;
}
.div2 {
  width: 26px;
}
.years {
  height: 12px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.filter-drag,
.selection {
  display: flex;
  justify-content: flex-start;
}
.selection {
  align-self: stretch;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 3px 79px;
  font-size: var(--web-overline-size);
  color: var(--primary-4);
}
.filter-drag {
  position: absolute;
  top: 261px;
  left: 45.5px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-sm);
}
.icon-chevronleft1 {
  height: 18px;
  width: 18px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.button3 {
  position: relative;
  line-height: 14px;
  font-weight: 500;
}
.icon-chevronright {
  height: 18px;
  width: 18px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.button2 {
  position: absolute;
  top: 695px;
  left: 44px;
  border-radius: var(--br-5xs);
  background-color: var(--highlight-4);
  height: 36px;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-5xs) var(--padding-base);
  box-sizing: border-box;
  gap: var(--gap-5xs);
  font-size: var(--web-body3-size);
  color: var(--primary-1);
}
.icon-location1 {
  height: 32px;
  width: 32px;
  position: relative;
}
.location1 {
  align-self: stretch;
  flex: 1;
  position: relative;
  line-height: 26px;
  display: flex;
  align-items: center;
}
.subtitle1 {
  height: 26px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.icon-alert1 {
  height: 16px;
  width: 16px;
  position: relative;
}
.subtitle-filter1 {
  position: absolute;
  top: 99px;
  left: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-9xs);
}
.icon-location2 {
  height: 32px;
  width: 32px;
  position: relative;
}
.location2 {
  align-self: stretch;
  flex: 1;
  position: relative;
  line-height: 26px;
  display: flex;
  align-items: center;
}
.subtitle2 {
  height: 26px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.icon-alert2 {
  height: 16px;
  width: 16px;
  position: relative;
}
.subtitle-filter2 {
  width: 121px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-xl) 0 0;
  box-sizing: border-box;
  gap: var(--gap-9xs);
}
.icon2 {
  height: 36px;
  width: 24px;
  object-fit: contain;
}
.icon-child {
  height: 14px;
  width: 0;
  position: relative;
}
.icon1 {
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-3xs);
  box-sizing: border-box;
  gap: var(--gap-9xs);
}
.subtitle3 {
  position: relative;
}
.input {
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: var(--br-lg);
  background-color: var(--primary-1);
  border: 1px solid var(--primary-4);
  box-sizing: border-box;
  width: 224px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.title6 {
  height: 13px;
  flex: 1;
  position: relative;
  font-weight: 600;
  display: inline-block;
}
.title5 {
  position: absolute;
  top: 0;
  left: 13px;
  border-radius: var(--br-11xs);
  background-color: var(--primary-1);
  height: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-9xs);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--web-overline-size);
}
.filter-dropdown {
  align-self: stretch;
  height: 45px;
  position: relative;
  font-size: var(--web-caption-size);
  color: var(--primary-4);
  font-family: var(--font-source-sans-pro);
}
.sdg {
  position: absolute;
  top: 582px;
  left: 40px;
  background-color: var(--primary-1);
  border-left: 1px solid var(--primary-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs);
}
.icon-location3 {
  height: 32px;
  width: 32px;
  position: relative;
}
.location3 {
  align-self: stretch;
  flex: 1;
  position: relative;
  line-height: 26px;
  display: flex;
  align-items: center;
}
.subtitle4 {
  height: 26px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.icon-alert3 {
  height: 16px;
  width: 16px;
  position: relative;
}
.subtitle-filter3 {
  width: 177px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-xl) 0 0;
  box-sizing: border-box;
  gap: var(--gap-9xs);
}
.icon4 {
  height: 36px;
  width: 24px;
  object-fit: contain;
}
.icon-item {
  height: 14px;
  width: 0;
  position: relative;
}
.icon3 {
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-3xs);
  box-sizing: border-box;
  gap: var(--gap-9xs);
}
.organization-name {
  position: relative;
}
.input1 {
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: var(--br-lg);
  background-color: var(--primary-1);
  border: 1px solid var(--primary-4);
  box-sizing: border-box;
  width: 224px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.organizations {
  height: 13px;
  flex: 1;
  position: relative;
  font-weight: 600;
  display: inline-block;
}
.title7 {
  position: absolute;
  top: 0;
  left: 13px;
  border-radius: var(--br-11xs);
  background-color: var(--primary-1);
  height: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-9xs);
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
  font-size: var(--web-overline-size);
}
.filter-dropdown1 {
  align-self: stretch;
  height: 45px;
  position: relative;
  font-size: var(--web-caption-size);
  color: var(--primary-4);
  font-family: var(--font-source-sans-pro);
}
.organization {
  position: absolute;
  top: 469px;
  left: 40px;
  border-left: 0.4px solid var(--primary-4);
  box-sizing: border-box;
  width: 239px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs);
}
.icon-location4 {
  height: 32px;
  width: 32px;
  position: relative;
}
.location4 {
  align-self: stretch;
  flex: 1;
  position: relative;
  line-height: 26px;
  display: flex;
  align-items: center;
}
.subtitle5 {
  height: 26px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.icon-alert4 {
  height: 16px;
  width: 16px;
  position: relative;
}
.subtitle-filter4 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 27px 0 0;
  gap: var(--gap-9xs);
}
.icon6 {
  height: 36px;
  width: 24px;
  object-fit: contain;
}
.icon-inner {
  height: 14px;
  width: 0;
  position: relative;
}
.icon5 {
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-3xs);
  box-sizing: border-box;
  gap: var(--gap-9xs);
}
.organization-role {
  position: relative;
}
.input2 {
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: var(--br-lg);
  background-color: var(--primary-1);
  border: 1px solid var(--primary-4);
  box-sizing: border-box;
  width: 224px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.organizations-role {
  height: 13px;
  flex: 1;
  position: relative;
  font-weight: 600;
  display: inline-block;
}
.title8 {
  position: absolute;
  top: 0;
  left: 13px;
  border-radius: var(--br-11xs);
  background-color: var(--primary-1);
  height: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-9xs);
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
  font-size: var(--web-overline-size);
}
.filter-dropdown2 {
  align-self: stretch;
  height: 45px;
  position: relative;
  font-size: var(--web-caption-size);
  color: var(--primary-4);
  font-family: var(--font-source-sans-pro);
}
.type-organization {
  position: absolute;
  top: 356px;
  left: 40px;
  border-left: 0.4px solid var(--primary-4);
  box-sizing: border-box;
  width: 239px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs);
}
.icon8 {
  height: 36px;
  width: 24px;
  object-fit: contain;
}
.vector-icon {
  height: 14px;
  width: 0;
  position: relative;
}
.icon7 {
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-3xs);
  box-sizing: border-box;
  gap: var(--gap-9xs);
}
.subtitle6 {
  position: relative;
  line-height: 18px;
}
.input3 {
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: var(--br-lg);
  background-color: var(--primary-1);
  border: 1px solid var(--primary-4);
  box-sizing: border-box;
  width: 224px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.title10 {
  height: 10px;
  flex: 1;
  position: relative;
  line-height: 10px;
  font-weight: 500;
  display: inline-block;
}
.title9 {
  position: absolute;
  top: 0;
  left: 13px;
  border-radius: var(--br-11xs);
  background-color: var(--primary-1);
  height: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-9xs);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--web-overline-size);
}
.filter-dropdown3 {
  position: absolute;
  top: 192px;
  left: 40px;
  width: 239px;
  height: 45px;
  font-size: var(--web-caption-size);
  color: var(--primary-4);
}
.icon10 {
  height: 36px;
  width: 24px;
  object-fit: contain;
}
.icon-child1 {
  height: 14px;
  width: 0;
  position: relative;
}
.icon9 {
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-3xs);
  box-sizing: border-box;
  gap: var(--gap-9xs);
}
.subtitle7 {
  position: relative;
  line-height: 18px;
}
.input4 {
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: var(--br-lg);
  background-color: var(--primary-1);
  border: 1px solid var(--primary-4);
  box-sizing: border-box;
  width: 224px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.title12 {
  height: 10px;
  flex: 1;
  position: relative;
  line-height: 10px;
  font-weight: 500;
  display: inline-block;
}
.title11 {
  position: absolute;
  top: 0;
  left: 13px;
  border-radius: var(--br-11xs);
  background-color: var(--primary-1);
  height: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-9xs);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--web-overline-size);
}
.filter-dropdown4 {
  position: absolute;
  top: 139px;
  left: 40px;
  width: 239px;
  height: 45px;
  font-size: var(--web-caption-size);
  color: var(--primary-4);
}
.filter-bar {
  height: 879px;
  width: 319px;
  position: relative;
  background-color: var(--primary-1);
  display: none;
}
.map-filter,
.shadow {
  position: absolute;
  height: 100%;
  top: 0;
  bottom: 0;
}
.map-filter {
  width: 21.03%;
  right: 0;
  left: 78.97%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 374px 0;
  box-sizing: border-box;
  z-index: 1;
}
.shadow {
  width: 81.83%;
  right: 18.17%;
  left: 0;
  background-color: rgba(244, 244, 244, 0.64);
  z-index: 2;
}
.welcome-explore-each {
  margin: 0;
}
.welcome-explore-each-container {
  margin: 0;
  align-self: stretch;
  height: 54px;
  position: relative;
  font-size: inherit;
  line-height: 35px;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
}
.icon-chevronleft2 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 20px;
}
.button5 {
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 17px;
  font-weight: 500;
  font-family: var(--web-caption);
  color: var(--primary-1);
  text-align: left;
  display: inline-block;
  min-width: 106px;
}
.button-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs-5) 0 0;
}
.icon-chevronright1 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 20px;
}
.button4 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-lg) var(--padding-xl);
  background-color: var(--highlight-4);
  align-self: stretch;
  border-radius: var(--br-xs);
  overflow-x: auto;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.button-wrapper,
.button4,
.introduction {
  display: flex;
  align-items: flex-start;
}
.button-wrapper {
  align-self: stretch;
  height: 56px;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}
.introduction {
  position: absolute;
  width: 47.43%;
  top: calc(50% - 72.5px);
  right: 35.4%;
  left: 17.17%;
  flex-direction: column;
  justify-content: flex-start;
  gap: 36px;
  max-width: 100%;
  z-index: 3;
  text-align: center;
  font-size: var(--web-h3-size);
}
.map-filter-exploring {
  height: 879px;
  width: 1712px;
  position: relative;
  max-width: 121%;
  flex-shrink: 0;
}
.alert-parent,
.map-filter-exploring-wrapper {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.map-filter-exploring-wrapper {
  flex-direction: row;
  padding: 0 0 0 var(--padding-xl);
  color: var(--neutral-5);
}
.alert-parent {
  flex-direction: column;
  padding: 0 0 116px;
  gap: 3px;
  text-align: left;
  font-size: var(--buttons-medium-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.a-collaborative-effort {
  margin: 0;
  width: 990px;
  position: relative;
  font-size: inherit;
  line-height: 46px;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  max-width: 100%;
}
.a-collaborative-effort-to-fost-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
  max-width: 100%;
}
.coffee-sustainability-initiati1 {
  align-self: stretch;
  position: relative;
  font-size: var(--web-body3-size);
}
.frame-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-45xl);
  max-width: 100%;
  text-align: center;
}
.logo-itc-icon {
  height: 100px;
  width: 248.2px;
  position: relative;
  object-fit: cover;
}
.logo-europeanunion-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.logo-europeanunion-wrapper {
  height: 88.5px;
  width: 113.4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xs-5) 0 0;
  box-sizing: border-box;
}
.vector-icon1,
.vector-icon2 {
  height: 23px;
  width: 23px;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 15.8px;
  object-fit: contain;
}
.vector-icon2 {
  height: 18.9px;
  width: 18.9px;
  top: 18.8px;
  left: 51.4px;
  z-index: 1;
}
.vector-icon3 {
  height: 23.6px;
  width: 23.5px;
  top: -7.9px;
  right: -22px;
  object-fit: contain;
}
.vector-icon3,
.vector-icon4,
.vector-icon5 {
  position: absolute;
  margin: 0 !important;
}
.vector-icon4 {
  height: 35.3px;
  width: 35.2px;
  right: -30.6px;
  bottom: 6.8px;
  object-fit: contain;
  z-index: 2;
}
.vector-icon5 {
  height: 24px;
  width: 24.2px;
  right: -19px;
  bottom: -4.8px;
  z-index: 3;
}
.vector-icon6,
.vector-icon7 {
  width: 19.5px;
  height: 19.7px;
  position: relative;
  flex-shrink: 0;
  debug_commit: f6aba90;
  z-index: 1;
}
.vector-icon7 {
  height: 30.9px;
  width: 30.7px;
  z-index: 4;
}
.vector-group,
.vector-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.vector-wrapper {
  height: 30.9px;
  flex-direction: row;
  padding: 0 0 0 6.69999999999709px;
  box-sizing: border-box;
}
.vector-group {
  align-self: stretch;
  flex-direction: column;
  gap: 10.600000000000364px;
}
.vector-icon8 {
  height: 35.6px;
  width: 35.4px;
  position: absolute;
  margin: 0 !important;
  bottom: 10.8px;
  left: -4.6px;
  object-fit: contain;
  z-index: 5;
}
.logo-itc-inner,
.vector-parent {
  display: flex;
  align-items: flex-start;
}
.vector-parent {
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  position: relative;
}
.logo-itc-inner {
  height: 66px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 4.799999999999727px;
  box-sizing: border-box;
}
.edge-symbols-icon {
  align-self: stretch;
  height: 14.3px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.graph-symbols-icon,
.graph-symbols-icon1 {
  width: 46.7px;
  height: 14.2px;
  position: relative;
}
.graph-symbols-icon1 {
  width: 53.1px;
}
.heap-symbols,
.queue-symbols {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.heap-symbols {
  align-self: stretch;
  gap: 5.9500000000000455px;
}
.queue-symbols {
  height: 65.6px;
  padding: var(--padding-2xs) 0 0;
  box-sizing: border-box;
}
.vertex-symbols-icon {
  height: 77px;
  width: 0.5px;
  position: relative;
}
.data-aggregator-icon {
  height: 12.6px;
  width: 12.2px;
  position: relative;
}
.data-aggregator-icon1,
.data-aggregator-icon2 {
  height: 12.6px;
  width: 8.7px;
  position: relative;
}
.data-aggregator-icon2 {
  width: 8.6px;
}
.vector-icon10,
.vector-icon9 {
  position: absolute;
  top: 0;
  left: 0;
  width: 4.3px;
  height: 12.6px;
}
.vector-icon10 {
  left: 4.3px;
  width: 12.1px;
  z-index: 1;
}
.logic-gate {
  height: 12.6px;
  width: 16.4px;
  position: relative;
}
.function-call-stack {
  height: 12.9px;
  width: 11.5px;
  position: relative;
}
.data-aggregator-icon3 {
  height: 13.1px;
  width: 11.9px;
  position: relative;
  min-height: 13px;
}
.data-aggregator-icon4 {
  height: 12.6px;
  width: 9.2px;
  position: relative;
}
.data-aggregator-icon5 {
  height: 13.1px;
  width: 8.8px;
  position: relative;
  min-height: 13px;
}
.cluster-shape,
.cycle-shape {
  display: flex;
  justify-content: flex-start;
}
.cycle-shape {
  height: 13.2px;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.842857142860469px;
}
.cluster-shape {
  flex-direction: column;
  align-items: flex-start;
  padding: 4.599999999999909px 0 0;
}
.shape-collection {
  align-self: stretch;
  width: 0;
  position: relative;
  display: inline-block;
}
.hierarchy-shape {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-7xs-5);
}
.link-list-icon,
.link-list-icon1 {
  height: 12.6px;
  width: 9.3px;
  position: relative;
}
.link-list-icon1 {
  height: 13.1px;
  width: 12.8px;
  min-height: 13px;
}
.vector-icon11 {
  width: 10.8px;
  height: 12.6px;
  position: relative;
}
.data-entry {
  height: 12.6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-9xs) 0 0;
  box-sizing: border-box;
}
.link-list-icon2,
.link-list-icon3 {
  height: 12.6px;
  width: 12.1px;
  position: relative;
}
.link-list-icon3 {
  height: 13.1px;
  width: 11.9px;
  min-height: 13px;
}
.link-list-icon4,
.link-list-icon5 {
  height: 12.6px;
  width: 9.3px;
  position: relative;
}
.link-list-icon5 {
  width: 4.2px;
}
.algorithm-tree-icon,
.link-list-icon6 {
  height: 13.1px;
  width: 12.8px;
  position: relative;
  min-height: 13px;
}
.algorithm-tree-icon {
  height: 12.9px;
  width: 11.6px;
}
.link-list-parent {
  align-self: stretch;
  height: 13.1px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-10xs) 0 0;
  box-sizing: border-box;
  gap: 0.3999999999941792px;
}
.hierarchy-shape-parent {
  align-self: stretch;
  flex-direction: column;
  padding: 0 var(--padding-12xs) 0 0;
  gap: 2.900000000000091px;
}
.hierarchy-shape-parent,
.logo-itc,
.stack-symbols,
.stack-symbols-inner {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.stack-symbols-inner {
  height: 55px;
  flex-direction: column;
  padding: 18.09999999999991px 0 0;
  box-sizing: border-box;
}
.logo-itc,
.stack-symbols {
  align-self: stretch;
  flex-direction: row;
  gap: 13.799999999995634px;
}
.logo-itc {
  overflow: hidden;
  align-items: flex-end;
  padding: 0 4.600000000005821px;
  position: relative;
  gap: 40.30000000000291px;
}
.banner-logos,
.logo-itc-wrapper {
  display: flex;
  align-items: flex-start;
}
.logo-itc-wrapper {
  height: 88.5px;
  width: 318.4px;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-xs-5) 0 0;
  box-sizing: border-box;
}
.banner-logos {
  align-self: stretch;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-xl);
  font-size: var(--font-size-sm-4);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.data-flow,
.text8 {
  align-self: stretch;
  position: relative;
}
.text8 {
  margin: 0;
  font-size: inherit;
  line-height: 35px;
  font-weight: 500;
  font-family: inherit;
}
.data-flow {
  font-size: var(--buttons-medium-size);
  line-height: 26px;
}
.text7 {
  width: 710px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  gap: var(--gap-26xl);
  max-width: 100%;
}
.icon-chevronleft3 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  min-height: 20px;
}
.button7 {
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 17px;
  font-weight: 500;
  font-family: var(--web-caption);
  color: var(--primary-1);
  text-align: left;
}
.button-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs-5) 0 0;
}
.icon-arrowright1 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 20px;
}
.button6,
.nested-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.button6 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-lg) var(--padding-xl);
  background-color: var(--highlight-4);
  height: 56px;
  border-radius: var(--br-xs);
  flex-direction: row;
  box-sizing: border-box;
  gap: var(--gap-base);
}
.nested-list {
  flex-direction: column;
  padding: var(--padding-29xl) 0 0;
}
.button-stack,
.calltoaction {
  flex-direction: row;
  box-sizing: border-box;
}
.calltoaction {
  flex: 1;
  border-radius: var(--br-5xl);
  background-color: var(--colors-white);
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--padding-5xl) var(--padding-34xl);
  max-width: 100%;
  gap: var(--gap-xl);
}
.button-stack {
  align-self: stretch;
  justify-content: flex-start;
  padding: 0 var(--padding-11xs);
  font-size: var(--web-h3-size);
  color: var(--primary-5);
}
.button-stack,
.frame-parent,
.home-inner {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-parent {
  width: 1237px;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-69xl);
}
.home-inner {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl) 144px var(--padding-2xl);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--web-h2-size);
  color: var(--colors-white);
  font-family: var(--web-caption);
}
.logo-europeanunion-icon1,
.logo-itc-icon1 {
  height: 41px;
  position: relative;
  min-height: 41px;
}
.logo-itc-icon1 {
  width: 102.5px;
  object-fit: cover;
}
.logo-europeanunion-icon1 {
  width: 60.2px;
  overflow: hidden;
  flex-shrink: 0;
}
.star-rating-icon,
.tag-cloud-icon {
  height: 12.3px;
  width: 12.1px;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 8.3px;
  object-fit: contain;
}
.star-rating-icon {
  height: 10.1px;
  width: 9.9px;
  top: 10px;
  left: 27.1px;
  z-index: 1;
}
.vector-icon12 {
  height: 12.6px;
  width: 12.4px;
  top: -4.2px;
  right: -11.6px;
  object-fit: contain;
}
.gauge-icon,
.vector-icon12,
.vector-icon13 {
  position: absolute;
  margin: 0 !important;
}
.vector-icon13 {
  height: 18.8px;
  width: 18.6px;
  right: -16.2px;
  bottom: 3.6px;
  object-fit: contain;
  z-index: 2;
}
.gauge-icon {
  height: 12.8px;
  width: 12.8px;
  right: -10.1px;
  bottom: -2.5px;
  z-index: 3;
}
.parabola-shape-icon {
  position: absolute;
  top: 16.1px;
  left: 3.5px;
  width: 16.2px;
  height: 16.5px;
  z-index: 4;
}
.quadrant-chart-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 10.3px;
  height: 10.5px;
  z-index: 1;
}
.parabola-shape-parent {
  height: 32.6px;
  width: 19.7px;
  position: relative;
}
.star-diagram-icon {
  height: 18.9px;
  width: 18.7px;
  position: absolute;
  margin: 0 !important;
  bottom: 5.9px;
  left: -2.4px;
  object-fit: contain;
  z-index: 5;
}
.bubble-chart,
.tree-map {
  display: flex;
  align-items: flex-start;
}
.bubble-chart {
  flex-direction: row;
  justify-content: flex-start;
  position: relative;
}
.tree-map {
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 var(--padding-10xs-5);
}
.isometric-graph-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 54.1px;
  height: 7.6px;
}
.isometric-graph-icon1,
.isometric-graph-icon2 {
  position: absolute;
  top: 11.1px;
  left: 0;
  width: 24.6px;
  height: 7.6px;
}
.isometric-graph-icon2 {
  top: 21.5px;
  width: 28px;
}
.isometric-graph-parent {
  align-self: stretch;
  height: 29.1px;
  position: relative;
}
.fisheye-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5.900000000000091px 0 0;
}
.heatmap-icon,
.vector-icon14 {
  height: 41px;
  width: 0.5px;
  position: relative;
}
.vector-icon14 {
  width: 6.5px;
  height: 6.7px;
}
.image-stack {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.599999999999909px 0 0;
  box-sizing: border-box;
}
.vector-icon15 {
  width: 4.6px;
  height: 6.7px;
  position: relative;
}
.image-stack1 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.599999999999909px 0 0;
  box-sizing: border-box;
}
.vector-icon16 {
  width: 4.5px;
  height: 6.7px;
  position: relative;
}
.image-stack2 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.599999999999909px 0 0;
  box-sizing: border-box;
}
.vector-icon17 {
  width: 2.2px;
  height: 6.7px;
  position: relative;
}
.image-stack3 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.599999999999909px 0 0;
  box-sizing: border-box;
}
.vector-icon18 {
  width: 6.4px;
  height: 6.7px;
  position: relative;
}
.image-stack4 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.599999999999909px 0 0;
  box-sizing: border-box;
}
.vector-icon19 {
  width: 6.1px;
  height: 6.9px;
  position: relative;
}
.image-stack5 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.599999999999909px 0 0;
  box-sizing: border-box;
}
.vector-icon20 {
  width: 6.3px;
  height: 7px;
  position: relative;
}
.image-stack6 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs-5) 0 0;
  box-sizing: border-box;
}
.vector-icon21 {
  width: 4.9px;
  height: 6.7px;
  position: relative;
}
.image-stack7 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.599999999999909px 0 0;
  box-sizing: border-box;
}
.vector-icon22 {
  width: 4.6px;
  height: 7px;
  position: relative;
}
.image-stack8 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs-5) var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.text9 {
  align-self: stretch;
  flex: 1;
  position: relative;
}
.cascading-list {
  width: 52.1px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.vector-icon23,
.vector-icon24 {
  position: absolute;
  top: 0.1px;
  left: 0;
  width: 4.9px;
  height: 6.7px;
}
.vector-icon24 {
  top: 0;
  left: 5.3px;
  width: 6.8px;
  height: 7px;
}
.vector-icon25,
.vector-icon26,
.vector-icon27 {
  position: absolute;
  top: 0.1px;
  left: 12.5px;
  width: 5.7px;
  height: 6.7px;
}
.vector-icon26,
.vector-icon27 {
  left: 20.6px;
  width: 6.4px;
}
.vector-icon27 {
  top: 0;
  left: 27.2px;
  width: 6.3px;
  height: 7px;
}
.vector-icon28,
.vector-icon29,
.vector-icon30 {
  position: absolute;
  top: 0.1px;
  left: 33.9px;
  width: 4.9px;
  height: 6.7px;
}
.vector-icon29,
.vector-icon30 {
  left: 39.1px;
  width: 2.2px;
}
.vector-icon30 {
  top: 0;
  left: 41.9px;
  width: 6.8px;
  height: 7px;
}
.data-aggregator-icon6 {
  position: absolute;
  top: 0.1px;
  left: 49.2px;
  width: 6.1px;
  height: 6.9px;
}
.gallery-panel {
  align-self: stretch;
  height: 7px;
  position: relative;
}
.maze-shape {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.6000000000003638px;
}
.bell-curve,
.maze-shape,
.square-wave {
  flex: 1;
  align-items: flex-start;
}
.bell-curve {
  height: 29.3px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 9.599999999999907px 0 0;
  box-sizing: border-box;
}
.square-wave {
  height: 41px;
  gap: 7.149999999994179px;
}
.logo-itc1,
.logos,
.square-wave {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.logo-itc1 {
  flex: 1;
  overflow: hidden;
  align-items: flex-end;
  padding: 0 2.400000000008731px;
  box-sizing: border-box;
  position: relative;
  gap: 21.30000000000291px;
  min-width: 109px;
}
.logos {
  align-self: stretch;
  align-items: flex-start;
  gap: var(--gap-13xl);
}
.the-coffee-sustainability {
  margin: 0;
}
.the-coffee-sustainability-container {
  height: 54px;
  position: relative;
  font-size: var(--web-caption-size);
  line-height: 18px;
  font-family: var(--web-caption);
  color: var(--colors-gray4);
  text-align: center;
  display: inline-block;
}
.colaboration {
  width: 394.7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-32xl);
  box-sizing: border-box;
  gap: var(--gap-12xl);
  flex-shrink: 0;
  debug_commit: f6aba90;
}
.icon-chevronleft4 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button10 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 57px; color:#fff;
}
.icon-chevronright2 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.error-handler {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button9 {
  width: 57px;
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft5 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button12 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 83px;
}
.icon-chevronright3 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.button11,
.data-process {
  align-self: stretch;
  box-sizing: border-box;
}
.data-process {
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
}
.button11 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  gap: var(--gap-11xs); color:#fff;
}
.icon-chevronleft6 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button14 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
}
.icon-chevronright4 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.user-output {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button13,
.column1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.button13 {
  width: 65px;
  height: 19px;
  border-radius: var(--br-7xs);
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs); color:#fff;
}
.column1 {
  flex: 1;
  gap: var(--gap-41xl);
  min-width: 54px;
}
.icon-chevronleft7 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button16 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 43px; color:#fff;
}
.icon-chevronright5 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons3 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.underline {
  width: 43px;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button15 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft8 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button18 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 58px; color:#fff;
}
.icon-chevronright6 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons4 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.underline1 {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button17 {
  width: 58px;
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs); color:#fff;
}
.icon-chevronleft9 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button20 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px; color:#fff;
}
.icon-chevronright7 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons5 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.button19,
.underline2 {
  align-self: stretch;
  box-sizing: border-box;
}
.underline2 {
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
}
.button19 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 var(--padding-11xs);
  gap: var(--gap-11xs); color:#fff;
}
.button19,
.button8,
.column2 {
  justify-content: flex-start;
}
.column2 {
  width: 65px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-41xl);
}
.button8 {
  width: 352px;
  gap: var(--gap-185xl);
  flex-shrink: 0;
  debug_commit: f6aba90;
  font-size: var(--buttons-medium-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.button8,
.information,
.stepper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.information {
  flex: 1;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}
.stepper {
  justify-content: flex-start;
  padding: 0 var(--padding-45xl);
  box-sizing: border-box;
}
.split,
.split-wrapper,
.stepper {
  align-self: stretch;
  max-width: 100%;
}
.split {
  flex: 1;
  position: relative;
  background-color: var(--colors-white);
}
.split-wrapper {
  height: 2px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-47xl);
  box-sizing: border-box;
}
.coffee-sustainability-initiati2 {
  width: 150px;
  position: relative;
  line-height: 18px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.rights1 {
  position: absolute;
  height: 95.45%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 4.55%;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs) 0 0;
  box-sizing: border-box;
}
.all-rights-reserved {
  position: absolute;
  top: 26px;
  left: 114px;
  line-height: 18px;
  color: var(--colors-gray4);
  text-align: center;
  z-index: 1;
}
.rights {
  align-self: stretch;
  height: 44px;
  position: relative;
}
.constant-value {
  width: 265px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia {
  width: 29px;
  height: 29px;
  position: relative;
}
.data-validator {
  height: 33.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xs-5) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia1 {
  width: 32px;
  height: 32px;
  position: relative;
}
.data-sorter {
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia2 {
  width: 32px;
  height: 32px;
  position: relative;
}
.data-sorter1 {
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia3 {
  height: 38px;
  width: 37.9px;
  position: relative;
  min-height: 38px;
}
.socialmedia {
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xs) 0;
  box-sizing: border-box;
  gap: 23.966666666664725px;
}
.final,
.frame-container {
  align-self: stretch;
  align-items: flex-start;
}
.final {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 var(--padding-45xl);
  gap: var(--gap-xl);
}
.frame-container {
  gap: var(--gap-4xl);
  max-width: 100%;
  font-size: var(--web-caption-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.footer,
.frame-container,
.home {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.footer {
  align-self: stretch;
  background-color: var(--neutral-5);
  align-items: flex-start;
  padding: var(--padding-62xl) var(--padding-21xl) var(--padding-14xl);
  box-sizing: border-box;
  gap: var(--gap-96xl);
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-sm-4);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.home {
  width: 100%;
  position: relative;
  background-color: var(--primary-5);
  overflow: hidden;
  align-items: flex-end;
  gap: var(--gap-13xl);
  letter-spacing: normal;
}
@media screen and (max-width: 1250px) {
  .coffee-sustainability-initiati {
    display: none;
  }
  .header {
    padding-left: var(--padding-32xl);
    padding-right: var(--padding-32xl);
    box-sizing: border-box;
  }
  .calltoaction,
  .steps {
    flex-wrap: wrap;
  }
  .calltoaction {
    padding-left: var(--padding-7xl);
    padding-right: var(--padding-7xl);
    box-sizing: border-box;
  }
  .stepper {
    padding-left: var(--padding-13xl);
    padding-right: var(--padding-13xl);
    box-sizing: border-box;
  }
  .final,
  .split-wrapper {
    padding-left: var(--padding-14xl);
    padding-right: var(--padding-14xl);
    box-sizing: border-box;
  }
  .final {
    padding-left: var(--padding-13xl);
    padding-right: var(--padding-13xl);
  }
}
@media screen and (max-width: 1050px) {
  .description-cta {
    gap: 32px 64px;
  }
  .description-cta-parent {
    gap: 34px 69px;
  }
  .banner-principal {
    padding-bottom: 129px;
    box-sizing: border-box;
  }
  .alert-parent {
    padding-bottom: var(--padding-56xl);
    box-sizing: border-box;
  }
  .home-inner {
    padding-bottom: 94px;
    box-sizing: border-box;
  }
  .information {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 750px) {
  .header {
    padding-left: var(--padding-6xl);
    padding-right: var(--padding-6xl);
    box-sizing: border-box;
  }
  .title {
    font-size: var(--font-size-19xl);
    line-height: 42px;
  }
  .calltoaction-map-wrapper {
    padding-left: var(--padding-10xl);
    padding-right: var(--padding-10xl);
    box-sizing: border-box;
  }
  .banner-principal {
    gap: 82px 164px;
    padding-bottom: 84px;
    box-sizing: border-box;
  }
  .steps-parent {
    gap: 52px 104px;
  }
  .alert-parent {
    padding-bottom: 49px;
    box-sizing: border-box;
  }
  .a-collaborative-effort {
    font-size: var(--font-size-13xl);
    line-height: 37px;
  }
  .frame-group {
    gap: 32px 64px;
  }
  .text7 {
    gap: 22px 45px;
  }
  .frame-parent {
    gap: 44px 88px;
  }
  .final {
    flex-wrap: wrap;
  }
  .footer {
    gap: 57px 115px;
    padding-top: var(--padding-34xl);
    padding-bottom: var(--padding-2xl);
    box-sizing: border-box;
  }
  .home {
    gap: 16px 32px;
  }
}
@media screen and (max-width: 450px) {
  .buttons-pages {
    display: none;
  }
  .title {
    font-size: var(--font-size-10xl);
    line-height: 31px;
  }
  .description {
    gap: 16px 32px;
  }
  .description-cta {
    gap: 16px 64px;
  }
  .calltoaction-map {
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }
  .description-cta-parent {
    gap: 17px 69px;
  }
  .banner-principal {
    gap: 41px 164px;
  }
  .title1,
  .title2,
  .title3 {
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }
  .explore-coffee-sustainability1 {
    font-size: var(--buttons-large-size);
    line-height: 28px;
  }
  .steps-parent {
    gap: 26px 104px;
  }
  .welcome-explore-each-container {
    font-size: var(--buttons-large-size);
    line-height: 28px;
  }
  .a-collaborative-effort {
    font-size: var(--font-size-5xl);
    line-height: 28px;
  }
  .frame-group {
    gap: 16px 64px;
  }
  .logo-itc {
    gap: 40.3px 20px;
  }
  .text8 {
    font-size: var(--buttons-large-size);
    line-height: 28px;
  }
  .frame-parent {
    gap: 22px 88px;
  }
  .home-inner {
    padding-bottom: 61px;
    box-sizing: border-box;
  }
  .logos {
    flex-wrap: wrap;
    gap: 32px 16px;
  }
  .colaboration {
    gap: 15px 31px;
  }
  .button8 {
    flex-wrap: wrap;
    gap: 204px 102px;
  }
  .footer {
    gap: 29px 115px;
  }
}


/* About us */
.d2cc95c5-4106-484d-a7df-11802c-icon {
  width: 100%;
  height: 700px;
  position: absolute;
  margin: 0 !important;
  top: 96px;
  right: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.coffee-sustainability-initiati8 {
  width: 150px;
  position: relative;
  line-height: 24px;
  font-weight: 500;
  white-space: pre-wrap;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.search3 {
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 26px;
  display: inline-block;
  font-family: var(--web-caption);
  color: var(--primary-2);
  text-align: left;
  min-width: 51px;
}
.text39 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-3xs) var(--padding-8xs);
  background-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.icon-search3 {
  height: 23.8px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.icon13,
.input-search3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}
.icon13 {
  height: 47px;
  justify-content: flex-end;
  padding: 11.600000000000364px var(--padding-3xs) 11.599999999999454px;
}
.input-search3 {
  width: 312px;
  border-radius: var(--br-xs);
  background-color: var(--color-whitesmoke-100);
  overflow: hidden;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 0 var(--padding-2xs) 0 var(--padding-base);
  gap: var(--gap-xl);
}
.home20 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 43px;
}
.button-menu18,
.text40 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-9xl-5);
}
.button-menu18 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home21 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
  white-space: nowrap;
}
.button-menu19,
.text41 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-mid-5);
}
.button-menu19 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
  cursor: pointer;
  color: var(--highlight-1);
}
.home22 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 58px;
}
.button-menu20,
.text42 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-2xl);
}
.button-menu20 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home23 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
}
.button-menu21,
.text43 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-mid-5);
}
.button-menu21 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home24 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 78px;
  white-space: nowrap;
}
.button-menu22,
.text44 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-2xs);
}
.button-menu22 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home25 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 83px;
  white-space: nowrap;
}
.text45 {
  justify-content: center;
  padding: 0 var(--padding-4xs-5);
}
.button-menu23,
.buttons-pages3,
.header3,
.text45 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.button-menu23 {
  border-radius: var(--br-3xs);
  justify-content: center;
  padding: var(--padding-3xs) 0;
}
.buttons-pages3,
.header3 {
  max-width: 100%;
  text-align: left;
  font-family: var(--web-caption);
}
.buttons-pages3 {
  margin: 0;
  justify-content: center;
  gap: var(--gap-6xl);
  font-size: var(--buttons-medium-size);
  color: var(--primary-2);
}
.header3 {
  align-self: stretch;
  background-color: var(--neutral-5);
  box-shadow: var(--shadow);
  justify-content: space-between;
  padding: var(--padding-5xl) var(--padding-83xl);
  box-sizing: border-box;
  top: 0;
  z-index: 99;
  position: sticky;
  font-size: var(--web-body3-size);
  color: var(--primary-1);
}
.icon-chevronleft26 {
  height: 23.8px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button56 {
  position: relative;
  line-height: 19px;
  font-weight: 500;
}
.icon-chevronright22 {
  height: 23.8px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons20 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-5xl);
}
.underline14 {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button-wrapper5,
.button55 {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.button55 {
  height: 21px;
  width: 137px;
  border-radius: var(--br-7xs);
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  gap: var(--gap-11xs);
  z-index: 1;
}
.button-wrapper5 {
  width: 341px;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl) 163px;
  max-width: 100%;
}
.ttulo1 {
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: 52px;
  font-weight: 600;
  font-family: inherit;
  z-index: 1;
}
.sustainability-is-a,
.ttulo1 {
  margin: 0;
}
.texto1 {
  align-self: stretch;
  height: 42px;
  position: relative;
  font-size: var(--web-body1-size);
  line-height: 28px;
  font-weight: 500;
  color: var(--colors-gray4);
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.about-us-inner,
.ttulo-group {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.ttulo-group {
  width: 447px;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-13xl);
}
.about-us-inner {
  width: 651px;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl) 167px;
  box-sizing: border-box;
  font-size: var(--web-h1-size);
  color: var(--colors-white);
}
.photo-credit-meklit1 {
  width: 357px;
  position: relative;
  display: inline-block;
  z-index: 1;
}
.photo-credit-meklit-mersha-fo-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-40xl);
  box-sizing: border-box;
  max-width: 100%;
}
.photo-icon {
  height: 262.6px;
  width: 500px;
  position: relative;
  border-radius: 0 var(--br-17xl) 0 var(--br-17xl);
  object-fit: cover;
  max-width: 100%;
}
.texto3,
.ttulo2 {
  align-self: stretch;
  position: relative;
}
.ttulo2 {
  margin: 0;
  font-size: inherit;
  line-height: 35px;
  font-weight: 500;
  font-family: inherit;
}
.texto3 {
  font-size: var(--buttons-medium-size);
  line-height: 26px;
}
.icon-chevronleft27 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button58 {
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 27px;
  font-family: var(--web-caption);
  color: var(--primary-1);
  text-align: left;
}
.icon-arrowright4 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.button57 {
  cursor: pointer;
  border: 0;
  padding: 14.5px var(--padding-xl);
  background-color: var(--highlight-4);
  height: 56px;
  border-radius: var(--br-xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--gap-base);
}
.banner,
.calltoaction3,
.texto2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}
.texto2 {
  width: 578px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 0 var(--padding-5xl);
  gap: var(--gap-13xl);
  min-width: 578px;
}
.banner,
.calltoaction3 {
  flex: 1;
  border-radius: var(--br-5xl);
  background-color: var(--colors-white);
  flex-direction: row;
  align-items: center;
}
.banner {
  box-shadow: 2px 4px 8px rgba(133, 151, 160, 0.24);
  justify-content: space-between;
  padding: var(--padding-5xl) var(--padding-9xl-5);
  gap: var(--gap-xl);
}
.calltoaction3 {
  box-shadow: var(--shadow);
  justify-content: center;
  padding: 0;
  min-width: 801px;
}
.button-scroll-icon3 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1.321);
}
.wrapper-button-scroll3 {
  width: 56px;
  height: 56px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper-button-scroll-container {
  height: 105.6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.calltoaction-parent,
.frame-parent8 {
  display: flex;
  align-items: flex-end;
  max-width: 100%;
}
.calltoaction-parent {
  align-self: stretch;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--web-h3-size);
  color: var(--primary-5);
}
.frame-parent8 {
  width: auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 107px;
}
.about-us-child {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-27xl) 68.39999999999964px;
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
  font-size: var(--web-body3-size);
  color: var(--primary-1);
  font-family: var(--web-caption); margin: 0 auto;
}
.the-story-behind,
.to-provide-greater {
  margin-block-start: 0;
  margin-block-end: 24px;
}
.the-story-behind {
  line-height: 46px;
  font-weight: 600;
}
.to-provide-greater {
  font-size: 20px;
  line-height: 24px;
}
.sub-title,
.title28 {
  align-self: stretch;
  position: relative;
}
.title28 {
  height: 90px;
  display: inline-block;
  flex-shrink: 0;
}
.sub-title {
  margin: 0;
  font-size: inherit;
  text-decoration: underline;
  line-height: 46px;
  font-weight: 600;
  font-family: inherit;
}
.the-information-on1 {
  margin: 0;
 /*  white-space: pre-wrap; */
}
.blank-line5,
.ico-engaged-with {
  margin: 0;
}
.text46 {
  align-self: stretch;
  position: relative;
  font-size: var(--web-body1-size);
  line-height: 28px;
  font-weight: 500;
  color: var(--neutral-5);
  text-align: justify;
}
.sub-title-parent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-5xl);
  min-width: 355px;
  max-width: 100%;
}
.imgage-hands-icon {
  align-self: stretch;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: contain;
  position: absolute;
  left: 2px;
  top: 4px;
  width: 100%;
  height: 100%;
  transform: scale(1.034);
}
.wrapper-imgage-hands {
  align-self: stretch;
  flex: 1;
  position: relative;
  border-radius: var(--br-45xl) 0 var(--br-45xl) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.methodology,
.wrapper-imgage-hands-wrapper {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.wrapper-imgage-hands-wrapper {
  height: 508.5px;
  width: 518px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 37.5px 0 0;
  min-width: 518px;
}
.methodology {
  align-self: stretch;
  border-left: 4px solid var(--primary-3);
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-5xl) var(--padding-xl) var(--padding-5xl)
    var(--padding-17xl);
  gap: var(--gap-93xl);
}
.imgage-hands-icon1 {
  align-self: stretch;
  height: 642px;
  position: relative;
  border-radius: 0 var(--br-45xl) 0 var(--br-45xl);
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
}
.imgage-hands-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-17xl) 0 0;
  box-sizing: border-box;
  min-width: 373px;
  max-width: 100%;
}
.sub-title1 {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  text-decoration: underline;
  line-height: 46px;
  font-weight: 600;
  font-family: inherit;
}
.blank-line6,
.the-future-of,
.the-this-tool {
  margin: 0;
}
.deepening-and-improving,
.opening-opportunities-for {
  margin-bottom: 0;
}
.opening-opportunities-for-coll {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  padding-left: var(--padding-6xl);
}
.container {
  align-self: stretch;
  position: relative;
  font-size: var(--web-body1-size);
  line-height: 28px;
  font-weight: 500;
  color: var(--neutral-5);
  text-align: justify;
}
.data-aggregator1,
.justification {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.data-aggregator1 {
  width: 506px;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-5xl);
  min-width: 506px;
}
.justification {
  align-self: stretch;
  border-right: 4px solid var(--primary-3);
  box-sizing: border-box;
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-5xl) 30px var(--padding-5xl) var(--padding-sm);
  gap: var(--gap-93xl);
}
.subtitle8 {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  text-decoration: underline;
  line-height: 46px;
  font-weight: 600;
  font-family: inherit;
}
.projects-both-public,
.the-map-will {
  margin: 0;
/*   white-space: pre-wrap; */
}
.although-the-information,
.blank-line7,
.the-following-charts {
  margin: 0;
}
.text47 {
  align-self: stretch;
  position: relative;
  font-size: var(--web-body1-size);
  line-height: 28px;
  font-weight: 500;
  color: var(--neutral-5);
  text-align: justify;
}
.achievements,
.data1 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.data1 {
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-base);
  gap: var(--gap-5xl);
}
.achievements {
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 0 var(--padding-base);
}
.insight1-icon {
  align-self: stretch;
  height: 390px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.image1 {
  flex: 0.9732;
  border-right: 4px solid var(--primary-5);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-lg) var(--padding-5xl)
    21.89999999999418px;
  min-width: 380px;
  max-width: 100%;
}
.insight2-icon {
  align-self: stretch;
  height: 390px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.image2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-8xs) var(--padding-5xl)
    var(--padding-5xl);
  box-sizing: border-box;
  min-width: 380px;
  max-width: 100%;
}
.data,
.insights,
.methodology-parent {
  align-self: stretch;
  justify-content: flex-start;
}
.insights {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0 var(--padding-13xl) 0 var(--padding-3xs);
  box-sizing: border-box;
  max-width: 100%;
  row-gap: 20px;
}
.data,
.methodology-parent {
  flex-direction: column;
}
.data {
  border-left: 4px solid var(--primary-3);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 var(--padding-3xs);
  gap: 48px;
  max-width: 100%;
}
.methodology-parent {
  gap: 72px;
  text-align: left;
  font-size: var(--font-size-11xl);
  color: var(--highlight-4);
}
.about-us-inner1,
.methodology-parent,
.title-parent {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.title-parent {
  width: 1236px;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-69xl);
}
.about-us-inner1 {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl) var(--padding-106xl);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--web-h2-size);
  color: var(--primary-5);
  font-family: var(--web-caption);
}
.sub-title2 {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  text-decoration: underline;
  line-height: 46px;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
  z-index: 2;
}
.subtree {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-21xl) 0 var(--padding-13xl);
  box-sizing: border-box;
  max-width: 100%;
}
.image-320-icon {
  height: 804.3px;
  width: 1250px;
  position: absolute;
  margin: 0 !important;
  top: -160px;
  right: -53px;
  object-fit: cover;
  z-index: 1;
}
.a-collaborative-effort2,
.blank-line10,
.blank-line8,
.blank-line9,
.the-coffee,
.the-coffee-guide,
.the-coffee-public-private {
  margin: 0;
}
.merging-tree {
  flex: 1;
  position: relative;
  line-height: 28px;
  font-weight: 500;
  display: inline-block;
  max-width: 100%;
  z-index: 2;
}
.frame-wrapper4,
.image-320-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.image-320-parent {
  flex: 1;
  position: relative;
}
.frame-wrapper4 {
  align-self: stretch;
  padding: 0 var(--padding-21xl) 0 var(--padding-13xl);
  box-sizing: border-box;
  text-align: justify;
  font-size: var(--web-body1-size);
  color: var(--neutral-5);
}
.hexahedron-tree,
.octree {
  align-self: stretch;
  position: relative;
}
.octree {
  margin: 0;
  font-size: inherit;
  line-height: 35px;
  font-weight: 500;
  font-family: inherit;
}
.hexahedron-tree {
  font-size: var(--buttons-medium-size);
  line-height: 26px;
}
.text48 {
  width: 710px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  gap: var(--gap-26xl);
  max-width: 100%;
}
.icon-chevronleft28 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  min-height: 20px;
}
.button60 {
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 17px;
  font-weight: 500;
  font-family: var(--web-caption);
  color: var(--primary-1);
  text-align: left;
}
.cycle-graph {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs-5) 0 0;
}
.icon-arrowright5 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 20px;
}
.button59,
.star-graph {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.button59 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-lg) var(--padding-xl);
  background-color: var(--highlight-4);
  height: 56px;
  border-radius: var(--br-xs);
  flex-direction: row;
  box-sizing: border-box;
  gap: var(--gap-base);
}
.star-graph {
  flex-direction: column;
  padding: var(--padding-29xl) 0 0;
}
.calltoaction4 {
  align-self: stretch;
  border-radius: var(--br-5xl);
  background-color: var(--colors-white);
  box-shadow: var(--shadow);
  flex-direction: row;
  justify-content: space-between;
  padding: var(--padding-5xl) var(--padding-34xl);
  box-sizing: border-box;
  gap: var(--gap-xl);
  font-size: var(--web-h3-size);
  color: var(--primary-5);
}
.about-us-inner2,
.calltoaction4,
.subtree-parent {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.subtree-parent {
  width: 1233px;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-4xl);
}
.about-us-inner2 {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl) 0 var(--padding-6xl);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--font-size-11xl);
  color: var(--highlight-4);
  font-family: var(--web-caption);
}
.logo-europeanunion-icon5,
.logo-itc-icon5 {
  height: 41px;
  position: relative;
  min-height: 41px;
}
.logo-itc-icon5 {
  width: 102.5px;
  object-fit: cover;
}
.logo-europeanunion-icon5 {
  width: 60.2px;
  overflow: hidden;
  flex-shrink: 0;
}
.directed-acyclic-graph {
  height: 12.3px;
  width: 12.1px;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 8.3px;
  object-fit: contain;
}
.flow-network-icon {
  height: 10.1px;
  width: 9.9px;
  top: 10px;
  left: 27.1px;
  z-index: 1;
}
.bellman-ford-algorithm,
.dijkstra-algorithm-icon,
.flow-network-icon {
  position: absolute;
  margin: 0 !important;
  object-fit: contain;
}
.bellman-ford-algorithm {
  height: 12.6px;
  width: 12.4px;
  top: -4.2px;
  right: -11.6px;
}
.dijkstra-algorithm-icon {
  height: 18.8px;
  width: 18.6px;
  right: -16.2px;
  bottom: 3.6px;
  z-index: 2;
}
.floyd-warshall-algorithm {
  height: 12.8px;
  width: 12.8px;
  position: absolute;
  margin: 0 !important;
  right: -10.1px;
  bottom: -2.5px;
  z-index: 3;
}
.m-s-t-prims-algorithm {
  position: absolute;
  top: 16.1px;
  left: 3.5px;
  width: 16.2px;
  height: 16.5px;
  z-index: 4;
}
.kruskal-algorithm-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 10.3px;
  height: 10.5px;
  z-index: 1;
}
.dijkstra-tree {
  height: 32.6px;
  width: 19.7px;
  position: relative;
}
.graph-traversal-icon {
  height: 18.9px;
  width: 18.7px;
  position: absolute;
  margin: 0 !important;
  bottom: 5.9px;
  left: -2.4px;
  object-fit: contain;
  z-index: 5;
}
.max-flow-algorithm,
.min-cut-set {
  display: flex;
  align-items: flex-start;
}
.max-flow-algorithm {
  flex-direction: row;
  justify-content: flex-start;
  position: relative;
}
.min-cut-set {
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 var(--padding-10xs-5);
}
.graph-layout-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 54.1px;
  height: 7.6px;
}
.graph-layout-icon1,
.graph-layout-icon2 {
  position: absolute;
  top: 11.1px;
  left: 0;
  width: 24.6px;
  height: 7.6px;
}
.graph-layout-icon2 {
  top: 21.5px;
  width: 28px;
}
.graph-coloring {
  align-self: stretch;
  height: 29.1px;
  position: relative;
}
.graph-sorting {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5.899999999999636px 0 0;
}
.graph-analysis-icon {
  height: 41px;
  width: 0.5px;
  position: relative;
}
.input-interface-icon {
  width: 6.5px;
  height: 6.7px;
  position: relative;
}
.input-interface-wrapper {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon96 {
  width: 4.6px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper19 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon97 {
  width: 4.5px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper20 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon98 {
  width: 2.2px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper21 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon99 {
  width: 6.4px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper22 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon100 {
  width: 6.1px;
  height: 6.9px;
  position: relative;
}
.vector-wrapper23 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon101 {
  width: 6.3px;
  height: 7px;
  position: relative;
}
.vector-wrapper24 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs-5) 0 0;
  box-sizing: border-box;
}
.vector-icon102 {
  width: 4.9px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper25 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon103 {
  width: 4.6px;
  height: 7px;
  position: relative;
}
.vector-wrapper26 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs-5) var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.output-operator {
  align-self: stretch;
  flex: 1;
  position: relative;
}
.value-cluster {
  width: 52.1px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.decision-maker-icon {
  position: absolute;
  top: 0.1px;
  left: 0;
  width: 4.9px;
  height: 6.7px;
}
.decision-maker-icon1 {
  position: absolute;
  top: 0;
  left: 5.3px;
  width: 6.8px;
  height: 7px;
}
.decision-maker-icon2,
.decision-maker-icon3 {
  position: absolute;
  top: 0.1px;
  left: 12.5px;
  width: 5.7px;
  height: 6.7px;
}
.decision-maker-icon3 {
  left: 20.6px;
  width: 6.4px;
}
.decision-maker-icon4 {
  position: absolute;
  top: 0;
  left: 27.2px;
  width: 6.3px;
  height: 7px;
}
.decision-maker-icon5,
.decision-maker-icon6 {
  position: absolute;
  top: 0.1px;
  left: 33.9px;
  width: 4.9px;
  height: 6.7px;
}
.decision-maker-icon6 {
  left: 39.1px;
  width: 2.2px;
}
.decision-maker-icon7 {
  position: absolute;
  top: 0;
  left: 41.9px;
  width: 6.8px;
  height: 7px;
}
.error-handler-icon {
  position: absolute;
  top: 0.1px;
  left: 49.2px;
  width: 6.1px;
  height: 6.9px;
}
.rule-repository {
  align-self: stretch;
  height: 7px;
  position: relative;
}
.data-aggregator2,
.logic-tree {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.logic-tree {
  align-self: stretch;
  gap: 1.5999999999985448px;
}
.data-aggregator2 {
  height: 29.3px;
  padding: 9.600000000000364px 0 0;
  box-sizing: border-box;
}
.graph-search {
  height: 41px;
  flex: 1;
  align-items: flex-start;
  gap: 7.149999999994179px;
}
.graph-search,
.logo-itc5,
.logos3 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.logo-itc5 {
  flex: 1;
  overflow: hidden;
  align-items: flex-end;
  padding: 0 2.400000000008731px;
  box-sizing: border-box;
  position: relative;
  gap: 21.30000000000291px;
  min-width: 109px;
}
.logos3 {
  align-self: stretch;
  align-items: flex-start;
  gap: var(--gap-13xl);
}
.the-coffee-sustainability3 {
  margin: 0;
}
.the-coffee-sustainability-container3 {
  height: 54px;
  position: relative;
  font-size: var(--web-caption-size);
  line-height: 18px;
  font-family: var(--web-caption);
  color: var(--colors-gray4);
  text-align: center;
  display: inline-block;
}
.colaboration3 {
  width: 394.7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-32xl);
  box-sizing: border-box;
  gap: var(--gap-12xl);
  flex-shrink: 0;
  debug_commit: f6aba90;
}
.icon-chevronleft29 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button63 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 57px;
}
.icon-chevronright23 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons21 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.comparator {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button62 {
  width: 57px;
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft30 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button65 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 83px;
}
.icon-chevronright24 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons22 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.button64,
.underline15 {
  align-self: stretch;
  box-sizing: border-box;
}
.underline15 {
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
}
.button64 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  gap: var(--gap-11xs);
}
.icon-chevronleft31 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button67 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
}
.icon-chevronright25 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons23 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.underline16 {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button66,
.column13 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.button66 {
  width: 65px;
  height: 19px;
  border-radius: var(--br-7xs);
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.column13 {
  flex: 1;
  gap: var(--gap-41xl);
  min-width: 54px;
}
.icon-chevronleft32 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button69 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 43px;
}
.icon-chevronright26 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons24 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.underline17 {
  width: 43px;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button68 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft33 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button71 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 58px;
}
.icon-chevronright27 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons25 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.underline18 {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button70 {
  width: 58px;
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft34 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button73 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
}
.icon-chevronright28 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons26 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.underline19 {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button72,
.column23 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.button72 {
  align-self: stretch;
  height: 19px;
  border-radius: var(--br-7xs);
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.column23 {
  width: 65px;
  gap: var(--gap-41xl);
}
.button61,
.information3,
.network-graph {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.button61 {
  width: 352px;
  justify-content: flex-start;
  gap: var(--gap-185xl);
  flex-shrink: 0;
  debug_commit: f6aba90;
  font-size: var(--buttons-medium-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.information3,
.network-graph {
  max-width: 100%;
}
.information3 {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.network-graph {
  align-self: stretch;
  justify-content: flex-start;
  padding: 0 var(--padding-45xl);
  box-sizing: border-box;
}
.split3 {
  align-self: stretch;
  flex: 1;
  position: relative;
  background-color: var(--colors-white);
  flex-shrink: 0;
  debug_commit: f6aba90;
}
.split-frame {
  align-self: stretch;
  height: 1.9px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-47xl);
  box-sizing: border-box;
  max-width: 100%;
}
.coffee-sustainability-initiati9 {
  width: 150px;
  position: relative;
  line-height: 18px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.rights7 {
  position: absolute;
  height: 95.45%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 4.55%;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs) 0 0;
  box-sizing: border-box;
}
.all-rights-reserved3 {
  position: absolute;
  top: 26px;
  left: 114px;
  line-height: 18px;
  color: var(--colors-gray4);
  text-align: center;
  z-index: 1;
}
.rights6 {
  align-self: stretch;
  height: 44px;
  position: relative;
}
.rights-container {
  width: 265px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia12 {
  width: 29px;
  height: 29px;
  position: relative;
}
.icons-socialmedia-wrapper1 {
  height: 33.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xs-5) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia13 {
  width: 32px;
  height: 32px;
  position: relative;
}
.icons-socialmedia-wrapper2 {
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia14 {
  width: 32px;
  height: 32px;
  position: relative;
}
.icons-socialmedia-wrapper3 {
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia15 {
  height: 38px;
  width: 37.9px;
  position: relative;
  min-height: 38px;
}
.final3,
.socialmedia3 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.socialmedia3 {
  height: 48px;
  justify-content: flex-start;
  padding: var(--padding-8xs) 0;
  box-sizing: border-box;
  gap: 23.966666666664725px;
}
.final3 {
  align-self: stretch;
  justify-content: space-between;
  padding: 0 var(--padding-45xl);
  flex-shrink: 0;
  debug_commit: f6aba90;
}
.about-us,
.footer3,
.frame-parent9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-parent9 {
  align-self: stretch;
  gap: 35.600000000000364px;
  max-width: 100%;
  font-size: var(--web-caption-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.about-us,
.footer3 {
  text-align: left;
}
.footer3 {
  align-self: stretch;
  background-color: var(--neutral-5);
  padding: var(--padding-62xl) var(--padding-21xl) 17px;
  box-sizing: border-box;
  gap: 102.5px;
  max-width: 100%;
  font-size: var(--font-size-sm-4);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.about-us {
  width: 100%;
  position: relative;
  background-color: var(--color-white);
  overflow: hidden;
  gap: 37px;
  letter-spacing: normal;
  font-size: var(--buttons-large-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
@media screen and (max-width: 1200px) {
  .coffee-sustainability-initiati8 {
    display: none;
  }
  .header3 {
    padding-left: var(--padding-32xl);
    padding-right: var(--padding-32xl);
    box-sizing: border-box;
  }
  .photo-icon,
  .texto2 {
    flex: 1;
  }
  .banner {
    flex-wrap: wrap;
  }
  .calltoaction3 {
    gap: 180px 90px;
  }
  .about-us-child {
    padding-left: var(--padding-4xl);
    padding-right: var(--padding-4xl);
    box-sizing: border-box;
  }
  .about-us-inner1 {
    padding-bottom: var(--padding-34xl);
    box-sizing: border-box;
  }
  .calltoaction4 {
    flex-wrap: wrap;
    padding-left: var(--padding-7xl);
    padding-right: var(--padding-7xl);
    box-sizing: border-box;
  }
  .final3,
  .network-graph,
  .split-frame {
    padding-left: var(--padding-13xl);
    padding-right: var(--padding-13xl);
    box-sizing: border-box;
  }
  .final3,
  .split-frame {
    padding-left: var(--padding-14xl);
    padding-right: var(--padding-14xl);
  }
  .final3 {
    padding-left: var(--padding-13xl);
    padding-right: var(--padding-13xl);
  }
}
@media screen and (max-width: 1050px) {
  .ttulo1 {
    font-size: var(--font-size-19xl);
    line-height: 42px;
  }
  .calltoaction3,
  .texto2 {
    min-width: 100%;
  }
  .sub-title {
    font-size: var(--font-size-5xl);
    line-height: 37px;
  }
  .imgage-hands-icon {
    align-self: stretch;
    width: auto;
  }
  .wrapper-imgage-hands-wrapper {
    flex: 1;
  }
  .methodology {
    flex-wrap: wrap;
  }
  .sub-title1 {
    font-size: var(--font-size-5xl);
    line-height: 37px;
  }
  .data-aggregator1 {
    flex: 1;
  }
  .justification {
    flex-wrap: wrap;
  }
  .subtitle8 {
    font-size: var(--font-size-5xl);
    line-height: 37px;
  }
  .image1,
  .image2 {
    flex: 1;
  }
  .insights {
    flex-wrap: wrap;
  }
  .sub-title2 {
    font-size: var(--font-size-5xl);
    line-height: 37px;
  }
  .information3 {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 750px) {
  .header3 {
    padding-left: var(--padding-6xl);
    padding-right: var(--padding-6xl);
    box-sizing: border-box;
  }
  .photo-credit-meklit-mersha-fo-container {
    padding-left: var(--padding-10xl);
    padding-right: var(--padding-10xl);
    box-sizing: border-box;
  }
  .texto2 {
    gap: 16px 32px;
  }
  .calltoaction3 {
    gap: 180px 45px;
  }
  .frame-parent8 {
    gap: 53px 107px;
  }
  .about-us-child {
    padding-bottom: 44px;
    box-sizing: border-box;
  }
  .sub-title-parent,
  .wrapper-imgage-hands-wrapper {
    min-width: 100%;
  }
  .methodology {
    gap: 112px 56px;
    padding-top: var(--padding-xl);
    padding-bottom: var(--padding-xl);
    box-sizing: border-box;
  }
  .data-aggregator1,
  .imgage-hands-wrapper {
    min-width: 100%;
  }
  .justification {
    gap: 112px 56px;
    padding-top: var(--padding-xl);
    padding-bottom: var(--padding-xl);
    box-sizing: border-box;
  }
  .achievements {
    gap: 54px 108px;
  }
  .image1,
  .image2 {
    min-width: 100%;
  }
  .data {
    gap: 24px 48px;
  }
  .methodology-parent {
    gap: 36px 72px;
  }
  .title-parent {
    gap: 44px 88px;
  }
  .about-us-inner1 {
    padding-bottom: 34px;
    box-sizing: border-box;
  }
  .text48 {
    gap: 22px 45px;
  }
  .final3 {
    flex-wrap: wrap;
  }
  .frame-parent9 {
    gap: 18px 35.6px;
  }
  .footer3 {
    gap: 51px 102.5px;
  }
  .about-us {
    gap: 18px 37px;
  }
}
@media screen and (max-width: 450px) {
  .buttons-pages3 {
    display: none;
  }
  .ttulo1 {
    font-size: var(--font-size-10xl);
    line-height: 31px;
  }
  .ttulo-group {
    gap: 16px 32px;
  }
  .ttulo2 {
    font-size: var(--buttons-large-size);
    line-height: 28px;
  }
  .calltoaction3 {
    gap: 180px 22px;
  }
  .frame-parent8 {
    gap: 27px 107px;
  }
  .title28 {
    font-size: var(--buttons-medium-size);
  }
  .sub-title {
    font-size: var(--buttons-large-size);
    line-height: 28px;
  }
  .methodology {
    gap: 112px 28px;
  }
  .sub-title1 {
    font-size: var(--buttons-large-size);
    line-height: 28px;
  }
  .justification {
    gap: 112px 28px;
  }
  .subtitle8 {
    font-size: var(--buttons-large-size);
    line-height: 28px;
  }
  .data1 {
    padding-top: var(--padding-xl);
    padding-bottom: var(--padding-xl);
    box-sizing: border-box;
  }
  .achievements {
    gap: 27px 108px;
  }
  .image1,
  .image2 {
    padding-top: var(--padding-xl);
    padding-bottom: var(--padding-xl);
    box-sizing: border-box;
  }
  .methodology-parent {
    gap: 18px 72px;
  }
  .title-parent {
    gap: 22px 88px;
  }
  .octree,
  .sub-title2 {
    font-size: var(--buttons-large-size);
    line-height: 28px;
  }
  .logos3 {
    flex-wrap: wrap;
    gap: 32px 16px;
  }
  .colaboration3 {
    gap: 15px 31px;
  }
  .button61 {
    flex-wrap: wrap;
    gap: 204px 102px;
  }
  .footer3 {
    gap: 26px 102.5px;
    padding-top: var(--padding-34xl);
    padding-bottom: var(--padding-xl);
    box-sizing: border-box;
  }
}


/* contact css */

.image-icon,
.wrapper-image {
  width: 100%;
  position: absolute;
  flex-shrink: 0;
}
.image-icon {
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  object-fit: contain;
  left: 2px;
  top: 4px;
  transform: scale(1.019);
}
.wrapper-image {
    height: 847px;
    margin: 0 !important;
    top: 98px;
    right: 0;
    left: 0;
    border-radius: 0 0 var(--br-61xl) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}
.coffee-sustainability-initiati3 {
  width: 150px;
  position: relative;
  line-height: 24px;
  font-weight: 500;
  white-space: pre-wrap;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.search1 {
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 26px;
  display: inline-block;
  font-family: var(--web-caption);
  color: var(--primary-2);
  text-align: left;
  min-width: 51px;
}
.text10 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-3xs) var(--padding-8xs);
  background-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.icon-search1 {
  height: 23.8px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.icon11,
.input-search1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}
.icon11 {
  height: 47px;
  justify-content: flex-end;
  padding: 11.600000000000364px var(--padding-3xs) 11.599999999999454px;
}
.input-search1 {
  width: 312px;
  border-radius: var(--br-xs);
  background-color: var(--color-whitesmoke-100);
  overflow: hidden;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 0 var(--padding-2xs) 0 var(--padding-base);
  gap: var(--gap-xl);
}
.home7 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 43px;
}
.button-menu6,
.text11 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-9xl-5);
}
.button-menu6 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home8 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
  white-space: nowrap;
}
.button-menu7,
.text12 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-mid-5);
}
.button-menu7 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home9 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 58px;
}
.button-menu8,
.text13 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-2xl);
}
.button-menu8 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home10 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
}
.button-menu9,
.text14 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-mid-5);
}
.button-menu9 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home11 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 78px;
  white-space: nowrap;
}
.button-menu10,
.text15 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-2xs);
}
.button-menu10 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
  cursor: pointer;
  color: var(--highlight-1);
}
.home12 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 83px;
  white-space: nowrap;
}
.text16 {
  justify-content: center;
  padding: 0 var(--padding-4xs-5);
}
.button-menu11,
.buttons-pages1,
.header1,
.text16 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.button-menu11 {
  border-radius: var(--br-3xs);
  justify-content: center;
  padding: var(--padding-3xs) 0;
}
.buttons-pages1,
.header1 {
  max-width: 100%;
  text-align: left;
  font-family: var(--web-caption);
}
.buttons-pages1 {
  margin: 0;
  justify-content: center;
  gap: var(--gap-6xl);
  font-size: var(--buttons-medium-size);
  color: var(--primary-2);
}
.header1 {
  align-self: stretch;
  background-color: var(--neutral-5);
  box-shadow: var(--shadow);
  justify-content: space-between;
  padding: var(--padding-5xl) var(--padding-83xl);
  box-sizing: border-box;
  top: 0;
  z-index: 99;
  position: sticky;
  font-size: var(--web-body3-size);
  color: var(--primary-1);
}
.image-icon1,
.wrapper-image1 {
  width: 100%;
  height: 100%;
  position: absolute;
}
.image-icon1 {
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: contain;
  left: 2px;
  top: 4px;
  transform: scale(1.026);
}
.wrapper-image1 {
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 var(--br-61xl);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}
.icon-chevronleft10 {
  height: 23.8px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button22 {
  position: relative;
  line-height: 19px;
  font-weight: 500;
  display: inline-block;
  min-width: 128px;
}
.icon-chevronright8 {
  height: 23.8px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons6 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-5xl);
}
.underline3 {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button-wrapper1,
.button21 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
}
.button21 {
  height: 21px;
  flex: 1;
  border-radius: var(--br-7xs);
  flex-direction: column;
  padding: 0 0 var(--padding-11xs);
  gap: var(--gap-11xs);
  z-index: 1;
}
.button-wrapper1 {
  width: 220px;
  flex-direction: row;
  padding: 0 var(--padding-27xl);
}
.lets-talk-sustainability {
  margin-block-start: 0;
  margin-block-end: 29px;
  line-height: 35px;
  font-weight: 500;
}
.we-would-love {
  line-height: 26px;
}
.we-would-love-to-hear-your-ide {
  margin: 0;
  font-size: var(--buttons-medium-size);
}
.title13 {
  flex: 1;
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.text17 {
  align-self: stretch;
  border-radius: 0 0 0 var(--br-61xl);
  background: linear-gradient(
    197.87deg,
    rgba(61, 89, 102, 0.65),
    rgba(61, 89, 102, 0.5) 69.27%
  );
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 52px 45.5px;
  box-sizing: border-box;
  max-width: 100%;
  z-index: 1;
  font-size: var(--web-h3-size);
  color: var(--colors-white);
}
.image,
.title14 {
  position: relative;
}
.image {
  flex: 1;
  border-radius: 0 0 0 var(--br-61xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xl) 0 0;
  box-sizing: border-box;
  gap: 556px;
  min-width: 396px;
  max-width: 100%;
  z-index: 1;
}
.title14 {
  margin: 0;
  font-size: inherit;
  line-height: 46px;
  font-weight: 600;
  font-family: inherit;
}
.title15,
.title16 {
  position: relative;
  display: inline-block;
}
.title15 {
  line-height: 26px;
  min-width: 77px;
}
.title16 {
  width: auto;
  border: 0;
  outline: 0;
  font-family: var(--web-caption);
  font-size: var(--web-body3-size);
  background-color: transparent;
  height: 16px;
  color: var(--primary-3);
  text-align: left;
  padding: 0;
}
.input-forms,
.write {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.write {
  border-radius: var(--br-5xs);
  background-color: var(--colors-white);
  border: 0.2px solid var(--primary-3);
  flex-direction: row;
  padding: var(--padding-3xs);
}
.input-forms {
  flex-direction: column;
  gap: var(--gap-base);
}
.title17,
.title18 {
  position: relative;
  display: inline-block;
}
.title17 {
  line-height: 26px;
  min-width: 75px;
}
.title18 {
    width: auto;
  border: 0;
  outline: 0;
  font-family: var(--web-caption);
  font-size: var(--web-body3-size);
  background-color: transparent;
  height: 16px;
  color: var(--primary-3);
  text-align: left;
  padding: 0;
}
.input-forms1,
.write1 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.write1 {
  border-radius: var(--br-5xs);
  background-color: var(--colors-white);
  border: 0.2px solid var(--primary-3);
  flex-direction: row;
  padding: var(--padding-3xs);
}
.input-forms1 {
  flex-direction: column;
  gap: var(--gap-base);
}
.title19,
.title20 {
  position: relative;
  display: inline-block;
}
.title19 {
  line-height: 26px;
  min-width: 104px;
}
.title20 {
    width: auto;
  border: 0;
  outline: 0;
  font-family: var(--web-caption);
  font-size: var(--web-body3-size);
  background-color: transparent;
  height: 16px;
  color: var(--primary-3);
  text-align: left;
  white-space: nowrap;
  padding: 0;
}
.input-forms2,
.write2 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.write2 {
  border-radius: var(--br-5xs);
  background-color: var(--colors-white);
  border: 0.2px solid var(--primary-3);
  flex-direction: row;
  padding: var(--padding-3xs);
}
.input-forms2 {
  flex-direction: column;
  gap: var(--gap-base);
}
.title21,
.title22 {
  position: relative;
  display: inline-block;
}
.title21 {
  line-height: 26px;
  min-width: 93px;
}
.title22 {
    width: 100%;
  border: 0;
  outline: 0;
  font-family: var(--web-caption);
  font-size: var(--web-body3-size);
  background-color: transparent;
  height: 100%;
  color: var(--primary-3);
  text-align: left;
  padding: 0;
}
.input-forms3,
.write3 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.write3 {
  border-radius: var(--br-5xs);
  background-color: var(--colors-white);
  border: 0.2px solid var(--primary-3);
  flex-direction: row;
  padding: var(--padding-3xs);
}
.input-forms3 {
  flex-direction: column;
  gap: var(--gap-base);
}
.title23,
.title24 {
  position: relative;
  display: inline-block;
}
.title23 {
  line-height: 26px;
  min-width: 63px;
}
.title24 {
  min-width: 49px;
}
.input-forms4,
.write4 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.write4 {
  border-radius: var(--br-5xs);
  background-color: var(--colors-white);
  border: 0.2px solid var(--primary-3);
  flex-direction: row;
  padding: var(--padding-3xs);
  font-size: var(--web-body3-size);
  color: var(--primary-3);
}
.input-forms4 {
  flex-direction: column;
  gap: var(--gap-base);
}
.title25 {
  position: relative;
  line-height: 26px;
}
.blank-line,
.blank-line1,
.blank-line2,
.blank-line3,
.blank-line4,
.question-comment {
  margin: 0;
}
.title26 {
  height: 112px;
  position: relative;
  display: inline-block;
}
.input-forms5,
.write5 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.write5 {
  border-radius: var(--br-5xs);
  background-color: var(--colors-white);
  border: 0.2px solid var(--primary-3);
  flex-direction: row;
  padding: var(--padding-3xs);
  font-size: var(--web-body3-size);
  color: var(--primary-3);
}
.input-forms5 {
  flex-direction: column;
  gap: var(--gap-base);
}
.form,
.form1,
.title-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form1 {
  align-self: stretch;
  justify-content: flex-start;
  gap: var(--gap-5xs);
  font-size: var(--buttons-medium-size);
  color: var(--primary-5);
}
.form,
.title-form {
  justify-content: center;
}
.title-form {
  align-self: stretch;
  gap: 40px;
}
.form {
  flex: 0.8654;
  border-radius: 0 var(--br-61xl) 0 0;
  background-color: var(--primary-1);
  box-shadow: 2px 4px 8px rgba(61, 89, 102, 0.24);
  padding: var(--padding-39xl-5) 41px;
  box-sizing: border-box;
  min-width: 396px;
  max-width: 100%;
  z-index: 1;
  font-size: var(--web-h2-size);
  color: var(--highlight-4);
}
.frame-wrapper,
.image-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.image-parent {
  flex: 1;
  row-gap: 20px;
}
.frame-wrapper {
  width: 1235px;
  padding: 0 var(--padding-5xs) 0 var(--padding-4xs-5);
  box-sizing: border-box;
}
.button-scroll-icon1 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1.321);
}
.wrapper-button-scroll1 {
  width: 56px;
  height: 56px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a-collaborative-effort1 {
  margin: 0;
  width: 990px;
  position: relative;
  font-size: inherit;
  line-height: 46px;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  max-width: 100%;
}
.size-adjustment {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-56xl) 0 var(--padding-xl);
  box-sizing: border-box;
  max-width: 100%;
}
.coffee-sustainability-initiati4 {
  width: 1237px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  max-width: 100%;
}
.rotation-transform,
.wrapper-button-scroll-parent {
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.rotation-transform {
  flex-direction: row;
  align-items: flex-start;
  font-size: var(--web-body3-size);
}
.wrapper-button-scroll-parent {
  flex-direction: column;
  align-items: flex-end;
  gap: 64.5px;
  text-align: center;
}
.logo-itc-icon2 {
  height: 100px;
  width: 248.2px;
  position: relative;
  object-fit: cover;
}
.logo-europeanunion-icon2 {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.rounded-corner {
  height: 88.5px;
  width: 113.4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xs-5) 0 0;
  box-sizing: border-box;
}
.star-shape-icon,
.vector-icon31 {
  height: 23px;
  width: 23px;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 15.8px;
  object-fit: contain;
}
.vector-icon31 {
  height: 18.9px;
  width: 18.9px;
  top: 18.8px;
  left: 51.4px;
  z-index: 1;
}
.arc-shape-icon {
  height: 23.6px;
  width: 23.5px;
  top: -7.9px;
  right: -22px;
  object-fit: contain;
}
.arc-shape-icon,
.vector-icon32,
.vector-icon33 {
  position: absolute;
  margin: 0 !important;
}
.vector-icon32 {
  height: 35.3px;
  width: 35.2px;
  right: -30.6px;
  bottom: 6.8px;
  object-fit: contain;
  z-index: 2;
}
.vector-icon33 {
  height: 24px;
  width: 24.2px;
  right: -19px;
  bottom: -4.8px;
  z-index: 3;
}
.vector-icon34,
.vector-icon35 {
  width: 19.5px;
  height: 19.7px;
  position: relative;
  flex-shrink: 0;
  debug_commit: f6aba90;
  z-index: 1;
}
.vector-icon35 {
  height: 30.9px;
  width: 30.7px;
  z-index: 4;
}
.vector-container,
.vector-frame {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.vector-frame {
  height: 30.9px;
  flex-direction: row;
  padding: 0 0 0 6.69999999999709px;
  box-sizing: border-box;
}
.vector-container {
  align-self: stretch;
  flex-direction: column;
  gap: 10.600000000000364px;
}
.vector-icon36 {
  height: 35.6px;
  width: 35.4px;
  position: absolute;
  margin: 0 !important;
  bottom: 10.8px;
  left: -4.6px;
  object-fit: contain;
  z-index: 5;
}
.arc-shape-parent,
.logo-itc-child {
  display: flex;
  align-items: flex-start;
}
.arc-shape-parent {
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  position: relative;
}
.logo-itc-child {
  height: 66px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 4.800000000000182px;
  box-sizing: border-box;
}
.drop-shadow-filter {
  align-self: stretch;
  height: 14.3px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.blur-filter-icon,
.blur-filter-icon1 {
  width: 46.7px;
  height: 14.2px;
  position: relative;
}
.blur-filter-icon1 {
  width: 53.1px;
}
.drop-shadow-filter-parent,
.frame-wrapper1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.drop-shadow-filter-parent {
  align-self: stretch;
  gap: 5.949999999999818px;
}
.frame-wrapper1 {
  height: 65.6px;
  padding: var(--padding-2xs) 0 0;
  box-sizing: border-box;
}
.glow-filter-icon {
  height: 77px;
  width: 0.5px;
  position: relative;
}
.vector-icon37,
.vector-icon38,
.vector-icon39 {
  height: 12.6px;
  width: 12.2px;
  position: relative;
}
.vector-icon38,
.vector-icon39 {
  width: 8.7px;
}
.vector-icon39 {
  width: 8.6px;
}
.vector-icon40,
.vector-icon41 {
  position: absolute;
  top: 0;
  left: 0;
  width: 4.3px;
  height: 12.6px;
}
.vector-icon41 {
  left: 4.3px;
  width: 12.1px;
  z-index: 1;
}
.vector-parent1 {
  height: 12.6px;
  width: 16.4px;
  position: relative;
}
.vector-icon42,
.vector-icon43 {
  height: 12.9px;
  width: 11.5px;
  position: relative;
}
.vector-icon43 {
  height: 13.1px;
  width: 11.9px;
  min-height: 13px;
}
.vector-icon44,
.vector-icon45 {
  height: 12.6px;
  width: 9.2px;
  position: relative;
}
.vector-icon45 {
  height: 13.1px;
  width: 8.8px;
  min-height: 13px;
}
.rotate-filter,
.scale-filter {
  display: flex;
  justify-content: flex-start;
}
.scale-filter {
  height: 13.2px;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.842857142860469px;
}
.rotate-filter {
  flex-direction: column;
  align-items: flex-start;
  padding: 4.599999999999454px 0 0;
}
.text18 {
  align-self: stretch;
  width: 0;
  position: relative;
  display: inline-block;
}
.flip-filter {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-7xs-5);
}
.vector-icon46,
.vector-icon47 {
  height: 12.6px;
  width: 9.3px;
  position: relative;
}
.vector-icon47 {
  height: 13.1px;
  width: 12.8px;
  min-height: 13px;
}
.vector-icon48 {
  width: 10.8px;
  height: 12.6px;
  position: relative;
}
.vector-wrapper1 {
  height: 12.6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-9xs) 0 0;
  box-sizing: border-box;
}
.vector-icon49,
.vector-icon50 {
  height: 12.6px;
  width: 12.1px;
  position: relative;
}
.vector-icon50 {
  height: 13.1px;
  width: 11.9px;
  min-height: 13px;
}
.vector-icon51,
.vector-icon52 {
  height: 12.6px;
  width: 9.3px;
  position: relative;
}
.vector-icon52 {
  width: 4.2px;
}
.vector-icon53,
.vector-icon54 {
  height: 13.1px;
  width: 12.8px;
  position: relative;
  min-height: 13px;
}
.vector-icon54 {
  height: 12.9px;
  width: 11.6px;
}
.opacity-filter,
.skew-filter,
.vector-parent2 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.vector-parent2 {
  align-self: stretch;
  height: 13.1px;
  flex-direction: row;
  padding: 0 var(--padding-10xs) 0 0;
  box-sizing: border-box;
  gap: 0.3999999999941792px;
}
.opacity-filter,
.skew-filter {
  flex: 1;
  flex-direction: column;
}
.skew-filter {
  align-self: stretch;
  padding: 0 var(--padding-12xs) 0 0;
  gap: 2.899999999999636px;
}
.opacity-filter {
  height: 55px;
  padding: 18.100000000000364px 0 0;
  box-sizing: border-box;
}
.frame-parent1 {
  align-self: stretch;
  flex: 1;
  flex-direction: row;
  align-items: flex-start;
  gap: 13.799999999995634px;
}
.frame-parent1,
.logo-itc-container,
.logo-itc2 {
  display: flex;
  justify-content: flex-start;
}
.logo-itc2 {
  align-self: stretch;
  flex: 1;
  overflow: hidden;
  flex-direction: row;
  align-items: flex-end;
  padding: 0 4.600000000005821px;
  position: relative;
  gap: 40.30000000000291px;
}
.logo-itc-container {
  height: 88.5px;
  width: 318.4px;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-xs-5) 0 0;
  box-sizing: border-box;
}
.banner-logos1 {
  width: 1237px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-xl);
  max-width: 100%;
  font-size: var(--font-size-sm-4);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.component-library {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: 35px;
  font-weight: 500;
  font-family: inherit;
}
.data-aggregator {
  align-self: stretch;
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 26px;
}
.text19 {
  width: 710px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  gap: var(--gap-26xl);
  max-width: 100%;
}
.icon-chevronleft11 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  min-height: 20px;
}
.button24 {
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 17px;
  font-weight: 500;
  font-family: var(--web-caption);
  color: var(--primary-1);
  text-align: left;
}
.layout-organizer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs-5) 0 0;
}
.icon-arrowright2 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 20px;
}
.button-wrapper2,
.button23 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.button23 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-lg) var(--padding-xl);
  background-color: var(--highlight-4);
  height: 50px;
  border-radius: var(--br-xs);
  flex-direction: row;
  box-sizing: border-box;
  gap: var(--gap-base);
}
.button-wrapper2 {
  flex-direction: column;
  padding: var(--padding-29xl) 0 0;
}
.calltoaction-wrapper,
.calltoaction1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.calltoaction1 {
  flex: 1;
  border-radius: var(--br-5xl);
  background-color: var(--colors-white);
  box-shadow: var(--shadow);
  justify-content: space-between;
  padding: var(--padding-5xl) var(--padding-34xl);
  gap: var(--gap-xl);
}
.calltoaction-wrapper {
  width: 1237px;
  justify-content: flex-start;
  padding: 0 var(--padding-11xs);
  font-size: var(--web-h3-size);
  color: var(--primary-5);
}
.shape-container {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-69xl);
  font-size: var(--web-h2-size);
  color: var(--colors-white);
}
.error-handler1,
.frame-div,
.shape-container {
  display: flex;
  align-items: flex-start;
  max-width: 100%; margin: 0 auto;
}
.frame-div {
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-6xl);
}
.error-handler1 {
  width: 1435px;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 var(--padding-27xl) 78px;
  box-sizing: border-box;
  text-align: left;
  font-size: var(--buttons-large-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.logo-europeanunion-icon3,
.logo-itc-icon3 {
  height: 41px;
  position: relative;
  min-height: 41px;
}
.logo-itc-icon3 {
  width: 102.5px;
  object-fit: cover;
}
.logo-europeanunion-icon3 {
  width: 60.2px;
  overflow: hidden;
  flex-shrink: 0;
}
.link-connector-icon {
  height: 12.3px;
  width: 12.1px;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 8.3px;
  object-fit: contain;
}
.table-builder-icon {
  height: 10.1px;
  width: 9.9px;
  top: 10px;
  left: 27.1px;
  z-index: 1;
}
.dropdown-maker-icon,
.table-builder-icon,
.vector-icon55 {
  position: absolute;
  margin: 0 !important;
  object-fit: contain;
}
.vector-icon55 {
  height: 12.6px;
  width: 12.4px;
  top: -4.2px;
  right: -11.6px;
}
.dropdown-maker-icon {
  height: 18.8px;
  width: 18.6px;
  right: -16.2px;
  bottom: 3.6px;
  z-index: 2;
}
.slider-controller-icon {
  height: 12.8px;
  width: 12.8px;
  position: absolute;
  margin: 0 !important;
  right: -10.1px;
  bottom: -2.5px;
  z-index: 3;
}
.range-finder-icon,
.vector-icon56 {
  position: absolute;
  top: 16.1px;
  left: 3.5px;
  width: 16.2px;
  height: 16.5px;
  z-index: 4;
}
.vector-icon56 {
  top: 0;
  left: 0;
  width: 10.3px;
  height: 10.5px;
  z-index: 1;
}
.progress-bar-maker {
  height: 32.6px;
  width: 19.7px;
  position: relative;
}
.vector-icon57 {
  height: 18.9px;
  width: 18.7px;
  position: absolute;
  margin: 0 !important;
  bottom: 5.9px;
  left: -2.4px;
  object-fit: contain;
  z-index: 5;
}
.checkbox-handler {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
}
.form-constructor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-10xs-5);
}
.table-row-processor {
  position: absolute;
  top: 0;
  left: 0;
  width: 54.1px;
  height: 7.6px;
}
.table-row-processor1,
.table-row-processor2 {
  position: absolute;
  top: 11.1px;
  left: 0;
  width: 24.6px;
  height: 7.6px;
}
.table-row-processor2 {
  top: 21.5px;
  width: 28px;
}
.tree-organizer {
  align-self: stretch;
  height: 29.1px;
  position: relative;
}
.list-creator {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5.899999999999636px 0 0;
}
.column-manager-icon,
.icon-label {
  height: 41px;
  width: 0.5px;
  position: relative;
}
.icon-label {
  width: 6.5px;
  height: 6.7px;
}
.icon-label-wrapper {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon58 {
  width: 4.6px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper2 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon59 {
  width: 4.5px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper3 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon60 {
  width: 2.2px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper4 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon61 {
  width: 6.4px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper5 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon62 {
  width: 6.1px;
  height: 6.9px;
  position: relative;
}
.vector-wrapper6 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon63 {
  width: 6.3px;
  height: 7px;
  position: relative;
}
.vector-wrapper7 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs-5) 0 0;
  box-sizing: border-box;
}
.vector-icon64 {
  width: 4.9px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper8 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon65 {
  width: 4.6px;
  height: 7px;
  position: relative;
}
.vector-wrapper9 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs-5) var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.badge-creator {
  align-self: stretch;
  flex: 1;
  position: relative;
}
.image-overlay {
  width: 52.1px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.popover-manager-icon {
  position: absolute;
  top: 0.1px;
  left: 0;
  width: 4.9px;
  height: 6.7px;
}
.popover-manager-icon1 {
  position: absolute;
  top: 0;
  left: 5.3px;
  width: 6.8px;
  height: 7px;
}
.popover-manager-icon2,
.popover-manager-icon3 {
  position: absolute;
  top: 0.1px;
  left: 12.5px;
  width: 5.7px;
  height: 6.7px;
}
.popover-manager-icon3 {
  left: 20.6px;
  width: 6.4px;
}
.popover-manager-icon4 {
  position: absolute;
  top: 0;
  left: 27.2px;
  width: 6.3px;
  height: 7px;
}
.popover-manager-icon5,
.popover-manager-icon6 {
  position: absolute;
  top: 0.1px;
  left: 33.9px;
  width: 4.9px;
  height: 6.7px;
}
.popover-manager-icon6 {
  left: 39.1px;
  width: 2.2px;
}
.popover-manager-icon7 {
  position: absolute;
  top: 0;
  left: 41.9px;
  width: 6.8px;
  height: 7px;
}
.modal-box-builder {
  position: absolute;
  top: 0.1px;
  left: 49.2px;
  width: 6.1px;
  height: 6.9px;
}
.tool-tip-maker {
  align-self: stretch;
  height: 7px;
  position: relative;
}
.cell-assembler {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5999999999985448px;
}
.cell-assembler,
.row-maker,
.search-box {
  flex: 1;
  align-items: flex-start;
}
.row-maker {
  height: 29.3px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 9.600000000000364px 0 0;
  box-sizing: border-box;
}
.search-box {
  height: 41px;
  gap: 7.149999999994179px;
}
.logo-itc3,
.logos1,
.search-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.logo-itc3 {
  flex: 1;
  overflow: hidden;
  align-items: flex-end;
  padding: 0 2.400000000008731px;
  box-sizing: border-box;
  position: relative;
  gap: 21.30000000000291px;
  min-width: 109px;
}
.logos1 {
  align-self: stretch;
  align-items: flex-start;
  gap: var(--gap-13xl);
}
.the-coffee-sustainability1 {
  margin: 0;
}
.the-coffee-sustainability-container1 {
  height: 54px;
  position: relative;
  font-size: var(--web-caption-size);
  line-height: 18px;
  font-family: var(--web-caption);
  color: var(--colors-gray4);
  text-align: center;
  display: inline-block;
}
.colaboration1 {
  width: 394.7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-32xl);
  box-sizing: border-box;
  gap: var(--gap-12xl);
  flex-shrink: 0;
  debug_commit: f6aba90;
}
.icon-chevronleft12 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button27 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 57px;
}
.icon-chevronright9 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons7 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.paginator {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button26 {
  width: 57px;
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft13 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button29 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 83px;
}
.icon-chevronright10 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons8 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.button28,
.graphic-canvas {
  align-self: stretch;
  box-sizing: border-box;
}
.graphic-canvas {
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
}
.button28 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  gap: var(--gap-11xs);
}
.icon-chevronleft14 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button31 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
}
.icon-chevronright11 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons9 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.shape-assembler {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button30,
.column11 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.button30 {
  width: 65px;
  height: 19px;
  border-radius: var(--br-7xs);
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.column11 {
  flex: 1;
  gap: var(--gap-41xl);
  min-width: 54px;
}
.icon-chevronleft15 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button33 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 43px;
}
.icon-chevronright12 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons10 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.underline4 {
  width: 43px;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button32 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft16 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button35 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 58px;
}
.icon-chevronright13 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons11 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.underline5 {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button34 {
  width: 58px;
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft17 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button37 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
}
.icon-chevronright14 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons12 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.button36,
.underline6 {
  align-self: stretch;
  box-sizing: border-box;
}
.underline6 {
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
}
.button36 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 var(--padding-11xs);
  gap: var(--gap-11xs);
}
.button25,
.button36,
.column21 {
  justify-content: flex-start;
}
.column21 {
  width: 65px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-41xl);
}
.button25 {
  width: 352px;
  gap: var(--gap-185xl);
  flex-shrink: 0;
  debug_commit: f6aba90;
  font-size: var(--buttons-medium-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.button25,
.information-wrapper,
.information1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.information1 {
  flex: 1;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}
.information-wrapper {
  justify-content: flex-start;
  padding: 0 var(--padding-45xl);
  box-sizing: border-box;
}
.information-wrapper,
.split-container,
.split1 {
  align-self: stretch;
  max-width: 100%;
}
.split1 {
  flex: 1;
  position: relative;
  background-color: var(--colors-white);
}
.split-container {
  height: 2px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-47xl);
  box-sizing: border-box;
}
.coffee-sustainability-initiati5 {
  width: 150px;
  position: relative;
  line-height: 18px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.rights3 {
  position: absolute;
  height: 95.45%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 4.55%;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs) 0 0;
  box-sizing: border-box;
}
.all-rights-reserved1 {
  position: absolute;
  top: 26px;
  left: 114px;
  line-height: 18px;
  color: var(--colors-gray4);
  text-align: center;
  z-index: 1;
}
.rights2 {
  align-self: stretch;
  height: 44px;
  position: relative;
}
.rights-wrapper {
  width: 265px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia4 {
  width: 29px;
  height: 29px;
  position: relative;
}
.icons-socialmedia-wrapper {
  height: 33.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xs-5) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia5 {
  width: 32px;
  height: 32px;
  position: relative;
}
.icons-socialmedia-container {
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia6 {
  width: 32px;
  height: 32px;
  position: relative;
}
.icons-socialmedia-frame {
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia7 {
  height: 38px;
  width: 37.9px;
  position: relative;
  min-height: 38px;
}
.socialmedia1 {
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xs) 0;
  box-sizing: border-box;
  gap: 23.966666666664725px;
}
.final1,
.frame-parent2 {
  align-self: stretch;
  align-items: flex-start;
}
.final1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 var(--padding-45xl);
  gap: var(--gap-xl);
}
.frame-parent2 {
  gap: var(--gap-4xl);
  max-width: 100%;
  font-size: var(--web-caption-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.contact-us,
.footer1,
.frame-parent2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.footer1 {
  align-self: stretch;
  background-color: var(--neutral-5);
  align-items: flex-start;
  padding: var(--padding-62xl) var(--padding-21xl) var(--padding-14xl);
  box-sizing: border-box;
  gap: var(--gap-96xl);
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-sm-4);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.contact-us {
  width: 100%;
  position: relative;
  background-color: var(--primary-5);
  overflow: hidden;
  align-items: flex-end;
  gap: var(--gap-79xl);
  letter-spacing: normal;
}
@media screen and (max-width: 1200px) {
  .coffee-sustainability-initiati3 {
    display: none;
  }
  .header1 {
    padding-left: var(--padding-32xl);
    padding-right: var(--padding-32xl);
    box-sizing: border-box;
  }
  .size-adjustment {
    padding-right: 37px;
    box-sizing: border-box;
  }
  .calltoaction1 {
    flex-wrap: wrap;
    padding-left: var(--padding-7xl);
    padding-right: var(--padding-7xl);
    box-sizing: border-box;
  }
  .error-handler1 {
    padding-left: var(--padding-4xl);
    padding-right: var(--padding-4xl);
    padding-bottom: var(--padding-32xl);
    box-sizing: border-box;
  }
  .information-wrapper {
    padding-left: var(--padding-13xl);
    padding-right: var(--padding-13xl);
    box-sizing: border-box;
  }
  .final1,
  .split-container {
    padding-left: var(--padding-14xl);
    padding-right: var(--padding-14xl);
    box-sizing: border-box;
  }
  .final1 {
    padding-left: var(--padding-13xl);
    padding-right: var(--padding-13xl);
  }
}
@media screen and (max-width: 1050px) {
  .image {
    flex: 1;
  }
  .title14 {
    font-size: var(--font-size-13xl);
    line-height: 37px;
  }
  .form {
    flex: 1;
    padding-top: var(--padding-19xl);
    padding-bottom: var(--padding-19xl);
    box-sizing: border-box;
  }
  .image-parent {
    flex-wrap: wrap;
  }
  .a-collaborative-effort1 {
    font-size: var(--font-size-13xl);
    line-height: 37px;
  }
  .error-handler1 {
    padding-bottom: var(--padding-14xl);
    box-sizing: border-box;
  }
  .information1 {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 750px) {
  .header1,
  .text17 {
    padding-left: var(--padding-6xl);
    padding-right: var(--padding-6xl);
    box-sizing: border-box;
  }
  .text17 {
    padding-left: var(--padding-3xl);
    padding-right: var(--padding-3xl);
  }
  .image {
    gap: 278px 556px;
    min-width: 100%;
  }
  .title-form {
    gap: 40px 80px;
  }
  .form {
    gap: 20px 40px;
    min-width: 100%;
  }
  .wrapper-button-scroll-parent {
    gap: 32px 64.5px;
  }
  .text19 {
    gap: 22px 45px;
  }
  .shape-container {
    gap: 44px 88px;
  }
  .final1 {
    flex-wrap: wrap;
  }
  .footer1 {
    gap: 57px 115px;
    padding-top: var(--padding-34xl);
    padding-bottom: var(--padding-2xl);
    box-sizing: border-box;
  }
  .contact-us {
    gap: 49px 98px;
  }
}
@media screen and (max-width: 450px) {
  .buttons-pages1 {
    display: none;
  }
  .image {
    gap: 139px 556px;
  }
  .title14 {
    font-size: var(--font-size-5xl);
    line-height: 28px;
  }
  .title-form {
    gap: 20px 80px;
  }
  .form {
    padding-top: var(--padding-6xl);
    padding-bottom: var(--padding-6xl);
    box-sizing: border-box;
  }
  .a-collaborative-effort1 {
    font-size: var(--font-size-5xl);
    line-height: 28px;
  }
  .wrapper-button-scroll-parent {
    gap: 16px 64.5px;
  }
  .logo-itc2 {
    gap: 40.3px 20px;
  }
  .component-library {
    font-size: var(--buttons-large-size);
    line-height: 28px;
  }
  .shape-container {
    gap: 22px 88px;
  }
  .error-handler1 {
    padding-bottom: var(--padding-2xl);
    box-sizing: border-box;
  }
  .logos1 {
    flex-wrap: wrap;
    gap: 32px 16px;
  }
  .colaboration1 {
    gap: 15px 31px;
  }
  .button25 {
    flex-wrap: wrap;
    gap: 204px 102px;
  }
  .footer1 {
    gap: 29px 115px;
  }
  .contact-us {
    gap: 24px 98px;
  }
}


.image-icon4 {
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    object-fit: contain;
    left: 2px;
    top: 4px;
    transform: scale(1.019);
}
.image-icon4, .wrapper-image {
    width: 100%;
    position: absolute;
    flex-shrink: 0;
}

/* insight css */

.coffee-sustainability-initiati10 {
  width: 150px;
  position: relative;
  line-height: 24px;
  font-weight: 500;
  white-space: pre-wrap;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.search4 {
  position: relative;
  font-size: var(--buttons-medium-size);
  line-height: 26px;
  display: inline-block;
  font-family: var(--web-caption);
  color: var(--primary-2);
  text-align: left;
  min-width: 51px;
}
.text49 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-3xs) var(--padding-8xs);
  background-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.icon-search4 {
  height: 23.8px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.icon14,
.input-search4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}
.icon14 {
  height: 47px;
  justify-content: flex-end;
  padding: 11.600000000000364px var(--padding-3xs) 11.599999999999454px;
}
.input-search4 {
  width: 312px;
  border-radius: var(--br-xs);
  background-color: var(--color-whitesmoke-100);
  overflow: hidden;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 0 var(--padding-2xs) 0 var(--padding-base);
  gap: var(--gap-xl);
}
.home26 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 43px;
}
.button-menu24,
.text50 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-9xl-5);
}
.button-menu24 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home27 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
  white-space: nowrap;
}
.button-menu25,
.text51 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-mid-5);
}
.button-menu25 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home28 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 58px;
}
.button-menu26,
.text52 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-2xl);
}
.button-menu26 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
  cursor: pointer;
  color: var(--highlight-1);
}
.home29 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
}
.button-menu27,
.text53 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-mid-5);
}
.button-menu27 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home30 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 78px;
  white-space: nowrap;
}
.button-menu28,
.text54 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-2xs);
}
.button-menu28 {
  border-radius: var(--br-3xs);
  padding: var(--padding-3xs) 0;
}
.home31 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 83px;
  white-space: nowrap;
}
.text55 {
  justify-content: center;
  padding: 0 var(--padding-4xs-5);
}
.button-menu29,
.buttons-pages4,
.header4,
.text55 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.button-menu29 {
  border-radius: var(--br-3xs);
  justify-content: center;
  padding: var(--padding-3xs) 0;
}
.buttons-pages4,
.header4 {
  max-width: 100%;
  text-align: left;
  font-family: var(--web-caption);
}
.buttons-pages4 {
  margin: 0;
  justify-content: center;
  gap: var(--gap-6xl);
  font-size: var(--buttons-medium-size);
  color: var(--primary-2);
}
.header4 {
  align-self: stretch;
  background-color: var(--neutral-5);
  box-shadow: var(--shadow);
  justify-content: space-between;
  padding: var(--padding-5xl) var(--padding-83xl);
  box-sizing: border-box;
  font-size: var(--web-body3-size);
  color: var(--primary-1);
}
.the-information-on2 {
  position: relative;
  line-height: 26px;
  white-space: nowrap;
}
.alert1,
.header-parent {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.alert1 {
  background-color: var(--primary-4);
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-8xs) var(--padding-xl);
}
.header-parent {
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 7px;
  box-sizing: border-box;
  top: 0;
  z-index: 99;
  position: sticky;
  max-width: 100%;
}
.insights2 {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 52px;
  font-weight: 600;
  font-family: inherit;
}
.icon-chevronleft35 {
  height: 18px;
  width: 18px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  min-height: 18px;
}
.button75 {
  position: relative;
  line-height: 14px;
  font-weight: 500;
}
.button-wrapper6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0 0;
}
.icon-download {
  height: 18px;
  width: 18px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 18px;
}
.button74 {
  flex: 1;
  border-radius: var(--br-5xs);
  background-color: var(--highlight-4);
  border: 1px solid var(--highlight-4);
  flex-direction: row;
  justify-content: flex-start;
  padding: var(--padding-mini);
  gap: var(--gap-5xs);
}
.alignment,
.button74,
.icon15,
.title29 {
  display: flex;
  align-items: flex-start;
}
.icon15 {
  height: 50px;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0 0;
  box-sizing: border-box;
  font-size: var(--web-body3-size);
  color: var(--primary-1);
}
.alignment,
.title29 {
  flex-direction: row;
  max-width: 100%;
}
.title29 {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.alignment {
  width: 1236px;
  justify-content: flex-start;
  padding: 0 0 var(--padding-base);
  box-sizing: border-box;
}
.union-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 72px;
}
.data-insights {
  position: absolute;
  top: 27px;
  left: 52px;
  font-size: var(--web-body3-size);
  font-family: var(--web-caption);
  color: var(--colors-white);
  text-align: left;
  display: inline-block;
  min-width: 83px;
  z-index: 1;
}
.button110 {
  margin-left: -173px;
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  height: 72px;
  width: 200px;
  position: relative;
  flex-shrink: 0;
  debug_commit: f6aba90;
  z-index: 3;
}
.union-icon1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 72px;
}
.sustainable-development-goals {
  position: absolute;
  top: 19px;
  left: 35px;
  font-size: var(--web-body3-size);
  font-family: var(--web-caption);
  color: var(--primary-5);
  text-align: center;
  display: inline-block;
  width: 130px;
  z-index: 1;
}
.button210 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  height: 72px;
  width: 200px;
  position: relative;
  flex-shrink: 0;
  debug_commit: f6aba90;
  z-index: 2;
  margin-left: -27px;
}
.union-icon2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 72px;
}
.ico-cross-analysis {
  position: absolute;
  top: 24px;
  left: 19px;
  font-size: var(--web-body3-size);
  font-family: var(--web-caption);
  color: var(--primary-5);
  text-align: center;
  display: inline-block;
  width: 163px;
  height: 23px;
  z-index: 1;
}
.button310 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  height: 72px;
  width: 200px;
  position: relative;
  flex-shrink: 0;
  debug_commit: f6aba90;
  margin-left: -27px;
}
.data-buttons,
.square {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  box-sizing: border-box;
}
.data-buttons {
  width: 544px;
  border-radius: var(--br-5xl);
  border: 1px solid var(--highlight-4);
  justify-content: flex-start;
  padding: 0 0 0 169px;
  max-width: calc(100% - 0px);
  row-gap: 20px;
  flex-shrink: 0;
}
.square {
  width: 1236px;
  height: 88px;
  justify-content: center;
  padding: 0 var(--padding-xl) var(--padding-base);
  max-width: 100%;
}
.filters-insights-icon {
  height: 56px;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  object-fit: cover;
  min-width: 712px;
}
.icon-chevronleft36 {
  height: 18px;
  width: 18px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button77 {
  position: relative;
  font-size: var(--web-overline-size);
  line-height: 14px;
  font-weight: 500;
  font-family: var(--font-poppins);
  color: var(--highlight-4);
  text-align: left;
  display: inline-block;
  min-width: 58px;
}
.icon-chevronright29 {
  height: 18px;
  width: 18px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button76 {
  cursor: pointer;
  border: 1px solid var(--highlight-4);
  padding: var(--padding-2xs) var(--padding-mini);
  background-color: transparent;
  align-self: stretch;
  border-radius: var(--br-5xs);
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--gap-5xs);
}
.button76,
.column,
.filters,
.header5 {
  display: flex;
  align-items: flex-start;
}
.header5 {
  width: 90px;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 0;
  box-sizing: border-box;
}
.column,
.filters {
  flex-direction: row;
  max-width: 100%;
}
.filters {
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  gap: 51px;
}
.column {
  width: 1236px;
  justify-content: flex-start;
  padding: 0 0 var(--padding-base);
  box-sizing: border-box;
}
.money-icon {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  left: 2px;
  top: 4px;
  transform: scale(1.222);
}
.wrapper-money {
  height: 72px;
  width: 72px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.total-funding1 {
  position: relative;
  display: inline-block;
  min-width: 85px;
}
.usd {
  position: relative;
  font-size: var(--web-body1-size);
  line-height: 28px;
  font-weight: 500;
  white-space: nowrap;
}
.data2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 0 var(--padding-9xs);
  gap: var(--gap-9xs);
}
.this-information-is {
  flex: 1;
  position: relative;
  line-height: 10px;
  font-weight: 500;
}
.obtained,
.text56 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.obtained {
  width: 106px;
  flex-direction: row;
  padding: 0 var(--padding-10xs) 0 var(--padding-9xs);
  box-sizing: border-box;
  font-size: var(--web-overline-size);
}
.text56 {
  flex-direction: column;
  padding: 0;
  gap: var(--gap-3xs);
}
.total-funding {
  height: 128px;
  border-radius: var(--br-base);
  background-color: var(--color-lightskyblue-100);
  border: 1px solid var(--highlight-4);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-xl) var(--padding-base);
  gap: var(--gap-base);
}
.projects-icon {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  left: 2px;
  top: 4px;
  transform: scale(1.222);
}
.wrapper-projects {
  height: 72px;
  width: 72px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.div3,
.total-projects {
  position: relative;
  display: inline-block;
  min-width: 87px;
}
.div3 {
  font-size: var(--web-body1-size);
  line-height: 28px;
  font-weight: 500;
  min-width: 22px;
}
.data3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-9xs);
  gap: var(--gap-9xs);
}
.div4 {
  align-self: stretch;
  height: 20px;
}
.text57 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
.prpjects {
  height: 128px;
  width: 260px;
  border-radius: var(--br-base);
  background-color: var(--color-lightskyblue-100);
  border: 1px solid var(--highlight-4);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-6xl) var(--padding-12xl);
  gap: var(--gap-base);
}
.farmer-icon {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  left: 2px;
  top: 4px;
  transform: scale(1.222);
}
.wrapper-farmer {
  height: 72px;
  width: 72px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.beneficiareis,
.div5 {
  position: relative;
  display: inline-block;
  min-width: 81px;
}
.div5 {
  font-size: var(--web-body1-size);
  line-height: 28px;
  font-weight: 500;
  min-width: 33px;
}
.data4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-9xs);
  gap: var(--gap-9xs);
}
.this-information-is1 {
  flex: 1;
  position: relative;
  line-height: 10px;
  font-weight: 500;
}
.obtained1,
.text58 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.obtained1 {
  align-self: stretch;
  flex-direction: row;
  padding: 0 var(--padding-8xs) 0 var(--padding-9xs);
  font-size: var(--web-overline-size);
}
.text58 {
  flex: 1;
  flex-direction: column;
  padding: 0 var(--padding-5xs) 0 0;
  gap: var(--gap-3xs);
}
.beneficia {
  height: 128px;
  width: 260px;
  border-radius: var(--br-base);
  background-color: var(--color-lightskyblue-100);
  border: 1px solid var(--highlight-4);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-xl) var(--padding-7xl);
  gap: var(--gap-base);
}
.funder-icon {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  left: 2px;
  top: 4px;
  transform: scale(1.222);
}
.wrapper-funder {
  height: 72px;
  width: 72px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.organizations-involved {
  align-self: stretch;
  position: relative;
}
.div6 {
  position: relative;
  font-size: var(--web-body1-size);
  line-height: 28px;
  font-weight: 500;
  display: inline-block;
  min-width: 22px;
}
.data5 {
  width: 136px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-3xl) 0 var(--padding-9xs);
  box-sizing: border-box;
  gap: var(--gap-9xs);
}
.div7 {
  width: 136px;
  height: 20px;
}
.text59 {
  width: 106px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-10xs) 0;
  box-sizing: border-box;
  gap: var(--gap-3xs);
}
.maininsights,
.organization1 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.organization1 {
  height: 128px;
  border-radius: var(--br-base);
  background-color: var(--color-lightskyblue-100);
  border: 1px solid var(--highlight-4);
  box-sizing: border-box;
  justify-content: center;
  padding: 15.5px var(--padding-13xl);
  gap: var(--gap-base);
}
.maininsights {
  align-self: stretch;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.based-on-publicly {
  position: relative;
  font-weight: 500;
}
.anchor,
.guide {
  display: flex;
  align-items: flex-start;
}
.guide {
  align-self: stretch;
  flex-direction: row;
  justify-content: flex-end;
  color: var(--highlight-4);
  font-family: var(--font-inter);
}
.anchor {
  width: 1236px;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-45xl);
  max-width: 100%;
  font-size: var(--web-body3-size);
  color: var(--primary-5);
}
.data1-icon,
.data1-icon1,
.data1-icon2,
.data1-icon3,
.map-icon1 {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  object-fit: cover;
}
.map-icon1 {
  height: 438px;
  flex: 1;
  min-width: 645px;
  min-height: 438px;
}
.data1-icon,
.data1-icon1,
.data1-icon2,
.data1-icon3 {
  align-self: stretch;
  height: 61px;
  flex-shrink: 0;
}
.data6,
.view-map {
  background-color: var(--color-white);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.data6 {
  height: 438px;
  width: 233px;
  flex-direction: column;
}
.view-map {
  flex: 1;
  border-radius: var(--br-5xl);
  border: 1px solid var(--highlight-4);
  box-sizing: border-box;
  overflow: hidden;
  flex-direction: row;
  padding: 0 var(--padding-11xs) 0 0;
  gap: 9px;
  max-width: 100%;
  flex-shrink: 0;
}
.button-scroll-icon4 {
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1.321);
}
.wrapper-button-scroll4 {
  width: 56px;
  height: 56px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.output-generator {
  height: 217px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 161px 0 0;
  box-sizing: border-box;
}
.clip-path,
.graphic-icon {
  align-self: stretch;
  max-width: 100%;
}
.clip-path {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 20px;
}
.graphic-icon {
  height: 432px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.organizacion {
  flex: 1;
  background-color: var(--color-white);
  border-right: 4px solid var(--highlight-4);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base) var(--padding-sm) var(--padding-base)
    var(--padding-base);
  min-width: 399px;
  max-width: 100%;
}
.graphic-icon1 {
  align-self: stretch;
  height: 433px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.initiatives {
  flex: 1;
  border-radius: 0 var(--br-5xl) 0 0;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base) var(--padding-sm) var(--padding-mini)
    var(--padding-base);
  box-sizing: border-box;
  min-width: 396px;
  max-width: 100%;
}
.colors-icon,
.graphics {
  align-self: stretch;
  max-width: 100%;
}
.graphics {
  background-color: var(--color-white);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-sm);
}
.colors-icon {
  position: relative;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.colors,
.row1 {
  background-color: var(--color-white);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.colors {
  align-self: stretch;
  height: 144px;
  border-radius: 0 0 var(--br-5xl) var(--br-5xl);
  align-items: flex-start;
  padding: 0 var(--padding-mini) var(--padding-base) var(--padding-base);
}
.row1 {
  width: 1236px;
  border-radius: var(--br-5xl);
  border: 1px solid var(--highlight-4);
  overflow: hidden;
  align-items: center;
  gap: var(--gap-5xl);
  max-width: 100%;
}
.colors-icon1,
.graphic-icon2 {
  align-self: stretch;
  height: 405.3px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.colors-icon1 {
  height: 104.8px;
}
.region-ico {
  flex: 1;
  border-radius: var(--br-5xl);
  background-color: var(--color-white);
  border: 1px solid var(--highlight-4);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base) var(--padding-smi) 15.900000000001455px
    var(--padding-mini);
  min-width: 457px;
  max-width: 100%;
}
.colors-icon2,
.graphic-icon3 {
  align-self: stretch;
  height: 446.3px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.colors-icon2 {
  height: 69.5px;
}
.distribution,
.row2 {
  justify-content: flex-start;
}
.distribution {
  flex: 1;
  border-radius: var(--br-5xl);
  background-color: var(--color-white);
  border: 1px solid var(--highlight-4);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-base) var(--padding-smi) 10.200000000000728px
    var(--padding-mini);
  min-width: 457px;
  max-width: 100%;
}
.row2 {
  width: 1236px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-base);
}
.alignment-parent,
.insights-inner,
.row2 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.alignment-parent {
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-45xl);
  text-align: left;
  font-size: var(--web-h1-size);
  color: var(--highlight-4);
  font-family: var(--web-caption);
}
.insights-inner {
  width: 1384px;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 var(--padding-27xl);
  box-sizing: border-box;
}
.logo-europeanunion-icon6,
.logo-itc-icon6 {
  height: 41px;
  position: relative;
  min-height: 41px;
}
.logo-itc-icon6 {
  width: 102.5px;
  object-fit: cover;
}
.logo-europeanunion-icon6 {
  width: 60.2px;
  overflow: hidden;
  flex-shrink: 0;
}
.vector-icon104,
.vector-icon105 {
  height: 12.3px;
  width: 12.1px;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 8.3px;
  object-fit: contain;
}
.vector-icon105 {
  height: 10.1px;
  width: 9.9px;
  top: 10px;
  left: 27.1px;
  z-index: 1;
}
.vector-icon106 {
  height: 12.6px;
  width: 12.4px;
  top: -4.2px;
  right: -11.6px;
  object-fit: contain;
}
.vector-icon106,
.vector-icon107,
.vector-icon108 {
  position: absolute;
  margin: 0 !important;
}
.vector-icon107 {
  height: 18.8px;
  width: 18.6px;
  right: -16.2px;
  bottom: 3.6px;
  object-fit: contain;
  z-index: 2;
}
.vector-icon108 {
  height: 12.8px;
  width: 12.8px;
  right: -10.1px;
  bottom: -2.5px;
  z-index: 3;
}
.vector-icon109,
.vector-icon110 {
  position: absolute;
  top: 16.1px;
  left: 3.5px;
  width: 16.2px;
  height: 16.5px;
  z-index: 4;
}
.vector-icon110 {
  top: 0;
  left: 0;
  width: 10.3px;
  height: 10.5px;
  z-index: 1;
}
.vector-parent8 {
  height: 32.6px;
  width: 19.7px;
  position: relative;
}
.vector-icon111 {
  height: 18.9px;
  width: 18.7px;
  position: absolute;
  margin: 0 !important;
  bottom: 5.9px;
  left: -2.4px;
  object-fit: contain;
  z-index: 5;
}
.logo-itc-inner2,
.vector-parent7 {
  display: flex;
  align-items: flex-start;
}
.vector-parent7 {
  flex-direction: row;
  justify-content: flex-start;
  position: relative;
}
.logo-itc-inner2 {
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 var(--padding-10xs-5);
}
.vector-icon112,
.vector-icon113,
.vector-icon114 {
  position: absolute;
  top: 0;
  left: 0;
  width: 54.1px;
  height: 7.6px;
}
.vector-icon113,
.vector-icon114 {
  top: 11.1px;
  width: 24.6px;
}
.vector-icon114 {
  top: 21.5px;
  width: 28px;
}
.vector-parent9 {
  align-self: stretch;
  height: 29.1px;
  position: relative;
}
.frame-wrapper5 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5.899999999999636px 0 0;
}
.vector-icon115,
.vector-icon116 {
  height: 41px;
  width: 0.5px;
  position: relative;
}
.vector-icon116 {
  width: 6.5px;
  height: 6.7px;
}
.vector-wrapper27 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon117 {
  width: 4.6px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper28 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon118 {
  width: 4.5px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper29 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon119 {
  width: 2.2px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper30 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon120 {
  width: 6.4px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper31 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon121 {
  width: 6.1px;
  height: 6.9px;
  position: relative;
}
.vector-wrapper32 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon122 {
  width: 6.3px;
  height: 7px;
  position: relative;
}
.vector-wrapper33 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs-5) 0 0;
  box-sizing: border-box;
}
.vector-icon123 {
  width: 4.9px;
  height: 6.7px;
  position: relative;
}
.vector-wrapper34 {
  height: 9.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.600000000000364px 0 0;
  box-sizing: border-box;
}
.vector-icon124 {
  width: 4.6px;
  height: 7px;
  position: relative;
}
.vector-wrapper35 {
  height: 9.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs-5) var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.text60 {
  align-self: stretch;
  flex: 1;
  position: relative;
}
.frame-parent12 {
  width: 52.1px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.vector-icon125,
.vector-icon126 {
  position: absolute;
  top: 0.1px;
  left: 0;
  width: 4.9px;
  height: 6.7px;
}
.vector-icon126 {
  top: 0;
  left: 5.3px;
  width: 6.8px;
  height: 7px;
}
.vector-icon127,
.vector-icon128,
.vector-icon129 {
  position: absolute;
  top: 0.1px;
  left: 12.5px;
  width: 5.7px;
  height: 6.7px;
}
.vector-icon128,
.vector-icon129 {
  left: 20.6px;
  width: 6.4px;
}
.vector-icon129 {
  top: 0;
  left: 27.2px;
  width: 6.3px;
  height: 7px;
}
.vector-icon130,
.vector-icon131 {
  position: absolute;
  top: 0.1px;
  left: 33.9px;
  width: 4.9px;
  height: 6.7px;
}
.vector-icon131 {
  left: 39.1px;
  width: 2.2px;
}
.vector-icon132,
.vector-icon133 {
  position: absolute;
  top: 0;
  left: 41.9px;
  width: 6.8px;
  height: 7px;
}
.vector-icon133 {
  top: 0.1px;
  left: 49.2px;
  width: 6.1px;
  height: 6.9px;
}
.vector-parent10 {
  align-self: stretch;
  height: 7px;
  position: relative;
}
.frame-parent11,
.frame-wrapper6 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-parent11 {
  align-self: stretch;
  gap: 1.5999999999985448px;
}
.frame-wrapper6 {
  height: 29.3px;
  padding: 9.600000000000364px 0 0;
  box-sizing: border-box;
}
.frame-parent10 {
  height: 41px;
  flex: 1;
  align-items: flex-start;
  gap: 7.149999999994179px;
}
.frame-parent10,
.logo-itc6,
.logos4 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.logo-itc6 {
  flex: 1;
  overflow: hidden;
  align-items: flex-end;
  padding: 0 2.400000000008731px;
  box-sizing: border-box;
  position: relative;
  gap: 21.30000000000291px;
  min-width: 109px;
}
.logos4 {
  align-self: stretch;
  align-items: flex-start;
  gap: var(--gap-13xl);
}
.the-coffee-sustainability4 {
  margin: 0;
}
.the-coffee-sustainability-container4 {
  height: 54px;
  position: relative;
  font-size: var(--web-caption-size);
  line-height: 18px;
  font-family: var(--web-caption);
  color: var(--colors-gray4);
  text-align: center;
  display: inline-block;
}
.colaboration4 {
  width: 394.7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-32xl);
  box-sizing: border-box;
  gap: var(--gap-12xl);
  flex-shrink: 0;
  debug_commit: f6aba90;
}
.icon-chevronleft37 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button80 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 57px;
}
.icon-chevronright30 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons27 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.branching-logic {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button79 {
  width: 57px;
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft38 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button82 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 83px;
}
.icon-chevronright31 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons28 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.button81,
.sequential-execution {
  align-self: stretch;
  box-sizing: border-box;
}
.sequential-execution {
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
}
.button81 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  gap: var(--gap-11xs);
}
.icon-chevronleft39 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button84 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px;
}
.icon-chevronright32 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons29 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.search-function {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button83,
.column14 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.button83 {
  width: 65px;
  height: 19px;
  border-radius: var(--br-7xs);
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.column14 {
  flex: 1;
  gap: var(--gap-41xl);
  min-width: 54px;
}
.icon-chevronleft40 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button86 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 43px;
}
.icon-chevronright33 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons30 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.underline20 {
  width: 43px;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button85 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft41 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button88 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 58px;
}
.icon-chevronright34 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons31 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.underline21 {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
  box-sizing: border-box;
}
.button87 {
  width: 58px;
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-11xs);
  box-sizing: border-box;
  gap: var(--gap-11xs);
}
.icon-chevronleft42 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.button90 {
  position: relative;
  line-height: 17px;
  font-weight: 500;
  display: inline-block;
  min-width: 65px; color:#fff;
}
.icon-chevronright35 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.texticons32 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.button89,
.underline22 {
  align-self: stretch;
  box-sizing: border-box;
}
.underline22 {
  height: 1px;
  position: relative;
  border-top: 1px solid var(--primary-1);
}
.button89 {
  height: 19px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 var(--padding-11xs);
  gap: var(--gap-11xs);
}
.button78,
.button89,
.column24 {
  justify-content: flex-start;
}
.column24 {
  width: 65px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-41xl);
}
.button78 {
  width: 352px;
  gap: var(--gap-185xl);
  flex-shrink: 0;
  debug_commit: f6aba90;
  font-size: var(--buttons-medium-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.button78,
.information-container,
.information4 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.information4 {
  flex: 1;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}
.information-container {
  justify-content: flex-start;
  padding: 0 var(--padding-45xl);
  box-sizing: border-box;
}
.error-handling,
.information-container,
.split4 {
  align-self: stretch;
  max-width: 100%;
}
.split4 {
  flex: 1;
  position: relative;
  background-color: var(--colors-white);
}
.error-handling {
  height: 2px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-47xl);
  box-sizing: border-box;
}
.coffee-sustainability-initiati11 {
  width: 150px;
  position: relative;
  line-height: 18px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.rights9 {
  position: absolute;
  height: 95.45%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 4.55%;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs) 0 0;
  box-sizing: border-box;
}
.all-rights-reserved4 {
  position: absolute;
  top: 26px;
  left: 114px;
  line-height: 18px;
  color: var(--colors-gray4);
  text-align: center;
  z-index: 1;
}
.rights8 {
  align-self: stretch;
  height: 44px;
  position: relative;
}
.data-splitting {
  width: 265px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia16 {
  width: 29px;
  height: 29px;
  position: relative;
}
.icons-socialmedia-wrapper4 {
  height: 33.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xs-5) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia17 {
  width: 32px;
  height: 32px;
  position: relative;
}
.data-input {
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia18 {
  width: 32px;
  height: 32px;
  position: relative;
}
.data-input1 {
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0 0;
  box-sizing: border-box;
}
.icons-socialmedia19 {
  height: 38px;
  width: 37.9px;
  position: relative;
  min-height: 38px;
}
.final4,
.socialmedia4 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.socialmedia4 {
  height: 48px;
  justify-content: flex-start;
  padding: var(--padding-8xs) 0;
  box-sizing: border-box;
  gap: 23.966666666664725px;
}
.final4 {
  align-self: stretch;
  justify-content: space-between;
  padding: 0 var(--padding-45xl);
  gap: var(--gap-xl);
}
.data-validation,
.footer4,
.insights1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.data-validation {
  align-self: stretch;
  align-items: flex-start;
  gap: var(--gap-4xl);
  max-width: 100%;
  font-size: var(--web-caption-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
.footer4,
.insights1 {
  text-align: left;
}
.footer4 {
  align-self: stretch;
  background-color: var(--neutral-5);
  align-items: flex-start;
  padding: var(--padding-62xl) var(--padding-21xl) var(--padding-14xl);
  box-sizing: border-box;
  gap: var(--gap-96xl);
  max-width: 100%;
  font-size: var(--font-size-sm-4);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.insights1 {
  width: 100%;
  position: relative;
  background: linear-gradient(
      rgba(230, 234, 236, 0.16),
      rgba(230, 234, 236, 0.16)
    ),
    #fff;
  overflow: hidden;
  align-items: flex-end;
  gap: 73px;
  letter-spacing: normal;
  font-size: var(--buttons-medium-size);
  color: var(--primary-1);
  font-family: var(--web-caption);
}
@media screen and (max-width: 1200px) {
  .header4 {
    padding-left: var(--padding-32xl);
    padding-right: var(--padding-32xl);
    box-sizing: border-box;
  }
  .maininsights {
    flex-wrap: wrap;
    justify-content: center;
  }
  .insights-inner {
    padding-left: var(--padding-4xl);
    padding-right: var(--padding-4xl);
    box-sizing: border-box;
  }
  .information-container {
    padding-left: var(--padding-13xl);
    padding-right: var(--padding-13xl);
    box-sizing: border-box;
  }
  .error-handling,
  .final4 {
    padding-left: var(--padding-14xl);
    padding-right: var(--padding-14xl);
    box-sizing: border-box;
  }
  .final4 {
    padding-left: var(--padding-13xl);
    padding-right: var(--padding-13xl);
  }
}
@media screen and (max-width: 1050px) {
  .insights2 {
    font-size: var(--font-size-19xl);
    line-height: 42px;
  }
  .filters-insights-icon,
  .map-icon1,
  .view-map {
    min-width: 100%;
  }
  .view-map {
    padding-left: var(--padding-11xs);
    padding-top: var(--padding-11xs);
    padding-bottom: var(--padding-11xs);
    box-sizing: border-box;
  }
  .information4,
  .view-map {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 750px) {
  .header4 {
    padding-left: var(--padding-6xl);
    padding-right: var(--padding-6xl);
    box-sizing: border-box;
  }
  .alert1 {
    display: none;
  }
  .data-buttons,
  .title29 {
    flex-wrap: wrap;
  }
  .data-buttons {
    padding: var(--padding-xl);
    box-sizing: border-box;
  }
  .square {
    height: auto;
  }
  .filters {
    gap: var(--gap-6xl);
  }
  .anchor {
    gap: 32px 64px;
  }
  .distribution,
  .initiatives,
  .organizacion,
  .region-ico {
    min-width: 100%;
  }
  .alignment-parent {
    gap: 32px 64px;
  }
  .final4 {
    flex-wrap: wrap;
  }
  .footer4 {
    gap: 57px 115px;
    padding-top: var(--padding-34xl);
    padding-bottom: var(--padding-2xl);
    box-sizing: border-box;
  }
  .insights1 {
    gap: 36px 73px;
  }
}
@media screen and (max-width: 450px) {
  .insights2 {
    font-size: var(--font-size-10xl);
    line-height: 31px;
  }
  .alignment-parent,
  .anchor {
    gap: 16px 64px;
  }
  .logos4 {
    flex-wrap: wrap;
    gap: 32px 16px;
  }
  .colaboration4 {
    gap: 15px 31px;
  }
  .button78 {
    flex-wrap: wrap;
    gap: 204px 102px;
  }
  .footer4 {
    gap: 29px 115px;
  }
  .insights1 {
    gap: 18px 73px;
  }
}

/* directory css */