* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: #555;
  margin: 0;
  overflow-y: scroll; /* Forces scrollbar on all pages to avoid shifting */
}

/* Navbar Styling */
.head {
  display: flex;
  align-items: center;
  background-color: #fff;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 2.4rem;
  margin-bottom: 2rem;
  position: static;
  width: 100%;
  top: 0;
}

.navbar {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.navlink {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 16px;
  transition: color 0.3s;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.navlink:hover,
.navlink:focus {
  color: #76a21e; /* Changed to a darker shade for better contrast */
  outline: none;
}

.logo {
  width: 100%;
  object-fit: contain;
  height: 129px;
}

#main,
#about-section {
  background-color: #f2e8f2;
  padding: 4.8rem 0 7rem;
  border-radius: 10px;
  margin-top: 30px;
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.landingpg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.landingpg-img {
  border-radius: 10px;
  width: 100%;
  margin-top: 3rem;
  height: auto;
  margin-bottom: 3rem;
}

.about-img img {
  border-radius: 10px;
  height: auto;
  margin-left: -5rem;
  width: 110%;
}

/* Text Styling */
.header-main {
  font-family: 'Moderustic', sans-serif;
  font-weight: 520;
  font-size: 32px;
  color: #333;
  line-height: 1.5;
  letter-spacing: 0.3px;
  margin-bottom: 2rem;
  margin-top: 4rem;
}

.main-description {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -0.5px;
  margin-bottom: 2rem;
}
.subheader {
  font-size: 25px;
  font-weight: 550;
  line-height: 1.2;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2d2d2d; /* Improved contrast */
}

/* Button Styling */
.button {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 0.8rem 1.2rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  background-color: #333;
  color: #fff;
}

.button:hover,
.button:focus {
  background-color: #6e6e6e;
  outline: none;
}

.btnmargin-right {
  margin-right: 1.6rem;
}

.container {
  max-width: 120rem;
  padding: 0 2rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  gap: 4rem;
}

.grid2cols {
  grid-template-columns: repeat(2, 1fr);
}

/* About Section */
#about-section {
  margin: 0 auto 3rem;
  background-color: #ebeeee;
  color: #333;
  padding: 8rem;
  border-radius: 10px;
}

/* Daily Section */
#daily-exercises {
  padding: 6rem 2rem;
}

.exercisetips,
.exercisetips-reverse {
  font-size: 30px;
  font-weight: 800;
  color: #4d4d4d; /* Improved contrast */
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.exercisetips-reverse {
  margin-top: 1rem;
}

.grid-container,
.grid-container-reverse {
  display: grid;
  gap: 4rem;
}

.grid-container {
  grid-template-columns: 1fr 1.5fr;
}

.grid-container-reverse {
  grid-template-columns: 1.5fr 1fr;
}

/* Section Gap */
.section-gap {
  margin-top: 3rem;
}

/* Reduced Section Gap */
.section-gap-02 {
  margin-top: -3rem;
}
.daily-description {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -0.5px;
  color: #444; /* Improved contrast */
  margin-bottom: 1rem; /* Line break and space between paragraphs */
}

.daily-img,
.daily02-img {
  width: 90%;
  height: auto;
  border-radius: 10px;
}

/* Gallery Styling */
figure {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
}

.gallery-item {
  overflow: hidden;
  background-color: #fff;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: 16 / 9;
  align-items: center;
  justify-content: center;
  height: auto;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-item:hover,
.gallery-item:focus {
  transform: scale(1.2);
  box-shadow: 0 6px 12px rgba(157, 157, 157, 0.2);
  outline: none;
}

.gallery-subheader {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 4rem;
  margin-bottom: 4rem;
  letter-spacing: 1px;
  color: #2d2d2d; /* Improved contrast */
}

/* Contact Form Styling */
.contact-form-container {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  background-color: #f5f1f5;
  padding: 6rem;
}

.contact-form-container .container {
  width: 40%;
  max-width: 800px;
  padding: 3rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center; /* Ensure all child elements, including the submit button, are centered */
}

label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: bold;
}

input[type="text"],
input[type="email"] {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="submit"] {
  width: 90%;
  padding: 10px 0; /* Adjust padding for vertical centering */
  background-color: #6a6868;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.6s;
  margin-bottom: 3rem;
  align-self: center;
  text-align: center; /* Center text horizontally */
  line-height: normal;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: #d39fd5; /* Even darker shade */
  outline: none;
}

/* MEDIA QUERIES */
/* For screens between 320px and 1000px */
@media (min-width: 320px) and (max-width: 1000px) {
  .landingpg,
  .grid2cols,
  .grid-container,
  .grid-container-reverse {
      grid-template-columns: 1fr;
  }

  #main,
  #about-section {
      max-width: 90%;
      padding-left: 5%;
      padding-right: 5%;
  }

  .head {
      margin-bottom: 3rem;
  }

  .landingpg-img,
  .daily-img {
      width: 100%;
      height: auto;
  }

  .about-img img {
      margin-left: -0.7rem;
      width: 110%;
      align-items: center;
  }

  #about-section {
      text-align: left;
      margin-bottom: 1.5rem; /* Reduce bottom margin */
  }

  #daily {
      margin-top: 1.5rem; /* Adjust this value as needed */
  }

  .gallery {
      grid-template-columns: 1fr;
      gap: 10px;
  }

  .gallery-item {
      aspect-ratio: 4 / 3;
  }

  .gallery-item img {
      width: 100%;
      height: auto;
  }
}

/* Adjusting contact form container for smaller screens */
@media (min-width: 320px) and (max-width: 1240px) {
  .contact-form-container .container {
      width: 90%;
      padding: 2rem 1rem; /* Reduced padding inside the container */
      max-width: 100%;
  }

  .form-group label {
      font-size: 1rem; /* Adjust font size for labels on smaller screens */
  }

  input[type="text"],
  input[type="email"] {
      width: calc(100% - 1rem); /* Adjust input width */
  }

  input[type="submit"] {
      width: 100%; /* Ensure the submit button fits the screen width */
      padding: 10px 0; /* Adjust padding */
  }
}

/* Additional adjustments for very small screens (below 480px) */
@media (max-width: 480px) {
  .contact-form-container {
      padding: 2rem 0.5rem; /* Further reduce padding for very small screens */
  }

  .contact-form-container .container {
      padding: 1.5rem 0.5rem; /* Further reduce inner padding */
  }

  input[type="submit"] {
      font-size: 14px; /* Adjust font size of the submit button */
      padding: 8px; /* Adjust padding */
  }

  .navlink {
      font-size: 12px;
  }

  .navbar {
      margin-top: 2rem;
      gap: 0.5rem;
  }

  .head {
      padding: 0px 1.6rem;
  }
}