.main-box{
    width:500px;
    display:flex;
    flex-direction:column; /* 👈 هذا هو العمودي */
    gap:20px;
}

.concat_card{
    width:800px;
    height:80vh;
    
    border-radius:25px;
    overflow:hidden;
    position:absolute;
    top:50%;
    left:45%;
    transform:translate(-50%,-50%);

}


.card{
   width:800px;
    background:white;
    padding:25px;
    border-radius:20px;
   
    box-shadow:0 10px 25px rgba(0,0,0,0.12);

    transition:0.5s;

    position:relative;
    overflow:hidden;

     /* 👇 بداية الحركة */
    opacity:0;
    transform:translateY(80px);

    /* تشغيل الأنيميشن */
    animation:slideUp 1s ease forwards;
}

/* تأخير بسيط لكل كرت */
.card:nth-child(1){
    animation-delay:0.2s;
}

.card:nth-child(2){
    animation-delay:0.5s;
}

.card:nth-child(3){
    animation-delay:0.8s;
}

.card:nth-child(4){
    animation-delay:0.8s;
}


.news_card{
    width:800px;
    height:auto;
    border-radius:25px;
    margin:100px 40% 300px auto;
   
    

}

.news-box{
 
    display:flex;
    flex-direction:column; /* 👈 هذا هو العمودي */
    gap:20px;
    padding-bottom:20px;
   
}

.news_card .card{
    width:800px;
    height:auto;
    display:flex;
    flex-direction:row-reverse;
    align-items:center; /* توسيط عمودي */
    border-radius:25px;
    margin:10px auto;
    
    
}

.news_card .icon{
    width:180px;
    height:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:10px;
}

.news_card .icon img{
    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;
}

.news_card .card-content{
    flex: 1;
    padding: 20px;
}

.news_card .card-content h3{
    margin-top: 0;
    margin-bottom: 10px;
}

.news_card .card-content p{
    margin: 0;
    line-height: 1.8;
    text-align: justify;
}





.socl_card{
    width:1200px;
    min-height:1200px;
    height:auto;
    align-items:center;
    justify-content:center; /* اختياري */

    border-radius:25px;
    overflow:visible;
    position:absolute;
    top:50px;
    left:20%;
    transform:translate(-50%,-50%);

 /* تأثير الظهور */
    opacity:0;
    transform:translateY(40px);
    animation:showForm 0.8s ease-out forwards;
}
@keyframes showForm{
    from{
        opacity:0;
        transform:translateY(30px) scale(0.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.date-box{
     width:90%;
    position:relative;
    display:inline-block;
}

.date-box input{
    padding-right:35px;
}

.date-box .icon{
    position:absolute;
    right:550px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
}

.card-s{
   width:1000px;
    background:white;
    padding:25px;
    border-radius:20px;
   
    box-shadow:0 10px 25px rgba(0,0,0,0.12);

    transition:0.5s;

    position:relative;
    overflow:hidden;

     /* 👇 بداية الحركة */
    opacity:0;
    transform:translateY(80px);

    /* تشغيل الأنيميشن */
    animation:slideUp 1s ease forwards;
}

/* تأخير بسيط لكل كرت */
.card-s:nth-child(1){
    animation-delay:0.2s;
}

.card-s:nth-child(2){
    animation-delay:0.5s;
}

.card-s:nth-child(3){
    animation-delay:0.8s;
}

.card-s:nth-child(4){
    animation-delay:0.8s;
}



/* الحركة */
@keyframes slideUp{

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,0.18);
}

/* 👇 هذا أهم جزء */
.title-row{
    display:flex;
   
    align-items:flex-start;
    gap:10px;
    margin-bottom:10px;
}
.title-row h3{
    transform:translateY(-15px);
}

/* الأيقونة */
.icon{
    width:50px;
    height:50px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:26px;

    background:#e0f2fe;
    border-radius:12px;

    margin-bottom:15px;
}

/* العنوان */
.card h3{
    font-size:20px;
    margin-bottom:10px;
    color:#0f172a;
}

/* النص */
.card p{
    font-size:16px;
    color:#555;
    line-height:2;
    padding-right:120px;
}

/* لمسة ضوئية */
.card::before{
    content:'';
    position:absolute;
    width:120px;
    height:120px;
    background:#38bdf8;
    opacity:0.07;
    border-radius:50%;
    top:-40px;
    left:-40px;
}