/* Add this to ensure main content starts after the fixed header */
main {
  margin-top: 80px; /* Adjust this value if your header height changes */
}

/* Contact hero base styles (background, overlay positioning) */
.contact-hero { width: 100%; }
.contact-hero-inner {
  height: 360px;
  background-image: linear-gradient(180deg, rgba(20,10,40,0.35), rgba(10,8,20,0.45)), url('https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/chicago-skyline-march-2009-windy-night-donald-schwartz.jpg');
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 6%;
}
.contact-hero-title {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  background: rgba(0,0,0,0.2);
  padding: 10px 18px;
  border-radius: 6px;
}

/* About page hero image (professional business scene) */
.about-hero { width: 100%; }
.about-hero-inner {
  height: 360px;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)), url('https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center center;
  display: block;
}

@media (max-width: 800px) {
  .about-hero-inner { height: 260px; }
}




@media (max-width: 800px) {
  .contact-hero-inner { height: 260px; padding-right: 4%; }
  .contact-hero-title { font-size: 1.6rem; }
}

@media (max-width: 420px) {
  .contact-hero-inner { height: 200px; padding-right: 4%; justify-content: center; }
  .contact-hero-title { font-size: 1.3rem; }
}

/* Contact form table - dark blue background */
.contact-table {
  width: 100%;
  border-collapse: collapse;
  background: #082a66; /* dark blue */
  color: #fff;
  padding: 12px;
}
.contact-table td { padding: 10px; vertical-align: top; }
.contact-table input[type="text"],
.contact-table input[type="email"],
.contact-table input[type="tel"],
.contact-table textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: #fff;
  box-sizing: border-box;
}
.contact-table input::placeholder, .contact-table textarea::placeholder { color: rgba(255,255,255,0.8); }
.contact-table textarea { min-height: 120px; resize: vertical; }

/* Submit button - light orange */
.contact-submit {
  background: #ffd8b2; /* light orange */
  color: #3a2a00;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.contact-submit:hover { filter: brightness(0.98); }

@media (max-width: 600px) {
  .contact-table td { display: block; width: 100%; }
  .contact-table tr { display:block; margin-bottom: 8px; }
}

/* Contact page intro styles */
.contact-intro-inner { padding: 12px 18px; }
.contact-intro .intro-small {
  margin: 0 0 6px 0;
  color: #000;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}
.contact-intro .intro-hero {
  margin: 0 0 8px 0;
  font-size: 2rem;
  font-weight: 700;
  color: #000;
  display: flex;
  align-items: center;
}
.contact-intro .accent-bar {
  display: inline-block;
  width: 6px;
  height: 1.25em;
  background: #ff6600; /* orange accent */
  margin-right: 12px;
  border-radius: 2px;
}
.contact-intro .intro-sub {
  margin: 0 0 16px 0;
  color: #7a7a7a; /* gray */
  font-size: 0.98rem;
}

@media (max-width: 600px) {
  .contact-intro .intro-hero { font-size: 1.5rem; }
  .contact-intro .accent-bar { height: 1.1em; width: 5px; margin-right: 8px; }
}

/* Contact info block */
.contact-info-inner { padding: 18px; }
.divider.thin { height: 1px; background: #e9e9e9; width: 100%; margin: 12px 0; }
.contact-info-col { padding: 12px 0; }
.contact-info .country-name { font-weight: 700; color: #000; margin: 0 0 6px 0; }
.contact-info .company-name { font-weight: 600; color: #111; margin: 0 0 4px 0; }
.contact-info .address-line { color: #666; margin: 0 0 3px 0; font-size: 0.98rem; }

@media (max-width: 600px) {
  .contact-info-inner { padding: 12px; }
}