/* Contact Section */
.contact-section {
  background: var(--bg);
  padding: 60px 20px;
  text-align: center;
}

/* Header */
.contact-header {
  margin-bottom: 40px;
}

.contact-header h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
}

.contact-header p {
  color: var(--muted);
}

/* GRID (Centered Properly) */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 250px));
  justify-content: center; /* 🔴 key fix */
  gap: 25px;
}

/* CARD */
.contact-card {
  background: var(--bg);
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid var(--border);
  transition: 0.3s ease;
  width: 100%;
  max-width: 250px;
}

/* Hover */
.contact-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
}

/* ICON */
.contact-card i {
  font-size: 24px;
  color: var(--primary);
  margin-bottom: 12px;
}

/* TEXT */
.contact-card h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--text);
}

.contact-card p,
.contact-card address {
  font-size: 14px;
  color: var(--muted);
  font-style: normal;
  line-height: 1.5;
}

/*Blogs Page*/
/* Section */
.blog-section {
  padding: 60px 20px;
  background: var(--bg);
}

/* Container (controls page width) */
.blog-section {
  display: flex;
  justify-content: center;
}

/* Blog Post Wrapper */
.blog-post {
  max-width: 1600px; 
  width: 100%;
  margin: 0 auto;
}

/* Headings */
.blog-post h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text);
}

.blog-post h3 {
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 10px;
  color: var(--text);
}

/* Paragraphs */
.blog-post p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 16px;
}

/* List */
.blog-post ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.blog-post li {
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--muted);
}

/* Optional: better spacing on small screens */
@media (max-width: 768px) {
  .blog-post {
    max-width: 100%;
  }

  .blog-post h1 {
    font-size: 26px;
  }
}