/* Global Reset */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}






/* Semantic Styling */

body {
  background-color: #544d47;
  background-image: url(images/bg800bulbs.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Adjust this to control vertical alignment */
  align-items: center; /* Keep this to center the content horizontally */
  width: 100%;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem;
  margin: 0px;
  border: #707070;
  border-style: solid;
  border-width: 1px;
  border-color: #707070;
  border-radius: 1rem 1rem 0px 0px; /* Rounded top corners */
  background-color: white;
  color: #252525;
  max-height: 100px;
  max-width: 50vw;
  min-width: 770px;  /*STOP THE MAIN SHRINKING ON WINDOW RESIZE*/
}
header::after {
  content: "";
  display: block;
  clear: both;
}

main {
  text-align: left;
  padding: 0;
  margin-top: 3rem;
  background-color: #ffffff;
  border: #707070;
  border-style: solid;
  border-width: 1px;
  color: #252525;
  width: 50vw;
  border-radius: 1rem 1rem 0rem 0rem;
  min-width: 770px; /*STOP THE MAIN SHRINKING ON WINDOW RESIZE*/
  box-shadow: 2px 8px 10px;
}

section {
  color: #252525;
  background-color: white;
  margin: 0rem;
  padding: 0;
  min-height: 8rem;
  min-width: 770px;
}

section::after {
  content: "";
  display: block;
  clear: both;
}

article {
  color: #252525;
  background-color: #f8fffe;
  border-color: #c0dcd6;
  border-style: solid;
  border-width: 1px 1px 1px 10px;
  margin: 1rem 2rem 1rem 2rem;
}

article::after {
  content: "";
  display: block;
  clear: both;
}

footer {
  background-color: #d66717;
  border-color: #707070;
  border-width: 1px;
  border-style: solid;
  border-radius: 0px 0px 1rem 1rem; /* Rounded bottom corners */
  padding: 2rem;
  text-align: left; /* Center the text inside the footer */
  margin-bottom: 2rem;
  width: 50vw;
  min-width: 770px; /*STOP THE MAIN SHRINKING ON WINDOW RESIZE*/
  box-shadow: 2px 8px 10px;
}

h1 {
  font-size: 24px;
  margin: 1rem 1rem 0rem 1rem;
}

h2 {
  font-size: 20px;
  margin: 1rem 1rem 0rem 1rem;
}

h3 {
  margin: 1rem 1rem 0rem 1rem;
}

h4 {
 
    position: absolute;
    left:     -10000px;
    top:      auto;
    width:    1px;
    height:   1px;
    overflow: hidden;
  
}

p {
  font-size: 16px;
  margin: 1rem 1.5rem 1rem 1.5rem;
}

hr {

margin: 0 1rem 0 1rem;
}

br::after {
  content: "";
  display: block;
  clear: both;
}






/* Custom Styles */

.logo img {
  height: 50px; /* Adjust based on your logo's size */ 
   margin: 0 0 0 1rem;
}

.navigation {
  display: flex;
  align-items: flex-start;
  justify-content: right; /* Justify content to the start (left) */
  padding: 0 0 0 40%;
  margin: 0;
}

.navigation a {
  text-decoration: none;
  color: #252525; /* Dark grey text, change as needed */
      padding: 10px 15px; /* Adjust padding as needed for spacing */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
  margin-left: 4px; /* Space between links */
}

.navigation a:hover {
  color: #7d5f2f; /* Link hover color, change as needed */
}

#hero {
  max-width: 100%; /* Ensures the container doesn't exceed the width of its parent (`main`) */
  overflow: hidden; /* Optional: Ensures no overflow if the image is somehow still larger */
}

#hero img {
  width: 100%; /* Makes the image fully responsive within its container */
  height: auto; /* Maintains the aspect ratio of the image */
  display: block; /* Prevents any unwanted inline spacing */

}


/* SECTION HANDLING */


.section-floats {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* Adjusts items vertically */
  gap: 20px; /* Provides space between the text and the image */
}

.section-floats img {
  flex: 1; /* Allows the image to grow */
  max-width: 30%; /* Explicitly set max-width to enforce 1/3 of the container */
  height: auto; /* Maintains aspect ratio */
  margin: 1rem 1rem;
  border-radius: 1rem;
}

.section-floats p {
  flex: 2; /* Allows the paragraph to take up more space than the image */
  text-align: justify; /* Justifies the text for better readability */
}





/* ARTICLE HANDLING */

.article-floats {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* Adjusts items vertically */
  gap: 20px; /* Provides space between the text and the image */
}

.article-floats img {
  flex: 1; /* Allows the image to grow */
  max-width: 30%; /* Explicitly set max-width to enforce 1/4 of the container */
  height: auto; /* Maintains aspect ratio */
  margin: 1rem 1rem 1rem 1rem;
  border-radius: 1rem;
}

