:root {
  --white-siemens: #ffffff;
  --verde-siemens: #00c4b3;
  --dark-siemens: #000913;
  --semi_white-siemens: #f2f2f2;
}
@font-face {
   font-family: 'Metropolis-bold';
   src: url('./fonts/Metropolis-SemiBold.otf') format("truetype");
   font-weight: bold;
   font-style: bold;
   font-display: swap;
}

@font-face {
   font-family: 'Metropolis-regular';
   src: url('./fonts/Metropolis-Regular.otf') format("truetype");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
h1,h2,h3{
    font-family: Metropolis-bold, Arial, sans-serif;
}
p,a,input,button{
    font-family: Metropolis-Regular, Arial, sans-serif;
}
body {
  scroll-behavior: smooth;
  background-color: var(--white-siemens);
}

h2 {
  font-size: 3rem;
  margin: 1rem 0;
}

.products,
.home-banner {
  display: flex;
  margin: 0 auto;
  width: 100%;
}

.menu-logo {
  display: none;
}

header {
  width: 10rem;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 3;
  background-color: var(--verde-siemens);
  border-left: 1px solid #707070;
  overflow: hidden;
}
main {
  margin-right: 10rem;
}

.nav-tarsa {
  height: 100%;
  color: #fdfdfd;
}

.logo-tarsa {
  position: absolute;
  left: 2rem;
  top: 2rem;
}

.nav-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
}
.nav-wrapper__menu{
  width: 100%;  
}
.nav-wrapper__menu>span{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.nav-wrapper__menu span,
.icon-menu {
  font-size: 18px;
  cursor: pointer;
}
.nav-wrapper__menu-contact svg {
  font-size: 2rem;
}

/* Home page */
.home-banner {
  height: 100vh;
  position: relative;
  color: var(--white-siemens);
  background-color: rgba(20, 19, 19, 0.09);
}
.video_banner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.video_banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.particles-home {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-content__h1 {
  font-size: 4.5rem;
  margin: 0.5rem 0;
  font-weight: normal;
}

.banner-content__h2 {
  font-size: 1rem;
  margin: 0;
  margin: 0.5rem 0;
  font-weight: lighter;
  letter-spacing: 1px;
}
.banner-content__h2 span {
  color: var(--verde-siemens);
  font-size: 1.2rem;
}
.arrow-left {
  fill: rgba(255, 255, 255, 0.575);
}
.certication-siemens {
  position: relative;
  margin: 0;
  color: rgba(255, 255, 255, 0.575);
}
.certication-siemens::after {
  position: absolute;
  content: "";
  top: 0.6rem;
  left: -3.3rem;
  width: 50px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.575);
}

.home-banner__content {
  height: 100%;
  display: flex;
  /* align-items: center; */

  /* Pasael texto en la parte inferior del viewport  */
  align-items: end;
}
.home-banner__row {
  width: 100%;
}
.banner-content_row {
  margin: 1rem 0 3rem 0;
}
.typed_title {
  font-size: 4.5rem;
}
.change-title {
  font-style: normal;
}

/* Productos */

.products {
  padding: 9rem 3rem;
}
.products__content {
  margin: 5rem 0;
  color: #3c3737;
}
.products-text {
}
.products-brief__applications {
  display: flex;
  justify-content: center;
}
.products-brief__application {
  height: 380px;
}
.card {
  height: 100%;
  width: 100%;
  background-color: #888b8d;
  padding: 1rem;
  transform-style: preserve-3d;
}
.card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
}

.card:hover .card__body {
  transform: translate3d(-50%, -50%, 100%px) rotate(-15deg);
}
.product-title h2 {
  font-size: 1.5rem;
  transform-style: preserve-3d;
  transform: translate3d(-0%, -0%, 40px);
  text-align: center;
  color: var(--white-siemens);
}
.product-img {
  position: relative;
  z-index: 2;
}
.product-circle {
  position: absolute;
  z-index: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  top: 22%;
  left: 22%;
  background-color: var(--verde-siemens);

  transform-style: preserve-3d;
  transform: translate3d(-0%, -0%, 20px);
}
.product-img img {
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-style: preserve-3d;
  transform: translate3d(-0%, -0%, 60px);
  filter: drop-shadow(0 8px 4px rgb(26, 25, 25));
}

.btn-AyM {
  transform-style: preserve-3d;
  transform: translate3d(-0%, -0%, 50px);
  z-index: 3;
  width: 100%;
  padding: 10px 15px;
  border-radius: 15px;
  background-color: var(--verde-siemens);
  border: 0px;
  color: var(--white-siemens);
  transition: all 0.5s ease;
  overflow: hidden;
}

.btn-AyM span {
  z-index: 2;
}

.btn-AyM::after {
  content: "";
  background-color: #353838;
  width: 100%;
  height: 300px;
  position: absolute;
  top: -300px;
  border-radius: 0 0 300px 300px;
  left: 0;
  z-index: -1;
  transition: 0.4s ease-in-out all;
}

.btn-AyM:hover::after {
  top: 0;
  border-radius: 0;
}
.btn-products {
  width: 50%;
  border-radius: 10px;
  border: 0px;
}

