* {margin:0; padding:0; box-sizing:border-box; font-family:Arial;}
body {background:#fff;}

/* Hero */
.hero {background:#0a2154; padding:50px 20px; color:#fff; text-align:center;}
h1, h2 {font-weight:700;}

/* First Section */
.Projects {
  display:flex; justify-content:center; gap:40px;
  background:#0a2154; color:#fff; padding:50px 20px; flex-wrap:wrap;
}
.Project {max-width:260px;}
.Project blockquote {font-size:0.9rem; margin-bottom:10px;}
.author {opacity:.8; font-size:0.85rem;}

/* Blog previews */
.blog-preview-section {padding:40px 20px;}
.blog-preview {
  display:flex; justify-content:center; align-items:center;
  margin-bottom:50px; gap:30px; flex-wrap:wrap;
}
.blog-preview .preview-img {
  width:250px; height:200px; border-radius:14px; background:#00b7c4; cursor:pointer;
}
.blog-preview .preview-summary {max-width:300px;}

/* Button */
.to-blogs-btn {
  margin:20px auto; display:block;
  padding:15px 30px; background:#00b7c4; border:none; border-radius:10px; color:#000; cursor:pointer;
  font-size:1.05rem;
}

/* Projects */
.projects {padding:70px 20px; text-align:center; background:white;}

/* Blogs listing */
.blogs-header {background:#4b00d9; padding:40px; text-align:center; color:white;}
.blogs-list {padding:40px; display:flex; flex-direction:column; gap:60px;}
.blog-row {
  display:flex; justify-content:center; align-items:center;
  gap:40px; flex-wrap:wrap;
  padding:40px 0;
}
.blog-row:nth-child(odd) {background:#4b00d9;}
.blog-row:nth-child(even) {background:#ffe563;}
.blog-img {
  width:260px; height:200px; border-radius:12px; background:#00b7c4; cursor:pointer;
}
.blog-summary {max-width:350px; color:#000; font-size:1rem;}

/* Article */
.article-container {max-width:800px; margin:50px auto; padding:20px;}
.article-image {width:100%; border-radius:14px; margin-bottom:25px;}
.article-body {margin-top:30px; font-size:1.05rem; line-height:1.5;}