*{
     margin: 0;
     padding: 0;
     font-family: 'Montserrat', sans-serif;
}

/* Google Fonts Import Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;0,400;1,100..900;1,400&display=swap');

:root {
    --grey-mid: #212121;
    --grey-dark: #141414;
    --nav-bar-icons: #7a7676;
    --highlight-color: #0df5e3;
    --violet: #6e40ff;
    --max-width: 1200px;
  }
body{
     background-color: var(--grey-dark);
}
header{
     height: 100px;
     /* background-color: var(--grey-dark); */
     margin: 0 15%;
     color: white;
     display: flex;
     justify-content: space-between;
     align-items: center;
}


.logo{
     color: #0df5e3;
}

.menu a{
     color: white;
     text-decoration: none;
     font-size: 12.5px;
     font-weight: 600;
     transition: 0.4s;
     background-color: var(--grey-mid);
     border-radius: 50px;
     padding: 7px 30px;
}

.mostrar-menu,
.esconder-menu{
     font-size: 30px;
     cursor: pointer;
     display: none;
     transition: 0.4s;
}

.mostrar-menu{
     order: 1;
}

.menu a:hover,
.mostrar-menu:hover,
.esconder-menu:hover{
     background-color: var(--violet);
}

#check{
     display: none;
}

#intro{
     padding: 0 50px;
     /* background-color: red; */
     height: 45vh;
}

.contenido-intro{
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
}

.contenido-intro h3{
     font-size: 30px;
     font-weight: 800;
     padding: 10px 0px;
     
}
.btn-findOut{
     text-decoration: none;
     background-color: var(--violet);
     font-weight: 700;
     font-size: 18px;
     color: white;
     border-radius: 50px;
     padding: 9px 40px;
     border: none;
     outline: none;
     cursor: pointer;
     transition: 0.4s;
}
.btn-findOut:hover{
     background-color: var(--highlight-color);
     color: var(--grey-dark);
}

.btnFinOut{
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     /* background-color: yellow; */
     height: 150px;
     color: white;
     font-size: 25px;
}

.btn-findOutGreen{
     text-decoration: none;
     background-color: var(--highlight-color);
     font-weight: 800;
     font-size: 18px;
     color: var(--grey-dark);
     border-radius: 50px;
     padding: 10px 40px;
}
.btn-findOutGreen:hover{
     background-color: var(--violet);
     color: white;
}


#brands{
     background-color: var(--grey-mid);
}
.contenido-brands{
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: row;
     gap: 80px;
     justify-content: center;
     align-items: center;
}

#uses{
     background-color: var(--grey-dark);
     view-timeline-name: --image;
     view-timeline-axis: block;

     animation-timeline: --image;
     animation-name: show;

     animation-range: entry 25% cover 50%;
     animation-fill-mode: both;
}

@keyframes show {
     from {
          opacity: 0;
          scale: 80%;
     }
     to {
          opacity: 1;
          scale: 100%;
     }
}
.contenido-uses{
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: row;
     gap: 80px;
     padding: 40px 0px 40px 0px;
     justify-content: center;
     align-items: center;
}

#video{
     background-color: var(--grey-mid);
     height: auto;

     view-timeline-name: --video;
     view-timeline-axis: block;

     animation-timeline: --video;
     animation-name: showVideo;

     animation-range: entry 15% cover 80%;
     animation-fill-mode: both;
}

@keyframes showVideo {
from {
     opacity: 0;
     transform: translateY(200px);
}
to {
     opacity: 1;
     transform: translateY(0px);
}
}

.contenido-video{
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: row;
     gap: 40px;
     padding: 40px 0px 40px 0px;
     justify-content: center;
     align-items: center;
     transition: 0.4s;
}

.divCentrado{
     flex: 0 0 auto;
     height: auto;
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: center;
     /* background-color: red; */
     background-color: var(--grey-dark);
     width: 100%;
}
.divConAnchoMaximo{
     display: flex;
     flex-direction: column;
     max-width: var(--max-width);
     padding-top: 35px;
     padding-bottom: 35px;
}

.divConAnchoMaximo-footer{
     display: flex;
     flex-direction: row;
     width: var(--max-width);
     max-width: var(--max-width);
     padding-top: 15px;
     padding-bottom: 15px;
     justify-content: space-between;
}

.div-row-left{
     flex: 0 0 auto;
     display: flex;
     flex-direction: row;
     position: relative;
     justify-content: flex-start;
     align-items:  center;
 }

 .div-row-left span{
     color: white;
     padding-bottom: 45px;
 }

 .div-row-left h3{
     color: white;
     font-size: 40px;
     padding-bottom: 5px;
     padding-top: 10px;
}

