@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'ArbFONTSKFGQPCUthmanicScriptHAFSRegular';
    src: url('../fonts/ArbFONTSKFGQPCUthmanicScriptHAFSRegular.eot');
    src: url('../fonts/ArbFONTSKFGQPCUthmanicScriptHAFSRegular.eot') format('embedded-opentype'),
         url('../fonts/ArbFONTSKFGQPCUthmanicScriptHAFSRegular.woff2') format('woff2'),
         url('../fonts/ArbFONTSKFGQPCUthmanicScriptHAFSRegular.woff') format('woff'),
         url('../fonts/ArbFONTSKFGQPCUthmanicScriptHAFSRegular.ttf') format('truetype'),
         url('../fonts/ArbFONTSKFGQPCUthmanicScriptHAFSRegular.svg#ArbFONTSKFGQPCUthmanicScriptHAFSRegular') format('svg');
}



body{
    direction: rtl;
    font-family: 'ArbFONTSKFGQPCUthmanicScriptHAFSRegular';
    overflow-x: hidden;
}
.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    background: #27072F;
    z-index: 9999;
}
.overlay img{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    margin-top: -100px;
}
.intro{
    background: url("../images/background.png") no-repeat center center;
    background-size: cover;
    min-height: 400px;
}
.inner-page{
    background: url("../images/background.png") no-repeat center center;
    background-size: cover;
}
.nav-link{
    color: #FEEEDB;
    font-size: 20px;
    font-weight: 100 !important;
}
.nav-link:hover,.nav-link:focus,.en-link:hover,.en-link:focus{
    color: #C0966B
}
.navbar{
    padding-top: 20px;
    padding-bottom: 20px;
}
.en-link{
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: #FEEEDB;
    text-decoration: none;
}
h1,.h1{
    font-size: 48px;
    color: #FEEEDB;
}
.intro-section{
    padding-top: 150px ;
    padding-bottom: 150px ;
}
.stores-links a img{
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;

}
.stores-links a img:hover{
    -webkit-transform:scale(1.1);
    transform: scale(1.1)
}
.about{
    background:#FFFAF5 url("../images/pattern.png") no-repeat top center;
    padding: 150px 0;
}
.text-gold{
color: #C49A6C !important
}
p{
    color: #130A29;
    font-size: 24px;
}
.play-icon{
    position: absolute;
    width: 160px;
    height: 160px;
    top: 50%;
    margin-top: -80px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;

}
.play-icon:hover{
    cursor: pointer;
    -webkit-transform:scale(1.1);
    transform: scale(1.1)
}


.pulse {
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 0 #FEEEDB;
            box-shadow: 0 0 0 0 #FEEEDB;
    background-size:cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: pulse 1.25s infinite cubic-bezier(.66, 0, 0, 1);
    animation: pulse 1.25s infinite cubic-bezier(.66, 0, 0, 1);
  }
  
  @-webkit-keyframes pulse {to {-webkit-box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);}}
  @keyframes pulse {to {-webkit-box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);}}



  .features{
    background:#FFFDFB url("../images/pattern.svg") no-repeat bottom center;
    padding: 150px 0;
}
.features-box{
    margin-top: 100px;
    padding: 0 80px;
}
.features-box h3{
    font-size: 40px;
}
.features-box svg{
    max-width: 120px;
}
footer{
    background: #290931;
    padding: 40px 0px;
}
footer p{
    color: #FEEEDB;
    font-size: 16px;
}
.socialLinks {
    margin: 0px;
    padding: 0px;
}
.socialLinks li{
list-style: none;
display: inline-block;
padding: 0 10px;
}
.socialLinks li:hover img{
box-shadow: red
}

                  
#eRPb6H24ter12_ts {animation: eRPb6H24ter12_ts__ts 1000ms linear infinite alternate forwards}
                        
@keyframes eRPb6H24ter12_ts__ts { 0% {transform: translate(74.954147px,22.6641px) scale(0,1)} 
100% {transform: translate(74.954147px,22.6641px) scale(1,1)}} 

#eRPb6H24ter13_ts {animation: eRPb6H24ter13_ts__ts 1000ms linear infinite alternate forwards}
@keyframes eRPb6H24ter13_ts__ts { 0% {transform: translate(76.269px,36.04675px) scale(0,1)} 
40% {transform: translate(76.269px,36.04675px) scale(0,1)} 
100% {transform: translate(76.269px,36.04675px) scale(1,1)}} 

