:root{
  --cyan:#35d0d6;
  --pink:#ff7bb6;
  --white:#ffffff;

  --bg:#f7feff;
  --text:#12303a;
  --muted:rgba(18,48,58,.78);

  --border:rgba(53,208,214,.30);
  --shadow:0 18px 45px rgba(18,48,58,.12);

  --radius:20px;
}

/* soft page glow without changing layout */
body{
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(53,208,214,.16), transparent 60%),
    radial-gradient(850px 420px at 88% 18%, rgba(255,123,182,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--white));
}

/* Top welcome area */
.text-center .display-4{
  color:#0c5c66;
  font-weight: 900;
  letter-spacing: .2px;
  text-shadow: 0 10px 24px rgba(53,208,214,.12);
}

/* The main container gets a gentle “bulletin card” feel */
.container.mt-4{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 18px;
}

/* Left column text */
.col-md-6.text-center h4{
  margin-top: 14px;
  color:#0c5c66;
  font-weight: 800;
}

.col-md-6.text-center p{
  color: var(--muted);
  line-height: 1.7;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}

/* The pastor image circle upgraded (same size, better look) */
.logo-circle{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--white);
  border: 3px solid rgba(255,123,182,.55);
  box-shadow:
    0 18px 40px rgba(18,48,58,.14),
    0 0 0 6px rgba(53,208,214,.12);
}

.logo-circle img{
  width: 150%;
  height: 150%;
  object-fit: cover;
  transform: translateZ(0);
}

/* Right column headings (same text, more “church banner” style) */
.col-md-6 h3{
  margin: 0;
  font-weight: 900;
  letter-spacing: .3px;
  color:#0c5c66;
}

.col-md-6 h3:nth-of-type(2){
  color: rgba(12,92,102,.92);
}

.col-md-6 h3:nth-of-type(3){
  background: linear-gradient(135deg, var(--cyan), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Scripture block (still your inline text-align:right, we just theme it) */
.col-md-6 p{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background:
    radial-gradient(600px 240px at 15% 10%, rgba(255,123,182,.10), transparent 60%),
    radial-gradient(600px 240px at 85% 0%, rgba(53,208,214,.10), transparent 60%),
    rgba(255,255,255,.90);
  border: 1px solid rgba(53,208,214,.22);
  box-shadow: 0 14px 30px rgba(18,48,58,.08);
  color: rgba(18,48,58,.80);
  line-height: 1.65;
}

/* Small polish for mobile */
@media (max-width: 768px){
  .container.mt-4{
    padding: 20px 14px;
  }
  .col-md-6 h3{
    text-align:center;
    margin-top: 6px;
  }
  .col-md-6 p{
    text-align: left; /* your inline right still wins, but this helps if you remove it later */
  }
}
