@flipcard-item-transition: all .4s ease-in-out;
@flipcard-item-rotate-Y-minus180deg: rotateY(-180deg);
@flipcard-item-rotate-Y-plus180deg: rotateY(180deg);
@flipcard-item-rotate-Y-0deg: rotateY(0deg);

.flipcard-component {
    .flipcard-item {
        position: relative;
        float: left;
        width: 50%;
        height: 320px;
        color: #000;

        -webkit-perspective: 600px;
        -moz-perspective: 600px;
        -ms-perspective: 600px;
        -o-perspective: 600px;
        perspective: 600px;

        html.size-medium &,
        html.size-small & {
            width: 100%;
        }

        .flipcard-item-face {
            position: absolute;
            z-index: 110;
            top: 0;
            left: 0;
            float: none;
            overflow: hidden;
            width: 98%;
            height: 98%;
            margin: 1%;
            cursor: pointer;
            border: 1px solid #000;
            background: #58009c;

            -webkit-transition: @flipcard-item-transition;
            -moz-transition: @flipcard-item-transition;
            -ms-transition: @flipcard-item-transition;
            -o-transition: @flipcard-item-transition;
            transition: @flipcard-item-transition;

            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;

            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            backface-visibility: hidden;

            &.flipcard-item-front {
                -webkit-transform: @flipcard-item-rotate-Y-0deg;
                -moz-transform: @flipcard-item-rotate-Y-0deg;
                -ms-transform: @flipcard-item-rotate-Y-0deg;
                -o-transform: @flipcard-item-rotate-Y-0deg;
                transform: @flipcard-item-rotate-Y-0deg;

                .flipcard-item-frontImage {
                    width: 100%;
                    height: auto;
                }
            }

            &.flipcard-item-back {
                padding: @item-padding;

                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;

                -webkit-transform: @flipcard-item-rotate-Y-minus180deg;
                -moz-transform: @flipcard-item-rotate-Y-minus180deg;
                -ms-transform: @flipcard-item-rotate-Y-minus180deg;
                -o-transform: @flipcard-item-rotate-Y-minus180deg;
                transform: @flipcard-item-rotate-Y-minus180deg;
            }
        }

        &.flipcard-flip {
            .flipcard-item-front {
                -webkit-transform: @flipcard-item-rotate-Y-plus180deg;
                -moz-transform: @flipcard-item-rotate-Y-plus180deg;
                -ms-transform: @flipcard-item-rotate-Y-plus180deg;
                -o-transform: @flipcard-item-rotate-Y-plus180deg;
                transform: @flipcard-item-rotate-Y-plus180deg;
            }

            .flipcard-item-back {
                overflow-x: hidden;
                overflow-y: auto;

                -webkit-transform: @flipcard-item-rotate-Y-0deg;
                -moz-transform: @flipcard-item-rotate-Y-0deg;
                -ms-transform: @flipcard-item-rotate-Y-0deg;
                -o-transform: @flipcard-item-rotate-Y-0deg;
                transform: @flipcard-item-rotate-Y-0deg;
            }
        }
    }
    
    
}

.mr_wrapper_container1{
//   padding: 0.5rem 1.5rem 0rem !important
}
.flipcardPageWrapper{
    width: 100%;
    height: 100%;
    .textHeading {
        width: 100%;
      
        border-radius: 8px 8px 0 0;
        // padding: 10px 34px;
        padding:0px 100px 0px 100px;
        font-size: 1.5rem;
        p{
            margin: 0;
            color: #9D3418;
            
        }
    }
    .flipcardcontentpart{
        width: 100%;
      
        height: auto;
        color: #000;       
        
        .flipcard__body-inner{
            margin-top: 0%;
        }
        .flipcard-widget{
            display: flex;
            // justify-content: space-between;
            justify-content: center;
            gap: 70px;
            align-items: center; 
            padding: 0 50px;
            flex-wrap: wrap;
            .flipcard-item{
                width: 30rem;
                height: auto;
                perspective: 1000px;
                min-height: 400px;
                cursor: pointer;              
                font-size: 1.2rem;
                max-width: 100%;
                display: flex;
                background-color: transparent;
                @media screen and (max-width: 896px) {
                 font-size: 1rem;
                }
            }
            .flipcard-item-inner{
                position: relative;
                height: 100%;
                text-align: center;
                transition: transform 0.6s;
                transform-style: preserve-3d;
                max-width: 100%;
                
            }
            .flipcard-item-front, .flipcard-item-back {
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-backface-visibility: hidden;
                padding: 10px 15px;
                backface-visibility: hidden;
                display: flex;
                background: #fff;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              
                .flipcard-item-back-title{
                    font-weight: bold; 
                    font-size: 1.4rem;
                }
              }
              .flipcard-item-inner.flipcard-flip{
                 transform: rotateY(180deg);
              }  
              .flipcard-item-back.incorrectFlip {
                background-color: #ff7140;
                color: #000;
                cursor: pointer;
               // transform: rotateY(-180deg);
              }
              .flipcard-item-back.correctFlip {
                background-color: #00bfbd;
                color: #000;
                cursor: pointer;
               // transform: rotateY(-180deg);
              }
        }
        .flipcard_face{
         
            color: #fff;
            width: 24rem;
            height: 38vh;
            text-align: center;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    } 
}
.flipcard-item-back{
    background-color: #F5B88F !important;
    padding: 10px 15px;
    color: #000 !important;
}

.bottomText{
    font-weight: 600;
    margin-top: 0px;
    height: auto;
    font-size: 1.2rem;
    margin-top: 10px;
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait){
        font-size: 1rem;
    }
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape){
        font-size: 1rem;
    }
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
        font-size: 1rem;
    }
}
.textHeading{
   // margin-left: 74px;
}
.component__header .flipcard__header{
    margin-left: 74px;
}
.flipcard__header-inner{
    // margin-left: 74px;
    // padding-left: 27px;
    padding: 0px 100px 0px 100px;
}
.mr_wrapper_container1{
    padding: 1rem 0 4rem;
}