#eRPb6H24ter14_ts {animation: eRPb6H24ter14_ts__ts 1000ms linear infinite alternate forwards}
@keyframes eRPb6H24ter14_ts__ts { 0% {transform: translate(76.269px,49.9344px) scale(0,1)} 70% {transform: translate(76.269px,49.9344px) scale(0,1)} 100% {transform: translate(76.269px,49.9344px) scale(1,1)}} 
#eRPb6H24ter16_ts {animation: eRPb6H24ter16_ts__ts 1000ms linear infinite alternate forwards}
@keyframes eRPb6H24ter16_ts__ts { 0% {transform: translate(43.7231px,22.6641px) scale(0,1)} 100% {transform: translate(43.7231px,22.6641px) scale(1,1)}}
 #eRPb6H24ter17_ts {animation: eRPb6H24ter17_ts__ts 1000ms linear infinite alternate forwards}
 @keyframes eRPb6H24ter17_ts__ts { 0% {transform: translate(43.7231px,36.0467px) scale(0,1)} 40% {transform: translate(43.7231px,36.0467px) scale(0,1)} 100% {transform: translate(43.7231px,36.0467px) scale(1,1)}} 
 #eRPb6H24ter18_ts {animation: eRPb6H24ter18_ts__ts 1000ms linear infinite alternate forwards}
 @keyframes eRPb6H24ter18_ts__ts { 0% {transform: translate(43.7231px,49.9344px) scale(0,1)} 70% {transform: translate(43.7231px,49.9344px) scale(0,1)} 100% {transform: translate(43.7231px,49.9344px) scale(1,1)}}


 #eIaZwubhrJP4_to
 {animation: eIaZwubhrJP4_to__to 1000ms linear infinite alternate forwards}
@keyframes eIaZwubhrJP4_to__to { 0% {transform: translate(60.162927px,15.673441px)} 100% {transform: translate(60.146351px,53.048439px)}}
 
 #eIaZwubhrJP4 {animation: eIaZwubhrJP4_c_o 1000ms linear infinite alternate forwards}
 @keyframes eIaZwubhrJP4_c_o { 0% {opacity: 0.6} 100% {opacity: 1}}

#man-read{
    animation: reading 900ms ease-in-out infinite alternate forwards;
    transform-origin: top  
}
@keyframes reading { 0% {transform: scale(1,0.9)} 100% {transform: scale(1,1)}}



#Page-1{
    animation: smallBig 900ms ease-in-out infinite alternate forwards;
    transform-origin: center;

}
@keyframes smallBig {
    from {
        transform:scale(0.9);
    }
    to {
        transform:scale(1);
    }
}



#left-lines{
    transition: 2s ease-in;
    animation: drawlines 1s ease infinite alternate;
    width: 0px;
    transform-origin: right;
}

  @keyframes drawlines {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(0.5);
    }
  }
  
  #star-icon{
    transition: 2s ease-in;
    animation: star 1s ease infinite alternate;
    width: 0px;
    transform-origin: center;
}

  @keyframes star {
    0% {
        transform: scaleX(0.7);
    }
    100% {
        transform: scaleX(1);
    }
  }

  #right-line-mic{
    animation: rightmove 900ms ease-in-out infinite normal forwards;
    transform-origin: center; 
  }
  #right-line-mic1{
    animation: rightmove 900ms 1s ease-in-out infinite normal forwards;
    transform-origin: center; 
  }

  @keyframes rightmove {
    0% {
        transform: translateX(0);
        opacity:1;
    }
    100% {
        transform: translateX(10px);
        opacity: 0;
    }
  }
  

  #left-line-mic{
    animation: leftmove 900ms ease-in-out infinite normal forwards;
    transform-origin: center; 
  }
  #left-line-mic1{
    animation: leftmove 900ms 1s ease-in-out infinite normal forwards;
    transform-origin: center; 
  }

  @keyframes leftmove {
    0% {
        transform: translateX(0);
        opacity:1;
    }
    100% {
        transform: translateX(-10px);
        opacity: 0;
    }
  }

@media screen and (max-width: 1200px) {
    .features-box{
        margin-top: 30px;
    }

    .features-box{
        padding: 0 40px;
    }
    .features-box h3{
        font-size: 24px;
    }
    .features-box img{
max-width: 60px;
    }
}

@media screen and (max-width: 768px) {
    .intro-section{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .about,.features{
        padding-top: 50px;
        padding-bottom: 50px; 
    }
    .mock-up{
        max-width: 300px;
        margin: 0 auto 30px;
    }
    h1,.h1{
        font-size: 28px;
    }
    p{
        font-size: 16px; 
    }
    .big-logo{
        margin-bottom: 10px;
        max-width: 160px;
    }
    .stores-links a{
        display: inline-block;
        max-width: 120px;
    }
    .nav-link{
        font-size: 13px;
        padding: 10px;
    }
    .en-link{
        font-size: 12px;  
    }
    .mb-4 {
        margin-bottom: 1rem!important;
    }
    .mb-5 {
        margin-bottom: 1.5rem!important;
    }

    .play-icon{
        width:80px;
        height: 80px;   
        margin-top: -40px;
    }
    .play-icon img{
        max-width: 100%;
    }


}

@media screen and (max-width:575px) {

    .lang-toggle{
        position: absolute;
        top: 10px;
        left: 10px;
    }
ul.nav{
    border-top: 1px solid #422748;
}
}