body{

margin:0;
font-family:Segoe UI;
background:url("../Untitled.jpg") no-repeat center center/cover;

}

/* HERO IMAGE */

.hero img{

width:100%;
max-height:280px;
object-fit:cover;

}

/* TITLE */

.title{

text-align:center;
background:linear-gradient(45deg,#ff5733,#ff914d);
color:white;
padding:15px;
font-size:28px;
font-weight:bold;

}

/* GRID */

.features{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
padding:40px;

}

/* BOX */

.box{

background:white;
border-radius:15px;
text-align:center;
padding:20px;
box-shadow:0 5px 20px rgba(0,0,0,0.2);
transition:0.4s;

}

.box img{

width:100%;
height:150px;
object-fit:cover;
border-radius:10px;

}

.box h4{

margin-top:15px;
font-size:18px;

}

.box a{

text-decoration:none;
color:black;

}

/* HOVER */

.box:hover{

transform:translateY(-10px) scale(1.05);
box-shadow:0 15px 30px rgba(0,0,0,0.3);

}


.news-wrapper{
display:flex;
align-items:center;
width:90%;
margin:20px auto;
background:#fff;
border:2px solid #ff4d4d;
border-radius:8px;
overflow:hidden;
}

.news-title{
background:#ff4d4d;
color:white;
padding:12px 25px;
font-weight:bold;
font-size:18px;
}

.news-ticker{
overflow:hidden;
flex:1;
}

.news-track{
display:flex;
gap:80px;
padding:10px;
animation:scrollNews 30s linear infinite;
font-weight:600;
}

.news-track span{
white-space:nowrap;
}

.news-track a{
text-decoration:none;
color:#000;
}

.news-track a:hover{
color:#e60023;
}

/* Smooth ticker */

@keyframes scrollNews{

0%{transform:translateX(100%);}
100%{transform:translateX(-100%);}

}

/* Stylish NEW badge */

.new-badge{

font-size:11px;
font-weight:bold;
padding:3px 8px;
margin-right:6px;
border-radius:20px;
color:white;

background:linear-gradient(45deg,#ff0000,#ff7b00);

box-shadow:0 0 10px rgba(255,0,0,0.6);

animation:pulseNew 1.5s infinite;

}

/* pulse animation */

@keyframes pulseNew{

0%{
transform:scale(1);
box-shadow:0 0 5px red;
}

50%{
transform:scale(1.2);
box-shadow:0 0 15px red;
}

100%{
transform:scale(1);
box-shadow:0 0 5px red;
}

}

/* See All text link */

.see-all-link{

margin-right:15px;
font-weight:bold;
color:#007bff;
text-decoration:none;
transition:0.3s;

}

.see-all-link:hover{

color:#ff0000;
letter-spacing:1px;

}





/* FOOTER */

footer{

background:#111;
color:white;
text-align:center;
padding:20px;
margin-top:40px;

}

/* MOBILE */

@media(max-width:600px){

.features{

padding:20px;
gap:15px;

}

.title{

font-size:20px;

}

}