/* COLOUR PALETTE */
:root {
--navy: #102f68;
--deep-blue: #104f91;
--blue: #237fc0;
--light-blue: #c9f0ff;
--pale-blue: #e4f8ff;
--gold: #d5ad4c;
--white: #ffffff;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
}

body {
font-family: Georgia, "Times New Roman", serif;
color: var(--navy);
background: var(--pale-blue);
line-height: 1.65;
}

/* HEADER AND LOGO */
.site-header {
background: linear-gradient(120deg, #174b7c, #176ba4);
border-bottom: 2px solid #8edcff;
}

.brand {
display: flex;
justify-content: center;
align-items: center;
padding: 22px 20px 14px;
}

.brand img {
width: 155px;
max-width: 55vw;
height: auto;
object-fit: contain;
padding-right:10px;
}

.brand h1{
display: flex;
flex-direction: column;
align-items: center;
}

/* NAVIGATION */

.navigation {
display: flex;
align-self: flex-start;
align-items: stretch;
justify-content: center;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.navigation a {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
min-height: 78px;
padding: 12px 8px;
text-align: center;
color: var(--white);
text-decoration: none;
font-size: clamp(15px, 2vw, 23px);
line-height: 1.25;
border-right: 1px solid rgba(255, 255, 255, 0.65);
transition: background 0.25s, color 0.25s;
}

.navigation a:last-child {
border-right: none;
}

.navigation a:hover,
.navigation a:focus-visible {
background: rgba(255, 255, 255, 0.13);
color: #ffda76;
}

/* MAIN CONTENT AND BLUE BACKGROUND */

main {
position: relative;
overflow: hidden;
background:
radial-gradient(
ellipse at 50% 25%,
rgba(255, 255, 255, 0.98) 0%,
rgba(222, 247, 255, 0.93) 42%,
rgba(183, 233, 251, 0.92) 100%
);
}

main::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.28;
background-image:
linear-gradient(
135deg,
transparent 46%,
rgba(53, 153, 215, 0.17) 46.2%,
transparent 46.8%
),
linear-gradient(
45deg,
transparent 48%,
rgba(53, 153, 215, 0.12) 48.2%,
transparent 48.8%
);
background-size: 260px 260px, 320px 320px;
}

.content {
position: relative;
z-index: 1;
width: min(100% - 48px, 1050px);
margin: 0 auto;
padding: 35px 0 55px;
}
.content img{display: block;
margin:auto;
width:80%;}

/* PAGE HEADING */

.content h1 {
margin: 0 auto 35px;
text-align: center;
color: var(--navy);
font-size: clamp(30px, 4.4vw, 48px);
line-height: 1.25;
font-weight: 700;
font-style: italic;
}

.content h2,th {
margin: 0 auto 15px;
text-align: center;
color: var(--navy);
font-size: clamp(20px, 4.4vw, 28px);
line-height: 1.25;
font-weight: 700;
font-style: italic;
}
.content h3{
margin: 0 auto 15px;
text-align: center;
font-size: clamp(20px, 4.4vw, 28px);
line-height: 1.25;
font-weight: 700;
font-style: italic;
}
.container {
  display: flex;
  justify-content: center; /* Centers the two divs horizontally within the page */
  align-items: center;     /* Aligns them vertically if the container has height */
  gap: 20px;
  margin-top: 3em;
}
.titledimages{
    display: flex;
    align-items: center;
    flex-direction: column;
}
/* PARAGRAPHS */

.content p {
margin-bottom: 25px;
font-size: clamp(18px, 2.2vw, 27px);
line-height: 1.25;
color: #123d7d;
}

.content p:last-child {
margin-bottom: 0;
}

/* OPTIONAL GOLD HIGHLIGHT */
.gold-text {
color: #b38b2f;
}

/* FOOTER */

.site-footer {
background: linear-gradient(120deg, #174b7c, #176ba4);
border-top: 2px solid #82d9ff;
padding: 20px;
/*position:fixed;
bottom:0;
width:100%;
z-index: 1000;*/
}

.footer-links {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
}

.footer-links a {
display: inline-block;
padding: 0 28px;
color: #f3c45b;
font-size: 23px;
text-decoration: none;
transition: color 0.2s;
}

.footer-links a + a {
border-left: 1px solid rgba(255, 255, 255, 0.7);
}

.footer-links a:hover,
.footer-links a:focus-visible {
color: #ffffff;
text-decoration: underline;
}

.copyright {
margin-top: 15px;
text-align: center;
color: #e5f4ff;
font-family: Arial, sans-serif;
font-size: 12px;
}

/* TABLETS AND MOBILE PHONES */

@media (max-width: 600px) {
.brand {
padding: 18px 12px 12px;
}

.brand img {
width: 125px;
}

.navigation a {
min-height: 64px;
padding: 10px 4px;
font-size: 14px;
overflow-wrap: anywhere;
}

.content {
width: calc(100% - 40px);
padding: 30px 0 38px;
}

.content h1 {
margin-bottom: 28px;
font-size: 31px;
}

.content p {
margin-bottom: 27px;
font-size: 19px;
line-height: 1.52;
}

.footer-links a {
padding: 0 20px;
font-size: 20px;
}

.site-footer {
padding: 17px 12px;
}
}

@media (max-width: 360px) {
.navigation a {
font-size: 12px;
padding: 8px 2px;
}

.content h1 {
font-size: 27px;
}

.content p {
font-size: 17px;
}
}

/* ACCESSIBILITY */

a:focus-visible {
outline: 3px solid #ffda76;
outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

* {
transition: none !important;
}
}