/* Changed .container to be wide as possible

Use 6 July 24 https://www.freeformatter.com/css-minifier.html#before-output

7 July 24 removed background color of .container so it's all just white 
23 sept 24 this is nicer and hamburger works properly and drop downs look neater and perform better formatted.
29 sept 24 added btn7 for shield logo

14 Oct  24 latest from chatgpt to make it responsive with center column of content showing as much as possible. It shows well on apps and once uploaded.

11Mch25 added min-width: 40px; to dropdown-content to try this for all pages to make white rectangle smaller

27 Apr 25 I copied across some code from wide-perfect-23sept24.css because I compared wide-perfect-23sept24-16apr25 with wide-perfect-23sept24.css 

Now renamimg this current fixed up new version as wide-perfect-23sept24.css
Need to test this a lot and ask chat to test 

27th at 7.30 pm This is edited and fixed by chat
29 Apr 25now called wide-perfect-29apr25-new

6 Jne 25 Trying to fix scrolling on all screens
This is no 2 to delay scroll appearing til after the start to scroll.
Scroll names at botton are same as in wide-perfect-29apr25-new.css
Use .container to reduce gap below green menu
8 Jne 25 changed to 30 px
27jne25 editing only row and col

4 Jly 25 Below is the fully cleaned and updated version of your global stylesheet, 
still named wide-perfect-29apr25-new.css. 
It removes legacy grid/column float styles and older .row, .grid, .unit, and .col-* systems, 
replacing them with your new column and flex structure. 
Your button styles, menu, footer, and scroll-to-top features are preserved.

✅ Final Cleaned Global CSS: from wide-perfect-29apr25-new.css
(Wed 3 July 2025 – 11:50 PM AEST)
called new-with-flex-column-4jly25.css

6 Jl 25 Use this css in hypnoBus and GregHypno. Have added new 4 parts @media for topnav menu fix

new Global current 6 Jly 25
10 Jly 25 in container changed it to 
margin: 65px auto 0 auto; for all normal pages with no progress bar

11 Jly 25 added column2 clearfix from old css for associations 
right at very bottom which is the only way it works.
flex-column-font-btn-11Jly25 is new name.
Replacing all btns from old css which are correct.
13 Jly 25 this is flex-column-font-btn-13Jly25 which has new simlified flex and column css
13 Jly 25 this is 13 Jly 25-2. The very latest from chat 6 pm.
Seems ok but test further.
Removed .column-section.one-column.small-box from Global.
19 Jly 25 11 pm new media queries to reduce font for iphone landscape
23 Jly 25 now called flex-column-13Jly25.css
Comments added to Column and text-section to explain more.

10 Oct 25 added .red-darker
added .video-wrapper at bottom to center all videos

21 Oct 25 added 
.fancy-divider-1 {
  display: flex;
  justify-content: center;
  margin: 1.5em 0;
}
and removing from pages

12 Nov 25 added some code to .flex-buttons-wrapper
 to round corners and shadow.
 But past-life-age-regression has unique shadow in it's Page:
 box-shadow: 3px 4px 4px grey;

 22 Nov 25 Rounded-corner content boxes to match flex-buttons 
inside <div class="column-section one-column">

*/


html {
  scroll-padding-top: 50px;
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 100%;
  background-color: white;
  color: #017ea6;
}

h1 {
  font-size: 2.5em;
  text-shadow: 2px 1px 5px #afafaf;
}

h2 {
  font-size: 1.875em;
  text-shadow: 2px 1px 5px #afafaf;
}

h3 {
  font-size: 1.5em;
  /* font-weight: 400; */
  text-shadow: 2px 1px 5px #afafaf;
}

h4 {
  font-size: 0.875em;
  font-weight: 400;
}

h5 {
  font-size: 0.75em;
  font-weight: 400;
}

h6 {
  font-size: 0.63em;
  font-weight: 400;
}

p {
  font-size: 1em;
}

