/* -------------------------------------- 
    COLOR HEADINGS: #C49D52 [GOLD]
    COLOR BACKGROUND: #0B2838 [NAVY BLUE]
    COLOR FONT: #333 [BLACK]
    COLOR GOLD ON BLUE: #CEA860 [GOLD]
    ROOT FONT-SIZE: 16px
    SITE FONT: Roboto-Regular
    HEADER FONTS: Montserrat & Raleway
    REM: 1rem = 16px
    REM FOR FONT-SIZE X: REM = X/16PX
    EM: 1em = 16px (for padding/margins)
    PADDING: TOP, RIGHT, BOTTOM, LEFT
 -------------------------------------- */

/* ------------------------------------ */
/* FONTS                                */
/* ------------------------------------ */

/* PRELOAD */
@font-face  {
    font-family: "Roboto-Regular";
    src:  url(/support-files/fonts/Roboto-Regular.woff);
    font-display:  swap;
}

@font-face {
    font-family: "Raleway-Regular";
    src: url(/support-files/fonts/Raleway-Regular.woff);
    font-display: swap;
}

@font-face {
    font-family: "Montserrat-Regular";
    src: url(/support-files/fonts/Montserrat-Regular.woff);
    font-display: swap;
}

@font-face {
    font-family: "Oswald-Regular";
    src: url(/support-files/fonts/Oswald-Regular.woff);
    font-display: swap;
}

@font-face {
    font-family: "Oswald-Medium";
    src: url(/support-files/fonts/Oswald-Medium.woff);
    font-display: swap;
}

/* NORMAL LOAD */

@font-face  {
    font-family: "Raleway-SemiBold";
    src:  url(/support-files/fonts/Raleway-SemiBold.woff);
    font-display:  swap;
}

@font-face  {
    font-family:  "Roboto-Medium";
    src:  url(/support-files/fonts/Roboto-Medium.woff);
    font-display:  swap;
}

@font-face  {
    font-family: "LibreBaskerville-Regular";
    src:  url(/support-files/fonts/LibreBaskerville-Regular.woff);
    font-display:  swap;
}

@font-face  {
    font-family: "AbrilFatface-Regular";
    src:  url(/support-files/fonts/AbrilFatface-Regular.woff);
    font-display:  swap;
}

@font-face {
    font-family: "Manrope-Medium";
    src: url(/support-files/fonts/Manrope-Medium.woff);
    font-display: swap;
}

@font-face {
    font-family: "Manrope-Bold";
    src: url(/support-files/fonts/Manrope-Bold.woff);
    font-display: swap;
}


/* ------------------------------------ */
/* BASIC SET-UP                         */
/* ------------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.speed {
    text-rendering: optimizeSpeed;
}

.legibility {
    text-rendering: optimizeLegibility;
}

html, body{
    background-color:#fcfcfc;
    overflow-x:hidden;
    scroll-behavior:smooth;
    scroll-padding-top:85px;
    margin:0;
    min-height:100vh;
}

body{
    display:flex;
    flex-direction:column;
}

.page-content{
    flex:1;
}

footer{
    margin-top: auto;
}

/* used for floating elements */
.clearfix  {
    zoom:  1;
}

.clearfix:after  {
    content:  ".";
    clear:  both;
    display:  block;
    height:  0;
    visibility:  hidden;
}

/* Absolutely nuke any accidental double gutter sitewide */
#container{ scrollbar-gutter: auto !important; }
html, body { overflow-y: auto; }
nav, .menu, .drop-down { overflow: visible !important; }

/* ------------------------------------ */
/* TYPOGRAPHY FONT-SIZE REFERENCE       */
/* ------------------------------------ */

:root  {
    font-size:  16px;
    line-height: 2em;
    color: #333;
    font-family: "Roboto-Regular", sans-serif;
}

/* Responsive Adjustments (1280px and below) */
@media (max-width: 1280px) {
    :root  {
        font-size:  17px;
        line-height: 2em;
        color: #333;
        font-family: "Roboto-Regular", sans-serif;
}
}

/* ------------------------------------ */
/* SITE DIMENSIONS                      */
/* ------------------------------------ */

.site-container {
    max-width: 1680px; /* Slightly smaller for better balance */
    width: 95%; /* Adapts well to smaller screens */
    padding: 0 20px;
    margin: 0 auto;
    margin-top: 110px;
}

.main-content {
    max-width: 1680px;
    width: 95%; /* Matches container proportionally */
    margin: 0 auto;
}

/* Responsive Adjustments (768px and below) */
@media (max-width: 768px) {
    .site-container, .main-content {
        width: 98%; /* Full width on small devices */
        padding: 0 10px; /* Add minimal padding */
        margin-left: 1%;
    }
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    .site-container {
        width: 98%; 
        margin-left: 1%; /* Prevents going to edge of screen */
        margin-top: 90px;
    }
}

/* ------------------------------------ */
/* MAIN TYPOGRAPHY                      */
/* ------------------------------------ */

/* Golden Ratio adjusted */

h1, h2, h3, h4  {
    color:  #333;
    font-family: "Oswald-Regular";
    letter-spacing: 0.08em;
    font-weight: normal;
    text-transform:  uppercase;
}

h1 {
    font-size: 1.8rem; 
    line-height: 2.65rem; 
    text-align: center;
}

h2 {
    font-size: 1.2rem; 
    line-height: 2rem;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
}

h3 {
    font-size: 1.2rem; 
    line-height: 1.6rem;
    text-align: center;
}

h4 {
    font-size: 1rem; 
    line-height: 1.5rem;
    text-align: center;
}

p  {
    hyphens:  auto;
    font-size: 1rem; /* Matches body text size */
    text-align:  justify;
    padding-bottom: 25px;
}

p i {
    font-size: 1em;
    color: #333;
}

p a {
    color: #0B2838;
}

.gold-text {
    color: #C49D52;
}


/* index page headings */
.index-headings h1 {
    font-family: "Montserrat-Regular";
    width: 60%;
    text-align: center;
    margin: 0 auto;
    font-size: 1.3em;
    color: #444 !important;
    margin-top: 20px;
}

.index-headings h1 span {
    color: #C49D52;
}

.index-headings h2 {
    font-family: "Montserrat-Regular";
    letter-spacing: 0.02em;
    width: 40%;
    text-align: center;
    margin: 0 auto;
    font-size: 1.3em;
    color: #444 !important;
    margin-top: 5px;
}

.index-headings h3 {    
    margin: 2em 0 0 0;
    color: #444;
    font-size: 1.1em;
}

.sub-heading-instructions,
.sub-heading-new-note {
    font-size: 0.9em;
    line-height: 1.6em;
    font-family: "Oswald-Regular";
    text-align: center;
    margin-left: -2px;
}

.sub-heading-instructions {
        margin: -8px 0;   
}

.sub-heading-new-note {
        margin: 30px 0;   
}

.index-home-world h1 {
    margin-bottom: 15px;
    line-height: 1.6em;
}

.index-if-text h2 {
    line-height: 1.6em;
    width: 60%;
    margin-top: 15px;
}

.index-if-text h2 span {
    color: #C49D52;
}

/* Responsive Adjustments (768px and below) */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem; /* Slightly smaller for smaller screens */
        line-height: 2.2rem;
    }
    h2 {
        font-size: 1.1rem;
        line-height: 1.8rem;
    }
    h3 {
        font-size: 1rem;
        line-height: 1.6rem;
    }
    p {
        text-align: left; /* Align left for better readability */
    }
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    .index-headings h1 {
        width: 95%;
        margin: 0 auto;
        font-size: 1.05em !important;
        line-height: 1.5em;
        margin-top: 40px;
    }
    
    .index-headings h2 {
        width: 85%;
        margin: 0 auto;
        font-size: 1.05em !important;
        line-height: 1.5em;
        margin-top: 5px;    
    }

    .index-headings h3 {
        width: 85%;
        margin: 0 auto;
        font-size: 1em !important;
        line-height: 1.5em;
        margin-top: 30px;      
        margin-bottom: 15px;
    }
    
    .index-home-world h1 {
    margin-top: 0;
    margin-bottom:0;
}
    
    .index-if-text h2 {
        font-size: 0.95em !important;
        margin-top: 20px;
        margin-bottom: 20px;
        line-height: 1.7em;
    }
    
    
    h1 {
        font-size: 1.6rem !important; /* Adjust for very small screens */
        line-height: 2rem;
    }
    h2 {
        font-size: 1.1em !important;
        line-height: 1.6em;
    }
    p {
        font-size: 1.1rem;
        line-height: 1.8rem;
        text-align: left;
    }
    
    .sub-heading-new-note {
        font-size: 0.9em;
    }
    
    .sub-heading-instructions {
        font-size: 0.85em;
        margin-left: 0 !important;
        margin-top: -10px;
    }
}

/* ------------------------------------ */
/* FULL COVER PAGE                      */
/* ------------------------------------ */

/* General container styling for the cover page */
/* HERO must not be flex-shrunk by the body flex column */
.cover-page{
  flex: 0 0 auto;         /* key line */
  width: 100%;

  min-height: 100vh;      /* fallback */
  min-height: 100svh;     /* modern (mobile safe) */
  height: 100vh;
  height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #0B2838;
}


/* Title styling */
.cover-title {
    font-family: "Raleway-Regular";
    font-size: 2em;
    color: #c49d52; /* Gold color for title */
    text-align: center;
    margin-bottom: 10px;
    padding-top: 50px;
    letter-spacing: 0.15em;
    animation: fadeIn 1.5s ease-in-out forwards;
    opacity: 0; /* Start hidden */
    animation-delay: 0.5s; /* Staggered fade-in */    
}

/* Subtitle styling */
.cover-subtitle {
    font-family: "Raleway-Regular";
    font-size: 1.4em;
    color: #c49d52;
    text-align: center;
    max-width: 800px;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
    animation: fadeIn 1.5s ease-in-out forwards;
    opacity: 0; /* Start hidden */
    animation-delay: 1s; /* Staggered fade-in */
}

/* Button Styling */
.cover-button, .cover-button:visited {
    background-color: #C49D52; /* Gold color */
    color: #fff; /* White text */
    padding: 12px 12px;
    font-size: 0.8em;
    font-family: "Montserrat-Regular", sans-serif;
    font-weight: normal;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
    margin: 20px auto; /* Center the button */
    display: block;
}

.cover-button:hover {
    background-color: #b6863d; /* Slightly darker gold for hover */
}

.cover-button a {
    color: #fff; /* Ensure white text for the link */
    text-decoration: none; /* Remove underline */
    display: block; /* Make the entire button clickable */
}

.cover-button a:visited {
    color: #fff; /* Keep the visited state text white */
}

/* Image styling */
.cover-image {
    max-width: 40%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 30px;
}

/* Text content container styling */
.cover-text-container {
    text-align: center;
    padding: 20px;
    background-color: #0B2838;
    border-radius: 10px;
    max-width: 95%;
    margin: 0 auto;
    color: #ffffff;
}

/* Down Arrow Styling */
.down-arrow {
    font-size: 1.5em;
    color: #edc77c; /* Gold color for the arrow */
    text-decoration: none;
}

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

/* Apply fade-in animation to title and subtitle */
.cover-title, .cover-subtitle {
    animation: fadeIn 1.5s ease-in-out forwards;
    opacity: 0; /* Start hidden */
}

/* Staggered fade-in for subtitle */
.cover-subtitle {
    animation-delay: 0.5s; /* Subtitle fades in after the title */
}

#site-start  {
    text-align:  center;
    margin-top: 10em;
}

