:root {
  --primary: #70B7E5       /* Gulf Blue */
  --accent: #F26B38        /* Gulf Orange */
  --text: #6B4F2C          /* Deep brown for contrast */
  --light: #F5F5F5
  --nav-bg: rgba(0, 0, 0, 0.6)
  --button-bg: #0077cc
  --button-hover: #005fa3
  --font: Arial, sans-serif
  --radius: 6px
  --transition: 0.3s
  --padding: 60px}

body {
  background-color: var(--primary); /* fallback */
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  background-size: cover;
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  padding: var(--padding);
  margin: 0;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  background-color: var(--nav-bg);
  position: relative;
  z-index: 10;
}

.nav-bar a {
  text-decoration: none;
  color: var(--light);
  font-weight: bold;
  padding: 10px 20px;
  border: 2px solid var(--light);
  border-radius: var(--radius);
  transition: background-color var(--transition);
}

.nav-bar a:hover {
  background-color: var(--light);
  color: black;
}

#gulf-section h1 {
  font-size: 3em;
  margin-bottom: 20px;
  color: var(--accent);
}

#gulf-section p {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 0;
}

a.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #CDAA7D; /* Optional: could be replaced with var(--accent) */
  color: var(--text);
  text-decoration: none;
  font-weight: bold;
  border-radius: var(--radius);
  transition: background-color var(--transition);
}

#contactBtn {
  background-color: var(--button-bg);
  color: var(--light);
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

#contactBtn:hover {
  background-color: var(--button-hover);
}