@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
header.header {
  font-family: "Barlow", sans-serif;
  position: relative;
  background-color: #151515;
}
header.header nav.header-nav {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
header.header nav.header-nav img.header-logo {
  width: 10em;
}
header.header nav.header-nav .header-menu button.header-hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  background-color: transparent;
  border: none;
}
header.header nav.header-nav .header-menu button.header-hamburger span {
  display: block;
  width: 2em;
  height: 0.25em;
  border-radius: 5px;
  background-color: #fff;
  margin: 0.3em 0;
  transition: all 0.3s ease;
}
header.header nav.header-nav .header-menu ul {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 1.5rem;
}
header.header nav.header-nav .header-menu ul li {
  margin-right: 1rem;
  cursor: pointer;
}
header.header nav.header-nav .header-menu ul li a {
  color: #fff;
  text-decoration: none;
}
header.header nav.header-nav .header-menu ul li a:hover {
  color: #f00;
}
@media (width <= 768px) {
  header.header nav.header-nav .header-menu ul {
    display: none;
    flex-direction: column;
    position: absolute;
    right: 0;
    width: 180px;
    overflow: hidden;
    background-color: #151515;
    padding: 1rem;
    transition: transform 0.3s ease, opacity 0.4s ease;
    opacity: 0;
    transform: translateX(100%);
    z-index: 10;
  }
}
header.header nav.header-nav .header-menu ul.show {
  display: flex;
  transform: translateX(0);
  opacity: 1;
}
@media (width <= 768px) {
  header.header nav.header-nav .header-menu button.header-hamburger {
    display: flex;
    animation: bounceIn 1s forwards;
  }
  header.header nav.header-nav .header-menu button.header-hamburger:hover span {
    background-color: #f00;
  }
}
header.header nav.header-nav .header-utils {
  display: flex;
  gap: 2rem;
}
header.header nav.header-nav .header-utils img {
  width: 2em;
  cursor: pointer;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
section.about {
  width: 100%;
  height: 100vh;
  font-family: "Barlow", sans-serif;
  box-sizing: border-box;
}
@media (width >= 800px) {
  section.about {
    background-size: cover;
    background-position: center center;
  }
}
section.about .about-container {
  display: flex;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
}
section.about .about-container .about-texts {
  text-align: justify;
  display: flex;
  animation: fade-in 1s forwards;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}
section.about .about-container .about-texts p.about-texts-title,
section.about .about-container .about-texts h1.about-texts-phrase,
section.about .about-container .about-texts p.about-texts-context {
  margin: 0;
  color: #fff;
}
section.about .about-container .about-texts p.about-texts-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
  text-align: right;
}
section.about .about-container .about-texts h1.about-texts-phrase {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
section.about .about-container .about-texts p.about-texts-context {
  font-size: 1rem;
  text-align: justify !important;
  font-weight: 200 !important;
}
section.about .about-container .about-texts .about-texts-button-variant-1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  max-width: 400px;
}
section.about .about-container .about-texts .about-texts-button-variant-1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.about .about-container .about-texts .about-texts-button-variant-1:hover {
  background-color: #fff;
  color: #e30613;
}
section.about .about-container .about-texts .about-texts-button-variant-1:hover a {
  color: #e30613;
}
section.about .about-container .about-texts .about-texts-button-variant-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.about .about-container .about-texts .about-texts-button-variant-1:hover::before {
  width: 100%;
  left: 0;
}
@media (width >= 1201px) {
  section.about .about-container {
    align-items: center;
    justify-content: flex-end;
  }
  section.about .about-container .about-texts {
    width: 40%;
    text-align: right;
    align-items: flex-end;
    gap: 2rem;
  }
  section.about .about-container .about-texts h1.about-texts-phrase {
    font-size: 2.5rem;
    text-align: right;
  }
  section.about .about-container .about-texts p.about-texts-context {
    font-size: 1rem;
    text-align: end;
  }
}
@media (width <= 1200px) and (width >= 750px) and (orientation: portrait) {
  section.about .about-container {
    align-items: center;
  }
  section.about .about-container .about-texts {
    gap: 3rem;
  }
  section.about .about-container .about-texts p.about-texts-title {
    font-size: 2.2rem;
  }
  section.about .about-container .about-texts .h1.about-texts-phrase {
    font-size: 3rem;
  }
  section.about .about-container .about-texts p.about-texts-context {
    font-size: 1.8rem;
  }
  section.about .about-container .about-texts .about-texts-button-variant-1 {
    font-size: 1.7rem;
    max-width: 500px;
  }
}

section.web-visites {
  background-color: #151515;
  padding: 2rem 0;
}
section.web-visites .web__counter--content {
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  width: 100%;
  position: relative;
  height: 150px;
}
section.web-visites .web__counter--content .web__counter--title {
  color: white;
  text-align: center;
  width: 100%;
  padding: 0.2rem 0;
  font-size: 1.7rem;
}
section.web-visites .web__counter--content .web-counter__items--container {
  display: flex;
  align-items: center;
  flex: 1;
}
section.web-visites .web__counter--content .web-counter__items--container .web-counter__item {
  display: flex;
  flex: 1;
  padding: 0.2rem 0.5rem;
  gap: 1rem;
  font-size: 1.5rem;
  text-align: center;
  flex-direction: column;
  color: white;
}
section.web-visites .web__counter--content .web-counter__items--container .web-counter__item .web-counter__number {
  font-weight: bold;
  font-size: 1.7rem;
}
@media (width <= 450px) {
  section.web-visites .web__counter--content .web-counter__items--container .web-counter__item {
    font-size: 1.2rem;
  }
  section.web-visites .web__counter--content .web-counter__items--container .web-counter__item .web-counter__number {
    font-size: 1rem;
  }
}

section.about-brand {
  background: linear-gradient(96deg, rgb(252, 110, 61) 0%, rgb(227, 6, 19) 32%);
  height: auto;
}
section.about-brand .about-brand-container {
  display: flex;
  width: 100%;
  height: 90%;
  margin: 0 auto;
  max-width: 1200px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  gap: 20px;
}
section.about-brand .about-brand-title {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
}
section.about-brand .carrousel {
  width: 100%;
  padding: 1rem 0;
  overflow: hidden;
  position: relative;
  display: flex;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
section.about-brand .carrousel .animated-row {
  display: flex;
  gap: 1rem;
  width: max-content;
  margin-right: 1rem;
  flex-shrink: 0;
  min-width: 100%;
  animation: slide 60s linear infinite;
  will-change: transform;
}
section.about-brand .carrousel .animated-row .brand {
  width: 200px;
  max-height: 300px;
}

section.about-us-team {
  width: 100%;
  height: 100vh;
  font-family: "Barlow", sans-serif;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  background-size: 50% !important;
  background-position: center bottom !important;
}
section.about-us-team .about-us-team-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: start;
}
section.about-us-team .about-us-team-container .about-us-team-texts {
  text-align: justify !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
section.about-us-team .about-us-team-container .about-us-team-texts p.about-us-team-motto,
section.about-us-team .about-us-team-container .about-us-team-texts .about-us-team-title,
section.about-us-team .about-us-team-container .about-us-team-texts p.about-us-team-text {
  margin: 0;
  color: black;
}
section.about-us-team .about-us-team-container .about-us-team-texts p.about-us-team-motto {
  font-size: 1.2rem;
  font-weight: bold;
  color: #640c00;
}
section.about-us-team .about-us-team-container .about-us-team-texts p.about-us-team-title {
  color: #e30613;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
}
section.about-us-team .about-us-team-container .about-us-team-texts p.about-texts-context {
  font-size: 1rem;
}
section.about-us-team .about-us-team-container .about-us-team-texts .about-texts-button-variant-1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  max-width: 400px;
}
section.about-us-team .about-us-team-container .about-us-team-texts .about-texts-button-variant-1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.about-us-team .about-us-team-container .about-us-team-texts .about-texts-button-variant-1:hover {
  background-color: #fff;
  color: #e30613;
}
section.about-us-team .about-us-team-container .about-us-team-texts .about-texts-button-variant-1:hover a {
  color: #e30613;
}
section.about-us-team .about-us-team-container .about-us-team-texts .about-texts-button-variant-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.about-us-team .about-us-team-container .about-us-team-texts .about-texts-button-variant-1:hover::before {
  width: 100%;
  left: 0;
}
@media (width <= 1200px) and (width >= 750px) and (orientation: portrait) {
  section.about-us-team {
    background-size: 50% !important;
    background-position: bottom center !important;
  }
  section.about-us-team .about-us-team-container .about-us-team-texts p.about-us-team-title {
    font-size: 3rem;
    text-align: center;
  }
  section.about-us-team .about-us-team-container .about-us-team-texts p.about-us-team-motto {
    font-size: 2.2rem;
  }
  section.about-us-team .about-us-team-container .about-us-team-texts p.about-us-team-text {
    font-size: 1.8rem;
  }
  section.about-us-team .about-us-team-container .about-us-team-texts .about-texts-button-variant-1 {
    max-width: 500px;
    font-size: 1.7rem;
  }
}
@media (height >= 750px) and (width <= 650px) {
  section.about-us-team {
    background-size: 90% !important;
  }
}
@media (width >= 1201px) {
  section.about-us-team {
    background-size: 35% !important;
    background-position: bottom right !important;
  }
  section.about-us-team .about-us-team-container {
    align-items: center;
  }
  section.about-us-team .about-us-team-container .about-us-team-texts {
    width: 60%;
    text-align: left;
  }
  section.about-us-team .about-us-team-container .about-us-team-texts p.about-us-team-title {
    font-size: 2.5rem;
  }
  section.about-us-team .about-us-team-container .about-us-team-texts p.about-us-team-motto {
    max-width: 500px;
  }
}