/* Responsive Adjustments (1024px and below) */
@media (max-width: 1024px) {
    .header-container h1 {
        font-size: 1.8em; /* Slightly smaller on tablets */
    }

    .header-container h2 {
        font-size: 1.2em;
    }
}

/* Responsive Adjustments (768px and below) */
@media (max-width: 768px) {
    .header-container {
        padding: 15px 0 10px 0;
        margin-top: 25%; /* Center content better on smaller screens */
    }

    .header-container h1 {
        font-size: 1.6em; /* Smaller on mobile */
        white-space: normal; /* Allow text to wrap */
    }

    .header-container h2 {
        font-size: 1.1em;
        white-space: normal; /* Allow text to wrap */
    }

    .down-arrow {
        font-size: 1em;
        margin-top: 15px;
    }
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    .cover-page {
        background-attachment: scroll;
        width: 100%;
        background-position: 60% center; /* Shift the image a bit to the right */
    }
    
    .cover-title {
        font-size: 1.3rem !important;
        line-height: 1.6rem;
        width: 110%;
        margin-left: -5%;
        font-family: "Raleway-SemiBold";
        font-weight: normal;
    }
    
    .cover-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.5rem;
        width: 110%;
        margin-left: -5%;
        font-family: "Raleway-SemiBold";
        font-weight: normal;
        padding-top: 10px;
    }
    
    .cover-image {
        max-width: 100%;
    }
    
    .header-container {
        padding: 10px 0;
        margin-top: 120%; /* Adjusted for smaller screens */
    }
    .cover-button {
        font-size: 1em;
    }
    .down-arrow {
        font-size: 1em;
    }
} 

/* ------------------------------------ */
/* DIVIDER LINE WITH CENTRAL ICON LINES */
/* ------------------------------------ */
.line-icon {
    text-align: center;
    background-position: center center;
    color: #333;
}

.line-icon::before, .line-icon::after {
    width: 43%;
    height: 1px;
    border-top: 1px dotted #333;
    display: inline-block;
    content:'';
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 30px;
}

/* ------------------------------------ */
/* BASIC GRID LAYOUT                    */
/* ------------------------------------ */

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  width: 70%;
  margin: 25px auto;
}

.grid-container > * {
  flex: 0 0 198px; /* set this to your card width */
}

@media (max-width: 900px) and (min-width: 481px) {
  .grid-container .adventure-of-i-card{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 210px;   /* keeps same card size */
    width: 100%;
  }
}

.grid-container.has-open .grid-item:not(.is-open){
  opacity: 0.6;
  filter: grayscale(0.3);
  pointer-events: auto;
}

.grid-item{
  align-self: start;    /* extra safety */
  box-shadow:0 4px 10px rgba(0,0,0,.1);    
  border-radius: 0 0 8px 8px;    
}

.grid-item.is-open{
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}


/* Image wrapper (square) */
.grid-item__image{ position:relative; width:100%; padding-bottom:100%; background:#f0f0f0; }
.grid-item__image img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius: 8px 8px 0 0;
}

.grid-item__title{
  position:absolute; top:0; left:0; width:100%;
  background:rgba(51,51,51,.3); color:#fcfcfc; text-align:center;
  font-family:"Oswald-Regular"; letter-spacing:.08em; font-size:.9em; line-height:1.3em;
  padding:10px 8px;
  text-transform: uppercase;
  border-radius: 8px 8px 0 0;
}

.grid-item h4 {
    font-size: 0.85em; 
    color: #C49D52;
    padding-top: 10px;
}

/* Heading Styling */
.grid-item h3 {
    font-size: 0.9em;
    margin-top: 10px;
    padding-bottom: 5px;
}

/* Icon Row Styling */
.icon-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    border-radius: 8px;
    color: #C49D52;
    text-align: center;
    margin: 0 auto;
    margin-top: 10px;
}

/* Icon styling */
.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
}

.icon i {
    font-size: 1.4em;
    padding-top: 0.7em;
    color: #C49D52;
}

.icon p {
    font-size: 0.65em;
    font-family: "Montserrat-Regular", sans-serif;
    color: #C49D52;
    margin: 0 auto;
    margin-bottom: -25px;    
}

/* Category content styling (initially hidden) */
.category-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease, opacity 0.8s ease;
    margin-top: 0;
}

/* Show category-content when .open class is added */
.grid-item.open .category-content {
    opacity: 1;
    max-height: 500px; /* Adjust based on expected content height */
}

/* Category text styling */
.category-text {
    font-size: 0.9em;
    line-height: 1.7em;
    text-align: left;
    margin: 0 auto;
    padding-top: 5px;
    margin-bottom: -20px;
    width: 90%;
}

/* Toggle button styling */
.toggle-button {
    display: block;
    font-family: "Montserrat-Regular", sans-serif;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8em;
    color: #333;
    transition: color 0.4s ease;
    padding: 10px 0 10px 0;
    text-align: center !important;
    margin: 0 auto;
}

.toggle-button i {
    padding-left: 5px;
    padding-top: 3px;
}

.toggle-button:hover {
    color: #555;
} 

/* adjust selectors to your actual expanded content wrapper */
.grid-item .toggle-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* On desktop you can keep it normal if you prefer */
@media (min-width: 900px){
  .grid-item.is-open .toggle-button{
    position: static;
    box-shadow: none;
  }
}

/* Responsive Adjustments (1024px and below) */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
      .grid-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        justify-items: center !important;
      }

      .grid-container .grid-item {
        width: 75vw !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 260px !important;
        padding: 20px !important;
        box-sizing: border-box !important;
      }
    
    .grid-item__title {
        padding: 10px 0;
        font-size: 1.1em;
    }    
    .grid-item h3 {
        font-size: 1.1em;
        padding-bottom: 15px !important;
    }
    
    .grid-item h4 {
        font-size: 1em;
    }
    
    .icon-row {
        height: auto;    
        margin-top: 10px;
        gap: 25px;
    }
    .icon {
        font-size: 1em;
        padding-top: 5px;
    }
    .icon-row p {
        font-size: 0.8em;
        margin-bottom: 0;
    }
 
    .category-text {
        font-size: 1em;
        margin-top: -20px !important;
    }
    .toggle-button {
        font-size: 0.9em;
        padding-top:12px;
    }
    
    h3 .centered message {
        width: 80%;
    }
}

/* ------------------------------------ */
/* COUNTDOWN TO REGISTRATION            */
/* ------------------------------------ */

/* Countdown Section Styling */
.countdown-section {
    width: 80%;
    margin: 0 auto;
    padding-top: 0px;
    margin-top: -50px;
}

.countdown-section h1 {
    margin: 30px 0 20px 0;
    
}

.countdown-section h2 {
    font-weight: normal;
    color: #333;
    margin-top: 60px;
    margin-bottom: 10px;
}

.countdown-text {
    font-size: 1em;
    color: #333;
    margin: 30px auto;
    max-width: 1680px;
    width: 95%;
    margin-bottom: 20px;
}

/* Countdown Container */
.countdown {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Ensures cards wrap nicely on smaller screens */
    margin: 1.5em 0 2.5em 0;
}

/* Individual Flip Card */
.flip-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: #333;
    border-radius: 10px;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5);
}

/* Number Styling */
.number {
    font-family: "Montserrat-Regular";
    font-size: 1.8em;
    margin-top: 0px;
    color: #fff; 
    line-height: 1.6; /* Align vertically */
    text-align: center; /* Center text horizontally */
}

/* modal-content Styling */
.label {
    font-family: "Montserrat-Regular";
    color: #CEA860;
    font-size: 0.75em;
    margin-top: -15px; /* Space between number and label */
    text-align: center;
    letter-spacing: 0.1em;
}

.join-subscribers-list {
    margin-top: 0px;
    margin-bottom: 0px;
}

.centered-message {
    margin: 20px 0;
    text-align: center;
}

.centered-message i:first-of-type{
    padding-right: 30px;
}

.centered-message i:last-of-type{
    padding-left: 30px;
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    .countdown-section {
        margin-left: 1%;
        width:95%;
    }
    .flip-card {
        width: 60px;
        height: 60px;
    }
    .number {
        font-size: 1.8em;
    }

    /* Label Styling */
    .label {
        font-size: 0.65em;
        font-weight: bold;
    }
    .centered-message i {
        display: none;
    }
}

/* ------------------------------------ */
/* ACADEMY IS GROWING COUNTERS          */
/* ------------------------------------ */

.growing-section {
    margin-top: 30px !important;
    margin-bottom: 40px;
}

/* Countdown Section Styling */
.become-member-section {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 0 !important;
    margin-top: -40px;
}

.become-member-section h1 {
    margin: 20px 0 10px 0 !important;
}

.become-member-section h2 {
    font-weight: normal;
    color: #333;
    margin-top: 80px;
    margin-bottom: 0;
    font-size: 1.8em;    
}

.become-member-text {
    font-size: 1em;
    color: #333;
    margin: 30px auto;
    margin-top: -40px;
}

/* Countdown Container */
.growing-count {
    display: flex;
    gap: 36px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Ensures cards wrap nicely on smaller screens */
    margin: 25px 0 !important;
}

/* Individual Flip Card */
.growing-flip-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 115px;
    height: 115px;
    background: #444;
    border-radius: 10px;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5);
    padding: 5px;
}

/* Number Styling */
.growing-number {
    font-family: "Montserrat-Regular";
    font-size: 1.5em;
    margin-top: 0px;
    color: #fff; 
    line-height: 1.6; /* Align vertically */
    text-align: center; /* Center text horizontally */
}

/* modal-content Styling */
.growing-label {
    font-family: "Montserrat-Regular";
    color: #debf82;
    font-size: 0.75em;
    margin-top: 0px; /* Space between number and label */
    text-align: center;
    letter-spacing: 0.1em;
    width: 75%;
    line-height: 1.4em
}

.growing-label-wide {
    font-family: "Montserrat-Regular";
    color: #debf82;
    font-size: 0.75em;
    margin-top: 0px; /* Space between number and label */
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1.4em
}

.join-subscribers-list {
    margin-top: 0px;
    margin-bottom: 0px;
}


.become-member-section .centered-message h4 {
    line-height: 2em;
    margin-top: 0;
}

.become-member-section .centered-message h4 span {
    font-family: "Oswald-Medium";
}

.become-member-section .centered-message h4 span-2 {
    font-family: "Oswald-Medium";
    color: #CEA860;
}

.become-member-section .centered-message p {
    margin: 0;
    line-height: 1.5em;
    font-size: 0.95em;
}

.naxos-sanctuary {
    text-align: center;
    margin: 0 auto;
    margin: 30px 0 -30px 0 !important;     
}

.naxos-sanctuary h4{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #C49D52;
    font-size: 0.95em;      /* slightly softer */
    font-weight: 500;
    letter-spacing: 0.06em;
}

/* not needed anymore */
.naxos-sanctuary img{
    margin-right: 10px;
}

.naxos-sanctuary-reg {
    text-align: left;
     margin-top: 25px;
    margin-bottom: 28px;
}

.naxos-sanctuary-reg h4{
    display: inline-flex;
    text-align: left;
    gap: 10px;
    color: #C49D52;
    font-size: 0.75em !important;      /* slightly softer */
    font-weight: 500;
    letter-spacing: 0.06em;
    opacity: calc(0.9);
}

/* not needed anymore */
.naxos-sanctuary-reg img{
    margin-right: 0;
    width: 25px;
    height: 25px;
}


