*{
  box-sizing: border-box;
}
/*my classes*/
.end-flex{
     display: flex;

justify-content: flex-end;
align-items: center;
width: 100% !important;
}
.main-flex{
      display: flex;
padding: 24px 0px;
flex-direction: column;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 40px 40px 0 0;
}
.c-pointer{
    cursor: pointer;
}
.container{
    padding: 0;
}
 :root{
    --main-color:#FFE8D6;
    --fff-color:#fff;
    --mounten-color:#C35C57;
    --main-color-1:#80C7D9;
    --main-color-11:#2984B5;
    --main-color-2:#F5B078;
    --main-color-3:#5D5C64;
    --main-color-4:#FFF5ED;
}
ul{
    list-style: none;
}
p,h1,h2,h3,h4,h5,h6{
    margin: 0;
}
a{
    text-decoration: none;
}
.plr-22{
    padding:0 22px ;
}
.g-10{
    gap: 10px;
}
body{
    background-color: #F5F5F5;
    font-family: "Almarai", sans-serif;
}
.mainHome{
    padding-bottom: 16px;
    /* border-radius: 40px 40px 0 0; */
    background: var(--fff-color);
}
/* start nav*/
nav{
    padding: 22px 22px 0px 22px;
    width: 100%;
}
nav div{
height: 58px;
}
.ul-nav{
    flex-direction: row-reverse;
}
nav ul li i{
margin: 0 8px;
font-size: 21px;
}

/* إنشاء تأثير التمرير */
@keyframes marquee {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media(max-width:576px) {
    nav ul li a p,#mark{
        display: none;
    }

}
.end-flex{
    gap: 10px;
}
.end-flex .parent-svg{
    width: 30px;
height: 30px;
background-color: #2984B5;
}
/********* مختارات فيديو*******/
.interaction{
    padding-top: 24px;
    background-color: var(--fff-color);
}
.interaction .parent{
    padding: 24px 0;
    background-color: var(--fff-color);
    border-radius: 40px 40px 0 0;
    display: flex;
    flex-direction: column;
gap: 24px;
box-shadow: 0px -2px 50px 0px rgba(0, 0, 0, 0.12);
}

/************ cinema **********/
.cinema{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}
.cima >div{
    display: flex;
width: 32px;
height: 32px;
padding: 6px;
justify-content: center;
align-items: center;
border-radius: 50px;
background-color: #2984B5 ;
position: absolute;
bottom: 15px;
left: 8px;
color: white;
}
 .user a{
    display: flex;
    align-items: center;
}
 .user img{
    width: 22px;
height: 22px;
border-radius: 50%;
}
 .user h4{
color: var(--main-color-2);
text-align: right;
font-family: Almarai;
font-size: 12px;
font-style: normal;
font-weight: 700;
margin: 0 5px 0 0;
}
 .user span{
font-size: 12px;
font-weight: 700;
color: #5D5C64;
}
 .user h3{
color: var(--main-color-1);
font-size: 12px;
font-weight: 700;
margin: 0;
}
.cinema >h2{
    color: var(--black, #222);
text-align: right;
font-family: Almarai;
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 150%; /* 30px */
}
.cinema >p{
    color:  #5D5C64;
text-align: right;
font-size: 12px;
font-weight: 400;
line-height: 180%; /* 21.6px */
}
/*********** جديد الفيديو**********/
.newVid .parent{
    background-color: #2984B5 ;
    border-radius: 40px;
}
.newVid .parent .parent-svg{
    background-color: #F5B078;
}
.newVid .imge div{
display: flex;
width: 24px;
height: 24px;
padding: 4px;
justify-content: center;
align-items: center;
border-radius: 50px;
border: 2px solid #2984B5 ;
background-color: white;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.newVid .textImg h2{
    color: var(--white, #FFF);
text-align: right;
font-size: 14px;
font-weight: 700;
line-height: 150%; /* 21px */
}
.newVid .textImg p{
  color: var(--white, #FFF);
font-size: 12px;
font-weight: 400;
line-height: 150%;
}
/******** animated *************/
.animated-parent{
    gap: 16px;
}
.animated-content{
    flex: 1;
}
.animated-bg {
  background-image: linear-gradient(
    to right,
    #1A73A3  0%,
    rgb(27, 120, 170) 10%,
    #1A73A3  20%,
    #1A73A3  100%
  );
  background-size: 200% 100%;
  animation: bgPos 1s linear infinite;
}
@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

/******** loader************/
.loader {
    width: 24px;
    height: 24px;
    border: 3px solid #317FA7;
    border-bottom-color: #FFE8D6;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }