/*
-----------------------------------
Info Graph Card
-----------------------------------
By   Prasad D.

*/

#insurtech-solutions {
    margin-top: 20px;
    font-size: 17px;
}

.ig-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0rem;
    overflow: hidden;
}
.ig-container .ig {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 80%;
    width: 10rem;
    height: 10rem;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in-out;
    color: #fff;
    position: relative;
}
.ig-container .ig:after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    bottom: -12px;
    transform: rotate(45deg);
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.12);
}
.ig-container .ig:nth-child(1) {
    background-color: #0D5EC5;
    color: #0D5EC5;
}
.ig-container .ig:nth-child(1):after {
    border-right-color: #0D5EC5;
    border-bottom-color: #0D5EC5;
}

.ig-container .ig:nth-child(2) {
    background-color: #2E8BD0;
    color: #2E8BD0;
}
.ig-container .ig:nth-child(2):after {
    border-right-color: #2E8BD0;
    border-bottom-color: #2E8BD0;
}
.ig-container .ig:nth-child(3) {
    background-color: #00B0F0;
    color: #00B0F0;
}
.ig-container .ig:nth-child(3):after {
    border-right-color: #00B0F0;
    border-bottom-color: #00B0F0;
}
.ig-container .ig:nth-child(4) {
    background-color: #4CC8D2;
    color: #4CC8D2;
}
.ig-container .ig:nth-child(4):after {
    border-right-color: #4CC8D2;
    border-bottom-color: #4CC8D2;
}
.ig-container .ig:nth-child(5) {
    background-color: #52CA8A;
    color: #52CA8A;
}
.ig-container .ig:nth-child(5):after {
    border-right-color: #52CA8A;
    border-bottom-color: #52CA8A;
}
.ig-container .ig:nth-child(6) {
    background-color: #6BC24F;
    color: #6BC24F;
}
.ig-container .ig:nth-child(6):after {
    border-right-color: #6BC24F;
    border-bottom-color: #6BC24F;
}
.ig-container .ig:not(:first-child) {
    margin-left: -3.5rem;
}
.ig-container .ig:hover, .ig-container .ig:focus {
    transform: translateY(-1rem);
}
.ig-container .ig .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
    color: current-color;
    padding: 25px;
    font-size: 35px;
}

.ig-container .ig:hover ~ .ig, .ig-container .ig:focus ~ .ig {
    transform: translateX(4.5rem);
}

.tab-panel {
    margin-top: 20px;
    padding: 30px 20%;
    border-top: 1px solid #ccc;
}

.tab-content{
    display: none;
    margin:auto;
    padding: 15px 50px;
}

.tab-content.current{
    display: inherit;
}

@media (max-width: 567px) {
    #insurtech-solutions {
        margin-top: 0px;
   }
    .ig-container {
        display: block;
        padding-top: 1rem;
   }
    .ig-container .ig {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 8rem;
        height: 8rem;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
   }

   .ig-container .ig:after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    bottom: -12px;
    transform: rotate(45deg);
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.12);
}
    .ig-container .ig:not(:first-child) {
        margin-top: -4rem;
   }

    .ig-container .ig:hover, .ig-container .ig:focus {
        transform: translateX(0rem);
        z-index: 6;
   }

    .ig-container .ig:hover ~ .ig, .ig-container .ig:focus ~ .ig {
        transform: translateY(3rem);
   }

   .tab-panel {
        margin-top: 10px;
        padding: 5px 0px;
   }

   .tab-content{
    padding: 0px;
    margin: auto;
   }

}