/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    .become-member-section {
        text-align: center;
        margin: 0 auto;
        margin-bottom: 60px !important;
    }
    
    .growing-count {
        gap: 40px;
        margin: 40px 0 !important;
    }
    .growing-flip-card {
        width: 120px;
        height: 120px;
        
    }
    .growing-number {
        font-size: 1.8em;
    }

    /* Label Styling */
    .growing-label {
        font-size: 0.65em;
        font-weight: bold;
    }
    
    .become-member-section .centered-message i {
        display: none;
    }
    
    .become-member-section h1 {
        text-align: center;
        margin: 0 auto;
        margin-left: 10px !important;
        font-size: 1.3em !important;
    }   
    
    .become-member-section .basic-button {
        width: 80% !important;
        text-align: center;
        margin: 0 auto;
        font-size: 0.9em !important;
    }
    
    .growing-section h3 {
        width: 90%;
        text-align: center;
        margin: 0 auto;
    }
    
    .growing-section {
        width: 90% !important;
        margin-left: 5%;
    }
}

@media (max-width: 600px){
      .naxos-sanctuary h4{
        justify-content: center;
        text-align: center;
        line-height: 1.4;
        font-size: 0.9em;
      }

      .naxos-sanctuary img{
        margin-right: 5px !important;
      }
    
.naxos-sanctuary-reg img{
    margin-top: 4px !important;
}    
}


/* ------------------------------------ */
/* MESSAGE SECTION [e.g. from author]   */
/* ------------------------------------ */

/* H4 Messages with - - */
.centered-message h4 {
    font-size: 1rem; 
    line-height: 1.5rem;
    text-align: center;
    padding: 10px 0;
}

.message-content i {
    font-size: 1.1rem; 
    padding: 0 10px;
}

/* Message Section Styling */
.message-section {
    width: 70%;
    margin: 0 auto;
    padding: 10px 0 30px 0;
}

.message-section h1 {
    line-height: 1.6em !important;
}

.message-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: -20px;
    margin-top: -20px;
}

.message-top hr {
    flex: 1;
    border: none;
    border-top: 1px solid #333;
}

.message-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.message-middle hr {
    flex: 1;
    border: none;
    border-top: 1px solid #333;
}

.highlighted-text {
    color: #C49D52; /* Gold color for Tania's name */
}

.message-content {
    display: block; /* Change from flex to block layout */
    text-align: left; /* Align text to the left */
    margin: 30px 0 0 0;
}

.message-content p span {
    font-family: "Roboto-Medium";
}

.message-content .centered {
    text-align: center;
}



.message-content img {
    width: 230px;
    height: auto;
    border-radius: 3px;
    float: left; /* Makes the image float to the left */
    margin: 8px 20px 10px 0px;
}

.message-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 0px;
}

.message-bottom hr {
    flex: 1;
    border: none;
    border-top: 1px solid #333;
}

.message-bottom i {
    color: #333;
    font-size: 0.8em;
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    
    .message-section {
        width: 90%;
    }
    
    .message-top {
        margin-top: -20px;
        margin-bottom: 0;
    }
    .message-section .message-top h1 {
        font-size: 1.7em !important;
        margin-bottom: -10px;
    }
    
    .message-section .message-middle h1 {
        font-size: 1.3em !important;
    } 
    
    .message-section .message-middle hr {
        display: none;
    } 
    
    .message-content img {
    width: 40%;
        }
      
    .message-content p {
        font-size: 1em;
        line-height: 1.6em;
        margin-bottom: -10px;
    }
    
    .become-member-section .centered-message h4 {
        font-size: 0.9em !important;
        line-height: 1.8em !important;
        text-align: center;
        margin: 0 auto;
        margin-left: -5%;
    }
}

/* ------------------------------------ */
/*  NAVIGATION MENU                     */
/* ------------------------------------ */

.toggle,
.toggle-menu,
[id^="drop"] {
    display: none;
}

nav {
    margin: 0;
    padding: 0;
    background-color: #0B2838;
    font-family: "Raleway-SemiBold";
    text-transform: uppercase;
    height: 65px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    position: relative;
}

#logo {
    display: block;
    float: left;
    color: #C49D52;
    font-family: "Oswald-Regular";
    padding: 18px 0 20px 20px;
}

#logo .logo-link a {
    display: block;
    color: #C49D52; /* Gold */
}

#logo a {
    font-size: 1.1em;
}

#logo .logo-link:hover {
    color: #C49D52; 
    background-color: #0B2838;
}

.logo-img {
    float: left;
    margin-top: 7px;
    margin-right: 10px;
}
nav:after {
    content: "";
    display: table;
    clear: both;
}
nav ul {
    float: right;
    padding: 0;
    list-style: none;
    position: relative;
    margin-left: -1%;
}
nav ul li {
    margin-right: 30px; /* Gap Between Parent Menu Items */
    display: inline-block;
    float: left;
}

/* Parent Menu Items */
nav a {
    display: block;
    padding: 10px 13px 13px 13px;
    color: #C49D52;
    font-size: 13.5px;
    text-decoration: none;
    margin-top: 5px;
    border-radius: 2px;
    letter-spacing: 0.05em;
}

/* Dropdown Menu Starting Point */
.drop-down {
    top: 100%;
    margin-left: 0px;
    padding-top: 3px;
}


/* Sub-Menu Links */
.drop-down a {
    font-family: "Raleway-SemiBold";
    font-size: 0.8em;
    line-height: 20px;
    border-top: 0px;
    border-bottom: 1px dotted #C49D52;
    padding: 15px 12px 15px 18px;
    margin-top: 0px;
    border-radius: 0px;
    background-color: #083953;
}

/* First Sub-Menu Right Beneath Parent */
.drop-down li:first-child {
    margin-top: 5px;
}

/* FontAwesome Icons */
nav i {
    padding-right: 4px;
    font-size: 1em;
}

/* Hovering on Parent and Sub-Menu Items */
nav a:hover {
    background-color: #C49D52;
    color: #0B2838;
}

/* Hovering on Parent and Sub-Menu Items */
nav li#active a {
    background-color: #C49D52;
    color: #0B2838;
}

/* Styling for Sub-Menu Items */
nav ul ul li {
    width: auto;
    float: none;
    display: list-item;
    position: relative;
    text-align: left;
    background-color: #0B2838;
    font-size: 1em;
}

nav ul ul {
    display: none;
    position: absolute;
}

nav ul li:hover > ul {
    display: inherit;
}

/* --- Subtle dropdown alignment fix --- */
/* --- The Cat-Eye Alignment Fix (Do Not Touch!) So that dropdown is exaclty on line --- */
.drop-down {
    top: calc(100% + 1.5px); /* pushes it *slightly* below the gold bar */
    margin-top: 0 !important;
}

/* Clean top edge */
.drop-down li:first-child {
    margin-top: 0 !important;
}


/* Making Menu Sticky */
.sticky {
    position: fixed;
    width: 100%;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
}

/* Responsive Adjustments (1280px and below) */
@media all and (max-width: 1280px) {
    #logo {
        display: block;
        height: 10px;
        font-family: "Raleway-SemiBold";
        font-size: 1.05em;
        margin-top: -12px;
        margin-left: -10px;
    }
    
    #logo a {
        margin-top: -15px;
        height: 20px;
        border-bottom: none;
    }
    
    .logo-img {
        width: 20px;
        height: 20px;
    }
    
    nav {
        margin: 0;
        padding-left: 10px;
        padding-top: 10px;
        background-color: #0B2838;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .toggle + a,
    .menu {
        display: none; 
        height: calc(100vh - 50px);
        overflow-y: scroll;
        background-color: #0B2838;
    }
    
    /* Styling of Parent Menu Items without Dropdown */
    nav a {
        font-size: 1em;
        line-height: 1.7em;
        padding: 18px 12px 18px 35px;   
        margin-top: -0.7px;
        background-color: #0B2838;
        border-bottom: 2px dotted #C49D52;
        letter-spacing: 0.05em;
    }
    
    nav a i {
        font-size: 1em;
        padding-right: 28px;
    }

    nav li:nth-last-of-type(2) {
        margin-bottom: -0.25px;
    }
    
    
    nav ul {
        margin-top: 0px;
        margin-left: -20px;
    }
    
    nav ul:first-of-type {
        margin-top: 10px;
    }
        
    nav i {
        margin-right: 0.3em;
        width: 1em;
        font-size: 1em;
    }
    
    .toggle-menu {
        display: block;
        background-color: #0B2838;
        text-align: right;
        padding-left: 15px;
        padding-right: 10px;
        padding-top: 0em;
        color: #C49D52;
        text-decoration: none;
        font-size: 1.2em;
        line-height: 1.9em;
        font-family: "Raleway-SemiBold";
        overflow-y: scroll; 
    }
    
    .toggle-menu i {
        font-size: 1.2em;
        padding-left: 0px;
        padding-top: 10px;
    }
    
    /* Styling of Parent Menu Items with Dropdown */
    .toggle {
        display: block;
        background-color: #0B2838; 
        text-align: left;
        color: #C49D52;
        text-decoration: none;
        line-height: 1.7em;
        padding: 18px 12px 18px 35px;              
        font-size: 1em;  
        margin-bottom: 0px;
        border-bottom: 2px dotted #C49D52;
        letter-spacing: 0.05em;        
    }
    
    .toggle:first-of-type {
        margin-top: -1px;
    }
    
    .toggle i {
        font-size: 0.9em;
        padding-right: 28px;
    }
    
    .toggle i:nth-of-type(2) {
        font-size: 0.8em;
        padding-left: 5px;
    }

    .toggle:hover {
        background-color: #0B2838;
    }
    
    [id^="drop"]:checked + ul {
        display: block;
    }
        
    .drop-down a {
        line-height: 45px;
        border-top: 0px;
        border-bottom: 1px dotted #C49D52;
        font-size: 1em;
        color: #C49D52;
        background-color: #083953;
        margin-left: 0px; /* Indent for Sub-Menu */
        margin-top: 0px;
        width:100%;
        letter-spacing: 0.07em;
    }
    
    .drop-down li:first-of-type {
        margin-top: -10px;
    }
    
    .drop-down i {
        padding-left: 18px; /* Indent for Sub-Menu */
        padding-right: 25px; /* Indent for Sub-Menu */
    }

    .drop-down a {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 15px;
        line-height: 1.6em;
    }

    .drop-down a i {
        width: 15px;        /* fixed icon column */
        flex-shrink: 0;
        padding-top: 5px !important;
    }

    .drop-down a span {
        display: block;
    }
    
    nav ul li {
        display: block;
        width: 100%; 
    }

    nav a:hover {
        background-color: #317c98;
    }

    nav ul ul {
        float: left;
        position: static;
        width: 100%;
        margin-top: -5px;
    }
    
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }
    
    nav ul ul li {
        display: block;
        width: 100%;
        line-height: 1.6em !important;        
    }
    
    .sticky {
        position: fixed;
        width: 100%;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    .menu-close {
        padding-top: 30px; 
        text-align: left; 
        margin-left: 3%;
        color: #fff; 
        padding-bottom:50px;
        font-style: italic;
        font-size: 1.2rem;
    }
    
    .menu-close i {
        margin-left: 5px;
        margin-right: -15px;
    }
}

/* ----------------------------------- */
/* FOOTER                              */
/* ----------------------------------- */
/* Footer Styling */
.footer {
    background-color: #0B2838;
    color: #c49d52;
    padding: 20px 20px;
    text-align: center;
    margin-top: 120px;
}

/* Footer Styling */
.footer-index {
    background-color: #0B2838;
    color: #c49d52;
    padding: 20px 20px;
    text-align: center;
    margin-top: 120px;
}

