:root {
    --blue: #4A7BA7; /* Less saturated blue */
    --orange-brown: #d49b47; /* Less saturated orange/brown */
    --slate-gray: #5F6B6D; /* Slate gray */
    --off-white: #FAF3E0; /* Off-white with a hint of color */
}
.thin-separator {
    border: none;
    height: 1px;
    background-color: #C98B2F;
    margin: 2.5em auto;
    width: 70%; /* Adjusts width to 90% of its container */
}

.header-logo {
    max-width: 100%; /* Ensures the logo is not wider than its container */
    height: auto; /* Maintains aspect ratio */
}

.form-link-button {
    background-color: var(--blue);
    color: white;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    border-radius: 5px;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: var(--off-white); /* Updated background color */
    color: var(--slate-gray); /* Updated text color */
}

header {
    background-image: url('https://video.altica.ca/images/headback_2.png'); /* Path to your background image */
    background-size: cover;
    background-position: center;
    color: white; /* Header text color */
    padding: 60px 100px; /* Increased padding for better spacing */
}

header h1, header p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Enhances readability over the background */
}

/* Apply dynamic scaling for header text based on viewport width */
header h1 {
    font-size: 4vw; /* Larger base font size for the main heading */
}

header p {
    font-size: 2vw; /* Dynamic scaling for subtext */
}
a {
    color: var(--orange-brown); /* Updated link color */
    text-decoration: none; /* Removes underline */
}

a:hover {
    color: var(--off-white); /* Updated hover color */
    text-decoration: underline;
}



#services ul {
    list-style: none; /* Removes default bullets */
    padding-left: 0; /* Removes padding */
    margin-left: auto; /* Horizontally centers the list */
    margin-right: auto;
    text-align: center; /* Center-align the text for each li */
    width: fit-content; /* Adjusts width to content size */
    max-width: 100%; /* Prevents ul from exceeding the width of the viewport */
}

#services li {
    margin-bottom: 1em; /* Adds some space between list items */
    display: block; /* Centers li in the ul */
    text-align: left; /* Aligns the li text to the left */
    width: auto; /* Width as per content */
    font-size: 1.25vw; /* Adjust as needed */
    font-weight: bold; /* Makes list items bold */
}


#services li::before {
    content: '•'; /* Custom bullet */
    color: var(--orange-brown); /* Bullet color */
    font-size: 1.5em; /* Bullet size */
    margin-right: 0.5em; /* Space between the bullet and the text */
    margin-left: 0.5em; /* Space between the bullet and the text */

}
.services-header {
   font-size: 4vw;
}



.centered {
    margin-left: auto;
    margin-right: auto;
    display: block; /* Ensures the element is treated as a block-level element */
    width: 80%; /* Example width; adjust as needed */
}

.service {
    max-width: 50%; /* Limits content width to 50% of the screen */
    margin: auto; /* Centers the content */
    text-align: center; /* Aligns text to the left */
}

.service img {
    width: 50vw; /* Makes images larger and responsive */
    max-width: 400px; /* Sets a max width to ensure images don't become too large */
    height: auto; /* Maintains aspect ratio */
    border-radius: 50%; /* Keeps images circular */
}

.service p {
    font-size: 2vw; /* Allows dynamic scaling with the viewport width */
}

footer {
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    text-align: center;
    padding: 20px 10px;
    font-size: 0.8rem;
}

footer a {
    color: #fff; /* Ensures the link is also white */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Adjustments for larger devices */
@media screen and (min-width: 1000px) {
    header h1 {
        font-size: 36px; /* Fixed font size for larger screens */
    }
    header p {
        font-size: 20px; /* Ensures subtext is readable without being too large */
    }
    .service p {
        font-size: 20px; /* Maintains readability on larger screens */
    }
    #services li {
        font-size: 20px; /* This will be larger on larger screens */
    }
}

/* Adjustments for medium devices */
@media screen and (max-width: 999px) {
    header h1 {
        font-size: 32px; /* Slightly smaller for medium screens */
    }
    header p {
        font-size: 18px; /* Adjusted for medium screens */
    }
    .service p {
        font-size: 18px; /* Increased font size for medium screens */
    }
    #services li {
        font-size: 18px; /* Continue to scale with vw */
    }
}

/* Adjustments for smaller devices */
@media screen and (max-width: 600px) {
    header h1 {
        font-size: 28px; /* Ensures visibility on small screens */
    }
    header p {
        font-size: 16px; /* Increased font size for readability on small devices */
    }
    .service p {
        font-size: 16px; /* Larger fixed font size for small screens */
    }
    #services li {
        font-size: 16px; /* Fixed minimum size for small screens */
    }
}

@media screen and (max-width: 444px) {
    /* 1. Minimum Size for the Header Image */
    .header-logo {
        min-width: 150px; /* Adjust this value as needed */
        width: 75%; /* Optional: makes the image responsive while observing the min-width */
        height: auto;
    }

    /* 2. Adjust Padding/Margin for Paragraph Text */
    header p {
        padding: 0px; /* Adds padding inside the p element */
        margin: 0 0px; /* Adds margin outside the p element, adjust as needed */
    }

    /* 3. Hide the Unordered List */
    #services ul {
        display: none;
    }
  .services-header {
        display: none;  /* This hides the 'Our services span:' header on smaller screens */
    }
}