@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

h1 {
    text-align: center;
    height: 75vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 40px;
    background: url('../images/bathroom1024.jpg') no-repeat center center;
    background-size: cover;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.titletext {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 75vh;
    background: url('../images/bathroom1024.jpg') no-repeat center center;
    background-size: cover;
    color: #000;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    font-size: 1.5rem;
    margin: 0;
    padding-top: 10px;
    margin-top: 40px;
}
.contacttitletext {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 30vh;
    color: #000;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    font-size: 1.5rem;
    margin: 0;
    padding-top: 10px;
	padding-bottom:40px;
    margin-top: 40px;
}
.bigtext {
    font-size: 3rem;
    font-weight: bold;
    line-height: .8;
}
.centered-text {
      text-align: center;
    }
body {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    background-color: #f0f0f0;
    margin-top: 1px;
	

}
}

}.header-section {
    height: 75vh;
    background: url('images/bathroom1.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    margin: 0;
}
.header-section h1 {
    margin-top: 40px;
    margin-bottom: 10px;
    font-size: 2.5rem;
    text-align: center;
}
.header-section .subtitle {
    font-size: 1.5rem;
    text-align: center;
}
.section-panels {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
    margin: 60px auto 0 auto;
    max-width: 1100px;
    position: relative;
}
.section-panels.right-flush {
    justify-content: flex-end;
    max-width: 100vw;
    width: 100vw;
    margin-right: 0;
    padding-right: 0;
    position: relative;
}
.left-panel {
    flex: 1 1 300px;
    display: flex;
    align-items: stretch;
    height: auto;
}
.left-panel img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    display: block;
}
.left-panel2 {
    align-self: center;
    height: auto;
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    flex: 0 1 350px;
    width: 25%;
    position: absolute;
    left: 18%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
    opacity: 0.97;
}
.right-panel {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: flex-start;
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    width: 75%;
    margin-left: auto;
    margin-right: 0;
}
.right-panel2 {
    position: relative;
    z-index: 1;
    width: 70vw;
    height: 60vh;
    margin-left: auto;
    margin-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}
.right-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.right-panel ul li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.7em;
}
.right-panel ul li:last-child {
    margin-bottom: 0;
}
.right-panel ul li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #228B22;
    font-size: 1.2em;
    font-weight: bold;
    top: 0.1em;
}
.right-panel p {
    line-height: 1.5;
}
.right-panel2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    display: block;
}
.button-row {
    display: flex;
    gap: 36px;
    margin-top: 40px;
    margin-bottom: 40px;
    justify-content: center;
}
.button-row .custom-btn {
    background: #000;
    color: #fff;
    border: none;
    padding: 22px 40px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 500;
    letter-spacing: 0.5px;
}
.button-row .custom-btn:hover {
    background: #222;
}
.button-row .custom-btn a {
    color: #fff;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}
/* second panel types*/



@media (max-width: 900px) {
    .section-panels,
    .section-panels.right-flush {
        flex-direction: column;
        align-items: center;
        max-width: 100vw;
        width: 100vw;
        position: static;
    }
    .left-panel,
    .right-panel,
    .left-panel2,
    .right-panel2 {
        position: static !important;
        width: 100% !important;
        max-width: 100vw;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 0 0 12px 12px;
        box-shadow: none;
    }
    .right-panel2 img,
    .left-panel img {
        border-radius: 12px 12px 0 0;
    }
}
   .advantages-section {
  text-align: center;
}

.advantages-section h1 {
  font-size: 2.5rem;
  margin-bottom: 40px;
}

.advantages-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap; /* allow wrapping on small screens */
}

.advantage-card {
  display: flex;
  flex-direction: row;
  background: white;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
  padding: 20px;
  width: 450px;
  gap: 20px;
  align-items: flex-start;
}

.advantage-img {
  width: 120px;
  border-radius: 6px;
  flex-shrink: 0;
}

.advantage-text {
  text-align: left;
  margin-top: 5px;
  flex: 1;
}

.quote {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 8px;
}

.advantage-text p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}

/* Mobile: keep horizontal per card, allow wrapping of cards */
@media (max-width: 768px) {
  .advantages-row {
    flex-direction: column;
    align-items: center;
  }

  .advantage-card {
    width: 90%;
  }
}
.image-panel-section {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 60px 0 0 0; /* Top padding added */
  width: 100%;
}

.image-panel {
  flex: 1 1 25%;
  padding: 10px;
  box-sizing: border-box;
}

.image-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  overflow: hidden;
}

.overlay-text {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

/* Medium screens: 2 over 2 layout */
@media (max-width: 1024px) {
  .image-panel {
    flex: 1 1 50%;
  }
}

/* Small screens: stack vertically */
@media (max-width: 600px) {
  .image-panel {
    flex: 1 1 100%;
  }
}
.image-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}

/* dark overlay for hover */
.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  border-radius: 6px;
}

.image-tile:hover .hover-overlay {
  opacity: 1;
}

/* text always above overlay */
.overlay-text {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
  z-index: 2;
}
.promo-section {
	
  padding: 60px 0; /* reduce top/bottom spacing */
}

