/* General page styling */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

/* Navbar */
.navbar {
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.navbar-brand {
  font-weight: bold;
  font-size: 1.25rem;
}

/* Hero section */
header {
  background: linear-gradient(135deg, #0078d7, #005a9e);
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}
header h1 {
  font-size: 2rem;
  font-weight: 700;
}
header p {
  font-size: 1.1rem;
  margin-top: 10px;
}
header .btn {
  margin-top: 20px;
  font-size: 1rem;
  padding: 10px 20px;
}

/* About section */
main h2 {
  font-weight: 600;
  margin-bottom: 15px;
}
main p {
  font-size: 1rem;
  line-height: 1.5;
}

/* Role cards */
.card {
  border: none;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.card-title {
  font-weight: 600;
}
.card-text {
  font-size: 0.95rem;
  color: #555;
}
.card .btn {
  margin-top: 10px;
  width: 100%;
}

/* Footer */
footer {
  background-color: #222;
  color: #ccc;
  font-size: 0.9rem;
}
footer small {
  color: #aaa;
}
.logo-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;   /* makes it circular */
  object-fit: cover;    /* ensures it fills the circle */
  border: 2px solid #fff; /* optional white border */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* optional shadow */
}


/* Mobile adjustments */
@media (max-width: 576px) {
  .navbar .col-4 span,
  .navbar .col-4 div {
    font-size: 8px;   /* smaller font on mobile */
  }
  .navbar .fs-5 {
    font-size: 10px !important; /* devotional text slightly smaller */
  }
}

  header h1 {
    font-size: 1.5rem;
  }
  header p {
    font-size: 1rem;
  }