/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url("images/Background.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;  

}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header Styles */
.header {
  display: flex;
  height: 84px;
  padding: 8px 16px; 
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
}

.logo-container {
  display: flex;
  height: 40px;
}

.logo-mb {
  height: 100%;
  aspect-ratio: 90.86 / 40;
  object-fit: contain;
  /* width and height properties added in 680px breakpoint */
}

.logo-geoenergy {
  height: 100%;
  aspect-ratio: 23/20;
  object-fit: contain;
}

/* Main Content Styles */
.page-content {
  display: flex;
  padding: 80px 16px 0px 16px; 
  flex-direction: column;
  align-items: flex-start; 
  gap: 80px;
  flex: 1 0 0;
  align-self: stretch;
}

.column-content{
  display: flex;
  max-width: 1400px;
  align-items: center;
  align-self: stretch;
}

.text-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  gap: 80px; 
  flex: 1 0 0;
}

.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 20px;
  align-self: stretch;
}

.main-heading {
  color: #004B98; 
  text-align: center; 
  font-size: 20px; 
  font-style: normal; 
  font-weight: 600; 
  line-height:0.8em; 
}

.subtitle {
  color: #475467; 
  text-align: center; 
  font-size: 14px; 
  font-style: normal; 
  font-weight: 400; 
  line-height: normal; 
}

.maintenance-graphic {
  display: none; /* Hidden by default */
  /* Properties for display and size are added in 1030px breakpoint */
}

.maintenance-image {
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: center; 
  border-radius: 12px; 
}

.contact-text {
  color: #475467; 
  text-align: center; 
  font-size: 12px; 
  font-style: normal; 
  font-weight: 400; 
  line-height: normal; 
}

/* Breakpoint (285px+) */
@media (min-width: 285px){

  .main-heading {
    font-size: 32px; 
  }

  .subtitle {
    font-size: 18px; 
  }

  .contact-text {
    font-size: 14px; 
  }
}

/* Breakpoint (680px+) */
@media (min-width: 680px) {

  .page-content {
    padding: 80px 80px 0px 80px; 
  }

  .header {
    padding: 8px 40px; 

  }

  .hero-section{
    gap: 40px;
  }

  .logo-mb {
    /* aspect-ratio: 90.86/40; -- Redundant, but is being overridden by width/height below, consider removing this line if the new width/height become the source of truth * /
    width: 148px; 
    height: 65px; */
    aspect-ratio: 148/65; /* Changed/Added */
  }

  .logo-geoenergy {
    aspect-ratio: 204.12/40.00; 
    width: 168px; /* Changed/Added for consistency */
    height: 72px; /* Changed/Added for consistency */
  }

  .main-heading {
    font-size: 60px; 
  }

  .subtitle {
    font-size: 32px; 
  }

  .contact-text {
    font-size: 20px; 
    font-weight: 500; 
  }
}

/* Breakpoint (1030px+) */
@media (min-width: 1030px) {
.page-content{
  flex-direction: row;
  justify-content:space-around;
  align-items: baseline;
}
  .column-content{
    gap: 20px; 
    align-items: flex-start;
    align-self: auto;
    width: 100%;
  }

  .text-container{
    align-items: flex-start; /* Changed (from center in 285px and initial flex-start, so it's a necessary re-declaration to reset) */
    gap: 86px; 
    align-self: stretch; /* Added */
  }

  .hero-section{
    align-items: start; /* Changed (from center) */
  }

  .main-heading {
    text-align: left;
  }

  .subtitle {
    text-align: left; 
  }

  .contact-text{
    text-align: left; 
  }

  .maintenance-graphic {
    display: flex; /* Changed (from none) */
    align-items: center; /* Added */
    justify-content: center; /* Added */
    border-radius: 12px; /* Added */
    width: 445px; /* Added */
    height: 328px; /* Added */
  }

}