

.hamrah_red_btn{
    background-color: #C8353D !important;
}
/* page */
.right_side{
    background-image: url(./img/1.png), url(./img/2.png);
    background-position: left 100%, right 100%;
    background-repeat: no-repeat, no-repeat;
    animation: mymove 3s forwards infinite;
}

@keyframes mymove {
    0%{background-position: left 100%, right 100%}
    50%{background-position: left 97%, right 97%}
    100%{background-position: left 100%, right 100%}
}
/* modal */
.modal_body_bg{
    background-image: url(./img/1.png);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 150px;
}
/* gift image for 2.html */
.second_right_side{
    background-image: url(./img/3.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 120px;
    animation: mymove2 3s forwards infinite;
}

@keyframes mymove2 {
    0%{background-position: right bottom}
    50%{background-position: right 99%}
    100%{background-position: right bottom}
}
@media(max-width:1280px){
    .right_side{
        background-size: 200px;
    }
    .ordersTable table tr td{
        padding: 10px 20px;
    }
   
}
@media(max-width:1024px){
    .right_side{
        background-size: 120px;
    }
    .audioItem{
        margin-top: 0;
    }
    .newsletter_form{
        margin-top: 25px;
    }
  
    .second_right_side{
        background-image: none;
    }
    .logo{
        top: 10px;
    }
    .videoSec .post p{
        margin-bottom: 10px !important;
        line-height: 32px !important;
        padding-top: 20px;
    }
}

@media(max-width:991px){
    .right_side{
        background-size: 150px;
    }
    .second_right_side{
        background-size: 100px;
    }
    .newsletter_form{
        margin: 30px 0 99px 0;
    }
    .ordersTable{
        margin-bottom: 100px;
    }
    .logo-mobile{
        width: 50px;
    }
}


.error {
    padding: 5px;
    margin: 5px 5px 20px 5px;
    border: solid 1px #FBD3C6;
    border-radius: 10px;
    background: #FDE4E1;
    color: #CB4721;
    line-height: 25px;
    clear: both !important;
}

.success {
    padding: 5px 25px !important;
    border: solid 1px #C0F0B9 !important;
    border-radius: 10px;
    background: #D5FFC6 !important;
    color: #48A41C !important;
    clear: both;
    margin-bottom: 5px !important;
}

.alert {
    color: #CB4721 !important;
    direction: rtl !important;
    text-align: right !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
}

.newsletter_form .form-control {
    font-size: 18px;
}

.hamrah_red_btn:hover{
    background-color: #F48138 !important; 
}
.newsletter_form .form-control::placeholder{
    text-align: left !important;
    padding-left: 5px;
}
.ordersTable{
    transform: translateY(-10px);
    max-height: 540px;
   
}

#hamrah_svg{
    animation: pulsate 2s infinite ease-in-out;
}
.newsletter_form .form-control{
    text-align:left;
}
.ordersTable table tr td{
    border: 2px solid #bfbfbf;
}

@keyframes pulsate {
    0%{
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
    10%{
        opacity: 0;
        transform: translateX(-5px) scale(1.3);
    }
    20% , 100%{
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
}

.ordersTable table tr td{
    padding: 13px 20px;
}
.plyr__progress--played{
    color: #F48138;
}
.plyr--audio .plyr__controls button:hover{
    background: #F48138;
}
.audioItem .equlizer__image img{
    opacity: .6;
}

.plyr--audio .plyr__controls {
    color: #bfbfbf;
    background-color: #fff;
    padding: 8px;
    border-radius: 34px;
}


.box{
    height: 300px;
    border: 2px solid #ddd;
    margin: 10px;
    padding: 10px;
}