body {
margin:0;
font-family:"Open Sans",sans-serif;
background:#f8fafb;
color:#2d3748;
line-height:1.7}

h1,h2,h3 {
font-family:"Poppins",sans-serif;
color: #1a6f86
}

.container {
max-width:1100px;
margin:auto;
padding:0 20px}

header {
position:sticky;
top:0;
background:#2b6799;
color:#fff;
z-index:1000;
box-shadow:0 2px 8px rgba(0,0,0,.15)}

.nav-wrap {
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
max-width: 1100px; /* constrain header width to match body container */
margin: auto; /* centre container horizontally */
padding:10px 20px}

.logo img {
height:120px;
width: auto;
display: block;
transition: height 0.3s ease; /* smooth transition when resizing screen */
}

nav {
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center}


nav a {
color:#fff;
text-decoration:none}

.contact-btn {
background:#1fa3a3;
color:#fff!important;
text-decoration:none;
padding:12px 18px;
border-radius:6px;
font-weight:bold;
white-space:nowrap}


/* Default for laptops and desktops up to 1920px wide */

.hero {
  background: #1a6f86 url("assets/heroimage.jpg") left center/cover no-repeat;
  height: 480px;
  display: flex;
  align-items: center;
}

/* For wide screens (1601 to 2560) */
@media (min-width: 1601px) {
  .hero {
    background-image: url("assets/heroimageWide2560.jpg");
    background-position: center center;
  }
}

/* For ultra wide screens (>2560) */
@media (min-width: 2561px) {
  .hero {
    background-image: url("assets/heroimageWide3840.jpg");
    background-position: center center;
  }
}


.hero h1 {
font-size:4rem;
color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.5)}

.hero p {
font-size:1.9rem;
font-weight:600;
color:#fff;
text-shadow:0 0 8px rgba(0,0,0,.8),0 2px 12px rgba(0,0,0,.7)}

section {
padding:20px 0}

section[id] {
scroll-margin-top:120px}

.cards {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px}

.card {
background:#fff;
padding:20px;
border-radius:8px;
box-shadow:0 3px 10px rgba(0,0,0,.08)}

.about-profile {
display:flex;
gap:40px;
align-items:flex-start;
flex-wrap:wrap}

.about-profile img {
width:320px;
max-width:100%;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,.15)}

.about-text {
flex:1;
min-width:300px}


.contact-profile {
display:flex;
gap:25px;
align-items:center;
margin-bottom:25px;
flex-wrap:wrap}

.contact-profile img {
width:120px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,.15)}

input,textarea {
width:100%;
max-width:700px;
padding:12px;
margin:10px 0;
box-sizing:border-box}

button {
padding:12px 18px;
background:#1fa3a3;
color:#fff;
border:none;
border-radius:5px}

footer {
background:#2b6799;
color:#fff;
text-align:center;
padding:20px;
margin-top:40px}

@media (max-width:600px) {
.logo img {
height:100px;
margin-bottom: 10px;
}

.nav-wrap {
flex-direction:column;
align-items:center;
padding: 15px 20px;
}

nav {
justify-content:center;
gap: 15px}

.hero {
height:380px}

.hero h1 {
font-size:2.5rem}

.hero p {
font-size:1.4rem}

.about-profile {
flex-direction:column}

.about-profile img {
max-width:320px;
width:100%}

}

.about-profile img.about-thumbnail {
    width: 180px;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

li {
  display: list-item;
  margin-bottom: 12px;
}

li:last-child{
  margin-bottom: 0px;
}

li::marker {
  color: #1a6f86;
}

strong {
	color: #1a6f86;
}

/* Specifically targets the menu wrap ONLY on the homepage */
.home-header .nav-wrap {
  justify-content: flex-end;
}