/* ===============================
   Bally Quartz Slab – unified CSS
   =============================== */

/* ---- Variables for glass + text-shadow (optional but handy) ---- */
:root{
  --glass-bg: rgba(255,255,255,0.68);
  --glass-border: rgba(255,255,255,0.9);
  --glass-radius: 16px;
  --glass-shadow: 0 10px 25px rgba(0,0,0,0.18);
  --text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* ===============================
   GLOBAL / BASE
   =============================== */
html, body { min-height: 100%; }

/* IMPORTANT: we are using a regular <img class="hero-img"> for the hero photo.
   Turn OFF any body background here to avoid zoom/blur conflicts. */
body { background: none; }  /* (replaces any previous body background image rules) */

/* Regular containers you already used */
div.MainCtn {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

/* Keep your desktop bench text styling */
div.slogan {
  width: 82%;
  height: 100px;
  padding-top: 35px;
  padding-left: 70px;
  font-size: 26px;
  color: red;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

/* Logo container (desktop sizing retained) */
div.Bally {
  /* width removed for hero-overlay version; see absolute panel below */
  padding: 10px 30px 10px 25px;
  /* background-color handled by .glass class if you add it */
}

/* Logo image */
img.BaLogo {
  width: 100%;
  height: auto;
  max-width: 220px;   /* cap so it doesn’t grow too large */
}

/* Certificate tiles (legacy blocks kept if used elsewhere) */
div.cert1,
div.cert2,
div.cert3,
div.cert4 {
  width: 25%;
  padding: 10px 20px;
  background-color: rgba(255,255,255,0.7);
}

img.cert {
  width: 80%;
  height: auto;
  border: 0;
}

/* ===============================
   HERO (regular picture) setup
   =============================== */

/* The hero wrapper around your two <img>s and overlay panels */
.hero { position: relative; }

/* The actual hero image behaves like a regular picture (sharp, no forced zoom) */
.hero-img { display: block; width: 100%; height: auto; margin: 0 auto; }
.hero-img--mobile { display: none; }  /* desktop default */

/* Three floating overlay panels inside the hero */
.slogan { position: absolute; left: 70px; top: 20px; font-size: 26px; color: #c81d1d; }
.Bally  { position: absolute; right: 30px; top: 10px; }
.CrtCnt { position: absolute; right: 30px; bottom: 20px; display: flex; gap: 10px; padding: 10px; }

/* Optional “glass” and text shadow (apply by adding class="glass" or class="float-text") */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
}
.float-text{ text-shadow: var(--text-shadow); }

/* Keep certs neat inside the CrtCnt glass panel */
.CrtCnt .cert { width: 80px; height: auto; }

/* ===============================
   DESKTOP CONTENT (Quartz sections, links, etc.)
   (retained from your original)
   =============================== */

/* PC display   PC    PC    PC    PC    PC    PC    PC    PC    PC    PC display */
#bally-qz {scroll-margin-top: 110px; }
div.Quartz {position:relative;top:250px;left:0px; width:100%;height:auto;display:flex;flex-wrap:wrap;}
img.sep {width:95%; height:auto; border:0; }
div.QzCntL  {width:50%; height:auto; display:flex;flex-wrap:wrap;}
div.QzCntR  {width:50%; height:auto; display:flex;flex-wrap:wrap;}
div.Color {width:100%; height:auto; padding-top:45px; padding-bottom:15px; padding-left:25px; padding-right:25px; font-size:22px; color:#303030;font-weight:bold;font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }
a.B:link {text-decoration:none;font-size:20px;color:#303030;font-family="arial";font-weight:bold;}
a.B:active {color:#806060;}
a.B:visited {text-decoration:none;color:#303030;font-weight:bold;}
a.B:hover {text-decoration:underline;color:#303030;font-weight:bold;}

a.inqa {text-decoration:underline; font-size:20px;color:#0000c0;font-weight:bold; font-family: "Arial", "Helvetica", "sans-serif";}
a.inqa:active {color:#0000c0;}
a.inqa:visited {color:#0000c0;}
a.inqa:hover{color:#0000f0; }
div.Lft {width:42.5%; padding-left:0.5%; height:auto ;}
div.Rgt {width:57.5%; padding-right:1%; height:auto ;}
img.detail {position:relative; width:100%; height:auto; border:0; }
img.slab {position:relative; width:100%; height:auto; border:0; }
div.Prom {width:100%; height:auto; padding-top:50px; padding-bottom:10px; padding-left:7.5%; padding-right:7.5%; font-size:22px;color:#606060;font-weight:normal; font-style:standard ; font-family: "Arial", "Helvetica", "sans-serif"; }
font.ProB {font-size:20px;color:#606060;font-weight:bold; font-style:standard ; font-family: "Arial", "Helvetica", "sans-serif"; }

/* ===============================
   MOBILE (<= 768px) – fixed and tidy
   =============================== */
@media only screen and (max-width: 768px) {

  /* swap to the mobile hero photo */
  .hero-img--desktop { display: none; }
  .hero-img--mobile  { display: block; }

  /* nudge overlay panels for phones */
  .slogan { left: 10px; top: 10px; font-size: 14px; }
  .Bally  { right: 10px; top: 8px; }
  .CrtCnt { right: 10px; left: 10px; bottom: 10px; justify-content: center; flex-wrap: wrap; }

  .BaLogo { max-width: 140px; }
  .CrtCnt .cert { width: 60px; }

  /* your mobile content layout (retained) */
  #bally-qz {scroll-margin-top: 70px; }
  div.Quartz {position:relative;top:100px;left:0px;width:100%;height:auto;display:flex;flex-wrap:wrap;}
  img.sep {width:100%; height:auto; border:0; }
  div.QzCntL  {width:100%; height:auto; display:flex;flex-wrap:wrap;}
  div.QzCntR  {width:100%; height:auto; display:flex;flex-wrap:wrap;}
  div.Color {width:100%; height:auto; padding-top:3%; padding-bottom:0.5%; font-size:10px;color:#606060;font-weight:bold;
             font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }
  a.inqa {font-size:8px;color:#0000c0;font-weight:bold;text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif";}
  a.inqa:hover {color:#0000f0; }
  div.Lft {width:42.5%; padding-left:0.5%; height:auto ; }
  div.Rgt {width:57.5%; padding-right:1%; height:auto ; }
  a.B:link {text-decoration:none;font-size:10px;color:#606060; font-weight:bold; font-family: "Arial", "Helvetica", "sans-serif";}
  a.B:active {color:#806060;}
  a.B:visited {text-decoration:none;color:#606060;font-weight:bold;}
  a.B:hover{text-decoration:underline;color:#606060;font-weight:bold;}

  div.Prom  {width:100%; height:auto; padding-top:3%; padding-bottom:0.5%; font-size:9px; color:#606060;font-weight:normal;
  font-style:normal; font-family: "Arial", "Helvetica", "sans-serif"; }
  font.ProB  {font-size:10px; color:#606060;font-weight:bold; font-style:normal; font-family: "Arial", "Helvetica", "sans-serif"; }
}

/* ===============================
   END
   =============================== */