.promo-container {
	margin:auto;
  display: flex;
  width: 60%;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: stretch;
}

.promo-image {
  flex: 0 0 50%;
  display: flex;
}

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

.promo-text {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f9f9f9;
  padding-left: 20px; 
  padding-right: 20px;
  
  box-sizing: border-box;
}

.promo-heading {
  text-transform: uppercase;
  font-size: 0.95rem; /* reduced text size */
  margin-bottom: 12px;
  color: #333;
}

.promo-link {
  font-size: 1.3rem; /* reduced text size */
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

.promo-link:hover {
  text-decoration: underline;
}


 .site-footer {
    background-color: #000;
    color: #fff;
    padding: 2rem 1rem;
    font-family: sans-serif;
  }
.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  color: #9fb2c9;
}

 .footer-container {
  width: 50%;
  margin: 0 auto;
}

.footer-panels {
  display: flex;
  justify-content: space-between;
  gap: 5%;
}

.footer-panel {
  flex: 0 0 30%;
  min-width: 180px;
}
.footer-panel a:hover {
  background:#9fb2c9;
}

  .footer-panel h4 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
  }

  .footer-panel p {
    margin: 0;
    line-height: 1.5;	
	
  }




  .footer-divider {
    border: none;
    border-top: 1px solid #444;
    margin: 2rem 0 1rem;
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #aaa;
  }

  .footer-bottom span {
    margin: 0.3rem 0;
  }

  @media (max-width: 600px) {
    .footer-panels {
      flex-direction: column;
    }
    .footer-bottom {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }
.contact-btn {
  background-color: #ffffff;
  color: #000000;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.contact-btn:hover {
  background-color: #9fb2c9;
}
.contact-form {
  max-width: 700px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem; /* ← Adds vertical space between rows */
}

.form-row label {
  width: 150px;
  font-weight: bold;
}

.form-row input,
.form-row textarea {
  flex: 1;
  padding: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-row textarea {
  width: 100%;       /* Make it span full width of the row */
  height: 200px;     /* Optional: keep it tall for comfort */
  padding: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
  resize: vertical;  /* Let users drag to resize height if desired */
}
.full-width {
  width: 100%;
  margin-bottom: 1rem;
}

.checkbox-group {
  border: none;
  padding: 0;
 margin-bottom: 1rem;

  display: flex;
  flex-direction: column;
}

.checkbox-group legend {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.checkbox-group label {
  margin-bottom: 1rem; /* was likely 0.25rem before — this doubles or more */
  display: flex;
  align-items: center;
}

 .form-wrapper {
  display: flex;
  justify-content: center; /* 👈 Centers horizontally */
  padding: 2rem;
  background-color: #f7f7f7; /* Optional background */
}


.button {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: pointer;
  width: 150px;
  height: 50px;
  background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
  border-radius: 30px;
  border: 1px solid #8F9092;
  transition: all 0.2s ease;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #606060;
  text-shadow: 0 1px #fff;
}
button:hover {
  box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
}

button:active {
  box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

button:focus {
  box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}
.contact-form {
  width: 100%;
  max-width: 100%;
  background: linear-gradient(to bottom right, #ffffff, #f0f0f0);
  border-radius: 10px;
  border: 10px ridge #ccc;
	padding: 2rem;
  box-shadow:
    4px 4px 8px rgba(0, 0, 0, 0.2),     /* Main drop shadow */
    -4px -4px 8px rgba(255, 255, 255, 0.8), /* Top-left light */
    inset 2px 2px 5px rgba(0, 0, 0, 0.05),  /* Inner shadow for depth */
    inset -2px -2px 5px rgba(255, 255, 255, 0.7); /* Inner light on top */
}



@media (min-width: 600px) {
  .contact-form {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .contact-form {
    width: 30%;
  }
}

.form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem; /* ← Adds vertical space between rows */
}

.form-row label {
  width: 150px;
  font-weight: bold;
}

.form-row input,
.form-row textarea {
  flex: 1;
  padding: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-row textarea {
  width: 100%;       /* Make it span full width of the row */
  height: 200px;     /* Optional: keep it tall for comfort */
  padding: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
  resize: vertical;  /* Let users drag to resize height if desired */
}
.full-width {
  width: 100%;
  margin-bottom: 1rem;
}
@media (max-width: 1000px) {
  .form-row {
    flex-direction: column;      /* Stack label + input vertically */
    align-items: stretch;        /* Ensure full width */
  }

  .form-row label {
    width: 100%;                 /* Allow label to span full row */
    margin-bottom: 0.25rem;      /* Add space below label */
  }
}

.checkbox-group {
  border: none;
  padding: 0;
 margin-bottom: 1rem;

  display: flex;
  flex-direction: column;
}

.checkbox-group legend {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.checkbox-group label {
  margin-bottom: 1rem; /* was likely 0.25rem before — this doubles or more */
  display: flex;
  align-items: center;
}

.alt-bold-list li:nth-child(odd) {
  font-weight: bold;
}