.nuestrosProductos.desktopElement {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  gap: 30px;
  margin-top: 60px;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1.3;
  perspective: 1000px;
}
.titleYVerMas {
  display: none;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


.grid-about-carbon {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(11, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 100%;
  gap:20px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  aspect-ratio: 1/1.26;
  }
  
  .grid-about-carbon .first {grid-area: 1 / 1 / 7 / 4;grid-area: 1 / 1 / 7 / 7;}
  .grid-about-carbon .second {grid-area: 1 / 4 / 3 / 5;/* object-fit: contain !important; */grid-area: 1 / 7 / 3 / 10;}
  .grid-about-carbon .third {grid-area: 3 / 4 / 5 / 7;grid-area: 3 / 7 / 5 / 13;}
  .grid-about-carbon .fourth {grid-area: 7 / 1 / 12 / 4;grid-area: 7 / 1 / 11 / 7;}
  .grid-about-carbon .fifth {grid-area: 5 / 4 / 12 / 7;grid-area: 5 / 7 / 11 / 13;}


.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden;
  border-radius: 39px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.flip-card-front {
  /* background-color: #bbb; */
  color: black;
  border-radius: 35px;
  overflow: hidden;
}

.flip-card-back {
  background-color: #F3EEE8;
  color: #473336;
  padding: 36px;
  transform: rotateY(180deg);
  box-sizing: border-box;
}

.textAndLogo {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 40px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.firstBanner {
    position: relative;
    width: 90%;
    margin: auto;
}

.textAndLogo img {
    width: 160px;
}

.textAndLogo p {
    color: #FFFAF5;
    width: 72%;
    line-height: 21px;
    text-align: center;
}
img.aboutBanner {
  width: 100%;
  /* margin-left: 5%; */
}
.up .left {
    margin-right: 140px;
    width: 90%;
}

img.nuestrosProductosImg {width: 100%;}

.nuestrosProductos {
  width: 90%;
  margin: auto;
  display: flex;
  gap: 30px;
  margin-top: 50px;
}
.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item:hover img {
  filter: contrast(0.5);
}

.flip-card-back .text {
    text-align: left;
    font-size: 14px;
}
.nuestrosProductosText {
  margin-top: 40px;
  background: #F3EEE8;
  border-radius: 30px;
  padding: 35px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
}

img.nuestrosProductosImg {
  margin-top: 40px;
}

.nuestrosProductos .title {
  font-family: "Belwe";
  font-size: 36px;
  line-height: 31px;
  text-transform: unset;
  text-align: left;
}

.carbonNegative:not(.verMas) {
  background-image: url(../../files/imgwithtextbackground.png);
  margin-top: 60px;
  display: flex;
  flex-direction: column;
}

.carbonNegative .up {
  display: flex;
  color: white;
  width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  align-items: center;
}

.carbonNegative .up img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.carbonNegative .up {
  margin-top: 60px;
}

.up .title {
  font-family: "Belwe";
  font-size: 39px;
  line-height: 31px;
  margin-bottom: 50px;
  color: white;
  text-transform: unset;
}

.up .text {
  margin-bottom: 20px;
  color: white;
}

.bottom {
  color: white;
  display: flex;
  margin: 90px 5%;
  justify-content: center;
}

.bottom .item {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.textAndLogo.fade-in-bottom.observer.onViewport {
    fade-in-bottom 1s cubic-bezier(0.39, 0.575, 0.565, 1) animation-fill-mode: both;
    animation: fade-in-bottom 0.5s cubic-bezier(.39,.575,.565,1) 0.8s both;
    fade-in-bottom 1s cubic-bezier(0.39, 0.575, 0.565, 1) animation-fill-mode: both;
}

.flip-card.fade-in-bottom.observer.first.onViewport {
    animation: fade-in-bottom 0.5s cubic-bezier(.39,.575,.565,1) 0.5s both;
}

.flip-card.fade-in-bottom.observer.second.onViewport {
    animation: fade-in-bottom 0.5s cubic-bezier(.39,.575,.565,1) 0.8s both;
}

.flip-card.fade-in-bottom.observer.third.onViewport {
    animation: fade-in-bottom 0.5s cubic-bezier(.39,.575,.565,1) 1s both;
}

img.first.fade-in-bottom.observer.onViewport {
    animation: fade-in-bottom 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

img.second.fade-in-bottom.observer.onViewport {
    animation: fade-in-bottom 0.7s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

img.third.fade-in-bottom.observer.onViewport {
    animation: fade-in-bottom 0.9s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

img.fourth.fade-in-bottom.observer.onViewport {
    animation: fade-in-bottom 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

img.fifth.fade-in-bottom.observer.onViewport {
    animation: fade-in-bottom 1.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

p.text.fade-in-bottom.observer.onViewport {
    animation: fade-in-bottom 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.item.fade-in-bottom.observer.onViewport:nth-child(1) {animation: fade-in-bottom 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;}

.itemSeparator.fade-in-bottom.observer.onViewport {
    animation: fade-in-bottom 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.item.fade-in-bottom.observer.onViewport:nth-child(3n-1) {
    animation: fade-in-bottom 1.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    fade-in-bottom 1s cubic-bezier(0.39, 0.575, 0.565, 1) animation-fill-mode: both;
}

.item.fade-in-bottom.observer.onViewport:nth-child(3n-3) {
    animation: fade-in-bottom 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.bottom .item img {
  margin-bottom: 30px;
  width: 90px;
}

.bottom .itemTitle {
  font-family: "Belwe";
  font-size:20px;
  margin-bottom:20px;
  color: white;
}

.bottom .itemText {
  text-align: center;
  width: 150px;
  color: white;
  font-size: 16px;
}

.itemSeparator {
  height: 20px;
  margin: 40px 34px;
}

img.bannerFinnal {
  width: 100%;
}


@media screen and (max-width:768px){
  .titleYVerMas {
    position: absolute;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 30px;
    color: white;
    justify-content: space-between;
    align-items: flex-end;
}
.bottom {
    flex-direction: column;
}


.up {
    flex-direction: column;
}

.up .title {
    font-size: 22px;
    width: 100%;
}
.carbonNegative .up img {
    width: 100%;
    margin-bottom: 50px;
}

.itemSeparator {
    height: auto;
    display: flex;
    justify-content: center;
}
.up .left {
    width: 100%;
    margin: 0px;
}

.up p.text {
    font-size: 14px;
}
.verMas {
    width: fit-content;
    background: #FCFCA6;
    color: #473336;
    border-radius: 30px;
    padding: 7px 25px;
    display: none !important;
}
.carbonNegative:not(.verMas) {
    height: auto;
}
.nuestrosProductos .title {
    width: 100%;
    color: white;
}
  .textAndLogo p {
    width: 100%;
    font-size: 14px;
}

.textAndLogo {
    padding: 20px;
}

.textAndLogo img {
    margin-top: 30px;
}

.nuestrosProductos {
    margin-top: 30px;
    display: block;
}

.flip-card {
    margin-bottom: 20px;
    aspect-ratio: 1/1.45;
}
}