.article-floats p {
  flex: 2; /* Allows the paragraph to take up more space than the image */
  text-align: justify; /* Justifies the text for better readability */
}



/* PARAGRAPH ARRANGEMENT INSIDE SECTIONS */

.paragraph-arrangement {
  flex: 1; /* Allows the text container to grow and fill available space */
  max-width: 60%; /* Limits the text container */
}

.paragraph-arrangement::after {
  content: "";
  display: block;
  clear: both;
}





/* BUTTON HANDLING */

.backToTopBtn {
  display: flex; /* Use flex to center content */
  align-items: center; /* Center vertically in the flex container */
  justify-content: center; /* Center horizontally in the flex container */
  margin: auto; /* Centers the button in the available space */
  width: fit-content; /* Ensures the button width is as per its content */
  border-width: 1px;
  border-color: #1b1b1b;
  border-style: solid;
  outline: none;
  background-color: #bfbfbf;
  color: #1b1b1b;
  cursor: pointer;
  padding: 10px;
  border-radius: 2rem;

  position: relative; /* Use relative for positioning within its normal flow */
  top: 0%; /* Optional: Adjust this value to move the button lower or higher relative to its parent container */
  transform: translateY(100%); /* Optional: Adjust vertically to center with respect to its height */
}

.backToTopBtn:hover {
  background-color: #555;
}








/* FORM STYLES */


form {
  width: 100%;
  max-width: 95%;
  color: #252525;
  background-color: #f8fffe;
  border-color: #c0dcd6;
  border-style: solid;
  border-width: 1px 1px 1px 8px;
  margin: 1rem;
}

fieldset {
  border: 1px solid #ccc;
  border-radius: 0%;
  padding: 20px;
}

legend {
  padding: 0 10px;
  font-weight: bold;
}

label {
  display: block;
  margin-top: 10px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* Ensures padding does not affect overall width */
}

.checkbox-group {
  display: flex;
  justify-content: center; /* Centers checkboxes horizontally */
  gap: 20px; /* Keeps space between the checkboxes */
  margin-top: 20px;
}

.checkbox-group div {
  display: flex;
  align-items: center;
}

button {
  display: block;
  width: fit-content;
  margin: 20px auto 0; /* Centers the button */
  padding: 10px 20px;
  border: none;
  background-color: #c0dcd6;
  color: #252525;
  cursor: pointer;
  border-radius: 5px;
}








/* Media query for screens less than 768px wide */

@media (max-width: 768px) {
  /* Adjustments for header element */

  header {
    border-radius: 0; /* Removes border radius */
    border-style: none;
  }
  
  nav {
    display: flex;
    align-items: flex-start;
    justify-content: left;
    margin: 0;
    padding: 0;
    

  }
.navigation{
  padding: 0 0 0 0%;
}


  /* Adjustments for main element */

  main {
    width: 100%; /* Make main take the full viewport width on smaller screens */
    min-width: 0; /* Reset the min-width for small screens */
    max-width: none; /* Remove the max-width to allow full responsiveness */
    margin-top: 0;
    border-radius: 0; /* Adjust as needed for smaller screens */
    border-style: none;
  }


  section {
    width: 100%; /* Make main take the full viewport width on smaller screens */
    min-width: 0; /* Reset the min-width for small screens */
    max-width: none; /* Remove the max-width to allow full responsiveness */
    margin-top: 0;
    border-radius: 0; /* Adjust as needed for smaller screens */
    border-style: none;
  }

  .paragraph-arrangement {
    max-width: none;}



  /* Adjustments for section floats */
  .section-floats {
    flex-direction: column; /* Stacks the items vertically on smaller screens */
  }

  .section-floats img {
    max-width: 100%; /* Allows the image to take full width on smaller screens */
  }

  /* Adjustments for footer */
  footer {
    width: 100%; /* Ensure footer takes the full viewport width */
    min-width: 0; /* Reset the min-width for small screens */
    max-width: 100vw; /* Remove the max-width to allow full responsiveness */
    border-radius: 0; /* Remove border-radius for a seamless fit on smaller screens */
    padding: 1rem; /* Adjust padding for smaller screens, if necessary */
    margin-bottom: 0;
    border-style: none;
  }

  /* ADJUSTMENTS FOR FORM */

  form {
    width: 90vw; /* Adjust form width to fit smaller screens */
    margin: 0 auto; /* Center form in the viewport */
}

.checkbox-group {
    flex-direction: column; /* Stack checkboxes vertically */
    align-items: center; /* Center checkboxes vertically */
    gap: 10px; /* Reduce gap for a tighter layout */
}

button {
    width: 100%; /* Full width button for easier touch */
}

  
}