.footer-content {
    align-items: center; /* Center content vertically */
    justify-items: center; /* Center items in each column horizontally */
    margin: 0 auto;
}

/* Footer Logo and Title */
.footer-logo {
    text-align: center;
}

.footer-logo .logo {
    width: 30px;
    height: auto;
    margin-top: 0px;
    margin-bottom: 10px;
    display: inline;
}

.footer-logo h2 {
    color: #deb058;
    margin-top: 0px;
    margin-bottom: -15px;
    font-size: 1em;
    letter-spacing: 0.08em;
}

/* Copyright Section */
.footer-bottom {
    border-top: 1px dotted rgb(222, 176, 88);
    padding-top: 10px;
    margin-top: 20px;
    margin-bottom: 0px;
    color: rgb(222, 176, 88);
    align-items: center; /* Center content vertically */
    justify-items: center; /* Center items in each column horizontally */
    height: 30px;
    width: 120%;
    margin-left: -10%;
}

.footer-bottom p {
    font-size: 0.7em;
    font-family: "Roboto-Regular";
    text-align: center;
}

/* ----- Footer overflow fix ----- */
.footer-bottom{
  width: 100% !important;
  margin-left: 0 !important;
  height: auto;                 /* let content define height */
  min-height: 30px;             /* keep your intended size */
  padding-top: 10px;
  box-sizing: border-box;       /* include border/padding in width */
  border-top: 1px dotted #deb058;
}

/* optional belt-and-braces: never let footer cause horizontal scroll */
.footer{
  overflow-x: hidden;
}


/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    .footer-content h2 {
        width: 100%;
        padding-top: 10px;
    }
    .footer-logo img {
        padding-top: 30px;
    }
}

/* ------------------------------------ */
/*  PAGE HEADINGS                */
/* ------------------------------------ */

/* Header container styling */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* keeps left/right spacing clean */
    padding: 0px 0 10px 0;
    border-bottom: 1px solid #CEA860; /* your darker gold */
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.35);
    margin-bottom: 30px;
    margin-top: 0;
}

/* Header icon styling */
.page-header-icon {
    width: 150px;
    border-radius: 3px;
    margin-left: 15px; /* image now on right, so spacing on left side */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* soft, elegant depth */
    margin-bottom: 5px;
}

/* Default header text */
.page-header h1 {
    color: #be9548; /* Gold */
    width: 250px;   /* normal wrap width */
    text-align: left;
    font-size: 1.7em; /* ensures wrapping even mid-word if needed */
    letter-spacing:.02em; 
    line-height: 1.5em;
    margin-top: -25px;
}

.page-header .page-header-wrap {
    color: #be9548; /* Gold */
    width: 100px;   /* normal wrap width */
    text-align: left;
    margin-bottom: -20px;
    letter-spacing:.02em; 
    line-height: 1.4em;    
}

.page-header .page-header-wrap-about {
    color: #be9548; /* Gold */
    width: 100px;   /* normal wrap width */
    text-align: left;
    letter-spacing:.02em; 
    line-height: 1.3em;    
    margin-bottom: -2px;
}

.page-header .page-header-wrap-about-2 {
    color: #be9548; /* Gold */
    width: 180px;   /* normal wrap width */
    text-align: left;
    letter-spacing:.02em; 
    line-height: 1.3em;    
    margin-bottom: -2px;
}

/* Responsive Adjustments (768px and below) */
@media (max-width: 768px) {
    .page-header .page-header-wrap-about {text-align: center; width: 100%;}   
    
    .page-subtitle {
        font-size: 1.4em;
    }

    .content-container {
        padding: 0 15px; /* Slightly less padding for mobile */
        font-size: 1em;
        line-height: 1.6em;
    }
    .page-header {
        border-bottom: 1px solid #CEA860;
        width: 100%;  
        align-items: flex-start;
        margin-top: 0;
    }
    
    .page-header img {
        width: 50%;
        height: auto; 
    }

  .page-header h1 {
      font-size: 1.5em !important;
      line-height: 1.4em;
      padding-top: 0;
      width: 100% !important;
      text-align: left;
      padding-bottom: 20px;
      margin-top: 0 !important;
      hyphens: auto !important;
    }

    .content-container {
        padding: 0 10px; 
        font-size: 0.9em; 
        line-height: 1.5em;
    }
    
    .page-header .page-header-wrap,
     .page-header .page-header-wrap-about{
        width: 50% !important;
        line-height: 1.6em;
        margin-top: -20px;
        text-align: left;
    }
} 


/* ===== Optional CTA on the right for any page header ===== */
.page-header.with-cta {
  justify-content: space-between;   /* left: title, right: button */
}

.page-header-left {
  display: flex;
  align-items: center;
}

.page-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Reuse your existing book-button look, with tweaks for header CTA */
.page-header-right .header-cta-btn {
  background-color: #CEA860;
  color: #fff;
  font-size: 0.85em;
  font-family: "Roboto-Medium", sans-serif;
  padding: 10px 20px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-flex;           /* vertical centering with icon */
  align-items: center;
  gap: 0.5em;
  transition: background-color 0.3s ease, transform 0.15s ease;
  outline: 1px solid #bfa05e;     /* subtle framed look */
  outline-offset: 2px;
}

.page-header-right .header-cta-btn:hover {
  background-color: #bfa05e;
  transform: translateY(-1px);
}

/* Icon inside the CTA */
.page-header-right .header-cta-btn img {
  height: 35px;
  display: block;
}

/* --- MOBILE FIX for headers with CTA --- */
@media (max-width: 768px) {
  .page-header.with-cta {
    flex-direction: column;        /* stack left + right */
    align-items: center;
    gap: 12px;
  }

  .page-header-left {
    display: flex;
    flex-direction: column;        /* stack icon + title like the old layout */
    align-items: center;
  }

  .page-header-left h1 {
    width: auto;                   /* avoid odd width constraints */
    text-align: center;
    margin-top: 12px;
    line-height: 1.5em;
  }

  .page-header-right {
    width: 100%;
    display: flex;
    justify-content: center;       /* center the button */
  }

  .page-header-right .header-cta-btn {
    font-size: 1em;
    padding: 12px 30px;
    margin: 8px 0 10px;
    white-space: nowrap;           /* keep “How-To Guide” on one line */
  }
}




/* ----------------------------------- */
/* JUMP LINKS                          */
/* ----------------------------------- */

/* Style for Jump Link */
.jump-link {
    display: block;
    margin: 20px auto;
    text-align: center;
    color:  #C49D52;
    text-decoration: none;
    font-family: "Montserrat-Regular";
    transition: color 0.3s ease;
}

.jump-link:hover {
    color: #333;
}

.scripts-section .jump-link {
    margin-top: 50px;
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    .jump-link {
        font-size: 1em;
        font-size: 1em;
        padding-bottom: 10px;
    }
}

/* ----------------------------------- */
/* AUDIO GRIDS                         */
/* ----------------------------------- */

/* Meditation & Affirmations Section */
.audios-section {
    padding: 0px 20px;
    margin-top: 40px;
    margin-bottom: 80px;
    align-items: center; /* Center content vertically */
    justify-items: center; /* Center items in each column horizontally */
}

.audios-section h2 {
    text-align: center;
    color:  #C49D52;
    font-family: "Oswald-Regular";
    margin-bottom: 15px;
}

/* Audio Grid Layout */
.audio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 items per row */
    gap: 100px;
    padding-top: 20px;
}

/* Image container */
.audio-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* Square aspect ratio */
    overflow: hidden;
    border-radius: 8px 8px 0px 0px;
    background-color: #f0f0f0; /* Light background in case image fails to load */
    z-index: 1;
}

.audio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 8px 0px 0px;
    z-index: 1;
}

/* Audio title overlay */
.audio-title {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    background-color: rgba(51, 51, 51, 0.4);
    color: #FFF;
    text-align: center;
    font-family: "Oswald-Regular";
    letter-spacing: 0.08em;
    font-size: 0.9em;
    line-height: 1.3em;
    padding: 5px;
    z-index: 2;
}

/* Shadow effect */
.audio-image:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Audio controls styling with larger icons */
.audio-controls {
    display: flex;
    justify-content: center;
    gap: 20px; /* More space between icons */
    margin-top: 10px;
    border: dotted #C49D52 1px;
    border-radius: 3px;
    padding: 9px 0 5px 0;
}

.audio-controls button {
    font-size: 1.5em; /* Increased icon size */
    color: #C49D52; /* Gold color */
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

/*.audio-controls .repeat-btn {
    color: #fff; 
    background-color: #C49D52; 
    padding: 2px 8px 2px 8px; 
    font-size: 0.8em; 
    border-radius: 50%; 
    height: 31px;
    margin-top: 0.5px;
}*/

.audio-controls .repeat-btn {
    font-size: 1.2em;
}

.audio-controls .repeat-btn:hover {
    background-color: #fff;
}

.audio-controls button:hover {
    color:  #333;
}

.audio-controls .coming-soon {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 0.9em;
    color: #C49D52;
}

/* Toggle instructions button */
.toggle-instructions {
    margin-top: 10px;
    font-size: 0.8em;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
    font-family: "Montserrat-Regular";
}

.toggle-instructions:hover {
    color:  #C49D52;
}

/* Instructions section styling */
.audio-instructions {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    margin-top: -10px;
    font-size: 0.9em;
    line-height: 1.5em;
    color: #333;
    text-align: left;
    padding-top: 30px;
}


/* Show instructions when .open class is added */
.audio-instructions.open {
    max-height: 500px; /* Adjust to fit your content */
    opacity: 1;
}

/* Toggle instructions button styling */
.toggle-instructions,
.close-instructions {
    font-size: 0.8em;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    font-family: "Montserrat-Regular";
    transition: color 0.3s ease;
    display: inline-block;
    margin-top: 10px;
}

/* Hover effect for buttons */
.toggle-instructions:hover,
.close-instructions:hover {
    color: #C49D52;
}

/* Ensure only one button is visible at a time */
.toggle-instructions,
.close-instructions {
    display: inline;
}

/* Show instructions when the audio-item has the 'open' class */
.audio-item.open .audio-instructions {
    display: block;
}

/* Adjust heading and icon spacing */
/* Icon styling with margin for spacing */
.audio-instructions p i {
    color: #C49D52; /* Gold color for icons */
    margin-right: 8px;
}

/* Inline span styling for description text */
.audio-instructions p span {
    color: #333; /* Black text */
    font-family: "Roboto-Regular";
    font-weight: normal;
    text-align: left;
}

/* Main paragraph styling for label */
.audio-instructions p {
    font-family: "Roboto-Medium";
    align-items: center;
    margin: -3px 0 0px 0; /* Adjust margins for cleaner alignment */
    text-align: left;
    font-size: 0.9em;
}


/* Close instructions button styling at the bottom */
.close-instructions {
    margin-top: 0px;
    font-size: 0.9em;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.3s ease;
    font-family: "Montserrat-Regular";
}

.close-instructions:hover {
    color:  #C49D52;
}

/* Responsive Adjustments (1024px and below) */
@media (max-width: 1024px) {
    .audio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive Adjustments (768px and below) */
@media (max-width: 768px) {
    .audio-grid  {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    .audio-grid  {
        grid-template-columns: 1fr;
        width: 85%;
        gap: 40px;
    }

    .audio-controls {
        margin-top: 20px;
        gap: 27px;
    }

    .audio-controls button {
        font-size: 2em; /* Increased icon size */
    }

    .audio-controls .repeat-btn {
        font-size: 1.8em;
    }    
}

/* ----------------------------------- */
/* SCRIPTS, AFFIRMATIONS LISTS ETC     */
/* ----------------------------------- */

/* Meditation Scripts Section */
.scripts-section {
    padding: 40px 20px;
    background-color: #f9f9f9;
}

.scripts-section h2  {
    text-align: center;
    color:  #C49D52;
    font-family: "Oswald-Regular";
    font-size: 1.3em;
    letter-spacing: 0.08em;
}

.dropdown-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 30px 0 30px 0;
}

.dropdown label {
    display: block;
    font-family: "Montserrat-Regular";
    font-size: 0.8em;
    color:  #C49D52;
    margin-bottom: 4px; /* Small gap between label and select box */
}

.dropdown select {
    padding: 5px;
    font-family: "Roboto-Regular";
    font-size: 0.8em;
    width: 200px;
}

.script-placeholder {
    text-align: center;
    font-family: "Roboto-Regular";
    color: #333;
    padding: 20px;
    border-radius: 3px;
    background-color: #f9f9f9;
    max-width: 700px;
    margin: 0 auto;
}

/* Theme Heading Styling */
#script-content h3 {
    font-size: 1em; /* Larger font size */
    color: #333; /* Darker color for contrast */
    margin-bottom: 10px; /* Add spacing below the heading */
    margin-top: 5px;
    text-transform: uppercase; /* Make it uppercase */
    letter-spacing: 1px; /* Slight letter spacing for elegance */
    text-align: left;
}

/* Placeholder message styling inside #script-content */
#script-content .placeholder-message {
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
    color: #333;
}

