/*_________________LOADER________________________*/
.custom-loader {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: var(--light-c);
    z-index: 230;
    transition: all 0.4s;
    transition-delay:0.5s;
}
    .custom-loader .cl-con {
        position: absolute;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        top: 50%;
        right: 50%;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
        z-index: 10;
        text-align: center;
    }
        .custom-loader .cl-con .icon img {
            height: 120px;
        }

    .custom-loader .cl-bg {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
    .custom-loader .cl-bg.cl-bg-1 {
        background-color: var(--main-c);
        z-index: 2;
        transition: all 0.4s;
        transition-delay: 0.3s;
    }
    .custom-loader .cl-bg.cl-bg-2 {
            background-color:#fff;
        z-index: 3;
        transition: all 0.4s;
        transition-delay: 0.1s;
    }
    .custom-loader.out {
        transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);
    }

        .custom-loader.out .cl-bg.cl-bg-1 {
            transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);
        }

        .custom-loader.out .cl-bg.cl-bg-2 {
            transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);
        }

        .custom-loader.out .cl-con {
            opacity: 0;
        }

        @media(max-width:767px){
              .custom-loader .cl-con .icon img {
            height: 90px;
        }
        }