* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header, footer {
    width: 100%;
    background: #1a1a1a;
    color: white;
    padding: 20px;
    text-align: center;
}

main {
    flex: 1; /* Pushes footer to bottom */
    width: 100%;
    padding: 40px;
    background: #f4f4f4;
}

.header-container {
    width: 100%;
    display: flex;
    background: #1a1a1a;
    color: white;
    justify-content: space-between; /* Pushes text to left, logo to right */
    align-items: center;            /* This makes the text even with the logo */
    margin: 0 auto;
    padding: 10px 20px;
    height: 80px; 
}

.header-item {
    flex: 1; /* Each of the 3 sections takes up exactly 1/3 of the width */
}

.header-center {
    text-align: center; /* Centers text within the middle 1/3 */
}

.header-right {
    display: flex;
    justify-content: flex-end; /* If you add a "Contact" button later, it stays right */
}

.header-left {
    display: flex;
    justify-content: center; /* Centers the text-logo block in the left div */
}

.headerlp-text-size a {
    text-decoration: none;
    color: #333333;
    font-size: inherit; /* This makes it match the <p> size perfectly */
}

.header-contact-a {
    text-decoration: none; /* Removes underline from link */
    line-height: 1.2;      /* Adjusts spacing between the two lines */
    color: #ffffff;      /* Or your preferred brand color */
}

.header-right-margin {
    justify-content: center; /* For instances when there is content in the right grid (subdirectories) */
}

/* Responsive Logo Styling */
.logo {
    /* Base Size for Desktop */
    height: auto;           /* Maintains aspect ratio */
    max-height: 80px;      /* Caps the height on large screens */
    
    /* Responsiveness */
    width: auto;           /* Allows it to fill its container up to its max-size */
    max-width: 200px;      /* Standard desktop size */
    display: block;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .logo {
        max-width: 120px;  /* Scales down for mobile phones */
        margin: 10px auto; /* Centers it if you switch to a stacked layout */
    }
}

.text-logo {
    display: flex;
    flex-direction: column; /* Stacks the two spans vertically */
    align-items: center;    /* Centers the lines relative to each other */
    justify-content: center;
    text-decoration: none;  /* Removes underline from link */
    line-height: 1.2;       /* Adjusts spacing between the two lines */
    color: #ffffff;         /* Or your preferred brand color */
}

.logo-line-1 {
    font-size: 1.2rem;      /* Larger top line */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0; /* Removes extra space below the top line */
    padding-bottom: 0;
}

.logo-line-2 {
    padding-top: 0;
    margin: -15px 0 0 0;
    font-size: 1.2rem;      /* Larger top line */
    font-weight: bold;
    text-transform: uppercase;
}

.logo-line-3 {
    font-size: 0.9rem;      /* Smaller bottom line */
    letter-spacing: 2px;
}

.logo-line-4 {
    font-size: 0.9rem;      /* Smaller bottom line */
    letter-spacing: 2px;
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
}

.lp-text-size p {
    /* (min size, scaling speed, max size) */
    font-size: clamp(1rem, 4vw, 1.5rem); 
    line-height: 1.5;
}

.lp-text-size h1 {
    font-size: clamp(1.5rem, 8vw, 3rem);
    line-height: 1.5;
}

.lp-text-size a {
    text-decoration: none;
    color: #333333;
    font-size: inherit; /* This makes it match the <p> size perfectly */
}

/* Offer Button Styling */
.btn-light-blue {
  /* Layout and Shape */
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  
  /* Background and Text Colors */
  background-color: #add8e6; /* Standard LightBlue hex */
  color: #333333;           /* Darker text for readability */
  
  /* Typography and Reset */
  text-decoration: none;    /* Removes underline */
  text-align: center;
  font-family: Arial, sans-serif;
  
  /* Interactive Feel */
  transition: background-color 0.3s ease;
  cursor: pointer;
}
