#heroSec{
    display:grid;
    grid-template-columns: 1fr max-content;
    width:1020px;
    max-width:100vw;
    padding:0px 20px;
    margin:0px auto;
    grid-column-gap: 10px;  
    position:relative;

}
#hsImg{
    position:relative;
    display:flex;
    aspect-ratio: 1 / 1;
    height: 300px; 
    overflow:hidden;
    border-radius:5px; 
}
.hsTitle{
    font-weight: bold;
    font-size:30px; 
    font-family:sans-serif;
}
#hsRight{
    display:flex;
    flex-direction: column;
    gap:10px; 
    justify-content: center;
}
#hsRight p{
    font-size:20px; 
    color:rgb(49, 49, 49);
}
#hsRight a{
    position:relative;
    display: flex;  
    font-size:20px; 
    width:max-content; 
    cursor:pointer; 
    background-color: #d8e2ee;
    
    color:#2582df; 
    padding:10px 20px;
    border-radius:5px; 
    align-items: center;

}
#hsRight a i{
    font-size:17px;  
    top:1px; 
    display:flex;
    position:relative;

}
.hsrSubTitle{
    font-size:18px;
    font-family:sans-serif;
    color:#2582df; 
}
.hsrTTime{
    font-family:sans-serif;
    color:rgb(49, 49, 49);
}
#contBlogsArts{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width:1000px;
    margin:auto; 
    grid-gap:20px; 

}
.cbaeImg{
    position:relative;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    overflow: hidden; 
    margin-bottom:20px; 
    display:flex; 

}
.cbaeImg img{
    position:absolute;
    height:100%;
    width:100%;
    object-fit: cover;
}
.cbaeTitle{
    font-size:22px; 
    font-weight: bold;  
}
.cbaElem{
    display:flex;
    flex-direction: column; 
}
.cbaElem p{

}
.cbaeRead{
    
    background-color: #d8e2ee;
    color: #2582df;
    padding: 10px 20px;
    width:max-content;
    margin-top:10px; 
    display:flex;
    flex-direction: row;
    gap:10px; 
}
.cbaeRead i{
    font-size: 17px;
    top: 1px;
    display: flex;
    position: relative;
}

.rbpLabel{
    font-size:22px; 
    width:100%;
    justify-content: center;
    display:flex;
    padding:30px 0px;
    font-weight: bold;
     
}
.phsinSearchElem{
    grid-template-columns: max-content 1fr;
    cursor:pointer;
    transition:all .3s ease-in-out;
    padding-bottom:10px; 
}
#phsinsSearchCont{
    gap:0px !important;
}
.phsinSearchElem i {
    display: flex;
    justify-content: center;
    font-size: 18px;
    align-items: normal;
    box-sizing: border-box;
    top: 6px;
    position: relative;
    padding-right:0px; 
    padding-top:0px; 
}

#hsBackImgAbs{
    position:absolute;
    height:120%;
    width: 120%; 
    object-fit: contain;
    right:0px; 
    
    object-position: right; 
}
#heroSec p{
    background-color: white;

}
#heroSec > *:not(img){
    z-index:3; 
}


#hsImg img{
    width:100%;
    height:100%;
    object-fit: cover;

}






#catgCardsSec{
    width:1020px;
    padding:0px 20px;
    max-width:100vw;
    margin:auto;
}
#catgCardsSec > section{
    margin:auto;
    /* width:1000px; */
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 20px;

}
.ccsElem{
    display:flex;
    height:max-content;
    flex-direction: column;
    position:relative;
}
.ccsElem label{
    font-weight: bold;
    font-size:23px;
    margin-bottom:10px;

}
.ccsElem p{
    font-size:20px; 
    color:rgb(49, 49, 49);
}
.ccsElem span{
    height:50px;
    display:flex;
    align-items: center; 
    margin-bottom:15px;
    opacity: .7;
} 





.elemTitleSec{
    display:flex;
    width:1000px;
    max-width:100vw;
    margin:0px auto;
    flex-direction: column;
    justify-content: center;
    padding-bottom:30px;
    padding-top:50px;

    justify-content:center;
    align-items: center;
}

.elemTitleSec *{
    text-align: center;
    background-color: #d8e2ee;
    width:max-content;
    
    padding: 10px 20px;
    border-radius: 5px;
}
.elemTitleSec label{
    font-size:18px;
    color:#2582df;

}
.elemTitleSec p{

    font-size: 18px;
    color: rgb(49, 49, 49);

}








#socMedSec{
    display:flex;
    flex-direction: row;
    /* width:100vw; */
    margin:0px auto; 
    justify-content: center;
    align-items: center;
    gap:10px;
}
#socMedSec span{
    scale:1.2;
}
.smsElem{
    height:50px;
    justify-content: center;
    align-items: center;
    display:flex;
    aspect-ratio: 1 / 1;
    color:white;


}