.btn-products:hover {
  color: var(--white-siemens);
  border: 0px;
  background: #707070;
}

.carousel-indicators button {
  border-radius: 50%;
  width: 15px !important;
  height: 15px !important;
  background-color: var(--verde-siemens) !important;
}
.carousel-indicators {
  bottom: -5rem !important;
}

/* About */
.about {
  color: #3c3737;
}

.about-content .row {
  align-items: center;
  color: rgb(37, 36, 36);
}
.about__video {
  overflow: hidden;
  background-color: #888b8d;
  padding: 13rem 3rem;
  position: relative;
  transition: 1s ease;
}

.active-video {
  width: 100%;
  transition: 1s ease-out;
  background: linear-gradient(
    180deg,
    #888b8d 60.94%,
    rgb(255 255 255 / 51%) 100%
  );
}

.about__text {
  padding: 13rem 2rem;
  display: block;
}
.active-video-text {
  display: none;
  opacity: 0.5;
  transition: 1s ease-out;
}

.about__video .video {
  width: 100%;
  box-shadow: -12px 18px 18px rgba(112, 112, 112, 1);
}
.about__video .video {
  position: relative;
}

/* Contact */

.contact__content {
  padding: 9rem 3rem;
}
.contact__title {
  color: #3c3737;
}
.contact-form__inputs input,
textarea {
  width: 100%;
  height: 50px;
  border: 0;
  border-bottom: 5px solid var(--verde-siemens);
  font-size: 1.7rem;
  background-color: var(--white-siemens);
  color: #3c3737;
}
.contact-form__inputs textarea {
  max-height: 100px;
  transition: height 0.5s ease;
}
.contact-form__inputs textarea:focus {
  height: 100px;
}
.contact-form__inputs input:focus,
textarea:focus {
  outline: none;
}
.contact-form__inputs input::placeholder,
textarea::placeholder {
  font-size: 1.7rem;
}

.contact-form__inputs {
  margin: 2rem 0;
}

.btn-tarsa {
  padding: 15px 20px;
  border-radius: 5px;
  border: 2px solid var(--verde-siemens);
  background-color: var(--verde-siemens);
  color: var(--white-siemens);
  font-size: 1.3rem;
}

/* Sucursales  */

.sucursales {
  /* background: linear-gradient(
    180deg,
    rgb(255, 255, 255) 0%,
    rgb(224, 224, 224) 100%,
    rgba(235, 235, 235, 1) 100%
  ); */
  position: relative;
}
.sucursales__content {
  color: #3c3737;
}
.sucursal-content {
  width: 100%;
  padding: 2.5rem 3rem;
}
.sucursales__item h3 {
  font-size: 3.5rem;
  position: relative;
}
.sucursales__item h3::after {
  content: "";
  position: absolute;
  height: 80%;
  width: 5px;
  top: 1rem;
  left: -1rem;
  background-color: var(--verde-siemens);
}
.footer-content {
  width: 100%;
  background-color: #3c3737;
}
.footer-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
  margin: 2rem 0;
}
.logo {
  height: 100%;
  border-right: 3px solid var(--verde-siemens);
}
.social-media {
  display: flex;
  justify-content: space-around;
}
.social-icon {
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
}
.social-icon path {
  fill: var(--white-siemens);
  transition: all 0.5s ease;
}
.social-icon:hover path {
  fill: var(--verde-siemens);
  transform: scale(1.02);
}
@media screen and (max-width: 1200px) {
  .nav-wrapper__menu-contact .row {
    flex-direction: row-reverse;
  }
  main {
    width: 100%;
  }

  header {
    width: 100%;
    height: 80px;
    background-color: #353838;
    position: relative;
  }
  .nav-wrapper {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    padding: 1.5rem;
  }
  .nav-wrapper__menu span {
    color: transparent;
  }
  .nav-wrapper__menu .icon-menu {
    font-size: 2rem;
  }
  .nav-wrapper {
    width: 100%;
  }
}

