:root{
--primary:#e74c3c;
--secondary:#ff7a18;
--bg:#f7f9fc;
--dark:#1f2937;
}

/* RESET */
body{
font-family:'Poppins',sans-serif;
margin:0;
background:var(--bg);
color:var(--dark);
}

/* NAVBAR */
.navbar{
position:sticky;
top:0;
background:white;
align-items:center;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
z-index:999;
}

.navbar .content {
  box-sizing: border-box;
  padding: 15px 40px;
  display: grid;
  grid-template-columns: auto 1fr;
}

.navbar .content .links {
  text-align: right;
}

.navbar .contact {
  grid-row: 1/span 1;
  grid-column: 1/span 2;
  text-align: center;
  background: black;
  box-sizing: border-box;
  padding: 4px 40px;
  color: white;
}

.navbar a{
text-decoration:none;
color:#333;
margin:0 15px;
font-weight:500;
}

.navbar .contact a {
  color: white;
  margin: 0px;
}

.navbar a:hover{
color:var(--primary);
}

.logo{
font-size:22px;
font-weight:600;
color:var(--primary);
}

/* HEADER */
#main-head{
position:relative;
text-align:center;
padding:100px 20px;
color:white;
}

#main-head::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url("images/Depositphotos_118524224_XL_social.jpg") center/cover no-repeat;
z-index:0;
}

#main-head::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,var(--primary),var(--secondary));
opacity:.85;
z-index:1;
}

#main-head *{
position:relative;
z-index:2;
}

/* GRID */
.posts-grid{
max-width:1100px;
margin:50px auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
padding:0 20px;
}

.post-card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
transition:.3s;
}

.post-card:hover{
transform:translateY(-10px);
}

.post-card img{
width:100%;
height:180px;
object-fit:cover;
}

.post-card h3{
margin:15px;
font-size:18px;
color:#222;
}

.post-card p{
margin:0 15px 15px;
font-size:14px;
color:#555;
}

.post-card a{
text-decoration:none;
color:inherit;
}

/* FOOTER */
.main-footer{
position:relative;
padding:60px;
text-align:center;
color:white;
}

.main-footer::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url("images/Depositphotos_103470788_XL_social.jpg") center/cover no-repeat;
z-index:0;
}

.main-footer::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,var(--primary),var(--secondary));
opacity:.85;
z-index:1;
}

.main-footer *{
position:relative;
z-index:2;
}

/* MOBILE */
@media(max-width:900px){
.posts-grid{grid-template-columns:1fr;}
}
.article-image{
width:100%;
border-radius:10px;
margin-bottom:20px;
}

.article-main h1{
font-size:32px;
margin-bottom:15px;
}

.article-main h2{
margin-top:25px;
color:#333;
}

.article-main p{
color:#555;
line-height:1.7;
}

.article-main ul{
padding-left:20px;
color:#555;
}

.article-container{
display:grid;
grid-template-columns:3fr 1fr;
gap:40px;
max-width:1100px;
margin:60px auto;
padding:0 20px;
}

.article-main{
background:white;
padding:40px;
border-radius:12px;
box-shadow:0 15px 30px rgba(0,0,0,0.08);
}

.article-sidebar{
display:flex;
flex-direction:column;
gap:20px;
}

.sidebar-box{
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 15px 30px rgba(0,0,0,0.08);
transition:.3s;
}

.sidebar-box:hover{
transform:translateY(-5px);
}
body {
opacity: 0;
transform: translateY(20px);
animation: pageFade 0.6s ease forwards;
}

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