/* CSS file for module related styles */

.cards-wrap {
    margin-top: 45px;
}

/* Center last card row if it contains exactly 1 card */
#cards > div:last-child:nth-child(3n+1) {
    margin-left: auto;
    margin-right: auto;
}

.info-box {
    border: 1px solid #BFBDBB;
    padding: 20px;
    border-radius: 15px;
    height: calc(100% - 1.875rem);
    text-align: center;
    position: relative;
    min-height: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.875rem;
    align-content: flex-start;
    text-decoration: none;
}

.info-box:hover {
      background-color: rgb(255,255,255);
     box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.05);
}

.info-box .info-box-hover {
    position: absolute;
    right: 0;
    bottom: 0;
    /*top: 0;*/
    left: 0;
    width: 100%;
    height: 0;
    background: rgba(255,255,255,0.95);
    /*border: 2px solid #BFBDBB;*/
    border-radius: 15px;
    padding: 0 1.875rem;
    text-align: left;
    overflow: hidden;
    transition: height 1s, padding 1s, border 0.1s;
    /*margin-bottom: -70px;*/
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
}

.info-box img {
    width: 4.375rem;
    margin: 0 auto;
}

.info-box h3 {
    font-size: 1.5rem;
    margin-top: 0.625rem;
    width: 100%;
    /*margin-bottom: .;*/
}

.info-box p {
    font-size: 1.125rem;
    color: #5D5C5B;
    /*height: 150 px;*/
}

.info-box:hover .info-box-hover {
    height: 100%;
    padding: 1.875rem;
    /*border: 1px solid #d7d7d7;*/
    bottom: 0;
    /*margin: 0;*/
}

.info-box .info-box-hover a img {
    width: initial;
    filter: brightness(0) saturate(100%) invert(38%) sepia(95%) saturate(1610%) hue-rotate(188deg) brightness(92%) contrast(92%);
}

.services-wrapper {
    padding-top: 3.4rem;
    padding-bottom: 20px;
}

.services-wrapper a {
    text-decoration: none;
    color: #1581E2;
}

.img-arrow {
    height: 32px;
    width: 32px !important;
    filter: brightness(0) saturate(100%) invert(38%) sepia(95%) saturate(1610%) hue-rotate(188deg) brightness(92%) contrast(92%);
}