#vidSecCont{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px; 
    width:1020px;
    max-width:100vw;
    margin:auto;
    padding:20px 20px 0px 20px;     
    margin-top: 60px;
  }
  #vscLeft{
    display:flex;
    flex-direction: column;
    padding:20px 0px; 
    gap:10px; 
  }  
  #vscLeft label{
    font-size:35px; 
    font-weight: bold;
  }
  #vscLeft p{
    font-size:19px;
  }
  #vscLeft span{
    background-color: #2f599e;
    color:white;
    padding:10px 20px; 
    height:max-content;
    width:max-content;
    font-size:20px;
    margin-top:10px; 
  
  }
  #vscVidBtn{
    height:100%;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
    border-radius:3px;
    overflow: hidden; 
  }
  #vscVidBtn i{
    font-size:50px;
  
  }
  #vscVidBtn img{
    position:absolute;
    height:100%;
    width:100%;
    object-fit: cover;
  
  }











  #heroSec #hsImg img{
    opacity: 1; 
    transition:all .3s ease-in-out;
}
#heroSec[data-lazy="true"] #hsImg img{
    opacity: 0 !important;

}
#heroSec[data-lazy="true"] #hsImg,
#heroSec[data-lazy="true"] .hsTitle,
#heroSec[data-lazy="true"] #hsRight p,
#heroSec[data-lazy="true"] a,
#heroSec[data-lazy="true"] .hsrSubCont
{
    background: linear-gradient(90deg, #eeeeef 10%, #f5f5f5 50%, #eeeeef 100%) 0 0/200% 100%;
    animation: a 2s linear infinite; 
}
#heroSec[data-lazy="true"] .hsTitle{
    height:50px;
    display:flex;
    width:100%;
}
#heroSec[data-lazy="true"] a{
    display:flex;
    height:44px;
    width:196px; 
}
#heroSec[data-lazy="true"] a *{
    display:none; 
}
#heroSec[data-lazy="true"] #hsRight p{
    height:150px;
    display:flex;
}
#heroSec[data-lazy="true"] .hsrSubCont {

} 
#heroSec[data-lazy="true"] .hsrSubCont *{
    display:none;    

}

@keyframes a {
    from {background-position:0% 0%;} 
    to {background-position:-200% 0%;} 
}



body:has(#data-lang[data-lang="ar"]) .ccsElem span{
    transform: scaleX(-1);
}
body:has(#data-lang[data-lang="ar"]) .ccsElem{
    text-align: right;
}






#catgCardsSec section{
    transition: all .2s ease-in-out;
}
#catgCardsSec[data-lazyar="true"] section:nth-of-type(1),
#catgCardsSec:not([data-lazyar="true"]) section:nth-of-type(2)
{
    opacity: 0;
    position:absolute;
}

#catgCardsSec:not([data-lazyar="true"]) section:nth-of-type(1),
#catgCardsSec[data-lazyar="true"] section:nth-of-type(2)
{
    opacity: 1;
    position:relative;
}



#catgCardsSec[data-lazyar="true"] .ccsElem{
    display:none;
}
.ccsElemLazy{
    display:flex;
    flex-direction: column;
}
#catgCardsSec[data-lazyar="true"] .ccsElemLazy span{
    height:50px;
    width:50px;
    border-radius: 5px;

    aspect-ratio: 1 / 1;
    display:flex;
    position:relative;
    border-radius: 5px;
    background: linear-gradient(90deg, #eeeeef 10%, #f5f5f5 50%, #eeeeef 100%) 0 0/200% 100%;
    animation: a 2s linear infinite; 
    margin-bottom: 15px;
}
#catgCardsSec[data-lazyar="true"] .ccsElemLazy label{
    height:50px;

    aspect-ratio: 1 / 1;
    display:flex;
    position:relative;
    border-radius: 5px;
    background: linear-gradient(90deg, #eeeeef 10%, #f5f5f5 50%, #eeeeef 100%) 0 0/200% 100%;
    animation: a 2s linear infinite; 

}
#catgCardsSec[data-lazyar="true"] .ccsElemLazy div{
    margin-top:15px;

    height:150px;

    aspect-ratio: 1 / 1;
    display:flex;
    position:relative;
    border-radius: 5px;
    background: linear-gradient(90deg, #eeeeef 10%, #f5f5f5 50%, #eeeeef 100%) 0 0/200% 100%;
    animation: a 2s linear infinite; 
}


body:has( > #data-lang[data-lang="ar"]) #hsRight> *{
    text-align: right;
}
body:has( > #data-lang[data-lang="ar"]) #vscLeft> *{
    text-align: right;
}

@media (min-width:426px){
    body:has(#data-lang[data-lang="ar"]) #heroSec{
        direction:rtl;
    }
    body:has(#data-lang[data-lang="ar"]) #vidSecCont{
        direction:rtl;
    }
}

@media (max-width:425px){
    #heroSec{
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
    #hsImg{
        height:unset;
    }
    #vidSecCont{
        grid-template-columns: 1fr;
    }
    #vidSecCont > div:nth-of-type(2){
        height:250px;
    }
    #catgCardsSec > section{
        grid-template-columns: 1fr !important;
        grid-row-gap: 40px;
    }
    .hsTitle,#vscLeft label{
        font-size:26px !important;
    }

}