* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-family: 'Montserrat', sans-serif;
   scroll-behavior: smooth;
   transition: all .5s ease-in;
}

body {
   font-size: 62.5%;
   background-color: #f2e9dc;
}

:root {
   --text-color: #000;
   --primary-text: 3rem;
   --secondary-text: 2.5rem;
   --terciary-text: 2rem;
   --cuaternary-text: 1.6rem;
   --hover-color: #000;
   --btn-color: #000;
}


li {
   list-style: none;
}

a {
   text-decoration: none;
   color: var(--text-color);
}

abbr {
   text-decoration: none !important;
   color: var(--text-color) !important;
   cursor: pointer !important;
}

a:hover {
   color: #000;
}

h1 {
   font-weight: bold;
}

#particles-js {
   z-index: 0;
   position: fixed;
   width: 100%;
   height: 100vh;
}

#main-navbar ul {
   margin-top: 50px;
   width: 90%;
   display: flex;
   color: var(--text-color);
   justify-content: space-around;
   margin-left: auto;
   margin-right: auto;
   align-items: center;
}

#main-navbar .main-logo {
   max-width: 100px;
}

#main-navbar .main-logo img {
   width: 100%;
}

#main-navbar li {
   font-size: 21px;
   padding: 10px;
}

#main-navbar li a {
   font-weight: bold;
}

#main-navbar li .inactive {
   display: none;
}

#main-navbar li:hover .inactive,
.navbar-nav-footer li:hover span {
   display: block;
   height: 4px;
   width: 100%;
   border-radius: 2px;
   background-color: #000;
}

#btn-menu {
   justify-self: flex-end;
   border: none;
   font-size: 2.5rem;
   color: var(--text-color);
   position: fixed;
   top: 5%;
   right: 5%;
}

.main-container {
   width: 100%;
   height: 900px;
   background-color: #f2e9dc;
}

#section-nav-slider {
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

#container-slider-iot {
   margin: auto 0;
}

.main-container .row {
   font-size: var(--cuaternary-text);
}

#row-cards .column {
   max-width: 400px;
   min-width: 200px;
   /* border-radius: 30px; */
}

#section-cards {
   width: 100%;
   height: auto;
}

.card {
   box-shadow: 0 10px 15px -3px rgba(33, 150, 243, .4), 0 4px 6px -4px rgba(65, 157, 233, 0.4);
   width: 100%;
}

.card-container {
   perspective: 1000px;
}

.card-proyectos {
   width: 430px;
   height: 430px;
   position: relative;
   transform-style: preserve-3d;
   transition: transform 0.7s;
}

.card-rotation,
.card-back {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}

.card-back {
   background: #fff;
   transform: rotateY(180deg);
   border-radius: 10px;
}

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


.card-img {
   height: 100% !important;
}

.card-img-overlay {
   width: 95%;
   height: 95%;
   margin: 0 auto;
   margin-top: 12px;
   border-radius: 12px;
}

.card-img-overlay .tag {
   position: absolute;
   left: 0;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   background: black !important;

}

@media (max-width: 990px) {
   .card-proyectos {
      max-width: 100%;
      margin-bottom: -10px;
      margin: 0 auto;
   }

   .card-img-overlay {
      margin: 0 auto;
      margin-top: 10px;
      border-radius: 12px;
   }

   .card-rotation,
   .card-back {
      width: 100%;
      height: 90%;
   }
}


#row-cards .column .card-img-overlay {
   font-size: var(--terciary-text);
   text-align: center;
   font-weight: bold;
}

#row-cards .column .card-img-overlay a {
   font-weight: bold;
}

#row-cards .column .card-img-overlay i {
   font-size: 5rem;
}

#title-cards .h1 {
   font-weight: bold;
}

#row-cards .column .card {
   border-radius: 30px;
}

.button-callToAction {
   background-color: #7c6fe2;
}

.machineLearning {
   width: 100%;
   height: 600px;
   background-color: #f2e9dc;
}

#keypeople {
   width: 100%;
   height: auto;
}

.card {
   border: none;
   border-radius: 30px;
}

.container__card--text {
   display: flex;
   align-items: center;
   justify-content: center;
}

.card-text {
   font-size: 1.5rem;
}

