/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background-color: #f7f9fc;
  color: #333;
  line-height: 1.6;
}

/* Container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* Header */
.header {
  background: #0f766e;
  color: #fff;
  padding: 15px 0;
}

.logo {
  font-size: 24px;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

/* Hero */
.hero {
  background: #e6f4f1;
  padding: 50px 0;
  text-align: center;
}

.hero h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

/* Blog Grid - 4 Columns */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 40px auto;
}

/* Blog Card */
.blog-card {
  background: #ffffff;
  padding: 18px;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.blog-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #0f766e;
}


/* Limit to 3–4 lines */
.blog-excerpt {
  font-size: 14px;
  color: #444;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read More */
.read-more {
  font-size: 14px;
  font-weight: bold;
  color: #0f766e;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* Footer */
.footer {
  background: #0f766e;
  color: #fff;
  text-align: center;
  padding: 15px 0;
  margin-top: 40px;
}

/* Base Layout */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #f8f9fb;
  color: #222;
  margin: 0;
  line-height: 1.7;
}

/* Article Container */
.article-content {
  max-width: 800px;
  margin: 40px auto;
  background: #ffffff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* Headings */
.article-content h1 {
  font-size: 2.2rem;
  margin-bottom: 16px;
  line-height: 1.3;
}

.article-content h2 {
  font-size: 1.6rem;
  margin-top: 40px;
  margin-bottom: 12px;
}

.article-content h3 {
  font-size: 1.3rem;
  margin-top: 30px;
  margin-bottom: 10px;
}

/* Paragraphs */
.article-content p {
  margin-bottom: 18px;
  font-size: 1rem;
}

/* Lists */
.article-content ul,
.article-content ol {
  margin: 20px 0;
  padding-left: 20px;
}

.article-content li {
  margin-bottom: 8px;
}

/* Images */
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 24px 0;
}

/* Links */
.article-content a {
  color: #0b6efd;
  text-decoration: none;
  font-weight: 500;
}

.article-content a:hover {
  text-decoration: underline;
}

/* Blockquote */
.article-content blockquote {
  margin: 30px 0;
  padding: 20px;
  background: #f1f5ff;
  border-left: 4px solid #0b6efd;
  font-style: italic;
}

/* Author / Meta Info */
.article-meta {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 20px;
}

/* Divider */
.article-content hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 40px 0;
}

/* Callout Box (Tips / Warnings) */
.callout {
  padding: 20px;
  background: #fef9e7;
  border-left: 4px solid #f1c40f;
  margin: 30px 0;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .article-content {
    padding: 24px;
    margin: 20px;
  }

  .article-content h1 {
    font-size: 1.8rem;
  }
}