/* Affirmation Item Styling */
.affirmation-item {
    margin-bottom: 25px; /* Space between each affirmation */
    padding: 5px; /* Padding around each item */
    background-color: #fff; /* Light gray background */
    border-left: 5px solid #deb058; /* Gold accent border */
    border-radius: 3px; /* Slightly rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    display: block; /* Makes it act like a block element */
    margin: 0 auto 25px; /* Top: 0px, Auto-centered, Bottom: 25px */
    text-align: center; /* Aligns text inside the button */ 
}

/* Affirmation Text Styling */
.affirmation-item p {
    font-size: 0.9em; /* Slightly larger text */
    padding-top: 5px;
    padding-bottom: 5px;    
    font-family: "Roboto-Regular", sans-serif; /* Clean and modern font */
    line-height: 1.2; /* Improved line spacing for readability */
    text-align: left; /* Ensure text is left-aligned */ 
    color: #333; /* Soft black text */  
    margin: 0 10px 0 10px; /* Remove default margins */
    line-height: 1.6em;    
}

/* Affirmations Loading Message */
.loading-message {
    font-size: 0.8em; /* Adjust text size */
    font-style: italic; /* Italicized for emphasis */
    color: #333; /* Dark gray text */
    text-align: center; /* Optional: center it */
}

/* Small Note Styling */
.affirmation-item small {
    display: block; /* Make it a block-level element */
    font-size: 0.8em; /* Slightly smaller font size */
    font-family: "Roboto-Italic", sans-serif; /* Italicized font */
    color: #777; /* Subtle gray text */
    margin-top: 10px; /* Space above the small note */
}

/* Add Animation for Content Fade-In */
#script-content .affirmation-item {
    opacity: 0;
    animation: fadeIn 0.8s ease-in-out forwards;
    font-size: 1em;
    font-style: italic;
    text-align: left;
    color: #333;
}

.reset-button {
    background: none;
    color: #333;
    border: none;
    font-size: 0.85em;
    cursor: pointer;
    font-family: "Montserrat-Regular";
    text-decoration: underline;

    /* Center the button */
    display: block; /* Makes it act like a block element */
    margin: 20px auto 0; /* Top margin and auto centers horizontally */
    text-align: center; /* Aligns text inside the button */
}

.reset-button:hover {
    color: #000;
}

/* Keyframes for Fade-In Effect */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); /* Slight upward movement */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    #script-content .placeholder-message {
        font-size: 1em;
        width: 100%;
    }    
    .reset-button {
        font-size: 1em;
    }
}

/* ----------------------------------- */
/* COLLAPSIBLE INSTRUCTIONS            */
/* ----------------------------------- */

/* Collapsible content */
.collapsible-instructions-section {
    margin-top: 20px;
}

.collapsible-instructions-button {
    width: 100%;
    font-size: 0.75em;
    background-color: transparent;
    border: 1px dotted #C49D52;
    border-radius: 4px;
    color: #C49D52;
    padding: 8px;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Montserrat-Regular";
    margin-top: 10px;
}

/* Collapsible instructions content with transition */
.collapsible-instructions-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    margin-top: 0px;
    text-align: left;
    border-bottom: #C49D52 dotted 1px;
    background-color: #f9f9f9;
    padding: 0 10px; /* Optional: Padding for inner content */
}

.collapsible-instructions-content i {
    color: #C49D52;
    padding-right: 5px;
}

.collapsible-instructions-content ul {
    list-style-type: none;
    padding: 0;
    margin: 10px 0 0;
}

.collapsible-instructions-content ul li {
    padding: 7px 0;
    font-size: 0.8em;
    color: #333;
    line-height: 1.5em;
    letter-spacing: 0.02em;
}

.collapsible-instructions-content ul li span {
    font-family: "Roboto-Medium";
}

/* When open, set max-height large enough to fit the content and opacity to 1 */
.collapsible-instructions-content.open {
    max-height: 500px; /* Adjust based on content length */
    opacity: 1;
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    .collapsible-instructions-button {
        font-size: 0.95em;
        margin-top: 15px;
        padding: 12px;
    }
    .collapsible-instructions-content ul li {
        font-size: 0.95em;
    }
}

/* ----------------------------------- */
/* WARNING MESSAGE                     */
/* ----------------------------------- */

.warning-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #b7777d; /* Light red background */
    color: #fff; /* Dark red text */
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    display: flex;
    align-items: center;
}

.warning-message .close-warning {
    margin-right: 10px;
    cursor: pointer;
    font-weight: bold;
}

/* ----------------------------------- */
/* THEME SELECTION                     */
/* ----------------------------------- */

/* Styling for the theme selection section */
.theme-selection {
    margin: 20px 0;
    text-align: center;
}

.theme-selection p {
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 0.9em;
    color: #333;
    margin-bottom: 10px;
}

/* Grid layout for theme checkboxes */
.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjusts based on screen size */
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

/* Styling for individual theme labels */
.theme-label {
    font-family: "Roboto-Regular", sans-serif;
    font-size: 0.9rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    background: #f3f3f1;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* Checkbox styling */
.theme-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #c49d52; /* Gold accent for checkboxes */
}

/* Hover effect for theme labels */
.theme-label:hover {
    background: #ddd;
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
.theme-selection p {
    font-size: 0.9em;
}
}


/* ----------------------------------- */
/* PINKY BRAIN SUBLIMINALS (SITEWIDE)  */
/* ----------------------------------- */

/* Subliminal Text */
.subliminal-text {
    position: fixed;
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.3); /* Neutral semi-transparent white */
    text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.3); /* Light shadow for definition */
    font-family: "Roboto-Regular", sans-serif;
    z-index: 1000;
    text-align: center;
    width: 60%; /* Adjusted width */
    max-width: 600px; /* Optional: limit max width */
    left: 50%;
    transform: translateX(-50%);
}


/* Top, Middle, Bottom Positions */
.subliminal-top {
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
}

.subliminal-middle {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.subliminal-bottom {
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
}

/* Brain Button Styling */
#brain-button {
    position: fixed;
    bottom: 115px; /* Distance from the bottom of the screen */
    right: 40px; /* Distance from the right of the screen */
    background-color: #a97d79; /* Pink color for the brain button */
    color: white; /* Icon color */
    font-size: 23px; /* Adjust icon size */
    width: 45px; /* Size of the button */
    height: 45px;
    border-radius: 50%; /* Makes it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    cursor: pointer;
    z-index: 1000; /* Ensures it stays on top */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#brain-button {background: #a97d79;
border-radius: 16px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);}

#brain-button i {
    margin-top: 0px;
}

#brain-button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    background-color: #c29a96; /* Slightly lighter pink */
}

#brain-button:active {
    transform: scale(0.9); /* Shrink slightly when clicked */
}

#brain-button::after {
    content: "SUBLIMINALS";
    position: absolute;
    right: 105%; /* Position it to the left of the button */
    top: 50%; /* Keep it aligned with the button */
    transform: translateX(10px) translateY(-50%); /* Start slightly further left */
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.4em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#brain-button:hover::after {
    opacity: 1;
    transform: translateX(0) translateY(-50%); /* Slide into place */
}

/* Modal container */
.subliminal-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Black with opacity */
    display: none; /* Hidden by default */
}

/* Modal content */
.subliminal-modal-content {
    background-color: white;
    margin: 10% auto; /* Center vertically */
    padding: 20px 30px; /* Adjust padding for better spacing */
    border: 1px solid #888;
    width: 80%;
    max-width: 550px; /* Slightly smaller for better focus */
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    text-align: center; /* Center the text */
}

/* Modal Title */
.subliminal-modal-content h2 {
    font-size: 1.2em;
    margin-bottom: 2px;
    font-family: "Oswald-Regular";
    color: #333;
    text-align: center;
    border-bottom: 1px dotted #C49D52;
    color: #C49D52;    
}

/* Modal Paragraph */
.subliminal-modal-content p {
    font-size: 0.85em;
    line-height: 1.6em;
    padding: 10px 0;
    color: #555;
    margin-bottom: -10px;
}

.subliminal-modal-content p span {
    font-family: "Montserrat-Regular";
    font-size: 0.95em; 
    color: #C49D52
}

/* Dropdown styling */
#subliminal-speed,
#subliminal-position {
    font-family: "Montserrat-Regular";
    font-size: 0.9em;  
    border: 1px solid #ccc;
    padding: 5px 8px;
    border-radius: 5px;
    margin: 10px;
}

/* Close button */
.close-subliminal-modal {
  color: #aaa;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.close-subliminal-modal:hover,
.close-subliminal-modal:focus {
    color: #333;
    text-decoration: none;
}

/* Toggle Switch Styling */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 25px;
    margin: 10px auto;
}

/* Hide Default Checkbox */
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Slider */
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #a5a2a2;
    transition: 0.4s;
    border-radius: 25px;
}

/* Slider Brain */
.toggle-switch .slider:before {
    margin-left: 5px;
    margin-top: -3.6px; /* to move brain slider up or down */
    transition: 0.4s;
    border-radius: 100%;
    float: left;
    font-family:  FontAwesome;
    font-size:  1.2rem;
    color: #fff;    
    content: "\f5dc";
    background-color: transparent;
}

.slider round {
    background-color: transparent;
}

/* On State */
.toggle-switch input:checked + .slider {
    background-color: #a97d79;
    color: #FFF;/* Gold color */
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(28px);
}

/* On/Off labels */
.toggle-switch::before {
    content: "OFF";
    position: absolute;
    left: -35px;
    top: -2px;
    font-size: 0.85em;
    color: #333;    
    font-family: "Montserrat-Regular";
}

input:checked ~ .slider::after {
    content: "ON";
    position: absolute;
    right: -28px;
    top: -2px;
    font-family: "Montserrat-Regular";
    font-size: 0.9em;
    color: #333;
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    #brain-button {
        bottom: 15px; /* Distance from the bottom of the screen */
        right: 195px; /* Distance from the right of the screen */
    }    
    
