/* News / Articles styling: card layout, image crop, brand CTAs */
:root{--brand-blue:#0014AC;--brand-yellow:#f7c61d}

.news-section{padding:60px 0;direction:rtl}
.news-section .sec-title h2{font-size:32px;color:var(rgb(255, 255, 255));margin-bottom:30px}

.news-block .inner-box{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,0.08);transition:transform .28s ease,box-shadow .28s ease;display:flex;flex-direction:column;height:100%;width:100%;position:relative}
.news-block .inner-box:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.12)}

.news-block .image{width:100%;height:200px;overflow:hidden;flex:0 0 auto}
.news-block .image img{width:100%;height:100%;object-fit:cover;display:block}

.news-block .lower-content{padding:18px;flex:1;display:flex;flex-direction:column;justify-content:space-between;overflow:visible}
.news-block .lower-content h4{font-size:20px;margin:0 0 8px;color:var(--brand-blue)}
.news-block .lower-content .text{color:#555;line-height:1.6;max-height:none;overflow:visible;margin-bottom:12px}

.news-block .inner-box .read-more{
    position: absolute;
    left: 176px;
    bottom: 6px;
    color: #ffffff;
    font-weight: 600;
    padding: 12px 24px;
    background-color: #042b96;
    border-radius: 15px 0px 0px 0px;
    border-right: 2px solid #f7c61d;
    transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    z-index:3;
}
.news-block .inner-box .read-more:hover{background:#003694}

@media (max-width:575px){
    .news-block{display:block}
    .news-block .inner-box{height:auto}
    .news-block .read-more{display:block;width:100%;text-align:center;position:static}
}

/* Responsive tweaks */
@media (max-width:991px){
    .news-block .image{height:200px}
}
@media (max-width:575px){
    .news-section{padding:36px 0}
    .news-block .image{height:180px}
    .news-section .sec-title h2{font-size:24px}
}


/* Motion replacements for news images */
.news-block .image.motion-image{position:relative;display:block;background:#07122a;overflow:hidden}
.news-block .image.motion-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,42,0.2) 0%,rgba(7,18,42,0.7) 100%);z-index:1}
.news-block .image.motion-image .motion-dots{position:absolute;inset:-40%;background-image:radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px);background-size:22px 22px;opacity:0.35;animation:newsDots 16s linear infinite;z-index:0}
.news-block .image.motion-image .motion-glow{position:absolute;width:240px;height:240px;border-radius:50%;top:-60px;right:-40px;background:radial-gradient(circle,rgba(247,198,29,0.45),transparent 65%);filter:blur(2px);animation:newsGlow 10s ease-in-out infinite;z-index:0}
.news-block .image.motion-image .motion-shape{position:absolute;width:180px;height:180px;left:-40px;bottom:-70px;border-radius:36% 64% 54% 46% / 42% 36% 64% 58%;background:radial-gradient(circle at 30% 30%,rgba(90,170,255,0.55),transparent 65%);opacity:0.85;filter:blur(1px);animation:newsBlob 14s ease-in-out infinite;z-index:0}

.news-block .image.motion-image.variant-1{background:radial-gradient(circle at 20% 20%,rgba(247,198,29,0.18),transparent 45%),radial-gradient(circle at 85% 0%,rgba(90,170,255,0.2),transparent 48%),linear-gradient(140deg,#07122a 0%,#0b1f3d 55%,#0d2a52 100%)}
.news-block .image.motion-image.variant-2{background:radial-gradient(circle at 12% 10%,rgba(90,170,255,0.22),transparent 48%),radial-gradient(circle at 85% 80%,rgba(247,198,29,0.2),transparent 50%),linear-gradient(140deg,#061127 0%,#10254a 55%,#12305c 100%)}
.news-block .image.motion-image.variant-3{background:radial-gradient(circle at 30% 15%,rgba(247,198,29,0.2),transparent 50%),radial-gradient(circle at 75% 75%,rgba(120,210,255,0.2),transparent 55%),linear-gradient(140deg,#07122a 0%,#0a2244 55%,#0c2a53 100%)}

@keyframes newsDots{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(40px,-30px,0)}}
@keyframes newsGlow{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-20px,20px,0) scale(1.08)}}
@keyframes newsBlob{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(30px,-20px,0) rotate(12deg)}}

@media (prefers-reduced-motion: reduce){
  .news-block .image.motion-image .motion-dots,
  .news-block .image.motion-image .motion-glow,
  .news-block .image.motion-image .motion-shape{animation:none}
}