/* 1) Červená */
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(1) .bi {
    color:     var(--rainbow-red);
}
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(1) .card:hover,
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(1) .card:focus{
  background-color:     var(--rainbow-red);
  color: white;
}

/* 2) Oranžová */
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(2) .bi {
    color:     var(--rainbow-orange);
}

#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(2) .card:hover,
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(2) .card:focus{
  background-color:     var(--rainbow-orange);
}

#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(2) .card:hover i,
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(2) .card:hover p,
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(2) .card:hover a{
    color: var(--colorTextPrimary) !important;
}

/* 3) Žlutá – tmavší text kvůli kontrastu */
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(3) .bi {
    color:     var(--rainbow-yellow);
}
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(3) .card:hover,
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(3) .card:focus{
  background-color:     var(--rainbow-yellow);
  color: var(--colorTextPrimary);
}

#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(3) .card:hover i,
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(3) .card:hover p,
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(3) .card:hover a{
    color: var(--colorTextPrimary) !important;
}

/* 4) Zelená */
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(4) .bi {
    color:     var(--rainbow-green);
}
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(4) .card:hover,
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(4) .card:focus{
  background-color:     var(--rainbow-green);
  color: white;
}

/* 5) Modrá */
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(5) .bi {
    color:     var(--rainbow-blue);
}
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(5) .card:hover,
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(5) .card:focus{
  background-color:     var(--rainbow-blue);
  color: white;
}


/* 6) Fialová */
#menuWrapper .btn-group:nth-of-type(6) .btn{
  background-color: var(--rainbow-violet);
  border-color:     var(--rainbow-violet);
  
}

#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(6) .card:hover,
#contact-table .col-12.col-md-6.col-lg-3:nth-of-type(6) .card:focus{
  background-color:     var(--rainbow-violet);
  color: white;
}


#contact-table .col-12.col-md-6.col-lg-3 .card:hover svg path{ fill: white important;}
#contact-table .col-12.col-md-6.col-lg-3 .card:hover i,
#contact-table .col-12.col-md-6.col-lg-3 .card:hover p,
#contact-table .col-12.col-md-6.col-lg-3 .card:hover a {
  color: white !important;
}

#contact-table .col-12.col-md-6.col-lg-3 .card {
  transition: background-color 0.3s, color 0.3s;
}