.center {
  text-align: center;
}

.center2 {
  margin: auto;
  width: 60%;
}

.right {
  float: right;
}

.left {
  float: left;
}

.container {
  max-width: 95%;
  /* margin: 30px auto 0 auto; */
  margin: 65px auto 0 auto;
  /* Adds 50px or 75 px top margin */
  padding: 0 1.5rem;
  /* background-color: white; */
}

/* change color of hover text in all buttons and links not footer*/
a:hover {
  color: #73c4dd;
  text-shadow: none;
}

.red {
  color: red;
}

.red-darker {
  color: #c1272d;
  /* refined, professional red */
}

.medium {
  display: block;
  margin-bottom: 1px;
}

.large {
  display: block;
  margin-bottom: 30px;
}

/* 13 Jly 25 6 pm */
/* === Shared column section base for all column layouts and needed === */
.column-section {
  margin-bottom: 40px;
  padding: 30px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}

/* === Centered inner content 
(used in all column types) only does two things:
Centers the block horizontally (via margin: 0 auto)
Aligns text to the left (probably default anyway)
When is it useful?
When used with a fixed width or 
max-width element inside, the margin: 0 auto centers that child.
If your .text-section or content inside 
.centered-content has no width or padding
 of its own, this might appear to do "nothing".
=== */
.centered-content {
  margin: 0 auto;
  text-align: left;
}

/* === One-column layout (white box) 
the override for just 1-column layouts === */
.column-section.one-column {
  max-width: 600px;
  margin: 40px auto;
  padding: 30px;
}

/* === Two-column layout === */
.column-section.two-columns {
  column-count: 2;
  column-width: 300px;
  column-gap: 30px;
  column-rule: 1px solid #ddd;
}

/* === Three-column layout === */
.column-section.three-columns {
  column-count: 3;
  column-width: 250px;
  column-gap: 25px;
  column-rule: 1px dashed #bbb;
}

/* === Four-column layout === */
.column-section.four-columns {
  column-count: 4;
  column-width: 200px;
  column-gap: 20px;
  column-rule: 1px dotted #aaa;
}

/* === Responsive column fallback === */
@media screen and (max-width: 768px) {

  .column-section.two-columns,
  .column-section.three-columns,
  .column-section.four-columns {
    column-count: 1;
    column-width: 100%;
  }
}

/* === Flex Button Wrapper === */
.flex-buttons-wrapper {
  padding: 14px 16px;
  margin-bottom: 40px;

  /* Soft white panel styling */
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 12px;
  /* rounded corners like buttons */

  box-shadow: 3px 4px 6px rgba(80, 80, 80, 0.30);
  /* 12 Nov 25 this is only for past life dark page: 
  box-shadow: 3px 4px 4px grey; */
}


.flex-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.flex-buttons>* {
  break-inside: avoid;
}

/* Optional flex header styling */
.flex-buttons-wrapper h2 {
  text-align: center;
  color: #017ea6;
  margin-bottom: 20px;
}

/* Responsive button alignment */
@media screen and (max-width: 600px) {
  .flex-buttons {
    justify-content: center;
  }

  .flex-buttons button {
    flex: none;
    width: auto;
  }
}

/* Top menu bar */
.topnav {
  overflow: hidden;
  background-color: #017ea6;
  display: flex;
  justify-content: center;
  /* font-size: 1em; */
  /* padding: 8px 12px; */
  z-index: 10000;
}

.topnav a,
.topnav .dropbtn {
  /* padding: 8px 12px; */
  display: inline-block;
  text-align: center;
  text-decoration: none;
  /* font-size: 1em; */
  line-height: 1.5;
  color: #f2f2f2;
  background-color: inherit;
  border: none;
  outline: none;
}

.topnav .icon {
  display: none;
}

.topnav.responsive {
  display: block;
  background-color: #017ea6;
  overflow: visible;
}

