/* ==========================================================
   MMTT Premium Loader
========================================================== */

html,
body{
    overflow-x:hidden;
}

body.mmtt-loading{
    overflow:hidden;
}

/* Full Screen */

#mmtt-loader{

    position:fixed;
    inset:0;

    background:#ffffff;

    z-index:99999999;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:opacity .8s ease,
               visibility .8s ease;

}

/* Hide */

#mmtt-loader.hide{

    opacity:0;
    visibility:hidden;
    pointer-events:none;

}

/* Center */

.mmtt-loader-content{

    width:100%;
    max-width:700px;

    text-align:center;

    padding:30px;

}

/* Arabic */

.mmtt-bismillah{

    font-size:34px;

    line-height:1.7;

    color:#0d6b4d;

    margin-bottom:45px;

    font-weight:500;

    opacity:0;

    animation:mmttFadeDown 1s forwards;

    letter-spacing:.5px;

}

/* Logo */

.mmtt-logo-wrapper{

    position:relative;

    width:240px;

    margin:auto;

}

/* Images */

.mmtt-logo{

    width:100%;

    display:block;

}

/* Black & White */

.mmtt-logo-gray{

    filter:grayscale(100%);

}

/* Color Layer */

.mmtt-logo-color{

    position:absolute;

    left:0;
    top:0;

    width:100%;

    clip-path:inset(100% 0 0 0);

    animation:mmttFill 1.6s ease forwards;

    animation-delay:.8s;

}

/* Shine */

.mmtt-shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    border-radius:8px;

    pointer-events:none;

}

.mmtt-shine::before{

    content:"";

    position:absolute;

    top:-20%;

    left:-120%;

    width:45%;

    height:140%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        rgba(255,255,255,.65),
        rgba(255,255,255,.10),
        transparent
    );

    transform:rotate(18deg);

    animation:mmttGlass 1.4s ease-in-out 2s forwards;

}

@keyframes mmttGlass{

    from{
        left:-120%;
    }

    to{
        left:140%;
    }

}



/* Company */

.mmtt-company{

    margin-top:35px;

    opacity:0;

    animation:mmttFadeUp 1s forwards;

    animation-delay:1.2s;

}

.mmtt-company h2{

    margin:0;

    font-size:32px;

    font-weight:700;

    color:#1d1d1d;

    letter-spacing:1px;

}

.mmtt-company p{

    margin-top:8px;

    font-size:18px;

    color:#777;

    letter-spacing:4px;

    text-transform:uppercase;

}

/* Loader Dots */

.mmtt-company::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:linear-gradient(
        90deg,
        #0d6b4d,
        #d4af37
    );

    margin:25px auto 0;

    border-radius:50px;

}

/* Fill Animation */

@keyframes mmttFill{

    from{

        clip-path:inset(100% 0 0 0);

    }

    to{

        clip-path:inset(0 0 0 0);

    }

}

/* Shine */

@keyframes mmttShine{

    from{

        left:-45%;

    }

    to{

        left:130%;

    }

}

/* Fade */

@keyframes mmttFadeDown{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes mmttFadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Mobile */

@media(max-width:768px){

    .mmtt-logo-wrapper{

        width:180px;

    }

    .mmtt-bismillah{

        font-size:26px;

        margin-bottom:35px;

    }

    .mmtt-company h2{

        font-size:24px;

    }

    .mmtt-company p{

        font-size:15px;

        letter-spacing:2px;

    }

}