.u-section-1 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("images/roofSolar.webp");
  background-position: 50% 50%;
}

.u-section-1 .u-sheet-1 {
  min-height: 1000px;
}

body, html {
  font-family: 'Open Sans', sans-serif; /* Example font */
  font-size: 16px; /* Default font size */
}

.donate-section .u-sheet-2 {
  padding: 50px;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("images/solarRoof2.jpg");
  background-position: center;
  background-size: cover;
  width: 100% !important;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center children horizontally */
}

.donate-section .u-sheet-2 .u-text {
  max-width: 800px; /* Constrain text width for better readability */
  text-align: justify;
  margin: 0 auto 20px auto; /* Centering */
  color: #ffffff; /* Presuming white text for readability */
  margin-bottom: 20px; /* Add some space before the iframe */
  padding: 0 20px;
  font-size: 18px;
}

.iframe-container {
  display: flex;
  justify-content: center; /* Centers the iframe horizontally */
  align-items: justify; /* Optional: Centers vertically if needed */
  width: 100%;
  margin-top: 20px;
}

.donate-section .u-text-title {
  font-size: 28px !important; /* Adjust size as needed for visibility and emphasis */
  color: #ffffff; /* Assuming white text for contrast */
  font-weight: bold; /* Make the title stand out */
  margin: 0 0 20px 0; /* Adjust spacing around the title */
  text-align: left; /* Aligns text to the left; adjust as needed */
}


#kofiframe {
  border: none;
  width: 80%; /* Adjusted for a more responsive design */
  max-width: 600px; /* Maximum width to ensure the iframe doesn't get too wide on larger screens */
  height: 712px;
  background: transparent;
}

.u-section-1 .u-text-1 {
  margin: 300px auto 20px; /* Adjusted to reduce space above the title */
}

.u-section-1 .u-text-2 {
  margin: 20px auto;
  max-width: 800px;
  text-align: justify;
  font-size: 18px;
}

.u-btn {
  display: block; /* Makes the <a> element behave like a block */
  margin: 20px auto; /* Centers the button horizontally with top and bottom margin for spacing */
  border-radius: 25px; /* Rounds the corners of the button */
  padding: 10px 20px; /* Adjust padding as needed to control the button's size */
  background-color: #41807c !important; /* Example background color, adjust as needed */
  color: white !important; 
  text-decoration: none; /* Removes underline from the link */
  font-size: 16px; /* Adjust font size as needed */
  max-width: 250px;
}

/* Optional: Add a hover effect to the button */
.u-btn:hover {
  background-color: #5cb85c !important; /* Darker shade when hovered */
}


@media (max-width: 767px) {
  #kofiframe {
    width: 95%; /* Increase width on smaller screens for better visibility */
  }
}

@media (max-width: 1199px) {
  .u-section-1 .u-sheet-1 {
    min-height: 660px;
  }
  
  /* Adjustments might not be needed if .u-text-2 margin is auto */
}

@media (max-width: 991px) {
  .u-section-1 .u-sheet-1 {
    min-height: 506px;
  }
  
  /* Adjustments might not be needed if .u-text-2 margin is auto */
}

@media (max-width: 767px) {
  .u-section-1 .u-sheet-1 {
    min-height: 380px;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-sheet-1 {
    min-height: 239px;
  }

  @media (max-width: 991px) {
    .donate-section .u-sheet-2 .u-text {
      max-width: 90%; /* Allows text block to grow slightly on smaller screens */
    }
  }
  
  @media (min-width: 1199px) {
    .donate-section .u-sheet-2 .u-text {
      max-width: 600px; /* Narrower for larger screens to enhance centering perception */
    }
  }
  
  .u-section-1 .u-text-2 {
    margin: 20px 20px; /* Add some padding on the smallest screens */
  }
}