/* =====================================================
   PURIFY WATERS — DEVICE PERFECT RESPONSIVE PACK
   Based 100% on your HTML structure
===================================================== */

/* Global safety */
img {max-width:100%; height:auto;}
section {overflow:hidden;}
.container {padding-left:15px; padding-right:15px;}

/* Fix hero full height issue on mobiles */
@media (max-width: 768px){
  header.vh-100{
    min-height:auto !important;
    padding:120px 0 60px 0;
  }
}

/* ================= SMALL PHONES (320px–480px) ================= */
@media (max-width:480px){

  /* HERO */
  header h1 span{
    font-size: 28px !important;
  }
  header p{
    font-size:14px !important;
  }
  header .btn{
    width:100%;
  }

  /* STORY section image height fix */
  #story .min-vh-100{
    min-height:300px !important;
  }
  #story h1{
    font-size:28px !important;
  }

  /* BOTTLES image side */
  #bottles [style*="min-height: 600px"]{
    min-height:280px !important;
  }

  /* GALLERY fixed heights remove */
  #gallery [style*="height: 620px"],
  #gallery [style*="height: 350px"],
  #gallery [style*="height: 300px"],
  #gallery [style*="height: 304px"]{
    height:220px !important;
  }

  /* FAQ headings */
  #faq h2{
    font-size:26px !important;
  }

  /* CONTACT form padding */
  #contact .p-md-5{
    padding:20px !important;
  }

  /* FOOTER spacing */
  footer .border-end{
    border:none !important;
  }
}

/* ================= PHONES & SMALL TABLETS (481px–768px) ================= */
@media (min-width:481px) and (max-width:768px){

  header h1 span{
    font-size:34px !important;
  }

  #story .min-vh-100{
    min-height:350px !important;
  }

  #bottles [style*="min-height: 600px"]{
    min-height:350px !important;
  }

  #gallery [style*="height: 620px"]{
    height:320px !important;
  }

  #gallery [style*="height: 350px"],
  #gallery [style*="height: 300px"],
  #gallery [style*="height: 304px"]{
    height:240px !important;
  }
}

/* ================= TABLETS (769px–991px) ================= */
@media (min-width:769px) and (max-width:991px){

  header h1 span{
    font-size:42px !important;
  }

  #story .min-vh-100{
    min-height:450px !important;
  }

  #bottles [style*="min-height: 600px"]{
    min-height:450px !important;
  }
}



/* ================= FOOTER STACK FIX ================= */
@media (max-width:768px){
  footer .row > div{
    text-align:center !important;
    border:none !important;
  }
}@media (max-width: 767px) {
        #home {
            height: auto !important;
            min-height: 70vh !important;
            padding-top: 80px !important; 
            padding-bottom: 60px !important;
        }
        #home h1 {
            font-size: 2.2rem !important; 
        }
    }