#brain-button::after,
.brain-button::after {
  top: -50%;
  right: -10%;
}           
    
    .subliminal-modal { 
        margin-top: 25px;
    }
    
    .subliminal-modal-content  {
        width: 98%;
        margin-left: 1%;
    }
    
    #subliminal-speed,
    #subliminal-position { 
        width: 70%;
    }
    
    .subliminal-modal-content p {
        font-size: 0.9em;
        padding-bottom: 3px;
    }
}

/* Floating memo-pad */
#memo-pad-button {
    position: fixed;
    bottom: 40px;
    right: 40px; /* Distance from the right of the screen */
    background-color:  #58868E; /* Yello color for the memo pad button */
    color: #f2f2f2; /* Icon color */
    font-size: 23px; /* Adjust icon size */
    width: 45px; /* Size of the button */
    height: 45px;
    border-radius: 50%; /* Makes it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    cursor: pointer;
    z-index: 1000; /* Ensures it stays on top */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#memo-pad-button {
background: #58868E;
border-radius: 16px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

#memo-pad-button i {
    padding-top: 2px;
}

#memo-pad-button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    background-color: #689aa3; /* Slightly lighter yellow */
}

#memo-pad-button:active {
    transform: scale(0.9); /* Shrink slightly when clicked */
}

#memo-pad-button::after {
    content: "MEMO PAD";
    position: absolute;
    right: 105%; /* Position it to the left of the button */
    top: 50%; /* Keep it aligned with the button */
    transform: translateX(10px) translateY(-50%); /* Start slightly further left */
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.4em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#memo-pad-button:hover::after {
    opacity: 1;
    transform: translateX(0) translateY(-50%); /* Slide into place */
}


/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    #memo-pad-button {
        bottom: 15px; /* Distance from the bottom of the screen */
        right: 135px; /* Distance from the right of the screen */
    }
    
#memo-pad-button::after,
.memo-pad-button::after{
  top: -50%;
  right: -10%;
}            
}

/* Memo Pad Modal */
#memo-pad-modal {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 300px;
    background: #fff;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 1001;
}

@media (max-width: 480px){
#memo-pad-modal {
   bottom: 280px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);    
}    
}

/* =====================================
   LOCKED MEMO PAD (FREE VERSION)
   ===================================== */

#memo-pad-button.memo-locked {
    background: #aebfc3;
    cursor: not-allowed;
}

/* dim icon slightly */
#memo-pad-button.memo-locked i {
    opacity: 0.65;
}

/* prevent hover scaling */
#memo-pad-button.memo-locked:hover {
    transform: none;
    background: #aebfc3;
}

/* tooltip text */
#memo-pad-button.memo-locked::after {
    content: "🔒 MEMBER MEMO PAD";
    position: absolute;
    right: 105%;
    top: 50%;
    transform: translateX(10px) translateY(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.6rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
}

/* show tooltip */
#memo-pad-button.memo-locked:hover::after {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}

.memo-modal-content {
    display: flex;
    flex-direction: column;
}

#memo-pad-modal p {
    font-size: 0.85em;
    font-family: "Roboto-Medium";
    font-weight: normal;
    line-height: 1.3em;
    color: #333;
    text-align: left;
}

.memo-modal-content h3 {
    font-style: "Oswald-Regular";
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: normal;
    color: #58868E;
}

.memo-modal-content label {
    font-family: "Roboto-Medium";
    font-weight: normal;
    margin-top: 10px;
}

/* Title Field - Inline with Label */
.memo-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between label and input */
}

#memo-title {
    font-family: "Roboto-Medium";
    font-weight: none;    
}

.memo-title-wrapper label {
    font-weight: normal;
    white-space: nowrap; /* Prevents "Title:" from wrapping */
    font-size: 0.9em;
    font-family: "Roboto-Medium";
}

.memo-title-wrapper input {
    flex: 1; /* Takes the remaining space */
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.9em;
    min-width: 120px; /* Prevents it from getting too small */
    font-family: "Roboto-Regular";
}

.memo-text-wrapper {
    margin-top: 10px;
}

.memo-text-wrapper label {
    font-size: 0.9em;
    font-family: "Roboto-Medium";
    font-weight: normal;
}

.memo-text-wrapper textarea {
    font-size: 0.9em;
    font-family: "Roboto-Regular";
    font-weight: normal;
    line-height: 1.5em;
}

.memo-modal-content input,
.memo-modal-content textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.memo-modal-content textarea {
    height: 100px;
}

#save-memo {
    font-family: "Montserrat-Regular";
    margin-top: 10px;
    background-color: #58868E;
    color: #fff;
    border: none;
    padding: 8px 10px;
    cursor: pointer;
    font-weight: normal;
    border-radius: 5px;
    font-size: 0.85em;
    margin-bottom: 15px;
}

#save-memo:hover {
    background-color: #689aa3;
}

/* Memo Saved Confirmation Message */
.memo-success-message {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: #58868E;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1em;
    font-weight: normal;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    font-family: "Roboto-Medium";
    line-height: 1.5em;
}

/* Close Button */
.close-memo {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.5em;
    cursor: pointer;
    color: #333;
}

.close-memo {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.4em;
    cursor: pointer;
    color: #fff;
    background: #333;
    border-radius: 3px;
    padding: 2px 5px 0px 5px;
    line-height: 1em;
}

.close-memo i {
    margin-top: -3px;
}

.close-memo:hover, .close-memo:focus {
    background: #aaa;
}

@media (max-width: 480px) {
    font-size: 0.9em;
    line-height: 1.4em;
}

/* ----------------------------------- */
/* WARNING INFO MODAL (SITEWIDE)             */
/*------------------------------------ */

/* Style the warning-info modal containers */

.warning-info-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #fff; /* Navy border */
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 400px; /* Adjust as needed */
    text-align: center;
    font-family: 'Montserrat-Regular', sans-serif; /* Match your site's font */
    color: #0B2838; /* Dark blue text */
    font-weight: none;
    line-height: 1.5em;
    font-size: 0.9em;
}

/* Style the error text */
.warning-info-modal p {
    margin: 0;
    padding: 10px 0;
    font-size: 0.9em;
    line-height: 1.5em;
    text-align: center;
}

.warning-info-modal span {
    margin: 0;
    padding: 10px 0;
    font-size: 0.9em;
    text-align: center;
    font-family: "Roboto-Regular";
}

/* Style the close button */
.warning-info-modal button {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: rgb(91, 115, 129); /* off white background */
    color: #fff; /* White text */
    border: none;
    border-radius: 3px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    font-family: "Roboto-Medium";
    font-weight: normal;
}

.warning-info-modal button:hover {
    background-color: #0B2838; /* Dark blue on hover */
    font-size: 0.9em;
}

/* Wrap buttons in a flex container */
.warning-buttons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Adjust spacing between buttons */
    margin-top: 15px;
}

.warning-info-modal button {
    flex: 1; /* Makes both buttons the same width */
    min-width: 80px; /* Ensures they don’t shrink too much */
}


/* ----------------------------------- */
/* ERROR MODAL STYLING (SITEWIDE)      */
/*------------------------------------ */

/* Style the error modal container */

.error-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #ffffff; /* off white background */
    border: 1px solid #5b7381; /* Navy border */
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 400px; /* Adjust as needed */
    text-align: center;
    font-family: 'Montserrat-Regular', sans-serif; /* Match your site's font */
    color:#4f6b7b; /* Dark blue text */
    font-weight: none;
    line-height: 1.5em;
    font-size: 0.9em;
}

/* Style the error text */
.error-modal p {
    margin: 0;
    padding: 10px 0;
    font-size: 0.9em;
    line-height: 1.5em;
    text-align: center;
}

.error-modal span {
    margin: 0;
    padding: 10px 0;
    font-size: 1.1em;
    text-align: center;
    font-family: "Roboto-Regular";
}

/* Style the close button */
.error-modal button {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #5b7381; /* Gold background */
    color: #fff; /* White text */
    border: none;
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.error-modal button:hover {
    background-color: #0B2838; /* Dark blue on hover */
}


/* 🚀 Non-Member Modal Styling */
.non-member-modal-overlay {
    display: none; /* Initially hidden */
    position: fixed; /* Cover full screen */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999; /* Ensure it appears above everything */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 🚀 Modal Box */
.non-member-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    max-width: 380px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.non-member-modal-content i {
    padding-right: 10px;
}

/* 🚀 Headings & Text */
.non-member-modal-content h2 {
    font-size: 1.5rem;
    color: #C49D52;
    margin-bottom:10px;
}

.non-member-modal-content p {
    font-size: 1rem;
    color: #666;
    font-family: "Roboto-Regular";
    font-size: 0.9em;
    line-height: 1.9em;
    text-align: center;
}

.non-member-modal-content p {
    font-family: "Roboto-Medium";
}

/* 🚀 Buttons */
.non-member-modal-buttons {
    margin-top: 15px;
}

.non-member-modal-btn {
    display: block;
    background: #0B2838;
    color: white;
    padding: 10px 8px;
    margin: 10px 0;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-family: "Roboto-Medium";
    font-size: 0.9em;
}

.non-member-modal-btn:hover {
    background: #C49D52;
    color: #333;
}

/* Floating how to button */
.how-to-button {
    position: fixed;
    bottom: 40px; /* Distance from the bottom of the screen */
    right: 40px; /* Distance from the right of the screen */
    background-color:#1e4257; /* Yello color for the how-to button */
    color: #fff !important; /* Icon color */
    font-size: 23px; /* Adjust icon size */
    width: 45px; /* Size of the button */
    height: 45px;
    border-radius: 50%; /* Makes it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    cursor: pointer;
    z-index: 1000; /* Ensures it stays on top */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.how-to-button i {
    padding-top: 2px;
}

.how-to-button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    background-color:#245571; 
}

.how-to-button:active {
    transform: scale(0.9); /* Shrink slightly when clicked */
}

.how-to-button::after {
    content: "ACADEMY HOW-TO";
    position: absolute;
    right: 105%; /* Position it to the left of the button */
    top: 50%; /* Keep it aligned with the button */
    transform: translateX(10px) translateY(-50%); /* Start slightly further left */
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.4em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.how-to-button:hover::after {
    opacity: 1;
    transform: translateX(0) translateY(-50%); /* Slide into place */
}

.how-to-button a, .how-to-button a:hover {
    color: #fff;
}

/* Responsive Adjustments (480px and below) */
@media (max-width: 480px) {
    .how-to-button {
        bottom: 15px; /* Distance from the bottom of the screen */
        right: 15px; /* Distance from the right of the screen */
    }
}


/* Basic Central Button Styling */
.basic-button, .basic-button:visited {
    background-color: #C49D52; /* Gold color */
    color: #fff; /* White text */
    padding: 12px 12px;
    font-size: 0.95em;
    line-height: 1.5em;
    text-align: center;
    font-family: "Montserrat-Regular", sans-serif;
    font-weight: normal;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
    margin: 20px auto; /* Center the button */
    display: block;
}

.become-member-section .basic-button {
    width: 350px;
    padding: 18px 0px 18px 0px;    
}

.basic-button:hover {
    background-color: #555; /* Slightly darker gold for hover */
}

.basic-button a {
    color: #fff; /* Ensure white text for the link */
    text-decoration: none; /* Remove underline */
    display: block; /* Make the entire button clickable */
}

.basic-button a:visited {
    color: #fff; /* Keep the visited state text white */
}

@media (max-width: 480px) {
   .become-member-section .basic-button {
        width: 100% !important;
    }    
}


/* Logout PopUp Message */
#logout-message {
  display: none;
  text-align: center;
  font-family: "Roboto-Regular";
  font-size: 1rem;
  line-height: 1.7em;
  color: #0B2838;                  /* navy font */
  background-color: #CEA8601A;     /* subtle gold tint */
  border: 1px solid #C49D52;       /* gold border */
  border-radius: 5px;
  padding: 1em 2em;
  width: 300px;
  margin: 2em auto;
  box-shadow: 0 0 10px #333;
  box-shadow: 0 0 10px rgba(84, 84, 84, 0.28);
  transition: opacity 0.6s ease;
  opacity: 0;
}

#logout-message.show {
  display: block;
  opacity: 1;
}

@media (max-width: 480px) {
    #logout-message {
        width: 360px;
    }    
    
}