.topnav .no-link {
  background-color: #1166ed;
  color: white;
  cursor: default;
  pointer-events: none;
  font-weight: 500;
}

.topnav a:hover,
.topnav .dropbtn:hover {
  background-color: #87c2d4;
  color: white;
}

/* Dropdown menu */
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 40px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 10000;
}

.dropdown-content a {
  float: none;
  color: mediumblue;
  padding: 6px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: gold;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Top menu responsive */
@media screen and (max-width: 600px) {

  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a,
  .topnav.responsive .dropdown,
  .topnav.responsive .dropdown .dropbtn {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav.responsive .dropdown-content {
    position: relative;
  }

  .topnav.responsive .no-link {
    justify-content: flex-start;
    align-items: center;
    /* padding: 8px 14px; */
    height: auto;
  }

  .topnav {
    display: block;
    /* font-size: 0.65em; */
    /* font-size: 1em; */
    /* ⬅️6 Jl 25 this is key for reducing menu text size */
  }
}

.topnav a,
.topnav .dropbtn,
.dropdown-content a,
.topnav.responsive a,
.topnav.responsive .dropbtn {
  /* font-size: 0.77em; good */
  font-size: 0.77em;
  /* padding: 8px 12px; */
  /* padding: 8px 6px; good */
  padding: 8px 7px;
}

/* Button styles */

/*Vacancy*/
.btn1 {
  display: inline-block;
  padding: 8px 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: white;
  background-color: #4caf50;
  border: 0;
  border-radius: 6px;
  box-shadow: 3px 4px 4px grey;
  text-shadow: 1px 1px 1px black;
  margin: 4px 2px;
}

.btn1:hover {
  background-color: #367c39;
  color: white;
}

.btn1:active {
  background-color: coral;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/* wa.link QR button with WhatsApp logo(icon) and dropshadow - is similar to btn5*/
.btn2 {
  display: inline-block;
  padding: 2px 4px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: white;
  border: 0;
  border-radius: 0;
  box-shadow: 3px 4px 4px grey;
  text-shadow: 1px 1px 1px black;
  margin: 4px 2px;
}

.btn2:hover {
  background-color: green;
  color: white;
}

.btn2:active {
  /* background-color: coral; */
  /* background-color: green; */
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/*small blue buttons*/
.btn3 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #5894f3;
  border: 0;
  border-radius: 6px;
  box-shadow: 3px 4px 4px grey;
  text-shadow: 1px 1px 1px black;
  margin: 4px 2px;
}

.btn3:hover {
  background-color: #0d51bf;
  color: white;
}

.btn3:active {
  background-color: #25d045;
  box-shadow: 0 5px #5a8cdb;
  transform: translateY(4px);
}

.btn3.clicked {
  background-color: #93cedf;
  color: black;
  text-shadow: 2px 2px 10px black;
}

/*btn4 for WhatsApp qr code for Contact Us page*/
.btn4 {
  display: inline-block;
  padding: 8px 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: white;
  background-color: #6cf;
  border: 0;
  border-radius: 6px;
  box-shadow: 3px 4px 4px grey;
  text-shadow: 1px 1px 1px black;

  /*	move whole thing sideways*/
  margin: 4px 2px;
}

.btn4:hover {
  background-color: #0099e6;
  color: white;
}

.btn4:active {
  background-color: coral;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/*long WhatsApp button with their logo and dropshadow*/
.btn5 {
  display: inline-block;
  padding: 2px 4px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: white;
  border: 0;
  border-radius: 12px;
  box-shadow: 3px 4px 4px grey;
  text-shadow: 1px 1px 1px black;
  margin: 4px 2px;
}

.btn5:hover {
  background-color: green;
  color: white;
}

.btn5:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/*small purple buttons*/
.btn6 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #6b00b3;
  border: 0;
  border-radius: 6px;
  box-shadow: 3px 4px 4px grey;
  text-shadow: 1px 1px 1px black;
  margin: 4px 2px;
}

.btn6:hover {
  background-color: gold;
  color: red;
}

.btn6:active {
  background-color: coral;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/* 4 Oct from small blue buttons changed colorsfor new shield logo */
.btn7 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: whitesmoke;
  border: 0;
  border-radius: 6px;
  box-shadow: 3px 4px 4px grey;
  text-shadow: 1px 1px 1px black;
  margin: 4px 2px;
}

.btn7:hover {
  background-color: #017ea6;
  color: white;
}

.btn7:active {
  background-color: #017ea6;
  box-shadow: 0 5px #5a8cdb;
  transform: translateY(4px);
}

.btn7.clicked {
  background-color: #93cedf;
  color: black;
  text-shadow: 2px 2px 10px black;
}

/* Scroll to Top */
@keyframes scrollBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

#scrollBtn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: block;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 9999;
  cursor: pointer;
  animation: scrollBounce 2s infinite ease-in-out;
  color: #017ea6;
}

#scrollBtn:hover {
  color: #00cc00;
}

.scroll-icon {
  width: 32px;
  height: 32px;
  display: block;
  pointer-events: none;
}

@media screen and (max-width: 600px) {
  .scroll-icon {
    width: 26px;
    height: 26px;
  }
}

@media screen and (min-width: 601px) and (max-width: 1100px) {
  .scroll-icon {
    width: 30px;
    height: 30px;
  }
}

/* Fixed Nav + Footer Layout */
.fixed-navbar-wrapper {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.fixed-navbar-bar {
  max-width: 88%;
  margin: 0 auto;
  background-color: #017ea6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.outer-bar {
  max-width: 90%;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .outer-bar {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* 20 Jul 2025 – .text-section with Responsive Headings
 Controls font size, scaling, heading appearance */

.text-section {
  font-size: 1em;
  line-height: 1.6em;
}

.text-section h1 {
  font-size: 2.5em;
}

.text-section h2 {
  font-size: 1.875em;
}

.text-section h3 {
  font-size: 1.5em;
}

.text-section h4 {
  font-size: 0.875em;
}

.text-section h5 {
  font-size: 0.75em;
}


.nowrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* Responsive adjustment for smaller screens or landscape */
/* @media screen and (min-width: 600px) and (max-width: 900px),
screen and (max-height: 450px) and (orientation: landscape) {
  .text-section {
    font-size: 0.85em;
    line-height: 1.5em;
  }

  .text-section * {
    font-size: inherit;
    line-height: inherit;
  }

  .text-section h1 {
    font-size: 1.8em;
  }

  .text-section h2 {
    font-size: 1.5em;
  }

  .text-section h3 {
    font-size: 1.4em;
  }

  .text-section h4 {
    font-size: 1.1em;
  }

  .text-section h5 {
    font-size: 0.95em;
  }
} */


/* 22 Nov 25 Rounded-corner content boxes to match flex-buttons 
inside <div class="column-section one-column"> */
.column-section.one-column {
  border-radius: 12px;
  box-shadow: 3px 4px 6px rgba(80, 80, 80, 0.30);
}





/* Footer */
.footer-distributed {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  width: 100%;
  text-align: left;
  font: normal 16px sans-serif;
  padding: 3px 10px;
  margin-top: 70px;
  background-color: #017ea6;
}

.footer-distributed .footer-left p {
  color: #8f9296;
  font-size: 14px;
  margin: 0;
}

.footer-distributed p.footer-links {
  font-size: 17px;
  font-weight: normal;
  color: #fff;
  margin: 0 0 1px;
  padding: 4px 1px;
  text-align: center;
}

.footer-distributed p.footer-links a {
  display: inline-block;
  line-height: 1.8;
  text-decoration: none;
  color: inherit;
}

p.footer-links a:hover {
  color: #73c4dd;
}

.footer-distributed .footer-right {
  float: right;
  margin-top: 6px;
  max-width: 180px;
}

.footer-distributed .footer-right a {
  display: inline-block;
  width: 35px;
  height: 35px;
  border-radius: 2px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-left: 3px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Add padding BETWEEN each column */
.clearfix,
.clearfix>.column1 {
  padding: 5px;
}

.column2 {
  float: left;
  width: 20%;
}

@media screen and (max-width: 900px) {
  .column2 {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column2 {
    width: 100%;
  }
}

/* Responsive layout - makes the logo columns stack on top of each other instead of next to each other */
/* stack the images vertically on screens that are 500px wide or less: Copied from bottom style to here 13Feb22*/

/*This could be column1 not 2  12Oct 22*/
@media screen and (max-width: 400px) {
  .column2 {
    width: 100%;
  }
}

.column2 {
  float: left;
  width: 20%;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Add padding BETWEEN each column */
.clearfix,
.clearfix>.column1 {
  padding: 5px;
}

@media screen and (max-width: 900px) {
  .column2 {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column2 {
    width: 100%;
  }
}

/* Responsive layout - makes the logo columns stack on top of each other instead of next to each other */
/* stack the images vertically on screens that are 500px wide or less: Copied from bottom style to here 13Feb22*/

/*This could be column1 not 2  12Oct 22*/
@media screen and (max-width: 400px) {
  .column2 {
    width: 100%;
  }
}

/* ─── Tablet Center Column Fix (601px–768px) ─── */
@media screen and (min-width: 601px) and (max-width: 768px) {
  .spaced-list h3 {
    margin: 0.5em auto;
  }
}

/* ─── Spaced List Block ─── */
.spaced-list {
  text-align: center;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.spaced-list h3 {
  display: block;
  text-align: center;
  margin: 0.5em auto;
  width: fit-content;
}

.spaced-list ul {
  list-style: disc;
  padding: 0;
  margin: 0 auto;
}

.spaced-list li {
  margin: 0 auto 25px auto;
  line-height: 1.3;
  text-align: left;
  max-width: 80%;
}

/* iPads and Medium Screens: More spacing between list items */
@media only screen and (max-width: 1024px) {
  .spaced-list li {
    margin-bottom: 30px;
  }
}

/* Enables smooth scrolling behavior for anchor links across all devices
      
Quick Adjustment Guide:
If the scrolled-to heading appears too low, increase height and margin-top together.

If it appears too high, decrease both values together.

Always keep height and margin-top values equal but opposite.
*/
/* ───── DEFAULT (Mobile First) ───── */
/* Applies to devices up to 600px wide (e.g., most phones) */
/* The fixed menu + progress bar are taller here, so we use more offset */
.scroll-target::before {
  content: "";
  display: block;
  height: 200px;
  /* Total space added before the element */
  margin-top: -200px;
  /* Negative margin pulls content back up to align visually */
  /* Adjust this number up or down if the scroll stops too early or too late on phones */
}

/* ───── TABLETS (Portrait & Landscape) ───── */
/* Applies to devices between 601px and 1024px wide (e.g., iPads, smaller laptops) */
/* Typically less menu height, so less offset is needed */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .scroll-target::before {
    height: 100px;
    margin-top: -100px;
    /* Adjust this value for scroll alignment on tablets */
  }
}

/* ───── DESKTOP & LARGE SCREENS ───── */
/* Applies to devices wider than 1024px (e.g., desktops, large laptops) */
/* The fixed header is shorter here, so minimal scroll offset is needed */
@media screen and (min-width: 1025px) {
  .scroll-target::before {
    height: 85px;
    margin-top: -85px;
    /* Fine-tune this for scroll stop position on desktop */
  }
}

/* 10 Oct 25 needed for all videos now to center */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  max-width: 900px;
  margin: 0 auto;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


.fancy-divider-1 {
  display: flex;
  /* consistent centering */
  justify-content: center;
  /* centers horizontally */
  margin: 1.5em 0;
  /* reliable space above and below */
}