html {
    scroll-behavior: smooth;
  }

/* Reset some default styles */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
    color: white;
    
}
/*---------------------------------------------------------------------------------------------------------*/
/* Apply a background color and text color to the entire page */
body {
    background-color:rgb(56, 55, 55);
    color: #333;
    font-family: Arial, sans-serif;
}

/* Style the header */
header {
    background-color: rgb(56, 55, 55);
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; /* Make the navbar sticky */
    top: 0; /* Stick to the top of the viewport */
    z-index: 100; /* Ensure the navbar appears above other content */
}
/*---------------------------------------------------------------------------------------------------------*/
nav ul {
    list-style-type: none;
    text-align: center; /* Center-align the navigation links */
    padding: 0; /* Remove default padding */
}

nav li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff; /* Change text color to white */
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

nav a:hover {
    color: #0c8aff; /* Change link color on hover */
}

/* Navbar Styles */
nav {
    
    padding: 10px 0; /* Add some padding for spacing */
    display: flex; /* Use flexbox to align items */
    justify-content: space-between; /* Spread the content evenly */
    align-items: center; /* Center items vertically */
    position: sticky; /* Make the navbar sticky */
    top: 0; /* Stick to the top of the viewport */
    z-index: 100; /* Ensure the navbar appears above other content */
}
/*---------------------------------------------------------------------------------------------------------*/
@media (max-width: 768px) {
    /* Styles for screens smaller than 768px (e.g., mobile devices) */
    nav {
        flex-direction: column; /* Stack navigation links vertically */
        text-align: center; /* Center-align the navigation links */
       
        padding: 10px 0;
    }

    nav li {
        display: block; /* Display list items as blocks */
        margin: 10px 0; /* Add spacing between list items */
    }
}

nav li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff; /* Change text color to white */
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s;
}

nav a:hover {
    color: grey; /* Change link color on hover */
}

/*---------------------------------------------------------------------------------------------------------*/

/* Style the hero section */
.hero {
    padding: 100px 0;
    background-color: white;
    color: #fff;
    background-image: url('kuvat/kuva1.jpg'); /* Replace with the actual image file path */
    background-size: cover; /* Ensure the image covers the entire section */
    background-position: center; /* Center the image within the section */
    background-repeat: no-repeat; /* Prevent image repetition */

}

.hero h1 {
    font-size: 36px;
    margin-bottom: 20px;
    text-align: center;
    color: black;
}

.hero p {
    font-size: 18px; /* Adjust the font size as needed */
    line-height: 1.5; /* Adjust line height for better readability */
    color: black; /* Text color */
    margin-top: 10px; /* Add spacing above the <p> element */
    text-align: center;
}
/*---------------------------------------------------------------------------------------------------------*/
/* Style the content sections */
.content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background-color: #333;
    border-radius: 5px; /* Add rounded corners */
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack child elements vertically */ 
    
}


.koti h1 {
    font-size: 75px;
    color: rgb(245, 245, 245);
    background-color: rgba(51, 51, 51, 0.7);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0; /* Remove margin */
    font-family: 'Open Sans', sans-serif;
    font-family: 'Oswald', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-family: 'Roboto Slab', serif;
}


.koti p {
    font-size: 30px;
    font-weight: bold;
    color: whitesmoke;
    background-color: rgba(51, 51, 51, 0.7);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0; /* Remove margin */
    font-family: 'Open Sans', sans-serif;
    font-family: 'Oswald', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-family: 'Roboto Slab', serif;
}


/*---------------------------------------------------------------------------------------------------------*/

.info {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background-color: rgba(51, 51, 51, 0.7); /* Set a slightly transparent background color */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
    border-radius: 5px; /* Add rounded corners */
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack child elements vertically */ 
    text-align: center;
}

.info h2 {
    font-size: 24px;
    margin-bottom: 20px; 
    color: whitesmoke;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Oswald', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-family: 'Roboto Slab', serif;
}

.info p {
    font-size: 22px;
    margin-bottom: 20px; 
    color: whitesmoke;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Oswald', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-family: 'Roboto Slab', serif;
}


.content h1 {
    font-size: 30px;
    margin-bottom: 20px; 
    color: rgb(245, 245, 245);
    font-family: 'Open Sans', sans-serif;
    font-family: 'Oswald', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-family: 'Roboto Slab', serif;
}

.content p {
    font-size: 24px;
    margin-bottom: 20px; 
    font-weight: bold;
    color: whitesmoke;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Oswald', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-family: 'Roboto Slab', serif;
}



/*---------------------------------------------------------------------------------------------------------*/
.content ul {
    list-style: disc inside;
    margin-left: 20px;
}

.content li {
    margin-bottom: 10px;
}

/* Style the form section */
#contact {
    background-color:  #1d1c1c; /* Set a background color */
    padding: 20px; /* Add some padding */
  }
  
  /* Style the form container */
  
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Style the "Viesti" (message) input box to be resizable */
button[type="submit"] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: flex-end;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}
/*---------------------------------------------------------------------------------------------------------*/
/* Style the contact information section in the footer */
.contact-info {
    background-color: #333; /* Darken the background color */
    padding: 20px;
    border-top: 1px solid #ddd;
    text-align: center;
}

.contact-info h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #fff; /* White text color */
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
}

.contact-info p {
    font-size: 18px;
    margin-bottom: 10px;
    color: #fff; /* White text color */
    font-family: Arial, Helvetica, sans-serif;
}

/* Style the contact information details individually */
.contact-info .email {
    font-weight: bold;
    color: #007BFF;
    font-family: Arial, Helvetica, sans-serif;
}

.contact-info .phone {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.contact-info .address {
    font-style: italic;
    color: #ddd; /* Slightly lighter text color */
    font-family: Arial, Helvetica, sans-serif;
}

#about {
    background-color:  #1d1c1c; /* Set a background color */
}
/*---------------------------------------------------------------------------------------------------------*/