/* /* Global Styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f9f9;
  line-height: 1.6;
  color: #333;

}

h1 {
  font-size: clamp(2rem, 5vw, 2.5rem);
  margin: 0.2rem 0;
  color: #0d47a1;
}

.tagline {
  font-size: 1.2rem;
  color: #1976d2;
}

/* Main Content */
main {
  padding: 2rem 1rem;
  max-width: 800px;
  margin: auto;
}

section {
  margin-bottom: 2.5rem;
}

.logo {
  background-color: #e3f2fd;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  border-radius: 8px;
  padding: 1em 0;
  max-width: 150px; /* Or whatever width works best */
 }


header h1,
header .tagline {
  text-align: center;

}
footer { 
text-align: center; 
margin: 0 auto;
max-width: 100%;
padding: 1rem; 
background-color: #e3f2fd; /* light shade of cyan-blue */
font-size: 0.9rem; 
border-top: 1px solid #90caf9; /* Light grayish cyan */
color: #333; }  /* Dark Charcoal */

/* ======================== 🧭 Header & Navigation ====================*/
Header / header { text-align: center; padding: 2rem 1rem; background-color: #e3f2fd; border-bottom: 2px solid #90caf9; } 
/* ======================== 🧭 End Header & Navigation ====================*/

/* ======================== Social Media Section ======================== */
.cta-button { display: inline-block; margin-top: 1.2em; padding: 0.75em 1.5em; font-size: 1.1rem; background-color: #0d47a1; color: #fff; border: none; border-radius: 8px; text-decoration: none; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: background-color 0.3s ease, transform 0.2s ease; } .cta-button:hover { background-color: #1565c0; transform: scale(1.05); }

.social-section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2em; padding: 2em 1em; max-width: 960px; margin: auto; }

/* Container for previews and buttons */ .social-preview, .share-buttons { flex: 1 1 300px; display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; }

/* Social preview thumbnails */ .social-preview img { max-width:200px; height: auto; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; }

.social-preview img:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); cursor: pointer; }

/* Share buttons */ .share-button { display: inline-block; padding: 0.6em 1.2em; font-size: 1rem; background-color: #4caf50; color: white; border-radius: 6px; text-decoration: none; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 0.3s ease, background-color 0.3s ease; }

.share-button:hover { background-color: #388e3c; transform: scale(1.05); }

.social-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2em; justify-items: center; margin-top: 1em; }

.social-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; }

.social-card img { max-width: 100%; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 0.3s ease; }

.social-card:hover img { transform: scale(1.05); }