.card-text span {
   font-weight: bold;
}

.card-title {
   font-size: 2.5rem;
   font-weight: bold;
   margin-bottom: 25px;
}

.slider__button {
   font-size: 3rem;
}

.username {
   margin-top: 20px;
}

.username a {
   color: black;
   font-size: 1.3rem;
   font-weight: bold;
}

.card-body {
   max-width: 80%;
}

.projects {
   width: 100%;
   background-color: #f2e9dc;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   height: auto;
}

.projects .card-img-overlay {
   background-color: rgb(193 189 189 / 75%);
}

.projects .container-cards {
   justify-content: center;
}

.logo-project {
   max-width: 200px !important;
   margin: 0 auto;
   border-radius: 0 !important;
}

@media (max-width: 780px) {
   .makeAppointment {
      margin-top: 500px !important;
   }
}


.makeAppointment input {
   background-color: #d4d4d4;
   font-size: 1rem;
   height: 40px;
}

.dateForm span {
   padding-left: 10px;
   width: 98%;
   font-size: 1rem;
   background-color: #d4d4d4;
}

.dateForm input {
   width: 90%;
   height: 100%;
   border: none;
}

.footer {
   background-color: #f2e9dc;
}

.socialMedia {
   color: #000;
}


.hamburguer {
   color: #000;
}

#main-navbar li .activo {
   height: 4px;
   width: 100%;
   border-radius: 2px;
   background-color: white;
   display: block !important;
}

.navbar-nav {
   width: 100%;
   background: #000;
}

.navbar-nav>li>a:hover {
   color: #fff;
   border-bottom: 1px solid #fff;
}

.wrap-button {
   position: fixed;
   bottom: 10%;
   right: 5%;
   z-index: 1000;
}

.button-cover {
   height: 100px;
   margin: 20px;
   background-color: #fff;
   box-shadow: 0 10px 20px -8px #c5d6d6;
   border-radius: 4px;
}

.button-cover:before {
   counter-increment: button-counter;
   content: counter(button-counter);
   position: absolute;
   right: 0;
   bottom: 0;
   color: #d7e3e3;
   font-size: 12px;
   line-height: 1;
   padding: 5px;
}

.button-cover,
.knobs,
.layer {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

.button {
   position: relative;
   top: 50%;
   width: 90px;
   height: 38px;
   margin: -20px auto 0 auto;
   overflow: hidden;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.checkbox {
   position: relative;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
   opacity: 0;
   cursor: pointer;
   z-index: 3;
}

.knobs {
   z-index: 2;
}

.layer {
   width: 100%;
   background-color: white;
   transition: 1s ease all;
   z-index: 1;
}

.button.r,
.button.r .layer {
   border-radius: 12px;
}

#button-3 .knobs:before {
   content: "ES";
   position: absolute;
   top: 4px;
   left: 7px;
   width: 30px;
   height: 30px;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   line-height: 1;
   padding: 9px 4px;
   background-color: black;
   color: white;
   border-radius: 30%;
   transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
   display: flex;
   align-items: center;
   justify-content: center;
}

#button-3 .checkbox:active+.knobs:before {
   width: 30px;
   border-radius: 2px;
}

#button-3 .checkbox:checked:active+.knobs:before {
   margin-left: -26px;
}

#button-3 .checkbox:checked+.knobs:before {
   content: "EN";
   left: 50px;
   background-color: black;
   color: white;
}

#button-3 .checkbox:checked~.layer {
   background-color: white;
}

/* Swiper marca */
.swiper-container-marca {
   /* width: 600px;
   height: 300px; */
   overflow: hidden;
}

.swiper-container-marca .swiper-wrapper {
   display: flex;
   align-items: center;
   gap: 10px;
}

.swiper-container-marca .swiper-slide {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 430px;
   padding: 20px;
}

.swiper-container-marca .swiper-slide img {
   max-width: 80%;
   max-height: 80%;
   width: 80%;
   height: 80%;
}

@media (max-width: 950px) {
   .swiper-container-marca .swiper-slide img {
      width: 50%;
      height: 50%;
   }

   .swiper-container-marca .swiper-slide {
      width: 100%;
   }
}

/* Swiper Proyectos */
.swiper-container-proyectos {
   overflow: hidden;
   position: relative;
   height: 600px;

}