section.company-principles {
  font-family: "Barlow", sans-serif;
  background: black;
}
section.company-principles .company-principles-container {
  display: flex;
  box-sizing: border-box;
  margin: 0 auto;
  width: 90%;
  max-width: 1300px;
  min-height: 70vh;
}
section.company-principles .company-principles-container div.company-principles-mvo {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: black;
}
section.company-principles .company-principles-container div.company-principles-mvo .company-principles-title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
}
section.company-principles .company-principles-container div.company-principles-mvo .company-principles-hover-text {
  display: none;
  color: #fff;
  width: 90%;
  animation: fade-in 1s ease-in-out;
  text-align: center;
  font-size: 1rem;
}
section.company-principles .company-principles-container div.company-principles-mvo .card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  animation: flipInY 1s forwards;
  align-items: center;
  width: 30%;
  height: 90%;
  padding: 1rem 0;
  border: 1px solid #e30613;
  justify-content: space-evenly;
  background-position: bottom !important;
  background-size: 110% auto !important;
}
section.company-principles .company-principles-container div.company-principles-mvo .card img.card-image {
  width: 30%;
}
section.company-principles .company-principles-container div.company-principles-mvo .card.click {
  animation: flip 1s forwards;
}
section.company-principles .company-principles-container div.company-principles-mvo .card.click .company-principles-hover-text {
  display: block;
}
@media (width >= 800px) {
  section.company-principles .company-principles-container div.company-principles-mvo .card {
    height: 80%;
  }
  section.company-principles .company-principles-container div.company-principles-mvo .company-principles-title {
    font-size: 1.5rem;
  }
}
@media (width <= 800px) {
  section.company-principles .company-principles-container div.company-principles-mvo {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
  }
  section.company-principles .company-principles-container div.company-principles-mvo .card {
    width: 80%;
    min-height: 350px;
    height: auto;
    margin-bottom: 20px;
  }
}
section.company-principles div.company-principles-values {
  width: 100%;
  box-sizing: border-box;
  height: 30vh;
  background: url("/static/home/img/valores.png"), linear-gradient(96deg, rgb(252, 110, 61) 0%, rgb(227, 6, 19) 32%) no-repeat;
  background-size: 100%, 100%;
  background-blend-mode: overlay;
  animation: fade-in 1s ease-in-out;
}
section.company-principles div.company-principles-values .company-principles-values-container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  flex-direction: column;
  align-items: flex-end;
  width: 90%;
  height: 90%;
  max-width: 1200px;
  gap: 20px;
}
section.company-principles div.company-principles-values .company-principles-values-container .company-principles-values-list {
  display: none;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: #fff;
  animation: fade-in 1s ease-in-out;
  font-weight: bold;
  font-size: 1em;
}
@media (width >= 868px) {
  section.company-principles div.company-principles-values .company-principles-values-container .company-principles-values-list {
    font-size: 1.2em;
  }
}
section.company-principles div.company-principles-values .company-principles-values-container .company-principles-values-list.active {
  display: flex;
  gap: 10px;
}
section.company-principles div.company-principles-values .company-principles-values-container .company-principles-button-values {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 800;
  margin: 0;
  cursor: pointer;
}
section.company-principles div.company-principles-values.active {
  background: url("/static/home/img/valores.png"), linear-gradient(96deg, rgb(252, 110, 61) 0%, rgb(227, 6, 19) 32%) no-repeat;
  background-blend-mode: normal;
  background-size: cover;
  background-position: center;
}
@media (width >= 800px) {
  section.company-principles div.company-principles-values.active {
    background-position: left;
  }
  section.company-principles div.company-principles-values {
    background-size: cover;
    background-position: center;
  }
}

section.history {
  width: 100%;
  height: 100vh;
  font-family: "Barlow", sans-serif;
  box-sizing: border-box;
  background: white;
}
section.history .history-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  max-width: 1200px;
}
section.history .history-container .history-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
section.history .history-container .history-content p,
section.history .history-container .history-content h1 {
  margin: 0;
}
section.history .history-container .history-content .history-title {
  color: #e30613;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
  max-width: 500px;
  text-align: center;
}
section.history .history-container .history-content .history-subtitle {
  color: #640c00;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
section.history .history-container .history-content .history-text {
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: justify !important;
}
section.history .history-container .history-content .history-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  max-width: 400px;
}
section.history .history-container .history-content .history-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.history .history-container .history-content .history-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
section.history .history-container .history-content .history-button-variant1:hover a {
  color: #e30613;
}
section.history .history-container .history-content .history-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.history .history-container .history-content .history-button-variant1:hover::before {
  width: 100%;
  left: 0;
}
@media (width <= 1200px) and (width >= 750px) and (orientation: portrait) {
  section.history .history-container .history-content {
    gap: 3rem;
    align-items: center;
  }
  section.history .history-container .history-content .history-title {
    font-size: 3rem;
  }
  section.history .history-container .history-content .history-subtitle {
    font-size: 2.2rem;
  }
  section.history .history-container .history-content .history-text {
    font-size: 1.8rem;
  }
  section.history .history-container .history-content .history-button-variant1 {
    font-size: 1.7rem;
    max-width: 500px;
  }
}
@media (width >= 1201px) {
  section.history .history-container .history-content {
    width: 60%;
  }
  section.history .history-container .history-content .history-title {
    font-size: 2.5rem;
    max-width: 500px;
    text-align: start;
  }
  section.history .history-container .history-content .history-subtitle {
    text-align: start;
    max-width: 500px;
  }
  section.history .history-container .history-content .history-text {
    max-width: 500px;
    text-align: start;
  }
}

.about-card-animation {
  animation: flip 1s forwards !important;
}
.about-card-animation .company-principles-hover-text {
  display: block !important;
}