/* MENU */
.menu {
  width: 0%;
  position: relative;
  display: none;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

.menuDropdown {
  display: block;
  position: fixed;
  width: 100%;
  height: 100vh;
    left: 0;
    top: 0;
    right: 0;
  z-index: 2;
 background: rgb(0, 9 ,19, 90%);
  background-size: cover;
  background-repeat: no-repeat;
  object-fit: cover;
}
.body-block{
   overflow-y:hidden;
  overflow-x:hidden;   
}
 
.close {
 text-transform: uppercase;
}


.menu-content {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  margin:0px;
}

.menu-content__option {
  display: flex;
  justify-content: end;
  padding: 5rem 13rem 5rem 5rem;
  font-size: 2.8rem;
  text-align: right;
}
.menu-content__option li {
  list-style: none;
}




.menu-option {
  text-decoration: none;
  color: #c2c2c2;
}
.menu-option:hover {
  color: #fff;
  border-bottom: 4px solid #fff;
}


.menu-option {
  text-decoration: none;
  color: #707070;
}



.activo {
  color: #fff;
  border-bottom: 4px solid #fff;
  transition: border-bottom 1s ease;
}


.support path {
  fill: var(--white-siemens);
}
.whatsapp path {
  fill: var(--white-siemens) !important;
}
  .logo-tarsa img {
    width: 18rem;
    height: auto;
  }
@media screen and (max-width: 992px) {
  .menu-content__option {
    font-size: 2.5rem;
}
    
    .home-banner {
  height: 88vh;
  position: relative;
  color: var(--white-siemens);
  background-color: rgba(20, 19, 19, 0.09);
}

  header {
    border-left: 0px;
  }

  .nav-tarsa {
    background-color: #353838;
    border: 0px;
  }

  .logo-tarsa img {
    width: 18rem;
    height: auto;
  }
  .product-img {
    width: 300px;
    height: 300px;
  }
  .card {
    height: auto;
  }
  /* .products-brief__application {
    height: 550px;
  } */
  .products-brief__applications {
  }
}

@media screen and (max-width: 768px) {
    


    .nav-wrapper__menu>span {
    justify-content: space-between;
  
}

  .logo,.social-media {
   margin-bottom: 1rem;
  }    
  .logo-tarsa img {
    width: 15rem;
  }
  .products {
    padding: 3rem 1rem;
  }

  .products-brief {
    margin: 4rem 0;
  }
  .products-brief__application {
    height: 509px;
    margin: 1rem 0;
  }
  .contact-form__inputs input::placeholder,
  textarea::placeholder {
    font-size: 1rem;
  }
  .footer-wrapper {
    flex-direction: column;
    gap: 2rem;
  }
  .logo {
    display: flex;
    justify-content: center;
    border: 0px;
  }
  .card {
    height: 100%;
  }
  .about__text {
    padding: 13rem 1rem;
  }
  .contact__content {
    padding: 9rem 1rem;
  }
}

@media screen and (max-width: 576px) {
    .menu-content__option {

  padding: 5rem;

}
    .about-content .row{
            flex-direction: column-reverse;
    }
    .about__video {
    padding: 5rem 1rem;
   }
    .about__text {
    padding: 5rem 1rem;
   }
  .logo-tarsa img {
    width: 12rem;
    display: none;
  }
  .menu-logo {
    display: block;
    width: 1rem;
    height: 1rem;
  }
  .menu-logo img {
    width: 10rem;
  }
  .nav-wrapper {
    padding: 1.5rem;
  }
  .banner-content__h1 {
    font-size: 2.5rem;
  }
  .certication-siemens::after {
    position: absolute;
    content: "";
    top: -0.5rem;
    left: 0rem;
    width: 50px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.575);
  }
  .menu-content__option {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: none;
    font-size: 3rem;
    text-align: center;
    width: 100%;
  }
  .menu-content__ul {
    padding: 0;
  }
}
/* Switch */
.switch {
  background: #343d5b;
  border-radius: 1000px;
  border: none;
  position: relative;
  display: flex;
  align-items: center;
  outline: none;
}
.switch::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  background-color: #fdfdfd;
  top: 0;
  left: 0;
  right: unset;
  border-radius: 1000px;
  transition: 0.3 ease all;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
}
.activeSwitch {
  background-color: var(--verde-siemens);
}
.activeSwitch::after {
  right: 0;
  left: unset;
}
.switch span {
  width: 30px;
  height: 30px;
  line-height: 30px;
  display: block;
  background: none;
  color: var(--white-siemens);
}
.switch svg {
  font-size: 1rem;
}

/* Modo oscuro */
body.darkmode {
  background: #000913;
  color: var(--white-siemens) !important;
}
.darkmode p,
.darkmode h2,
.darkmode h3,
.darkmode h4 {
  color: var(--white-siemens);
}
.darkmode header {
  background-color: #000913;
}
.darkmode .about__video {
  background: linear-gradient(
    180deg,
    var(--verde-siemens) 60.94%,
    rgba(0, 196, 179, 0.51) 100%
  );
}

.darkmode .active-video {
  width: 100%;
  transition: 1s ease-out;
  background: linear-gradient(
    180deg,
    var(--verde-siemens) 60.94%,
    rgba(0, 196, 179, 0.51) 100%
  );
}
.darkmode input {
  background-color: var(--dark-siemens);
  color: var(--white-siemens);
}
.darkmode textarea {
  background-color: var(--dark-siemens);
  color: var(--white-siemens);
}

.darkmode .footer-content {
  color: var(--dark-siemens);
  background-color: var(--verde-siemens);
}
.darkmode .social-media .social-icon path {
  fill: var(--semi_white-siemens);
}
.darkmode .about__video .video {
  box-shadow: -12px 18px 18px rgb(235 235 235 / 33%);.menu-content__option li
}



.loader{
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
background-color: #f9f9f9;
opacity: 1;
background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #f9f9f9 19px ), repeating-linear-gradient( #ffffff55, #ffffff );
  transition: clip-path 0.5s ease-in-out;
}

.loaderclose{
      clip-path: circle(0% at 0% 0);
}