.coming-soon {

    color: #03abc8;

    font-weight: 600;

    font-style: italic;

}



.font-italic {

    font-style: italic;

}

/* flip card style  */

.strong-family-banner-div{

    height: 100%!important;

    padding: 0px 40px!important;

}

.strong-family-banner {

    padding: 0px 40px!important;

    height: 100%!important;

}

.flip-card {

    background-color: transparent;

    /* width: 26%; */

    width: 320px;

    height: 320px;

    perspective: 1000px;

    margin-left: auto;

    margin-right: auto;

}



.flip-card-inner {

    position: relative;

    width: 100%;

    height: 100%;

    text-align: center;

    transition: transform 0.6s;

    transform-style: preserve-3d;

    /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */

}



.flip-card:hover .flip-card-inner {

    transform: rotateY(180deg);

}



.flip-card-front {

    width: 300px;

    height: 300px;

}



.flip-card-front,

.flip-card-back {

    position: absolute;

    width: 100%;

    height: 100%;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}





.flip-card-back {

    background-color: #03abc8;

    color: white;

    transform: rotateY(180deg);

    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 320px;
    justify-content: center;

}



.flip-text-heading {

    font-size: 24px;

}



.flip-card-para {
    margin-bottom: 0px !important;
    font-size: 15px;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 8;

    /* number of lines to show */

    line-clamp: 8;

    /* height: 230px; */

}



.strong-family-banner {

    background-color: #cdebf3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
}



.strong-family-banner h1 {

    color: #03abc8;

    font-size: 30px;

    font-weight: 700;

}



.strong-family-banner p {

    font-size: 17px;

}





@media (max-width: 540px) and (min-width: 320px) {

    .strong-family-banner h1 {

        color: #03abc8;

        font-size: 20px;

        font-weight: 600;

    }

    .strong-family-banner-div{

        padding: 0px!important;

        height: 100%!important;

    }

    .strong-family-banner {
        padding: 25px 40px!important;
        height: 100%!important;

    }



    .flip-card {

        background-color: transparent;

        width: 100%;

        height: 320px;

        perspective: 1000px;

        margin-right: 0px;

        margin-left: 0px;

    }



    .flip-card-para {

        font-size: 15px;

        overflow: hidden;

        text-overflow: ellipsis;

        display: -webkit-box;

        -webkit-line-clamp: 8;

        /* number of lines to show */

        line-clamp: 8;

        height: 200px;

    }

}



@media (max-width: 1023px) and (min-width: 541px) {

    .flip-card {

        background-color: transparent;

        width: 100%;

        height: 300px;

        perspective: 1000px;

    }

    .strong-family-banner-div{

        padding: 0px!important;

        height: 100%!important;

    }

    .strong-family-banner {

        padding: 25px 40px!important;

        height: 100%!important;

    }



    .flip-card-para {

        font-size: 15px;

        overflow: hidden;

        text-overflow: ellipsis;

        display: -webkit-box;

        -webkit-line-clamp: 8;

        /* number of lines to show */

        line-clamp: 8;

        height: 200px;

    }
    .custom_card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

}



@media (max-width: 1280px) and (min-width: 1024px) {

    .flip-card {

        background-color: transparent;

        width: 100%;

        height: 320px;

        perspective: 1000px;

        margin-right: 20px;

        margin-left: 20px;

    }

    .strong-family-banner-div{

        padding: 0px!important;

        height: 100%!important;

    }

    .strong-family-banner {

        padding: 0px 60px!important;

        height: 100%!important;

    }

}