.div-colum-left-contact{
     flex: 0 0 auto;
     display: flex;
     flex-direction: column;
     position: relative;
     align-items: flex-start;
     max-width: 450px;
     width: 450px;
     padding: 30px;
     color: white;
     font-size: 14px;
     background-color: var(--grey-dark);
     border-radius: 15px;
 }

.contenido-features-text{
     position: relative;
     display: flex;
     flex-direction: column;
     max-width: 450px;
     color: white;
     font-size: 15px;
     gap: 5px;
     padding-bottom: 20px;
     padding-left: 50px;
}

.contenido-features-text h3{
     color: var(--violet);
     font-size: 25px;
}

.contenido-features-text a{
     color: white;
     text-decoration: none;
 }

 .contenido-features-text a:hover{
     color: var(--highlight-color);
 }

#idBookDemo{
     background-color: var(--grey-mid);
}

input[type=text], input[type=password], textarea, input[type=email] {
     -webkit-appearance:none;
     -moz-appearance:none;
     -ms-appearance:none;
     appearance:none;
     outline:0;
     box-shadow:none;
     border:0!important;
     background-image: none;
     cursor:pointer;
 }
 input::-ms-expand {
     display: none;
 }
 .input {
     position: relative;
     display: flex;
     overflow: hidden;
     border-radius: 4px;
 }
 .input:hover{
     outline: solid 1px #333333;
 }
 .input:focus{
     outline: solid 1px #333333;
 }
 input:disabled {
     background-color: var(--grey-dark);
     opacity: 70%;
     cursor: none;
 }

 form{
     width: 100%;
 }
 .inputA {
     position: relative;
     display: flex;
     overflow: hidden;
     border-radius: 8px;
     width: 95%;
     padding: 8px;
     color: white;
     background: var(--grey-mid);
     margin-bottom: 15px;
 }

 .inputA:hover,  .inputB:hover{
     background: rgb(54, 54, 54);
 }
 .inputA:focus, .inputB:focus{
     background: rgb(54, 54, 54);
 }

 .inputB {
     position: relative;
     display: flex;
     overflow: hidden;
     border-radius: 8px;
     width: 95%;
     padding: 12px;
     color: white;
     background: var(--grey-mid);
     margin-bottom: 15px;
 }


 footer{
     background-color: var(--grey-dark);
     color: #6b6b6b;
     font-size: 12px;
     font-weight: 500;
 }

 footer a{
     color: #999999;
     font-size: 12px;
     text-decoration: none;
 }

 footer a:hover{
     color: var(--highlight-color);
 }

 .divContainer{
     /* background-color: yellow; */
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     margin: 0 15%;
     justify-content: space-between;
     align-items: center;
     padding-top: 10px;
     padding-bottom: 10px;
 }

 .contenido1{
     color: #6b6b6b;
     font-size: 12px;
     font-weight: 500;
     align-items: center;
 }

 .divContainerIntro{
     /* background-color: rgb(95, 149, 173); */
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     margin: 0 15%;
     justify-content: center;
     align-items: center;
     padding-top: 80px;
     padding-bottom: 22px;
 }

 .conteIntro1{
     /* background-color: red; */
     color: white;
     font-size: 12px;
     font-weight: 600;
     align-items: center;
     text-align: center;
     width: 70%;
     animation: anim-conteIntro1 2s ease;
 }
 .conteIntro1 h3{
     color: white;
     font-size: 72px;
     font-weight: 600;
     line-height: 87%;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding-bottom: 30px
 }
 .conteIntro1 span{
     font-size: 20px;
     font-weight: 400;
 }

 @keyframes anim-conteIntro1 {
     0% {
       /* Effect values */
       opacity: 0;
       transform: translateY(50px);
     }
   }

 .conteIntroImg1{
     /* background-color: yellow; */
     position: absolute;
     transform: translate(-420px, -60px);
     animation: img1 1s ease;
 }
 .conteIntroImg1 img{
     height: 500px;
     
 }

 @keyframes img1 {
     0% {
       /* Effect values */
       opacity: 0;
       transform: translate(-420px, -30px);
     }
   }

   

 .conteIntroImg2{
     /* background-color: yellow; */
     position: absolute;
     transform: translate(460px, 50px);
     animation: img2 1s ease;
 }
 .conteIntroImg2 img{
     height: 400px;
 }

 .imgUses img{
     height: 120px;
     padding: 15px;
     animation: anim-imagesUses 1s ease;
}

