/* General styling for content sections */
.content {
  padding-top: 2.5vh;
  padding-bottom: 2.5vh;
  display: flex;
  height: 50vh;
  border-bottom: 2px solid #ccc;
}

.contact {
  padding-top: 20px;
  padding-left: 20px;
  display: flex;
  flex-direction: column; /* stack rows vertically */
  gap: 10px;
}

.contact-row {
  display: flex;           /* align items in a row */
  align-items: center;
  gap: 10px;
}

.contact-row h1 {
  padding-left: 5px;
  font-size: clamp(1rem, 2vw, 2rem);
}

.contact-row .blurb {
  margin: 0;
}


.leftone {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.leftone h2 {
  margin-top: 0;
}

.rightone {
  flex: 1;
  padding: 20px;
  margin-left: auto
}

.lefttwo {
  width: 65%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.lefttwo h2 {
  margin-top: 0;
}

.righttwo {
  width: 35%;
  padding: 20px;
  margin-left: auto
}

.leftthree {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.lefthree h2 {
  margin-top: 0;
}

.rightthree {
  flex: 1;
  padding: 20px;
  margin-left: auto
}

.leftfour {
  width: 60%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.leftfour h2 {
  margin-top: 0;
}

.rightfour {
  width: 40%;
  padding: 20px;
  margin-left: auto
}

/* Styling for image sections */
.imagesection {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Specific images for each section */
#image1 {
  background-image: url("data/chainsawsharpener.webp");
  background-position: 75%;
}

#image2 {
  background-image: url("data/tool.webp");
  background-position: 5%;
}

#image3 {
  background-image: url("data/torchkit.webp");
  background-position: 0%;
}

#image4 {
  background-image: url("data/binoculars.webp");
  background-position: 100%;
}

/* Section with background styling */
.show {
  width: 100%;
  background-color: #f0f6ff;
}

.aboutus {
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-left: 20px;
  border-bottom: 2px solid #ccc;
}

/* Top section with centered content */
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.top p {
  margin: 0;
  color: #474747;
  font-weight: 400;
}

.top button {
  padding: 5px 10px;
}

/* Bottom section with grid layout */
.bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
}

/* Styling for show section (image and text horizontally aligned) */
.showsection {
  display: flex;
  align-items: center;
  gap: 20px;
}

#toggleSection {
  justify-content: center;
}

/* Image box styles */
.image-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-image: url("data/calendaricon.webp");
  background-size: cover;
  background-position: center;
}

.image-box h1, .image-box p {
  margin: 0;
  padding: 0;
}

/* Text and button styling */
.text h3, .text p {
  margin: 5px 0;
  text-align: center;
}

.button-wrapper {
  text-align: center;
}

.button {
  background-color: transparent;
  background-image: url(data/buttonimage.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  width: 125px;
  height: 90px;
  cursor: pointer;
  padding: 10px 20px;
  text-decoration: none;
  margin-top: 2vh;
}

.button:hover {
  background-color: transparent;
}

.button:active {
  position: relative;
  top: 1px;
}

/* Styling for text with flexible font sizes */
#oandc {
  margin-top: 2vh;
  font-size: clamp(0.8rem, 2vw, 1.3rem);
}

.blurb {
  font-size: clamp(0.5rem, 2vw, 1.1rem);
}

.bigblurb {
  font-size: clamp(0.7rem, 2vw, 1.1rem);
}

.aboutusend {
  margin-bottom: 3vh;
}

.hidden {
  display: none;
}

.flex {
  display: flex;
}

/* Video section styling */
video {
  width: 80%;
  height: 90%;
}