@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Oswald:wght@200..700&display=swap');



.descriptionText{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.svgCheck{
    max-width: 32px;
    max-height: 32px;
}

.descriptionText p{
    margin: 0px;
    color: #212529;
    font-weight: 300;
}

.containerDescription{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
}


.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
  }
  
  .separator hr {
    flex-grow: 1; 
    border: 3px solid rgb(19, 167, 225);
    background-color: rgb(19, 167, 225);
    border-radius: 5px;
    opacity: inherit;
  }
  
  
  .separator img {
    margin: 0 10px; 
    max-height: 16px;
    max-width: 50px;
  }





  /* CARDS */


  :root {
    --main-color: #3f51b5;
  }
 
  .containerTajeta {
    width: 100%;
    height: 100vh;
    padding: 0 8%;
  }
  .containerTajeta h2 {
    text-align: center;
    padding-top: 6%;
    margin-bottom: 60px;
    font-size: 1.8rem;
    font-weight: 600;
    position: relative;
  }
  .containerTajeta h2::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background-color: var(--main-color);
    border-radius: 20px;
  }



  .rowTarjeta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    
  }
  .rowTarjeta .serviceTarjeta {
    padding: 25px 2px;
    background:rgb(19, 167, 225);
    font-size: 15px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: 0.5s;
    height: 175.9px;
  }

  .rowTarjeta .serviceTarjeta i {
    color: var(--main-color);
    margin-bottom: 20px;
    font-size: 40px;
    transition: 0.5s;
  }
  .rowTarjeta .serviceTarjeta:hover i {
    color: #fff;
  }
  .rowTarjeta .serviceTarjeta h2 {
    font-weight: 600;
    margin-bottom: 20px;
  }

  .rowTarjeta .serviceTarjeta h3{
    text-align: center;
    margin-top: 10px;
    color: white;
  }


  @media (max-width: 768px) {

    .rowTarjeta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }

    .itemGrid img{
      max-width: 64px !important;
      height: auto;
    }
  }


  #t1{
    /* background: rgb(21, 117, 188); */
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  #t2{
    /* background: rgb(18, 164, 221); */
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  #t3{
    background: rgb(56, 78, 161);
  }

  #t4{
    background: rgb(34, 43, 53);
  }

  #t5{
    background: rgb(239, 77, 91);
  }

  #t6{
    background: rgb(0, 175, 175);
  }

  #t7{
    background: rgb(237, 123, 32); 
  }

  #t8{
    background: rgb(76, 175, 80);
  }


  .itemGrid{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
  }


  .itemGrid img{
    max-width: 48px;
    height: auto;
  }


.itemGrid h3{
  font-size: 14px;
  color: rgb(19, 167, 225) !important;
  font-weight: 300;
}