/* AOM VIDEO DEMO */
.aom-demo {
  background: #fcfcfc;
  color: #c49d52;
  padding: 1rem 1rem 1.5rem 1rem;
  max-width: 1680px;
  width: 80%;    
  text-align: center;
  margin: 0 auto;
  margin-top: 30px;
}

.aom-demo h1 {
  font-size: 1.5rem;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  color: #c49d52;
}

.aom-demo h2 {
    font-size: 1.2rem;
  letter-spacing: 1px;
  margin-top: 1.5rem;
  color: #c49d52;
    line-height: 1.6em;
    text-align: center;
}

.aom-demo p {
    font-size: 1em;
    color: #333;
    margin: 13px auto;
    margin-bottom: -20px;
}

.aom-demo p span {
    font-family: "Roboto-Medium";
}

/* Video wrapper */
.video-wrapper {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fcfcfc;
}

.video-wrapper:hover {
  transform: scale(1.02);
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  background-color: #000;
}

.video-wrapper p {
    font-size: 0.8em;
    margin-top: 5px;
    text-align: center;
    width: 100%;
    line-height: 1.5em !important;
}

.video-wrapper i {
    padding: 0 7px;
}

/* ======================
   RESPONSIVE BREAKPOINTS
====================== */

/* Tablets */
@media (max-width: 991px) {
  .aom-demo {
    padding: 3rem 1.5rem;
    margin-top: -30px;
  }

  .aom-demo h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .video-wrapper {
    max-width: 90%;
  }
}

/* Mobile devices */
@media (max-width: 600px) {
  .aom-demo {
    padding: 1rem 1rem;
    margin-top: 20px !important; 
  }

  .aom-demo h1 {
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    margin-bottom: 1.2rem;
  }

  .video-wrapper {
    max-width: 100%;
    border-radius: 0.6rem;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
  }
}

@media (max-width: 480px) {
    .aom-demo {
      width: 95%;
    }
    
    .aom-demo p {
        font-size: 1rem;
        line-height: 1.8rem;
        text-align: left;
        width: 100%;
    }
    
    .video-wrapper p {
        font-size: 0.8em;
        margin-top: 5px;
        text-align: left;
        width: 100%;
        line-height: 1.6em !important;
        padding: 3px 8px 25px 5px;
    }    
}

/* =========================================================
   AOM GLANCE (isolated namespace: aom-glance-*)
   - Same layout/behavior as tier-structure
   - Removed non-relevant tier-structure naming
   - Replaces gold CTA with a heading bar (kicker)
   ========================================================= */

.aom-glance{
  padding: 18px 0;
  margin-top: 15px;       
}

/* Bigger gap between cards */
.aom-glance__grid{
  display: grid;
  grid-template-columns: repeat(5, 265px);
  gap: 30px;
  max-width: 1680px;
  margin: 0 auto;
  justify-content: center;
  margin-top: 25px !important;        
}

/* Tablet */
@media (max-width: 1100px){
  .aom-glance__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 640px){
  .aom-glance__grid{ grid-template-columns: 1fr; }
    .aom-glance h2 {width: 90%; margin-left: 5%;}    
}

.aom-glance__card{
  background: rgba(196, 157, 82, 0.75);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  min-width: 0; /* prevents child forcing width growth */
}
.aom-glance__card h3 {
    text-transform: uppercase;
    font-size: 1em;
}

.aom-glance__title{
  margin: 0;
  padding: 14px 14px 10px;
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #333;
}

.aom-glance__media{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f3f3f3;
}

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

.aom-glance__card--locked .aom-glance__media img{
  opacity: .60;
  filter: saturate(.85);
}

/* Link wrapper for active card media */
.aom-glance__media-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Optional: subtle affordance without zoom */
.aom-glance__media-link:hover .aom-glance__media{
  filter: brightness(1.1);
}

/* Actions area */
.aom-glance__actions{
  padding: 0;
  display: block;   /* NOT grid */
}

.aom-glance__kicker{
  width: 100%;
  background: #555;
  color: #fff;
  padding: 9px 12px;
  font-size: .8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  font-family: "Roboto-Medium";
  border-top: 1px solid rgba(0,0,0,.08);
  line-height: 1.6em;
}


/* Buttons: FULL WIDTH like meditation cards */
.aom-glance__btn{
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 9px 12px;
  font-size: .9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  background: transparent;
  color: #333;
}

/* More button (white) */
.aom-glance__btn--ghost{
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  font-family: "Roboto-Medium";
  font-weight: normal;
  font-size: 0.85em;
}

/* Remove default details marker */
.aom-glance__details > summary{
  list-style: none;
}
.aom-glance__details > summary::-webkit-details-marker{
  display: none;
}

/* Chevron */
.aom-glance__chev{
  margin-left: 10px;
  font-size: .95em;
  opacity: .85;
  transition: transform .18s ease;
  padding-top: 2.5px;
}

/* Rotate chevron when open */
.aom-glance__details[open] .aom-glance__chev{
  transform: rotate(180deg);
}

.aom-glance__details[open]{
  box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
}

/* More content */
.aom-glance__more{
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  color: #333;

  overflow-wrap: anywhere;
  word-break: break-word;

  max-width: 100%;
  box-sizing: border-box;
}

.aom-glance__more p{
  font-size: 0.9rem;
  line-height: 1.7em;
  font-family: "Roboto-Regular";
  text-align: left;
}

.aom-glance__more p span{
  font-family: "Roboto-Medium";
}

/* Desktop+ (rounded corners only) */
@media (min-width: 641px){
  .aom-glance__card{ border-radius: 14px; }
}

/* Mobile (center the single card) */
@media (max-width: 640px){
  .aom-glance__grid{
    grid-template-columns: 1fr;
    justify-content: stretch;
    justify-items: center;
    gap: 50px;
  }

  .aom-glance__card{
    margin: 0 auto;
    width: 80%;
  }
}


/* New Badge for Nav Menu */
.new-badge-wrapper-nav {
  pointer-events: none;  
  position: absolute;
  right: -2.5px;
  top: -3px; /* or wherever you want it */    
}

.new-release-badge-nav {
  max-width: 50px;
  max-height: 50px;  
  filter: drop-shadow(0 2px 2px rgb(0, 0, 0));
}

@media (max-width: 640px){
/* New Badge for Nav Menu */
.new-badge-wrapper-nav {
  right: 0;
}
}

/* Increase width of Open Mic link */
.open-mic-link {
  position: relative; /* Ensure the badge is positioned relative to this link */
  width: auto; /* Adjust width to fit the content */
  padding-right: 40px; /* Add extra padding for the badge space */
}

/* New Badge for Nav Menu */
.new-badge-wrapper-nav {
  pointer-events: none;
  position: absolute;
  right: -2.5px; /* Adjusts badge's position relative to the link */
  top: -3px;     /* Or wherever you want it */
}

.new-release-badge-nav {
  max-width: 40px;
  max-height: 40px;
  filter: drop-shadow(0 2px 2px rgb(0, 0, 0));
}

@media (max-width: 640px) {
  .new-badge-wrapper-nav {
    right: 0;
  }
}


/* =========================================================
   MODAL ABOUT (standalone) — does NOT touch other modals
   Prefix: .modal-about-
   Usage:
   <div class="modal-about" data-theme="gold|library|aoi">...</div>
   ========================================================= */

/* ABOUT AND INSTRUCTIONS MODAL SITE-WIDE */

.modal-about-button, 
.modal-about-button:visited,
.modal-about-button-center,
.modal-about-button-center:visited,
.modal-about-button-list,
.modal-about-button-list:visited {
    background-color: #333; 
    color: #fff; /* White text */
    font-size: 0.75em;
    font-family: "Montserrat-Regular", sans-serif;
    font-weight: normal;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
    text-align: center;
    display: block;
}

.modal-about-button, 
.modal-about-button:visited {
    width: 180px;
    margin-top: 15px;
    margin-bottom: -15px;
    padding: 13px 15px !important;    
}

.modal-about-button-center,
.modal-about-button-center:visited {
    margin: 0 auto;
    width: 220px;
    margin-bottom: 15px;
    padding: 15px 15px !important;    
    display: block;    
}

.modal-about-button-list,
.modal-about-button-list:visited {
    background-color: #0B2838;
    border-radius: 5px;
    padding: 15px 10px;
    cursor: pointer;
    font-size: 0.75em;
    font-family: "Montserrat-Regular";
    text-align: center;
    color: #fff;
    width: 100%;
    text-transform: uppercase;
    transition: 0.2s ease-in-out;
}

.modal-about-button:hover,
.modal-about-button-list:hover {
    background-color: #C49D52; 
}

.modal-about-button a {
    color: #fff; /* Ensure white text for the link */
    text-decoration: none; /* Remove underline */
    display: block; /* Make the entire button clickable */
}

.modal-about-button i {
    padding-right: 3px;
}

@media (max-width: 768px) {
    .modal-about-button {
        text-align: center;
        margin: 0 auto;
        margin-top: 0;
        margin-bottom: 20px;
    }
}

/* Root overlay */
.modal-about{
  position: fixed;
  inset: 0;
  z-index: 1001;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
    margin-top: 65px;
}

/* Open state */
.modal-about.is-open{
  pointer-events: auto;
  opacity: 1;
}

/* Scrim */
.modal-about__scrim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* Panel (desktop: right sheet) */
.modal-about__panel{
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: min(520px, 92vw);

  background: #232222;
  color: #ecebeb;
  border-left: 1px solid rgba(255,255,255,.12);

  transform: translateX(100%);
  transition: transform .30s ease;

  display: flex;
  flex-direction: column;
  outline: none;
}

.modal-about.is-open .modal-about__panel{
  transform: translateX(0);
}

/* Header row */
.modal-about__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.modal-about__title{
  margin: 0;
  font-size: 1.1rem;
  font-family: 'Montserrat-Regular';
  letter-spacing: .5px;
  color: var(--modal-about-accent);
}

