styles.css

/* Reset default styles */
body, h1, p, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basic styling */
body {
    font-family: Arial, sans-serif;
    color: #000;
    background-color: #fff;
}

/* Header styling */
header {
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0; /* Ensure no margin */
    padding: 0; /* Ensure no padding */
}

/* Logo image */
.logo img {
    height: 100px; /* Adjust height as needed */
}

/* Navigation bar styling */
nav {
    display: flex;
    justify-content: center; /* Center the nav items */
    background-color: #000; /* Same color as header */
    padding: 0; /* Ensure no padding */
    width: 100%; /* Ensure nav is full width */
    margin: 0; /* Ensure no margin */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

nav ul li {
    position: relative;
    margin: 0 15px; /* Add some margin between items */
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

nav ul li a:hover {
    background-color: #444;
}

nav .dropdown {
    display: none;
    position: absolute;
    background-color: #000;
    top: 100%;
    left: 0;
    min-width: 160px;
    z-index: 1;
}

nav .dropdown li {
    float: none;
}

nav .dropdown a {
    padding: 10px;
}

nav ul li:hover .dropdown {
    display: block;
}

.non-clickable > a {
    pointer-events: none; /* Disable pointer events for non-clickable items */
    cursor: default; /* Change cursor to default */
    color: inherit; /* Maintain text color */
}

/* Main content styling */
main {
    padding: 0;
    margin: 0; /* Remove top margin if any */
}

/* Landing section styling */
.landing {
    text-align: center;
    padding: 0;
}

.landing img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.description {
    margin-top: 20px;
    padding: 20px;
}

.description h1 {
    font-family: 'Roboto Slab', serif;
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
}

.description p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    margin-top: 10px;
}

/* Footer styling */
footer {
    background-color: #222; /* Slightly lighter black hue */
    color: #fff;
    text-align: center;
    padding: 150px 40px; /* Increased padding */
}

/* Footer content styling */
.footer-content a {
    color: #fff;
    text-decoration: none;
}

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

.footer-content p {
    margin: 0;
    display: inline-block;
}

/* Ensure section layout is consistent */
.section {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    margin-bottom: 10px;
    color: #666; /* Ensure readability */
    margin-top: 40px;
    padding: 10px 20%; /* Increase left and right padding for more space */
    position: relative; /* Make it a positioning context for the pseudo-element */
}

/* Container for image and text */
.section-content {
    display: flex;
    align-items: flex-start;
    color: #666; /* Ensure readability */
    margin-bottom: 10px; /* Space between content and divider */
    
}

/* Adjust image size and position */
.service-img {
    max-width: 50%; /* Adjust image size as needed */
    height: auto;
    margin-left: auto; /* Align image to the right */
}

/* Ensure text container takes remaining space */
.text-container {
    flex: 1; /* Take remaining space */
    color: #666; /* Ensure readability */
    margin-right: 20px; /* Space between text container and image */
}

/* Adjust paragraph text size and margin */
.text-container p {
    font-size: 0.625rem; /* Smaller paragraph text */
    color: #666; /* Lighter hue of black */
    margin-top: 50px;
    margin-bottom: 30px; /* Spacing before price */
}

/* Adjust text style */
.service-title {
    font-weight: bold; /* Make title bold */
    color: #666; /* Lighter hue of black */
    font-style: italic; /* Italicize the title */
}

/* Single horizontal divider line below the first photo */
.page-content {
    position: relative; /* Ensure relative positioning */
}

.price {
    font-size: 0.5rem; /* Match this to the size of other paragraphs if needed */
    color: #666; /* Ensure readability */
    margin-top: 500px;
    font-weight: bold; /* Make title bold */
    font-style: italic; /* Italicize the title */
    margin: 0; /* Adjust if there's any extra space */
}

/* Line divider styling */
hr.divider {
    border: none; /* Remove default border */
    border-top: 1px solid #666; /* Line color and thickness */
    width: 70%; /* Adjust this width to change the length */
    margin: 20px auto; /* Center the line and add space above/below */
}
.ceramic-coating-img {
    max-width: 40%;
    height: auto;
}