:root {
--primary-colour: #344966;
--inverse-primary-colour: #FFFFFF;
}

body {
font-family: sans-serif;
max-width: 70em;
margin: auto;
padding: 1em;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
background-image: url('header-background.avif');
  border-radius: 4em 0 0 4em;
}

header h1 {
 margin: 0.2em 0 0.2em 1.5em;
}

h2 {
color: var(--primary-colour);
padding: 1em;
text-align: center;
border: 2px solid var(--primary-colour);
border-right-style: none;
  border-radius: 2em 0 0 2em;
}

h3 {
color: var(--primary-colour);
}

article.services {
display: grid;   
grid-template-columns: repeat(auto-fill, minmax(max(300px, 100%/3), 1fr));
gap: 1em;
}

article.services article {
border: 2px solid var(--primary-colour);
  border-radius: 2em;
padding: 0 2em;
}

.cta p {
display: flex;
column-gap: 3em;
row-gap: 1em;
flex-wrap: wrap;
margin: 1em;
justify-content: center;
}

header .cta p {
justify-content: right;
}

.cta a {
  border-radius: 1.5em;
  background-color: var(--primary-colour);
  color: var(--inverse-primary-colour);
border: 2px solid var(--inverse-primary-colour);
  padding: 1rem 2rem;
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
margin: 0;
}