/* Close button */
.modal-about__close{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

/* Scrollable content */
.modal-about__content{
  padding: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  line-height: 1.7;
}

.modal-about__content h3 {
 text-align: left !important; 
 padding-bottom: 10px;
}

.modal-about__content p,
.modal-about__content li{
  color: #f2f2f2;
  font-size: .95em;
  text-align: left;
}

.modal-about__content span {
    font-family: "Roboto-Medium";
    color: var(--modal-about-accent);
}

/* Lists */
.modal-about__content ol,
.modal-about__content ul{
  padding-left: 4%;
  margin-top: -15px;
  margin-bottom: 30px;
}

.modal-about__content i {
    color: var(--modal-about-accent);
    padding-right: 3px;
}

.modal-about__content ul li::marker {
    color: var(--modal-about-accent); /* your specific centre color */
}

/* Section headings (color controlled by theme) */
.modal-about__content h3{
  margin: 18px 0 8px;
  font-family: 'Oswald-Regular';
  font-size: 0.9em;
  color: var(--modal-about-accent);
  margin-top: -10px;
  text-align: center;
}

/* Links that should match accent */
.modal-about__content a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================
   THEMES (3 options)
   Set via data-theme on .modal-about
   ========================================================= */

/* Default fallback */
.modal-about{ --modal-about-accent: #d5bb8a; }

/* GOLD */
.modal-about[data-theme="gold"]{
  --modal-about-accent: #d5bb8a;
}

/* LIBRARY (muted olive/stone to match your library buttons) */
.modal-about[data-theme="library"]{
  --modal-about-accent: #bcbfaf;
}

/* AOI (cooler accent — tweak to your AoI palette if you prefer) */
.modal-about[data-theme="aoi"]{
  --modal-about-accent: #6FA7C7;
}

/* AOI (cooler accent — tweak to your AoI palette if you prefer) */
.modal-about[data-theme="mindbites"]{
  --modal-about-accent: #acc9d0;
}

.mind-bites-card__save.is-free-locked {
  color: #8a8a8a;
  opacity: 1;
  cursor: default;
}

.mind-bites-card__save.is-free-locked:hover {
  transform: none;
}

.mind-bites-card__save.is-free-locked i {
  display: none;
}

/* =========================================================
   MOBILE: bottom sheet
   ========================================================= */
@media (max-width: 720px){
    .modal-about {margin-top: 0px;}    
    
  .modal-about__panel{
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;

    height: 70vh;
    width: 100%;

    border-left: none;
    border-top: 1px solid rgba(255,255,255,.12);

    transform: translateY(100%);
  }

  .modal-about.is-open .modal-about__panel{
    transform: translateY(0);
  }
    
.modal-about-button, 
.modal-about-button:visited {
    width: 95% !important;
    margin-top: 0;
    margin-bottom: 30px;
    padding: 15px 5px !important;    
    font-size: 0.65em;
    margin-left: 0;
}
    

    .modal-about-button-center, 
    .modal-about-button-center:visited {    
        width: 70%;
        margin-bottom: 10px;
        padding: 15px 5px !important;          
    }    

    .modal-about-button-list {
        width: 70%;
        margin-bottom: -10px;
    }    
}

/* =========================================================
   BACK TO PARENT BUTTONS
   ========================================================= */
.back-to-parent{
  margin: 60px 0 40px;
  text-align: center;
}

.back-to-parent__btn{
  display: inline-block;
  padding: 13px 16px;
  background: #333;
  color: #fff;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 0.8em !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 6px;
  text-decoration: none;
}

.back-to-parent__btn i {
    padding-right: 5px;
    padding-top: 5px !important;
}

.back-to-parent__btn:hover{
  background: #555;
}

/* =========================================================
   MIND BITES ACORN
   ========================================================= */

/* =========================================================
   ACORN BUTTON — uses SAME POSITIONING as how-to-button
   ========================================================= */
/* ACORN BUTTON — match BOTH #acorn-btn (id) and .acorn-btn (class) */
#acorn-btn,
.acorn-btn{
  position: fixed;
  bottom: 190px;
  right: 40px;
  width: 45px;
  height: 45px;
  border: solid 2px #CEA860;

  /* choose ONE shape */
  border-radius: 16px;

  display: flex !important;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 1000 !important;

  visibility: visible !important;

  background: rgba(11, 40, 56, 0.95);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #CEA860 !important;
  font-size: 23px;

  transition: transform .18s ease, background-color .18s ease;
}

#acorn-btn:hover,
.acorn-btn:hover{
  transform: scale(1.08);
  background-color: rgba(11, 40, 56, 0.85);
}

#acorn-btn:active,
.acorn-btn:active{
  transform: scale(0.95);
}

/* ✅ FIXED: comma between selectors */
#acorn-btn::after,
.acorn-btn::after{
  content: "MIND BITE";
  position: absolute;
  right: 105%;
  top: 50%;
  transform: translateY(-50%) translateX(6px);

  background: rgba(0,0,0,0.75);
  color: #fff;
    padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  font-size: 0.4em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

#acorn-btn:hover::after,
.acorn-btn:hover::after{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}


@media (max-width: 480px){
  #acorn-btn,
  .acorn-btn{
    bottom: 15px;
    right: 75px;
  }
}

/* =========================================================
   ACORN MODAL (Global)
   ========================================================= */

#acorn-modal{
  position: fixed;
  inset: 0;
  z-index: 10000000;
  display: none;
}
#acorn-modal.is-open{ display: block; }

#acorn-modal .acorn-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

/* PANEL = blue shell with a thin, even frame */
#acorn-modal .acorn-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* wider on desktop, always inside viewport */
  width: min(400px, calc(100vw - 32px));
  max-height: min(86vh, 860px);

  display: flex;
  flex-direction: column;

  border-radius: 18px;
  overflow: hidden;

  background: rgba(67,100,109,0.92);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);

  /* THIS creates the thin “blue frame” evenly around the content */
  padding: 12px;
  box-sizing: border-box;
    
  border: 1px solid rgba(255,255,255,0.10);
}

/* topbar sits inside the frame */
#acorn-modal .acorn-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 10px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.10);

  box-sizing: border-box;
}

#acorn-modal .acorn-title{
  font-family: "Oswald-Regular", sans-serif;
  letter-spacing: 0.06em;
  font-size: 14px;
  color: #fff;
  opacity: 0.95;
}

#acorn-modal .acorn-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}

#acorn-modal .acorn-close{
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: "Oswald-Regular";
    letter-spacing: 0.03em;
}


#acorn-modal .acorn-another {
  cursor: pointer;
  color: #f2f2f2;
  border: 1px solid rgba(67, 100, 109, 0.87);
  background: rgba(67, 100, 109, 0.77);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: "Oswald-Regular";
    letter-spacing: 0.03em;
}

/* iframe fills remaining panel height (prevents weird calc issues) */
#acorn-iframe{
  width: 100%;
  flex: 1 1 auto;
  min-height: 420px;     /* desktop safety */
  border: 0;
  display: block;
  background: transparent;

  margin-top: 10px;      /* space under topbar, within frame */
  border-radius: 14px;
  overflow: hidden;
}

/* MOBILE: keep within viewport, no side overflow, maximize height */
@media (max-width: 520px){
  #acorn-modal .acorn-panel{
    width: calc(100vw);
    max-height: calc(100vh);
    padding: 10px;

    /* respect notches */
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  #acorn-modal .acorn-topbar{
    padding: 8px 8px;
  }

  #acorn-iframe{
    min-height: 0;  /* allow it to shrink properly on small screens */
    margin-top: 8px;
  }
    
#acorn-btn::after,
.acorn-btn::after{
  top: -50%;
  right: -10%;
}        

}

/* =========================================================
   SUN BUTTON — uses SAME POSITIONING as how-to-button
   ========================================================= */
/* SUN BUTTON — match BOTH #acorn-btn (id) and .acorn-btn (class) */
#sun-btn,
.sun-btn{
  position: fixed;
  bottom: 265px;
  right: 40px;
  width: 45px;
  height: 45px;
  border: solid 2px #CEA860;

  /* choose ONE shape */
  border-radius: 16px;

  display: flex !important;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 1000 !important;

  visibility: visible !important;

  background: rgba(11, 40, 56, 0.95);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #CEA860 !important;
  font-size: 23px;

  transition: transform .18s ease, background-color .18s ease;
}

#sun-btn:hover,
.sun-btn:hover{
  transform: scale(1.08);
  background-color: rgba(11, 40, 56, 0.85);
}

#sun-btn:active,
.sun-btn:active{
  transform: scale(0.95);
}

/* ✅ FIXED: comma between selectors */
#sun-btn::after,
.sun-btn::after{
  content: "I AM TRANSMISSION";
  position: absolute;
  right: 105%;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  font-size: 0.4em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

#sun-btn:hover::after,
.sun-btn:hover::after{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 480px){
  #sun-btn,
  .sun-btn{
    bottom: 15px;
    right: 15px;
  }
    
#sun-btn::after,
.sun-btn::after{
  top: -50%;
  right: -25%;
}    
    
}

/* GLOBAL WARNING MODAL */
#warning-info-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.35);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100000;
}

/* modal box */
#warning-info-modal .warning-box{
  background:#ffffff;
  padding:30px 32px;
  border-radius:10px;
  width:340px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.20);
  line-height: 1.4em;    
}

/* buttons */
#warning-info-modal button{
  margin:18px 6px 0 6px;
  padding:8px 16px;
  border-radius:6px;
  border:none;
  cursor:pointer;
}

#confirm-delete{
  background:#a97d79;
  color:#fff;
}

#cancel-delete{
  background:#e9e9e9;
}

.warning-box{
  animation:modalPop .18s ease;
}

@keyframes modalPop{
  from{transform:scale(.96);opacity:.6;}
  to{transform:scale(1);opacity:1;}
}

#dashboardToast{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, calc(-50% + 20px));
  background:rgba(0,0,0,0.85);
  color:#f2f2f2;
  padding:12px 18px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  line-height: 1.5em;    
  opacity:0;
  pointer-events:none;
  transition:all .35s ease;
  z-index:9999;
}

#dashboardToast.show{
  opacity:1;
  transform:translate(-50%, -50%);
}

/* ----------------------------------- */
/* NEW FOOTER (PHP INCLUDE VERSION)    */
/* ----------------------------------- */

.footer-new{
    background:#0B2838;
    color:#c49d52;
    padding:25px 20px 20px 20px;
    text-align:center;
    margin-top:120px;
    width:100%;
    box-sizing:border-box;
    overflow:visible;
}

.footer-new-content{
    max-width:1280px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
}

.footer-new-logo{
    text-align:center;
}

.footer-new-logo img{
    width:30px;
    height:auto;
    margin:0 0 10px 0;
    display:inline-block;
}

.footer-new-logo h2{
    color:#deb058;
    margin:0;
    font-size:1em;
    letter-spacing:0.08em;
}

.footer-new-bottom{
    border-top:1px dotted #deb058;
    text-align: center;
    margin: 0 auto;
    padding-top:10px;
    margin-top:18px;
    width:50%;
    box-sizing:border-box;
}

.footer-new-bottom p{
    margin:0;
    font-size:0.7em;
    font-family:"Roboto-Regular";
    text-align:center;
    line-height: 1.5em;
}

/* Mobile */

@media (max-width:480px){

    .footer-new{
        padding:20px 15px;
    }

    .footer-new-logo img{
        padding-top:15px;
    }
    
    .footer-new-bottom {
        width: 100%;
        padding-bottom: 30px;

    }

}

#globalToast{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(.96);
  background:rgba(34,34,34,0.96);
  color:#fff;
  padding:14px 22px;
  border-radius:12px;
  font-family:"Roboto-Medium";
  font-size:15px;
  line-height:1.4em;
  box-shadow:0 15px 40px rgba(0,0,0,0.25);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index:99999;
  pointer-events:none;
}

#globalToast.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, -50%) scale(1);
}

#globalToast{
  white-space:nowrap;
}

sup{
  font-size:0.6em;
  vertical-align:super;
}
.mobile-header {
    display: none;
}

@media (max-width: 480px) {

    .page-header {
        display:none;
    }

    .mobile-header {
        display: inline !important;
    }    
    
    .mobile-header h1 {
        font-size: 1.3em !important;
        margin-bottom: 10px;
    }
    
    .mobile-header .modal-about-button {
        width: 100%;
        margin-left: 2.5%;
        margin-top: 15px;
    }
    
    .sub-heading-instructions {
        display: none;
    }
}