.actualites-banner{
width:100%;
min-height:180px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
background:#02030c;
border-radius:20px;
box-shadow:0 0 30px cyan,0 0 80px purple;
}
.banner-space{
position:absolute;
inset:0;
background:radial-gradient(circle,#162cff,#02030c 70%);
}
.earth{
position:absolute;
right:15%;
top:50%;
transform:translateY(-50%);
font-size:90px;
animation:spin 20s linear infinite;
opacity:.7;
}
@keyframes spin{to{rotate:360deg}}
.orbit{
position:absolute;
width:60%;
height:80%;
left:20%;
top:10%;
border:2px solid cyan;
border-radius:50%;
animation:orb 15s linear infinite;
}
@keyframes orb{to{rotate:360deg}}
.news-A{
position:absolute;
left:25%;
top:50%;
transform:translate(-50%,-50%);
font:bold 150px Arial Black;
background:linear-gradient(45deg,cyan,blue,purple,pink,orange);
-webkit-background-clip:text;
color:transparent;
text-shadow:0 0 30px cyan;
}
.megaphone{
position:absolute;
left:8%;
top:45%;
font-size:55px;
filter:drop-shadow(0 0 15px cyan);
}
.news-card{
position:absolute;
right:10%;
top:20%;
padding:12px;
border:2px solid cyan;
background:#ffffff22;
color:white;
font:bold 20px Arial;
box-shadow:0 0 20px cyan;
}
.news-card span{color:#ff4040}
.media-icons{
position:absolute;
bottom:20px;
width:100%;
text-align:center;
color:white;
font-size:25px;
}
.banner-text{
position:relative;
z-index:5;
text-align:center;
font-family:Arial Black;
}
.youplugs,.actualites{
background:linear-gradient(90deg,cyan,purple,pink,lime);
-webkit-background-clip:text;
color:transparent;
text-shadow:0 0 20px cyan;
}
.youplugs{font-size:clamp(25px,4vw,55px)}
.actualites{font-size:clamp(35px,6vw,80px)}
@media(max-width:600px){
.actualites-banner{min-height:120px}
.news-A{font-size:80px}
.earth{font-size:45px}
.megaphone{font-size:30px}
.news-card{font-size:10px}
}