.swiper-container-proyectos .swiper-wrapper {
   /* display: flex;
   align-items: center;
   justify-content: center; */
   /* gap: 10px; */
}


.swiper-container-proyectos .swiper-slide {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 475px;
}

.swiper-button-next,
.swiper-button-prev {
   position: absolute;
   top: 580px;
   transform: translateY(-50%);
   z-index: 1;
   color: black;
   border: 1px solid black;
   padding: 30px;
   border-radius: 10px;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
   transition: all 0.1s ease-in-out;
   border-color: white;
   background-color: white;
}

.swiper-button-next {
   right: 44%;
}

.swiper-button-prev {
   left: 44%;
}

@media (max-width: 990px) {
   .swiper-container-proyectos {
      height: 500px;
   }

   .swiper-container-proyectos .swiper-slide {
      display: block;
      width: 100%;
   }

   .swiper-button-next,
   .swiper-button-prev {
      top: 450px;
   }

   .swiper-button-next {
      right: 30%;
   }

   .swiper-button-prev {
      left: 30%;
   }
}




.button-custom {
   border-radius: .25rem;
   text-transform: uppercase;
   font-weight: 500;
   padding-left: 25px;
   padding-right: 25px;
   color: #fff;
   -webkit-clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 100%);
   clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 100%);
   height: 40px;
   font-size: 0.7rem;
   line-height: 14px;
   letter-spacing: 1.2px;
   background: black;
   transition: .2s .1s;
   box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
   border: 0 solid;
   overflow: hidden;
}

.card-back>.crd-back {
   background-color: #f2e9dc;
}

.button-custom:hover {
   cursor: pointer;
   transition: all .3s ease-in;
   padding-right: 30px;
   padding-left: 30px;
}

/* Solutions */
.row-solutions {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 60px;
   align-items: center;
   justify-content: center;
}

.flip3D {
   width: 100%;
   height: 300px;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
}

.col-solutions {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   background: initial;
   box-shadow: none;
   width: 250px;
   height: 300px;
   position: relative;
   border-radius: 7px;
   border: 1px solid #000;
   border-radius: 10px;
   padding: 10px;
   backface-visibility: hidden;
   transition: transform 0.5s linear 0s;
   position: absolute;
}

.card.back {
   background-color: green;
}

.flip3D>.front {
   transform: perspective(900px) rotateY(0deg);
}

.flip3D>.back {
   transform: perspective(900px) rotateY(180deg);
   z-index: 1;
}

.flip3D:hover>.front {
   transform: perspective(900px) rotateY(-180deg);
}

.flip3D:hover>.back {
   transform: perspective(900px) rotateY(0deg);
}


.col-solutions>img {
   width: 250px;
   position: absolute;
   top: -70px;
   left: 50%;
   transform: translateX(-50%);
}

.col-solutions>p {
   font-weight: 700;
   font-size: 20px;
   text-align: center;
   margin-top: auto;
}

@media (max-width: 1200px) {
   .row-solutions {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 768px) {
   .row-solutions {
      grid-template-columns: repeat(2, 1fr);
   }
}


@media (max-width: 480px) {
   .row-solutions {
      grid-template-columns: 1fr;
      display: flex;
      flex-direction: column;
   }

   .col-solutions {
      width: 70%;
   }
}

#calendly-iframe {
   border: 0;
   width: 100%;
   height: 630px;
}

@media (max-width: 480px) {

   .copy {
      font-size: 12px !important;
   }
}

#header1,
#header2,
#header3,
#header4 {
   position: absolute;
   top: 50px;
   left: 0;
   width: 100%;
   height: 100%;
   transition: opacity 1s ease;
}

.hidden {
   opacity: 0;
   visibility: hidden;
   z-index: 1;
}

.visible {
   opacity: 1;
   visibility: visible;
   z-index: 2;
}

.reconocimientos {
   width: 100%;
   height: 600px;
   background-color: #f2e9dc;
}

.animation-header .image-animation {
   width: 45%;
}

.animation-header .desc {
   width: 65%;
}

@media (max-width: 780px) {
   .animation-header .image-animation {
      width: 100%;
   }

   .animation-header .desc {
      width: 100%;
   }
}