/*fonts*/

@font-face {
    font-family:helvetica ;
    src: url(../fonts/helvetica/Helvetica-Bold.ttf);
}

@font-face {
    font-family:Melvetica;
    src: url(../fonts/helvetica/);
}



.great-vibes-regular {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
  }
  



/*fonts*/

/*estilo importante*/
.container{
  opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.container.visible{
  opacity: 1;
    transform: translateY(0);
}
/*estilo importante*/



/*header */

.header{

    background: url(../img/FRONT/web1024.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center;
     padding: 60px;
     opacity: 1;
    
}

/* botton */
.item-head-c{
  filter: drop-shadow(0px 7px 1px #7a5a7a);
  transition: filter 0.3s ease;
}

.item-head-c:hover{
  filter: drop-shadow(0px 0px 0px #7a5a7a);
  

 

}

/* botton*/

@media  (max-width: 992px){

    .header{

      background: url(../img/FRONT/web768.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      
      padding: 10px;

    }

   

}


@media (max-width: 768px){
    .header{
        
      background: url(../img/FRONT/Pagina\ web\ \ devices\ -06.svg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      
      padding: 10px;
    }


    

  
}




@media (max-width: 390px){

  .header{

    background: url(../img/FRONT/Pagina\ web\ \ devices\ -09.svg);
    background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      
      padding: 10px;

  }




  .navbar-item-a{
 
    width:120px ;
  }

  .item-head-a{
    padding: 15px;

  }



}




@media (min-height: 812px) and (max-height:896px) {
  .responsivediv {
      height: 20vh;
      /* Más alto en pantallas pequeñas */
  }

    
}




@media (max-height: 768px) {
  .responsivediv {
      height: 40vh; /* Más alto en pantallas pequeñas */
  }
}

@media (min-height: 768px) and (max-height: 992px) {
  .responsivediv {
      height: 40vh; 
      /* Altura media en pantallas medianas */
  }
}

@media (min-height: 901px) {
  .responsivediv {
      height: 30vh; /* Más bajo en pantallas grandes */
  }
}



.item-a{
    width: 5.0625rem;
    height: 2.375rem;
}

.item-b{
    width: 5.0625rem;
    height: 2.375rem;
    
}



.item-head-a{
    font-family: helvetica;
    font-size: 6vw;
    color: #fff;
    bottom:-40px ;
    margin: 100px 0px 0px 0px;
    
}

.item-head-b{
    font-family:Great Vibes ;
    font-size: 10vw;
    color: #fff;
    
}



/*header*/

/*slider*/


.slider {
  position: relative;
  margin: auto;
  overflow: hidden;
 
  margin: 25px 0px 100px 0px;
 

}

.slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:  radial-gradient(circle, rgba(238,246,247,0) 48%, rgba(255,255,255,1) 84%); 
  z-index: 1; 
}

.slider .slide-track {
  
  display: flex;
  animation: scroll 30s linear infinite;
  -webkit-animation: scroll 30s linear infinite;
  width: calc(180px * 14);
  
}

.slider .slide {
  width: 100vh;
  
  

}

.slider .slide img {
  width: 100%;
  height: 75%;
 
  z-index: 0; 
  position: relative; 
}

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

 
    
}


@keyframes scroll {
  0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
  }
  100% {
      -webkit-transform: translateX(calc(-200px * 7));
      transform: translateX(calc(-200px * 7));
  }
}


/*slider*/

/* description */

.title-card-p{
  font-size: 2rem;
  font-family: helvetica;
  

}

.project-card {
   border: 1px solid #000;
    border-radius: 32px; 
    box-shadow: 0px 7px 0px 0px rgb(5, 5, 5);
     background-color: #fff;
      padding: 1.5rem; 
      margin-bottom: 1rem;
     
      

     } 

     
     .project-image {
       border-radius: 16px;
        width: 100%; 
        margin: 10px 0px 10px 0px;
      }
      
      .btn-project { 
        background-color: rgb(245, 95, 95); 
        color: #fff;
         border-radius: 50%; 
         width: 40px;
          height: 40px;
           display: flex;
           
            }

/* description*/





/* section one*/
.one{
  background-color: #f7f7f7ff;
  padding-top: 50px;
  border-radius: 2rem; 
  
}

.one>h2{
  font-family: helvetica; 
  font-size: 2.5rem;
  text-align: center;
  color: #000;
 
 
}



.brand-container {
  
  margin: 2rem 0;
 } 
.brand-card { 
  text-align: start;
   padding: 1rem; 
    border-radius: 0.5rem;
     margin-bottom: 1rem;
     font-family: helvetica; 
    
    } 

.brand-card img { max-width: 100%; 
  height: auto; 
  border-radius: 2rem; 
  padding-bottom: 20px;

}

/* section one */

/*section two*/

.visuallyhidden {
  position: absolute;
  z-index: -1;
  right: 0;
  opacity: 0;
  
}



.carrusel {
  overflow: hidden;
  padding: 20px;
  margin-top: 2em;
  background:;
  border-radius: 2rem;
}

.card-carousel {
  --card-width: 80%;
  --card-max-width: 280px;
  --card-height: 350px;
  --carousel-min-width: 600px;
  z-index: 1;
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: var(--card-height);
  min-width: var(--carousel-min-width);
  transition: filter .3s ease;
}

@media screen and (max-width: 640px) {
  .card-carousel {
    margin-left: calc((100vw - var(--carousel-min-width) - 30px) / 2)
  }
}

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

.card-carousel.smooth-return {
  transition: all .3s ease;
}

.card-carousel .card {
  background: whitesmoke;
  width: var(--card-width);
  max-width: var(--card-max-width);
  text-align: center;
  padding: 1em;
  min-width: 250px;
  height: var(--card-height);
  position: absolute;
  margin: 0 auto;
  color: rgba(0,0,0,.5);
  transition: inherit;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  border-radius: 1em;
  filter: brightness(.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card.highlight {
  filter: brightness(1)
}


.card:nth-of-type(1) .image-container {
    background-image: url("https://static.addtoany.com/images/dracaena-cinnabari.jpg");
}
 
.card:nth-of-type(2) .image-container {
  background-image: url("https://www.w3schools.com/w3css/img_lights.jpg")
}

.card:nth-of-type(3) .image-container {
  background-image: url("https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")
}
.card:nth-of-type(4) .image-container {
  background-image: url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")
}
.card:nth-of-type(5) .image-container {
  background-image: url("https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg")
}



.image-container {
  width: 90%;
  height: 100%;
  position: relative;
  background-size: cover;
  margin-bottom: 2em;
  border-radius: 10%;
  padding: 0.5em;
  -webkit-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.3);
box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.3);
  
}

.image-container::after {
  content: "";
  display: block;
  border: solid 3px rgba(0,0,0,.1);
  border-radius:10%;
  position: absolute;
  top: calc(-10% - 3px);
  left: calc(-10% - 3px);
}


/* section two */


/* question section*/



/*questyon section*/