:root {

  --color-005495: #005495;
  --color-035292: #035292;
  --color-e7bb2d: #e7bb2d;
  --color-f4f4f4: #f4f4f4;
  --white: #ffffff;
}

/* fonts */
body {

  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Hero Section */
.contact-hero {

  position: relative;
  width: 100%;
  margin-top: 0;
  /* remove offset above image */

}

@keyframes bannerZoomOut {
  0% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

.hero-image {

  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.hero-image img {

  width: 100%;
  height: auto;
  display: block;
  animation: bannerZoomOut 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.hero-text-container {

  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 10%;
  /* Offsets the visually covered bottom area */

}

.hero-text h1 {

  color: var(--color-005495);
  font-weight: 900;
  margin: 0;
}

/* Split Section */
.contact-info-section {

  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: -10%;
  /* Move up to cover the space at the bottom of the home image */
  position: relative;
  z-index: 10;
}

/* Map */
.map-container {

  width: 50%;
  min-height: 600px;
  background-color: var(--color-f4f4f4);
  /* Light gray background to match right side behavior */

}

.map-container iframe {

  width: 100%;
  height: 100%;
  border: 0;
}

/* Info Container */
.info-container {

  width: 50%;
  background-color: var(--color-035292);
  /* Fallback */
  background-image: url("../images/contact/blue_bg.png");
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 8% 5% 8% 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.locations {

  max-width: 500px;
}

.location-box h2 {

  color: var(--color-e7bb2d);
  font-weight: 900;
  margin-bottom: 20px;
}

.company-name {

  font-weight: 700;
  margin-bottom: 20px;
}

.address {

  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 20px;
  opacity: 0.9;
}

.contact-details {

  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item {

  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-item img {

  width: 20px;
  height: 20px;
  object-fit: contain;
}

.contact-item a {

  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  transition: opacity 0.3s ease;
}

.contact-item a:hover {

  opacity: 0.8;
}

/* Pattern Separator */
.pattern-separator {

  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.pattern-separator img {

  width: 100%;
  min-height: 40px;
  /* Gives pattern thickness on small screens */
  height: auto;
  object-fit: cover;
  object-position: center;
  /* ensures the pattern is cropped nicely */
  display: block;
}

/* Responsive */
@media (max-width: 991px) {

  .contact-hero {

    display: block;
}

  .hero-image {

    width: 100%;
}

  .hero-text-container {

    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    clip-path: none;
    padding: 0 15px 10%;
    /* Keep the offset on smaller screens too */
    text-align: center;
    justify-content: center;
    background: transparent;
}

  .contact-info-section {

    flex-direction: column-reverse;
}

  .map-container {

    width: 100%;
    height: 400px;
    min-height: auto;
}

  .info-container {

    width: 100%;
    padding: 50px 20px;
    align-items: center;
    text-align: center;
}

  .contact-details {

    align-items: center;
}
}

/* ============================================================
   RESPONSIVE FONT SIZES MOVED TO: fonts-common/fonts-contact.css
   Font-size declarations have been consolidated.
   Layout & spacing properties are preserved below.
   ============================================================ */

/* 7. Laptop Baseline (1280x800) - Layout properties */
@media screen and (min-width: 1280px) and (max-width: 1439px) {

  .hero-text-container {

    right: 12% !important;
}
}

/* 8. Laptop Large (1440x900) - Layout properties */
@media screen and (min-width: 1440px) and (max-width: 1919px) {

  .hero-text-container {

    right: 12% !important;
}
}

/* 9. Desktop Standard (1920x1080) - Layout properties */
@media screen and (min-width: 1920px) and (max-width: 2559px) {

  .locations {

    max-width: 750px !important;
}
}

/* 10. Desktop Large (2560x1440) - Layout properties */
@media screen and (min-width: 2560px) and (max-width: 3839px) {

  .locations {

    max-width: 950px !important;
}
}

/* 11. Desktop 4K (3840x2160) - Layout properties */
@media screen and (min-width: 3840px) {

  .locations {

    max-width: 1200px !important;
}
}