.social-label { margin-top: 0.5em; font-weight: 600; font-size: 0.95rem; color: #333; }

/* ======================== End Buttons Section ======================== */

/* ======================== 🐉 Hero Banner ======================== */ 

.hero-tagline 
{ text-align: center;
margin: 3em auto;
padding: 1.5em;
background-color: #e3f2fd;    /* light shade of cyan-blue */
border-radius: 12px;
max-width: 800px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.hero-tagline h2 
{ font-size: clamp(2rem, 5vw, 2.5rem);
color: #0d47a1;        /* cyan-blue */
margin-bottom: 0.5em;
font-weight: 700; }

.hero-tagline p 
{ font-size: 1.2rem; color: #333; } 

/* ======================== 🐉 End Hero Banner ======================== */


/* ======================== 🧭 Flyer Section ====================*/

.image-section 
{ text-align: center; overflow: hidden; margin: 2em 0; }

.flyer-section {
  padding: 10px 10px;
  background-color: #ffffff;
  max-width: 600px;
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: 0 4PX 12px rgba(0, 0, 0, 0.1);
 }

.flyer-section h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
  
}

.flyer-section p {
  text-align: center;
  font-size: 1.0rem; 
  margin-bottom: 0;
  color: #333;
  
}

.flyer-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* ============== 🧭 End Flyer Section ====================== */


/* ======================== 💡 Product Highlights ======================== */ .checkmark 
{ color: green; font-weight: bold; margin-right: 8px; }

.product-highlights 
{ margin: 2em 0; font-size: 1.1em; line-height: 1.5; } /* ...rest of styles... */

/* ================== 🎥 Demo Video Gallery Styles ================== */ 

.image-section 
{ text-align: center; overflow: hidden; margin: 2em 0; }

.image-section img 
{ max-width: 100%; height: auto; object-fit: contain; display: block; margin: 0 auto; }

/* Specific adjustment for Untamed hose image / .image-section img[alt="Untamed hose"] { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; }

/* General styling for future image containers / .image-section { max-height: 600px;  / Adjust as needed */ overflow: hidden; margin: 2em 0; }

video { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

#video-demo { margin-top: 2em; }

video { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Image Gallery */ 
.photos img { width: 100%; max-width: 100%; margin: 1rem 0; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: block; margin-left: auto; margin-right: auto; opacity: 0; animation: fadeIn 1s ease forwards; }

.photos-grid h2 
{ text-align: center; margin-bottom: 1.5rem; }

.photo-grid 
{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; align-items: center; }

.photo-grid img 
{ width: 100%; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease; }

.photo-grid img:hover 
{ transform: scale(1.03); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }

.photo-grid figure 
{ margin: 0; text-align: center; }

.photo-grid img 
{ width: 100%; max-height: 350px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease; }

img[alt="Tangled Hose Before Dragon Hose"] { max-height: none !important; object-fit: contain !important; } figure img { display: block; margin: 0 auto; }

.photo-grid img:hover 
{ transform: scale(1.03); }

.photo-grid figcaption 
{ font-size: 0.95rem; margin-top: 0.5rem; color: #555; }

/* ===================== 🎥 End Demo Video Gallery ===================== */

/* ======================== 🛠 Installation Guide ======================== */

.install-preview 
{   margin: 4em 0; 
    text-align: center; 
    padding: 1em; 
    background-color: #f0f7f9; 
    border-radius: 12px; }

.install-preview h3 
{ font-size: 1.6em; margin-bottom: 0.5em; color: #034d75; }

.install-preview p 
{ font-size: 1.1em; margin-bottom: 2em; }

.install-photo 
{ max-width: 700px; margin: 2em auto; text-align: center; }

.install-photo img 
{ width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.install-photo figcaption 
{ font-size: 1rem; color: #555; margin-top: 0.5em; }

.install-photo figcaption 
{ font-size: 1rem; color: #555; margin-top: 0.5em; background-color: rgba(255, 255, 255, 0.8); transition: background-color 0.3s ease; padding: 0.25em 0.5em; border-radius: 4px; display: inline-block; }

.install-photo:hover figcaption 
{ background-color: rgba(255, 255, 255, 1); } .install-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2em; }

.install-grid img 
{ width: 100%; max-width: 240px; /* Limits visual size on screen */ height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

.install-grid figcaption 
{ margin-top: 0.6em; font-size: 0.95em; color: #333; }

.install-diagram 
{ margin: 2em auto; text-align: center; padding: 1em 1.5em; background-color: #eef7fb; border-radius: 12px; }

.install-diagram h3 
{ font-size: 1.4em; margin-bottom: 0.75em; color: #034d75; }

.install-diagram img 
{ display: block; margin: 0.5em auto; max-width: 100%; width: 100%; height: auto; }

/* ===================== 🛠 End Installation Guide ===================== */

@keyframes fadeIn { to { opacity: 1; } }

/* CTA Button */ 
.cta-button { display: inline-block; padding: 1rem 1.5rem; font-size: 1.1rem; background-color: #0d47a1; color: #fff; text-decoration: none; font-weight: bold; border-radius: 8px; margin-top: 1rem; transition: transform 0.2s ease, background-color 0.3s ease; }

.cta-button:hover { background-color: #1565c0; transform: scale(1.03); }



/* Responsive Touch-Ups */ @media (max-width: 400px) { .photo-grid { grid-template-columns: 1fr; } }

@media (min-width: 401px) and (max-width: 768px) { .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

@media (max-width: 600px) { h1 { font-size: 2rem; }

.cta-button { width: 100%; }

.logo { max-width: 150px; }

/* ======================== 🌟 Testimonials Styles ====================== */

/* ======================== 🌟 Test & Order Section ======================== */
.testers { 
background-color: #e3f2fd; /* light shade of cyan-blue */
padding: 2.5rem 1.5rem; 
text-align: center; 
margin-top: 3rem; 
border-radius: 12px; 
box-shadow: 0 4px 12px rgba(0,0,0,0.05); max-width: 800px; 
margin-left: auto; 
margin-right: auto; }

.testers h2 { 
    color: #0d47a1; /* Cyan-blue */
    font-size: 1.8rem; 
    margin-bottom: 1rem; }

.testers p { 
    font-size: 1.1rem; 
    margin-bottom: 1rem; 
    color: #333; }       /* Dark Charcoal */

.testers .cta-button { 
    margin-top: 1rem; }

.testers { 
    background-color: #e3f2fd; /* light shade of cyan-blue */
    padding: 2.5rem 1.5rem; 
    text-align: center; 
    margin-top: 3rem; 
    border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    max-width: 800px; margin-left: auto; 
    margin-right: auto; }

.testers h2 { 
    color: #0d47a1; 
    font-size: 1.8rem; 
    margin-bottom: 1rem; }

.testers p { 
    font-size: 1.1rem; 
    margin-bottom: 1rem; 
    color: #333; }      /* Dark Charcoal */

.testers .cta-button { 
    margin-top: 1rem; } 
/* ======================== 🌟 End Test & Order Section ============== */

/* ======================== Contact / Footer ======================== */ 
/*footer { 
text-align: center; 
padding: 1rem; 
background-color: #e3f2fd; /* light shade of cyan-blue */
font-size: 0.9rem; 
border-top: 1px solid #90caf9; /* Light grayish cyan */
color: #333; }  /* Dark Charcoal */

/* ======================== End Contact / Footer ======================== */