/* 
===Ramadan Theme===
*/
:root {
    --primary-color: rgba(25, 0, 42, 0.945);
}

/*
=== Define animations here ===
*/
@keyframes movement-rtl {
    0%   {
        transform: translate(0px,0);
        filter: grayscale(40%) drop-shadow(5px 5px 5px #222);
    }
    25%  {
        transform: translate(10px,0);
        filter: grayscale(60%) drop-shadow(5px 5px 5px #222);
    }
    50%  {
        transform: translate(8px,0);
        filter: grayscale(20%) drop-shadow(5px 5px 5px #222);
    }
    100% {
        transform: translate(0px,0);
        filter: grayscale(0%) drop-shadow(5px 5px 5px #222);
    }
}

@keyframes movement-ltr {
    0%   {
        transform: translate(0px,0);
        filter: grayscale(40%) drop-shadow(5px 5px 5px #222);;
    }
    25%  {
        transform: translate(-10px,0);
        filter: grayscale(60%) drop-shadow(5px 5px 5px #222);;
    }
    50%  {
        transform: translate(-8px,0);
        filter: grayscale(20%) drop-shadow(5px 5px 5px #222);;
    }
    100% {
        transform: translate(0px,0);
        filter: grayscale(0%) drop-shadow(5px 5px 5px #222);;
    }
}



/*
===Website navigation===
*/
.c-site-nav {
}
.c-site-nav::after {
    content:"";
    display: block;
    width: 110px;
    height: 160px;
    position: absolute;

}

html[data-language-dir='rtl'] .c-site-nav::after {
    top:0;
    background-image: url('theme-3/theme-001.png');
    background-size: 250px 250px;
    background-repeat: no-repeat;
    animation: movement-rtl 5s linear 2s infinite alternate;
    left: 0px;
}

html[data-language-dir='ltr'] .c-site-nav::after {

    background-image: url('theme-3/theme-001.png');
    background-size: 250px 250px;
    background-repeat: no-repeat;
    animation: movement-ltr 5s linear 2s infinite alternate;
    right: 0px;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {


    .c-site-nav::after {
        width: 100px;
        height: 300px;
    }

    .c-site-nav::after {
        background-image: url('theme-3/theme-001.png');
        background-size: 300px 300px;
        background-repeat: no-repeat;
        
        
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}