/* more distinction between navigation and rest of page */
.header {
  border-bottom: 2px solid #f6f7ff;
}

/* larger menu items */
.main-menu > ul > li {
    font-size: 1.2rem;
}

/* wider menu bar */
@media (min-width: 1300px) {
    .header .container-xl, .header .container-lg, .header .container-md, .header .container-sm, .header .container {
        max-width: 1400px;
    }

/* ─── Wider spacing between top-nav menu items (desktop) ─── */
@media (min-width: 992px) {

  /* <ul> inside <div class="main-menu"> is already display:flex */
  .main-menu ul {
    gap: 2rem;           /* 2 rem ≈ 32 px  – tweak as you like */
  }

  /* Fallback for browsers that don’t support flex-gap */
  .main-menu ul li + li {
    margin-left: 2rem;   /* keep this equal to the gap value */
  }
}

/* Change hover to solid color background */
.main-menu > ul > li.active > a {
  background-color: #CBE28E;
}

/* ─── HOMEPAGE HERO / INTRO ───────────────────────── */
.page-home .intro {
  /* background */
  background: url("/images/bg-abstract.svg") center / cover no-repeat;
  padding: 50px 0;            /* top & bottom space */

}

/* centre the headline text block */
.page-home .intro .col-md-7 {
  display: flex;
  align-items: center;        /* vertical */
  justify-content: center;    /* horizontal */
  text-align: center;
}

/* centre the bubble SVG column */
.page-home .intro .col-md-5,
.page-home .intro .col-lg-6 {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* keep the bubble graphic responsive */
.page-home .intro .intro-image {
  max-width: 580px;           /* tweak as needed */
  height: auto;
  margin-top: 0;
}

/* Change formatting of Text in .intro homepage */

.page-home .intro h1 {
  font-size: 36px;
  display: inline-block;              /* shrink-wrap to the text   */
  background: rgba(0, 0, 0, 0.55);    /* 55 % opaque black         */
  color: #fff;
  padding: 0.75rem 1.25rem;           /* top/bottom 12 px, left/right 20 px */
  border-radius: 0.5rem;              /* rounded corners           */
  line-height: 1.25;                  /* tighter lines if multiline */
}

/* ─── Bigger feature cards on the home-page only ─── */
.page-home .feature {
  padding: 28px;          /* more breathing-room */
}
.page-home .feature-image {
  width: 80px;           /* ↑ from 80px */
  height: 80px;
  margin-bottom: 24px;
}
/* optional: bigger text */
.page-home .feature-title   { font-size: 1.25rem; }
.page-home .feature-content { font-size: 1.05rem; }

/* spacing on the Projects page */
.page-services-list .intro {
  padding-bottom: 40px;
}

/* Align Tools page header with other page headers */

.container.pt-6.pb-6.pt-md-10.pb-md-10.tools {
  padding-top: 140px !important;
}

h1.mb-5.tools-header {
  font-size: 50px;
}

/* new acknowledgements section in footer */

.acknowledgements {
  font-size: .8em;
  color: #CCC;
  text-align: center;
}

/* make the sub-footer centered */
.sub-footer .sub-footer-inner {
  justify-content: center;
}

/* Styling contact form */
/* ─── Contact page polish ─────────────────────────── */
.contact-form {
  background: #f8fbff;            /* very light blue tint */
  padding: 2rem 2.5rem;
  border-radius: 0.75rem;
/*  box-shadow: 0 2px 6px rgba(0,0,0,.05); */
}

.contact-form .form-control {
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: .3rem;
}

.contact-form textarea.form-control {
  resize: vertical;
  min-height: 8rem;
}

/* Brand-matching button */
.btn-primary {
  background-color: #CBE28E;      /* Green highlight used in nav */
  border-color:   #CBE28E;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #6aa83c;
  border-color:     #6aa83c;
}
/* ── Contact form label alignment ─────────────────────────── */
.contact-form .form-label {
  display: block;            /* force label on its own line   */
  margin-bottom: .35rem;     /* space between label and input */
  font-weight: 500;          /* optional: bolder text         */
}

/* Give every form-group a bit more bottom space */
.contact-form .mb-3,
.contact-form .mb-4 {
  margin-bottom: 1.25rem;
}

input {
  border-width: 1px;
}