@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(-100% - 1rem));
  }
}
footer.footer {
  background-color: #151515;
  display: flex;
  padding: 2rem 0;
  min-height: 40vh;
  box-sizing: border-box;
  font-family: "Barlow", sans-serif;
  justify-content: center;
  color: #fff;
  flex-direction: column;
}
footer.footer div.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
  padding-bottom: 1rem;
}
@media (width <= 500px) {
  footer.footer div.footer-container {
    flex-direction: column;
  }
}
footer.footer div.footer-container div.footer-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer.footer div.footer-container div.footer-column ul {
  list-style: none;
}
footer.footer div.footer-container div.footer-column ul li {
  margin-bottom: 0.5rem;
}
footer.footer div.footer-container div.footer-column ul li a {
  text-decoration: none;
  color: #fff;
}
footer.footer div.footer-container div.footer-column ul li a:hover {
  color: #f00;
}
footer.footer div.footer-container div.footer-column ul li .footer-title {
  font-size: 1rem;
  margin-bottom: 1rem;
}
footer.footer div.footer-container div.footer-column ul li .footer-option {
  font-size: 0.8rem;
  cursor: pointer;
}
footer.footer div.footer-info {
  box-sizing: border-box;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
footer.footer div.footer-info p {
  font-size: 0.8rem;
}
footer.footer div.footer-info img.footer-logo {
  width: 100%;
}
footer.footer div.footer-info img.footer-social-icon {
  width: 30px;
  cursor: pointer;
}
@media (width >= 700px) {
  footer.footer div.footer-info p {
    font-size: 1rem;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
p,
h1 {
  margin: 0;
}

section.extinguisher-sales-overview {
  width: 100%;
  height: 100vh;
  height: auto;
  font-family: "Barlow", sans-serif;
  box-sizing: border-box;
  background-repeat: no-repeat !important;
}
@media (width >= 700px) {
  section.extinguisher-sales-overview {
    background-size: cover !important;
  }
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  width: 90%;
  min-height: 90%;
  margin: 0 auto;
  max-width: 1200px;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales {
  border: 2px solid black;
  display: flex;
  animation: bounceIn 0.7s forwards;
  align-items: center;
  padding: 1em;
  width: 70%;
  border-radius: 15px;
  margin: 0 auto;
  justify-content: center;
  transition: background 0.3s ease;
  cursor: pointer;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales p {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 900;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales:hover {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-motto {
  font-size: 1rem;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  animation: zoomIn 0.7s forwards;
  font-weight: bold;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container {
  display: grid;
  gap: 2em;
  margin: 0 auto;
  align-items: center;
  grid-template-columns: repeat(1, 1fr);
  height: 50%;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card {
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 2px solid black;
  animation: zoomInUp 0.8s forwards;
  padding: 1.5em;
  text-align: center;
  box-sizing: border-box;
  border-radius: 15px;
  height: 100%;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card:hover .card-data {
  opacity: 1;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card .card-text {
  color: #fff;
  font-size: 0.8em;
  text-align: justify;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card .card-image {
  width: 17em;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card .sales-card-button-variant-1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  font-size: 1em;
  max-width: 350px;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card .sales-card-button-variant-1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card .sales-card-button-variant-1:hover {
  background-color: #fff;
  color: #e30613;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card .sales-card-button-variant-1:hover a {
  color: #e30613;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card .sales-card-button-variant-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card .sales-card-button-variant-1:hover::before {
  width: 100%;
  left: 0;
}
section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container .card:hover {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
}
@media (width >= 800px) {
  section.extinguisher-sales-overview div.extinguisher-sales-overview-container .extinguisher-sales-card-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
  }
}
@media (width >= 700px) {
  section.extinguisher-sales-overview {
    height: 100vh;
  }
}

section.extinguisher-maintenance-overview {
  width: 100%;
  height: 100vh;
  position: relative;
  font-family: "Barlow", sans-serif;
  background-color: #fff;
  display: flex;
  box-sizing: border-box;
  justify-content: flex-end;
  background-size: 85% auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  height: calc(100vw + 600px);
}
section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container {
  display: flex;
  padding: 1em 0;
  gap: 2em;
  width: 90%;
  max-height: 800px;
  margin: 0 auto;
  max-width: 1200px;
  align-items: center;
  flex-direction: column;
  text-align: justify;
}
section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .title {
  color: #e30613;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
  max-width: 400px;
}
section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .subtitle {
  color: #640c00;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}
section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .paragraph {
  text-align: start;
  font-size: 1rem;
  margin: 0;
  color: black;
}
section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .sales-button-variant-1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  max-width: 350px;
}
section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .sales-button-variant-1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .sales-button-variant-1:hover {
  background-color: #fff;
  color: #e30613;
}
section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .sales-button-variant-1:hover a {
  color: #e30613;
}
section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .sales-button-variant-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .sales-button-variant-1:hover::before {
  width: 100%;
  left: 0;
}
@media (width >= 770px) {
  section.extinguisher-maintenance-overview {
    width: 100%;
    height: 100vh;
    background-position: left bottom;
    background-size: 40% auto;
    align-items: center;
  }
  section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container {
    text-align: end;
    align-items: end;
  }
  section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .paragraph {
    width: 50%;
    text-align: justify !important;
  }
  section.extinguisher-maintenance-overview .extinguisher-maintenance-overview-container .title {
    font-size: 2.5rem;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.base-banner {
  background-size: cover;
  background-position: 10%;
  width: 100%;
  height: 40vh;
}
@media (width >= 800px) {
  .base-banner {
    background-position: center 50%;
  }
}
.base-banner div.base-logo {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
}
.base-banner div.base-logo img {
  width: 60%;
}
@media (width >= 780px) {
  .base-banner div.base-logo img {
    width: 40%;
  }
}

section.base-extinguisher {
  background: white;
  font-family: "Barlow", sans-serif;
  box-sizing: border-box;
}
section.base-extinguisher div.base-extinguisher-container {
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  flex-direction: column;
  padding: 4rem 0;
  max-width: 1200px;
  gap: 2rem;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content {
  width: 90%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content p,
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content h1 {
  margin: 0;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content h1 {
  font-size: 2.3rem;
  color: #e30613;
  font-weight: 900;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content p {
  font-size: 1rem;
  text-align: left;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content button {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  max-width: 400px;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content button a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content button:hover {
  background-color: #fff;
  color: #e30613;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content button:hover a {
  color: #e30613;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguisher-content button:hover::before {
  width: 100%;
  left: 0;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  width: 90%;
  justify-content: center;
  gap: 2rem 3rem;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers div.extinguisher-card {
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 1rem;
  min-height: 400px;
  border-radius: 15px;
  text-align: center;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers div.extinguisher-card:hover .card-data {
  opacity: 1;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers div.extinguisher-card:hover {
  border: 2px solid #e30613;
  scale: 1.1;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1);
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers div.extinguisher-card:hover .paragraph {
  display: block;
  animation: fadeInUp 0.5s ease-in-out;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers .title {
  font-weight: bold;
  font-size: 1rem;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers .paragraph {
  font-size: 0.9rem;
  display: none;
  text-align: justify;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers .extinguisher-card-button-variant-1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers .extinguisher-card-button-variant-1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers .extinguisher-card-button-variant-1:hover {
  background-color: #fff;
  color: #e30613;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers .extinguisher-card-button-variant-1:hover a {
  color: #e30613;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers .extinguisher-card-button-variant-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers .extinguisher-card-button-variant-1:hover::before {
  width: 100%;
  left: 0;
}
section.base-extinguisher div.base-extinguisher-container div.base-extinguishers .extinguisher-card-image {
  width: 90%;
  height: 250px;
}
@media (width <= 800px) {
  section.base-extinguisher div.base-extinguisher-container div.base-extinguishers {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
section.safety-footwear-overview {
  font-family: "Barlow", sans-serif;
  width: 100%;
  height: 100vh;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  box-sizing: border-box;
}
section.safety-footwear-overview div.safety-footwear-container {
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content {
  display: flex;
  width: 40%;
  animation: zoomIn 0.7s forwards;
  flex-direction: column;
  gap: 2rem;
}
section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-title {
  color: #e30613;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
}
section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .subtitle {
  color: white;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}
section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: white;
}
section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  max-width: 350px;
}
section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover {
  background-color: #fff;
  color: #e30613;
}
section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover a {
  color: #e30613;
}
section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover::before {
  width: 100%;
  left: 0;
}
@media (width <= 1200px) {
  section.safety-footwear-overview {
    background-position: bottom center !important;
    background-size: 100% !important;
  }
  section.safety-footwear-overview div.safety-footwear-container {
    align-items: flex-start;
    padding: 1rem 0;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-title {
    color: #e30613;
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .subtitle {
    color: white;
    font-size: 1.2rem;
    font-weight: 900;
    margin: 0;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .paragraph {
    text-align: justify;
    font-size: 1rem;
    margin: 0;
    color: white;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1 {
    background-color: #e30613;
    overflow: hidden;
    display: inline-block;
    position: relative;
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    font-family: "Barlow", sans-serif;
    border: 2px solid #e30613;
    padding: 8px 13px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    max-width: 350px;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1 a {
    text-decoration: none;
    transition: color 0.3s ease;
    color: #fff;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover {
    background-color: #fff;
    color: #e30613;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover a {
    color: #e30613;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    transition: width 0.5s ease, left 0.5s ease;
    z-index: 0;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover::before {
    width: 100%;
    left: 0;
  }
}
@media (width <= 1200px) and (width >= 750px) and (orientation: portrait) {
  section.safety-footwear-overview div.safety-footwear-container {
    align-items: flex-start;
    padding: 1rem 0;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-title {
    color: #e30613;
    font-size: 3rem;
    font-weight: 900;
    margin: 0;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .subtitle {
    font-size: 2.2rem;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .paragraph {
    font-size: 1.8rem;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1 {
    background-color: #e30613;
    overflow: hidden;
    display: inline-block;
    position: relative;
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    font-family: "Barlow", sans-serif;
    border: 2px solid #e30613;
    padding: 8px 13px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    font-size: 1.7rem;
    max-width: 500px;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1 a {
    text-decoration: none;
    transition: color 0.3s ease;
    color: #fff;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover {
    background-color: #fff;
    color: #e30613;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover a {
    color: #e30613;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    transition: width 0.5s ease, left 0.5s ease;
    z-index: 0;
  }
  section.safety-footwear-overview div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover::before {
    width: 100%;
    left: 0;
  }
}

section.custom-footwear-section {
  width: 100%;
  height: 100vh;
  font-family: "Barlow", sans-serif;
  background-size: 50%;
  background-position: right bottom;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
section.custom-footwear-section div.safety-footwear-container {
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
section.custom-footwear-section div.safety-footwear-container .safety-footwear-content {
  display: flex;
  width: 50%;
  flex-direction: column;
  gap: 2rem;
}
section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-title {
  color: #e30613;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
}
section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-subtitle {
  color: white;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}
section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  max-width: 300px;
}
section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover {
  background-color: #fff;
  color: #e30613;
}
section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover a {
  color: #e30613;
}
section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1:hover::before {
  width: 100%;
  left: 0;
}
@media (width <= 700px) {
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content {
    width: 100%;
    align-items: center;
  }
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .paragraph {
    text-align: justify;
    font-size: 1rem;
    margin: 0;
    color: white;
  }
}
@media (width <= 1200px) {
  section.custom-footwear-section {
    background-position: bottom center;
    background-size: 80% 30%;
  }
  section.custom-footwear-section div.safety-footwear-container {
    align-items: flex-start;
    margin-top: 2rem;
  }
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content {
    width: 100%;
    align-items: center;
  }
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-title {
    text-align: center;
    font-size: 1.7rem;
  }
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-subtitle {
    color: #000;
    font-size: 1.2rem;
    font-weight: 900;
    margin: 0;
    text-align: center;
  }
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .paragraph {
    text-align: justify;
    font-size: 1rem;
    margin: 0;
    color: #000;
  }
}
@media (width <= 1200px) and (width >= 750px) and (orientation: portrait) {
  section.custom-footwear-section {
    background-size: 80% 50%;
  }
  section.custom-footwear-section div.safety-footwear-container {
    align-items: flex-start;
    margin-top: 2rem;
  }
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content {
    width: 100%;
    align-items: center;
  }
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-title {
    text-align: center;
    font-size: 3rem;
  }
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-subtitle {
    font-size: 2.2rem;
  }
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .paragraph {
    font-size: 1.8rem;
  }
  section.custom-footwear-section div.safety-footwear-container .safety-footwear-content .safety-footwear-button-variant-1 {
    max-width: 500px;
    font-size: 1.7rem;
  }
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 Daniel Eden
*/
body {
  backface-visibility: hidden;
}

.animated {
  -webkit-animation-duration: calc(1s);
  animation-duration: calc(1s);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
}
.animated.bounce-in, .animated.bounce-out {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
}
.animated.flip-out-x, .animated.flip-out-y {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@keyframes swing {
  20% {
    transform-origin: top center;
    transform: rotate(15deg);
  }
  40% {
    transform-origin: top center;
    transform: rotate(-10deg);
  }
  60% {
    transform-origin: top center;
    transform: rotate(5deg);
  }
  80% {
    transform-origin: top center;
    transform: rotate(-5deg);
  }
  100% {
    transform-origin: top center;
    transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@keyframes wiggle {
  0% {
    transform: skewX(9deg);
  }
  10% {
    transform: skewX(-8deg);
  }
  20% {
    transform: skewX(7deg);
  }
  30% {
    transform: skewX(-6deg);
  }
  40% {
    transform: skewX(5deg);
  }
  50% {
    transform: skewX(-4deg);
  }
  60% {
    transform: skewX(3deg);
  }
  70% {
    transform: skewX(-2deg);
  }
  80% {
    transform: skewX(1deg);
  }
  90% {
    transform: skewX(0deg);
  }
  100% {
    transform: skewX(0deg);
  }
}
@keyframes wiggle {
  0% {
    transform: skewX(9deg);
  }
  10% {
    transform: skewX(-8deg);
  }
  20% {
    transform: skewX(7deg);
  }
  30% {
    transform: skewX(-6deg);
  }
  40% {
    transform: skewX(5deg);
  }
  50% {
    transform: skewX(-4deg);
  }
  60% {
    transform: skewX(3deg);
  }
  70% {
    transform: skewX(-2deg);
  }
  80% {
    transform: skewX(1deg);
  }
  90% {
    transform: skewX(0deg);
  }
  100% {
    transform: skewX(0deg);
  }
}
.wiggle {
  -webkit-animation-name: wiggle;
  animation-name: wiggle;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@keyframes tada {
  0% {
    transform: scale(1);
  }
  10%, 20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes tada {
  0% {
    transform: scale(1);
  }
  10%, 20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.bounce-in {
  -webkit-animation-name: bounce-in;
  animation-name: bounce-in;
}

@keyframes bounce-in-down {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes bounce-in-down {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce-in-down {
  -webkit-animation-name: bounce-in-down;
  animation-name: bounce-in-down;
}

@keyframes bounce-in-left {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(30px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes bounce-in-left {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(30px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
.bounce-in-left {
  -webkit-animation-name: bounce-in-left;
  animation-name: bounce-in-left;
}

@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
.bounce-in-right {
  -webkit-animation-name: bounce-in-right;
  animation-name: bounce-in-right;
}

@keyframes bounce-in-up {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes bounce-in-up {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce-in-up {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
.bounce-out {
  -webkit-animation-name: bounce-out;
  animation-name: bounce-out;
}

@keyframes bounce-out-down {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}
@keyframes bounce-out-down {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}
.bounce-out-down {
  -webkit-animation-name: bounce-out-down;
  animation-name: bounce-out-down;
}

@keyframes bounce-out-left {
  0% {
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
@keyframes bounce-out-left {
  0% {
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
.bounce-out-left {
  -webkit-animation-name: bounce-out-left;
  animation-name: bounce-out-left;
}

@keyframes bounce-out-right {
  0% {
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
@keyframes bounce-out-right {
  0% {
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
.bounce-out-right {
  -webkit-animation-name: bounce-out-right;
  animation-name: bounce-out-right;
}

@keyframes bounce-out-up {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
@keyframes bounce-out-up {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
.bounce-out-up {
  -webkit-animation-name: bounce-out-up;
  animation-name: bounce-out-up;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in {
  -webkit-animation-name: fade-in;
  animation-name: fade-in;
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-down {
  -webkit-animation-name: fade-in-down;
  animation-name: fade-in-down;
}

@keyframes fade-in-down-big {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-down-big {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-down-big {
  -webkit-animation-name: fade-in-down-big;
  animation-name: fade-in-down-big;
}

@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-left {
  -webkit-animation-name: fade-in-left;
  animation-name: fade-in-left;
}

@keyframes fade-in-left-big {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-in-left-big {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-left-big {
  -webkit-animation-name: fade-in-left-big;
  animation-name: fade-in-left-big;
}

@keyframes fade-in-right {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-in-right {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-right {
  -webkit-animation-name: fade-in-right;
  animation-name: fade-in-right;
}

@keyframes fade-in-right-big {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-in-right-big {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-right-big {
  -webkit-animation-name: fade-in-right-big;
  animation-name: fade-in-right-big;
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  -webkit-animation-name: fade-in-up;
  animation-name: fade-in-up;
}

@keyframes fade-in-up-big {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-up-big {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up-big {
  -webkit-animation-name: fade-in-up-big;
  animation-name: fade-in-up-big;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fade-out {
  -webkit-animation-name: fade-out;
  animation-name: fade-out;
}

@keyframes fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}
@keyframes fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}
.fade-out-down {
  -webkit-animation-name: fade-out-down;
  animation-name: fade-out-down;
}

@keyframes fade-out-down-big {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}
@keyframes fade-out-down-big {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}
.fade-out-down-big {
  -webkit-animation-name: fade-out-down-big;
  animation-name: fade-out-down-big;
}

@keyframes fade-out-left {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}
@keyframes fade-out-left {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}
.fade-out-left {
  -webkit-animation-name: fade-out-left;
  animation-name: fade-out-left;
}

@keyframes fade-out-left-big {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
@keyframes fade-out-left-big {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
.fade-out-left-big {
  -webkit-animation-name: fade-out-left-big;
  animation-name: fade-out-left-big;
}

@keyframes fade-out-right {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}
@keyframes fade-out-right {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}
.fade-out-right {
  -webkit-animation-name: fade-out-right;
  animation-name: fade-out-right;
}

@keyframes fade-out-right-big {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
@keyframes fade-out-right-big {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
.fade-out-right-big {
  -webkit-animation-name: fade-out-right-big;
  animation-name: fade-out-right-big;
}

@keyframes fade-out-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
@keyframes fade-out-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
.fade-out-up {
  -webkit-animation-name: fade-out-up;
  animation-name: fade-out-up;
}

@keyframes fade-out-up-big {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
@keyframes fade-out-up-big {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
.fade-out-up-big {
  -webkit-animation-name: fade-out-up-big;
  animation-name: fade-out-up-big;
}

@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px) scale(1);
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px) scale(1);
    animation-timing-function: ease-in;
  }
}
.flip {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@keyframes flip-in-x {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes flip-in-x {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
.flip-in-x {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flip-in-x;
  animation-name: flip-in-x;
}

@keyframes flip-in-y {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes flip-in-y {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
.flip-in-y {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flip-in-y;
  animation-name: flip-in-y;
}

@keyframes flip-out-x {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flip-out-x {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.flip-out-x {
  -webkit-animation-name: flip-out-x;
  animation-name: flip-out-x;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@keyframes flip-out-y {
  0% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flip-out-y {
  0% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.flip-out-y {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flip-out-y;
  animation-name: flip-out-y;
}

@keyframes light-speed-in {
  0% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@keyframes light-speed-in {
  0% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
.light-speed-in {
  -webkit-animation-name: light-speed-in;
  animation-name: light-speed-in;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@keyframes light-speed-out {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes light-speed-out {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
.light-speed-out {
  -webkit-animation-name: light-speed-out;
  animation-name: light-speed-out;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@keyframes rotate-in {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotate-in {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotate-in {
  -webkit-animation-name: rotate-in;
  animation-name: rotate-in;
}

@keyframes rotate-in-down-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotate-in-down-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotate-in-down-left {
  -webkit-animation-name: rotate-in-down-left;
  animation-name: rotate-in-down-left;
}

@keyframes rotate-in-down-right {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotate-in-down-right {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotate-in-down-right {
  -webkit-animation-name: rotate-in-down-right;
  animation-name: rotate-in-down-right;
}

@keyframes rotate-in-up-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotate-in-up-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotate-in-up-left {
  -webkit-animation-name: rotate-in-up-left;
  animation-name: rotate-in-up-left;
}

@keyframes rotate-in-up-right {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotate-in-up-right {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotate-in-up-right {
  -webkit-animation-name: rotate-in-up-right;
  animation-name: rotate-in-up-right;
}

@keyframes rotate-out {
  0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: center center;
    transform: rotate(200deg);
    opacity: 0;
  }
}
@keyframes rotate-out {
  0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: center center;
    transform: rotate(200deg);
    opacity: 0;
  }
}
.rotate-out {
  -webkit-animation-name: rotate-out;
  animation-name: rotate-out;
}

@keyframes rotate-out-down-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotate-out-down-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotate-out-down-left {
  -webkit-animation-name: rotate-out-down-left;
  animation-name: rotate-out-down-left;
}

@keyframes rotate-out-down-right {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotate-out-down-right {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.rotate-out-down-right {
  -webkit-animation-name: rotate-out-down-right;
  animation-name: rotate-out-down-right;
}

@keyframes rotate-out-up-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotate-out-up-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.rotate-out-up-left {
  -webkit-animation-name: rotate-out-up-left;
  animation-name: rotate-out-up-left;
}

@keyframes rotate-out-up-right {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotate-out-up-right {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotate-out-up-right {
  -webkit-animation-name: rotate-out-up-right;
  animation-name: rotate-out-up-right;
}

@keyframes slide-in-down {
  0% {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-in-down {
  0% {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.slide-in-down {
  -webkit-animation-name: slide-in-down;
  animation-name: slide-in-down;
}

@keyframes slide-in-left {
  0% {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-in-left {
  0% {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.slide-in-left {
  -webkit-animation-name: slide-in-left;
  animation-name: slide-in-left;
}

@keyframes slide-in-right {
  0% {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-in-right {
  0% {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.slide-in-right {
  -webkit-animation-name: slide-in-right;
  animation-name: slide-in-right;
}

@keyframes slide-in-up {
  0% {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-in-up {
  0% {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.slide-in-up {
  -webkit-animation-name: slide-in-up;
  animation-name: slide-in-up;
}

@keyframes slide-out-down {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slide-out-down {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}
.slide-out-down {
  -webkit-animation-name: slide-out-down;
  animation-name: slide-out-down;
}

@keyframes slide-out-left {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slide-out-left {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.slide-out-left {
  -webkit-animation-name: slide-out-left;
  animation-name: slide-out-left;
}

@keyframes slide-out-right {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slide-out-right {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
.slide-out-right {
  -webkit-animation-name: slide-out-right;
  animation-name: slide-out-right;
}

@keyframes slide-out-up {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slide-out-up {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, -100%, 0);
  }
}
.slide-out-up {
  -webkit-animation-name: slide-out-up;
  animation-name: slide-out-up;
}

@keyframes hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(700px);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(700px);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@keyframes roll-in {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}
@keyframes roll-in {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}
.roll-in {
  -webkit-animation-name: roll-in;
  animation-name: roll-in;
}

@keyframes roll-out {
  0% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}
@keyframes roll-out {
  0% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}
.roll-out {
  -webkit-animation-name: roll-out;
  animation-name: roll-out;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 0;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  100% {
    opacity: 0;
    transform: scale3d(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  100% {
    opacity: 0;
    transform: scale3d(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
section.safety-footwear-collection-banner {
  font-family: "Barlow", sans-serif;
  width: 100%;
  height: 20vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 30% center;
}
section.safety-footwear-collection-banner .safety-collection-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
section.safety-footwear-collection-banner .safety-collection-container .safety-collection-title {
  color: white;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
  margin: 0 auto;
  text-align: center;
}
@media (width >= 1100px) {
  section.safety-footwear-collection-banner {
    height: 40vh;
    background-position: center center;
  }
}

section.safety-footwear-collection {
  font-family: "Barlow", sans-serif;
  background-color: #fff;
}
section.safety-footwear-collection .collection-container {
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
}
section.safety-footwear-collection .collection-container .collection-title {
  color: #e30613;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
  margin: 0 auto;
  font-size: 1.7rem;
  padding: 2rem 0;
}
section.safety-footwear-collection .collection-container .collection-text {
  text-align: center;
}
section.safety-footwear-collection .collection-container .collection {
  display: flex;
  overflow-x: auto;
  margin: 2rem 0;
  box-sizing: border-box;
  gap: 2rem;
  position: relative;
  padding: 1rem;
  border-radius: 15px;
}
section.safety-footwear-collection .collection-container .collection .card {
  position: relative;
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 1rem;
  min-height: 400px;
  min-width: 300px;
  border: 2px solid #a9a9a9;
  border-radius: 15px;
  text-align: center;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}
section.safety-footwear-collection .collection-container .collection .card:hover .card-data {
  opacity: 1;
}
section.safety-footwear-collection .collection-container .collection .card .card-data {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(227, 6, 19, 0.9) -20%, rgba(42, 42, 42, 0.7) 40%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  color: white;
  transition: all 0.5s ease-in-out;
  border-radius: 7px;
  border-radius: 13px;
}
section.safety-footwear-collection .collection-container .collection .card .card-data .paragraph {
  width: 90%;
  font-size: 16px;
  text-align: justify !important;
}
section.safety-footwear-collection .collection-container .collection .card:hover {
  border: 2px solid #e30613;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1);
}
section.safety-footwear-collection .collection-container .collection .card:hover .paragraph {
  animation: fadeInUp 0.5s ease-in-out;
}
section.safety-footwear-collection .collection-container .collection .card .title {
  font-weight: bold;
  font-size: 1rem;
}
section.safety-footwear-collection .collection-container .collection .card .paragraph {
  font-size: 0.9rem;
  display: block;
  text-align: justify !important;
}
section.safety-footwear-collection .collection-container .collection .card .card-button-variant-1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.safety-footwear-collection .collection-container .collection .card .card-button-variant-1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.safety-footwear-collection .collection-container .collection .card .card-button-variant-1:hover {
  background-color: #fff;
  color: #e30613;
}
section.safety-footwear-collection .collection-container .collection .card .card-button-variant-1:hover a {
  color: #e30613;
}
section.safety-footwear-collection .collection-container .collection .card .card-button-variant-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.safety-footwear-collection .collection-container .collection .card .card-button-variant-1:hover::before {
  width: 100%;
  left: 0;
}
section.safety-footwear-collection .collection-container .collection .card img {
  width: 90%;
  height: 250px;
}
@media (width <= 500px) {
  section.safety-footwear-collection .collection {
    flex-direction: column !important;
    height: 600px;
    overflow-y: auto;
  }
  section.safety-footwear-collection .collection .card {
    width: 90%;
    min-width: 200px !important;
    margin: 0 auto;
    min-height: 300px !important;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.road-safety {
  background-position: right !important;
  background-repeat: no-repeat !important;
  font-family: "Barlow", sans-serif;
  background-size: cover !important;
  width: 100%;
  height: 100vh;
}
.road-safety .road-safety-container {
  width: 90%;
  color: #fff;
  margin: 0 auto;
  height: 90%;
  animation: zoomIn 0.7s forwards;
  gap: 1rem;
  max-width: 1200px;
  display: flex;
  text-align: justify;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.road-safety .road-safety-container .title {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
}
.road-safety .road-safety-container .subtitle {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}
.road-safety .road-safety-container .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: #fff;
  margin-bottom: 2rem;
}
@media (width >= 700px) {
  .road-safety {
    background-position: center;
  }
  .road-safety .road-safety-container {
    align-items: end;
  }
  .road-safety .road-safety-container .title {
    font-size: 2.5rem;
  }
  .road-safety .road-safety-container .paragraph {
    width: 50%;
    text-align: justify !important;
  }
}
@media (width <= 1200px) and (width >= 750px) and (orientation: portrait) {
  .road-safety .road-safety-container {
    gap: 3rem;
    align-items: center;
  }
  .road-safety .road-safety-container .title {
    font-size: 3rem;
    text-align: center;
  }
  .road-safety .road-safety-container .subtitle {
    font-size: 2.2rem;
  }
  .road-safety .road-safety-container .paragraph {
    text-align: justify;
    font-size: 1rem;
    margin: 0;
    color: #fff;
    width: 80%;
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }
}

section.road-safety-products {
  background-color: #fff;
  font-family: "Barlow", sans-serif;
}
section.road-safety-products .road-safety-products-container {
  width: 90%;
  height: 90%;
  margin: 2rem auto;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
section.road-safety-products .road-safety-products-container .title {
  color: #e30613;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  justify-content: center;
  gap: 2rem 3rem;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card {
  position: relative;
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 1rem;
  border: 2px solid #a9a9a9;
  border-radius: 15px;
  text-align: center;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card:hover .card-data {
  opacity: 1;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .card-data {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(227, 6, 19, 0.9) -20%, rgba(42, 42, 42, 0.7) 40%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  color: white;
  transition: all 0.5s ease-in-out;
  border-radius: 7px;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .card-data .paragraph {
  width: 90%;
  font-size: 16px;
  text-align: justify !important;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .card-data .paragraph {
  width: 85%;
  font-size: 18px;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card:hover {
  border: 2px solid #e30613;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1);
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card:hover .paragraph {
  animation: fadeInUp 0.5s ease-in-out;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card img {
  width: 90%;
  height: 250px;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .title {
  font-size: 1em;
  font-weight: bold;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .paragraph {
  font-size: 0.9em;
  display: block;
  text-align: justify;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .card-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .card-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .card-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .card-button-variant1:hover a {
  color: #e30613;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .card-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.road-safety-products .road-safety-products-container .road-safety-card-containers .card .card-button-variant1:hover::before {
  width: 100%;
  left: 0;
}
@media (width <= 800px) {
  section.road-safety-products .road-safety-products-container .road-safety-card-containers {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
section.rescue-and-fire-equipament {
  font-family: "Barlow", sans-serif;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
@media (width <= 1200px) {
  section.rescue-and-fire-equipament {
    background-image: none !important;
    background-color: #f3f3f3;
  }
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container {
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content {
  display: flex;
  width: 40%;
  flex-direction: column;
  animation: zoomIn 0.6s forwards;
  gap: 2rem;
  align-items: start;
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-title {
  color: #e30613;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  text-align: start;
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .subtitle {
  color: black;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
  text-align: start;
  width: 100%;
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: black;
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-button-variant-1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  max-width: 350px;
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-button-variant-1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-button-variant-1:hover {
  background-color: #fff;
  color: #e30613;
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-button-variant-1:hover a {
  color: #e30613;
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-button-variant-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-button-variant-1:hover::before {
  width: 100%;
  left: 0;
}
@media (width <= 700px) {
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content {
    width: 100%;
  }
}
@media (width <= 800px) and (orientation: portrait) {
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container {
    align-items: center;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content {
    align-items: center;
    width: 100%;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-title {
    text-align: center;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .subtitle {
    text-align: center;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .paragraph {
    text-align: justify !important;
  }
}
@media (width <= 1200px) and (width >= 750px) and (orientation: portrait) {
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container {
    align-items: center;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content {
    align-items: center;
    gap: 3rem;
    width: 100%;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-title {
    text-align: center;
    font-size: 3rem;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .subtitle {
    text-align: center;
    font-size: 2.2rem;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .paragraph {
    text-align: justify !important;
    font-size: 1.8rem;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-button-variant-1 {
    font-size: 1.7rem;
    max-width: 500px;
  }
}
@media (width <= 800px) and (orientation: landscape) {
  section.rescue-and-fire-equipament {
    background-image: none !important;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container {
    align-items: flex-start;
  }
  section.rescue-and-fire-equipament div.rescue-and-fire-equipament-container .rescue-and-fire-equipament-content .rescue-and-fire-equipament-title {
    text-align: center;
  }
}

section.information-section {
  font-family: "Barlow", sans-serif;
  background-size: cover;
  background-attachment: fixed;
  background-position: left;
}
section.information-section .information-section-container {
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  max-width: 1200px;
  gap: 2rem;
  flex-direction: column;
  margin: 0 auto;
}
section.information-section .information-section-container .title {
  color: white;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
  width: 100%;
  margin-top: 2rem;
}
section.information-section .information-section-container .information-section-cards {
  display: grid;
  margin: 2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  width: 100%;
  justify-content: center;
}
section.information-section .information-section-container .information-section-cards .card {
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: linear-gradient(0deg, rgba(227, 6, 19, 0.7) -20%, rgba(42, 42, 42, 0.5) 40%);
  min-height: 400px;
  animation: zoomIn 0.6s ease forwards;
  animation-fill-mode: forwards;
  border: 2px solid #a9a9a9;
  border-radius: 15px;
}
section.information-section .information-section-container .information-section-cards .card:hover .card-data {
  opacity: 1;
}
section.information-section .information-section-container .information-section-cards .card .hover-text {
  display: none;
  color: #fff;
  text-align: justify;
  font-size: 1rem;
  font-weight: 900;
}
section.information-section .information-section-container .information-section-cards .card p {
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
}
section.information-section .information-section-container .information-section-cards .card img {
  width: 70%;
  height: 40%;
}
section.information-section .information-section-container .information-section-cards .card.click {
  animation: flipInY 1s ease forwards;
  animation-fill-mode: forwards;
}
section.information-section .information-section-container .information-section-cards .card.click .hover-text {
  display: block;
}
@media (width >= 700px) {
  section.information-section {
    background-attachment: inherit;
  }
  section.information-section .information-section-container {
    align-items: flex-start;
  }
  section.information-section .information-section-container .title {
    font-size: 2.5rem;
  }
  section.information-section .information-section-container .information-section-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.data-card-animation {
  animation: flipInY 1s ease forwards !important;
  animation-fill-mode: forwards !important;
}
.data-card-animation .hover-text {
  display: block !important;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.rescue-and-fire-equipament-banner {
  font-family: "Barlow", sans-serif;
  background-size: cover;
  background-position: center;
  height: 50vh;
}
.rescue-and-fire-equipament-banner .rescue-and-fire-equipament-container {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
.rescue-and-fire-equipament-banner .rescue-and-fire-equipament-container .title {
  color: white;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
}
.rescue-and-fire-equipament-banner .rescue-and-fire-equipament-container p {
  font-size: 1rem;
  width: 100%;
  color: #fff;
  text-align: justify;
}
@media (width >= 700px) {
  .rescue-and-fire-equipament-banner .rescue-and-fire-equipament-container {
    align-items: start;
  }
  .rescue-and-fire-equipament-banner .rescue-and-fire-equipament-container .title {
    font-size: 2.5rem;
  }
  .rescue-and-fire-equipament-banner .rescue-and-fire-equipament-container p {
    width: 50%;
  }
}

section.rescue-and-fire-equipament-collection {
  font-family: "Barlow", sans-serif;
}
section.rescue-and-fire-equipament-collection .collection-container {
  width: 90%;
  margin: 2rem auto;
  max-width: 1200px;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
section.rescue-and-fire-equipament-collection .collection-container .card {
  position: relative;
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
section.rescue-and-fire-equipament-collection .collection-container .card:hover .card-data {
  opacity: 1;
}
section.rescue-and-fire-equipament-collection .collection-container .card .card-data {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(227, 6, 19, 0.9) -20%, rgba(42, 42, 42, 0.7) 40%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  color: white;
  transition: all 0.5s ease-in-out;
  border-radius: 7px;
}
section.rescue-and-fire-equipament-collection .collection-container .card .card-data .paragraph {
  width: 90%;
  font-size: 16px;
  text-align: justify !important;
}
section.rescue-and-fire-equipament-collection .collection-container .card .card-data .paragraph {
  width: 70%;
  font-size: 18px;
}
section.rescue-and-fire-equipament-collection .collection-container .card:hover {
  border: 2px solid #e30613;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1);
}
section.rescue-and-fire-equipament-collection .collection-container .card:hover .paragraph {
  animation: fadeInUp 0.5s ease-in-out;
}
section.rescue-and-fire-equipament-collection .collection-container .card .title {
  font-weight: bold;
  font-size: 1rem;
}
section.rescue-and-fire-equipament-collection .collection-container .card .paragraph {
  display: block;
  font-size: 0.9rem;
  text-align: justify !important;
}
section.rescue-and-fire-equipament-collection .collection-container .card img {
  width: 90%;
  height: 200px;
  object-fit: contain;
}
section.rescue-and-fire-equipament-collection .collection-container .card .rescue-and-fire-button-variant-1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.rescue-and-fire-equipament-collection .collection-container .card .rescue-and-fire-button-variant-1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.rescue-and-fire-equipament-collection .collection-container .card .rescue-and-fire-button-variant-1:hover {
  background-color: #fff;
  color: #e30613;
}
section.rescue-and-fire-equipament-collection .collection-container .card .rescue-and-fire-button-variant-1:hover a {
  color: #e30613;
}
section.rescue-and-fire-equipament-collection .collection-container .card .rescue-and-fire-button-variant-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.rescue-and-fire-equipament-collection .collection-container .card .rescue-and-fire-button-variant-1:hover::before {
  width: 100%;
  left: 0;
}
@media (width >= 700px) {
  section.rescue-and-fire-equipament-collection .collection-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

section.accessories-banner {
  font-family: "Barlow", sans-serif;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
  height: 50vh;
}
section.accessories-banner .accessories-banner-container {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  text-align: justify;
}
section.accessories-banner .accessories-banner-container .title {
  color: white;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
}
section.accessories-banner .accessories-banner-container .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: white;
  width: 80%;
}
@media (width >= 700px) {
  section.accessories-banner .accessories-banner-container {
    align-items: end;
    text-align: end;
  }
  section.accessories-banner .accessories-banner-container .paragraph {
    width: 40%;
    text-align: justify !important;
  }
}

section.accessories-collection .collection-container {
  width: 90%;
  margin: 2rem auto;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
section.accessories-collection .collection-container .card {
  position: relative;
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex: 1;
  min-width: 300px;
}
section.accessories-collection .collection-container .card:hover .card-data {
  opacity: 1;
}
section.accessories-collection .collection-container .card .card-data {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(227, 6, 19, 0.9) -20%, rgba(42, 42, 42, 0.7) 40%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  color: white;
  transition: all 0.5s ease-in-out;
  border-radius: 7px;
}
section.accessories-collection .collection-container .card .card-data .paragraph {
  width: 90%;
  font-size: 16px;
  text-align: justify !important;
}
section.accessories-collection .collection-container .card:hover {
  border: 2px solid #e30613;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1);
}
section.accessories-collection .collection-container .card:hover .paragraph {
  animation: fadeInUp 0.5s ease-in-out;
}
section.accessories-collection .collection-container .card .title {
  font-weight: bold;
  font-size: 1rem;
}
section.accessories-collection .collection-container .card .paragraph {
  font-size: 0.9rem;
  display: block;
  text-align: justify !important;
}
section.accessories-collection .collection-container .card img {
  width: 90%;
  height: 300px;
  object-fit: contain;
}
section.accessories-collection .collection-container .card .collection-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.accessories-collection .collection-container .card .collection-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.accessories-collection .collection-container .card .collection-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
section.accessories-collection .collection-container .card .collection-button-variant1:hover a {
  color: #e30613;
}
section.accessories-collection .collection-container .card .collection-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.accessories-collection .collection-container .card .collection-button-variant1:hover::before {
  width: 100%;
  left: 0;
}
@media (width >= 700px) {
  section.accessories-collection .collection-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

section.first-aid-kits-banner {
  font-family: "Barlow", sans-serif;
  background-position: right;
  background-size: 0;
  background-repeat: no-repeat;
  position: relative;
  height: 50vh;
}
section.first-aid-kits-banner .first-aid-kits-banner-container {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  text-align: justify;
}
section.first-aid-kits-banner .first-aid-kits-banner-container .title {
  color: #e30613;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
}
section.first-aid-kits-banner .first-aid-kits-banner-container .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: black;
  width: 80%;
}
@media (width >= 700px) {
  section.first-aid-kits-banner {
    background-size: 30% auto;
  }
  section.first-aid-kits-banner .first-aid-kits-banner-container {
    align-items: start;
    text-align: justify !important;
  }
  section.first-aid-kits-banner .first-aid-kits-banner-container .paragraph {
    width: 40%;
  }
}

section.first-aid-kits-collection {
  font-family: "Barlow", sans-serif;
}
section.first-aid-kits-collection .collection-container {
  width: 90%;
  margin: 2rem auto;
  max-width: 1200px;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
section.first-aid-kits-collection .collection-container .card {
  position: relative;
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
section.first-aid-kits-collection .collection-container .card:hover .card-data {
  opacity: 1;
}
section.first-aid-kits-collection .collection-container .card .card-data {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(227, 6, 19, 0.9) -20%, rgba(42, 42, 42, 0.7) 40%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  color: white;
  transition: all 0.5s ease-in-out;
  border-radius: 7px;
}
section.first-aid-kits-collection .collection-container .card .card-data .paragraph {
  width: 90%;
  font-size: 16px;
  text-align: justify !important;
}
section.first-aid-kits-collection .collection-container .card .card-data .paragraph {
  width: 80%;
}
section.first-aid-kits-collection .collection-container .card:hover {
  border: 2px solid #e30613;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1);
}
section.first-aid-kits-collection .collection-container .card:hover .paragraph {
  animation: fadeInUp 0.5s ease-in-out;
}
section.first-aid-kits-collection .collection-container .card .title {
  font-weight: bold;
  font-size: 1rem;
}
section.first-aid-kits-collection .collection-container .card .paragraph {
  font-size: 0.9rem;
  display: block;
  text-align: justify !important;
}
section.first-aid-kits-collection .collection-container .card img {
  width: 90%;
  height: 200px;
  object-fit: contain;
}
section.first-aid-kits-collection .collection-container .card .collection-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.first-aid-kits-collection .collection-container .card .collection-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.first-aid-kits-collection .collection-container .card .collection-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
section.first-aid-kits-collection .collection-container .card .collection-button-variant1:hover a {
  color: #e30613;
}
section.first-aid-kits-collection .collection-container .card .collection-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.first-aid-kits-collection .collection-container .card .collection-button-variant1:hover::before {
  width: 100%;
  left: 0;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.training-banner-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.training-banner-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
.training-banner-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
.training-banner-button-variant1:hover a {
  color: #e30613;
}
.training-banner-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
.training-banner-button-variant1:hover::before {
  width: 100%;
  left: 0;
}

section.training-banner {
  width: 100%;
  height: 100vh;
  font-family: "Barlow", sans-serif;
  background-position: 40% center !important;
  background-size: cover !important;
}
section.training-banner .training-banner-container {
  display: flex;
  animation: zoomIn 0.7s forwards;
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
  flex-direction: column;
  text-align: justify;
  gap: 1rem;
  align-items: center;
}
section.training-banner .training-banner-container .title {
  color: white;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
}
section.training-banner .training-banner-container .motto {
  color: white;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}
section.training-banner .training-banner-container .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: white;
  font-size: 1.2rem;
}
@media (width >= 700px) {
  section.training-banner {
    background-position: left !important;
  }
  section.training-banner .training-banner-container {
    align-items: end;
    text-align: end;
  }
  section.training-banner .training-banner-container .title {
    font-size: 2.5rem;
  }
  section.training-banner .training-banner-container .motto {
    width: 50%;
  }
  section.training-banner .training-banner-container .paragraph {
    width: 50%;
    text-align: justify !important;
    font-size: 1.2rem;
  }
}

section.base-training-section {
  font-family: "Barlow", sans-serif;
  background-color: #fff;
}
section.base-training-section .base-training-section-container {
  width: 90%;
  padding: 2rem 0;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
section.base-training-section .base-training-section-container .base-training-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
section.base-training-section .base-training-section-container .base-training-content .title {
  color: #e30613;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
}
section.base-training-section .base-training-section-container .base-training-content .subtitle {
  color: black;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}
section.base-training-section .base-training-section-container .base-training-content .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: black;
  width: 100%;
  font-size: 1.1rem;
}
section.base-training-section .base-training-section-container img {
  width: 100%;
}
@media (width >= 700px) {
  section.base-training-section .base-training-section-container .base-training-content {
    width: 60%;
  }
  section.base-training-section .base-training-section-container .base-training-content .title {
    font-size: 2.5rem;
  }
  section.base-training-section .base-training-section-container .base-training-content .paragraph {
    width: 80%;
    text-align: justify !important;
  }
  section.base-training-section .base-training-section-container img {
    width: 40%;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
section.graphic-division-banner {
  width: 100%;
  height: 100vh;
  font-family: "Barlow", sans-serif;
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-position: right bottom;
}
section.graphic-division-banner .graphic-division-banner-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  text-align: center;
}
section.graphic-division-banner .graphic-division-banner-container .title {
  color: #e30613;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
  margin-top: 2rem;
}
section.graphic-division-banner .graphic-division-banner-container .subtitle {
  color: black;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}
section.graphic-division-banner .graphic-division-banner-container .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: black;
}
@media (width >= 500px) {
  section.graphic-division-banner {
    background-position: center bottom;
    background-size: 80% 70%;
  }
}
@media (width >= 900px) {
  section.graphic-division-banner {
    background-position: center bottom;
    background-size: 50% 70%;
  }
}
@media (width >= 1200px) {
  section.graphic-division-banner {
    background-position: right center;
    background-size: 50% 90%;
  }
  section.graphic-division-banner .graphic-division-banner-container {
    align-items: start;
    justify-content: center;
    text-align: start;
  }
  section.graphic-division-banner .graphic-division-banner-container .title {
    font-size: 2.5rem;
  }
  section.graphic-division-banner .graphic-division-banner-container .paragraph {
    width: 45%;
  }
}

section.safety-signs {
  width: 100%;
  height: 100vh;
  font-family: "Barlow", sans-serif;
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-attachment: fixed !important;
  background-position: center !important;
}
section.safety-signs .safety-signs-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  color: #fff;
  text-align: center;
}
section.safety-signs .safety-signs-container .title {
  color: white;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
  margin-top: 2rem;
}
section.safety-signs .safety-signs-container .safety-signs-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.safety-signs .safety-signs-container .safety-signs-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.safety-signs .safety-signs-container .safety-signs-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
section.safety-signs .safety-signs-container .safety-signs-button-variant1:hover a {
  color: #e30613;
}
section.safety-signs .safety-signs-container .safety-signs-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.safety-signs .safety-signs-container .safety-signs-button-variant1:hover::before {
  width: 100%;
  left: 0;
}
section.safety-signs .safety-signs-container .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: white;
}
@media (width >= 700px) {
  section.safety-signs {
    background-position: left center !important;
    background-size: cover !important;
  }
  section.safety-signs .safety-signs-container {
    align-items: end;
    justify-content: center;
    text-align: end;
  }
  section.safety-signs .safety-signs-container .title {
    font-size: 2.5rem;
    width: 50%;
  }
  section.safety-signs .safety-signs-container .paragraph {
    width: 45%;
  }
}

.law-618 {
  background-repeat: no-repeat !important;
  font-family: "Barlow", sans-serif;
}
.law-618 .law-618-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  text-align: center;
}
.law-618 .law-618-container .title {
  color: #e30613;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
}
.law-618 .law-618-container .subtitle {
  color: black;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}
.law-618 .law-618-container .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: black;
}
@media (width >= 1200px) {
  .law-618 {
    min-height: 100vh;
    background-size: 100% 130% !important;
  }
  .law-618 .law-618-container {
    align-items: start;
    text-align: start;
  }
  .law-618 .law-618-container .title {
    font-size: 2.5rem;
  }
  .law-618 .law-618-container .paragraph {
    width: 45%;
  }
}
@media (width <= 1100px) {
  .law-618 {
    background: #f2f2f2 !important;
  }
}

.graphic-division-impression {
  width: 100%;
  height: 100vh;
  font-family: "Barlow", sans-serif;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}
.graphic-division-impression .graphic-division-impression-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}
.graphic-division-impression .graphic-division-impression-container .services-container {
  display: none;
}
.graphic-division-impression .graphic-division-impression-container .title {
  color: white;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
.graphic-division-impression .graphic-division-impression-container .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: white;
}
@media (width <= 1100px) {
  .graphic-division-impression {
    background: linear-gradient(180deg, rgb(51, 51, 51) 32%, rgb(187, 78, 0) 100%) !important;
    padding: 2rem 0;
    height: auto;
  }
  .graphic-division-impression .graphic-division-impression-container .services-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }
  .graphic-division-impression .graphic-division-impression-container .services-container .services {
    width: 250px;
    height: 250px;
  }
}
@media (width <= 1200px) and (width >= 750px) and (orientation: portrait) {
  .graphic-division-impression .graphic-division-impression-container .title {
    font-size: 3rem;
  }
  .graphic-division-impression .graphic-division-impression-container .paragraph {
    width: 100%;
    font-size: 1.8rem;
    text-align: justify;
  }
}

section.graphic-division-letters-3d {
  width: 100%;
  height: 100vh;
  font-family: "Barlow", sans-serif;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 15%;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: end;
  align-items: start;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container .title {
  color: #e30613;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container .subtitle {
  color: black;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: black;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container .pop-up-image {
  display: none;
  width: 100%;
  object-fit: contain;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container .graphic-division-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container .graphic-division-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container .graphic-division-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container .graphic-division-button-variant1:hover a {
  color: #e30613;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container .graphic-division-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.graphic-division-letters-3d .graphic-division-letters-3d-container .graphic-division-button-variant1:hover::before {
  width: 100%;
  left: 0;
}
@media (width >= 700px) {
  section.graphic-division-letters-3d {
    background-position: center center;
  }
  section.graphic-division-letters-3d .graphic-division-letters-3d-container .title {
    font-size: 2.5rem;
  }
  section.graphic-division-letters-3d .graphic-division-letters-3d-container .paragraph {
    width: 45%;
    text-align: justify !important;
  }
}
@media (width <= 1200px) {
  section.graphic-division-letters-3d {
    background: #ececec !important;
  }
  section.graphic-division-letters-3d .graphic-division-letters-3d-container {
    gap: 2rem;
    align-items: center;
  }
  section.graphic-division-letters-3d .graphic-division-letters-3d-container .pop-up-image {
    display: block;
  }
}
@media (width <= 1200px) and (width >= 750px) and (orientation: portrait) {
  section.graphic-division-letters-3d .graphic-division-letters-3d-container .title {
    font-size: 3rem;
  }
  section.graphic-division-letters-3d .graphic-division-letters-3d-container .paragraph {
    width: 100%;
    font-size: 1.8rem;
    text-align: justify;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
section.fire-system {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
section.fire-system .fire-system-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  padding: 1rem 0;
  gap: 2rem;
  align-items: center;
}
section.fire-system .fire-system-container .title {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
section.fire-system .fire-system-container .card-title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0;
}
section.fire-system .fire-system-container .card-paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: #fff;
}
section.fire-system .fire-system-container .card-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.fire-system .fire-system-container .card-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.fire-system .fire-system-container .card-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
section.fire-system .fire-system-container .card-button-variant1:hover a {
  color: #e30613;
}
section.fire-system .fire-system-container .card-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.fire-system .fire-system-container .card-button-variant1:hover::before {
  width: 100%;
  left: 0;
}
section.fire-system .fire-system-container .fire-system-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  width: 100%;
  gap: 2rem;
}
section.fire-system .fire-system-container .fire-system-cards .card {
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 2px solid #a9a9a9;
  padding: 1rem;
}
section.fire-system .fire-system-container .fire-system-cards .card:hover .card-data {
  opacity: 1;
}
section.fire-system .fire-system-container .fire-system-cards .card:hover {
  border: 2px solid #e30613;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1);
}
section.fire-system .fire-system-container .fire-system-cards .card img {
  width: 90%;
  height: 250px;
}
@media (width >= 700px) {
  section.fire-system .fire-system-container .fire-system-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fire-system-services {
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
}
.fire-system-services .fire-system-services-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.fire-system-services .fire-system-services-container .title {
  color: #e30613;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
}
.fire-system-services .fire-system-services-container .subtitle {
  color: #640c00;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}
.fire-system-services .fire-system-services-container .paragraph {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: #000;
}
.fire-system-services .fire-system-services-container .services-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.fire-system-services .fire-system-services-container .services-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
.fire-system-services .fire-system-services-container .services-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
.fire-system-services .fire-system-services-container .services-button-variant1:hover a {
  color: #e30613;
}
.fire-system-services .fire-system-services-container .services-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
.fire-system-services .fire-system-services-container .services-button-variant1:hover::before {
  width: 100%;
  left: 0;
}
@media (width >= 1000px) {
  .fire-system-services .fire-system-services-container {
    align-items: start;
  }
  .fire-system-services .fire-system-services-container .subtitle {
    text-align: left;
    width: 40%;
  }
  .fire-system-services .fire-system-services-container .paragraph {
    text-align: justify !important;
    width: 40%;
  }
}
@media (width <= 999px) {
  .fire-system-services {
    background: white !important;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.quotation-modal-container {
  display: none;
  width: 100%;
  position: fixed;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}
.quotation-modal-container .quotation-modal {
  display: flex;
  flex-direction: column;
  animation: fadeInUp 1s forwards;
  z-index: 2;
  width: 50%;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1), 0 16px 24px rgba(255, 255, 255, 0.2), 0 24px 32px rgba(255, 255, 255, 0.15);
  justify-content: space-evenly;
  align-items: center;
  border-radius: 10px;
}
.quotation-modal-container .quotation-modal .title-modal {
  color: #000;
  font-size: 1rem;
  font-weight: 900;
  margin: 0;
}
.quotation-modal-container .quotation-modal .modal-social-media {
  display: flex;
  gap: 0.5em;
  justify-content: center;
}
.quotation-modal-container .quotation-modal .modal-social-media img {
  width: 2.5em;
  cursor: pointer;
}
.quotation-modal-container .quotation-modal .close-modal {
  color: #e30613;
  cursor: pointer;
}
@media (width <= 600px) {
  .quotation-modal-container .quotation-modal {
    width: 90%;
  }
}
.quotation-modal-container.show {
  display: flex;
}

.container-authentication {
  display: none;
  top: 0;
  left: 0;
  z-index: 1;
  position: fixed;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.container-authentication .authentication {
  display: flex;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1), 0 16px 24px rgba(255, 255, 255, 0.2), 0 24px 32px rgba(255, 255, 255, 0.15);
  background-size: cover;
  animation: bounce-in-down 0.7s forwards;
  z-index: 4;
  border-radius: 15px;
  width: 80%;
  height: 70%;
  max-width: 1200px;
  justify-content: flex-end;
  align-items: center;
  padding: 0 2rem;
}
.container-authentication .authentication .exit-button {
  position: absolute;
  top: 0;
  left: 0;
  color: gray;
  background: transparent;
  font-size: 2em;
  border: none;
  cursor: pointer;
}
.container-authentication .authentication .container-authentication-login {
  background-color: #fff;
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  border-radius: 5px;
}
.container-authentication .authentication .container-authentication-login .title {
  color: #e30613;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0;
}
.container-authentication .authentication .container-authentication-login .oauth-button {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  justify-content: flex-start;
  width: 90%;
  align-items: center;
  background-color: transparent;
  border: 2px solid black;
  font-size: 0.9rem;
  border-radius: 5px;
  cursor: pointer;
}
.container-authentication .authentication .container-authentication-login .oauth-button img {
  width: 1.5em;
  cursor: pointer;
}
.container-authentication .authentication .container-authentication-login .register-text {
  font-size: 1rem;
  color: gray;
}
.container-authentication .authentication .container-authentication-login .register-button {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.container-authentication .authentication .container-authentication-login .register-button a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
.container-authentication .authentication .container-authentication-login .register-button:hover {
  background-color: #fff;
  color: #e30613;
}
.container-authentication .authentication .container-authentication-login .register-button:hover a {
  color: #e30613;
}
.container-authentication .authentication .container-authentication-login .register-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
.container-authentication .authentication .container-authentication-login .register-button:hover::before {
  width: 100%;
  left: 0;
}

.container-authentication.show {
  display: flex;
}

@media (width >= 768px) {
  .container-authentication .authentication {
    width: 70%;
  }
  .container-authentication .authentication .container-authentication-login {
    width: 50%;
  }
  .container-authentication .authentication .container-authentication-login .title {
    font-size: 2.5rem;
  }
}
.seeker {
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  width: 100%;
  justify-content: center;
  height: 100%;
  z-index: 1;
  display: none;
}
.seeker .seeker-content {
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1), 0 16px 24px rgba(255, 255, 255, 0.2), 0 24px 32px rgba(255, 255, 255, 0.15);
  animation: bounceInUp 1s forwards;
  margin-top: 10%;
  z-index: 2;
  display: flex;
  width: 80%;
  height: 35px;
  align-items: center;
  padding: 1rem;
  border: 1px solid white;
  font-size: 1.5rem;
  border-radius: 5px;
}
.seeker .seeker-content input {
  width: 100%;
  outline: none;
  padding: 0.5rem;
  font-size: 1rem;
  background: transparent;
  font-weight: bold;
  border: none;
  color: #fff;
}
.seeker .seeker-content input::placeholder {
  color: #fff;
  opacity: 1;
  font-weight: bold;
}
@media (width <= 768px) {
  .seeker .seeker-content {
    left: 5%;
    top: 10%;
  }
}

.seeker.show {
  display: flex;
}

.technical-sheet-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.technical-sheet {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 10px;
  max-width: 90%;
  max-height: 90%;
  align-items: center;
}

.technical-sheet-image {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.technical-sheet-utils {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  background: white;
  padding: 0.5rem;
  border-radius: 1rem;
  margin-top: 10px;
}

.exit-button {
  background: red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  font-weight: 900;
  cursor: pointer;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.util {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.util.disabled {
  background: #7d7d7d;
  cursor: not-allowed;
  fill: white;
}

.util img {
  height: auto;
}

@media (width >= 901px) {
  .technical-sheet {
    flex-direction: row;
    gap: 1rem;
  }
  .technical-sheet-utils {
    flex-direction: column;
    width: auto;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
section.navigator {
  background: linear-gradient(90deg, rgb(157, 7, 7) 1%, rgb(252, 66, 66) 14%, rgb(252, 66, 66) 86%, rgb(157, 7, 7) 100%);
}
section.navigator .navigator-item {
  display: flex;
  width: 90%;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
  flex-direction: column;
  align-items: center;
}
section.navigator .navigator-item .title {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
section.navigator .navigator-item .nav-list {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 1.5rem;
}
section.navigator .navigator-item .nav-list li {
  background-color: transparent;
  overflow: hidden;
  display: inline-block;
  position: relative;
  font-weight: 900;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #fff;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
}
section.navigator .navigator-item .nav-list li a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.navigator .navigator-item .nav-list li:hover {
  background-color: #fff;
  color: #e30613;
}
section.navigator .navigator-item .nav-list li:hover a {
  color: #e30613;
}

section.alarm-detection-section .detection-alarm-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  padding: 2rem 0;
  gap: 2rem;
  flex-direction: column;
}
section.alarm-detection-section .detection-alarm-container .title {
  color: #e30613;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
section.alarm-detection-section .detection-alarm-container .subtitle {
  color: #640c00;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
section.alarm-detection-section .detection-alarm-container .text {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: #000;
}
section.alarm-detection-section .detection-alarm-container .image-info {
  object-fit: contain;
  width: 50%;
  margin: 0 auto;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .row {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (width <= 700px) {
  section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .row {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card {
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding: 1rem;
  min-height: 400px;
  min-width: 300px;
  border: 2px solid #a9a9a9;
  border-radius: 15px;
  text-align: center;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card:hover .card-data {
  opacity: 1;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-image {
  width: 90%;
  height: 250px;
  object-fit: contain;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-title {
  font-weight: bold;
  font-size: 1rem;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-data {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(227, 6, 19, 0.9) -20%, rgba(42, 42, 42, 0.7) 40%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  color: white;
  transition: all 0.5s ease-in-out;
  border-radius: 7px;
  border-radius: 13px;
  box-sizing: border-box;
  padding: 1rem;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-data .paragraph {
  width: 90%;
  font-size: 16px;
  text-align: justify !important;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-paragraph {
  font-size: 0.9rem;
  display: block;
  text-align: justify;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant2 {
  background-color: transparent;
  overflow: hidden;
  display: inline-block;
  position: relative;
  font-weight: 900;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #fff;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  border-color: #e30613;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant2 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant2:hover {
  background-color: #fff;
  color: #e30613;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant2:hover a {
  color: #e30613;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant2 a {
  color: #e30613;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant1:hover a {
  color: #e30613;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card .card-button-variant1:hover::before {
  width: 100%;
  left: 0;
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card:hover {
  border: 2px solid #e30613;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1);
}
section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card:hover .card-paragraph {
  animation: fadeInUp 0.5s ease-in-out;
}
@media (width <= 500px) {
  section.alarm-detection-section .detection-alarm-container .detection-alarm-objects .card {
    width: 90%;
    min-width: 200px !important;
    margin: 0 auto;
    min-height: 300px !important;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-from-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
section.navigator-fire-suppression {
  background: radial-gradient(circle, rgb(227, 6, 19) 0%, rgb(100, 12, 0) 48%);
}
section.navigator-fire-suppression .navigator-item {
  display: flex;
  width: 90%;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
  flex-direction: column;
  align-items: center;
}
section.navigator-fire-suppression .navigator-item .title {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
section.navigator-fire-suppression .navigator-item .nav-list {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 1.5rem;
}
section.navigator-fire-suppression .navigator-item .nav-list li {
  background-color: transparent;
  overflow: hidden;
  display: inline-block;
  position: relative;
  font-weight: 900;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #fff;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
}
section.navigator-fire-suppression .navigator-item .nav-list li a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.navigator-fire-suppression .navigator-item .nav-list li:hover {
  background-color: #fff;
  color: #e30613;
}
section.navigator-fire-suppression .navigator-item .nav-list li:hover a {
  color: #e30613;
}

section.fire-suppression-section .fire-suppression-container {
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  padding: 2rem 0;
  gap: 2rem;
  flex-direction: column;
}
section.fire-suppression-section .fire-suppression-container .title {
  color: #e30613;
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
section.fire-suppression-section .fire-suppression-container .subtitle {
  color: #640c00;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
}
section.fire-suppression-section .fire-suppression-container .subtitle-section {
  color: #640c00;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
}
section.fire-suppression-section .fire-suppression-container .text {
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  color: #000;
}
section.fire-suppression-section .fire-suppression-container .image-info {
  object-fit: contain;
  width: 50%;
  margin: 0 auto;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .row {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (width <= 700px) {
  section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .row {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card {
  display: flex;
  border-radius: 10px;
  border: 2px solid #a9a9a9;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding: 1rem;
  min-height: 400px;
  min-width: 300px;
  border: 2px solid #a9a9a9;
  border-radius: 15px;
  text-align: center;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card:hover .card-data {
  opacity: 1;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-image {
  width: 90%;
  height: 250px;
  object-fit: contain;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-title {
  font-weight: bold;
  font-size: 1rem;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-data {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(227, 6, 19, 0.9) -20%, rgba(42, 42, 42, 0.7) 40%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  color: white;
  transition: all 0.5s ease-in-out;
  border-radius: 7px;
  border-radius: 13px;
  box-sizing: border-box;
  padding: 1rem;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-data .paragraph {
  width: 90%;
  font-size: 16px;
  text-align: justify !important;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-paragraph {
  font-size: 0.9rem;
  display: block;
  text-align: justify;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant2 {
  background-color: transparent;
  overflow: hidden;
  display: inline-block;
  position: relative;
  font-weight: 900;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #fff;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  border-color: #e30613;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant2 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant2:hover {
  background-color: #fff;
  color: #e30613;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant2:hover a {
  color: #e30613;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant2 a {
  color: #e30613;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant1 {
  background-color: #e30613;
  overflow: hidden;
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Barlow", sans-serif;
  border: 2px solid #e30613;
  padding: 8px 13px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: #fff;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant1:hover {
  background-color: #fff;
  color: #e30613;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant1:hover a {
  color: #e30613;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: width 0.5s ease, left 0.5s ease;
  z-index: 0;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card .card-button-variant1:hover::before {
  width: 100%;
  left: 0;
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card:hover {
  border: 2px solid #e30613;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1);
}
section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card:hover .card-paragraph {
  animation: fadeInUp 0.5s ease-in-out;
}
@media (width <= 500px) {
  section.fire-suppression-section .fire-suppression-container .fire-suppression-objects .card {
    width: 90%;
    min-width: 200px !important;
    margin: 0 auto;
    min-height: 300px !important;
  }
}

body {
  margin: 0;
}

/*# sourceMappingURL=main.css.map */