*{
  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;
}
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;
    }

}


/*الاكثر تفاعلا*/
.interaction{
    padding-top: 24px;
    background-color: var(--fff-color);
}
.interaction >div{
    padding: 24px 22px;
    background-color: var(--fff-color);
    border-radius: 40px 40px 0 0;

box-shadow: 0px -2px 50px 0px rgba(0, 0, 0, 0.12);
}
.interaction div .upCategore {
gap: 10px;
margin-bottom: 24px;
}
.interaction div .upCategore img{
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0;
}
h1{
font-size: 16px;
font-weight: 700;
}
.interaction div .upCategore p{
    color: var(--gray-blue, #5D5C64);
text-align: center;
font-size: 12px;

font-weight: 400;
line-height: 130%; /* 15.6px */
}
.interaction >div .parent-svg{
    background-color:var(--main-color-3);
}
.interaction >div .main-img{
width: 315px;
/*height: 194px;*/
border-radius: 16px;
margin-bottom: 16px;
margin-left: auto;
}
@media (max-width: 768px){
    .main-img{
        width: 100% !important;
    }
}
.interaction >div a >h2{
font-size: 16px;
font-weight: 700;
margin: 0;
}
.interaction >div a >p{
    margin: 8px 0 32px;
    color: var(--gray-blue, #5D5C64);
font-size: 12px;
font-weight: 400;

}

@media (min-width: 768px){
    .interaction >div img{
        margin-left: auto;
    }
}
.under-content{
    gap: 24px;
}
.under-content >div {
    gap: 16px;
}

.under-content >div .imge{
    width: 112px;
height: 80px;
border-radius: 16px;
}
.under-content a{
    color: black;
}
.under-content h2{

font-size: 14px;
font-weight: 700;
line-height: 150%; /* 21px */
}
.under-content p{
    color: var(--gray-blue, #5D5C64);
font-size: 12px;
font-weight: 400;

line-height: 150%;
}
.under-content >div .imge >div{
    background-color: var(--main-color-11);
    display: flex;
width: 24px;
height: 24px;
padding: 4px;
border-radius: 50%;
justify-content: center;
align-items: center;
z-index: 2;
bottom: 6px;
left: 6px;
}
.under-content >div .imge .vid{
background-color: var(--mounten-color);
}
.under-content .textImg p{
    margin-bottom: 0;
}


/******** animated *************/
.animated-parent{
    gap: 16px;
}
.animated-content{
    flex: 1;
}
.animated-bg {
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 10%,
    #f6f7f8 20%,
    #f6f7f8 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 #e7e7e7;
    border-bottom-color: #5D5C64;
    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);
    }
    }