/* Basic Styling */
body {
    font-family: sans-serif;
    margin: 0;
    line-height: 1.6; 
}

header, main, footer {
    padding: 20px;
}

h1 {
    color: #333; /* Dark grey */
}

h2 {
    color: #007bff; /* Blue */
}

/* Hero Section */
.hero {
    text-align: center;
    background-color: #f2f2f2; /* Light grey */
    border-bottom: 2px solid #007bff; /* Blue border */
    padding: 40px 20px; 
}

.hero img {
    max-width: 100%;
    height: auto; 
}

/* Buttons */
.button {
    display: inline-block;
    background-color: #007bff; /* Blue */
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    border: none; 
    transition: background-color 0.3s ease; 
}

.button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    cursor: pointer;
}

/* Services and Door Types Sections */
.services ul, .door-types ul {
    list-style: none;
    padding: 0;
}

/* Contact Section */
.contact {
    text-align: center;
    background-color: #f8f9fa; /* Very light grey */
    border-top: 2px solid #007bff; /* Blue border */
    padding: 40px 20px;
}

/* Responsive Design */
@media (min-width: 768px) {
    /* Adjust styles for larger screens if needed */
    header {
        text-align: center;
    }
}