/* Ensure correct sizing for Cotton’s Mobile Marine logo/image */
img[src*="cotton_marine.png"] {
  width: auto;          /* automatically adjust width */
  max-width: 1000px;     /* change this value to your desired max width */
  height: auto;         /* keep the aspect‑ratio */
  display: block;       /* avoid inline quirks */
  margin: auto;
}


/* Responsive logo/image for Cotton's Mobile Marine */
img[src*="cotton_marine.png"] {
  max-width: 100%;    /* allows image to shrink within its container */
  height: auto;       /* keeps aspect ratio */
  display: block;     /* removes extra space below image */
}

/* Optional: if you want to limit maximum size on large screens */
img[src*="cotton_marine.png"].logo {
  max-width: 200px;   /* adjust as needed */
  width: auto;
}

/* Ensure container allows shrinking */
.nav-bar, .nav-bar .logo {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  img[src*="cotton_marine.png"] {
    max-width: 150px; /* smaller size on mobile */
    width: auto;
  }
}

/* Navigation Menu Horizontal */
.nav-bar {
  background-color: #005a8b;
  padding: 1rem 2rem;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2rem; /* space between items */
}

.nav-list .logo {
  margin-right: auto; /* pushes menu items to the right */
  color: #ffffff;
  font-size: 1.5rem;
}

.nav-list li a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 0.5rem 0;
}

.nav-list li a:hover {
  color: #f5a623; /* accent color */
}

 /* Unique contact section background */
.contact-section {
  background-color: #005a8b; /* same as header */
  color: #ffffff;            /* text in white for contrast */
  padding: 3rem 2rem;
}

/* Contact form inputs sizing */
#contact input#firstname,
#contact input#email {
  width: 48%;           /* roughly half width */
  display: inline-block; /* keep them on same line if needed */
  margin-right: 4%;      /* spacing between fields */
  margin-bottom: 1rem;   /* vertical spacing */
}

#contact input#email {
  margin-right: 0;       /* no extra margin for the last field on the line */
}
#contact #message {
    width: 80%;          /* Full width */
    height: 150px;        /* Set height */
    padding: 10px;        /* Inner spacing */
    font-size: 16px;      /* Text size */
    border: 2px solid #ccc; /* Border style */
    border-radius: 5px;   /* Rounded corners */
    resize: vertical;     /* Allow vertical resizing only */
}

#contact textarea,
#contact input#captcha {
  width:10%;           /* full width for message and captcha */
  margin-bottom: 1rem;
}

/* Optional: stack fields on smaller screens */
@media (max-width: 768px) {
  #contact input#firstname,
  #contact input#email {
    width: 100%;
    margin-right: 0;
  }
}