.bg-yellow {background-color:#F19A44;}
.bg-purple {background-color:#310F7B;}
.bg-green {background-color:#39836E;}
.bg-blue {background-color:#163AA3;}
.bg-brown {background-color:#731643;}

.competence-card-wrapper .cards-wrapper {max-width: 1172px;}
.competence-card-wrapper .cards-container {display: flex; justify-content: flex-end; gap: 16px;}
.competence-card-wrapper .cards-column {display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; position: relative;}
.competence-card-wrapper .cards-column-1:before {content: 'Tech Competences'; position: absolute; top: 63%; left: -153px;}

/* filters */
.competence-card-wrapper .cards-filters {margin-bottom: 100px;}
.competence-card-wrapper .cards-filter-buttons {display: flex; gap: 20px;}
.competence-card-wrapper .card-filter a {display:block; min-width:137px; text-align: center; padding: 10px; font-size: 16px; line-height: 22px; font-weight: 700; border: 1px solid #000; border-radius: 4px; text-decoration: none; color: #000000;}
.competence-card-wrapper .competence-card-wrapper .filter-yellow a {color: #F19A44; border-color: #F19A44;}
.competence-card-wrapper .filter-purple a {color:#310F7B; border-color: #310F7B;}
.competence-card-wrapper .filter-green a {color:#39836E; border-color:#39836E;}
.competence-card-wrapper .filter-blue a {color:#163AA3; border-color:#163AA3;}
.competence-card-wrapper .filter-brown a {color:#731643; border-color:#731643;}
.competence-card-wrapper .filter-yellow a:hover {color:#ffffff; background-color:#F19A44;}
.competence-card-wrapper .filter-purple a:hover {color:#ffffff; background-color:#310F7B;}
.competence-card-wrapper .filter-green a:hover {color:#ffffff; color:#ffffff; background-color:#39836E;}
.competence-card-wrapper .filter-blue a:hover {color:#ffffff; background-color:#163AA3;}
.competence-card-wrapper .filter-brown a:hover {color:#ffffff; background-color:#731643;}

/* Card */
.competence-card-wrapper .card {width:123px; height: 123px; background-color: #F1F1F1; position: relative;cursor: pointer;}
.competence-card-wrapper .card:hover {background-color: #BEBEBE;}
.competence-card-wrapper .card-upper {width: 100%; height: 11px; position: absolute; top: 0px; left: 0px; }
.competence-card-wrapper .card-lower {width: 100%; height: 11px; position: absolute; bottom: 0px; left: 0px;}
.competence-card-wrapper .card-cross {width: 50px; height: 50px; position: absolute; top: 0px; right: 0px; z-index: 10; overflow: hidden;}
.competence-card-wrapper .card-cross-text {width: 70px; height: 18px; transform: rotate(45deg); background-color: #F6C143;  text-align: center; padding-top:0;font-size: 12px; font-weight: 700; position: relative; top: 10px;display: flex;align-items: center;justify-content: center;}
.competence-card-wrapper .card-cross-link {overflow: visible;z-index: 15;}

.competence-card-wrapper .card-content {display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%;}
.competence-card-wrapper .card-title {text-align: center; font-size: 22px; font-weight: 700; line-height: 100%; padding-bottom: 10px;}
.competence-card-wrapper .card-text {text-align: center; font-size: 12px; line-height: 100%; max-width: 80%;}
.competence-card-wrapper .card-text-active {display: none;}
.competence-card-wrapper .card-content.active .card-text-active {display: flex; background-color: #3f3f3f; color: #ffffff; font-size: 11px; line-height: 100%; text-align: center; position: absolute; top: 11px; height: calc(100% - 22px);  width: 100%; z-index: 1; justify-content: center; align-items: center;}

/* tooltip */
.competence-card-wrapper .card a {display: block; width: 100%; height: 17px;text-decoration: none; color:#000;}
.competence-card-wrapper .card .card-cross-link a {width: 100%; height: 100%; position: relative; top: 11px; left: 20px;}
.competence-card-wrapper .card .tooltip {position: absolute; top: -15px; left: 50px; width: 278px; background-color: rgba(245, 245, 245, 0.54); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); z-index: 30; display: none; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; padding: 20px 30px 20px 40px; justify-content: center; align-items: center;opacity:1;font-size:14px;}
.competence-card-wrapper .card .tooltip:before {content: url(/~/media/Images/p/prosus-corp-v2/icons/icon-info); position: absolute; top: 20px; left: 19px;}
.competence-card-wrapper .sg_circles {display: flex; padding: 16px; text-align: center; margin: 0 auto; justify-content: space-between; width: 80%; height: 60%; position: relative;}
.competence-card-wrapper .card .tooltip .close {position: absolute; cursor: pointer; top: 14px; right: 14px; font-size: 12px; display: inline-block; width: 18px; height: 18px;}

/* areas and subareas */
.competence-card-wrapper .cards-areas {margin-top:18px; padding:16px 0; border-top:2px dashed #c0c0c0; border-bottom:2px dashed #c0c0c0;align-items:center;}
.competence-card-wrapper .areas { width: 262px; text-align: center; color: #fff; font-size: 16px; line-height: 28px; padding: 5px 0; text-transform: uppercase; background-color: #000000;}
.competence-card-wrapper .area3 {width: 401px;}
.competence-card-wrapper .cards-subareas {margin-top:32px;align-items:center;}
.cards-subareas:before {content: 'Competence areas';}
.competence-card-wrapper .subareas { width: 123px; text-align: center; color: #fff; font-size: 14px; line-height: 22px; padding: 5px 0;}
.competence-card-wrapper .subarea-1 {color:#000000;}
.competence-card-wrapper .subarea-3, .competence-card-wrapper .subarea-4 { width: 262px;}

/*Highlights*/
.competence-card-wrapper .card.highlighted {opacity: 1;}  /*to be change as per the figma */
.competence-card-wrapper .card.non-highlighted {opacity: 0.2;}

.competence-card-wrapper .filter-yellow a.active{background-color: #F19A44;color: #ffffff;}
.competence-card-wrapper .filter-purple a.active{background-color: #310F7B;color: #ffffff;}
.competence-card-wrapper .filter-green a.active{background-color: #39836E;color: #ffffff;}
.competence-card-wrapper .filter-blue a.active{background-color: #163AA3;color: #ffffff;}
.competence-card-wrapper .filter-brown a.active{background-color: #731643;color: #ffffff;}



.competence-card-wrapper .card-filter{position: relative;}
.competence-card-wrapper .cards-areas:before{content:'Business Objectives'}
.competence-card-heading h2{color: var(--cobalt-prime);} 

.competence-card-wrapper  .cards-container-wrapper1 .cards-subareas .card-filter-tooltip{position:absolute; top: -15px; left: 70px; width: 250px; background-color: rgba(245, 245, 245, 0.54); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); z-index: 30; display: none; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; padding: 20px; justify-content: center; align-items: center;transition: opacity 0.7s ease, visibility 0s 0.7s; opacity: 0;}
.competence-card-wrapper .cards-container-wrapper1 .cards-subareas .subareas:hover + .card-filter-tooltip{display: flex;opacity: 1;transition: opacity 0.7s ease, visibility 0s;}



.competence-card-wrapper .cards-container-wrapper1 .cards-subareas .card-filter-tooltip{position:absolute; top: -15px; left: 70px; width: 250px; background-color: rgba(245, 245, 245, 0.54); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); z-index: 30; display: none; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; padding: 20px; justify-content: center; align-items: center;transition: opacity 0.7s ease, visibility 0s 0.7s;}


@media(max-width:1025px){
.competence-card-wrapper .cards-column-1:before{
  right:0;
  left:unset;
  top:0;
}
.competence-card-wrapper-row{
  overflow-x: scroll;
  overflow-y: hidden;
}
.competence-card-wrapper .card-filter{
  position:unset;
}
.cards-filter-buttons{
  overflow:auto;
  padding-bottom:15px;
}
.competence-card-wrapper .cards-areas{
  justify-content:flex-start;
      padding: 27px 0;
}
.competence-card-wrapper .cards-container{
  display: inline-flex;
  margin-bottom:10px;
}
.competence-card-wrapper .cards-subareas:before{
  position: absolute;
  left: 6px;
  bottom: 54px;
}
.competence-card-wrapper .cards-subareas{
  margin-top: 50px;
}
.competence-card-wrapper .cards-areas:before{
  position: absolute;
  left: 6px;
  bottom: 79px;
}
}