@keyframes anim-imagesUses {
     0% {
       /* Effect values */
       opacity: 0;
       transform: translateY(50px);
     }
   }


@keyframes img2 {
     0% {
       /* Effect values */
       opacity: 0;
       transform: translate(460px, 20px);
     }
   }

.svg{
     justify-content: center;
     text-align: center;
     align-items: center;
     height: 300px;
     cursor: pointer;
}

.generalContainer{
     display: flex;
     background-color: red;
     justify-content: center;
}

.notshow{
     display: none;
     font-size: 23px;
     font-weight: 600;
     color: var(--highlight-color);
     padding-bottom: 20px;
}

.imgBrand{
     height: 43px;
}

.overVideo{
     position: absolute;
     top: 0;
     width: 100%;
     height: 100vh;
}

#videoOverlay {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent background */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* On top of other content */
}

#videoOverlay video {
max-width: 90%; /* Limit video size to avoid overflow */
max-height: 90%;
width: 100%;
height: auto;
}

#closeButton {
     position: absolute;
     top: 20px;
     right: 20px;
     color: white;
     font-size: 24px;
     cursor: pointer;
     background-color: rgba(0, 0, 0, 0.5);
     padding: 5px 10px;
     border-radius: 5px;
}

/* RESPONSIVE */
@media(max-width: 768px){
     .mostrar-menu,
     .esconder-menu{
          display: block;
     }
     header{
          height: 60px;
          margin: 0 3%;
     }

     .menu{
          position: fixed;
          width: 100%;
          height: 100vh;
          background: var(--grey-mid);
          right: -100%;
          top: 0;
          text-align: center;
          padding: 100px 0px;
          z-index: 100;
          transition: 0.8s;
     }
     .menu a{
          display: block;
          padding: 10px;
     }
     .esconder-menu{
          position: absolute;
          top: 40px;
          right: 40px;
     }
     #check:checked ~ .menu{
          right: 0;
     }
     #uses{
          padding: 0 0px;
     }
     .conteIntro1 {
          width: 90%;
      }
     .conteIntro1 h3{
          font-size: 45px;
          padding-bottom: 25px
      }
      .conteIntro1 span{
          font-size: 16px;
      }
      .btn-findOut{
          font-weight: 700;
          font-size: 12px;
          padding: 9px 40px;
     }
     .btnFinOut{
          padding-top: 10px;
          height: 50px;
     }
     .contenido-uses{
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: row;
          gap: 10px;
          padding: 10px 0px 10px 0px;
          justify-content: center;
          align-items: center;
     }
     .contenido-uses img{
          height: 75px;
     }
     .imgUses img{
          height: 70px;
          display: none;
      }

      .imgBrand{
          height: 33px;
     }
     .conteIntroImg2{
          display: none;
     }
     .contenido-video img{
          height: 195px;
     }
     .divConAnchoMaximo{
          flex-direction: column;
          padding: 15px 45px 15px 45px;
     }
     .div-row-left{
          flex-direction: column;
          justify-content: center;
          padding-left: 0%;
     }
     .div-row-left img{
          display: none;
     }
     .contenido-features-text{
          padding: 10px;
     }
     .bookPic{
          display: none;
     }
     .div-colum-left-contact{
          width: 85%;
     }
     .svg{
          justify-content: center;
          text-align: center;
          align-items: center;
          height: 170px;
     }
     .divContainer{
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          margin: 0 3%;
          justify-content: space-around;
          align-items: center;
          padding-top: 10px;
          padding-bottom: 10px;
      }
      .notshow{
          display: block;
     }
     .div-row-left h3{
          padding-bottom: 0px;
     }
     .div-row-left span{
          padding-bottom: 15px;
      }
      .divContainerIntro{
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          margin: 0 0%;
          justify-content: center;
          align-items: center;
          padding-top: 10px;
          padding-bottom: 22px;
      }
}

/* overlay for video */
.divContainer2 {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     margin: 0 15%;
     justify-content: center; /* Centers the child elements horizontally */
     align-items: center;
     padding-top: 10px;
     padding-bottom: 10px;
 }

.imageWrapper {
     position: relative;
     display: flex; /* Makes it align properly */
     justify-content: center; /* Centers the image inside */
     align-items: center;
 }
 
 .imageWrapper img {
     display: block;
     width: 100%; /* Adjust size if needed */
     height: auto;
 }
 
 .hoverImage {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     pointer-events: none; /* Ensures clicks go through to the main image */
 }
 
 .imageWrapper:hover .hoverImage {
     opacity: 1;
 }