@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

/* Reset some default styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* outline: 1px solid red; */
}

/* ::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar-button {
  display: none;
}

body {
  -ms-overflow-style:none;
} */

/* Hide the scrollbar track */
::-webkit-scrollbar {
  width: 2px; /* Minimal width for the scrollbar */
}

::-webkit-scrollbar-track {
  background: transparent; /* Make the track invisible */
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); /* Small scroll indicator */
  border-radius: 4px; /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5); /* Slightly darker on hover */
}

/* Apply scroll snap to the body */
html,
body {
  /* scroll-snap-type: y mandatory; /* Enable vertical snapping */
  /* scroll-behavior: smooth; */
  /* overflow-y:scroll; */
  /* overflow-x: hidden; */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* Thumb and track colors */

}

html {
  /* overflow-x: hidden;
  overflow-y: visible; */ /* Turning this on affects the sticky control bar for Scripture Reflection */
}

/* Set basic font and background color */
body {
  font-family: "HKGrotesk", sans-serif;
  /* background-color: #261f1b; */
  /* background: #261f1b, #e8a181; */
  background: linear-gradient(to bottom, #261f1b 82%, #e8a181 18%);
  color: #f0f0f0;
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

.visible {
  /* display: block; */
}

/* Sections that snap */
.snap-section {
  /* scroll-snap-align: start; /* Snap sections to the top of the viewport - SEEMS TO BE IN CONFLICT WITH SCROLLIFY */
}

.int-section {
  /* position: absolute; */
}

.betaBanner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  display: none;
}

.betaBannerImage {
  width: 77px;
}

#hamburgerMenuButton {
  position: fixed;
  /* top: 3px; */
  /* top: 3%; */
  /* top: 4vh; */
  top: 3vh;
  right: 1px;
  z-index: 9998;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  
  /* To try align it with header-links */
  height: 26px;
}

.hamburgerMenuImage {
  height: 39px;

  /* To try align it with header-links */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.hamburgerMenu {
  visibility: hidden;
  opacity: 0;
  display: flex !important;
  flex-direction: column;
  /* align-items: flex-end; */
  align-items: center;
  justify-content: space-evenly;
  list-style: none;
  padding: 10px;
  margin: 0;
  width: 107px;
  height: 210px;
  border-radius: 10px; /* Optional: Add border radius for rounded corners */
  transition: opacity 0.6s ease, visibility 0.6s ease; /* Smooth fade-in/out effect */
  background-color: #5b6d55;
  position: fixed;
  /* top: 70px; */
  top: 7vh;
  right: 0;
  z-index: 999999;
  font-size: 13px;
}

.hamburgerMenu.visible {
  visibility: visible;
  opacity: 1;
  
}

.hamburgerMenu a {
  text-decoration: none;
  color: #FFFFFF;
}

.hamburgerMenu .menuDivider {
  position: static;
}

/* Styling pagination for snap sections */
.pagination-container, .pagination-container-mobi {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
}

.pagination-container-mobi .pagination li {
  width: 30px; /* Increase the clickable area width */
  height: 30px; /* Increase the clickable area height */
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pagination-container-mobi {
  display: none; /* To be displayed on touch screens only */
}

.menuDivider {
  opacity: 1; 
  width: 77px; 
  /* height: 0.3px;  */
  height: 0.5px; 
  background-color: #FFFFFF;
  position: absolute;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Smooth transition for opacity change */
}

/* Pagination styles */
.pagination {
  display: flex;
  flex-direction: column;
  /* align-items: flex-end; */
  align-items: center;
  list-style: none;
  padding: 10px;
  margin: 0;
  width:127px;
  height: 210px;
  border-radius: 10px; /* Optional: Add border radius for rounded corners */
  transition: background-color 0.3s ease-in-out; /* Smooth transition for background color change */
  /*background-color: #5b6d55; /*visible*/

}

.section-name {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Smooth transition for opacity change */
  margin-right: 15px;
}

.pagination li a .section-name:hover {
  color: #e8a181;
}

.pagination:hover .section-name {
  opacity: 1; /* Show section names when hovering over the pagination container */
  transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity change */
}

.pagination:hover {
  /* background-color: #7FB8B0; */
  background-color: #5b6d55;
  transition: background-color 0.3s ease-in-out; /* Smooth transition for background color change */
}

.pagination li {
  display:flex;
  align-items: center;
  margin: 8px 0; /* More spaced out */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition for size change */
}

.pagination li .bullet {
  position: absolute;
  right: 10px;
  width: 6px; /* Smaller width for inactive dots */
  height: 6px; /* Smaller height for inactive dots */
  background-color: #FFFFFF;
  border-radius: 50%;
  /* box-shadow: 0px 1px 5px black; */
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}

.pagination li.begin-section .section-name {
  /* margin-right: 3px; */
}

.pagination li.active.begin-section .section-name {
  margin-right: 15px;
}

.begin-bullet {
  position: absolute;
  /* transform: translate(45px, 0); */
  right: 5px;
  width: 17px;
}

.pagination li.active.begin-section .begin-bullet {
  content: url('Assets/Graphics/SectionBegin/BeginIconActiveShadow.png'); /* Path to the active icon */
  width: 22px;
  position: absolute;
  /* transform: translate(45px, 0px); */
  right: 2px;
}

.pagination li.active .bullet {
  width: 10px; /* Bigger width for active dot */
  height: 10px; /* Bigger height for active dot */
  background-color: transparent; /* Transparent background */
  border: 1px solid #FFFFFF; /* Outline for active dot */
  position:relative;
  /* box-shadow: 0px 1px 5px black; */
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), inset 0px 1px 2px rgba(0, 0, 0, 0.3); /* Inner shadow */;
  position: absolute;
  right: 8px;
}

.pagination li .section-name {
  opacity: 0; /* Hide section names by default */
  /* margin-right: 15px; /* Space between the name and the dot */
  color: #FFFFFF; /* Color for the section names */
  font-size: 14px; /* Font size for the section names */
  /* align-items: flex-end; */
  white-space: nowrap;
  font-family: "HKGrotesk", sans-serif;
  font-weight: 600;
  /* text-shadow: 0px 1px 5px black; */
}

.pagination li .menuDivider {
  opacity: 0; /* Hide dividers by default */
  transform: translate(-7px, 20px);
}

.pagination:hover li:not(:last-child) .menuDivider {
  opacity: 1; /* Show dividers when hovering over the pagination container */
  transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity change */
}

.pagination li.active .section-name{
}

.pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* background-color: #FFFFFF; */
  border-radius: 50%;
  text-decoration: none;
}


/* Style for headings */
h1 {
  color: #0056b3;
  text-align: center;
  margin-bottom: 10px;
}

/* Style for paragraphs */
p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 10px 0;
}

.cloudscontainer {
  position: absolute;
  top: 4880px;
  width: 100vw;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.clouds {
  animation: clouds 120s linear infinite;
}

@keyframes clouds {
  0% {
    transform: translatex(-100%);
  }
  100% {
    /*transform: translatex(35%);*/
    transform: translatex(100%);
  }
}

/*.clouds1 {
  float: left;
}

.clouds2 {
  float: right;
}

.moreclouds {
  animation: moreclouds 5s linear infinite;
  min-width: 3224px;
  position: absolute;
  top: 1740px;
  right: 2800px;
}

@keyframes moreclouds {
  0% {
    transform: translatex(-100%);
  }
  100% {
    /*transform: translatex(35%);*/
/*transform: translatex(100%);
  }
}*/

.cloudsmobile {
  animation: animatemobile 120s linear infinite;
  min-width: 3224px;
  position: absolute;
  top: 5140px;
}

@keyframes animatemobile {
  0% {
    transform: translatex(-100%);
  }
  100% {
    transform: translatex(90%);
  }
}

.section-bg {
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  /* margin-bottom: -1px; /* To avoid lines in between background images */
  /* margin-top: -1px; /* To avoid lines in between background images */
}

.homeMenu {
  height: 1080px;
  position: relative;
}

#homeBG1 {
  background-image: url("Assets/Graphics/Backgrounds/HomeBG1-10.png");
  height: 1993px;
}

#homeBG2JR {
  background-image: url("Assets/Graphics/SectionJourney/HomeBG2-10JR.png");
  height: 1080px;
  padding-top: 30px;
  /* overflow: hidden; */
}

.getinvolvedMenuContainer {
  max-width: 1440px;
  height: 100vh; /* Extra 10vh to allow for border radius to be below vh screen */
  margin: auto;
  /* overflow-x: hidden; */
  /* margin-top: -20px; */
}

.getinvolvedMenuTop {
  position:relative;
  height: 50vh;
  z-index:1;

}

#titleInvolved {
  position: relative;
  margin-top: 66px;
  max-width: 100vw;
  /* left: 50%;
  transform: translateX(-46%); */
}

#contributeTextContainer {
  position: absolute;
  width: 526px;
  bottom: 0;
  right: 96px;
  /* transform: translateY(38px); */
  transform: translateY(23px);
}

#contributeTextContainer a {
  width: 300px;
  left: 100%;
  transform: translateX(-100%);
  position: relative;
}

#getinvolvedContributeButton {
  position: relative;
  left: 100%;
  transform: translateX(-100%);
}

/* .getinvolvedButton {
  position: relative;
  left: 100%;
  transform: translateX(-100%);
} */

.getinvolvedRocks {
  position:absolute;
}

#rocksTop {
  top: 0;
  left: 450px;
}

#rocksRight {
  top: 60px;
  right: 275px;
}

#meteorBig {
  top: 30px;
  right: 25px;
}

#meteorSmall {
  top: 100px;
  right: -40px;
}

.getinvolvedCol {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.getinvolvedHeader {
  color: #fbdd72;
  font-size: 36px;
  /* font-weight: bold; */
}

.getinvolvedSubHeader {
  color: #ffffff;
  font-size: 24px;
margin-top: -6px;
}

.getinvolvedDescription {
  color: #ffffff;
  font-size: 20px;
  margin-top: -2px;
line-height:1.2;
}

.getinvolvedButton {
  margin-top: 21px;
  background-color: #976329;
  color: white; /* Text color */
  border: none; /* Remove default border */
  padding: 10px 20px; /* Add some padding */
  font-size: 20px; /* Font size */
  border-radius: 25px; /* Make it rounded */
  cursor: pointer; /* Add a pointer on hover */
  transition: background-color 0.3s ease; /* Smooth hover effect */
  width: 300px;
}

.getinvolvedMenuBottom {
  position:relative;
  background-color: rgba(2,55,66,0.8);
  /* border-radius: 50px; */
  border-top-right-radius: 50px; /* Apply border-radius to the top-right corner */
  border-top-left-radius: 50px; /* Apply border-radius to the top-left corner */
  height: 50vh;
  overflow: hidden;
  }

.getinvolvedMenuBottomRadius {
  background-color: rgba(2,55,66,0.8);
  /* background-color: rgba(4, 73, 86, 1); */
  border-bottom-right-radius: 50px; /* Apply border-radius to the top-right corner */
  border-bottom-left-radius: 50px; /* Apply border-radius to the top-left corner */
  height: 50px;
  max-width: 1440px;
  margin: auto;
  }

#whereTextContainer {
  position: absolute;
  width: 533px;
  top: 32px;
  left: 96px;
}

.roadmap, .roadmap-mobi {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  /* position: relative; */
  scroll-behavior: smooth; /* Smooth scrolling */
  padding: 10px 0; /* Add some padding for aesthetics */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */

}

.roadmap {
  overflow: visible;
}

.roadmapcontainer {
  height: 300px;
  /* top: 45px; */
  /* top: 35px; */
  /* top: 80px; */
  top: 130px;
  position: relative;
}

.roadmapcontainer::before,
.roadmapcontainer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px; /* Adjust the width of the fade-out effect */
  pointer-events: none; /* Allow interactions with elements underneath */
  z-index: 1; /* Ensure the fade-out effect is above the content */
  height: 260px;
}

.roadmapcontainer::before {
  left: 0;
  background: linear-gradient(to right, rgba(4, 73, 86, 1), rgba(4, 73, 86, 0));
}

.roadmapcontainer::after {
  right: 0;
  background: linear-gradient(to left, rgba(4, 73, 86, 1), rgba(4, 73, 86, 0));
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari) */
.roadmap::-webkit-scrollbar, .roadmap-mobi::-webkit-scrollbar {
  display: none;
}

/* Fade-out effect for the left and right edges */
.roadmap-mobi::before,
.roadmap-mobi::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px; /* Width of the fade effect */
  pointer-events: none;
  z-index: 1;
}

.roadmap-mobi::before {
  left: 0;
  /* background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); */
}

.roadmap-mobi::after {
  right: 0;
  /* background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); */
}

/* Hide fade-out effect when at the edges */
.roadmap-mobi.at-start::before {
  display: none;
}

.roadmap-mobi.at-end::after {
  display: none;
}

#roadmapPath {
  position: relative;
  top: -15px;
}

.centreRoadmapProgressImage {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  margin-right: 4px;
}

/* Indicator bubbles */
.roadmap-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* bottom: -30px; /* Position below the roadmap */
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  height: 20px /* To match the indicator active height so it doesn't move up and down if scrolling */
}

.roadmap-indicators .indicator {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: #FFFFFF;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.roadmap-indicators .indicator.active {
  height: 20px;
  width: 20px;
  border: 3px solid #FFFFFF;
  background-color: transparent; /* Active bubble color */
}

#roadmapProgress{
  position: absolute;
  left: 148px;
    /* left: 192px; */
    /* top: 50%; */
    top: 43%;
    transform: translateY(-40%);
    z-index: 1;
}

.phaseMarker, .phaseMarker-mobi{
  position: absolute;
  width: 28px; /* Adjust the width as needed */
  height: 28px; /* Adjust the height as needed */
  background-color: #FFFFFF; /* Solid color for the circle */
  border-radius: 50%; /* Make the element a circle */
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); /* Add a bottom shadow */
}

.phaseMarker.active, .phaseMarker-mobi.active {
  background-color: #D95C5C; /* Solid color for the circle */
}

.phase1Marker {
  /* top: 57px; */
  top: 51px;
  left: 149px;
}

.phase2Marker {
  /* top: 49px; */
  top: 43px;
  left: 484px;
}

.phase3Marker {
  /* top: 104px; */
  top: 100px;
  left: 778px;
}

.phase4Marker {
  /* top: 52px; */
  top: 47px;
  left: 1140px;
}

.phaseText {
  position: absolute;
  width: 200px;
  color: #B4B4B4;
}

.phaseText.active {
  color: #FFFFFF;
}

.phaseHeader {
position: relative;
left: -17px;
font-size: 20px;
}

.phaseItems {
text-wrap: auto;
}

#phase1Text {
  top: 114px;
  left: 149px;
}

#phase2Text {
  top: 107px;
  left: 457px;
}

#phase3Text {
  /* top: -7px; */
  top: -18px;
  left: 742px;
}

#phase4Text {
  /* top: -59px; */
  top: -65px;
  left: 1086px;
}

#getinvolvedJourneyButtonContainer{
  bottom: 67px;
  position: absolute;
  right: 96px;
}

.getinvolvedthoughtbubble{
  top: 14px;
  right: 8px;
  position: relative;
}

.support-overlay {   
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10011;
    overflow-y: auto;
    display: none; /* Hidden by default */
    padding: 0;
    margin: 0;
}

.support-overlay.active {
  display: block;
}

.support-overlay-close {
  position: fixed;
  /* top: 24px;
  right: 24px; */
      top: 8vh;
    right: 7vw;
  z-index: 10000;
  width: 20px;      /* Adjust size as needed */
  height: 20px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.support-overlay-logo {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10000;
    width: 50px;
    height: auto;
}

.support-popup {
    line-height: 1.1;
    color: #FFFFFF;
    background-color: #003743;
    width: 90vw;
    height: 90%;
        /* padding: 1px; */
    transform: translateY(-50%);
    top: 50%;
    position: relative;
    overflow: scroll;
    margin: auto;
}

.visionStatement {
    color: #F9EAE0;
    font-size: 36px;
    text-align: center;
    /* letter-spacing: 1px; */
    width: 80%;
    position: relative;
    margin: 50px auto 0;
}

.visionCaption {
    color: #F9EAE0;
    font-size: 37px;
    text-align: center;
    margin-top: 20px;
}

.supportTiers {
    display: flex;
    flex-direction: column;
    /* width: 70%; */
    width: 90%;
    max-width: 1000px;
    margin: 20px auto;
    align-items: center;
    justify-content: center;
}

#donation-toggle {
    background-color: #274E57;
    border-radius: 30px;
    width: 100%;
    height: 66px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.toggle-btn {
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 25px;
  border: 0px solid #ccc;
  color: #FFFFFF;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
  transition: all 0.3s ease;
  width: 50%;
    font-family: 'HK Grotesk', sans-serif;
  font-weight: 600;
}
.toggle-btn.active {
    background: #002831;
    color: #FFFFFF;
    border-color: #FFFFFF;
    border: 2px solid #ccc;
}

#currency-selector-container {
    font-size: 20px;
    font-weight: 500;
    margin-top: 12px;
}

#currency-selector {
  /* border: none; */
  /* outline: none; */
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  padding: 6px 6px;
  /* Optional: add custom styles */
  /* appearance: none; */
  /* -webkit-appearance: none; */
  /* -moz-appearance: none; */
}

#one-time-panel {
    display: none;
    width: 100%;
      height: 55vh;
}

#onetimeSupporter {
    margin-top: 10px;
    width: 100%;
}

/* Add to your style.css */
#membership-panel {
  display: flex;
  flex-direction: row;
  gap: 38px;
  justify-content: center;
  margin-top: 10px;
  /* height: 55vh; */
  align-items: stretch; /* Ensures children stretch to same height */
  width: 100%;
}

.membership-tier {
  /* background: #fff; */
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  /* padding: 32px 24px; */
  /* width: 280px; */
  display: flex;
  flex-direction: column;
  /* height: 543px; */
  align-items: center;
  width: 50%;
  /* height: 100%; */
    /* min-width: 0; */
  /* flex: 1 1 0;   */
}

.tier-top {
  background: #002831;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 0 0 20%;
  /* height: 24%; */
  /* padding: 24px 16px 12px 16px; */
  border-radius: 16px 16px 0 0;  
  width: 100%;
  overflow:hidden;
}

#onetimeSupporterTop {
    height: 100px;
    flex: inherit;
}

.tier-img {
  width: auto;
  height: 100%;
  object-fit: contain;
      margin-left: 26px;
  /* margin-bottom: 12px; */
}

.tier-title {
  /* margin-bottom: 12px; */
  color: #FFDF6D;
  font-size: 37px;
  text-align: center;
}

.tier-bottom {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;;
    /* padding: 24px 16px 24px 16px; */
    background: #274E57;
    border-radius: 0 0 16px 16px;  
    width: 100%;
    /* height: 76%; */
    padding: 24px;
}

.tier-bottom-text {
    font-family: 'HK Grotesk', sans-serif;
      line-height: 1.2;
}

.tier-price {
    font-weight: 700;
    font-size: 26px;
    /* margin-bottom: 10px; */
    margin: 0;
    text-align: center;
}

.tier-desc {
  margin-top: 0;
  margin-bottom: 24px;
  /* text-align: left;; */
  color: #FFFFFF;
    font-family: 'HK Grotesk', sans-serif;
  font-weight: 400;
  font-size: 20px;
}

.custom-bullet-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 16px 0;
}

.custom-bullet-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
  font-size: 20px;
  color: #fff;
  font-family: 'HK Grotesk', sans-serif;
}

/* Default: regular circle bullet */
.custom-bullet-list li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 7px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
}

/* Image bullet for specific items */
.custom-bullet-list li.img-bullet::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 14px;
    height: 14px;
    background-image: url('Assets/Graphics/SectionJourney/plusbullet.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0;
    background-color: transparent;
}

.become-link-btn {
    width: 100%;
    margin-top:10px;
}

.tier-btn {
  margin-top: auto;
  padding: 10px 32px;
  background: #976325;
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'HK Grotesk', sans-serif;
  font-weight: 600;
  width:100%;
}

.tier-btn:hover {
  background: #7B6857;
}

.socialmediaiconscontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  position: fixed;
  bottom: 24px;
  right: 32px;
  z-index: 10010;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Optional fade-in effect */
}

.socialmediaicons {
  width: 18px;
}

#homeBG3 {
  background-image: url("Assets/Graphics/Backgrounds/HomeBG3-10.png");
  height: 2002px;
}

#homeBG4AB {
  background-image: url("Assets/Graphics/SectionAboutUs/HomeBG4-10AB.png");
  height: 1080px;
}

.aboutusContainer {
  display: block;
}

.aboutusMenuTop {
  position: relative;
  height: 100vh;
  z-index: 2;
  max-width: 1280px;
  margin: auto;
  /* padding-top: 80px; */ /* Shifting to the top of the container for snapping */
  padding-top: 12px;
}

.titleAboutUs {
  position: absolute;
  /* position: relative; */
  top: 75px;
  /* left: -22px; */
  left: 45px;
  /* height: 49vh; /* To cater for responsive screen sizes */
  /* width: 946px;
  max-width: 1080px; */
  max-width: 100vw;
}

#balloonAboutUs {
  position: absolute;
  /* position: relative; */
  /*left: calc(50% - calc(253px / 2));*/
  left: 50%;
  transform: translateX(-57%);
  top: -96px;
  max-width: 252px;
  width: 178px;
}

#statuesAboutUs {
  position: absolute;
  top: 60px;
  right: 58px;
  z-index: 1;
  height: 426px;
}

.aboutusTextboxTop {
  position: absolute;
  bottom: 0;
  background-image: url("Assets/Graphics/SectionAboutUs/TextBubbleTop.png");
  height: 47vh;
  /* height: 327px; */
  max-width: 1198px; /* Actual bubble is 1152px, but image file has margins */
  width: 100vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  left: 50%;
  transform: translateX(-50%);
}

.aboutusTextTopContainer {
  max-width: 960px;
  width: 100vw;
  margin: auto;
  margin-top: 71px;
}

.aboutusTextTitle {
  color: #9D4411;
  font-size: 32px;
  /* font-weight: bold; */
  line-height: 1.15;
  max-width: 960px; /* Actual bubble is 1152px, but image file has margins */
  width: 100vw;
}

.aboutusTextTop {
  color: #9D4411;
  font-size: 20px;
  line-height: 1.2;
  max-width: 960px; /* Actual bubble is 1152px, but image file has margins */
  width: 100vw;
}

#textbubbleArrowDown {
  position: absolute;
  bottom: 18px;
  right: 62px;
}

.aboutusMenuBottom {
  position: relative;
  height: 100vh;
  z-index: 2;
  max-width: 1280px;
  width: 100vw;
  margin: auto;
  /* margin-top: -30vh; */
}

.aboutusTextboxBottom {
  position: absolute;
  top: 0;
  background-image: url("Assets/Graphics/SectionAboutUs/TextBubbleBottomwPointer.png");
  height: 84vh;
  /* height: 327px; */
  max-width: 1198px; /* Actual bubble is 1152px, but image file has margins */
  width: 100vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -3px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aboutusTextBottom {
  position: absolute;
  top: 77px;
  display: grid;
  /* grid-template-columns: 220px 740px; */
  grid-template-columns: 220px auto;
  column-gap: 22px;
  color: #9D4411;
  max-width: 960px; /* Actual bubble is 1152px, but image file has margins */
  width: 100vw;
}

.aboutusTextBottomGrid {
padding: 10px;
}

.aboutusTextBottomLeftCol {
  font-size: 32px;
  line-height: 1.15;
}

.aboutusTextBottomRightCol {
  font-size: 20px;
  line-height: 1.2;
}

#textbubblePointer {
  position: absolute;
    bottom: 127px;
    left: 62px;
}

#statueSpeaking {
  /* position: absolute;
  bottom: -84px;
  left: -174px; */
  position: relative;
  bottom: 279px;
  left: -96px;
  z-index: 1;
}

.aboutusBePart a {
  margin-top: 21px;
  background-color: #9d4411;
  color: #ffffff;
  border: none; /* Remove default border */
  padding-top: 8px; /* Add some padding */
  font-size: 20px; /* Font size */
  border-radius: 25px; /* Make it rounded */
  cursor: pointer; /* Add a pointer on hover */
  transition: background-color 0.3s ease; /* Smooth hover effect */

  text-decoration: none;
  text-align: center;
  position: absolute;
  /* bottom: 108px;
  width: 320px; */
  bottom: 160px;
  width: 380px;
  right: 123px;
  height: 42px;
}


.getinvolvedtext {
  text-decoration: none;
  color: #f0f0f0;
  text-align: center;
  font-size: 22px;
  letter-spacing: 5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#aboutussocialmediaicons {
  display: flex;
  gap: 30px;
}

#homeBG5 {
  background-image: url("Assets/Graphics/Backgrounds/HomeBG5-10.png");
  height: 1997px;
  margin-top:-1px;
}

#homeBG6BG {
  background-image: url("Assets/Graphics/SectionBegin/HomeBG6-10BG.png");
  height: 1080px;
  margin-top: -1px;
}

.begin-snap {
  position: absolute;
  bottom: 100vh;
  /*padding-top: 4%; /* For snapping position */
  height: 27px;
  width:100%;
}

.beginMenuContainer {
  /* padding-top: 1px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  bottom: calc(100vh - 107%); */
  padding-top: 1px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22vh;
  /* bottom: 29vh; */
  /* bottom: 15vh; /* For laptop */
  /* pointer-events: none; */
}

.header-links {
  position: absolute;
  /*position: fixed; /* Sticky header */
  /*top: 0; /* Sticky header */
  display: flex;
  justify-content: flex-end;
  /* bottom: 96vh; */
  bottom: 97vh;
  /* width: calc(100vw - 255px); /* Making room for the Ko-Fi button*/
  width: calc(100vw - 230px); /* Making room for the Ko-Fi button
  /* width: calc(100vw - 200px); /* Making room for header-links-bullet
  /*padding-top: 30px; /* For snapping position */
  z-index: 99;
  transition: opacity 0.6s ease-in-out; /* Optional fade-in effect */
  font-size: 18px;
  /* height: 65px; */
  height: 26px;
  /* align-items: flex-end; */
  align-items: center;
  padding-bottom: 2px;
}

/* .header-link {
  text-decoration: none;
  color: #f0f0f0;
  margin-left: 40px;
  letter-spacing: 6px;
  font-size: 17px;
} */
 
.header-links.mobile-only {
  display: flex;
  width: 100vw;
  justify-content: flex-start;
  align-items: center;
  height: 46px;
  padding-left: 4px;
}

.header-link {
  text-decoration: none;
  color: #f0f0f0;
  /* margin-left: 15px; */
  margin-left: 40px;
  margin-right: 8px;
  letter-spacing: 4px;
  font-size: 16px;
}

.header-links-bullet {
  width: 8px; /* Smaller width for inactive dots */
  height: 8px; /* Smaller height for inactive dots */
  background-color: #FFFFFF;
  border-radius: 50%;
  margin-left: 15px;
}

.headergetinvolved {
  position: relative;
}

.header-icon {
  height: 20px; /* Adjust to match header link height */
  width: auto;
  display: inline-block;
  margin-bottom: -4px;
  margin-right: 2px;
}

/* Floating Ko-fi Button */
.floating-kofi-link {
  position: fixed;
  /* bottom: 96vh; */
  /* top: 4vh; */
  top: 3vh;
  right: 32px;
  z-index: 10010;
  display: flex;
  align-items: center;
  background: transparent;
  /* border-radius: 32px; */
  /* box-shadow: 0 4px 16px rgba(0,0,0,0.12); */
  /* padding: 10px 22px; */
  transition: opacity 0.4s, visibility 0.4s;
  opacity: 1;
  visibility: visible;
  gap: 6px;
}

.floating-kofi-link .kofi-logo {
  height: 20px; /* Adjust to match header link height */
  width: auto;
  display: inline-block;
  margin-bottom: 1px;
}

.floating-kofi-link .kofi-text {
  font-family: inherit;
  font-weight: 600;
  /* font-size: 1.1rem; /* Match header link size */
}

/* Fade out when hidden */
.floating-kofi-link.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.font-sample-container {
position: relative;
top: 40%;
font-size: 20px;
}

#beginMenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 600px; */ /* Removed to allow for smaller height screens */
  row-gap: 20px;
  margin-top: 40px;
}

.beginLogo {
  max-width: 150px;
  height: auto;
}

.beginMenuWhatDoToday {
  letter-spacing: 6px;
  text-align: center;
  color: #ffffff;
  font-size: 19px;
  width: 245px;
  line-height: 1.16;
}

.menu {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center;
  gap: 10px; /* Space between items */
}

.menu-link {
  text-decoration: none;
  color: #ffffff;
  font-size: 34px;
  letter-spacing: 10px;
  line-height: 1.16;
  text-align: center;
  font-family: "HKGrotesk", sans-serif;
}

hr.dashed {
  border-top: 1px dashed #ffffff;
  border-bottom: none;
  width: 290px;
  margin: 10px;
}

.menu-item {
  letter-spacing: 3px;
  font-size: 12px;
  text-align: center;
  font-family: "HKGrotesk", sans-serif;
  color: #ffffff;
  margin-top: 0;
  line-height: 1.16;
}

/*.divider {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 250px;
  height: 2px;
  background-color: rgb(255, 255, 255);
}*/

.playPauseBG {
  margin-top: -25px;
}

.floatingchat-container-mobi {
  width: 180px !important; /* To shorten the button so it doesn't affect the hamburger menu */
}

.floatingchat-container-wrap {
  opacity: 0; /* Hide the button */
  pointer-events: none; /* Disable interactions while hidden */
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Optional fade-in effect */
}

.floatingchat-container-wrap.positioned {
  opacity: 1; /* Show the button after positioning */
  pointer-events: auto; /* Re-enable interactions */
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Optional fade-in effect */
}

.floatingchat-container-wrap-mobi {
  opacity: 0; /* Hide the button */
  pointer-events: none; /* Disable interactions while hidden */
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Optional fade-in effect */
}

.floatingchat-container-wrap-mobi.positioned {
  opacity: 1; /* Show the button after positioning */
  pointer-events: auto; /* Re-enable interactions */
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Optional fade-in effect */
}

.floatingchat-donate-button {
  /* font-family: "HKGrotesk", sans-serif !important;
  font-size: 20px !important; */
  letter-spacing: 2px;
}

#homeBG7 {
  background-image: url("Assets/Graphics/Backgrounds/HomeBG7-10.png");
  height: 3519px;
  z-index: 2;
  position: relative;
}

/* SCRIPTURE REFLECTION SECTION */
#ScriptureReadingsSection {
  /*background-image: url("Assets/Graphics/SectionScriptureReflection/HomeBG8-10SRFull.png");*/
  margin-top: -800px;
  color-scheme: light dark;
}

#CustomScriptureReadings {
  position: relative;
}

/*#SRBGUpper {
  background-image: url(Assets/Graphics/SectionScriptureReflection/SRBGUpper2600.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}*/

#SRBackground {
  position: absolute;
  /*background-image: url(Assets/Graphics/SectionScriptureReflection/HomeBG8-10SRReading.png);*/
  background-image: url(Assets/Graphics/SectionScriptureReflection/HomeBG8-10SRReading1.png);
  /*background-image: url(Assets/Graphics/SectionScriptureReflection/HomeBG8-10SR2600.png);*/
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transition: opacity 2s ease;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

#ScriptureReadingsContainer {
  /*opacity: 0;*/
  /*padding: 10px;*/ /*2024/10/08 - Aaron changed to allow controls bar to blend in with container*/
  /*font-size: 23px;*/ /*2024/10/24 - Aaron changed to allow reflection guide font to be resized*/
  /*width: 100%;*/
  --readingGuideWidth: 100%;
  --stickySlideControlsWidth: 100%;
  padding-top: 10%;
}

.Universalis_date {
padding-top: 4%;
}

/* #gospel span {
  color: white;
} */

#SRHeader {
  display: flex;
  position: sticky;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  margin-left: 2.5%;
  margin-right: 3.5%;
  top: 4%;
}

.floatingImage {
  height: 24px;
}

/* #extractActiveDesktop {
  display: none;
} */

#ScriptureReadingsContainer {
  /*transform: translateX(5%); Why was this put in here ya?*/
  font-size: 23px; /*2024/10/24 - Aaron changed to allow reflection guide font to be resized*/
  /* margin: 0;*/
  position: relative;
  /* max-width: 953px; */
  margin: auto;
  z-index: 3;
}

#SRControls {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  bottom: 0;
  flex-direction: column;
  width: 100%;
  max-width: 100vw;
  /* z-index: 7; */
  z-index: 5;
  /*background: inherit;*/
  background-image: url(Assets/Graphics/SectionScriptureReflection/HomeBG8-10SRReading1.png);
  background-attachment: fixed;
  background-size: cover;
  transition: opacity 1s ease;
  /* z-index: 9999; */
}

#nextPrevReadingBar {
  background: inherit;
  overflow: hidden;
  /*height: 5vh;*/ /* Height controlled through "media only" at Additional CSS */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*z-index: 1;*/
}

#nextPrevReadingWrapper {
  /*width: 50%;*/ /* Height controlled through "media only" at Additional CSS */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  max-width: 1334px;
  width: 70%;
}

.cancelHighlightsImage {
  width: 30px !important;
}

#extractButtonMobile {
  display: none;
}

#drawerLine {
  all: unset;
  cursor: pointer;
  padding-top: 5px;
}

#prevReading {
  position: relative;
  left: 0;
}

#nextReading {
  position: relative;
  right: 0;
}

#controlsBar {
  /* background: inherit; Moved to "media query" at additional CSS to allow mobile controls bar to be a different colour */
  overflow: hidden;
  /*height: 8vh;*/ /* Height controlled through "media only" at Additional CSS */
  width: 100%;
  /*display: flex;*/ /* Display controlled through "media only at Additional CSS*/
  align-items: center;
  justify-content: center;
  bottom: 0;
  display: flex;
  height: 8vh;
  background: inherit;
}

.controlsWrapper {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  max-width: 1715px;
  margin-left: auto;
  margin-right: auto;
}

#guideDrawer {
  /*height: 36vh; Moving this to media query*/
  width: 100%;
  background: #483b34;
  /* position: absolute; */ /* moved guidedrawer div out of SRcontrols div */
  position: sticky;
  bottom: 0;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  /* border-top-left-radius: 1rem;
  border-top-right-radius: 1rem; */
  z-index: 9;
  overflow: hidden;
  padding-left: 20px;
  transition: height 0.5s ease-in-out;
}

#guideWindow {
  position: relative;
  height: 100%;
  /*width: 1250px;*/
  width: 100%;
  max-width: 1280px;
  overflow: hidden;
  margin: 0 auto;
  padding-top: 28px;
  touch-action:pan-y;
}

/*#guideHeaderWrapper {
	width: 80%;
	overflow: hidden;
	position: relative;
}*/

#guideIndicators {
  position: relative;
  /* margin-top: 28px; */
  /* padding-left: 10px; */
  margin-bottom: 14px;
  top: 3px;
  left: -5px;
  display: flex;
  /* overflow-x: auto; /* Make it horizontally scrollable */
  overflow-y:hidden;
  white-space: nowrap; /* Prevent wrapping */
  scroll-behavior: smooth; /* Smooth scroll when indicator moves */
  scrollbar-width: none; /* Hide the scrollbar for a cleaner look */
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

/* Hide the scrollbar in WebKit browsers (Chrome, Safari) */
#guideIndicators::-webkit-scrollbar {
  display: none;
}

/* Indicators */
.SRGindicators,
.star-indicators,
.additional-indicator {
  display: flex;
  justify-content: center;
  /* margin-left: 10px; */
  align-items: center;
}

.SRGindicator {
  width: 10px;
  height: 10px;
  /* background-color: #ccc; */
  background-color: #FFFFFF;
  border-radius: 50%;
  margin: 0 7px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Active bubble */
.SRGindicator.active {
  background-color: #ffdf6d;
}

.star-indicators {
  margin-left: 7px;
  height: 31px;
}

.star-indicator {
  /*font-size: 22px;*/
  /* font-weight: bold; */
  /* color: #e2d3b2; */
  color: #FFFFFF;
  margin: 0 2px;
  cursor: pointer;
  transition: color 0.3s;
}

.star-indicator.active {
  color: #ffdf6d; /* Highlight color for active letter */
}

.additional-indicator {
  margin-left: 2px;
}

.guidePrepare {
  font-size: 24px;
  color: #ffdf6d;
}

#guideWrapper {
  margin: 0; /*auto*/
  /* margin-top: 3vh; */
  /*max-width: 1250px;*/
  width: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.reflectionGuide {
  /*min-width: 1250px;*/
  flex: 1 0 100%; /* Each sub-container takes 100% of the parent width */
  /* height: auto; /* Auto height to allow the sub-container to grow with content */
  height: 100%;
  box-sizing: border-box; /* Include padding in the width calculation */
  white-space: normal; /* Allow text to wrap to multiple lines */
  word-wrap: break-word; /* Break long words if necessary */
  /* padding-left: 10px;
  padding-right: 10px; */
}

/*.reflectionGuide p {
	font-size: 15px;
} Moved to Global CSS media query*/

#closeReflectionGuide {
  position: absolute;
  z-index: 99999;
  height: 14px;
  display: flex;
  margin-left: auto;
  top: 28px;
  right: 28px;
}

#RGNextPrevWrapper {
  display: flex;
  position: absolute;
  bottom: 28px;
  width: 136px;
  height: 22.5px;
  left: 100%;
  transform: translateX(-100%);
}

.RGNextPrev {
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  position: absolute;
  margin: 0;
  cursor: pointer;

}

#RGPrev {
  /* bottom: 10px; */
  left: 4%;
}

#RGNextPrevImage {
  height: 19px;
}

#RGNext {
  /* bottom: 10px; */
  right: 4%;
}

.notPlayButton {
  all: unset;
  cursor: pointer;
  /* height: 17px; */ /* Height controlled through "media only" at Additional CSS */
  margin: 0;
  display: flex;
}

#sliderWrapper {
  position: absolute;
  transform: rotate(-90deg) translate(111px, -62px);
  width: 154px;
  height: 30px;
  padding-left: 10px;
}

#volumeSlider {
  /*display: none;*/
  cursor: pointer;
  margin: 0;
  /*position: absolute;
transform: rotate(-90deg) translate(80px,-73px);*/
  z-index: 99999;
}

#playPauseButton {
  /* margin-right: 5px; */
}

#pauseButtonSR {
  /*display:none;*/
}

.playButton {
  all: unset;
  cursor: pointer;
  display: flex;
  /*	height: 32px;*/ /* Height controlled through "media only" at Additional CSS */
}

/* DailyScriptureReflection.css */
/*For mobile default, desktop media queries is at the bottom*/
body {
  margin: 0;
  /*Needed to remove margin*/
}

body.disableScrolling {
  overflow-y: hidden;
}

html.disableScrolling {
  overflow-y: hidden;
  position: relative;
}

#ScriptureReadingsLoader {
  margin: auto;
  text-align: center;
}

.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#ScriptureReadingIntro {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px;
  padding-top: 100px;
  padding-bottom: 100px;
  font-size: 23px;
  background-image: url(https://spadeandcor.com/wp-content/uploads/2021/12/Beige-grain-min.jpg);
  text-align: center;
  color: #7b6857;
}

#ScriptureReadingIntro h5 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-block-end: 0.8em;
}

#ScriptureReadingIntro p {
  width: 100%;
  margin: auto;
}

#ScriptureReadingsContainer h3 {
  color: #e2d3b2;
  font-size: 20px;
  /* font-size: 18px; */
  width: unset;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#ScriptureReadingsContainer h3.alignRight {
  color: white;
  font-size: 20px;
  /* font-size: 18px; */
  text-transform: uppercase;
  letter-spacing: 1px;
}

#ScriptureReadingsContainer h4 {
  /*2024/10/09 - Aaron added*/
  color: #e2d3b2;
  font-size: 18px;
  width: unset;
  letter-spacing: 1px;
  text-transform: capitalize;
}

#ScriptureReadingsContainer p {
  color: white;
  /*font-size: 23px;*/ /*2024/10/24 - Aaron changed to allow reflection guide font to be resized*/
  letter-spacing: 0.8px;
  font-size: 26px;
  /* font-size: 24px; */
}

#ScriptureReadingsContainer .copyright h3 {
  color: #e2d3b2;
  font-size: 16px;
  letter-spacing: 0.8px;
}

#ScriptureReadingsContainer .copyright p {
  color: white !important;
  font-size: 16px;
  letter-spacing: 0.8px;
}

#ScriptureReadingsContainer .loaderText {
  font-size: 16px;
}

#ScriptureReadingsSlides {
  display: none;
}

#ScriptureReadingsContainer .SRdivider {
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
  height: 1px;
}

#ScriptureReadingsContainer .div-transparent:before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  width: 90%;
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent,
    #e2d3b2,
    transparent
  );
}

.alignLeft {
  float: left;
  margin-top: 0px;
}

.alignRight {
  float: right;
  margin-top: 0px;
}

.clear {
  clear: both;
}

#audio {
  /*position: sticky;
	bottom: 0;
	z-index: 9999;*/
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden;
  opacity: 0;
}

/* #homeBG9 {
  background-image: url("Assets/Graphics/Backgrounds/HomeBG9-10.png");
  height: 4084px;
  margin-top: -630px;
  position: relative;
  z-index: 5;
  pointer-events: none;
} */

#homeBG91 {
  background-image: url("Assets/Graphics/Backgrounds/HomeBG9-10DarkPart.png");
  height: 2130px;
  margin-top: -630px;
  position: relative;
  z-index: 7;
  pointer-events: none;
}

#homeBG92 {
  /* background-image: url("Assets/Graphics/Backgrounds/HomeBG9-10LightPart.png");
  height: 1954px; */
  background-image: url("Assets/Graphics/Backgrounds/HomeBG9-10LightPartLessOpaque.png");
  height: 1747px;
  position: relative;
  z-index: 5;
  pointer-events: none;
  /* background-color: #e8a181; */
}

#homeBG92BG {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: #e8a181; */
}

#homeBG10RS {
  /* background-image: url("Assets/Graphics/SectionRosary/HomeBG10-10RS1.png"); */
  margin-top: -650px;
  height: 100vh;
  /* overflow: hidden; */
}

#RSBackground {
  position: absolute;
  background-image: url(Assets/Graphics/SectionRosary/HomeBG10-10RS1.png);
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transition: opacity 2s ease;
  width: 100%;
  /* height: 100%; */
  height: 100vh;
  top: 0;
  left: 0;
}

.RSYmysterycontainer {
  /* position: absolute; */
  position: relative; /* Moved it to within rosary container */
  z-index: 9997;
  /* top: 4%; */
  top: 5%;
  /* left: 6%; */
  /* left: 32px; */
  padding-left: 32px;
  transform: translateY(-50%);
  font-family: "Work Sans", serif;
  /* font-weight: 400; */
  font-size: 18px;
}

.mystery-display {
  text-align: center;
  color: white;
  padding: 20px;
}

#day,
#mystery {
  /* font-weight: bold; */
  font-size: 1.5rem;
  color: white;
}

#rosaryContainer {
  width: 100%;
  margin: auto;
  /* Responsive heights */
  height: 100vh;
  /* overflow-y: clip; To prevent mysteriescontainer from pushing the bottom */
  /* display: flex; */
  /* flex-direction: column; */
  position: relative; /* To make children relative to this */
}

#RSSpeechBubble {
  /* position: absolute;
  z-index: 999;
  pointer-events: none;
  transform: translate(60px, -190px);
  left: 50%;
  /* display: none; */
  /*width: 714px;
  height: 639px; */
/* ----- */
  /* position: absolute;
  z-index: 999;
  pointer-events: none;
  transform: translate(92px, -8px);
  left: 50%;
  width: 100vh;
  height: 469px;
  display: flex; */
/* ----- */
  /* display: none; /* Temporarily to avoid pushing body */
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 6;
  pointer-events: none;
  transform: translate(92px, -8px);
  left: 50%;
  width: calc(50% - 92px);
  max-width: 100vw;
  height: 469px;  
  /* overflow: hidden; */
}

#RSSpeechBubbleNew {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 6;
  pointer-events: none;
  top: -8px;
  /* left: 807px; */
  left: 56vw;
  height: 500px;
  min-width: 247px;
  /* display: none; /* Temporary */
}

.mainSpeechBubble {
  background: url('Assets/Graphics/SectionRosary/SpeechBubbleBangsBigMobile.png') no-repeat left;
  background-size: contain;
  position: absolute;
  /* height: 500px;
  min-width: 499px;
  width: auto; */
  height: 500px;
  width: 531px;
  top: 0;
  left: 0;
  /* top: -22px;
  left: 802px; */
  z-index: 999;
  display: none;
}

#RSSpeechBubblePolygon {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 6;
  /* pointer-events: none; */
  /* top: -8px; */
  /* top: 0; */
  /* top: -30px; */
  
  /* top: -19px; */ /* LATEST */
  
  /* left: 61.8vw; */
}

.speechBubblePolygon {
  /* height: 481px; */
  /* height: 462px; */
  height: 438px;
  /* width: 531px; */
  /* width: 38.2vw; */
  /* width: 41.2vw; */
  width: calc(100vw - var(--speechBubbleLeftOffset, 0px)); /* Dynamically adjust width */
  background-color: #FFEFE4;
  position: absolute;
  top: 0;
  left: 0;
  /* border-top-left-radius: 200px;
  border-bottom-left-radius: 200px; */
  border-top-left-radius: 180px;
  border-bottom-left-radius: 180px;
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2)
}

.speechBubblePointer {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  position: relative;
  width: 102px; /* Distance from the single point to the two points */
  height: 86px; /* Distance between the two points */
  background-color: #FFEFE4; /* Triangle background color */
  top: 151px;
  left: -75px;
  /* filter: drop-shadow(-2px 2px 5px rgba(0, 0, 0, 0.2)); */

}

.speechBubble-left {
  background: url('Assets/Graphics/SectionRosary/SpeechBubbleLeftStraight.png') no-repeat left;
  background-size: contain;
  width: 284px;
  /* height: 469px; */
  height: 100%;
  /* min-height: 100%; */
  flex-shrink: 0.8;
}

.speechBubble-right {
  background: url('Assets/Graphics/SectionRosary/SpeechBubbleRightSmall.png') repeat-x;
  background-size: contain;
  flex-grow: 1;
  height: 100%;
  display: flex;
  /* display: none; /* Temporarily to avoid pushing body */
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink:0;
  margin-left: -5px;
}

.speechBubble {
  /* width: 100%; */
  height: 100%;
}

.expandableBubble {
  position: absolute;
    /* margin-left: -450px; */
    margin-left: 270px;
    width: 100vh;
    /* display:none; */
}

.slide-text-container {
  position: absolute;
  top: 0;
  /* left: 100%; */
  /* transform: translateX(-93%); */
  justify-content: center;
  text-align: center;
  align-items: center;
  /* padding: 10px; */
  width: 100%;
  /* flex-grow: 1; */
  height: 100%;
  z-index: 99999;
  display: flex;
  /* padding-left: 4%; */
  /* padding-top: 4%; */
  /* display: none /* Temporary for speechbubble styling */
}

#slide-text {
  font-size: 30px;
  font-family: "DM Serif Text", serif;
  /* font-weight: 400; */
  color: #c08568;
  /* line-height: 1.1; */
  line-height: 1.2;
  white-space: nowrap;
}

.swiper-container {
  min-height: 430px;
  /* max-width: 1440px; */
  max-width: 1680px;
  margin: auto;
  position: relative;
  z-index: 5;
  margin-top: -10px;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
  /* z-index: 1; */
  /* padding-left: 32px; /* Center slides */
  /* will-change: transform; Chat GPT */
}

.swiper {
  /* width: 80%; */
  width: 100%;
  /* max-width: 1920px; */
  /* min-height: 430px; */
  min-height: 462px; /* To cater for swiper-slide-active img transform scale up */
  /* padding: 20px 0 0; */
  /* padding: 72px 0 0; */
  padding: 48px 0 0;
}

.swiper-slide {
  position: relative;
  /* width: 260px;
  height: 300px; */
  max-width: 261px;
  max-height: 326px;
  /* max-width: 358px; 251 / 0.7 */
  /* max-height: 465px; 326 / 0.7 */
  /* overflow: hidden; */
  user-select: none;
  /* transform: scale(0.7); */
  /* flex: 0 0 auto; Chat GPT */
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.swiper-slide figure {
  /* position: relative; */
  /* margin: 0; */
  /* width: 260px;
  height: 300px; */
  /* width: 251px;
  height: 326px; */
  /* overflow: hidden; */
  /* user-select: none; */
}

.swiper-slide figcaption {
  position: absolute;
  left: 50%;
  /* bottom: -12px; /* If NOT using transform */
  bottom: -70px; /* If using transform */
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 369px;
  height: 42px;
  font-family: "EmbossingTape1BRK", sans-serif;
  font-style: normal;
  font-size: 13px;
  /* font-weight: 400; */
  opacity: 0;
  z-index: 999999;
  line-height: 0.9;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* transition: all 0.1s ease-out; */
  transition: opacity 0.1s ease-out;
}

.swiper-slide figcaption p {
font-size: 14px;
letter-spacing: 4px;
}

.saint-date {
  font-family: "EmbossingTape1BRK", sans-serif;
  opacity: 0;
  position: absolute;
  /* bottom: 45px; /* If NOT using transform */
  /* left: 10px; /* If NOT using transform */
  left: -32px; /* If using transform */
  bottom: -14px; /* If using transform */
  letter-spacing: 4px;
  width: 135%;
  text-shadow: 2px 2px #00000060;
}

/* Active Slide*/

.swiper-slide-active .saint-date {
  opacity: 1;
  /* transition: all 1s ease-in; */
  transition: opacity 1s ease-in;
}

.swiper-slide-active {
  position: relative;
  /* min-width: 333px;
  min-height: 430px; */
  padding: 0;
  margin-bottom: -6px;
  z-index: 999;
  /* transition: all 1s ease-in; */

  /* margin-left: 50px; Create margin for scaled up center image */
  /* Photograph Background */
  /* padding: 20px 20px 24px; */
  /* box-shadow: 0 2px 10px 61px rgba(232, 230, 231, 1); */
}

.swiper-slide-active::after {
  /* Photograph Background */
  /* background: linear-gradient(115deg, rgba(255, 255, 255), rgba(228, 228, 228)); */
}

.swiper-slide-prev {
}

.swiper-slide-next {
  /* margin-left: 50px; Create margin for scaled up center image */
}

.swiper-slide-active img {
  transform: scale(1.3);
}

.swiper-slide-active figcaption {
  opacity: 1;
  /* transition: all 1s ease-in; */
  transition: opacity 1s ease-in;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  /* top: 50%; */
  top: 42%;
  z-index: 10;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: no-repeat fixed center cover; */
}

.swiper-button-prev {
  left: 25px;
  transform: translateY(100%);
  /* background-image: url("assets/Graphics/SectionRosary/RSButtons/Left.png"); */
}

.swiper-button-next {
  right: 50%;
  transform: translate(140px, 100%);
  /* background-image: url("assets/Graphics/SectionRosary/RSButtons/Right.png"); */
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
}

#rosaryType {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  /* margin-top: 87px; */
  /* margin-top: 63px; */
  margin-top: 65px;
  gap: 42px;
  margin-left: auto;
  margin-right: auto;
  z-index: 999;
  transition: transform 1s;
  /* width: 1028px; */
  width: 100vw;
  flex-wrap: wrap;
}

.rosaryTypeButtonContainer {
  width: 430px;
  transition: transform 1s;
}

.rosaryTypeButton {
  flex: 1;
  background-color: #859076;
  color: white; /* Text color */
  border: none; /* Remove default border */
  /* padding: 5px 20px; Add some padding */
  font-size: 36px; /* Font size */
  /* font-weight: bold; */
  cursor: pointer; /* Add a pointer on hover */
  transition: background-color 0.3s ease, outline 0.5s linear; /* Smooth hover effect */
  letter-spacing: 12px;
  padding-left: 12px;
  /* max-width: 500px; */
  width: 100%;
  /* width: 500px; */
  height: 55px;
  text-align: center;
  position: relative; /* Necessary for line positioning */
  /* transition: outline 0.5s linear; */

}

.rosaryTypeButton:hover{
  background-color: #c08568;
}

.rosaryTypeButton.active {
  background-color: #c08568;
  outline: 6px solid #fff7e5;
  transition: outline 0.5s linear;
}

.rosaryTypeInfoContainer {
  display: none;
  opacity: 0;
  /* visibility: hidden; */
  position: absolute;
  transition: opacity 0.5s ease-in-out;
  align-items: center;
  column-gap: 7px;
  white-space: nowrap;
  margin-top: 5px;
}

.RSYinfoImage {
  width: 16px;
  height: 16px;
}

.rosaryTypeInfoText {
  font-size: 18px;
  margin-top: 3px;
  font-weight: 500;
}

.line-container {
  position: relative;
width: 100%;
}

.line {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 100px;
  background-color: #FFF7E5;
  transition: height 0.5s ease-in-out;
  height: 0; /* Start with no height */
}

.circle {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: #FFF7E5;
  border-radius: 50%;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  left: 50%;
  /* transform: translate(-8.2px); */
  transform: translate(-8.2px) scale(0);
  top: 21.5px;
  opacity: 0;
  /* border: 4px solid #3084AC; /* Border color */

}

.outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden; /* Disabled temporarily to sort out wonkiness */
}

.outline rect {
  /* stroke-dasharray: 4172; /* Circumference of the rectangle, approx. perimeter */
  /* stroke-dashoffset: 4172; /* Initially hidden */
  /* stroke-dasharray: 2416; /* Circumference of the rectangle, approx. perimeter */
  /* stroke-dashoffset: 2416; /* Initially hidden */
  /* stroke-dasharray: 100; /* Circumference of the rectangle, approx. perimeter */
  /* stroke-dashoffset: 100; /* Initially hidden */
  stroke: #FFF7E5; /* Border color */
  stroke-width: 4; /* Border thickness */
  fill: none; /* No fill inside the rectangle */
  transition: stroke-dashoffset 1.5s ease;
  /*rx: 8; /* Rounded corners */
  /*ry: 8; /* Rounded corners */
}

/* Draw the border */
/* .drawingClockwise .outline rect {
  stroke-dashoffset: 100;
} */

/* Undraw the border */
/* .undrawingClockwise .outline rect {
  stroke-dashoffset: 4172; 
}  */

#mysteriesContainer {
  display: grid;
  align-items:center;
  justify-content: center;
  max-width: 1048px;
  width: 100vw;
  /* height: 212px; */
  /* height: 160px; */
  height: 190px;
  margin: auto;
  position: relative;
  z-index: 9998;
  opacity: 0;
}

#mysteriesContainer.visible {
  opacity: 1;
}

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

@-webkit-keyframes fadeOut {
  from { opacity: 1; }
    to { opacity: 0; }
}

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

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

.rosaryMysteries {
  z-index: 999;
  /* border: 1px dashed #FFF7E5; /* If using drawn/undrawn border */
  border-radius: 8px;
  border-width: medium;
  /* position: relative; */
  position: absolute;
  /* justify-items: center; */
  justify-content: space-evenly;
  display: none;
  width: 100%;
  /* height: 100%; */
  height: fit-content;
  padding: 15px 0 20px;
  align-items: center;
  transition: opacity 0.5s ease-in-out;
  flex-direction: column;

  /* To temporarily replace SVG Outline */
  outline-style: dotted;
  outline-width: 4px;
  outline-color: #fff7e5;
  /* transition: opacity 1s ease-in-out; */
}

.rosaryMysteries.visible {
  /* opacity: 1; */
  /* -webkit-animation: fadeIn 1s; */
  animation: fadeIn 1s;
  /* display:grid; */
}

.rosaryMysteries.hidden {
  /* display: grid; */
  display: flex;
  /* -webkit-animation: fadeOut 1s; */
  animation: fadeOut 1s;
  opacity: 0;
}

.mysteriesDay {
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
}

.mysteries-break {
  display: none;
}

.mystery-days {
  color: #966348;
}

.mystery-types {
  color: #FFFFFF;
}

.mysteries-buttons {
  display: grid;
  grid-template-columns: 50% 50%;
  row-gap: 22px;
  /* padding: 22px; */
  width: 100%;
  justify-items: center;;
}

.mysteryTypeButton {
  flex: 1;
  background-color: #fff7e5;
  color: #c08568; /* Text color */
  border: none; /* Remove default border */
  padding: 5px 20px; /* Add some padding */
  font-size: 20px; /* Font size */
  /* font-weight: bold; */
  border-radius: 25px; /* Make it rounded */
  cursor: pointer; /* Add a pointer on hover */
  transition: background-color 0.3s ease; /* Smooth hover effect */
  letter-spacing: 2px;
  max-width: 465px;
  width: 100%;
  /* width: 465px; */
  /* max-height: 48px; */
  height: 44px;
  text-align: center;
}

.mysteryTypeButton:hover {
  background-color: #c08568;
  color: #fff7e5; /* Text color */
}

.mysteryTypeButton.clicked {
  outline: 6px solid #fff7e5;
}

#lightbox {
  display: flex;
  /* display: none; /* Hidden by default */
  
  /* Trying to fade-in and out */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;

  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* background-color: rgba(0, 0, 0, 0.8); */
  background-color: rgba(0, 0, 0);
  z-index: 9999;
}

/* Lightbox container (hidden by default) */
/* .lightbox { */
/* display: none; Hidden by default */
/* justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000; 
}*/

.lightbox-content {
  /* position: relative;
  width: 80%;
  height: 80%; */
  /* background-color: white; */
  /* padding: 20px;
  overflow: hidden; */
  display: inline-block;
  /* width: 1280px; */
  /* height: 720px; */
  /* max-width: 1280px; */
  /* max-height: 720px; */
  width: auto;
  height:100%;
}

#RSYSlideContainer {
position: relative;

/* To center in lightbox-content */
  width: 100%;
  height: 100%;
}

#RSYBackButton {
position: absolute;
top: 12px;
left: 6px;
}

#backButton {
  padding: 0;
}

.image-slider {
  position: relative;
  width: 100%;
  height: 100%;
  
  /* Removing to center in lightbox-content */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}

.slider-image {
  /* max-height: 100%; */
  /* max-width: 100%; */
  /* max-height: 100vh; */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#RSYGuideContainer, #RSYLabelContainer {
  position: absolute;
  bottom: 0; /* Adjust as needed to position above #RSYControls */
  left: 50%;
  transform: translateX(-50%);
  width: 80%; /* Adjust width as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5; /* Ensure it appears above other elements */
  pointer-events: none;
}

#RSYGuideContainer, #RSYLabelContainer img {
  max-width: 100%;
  /* max-height: 150px; /* Adjust height as needed */
  object-fit: contain;
}

.controls {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  width: 95%;
  margin-top: -20px;
}

.control-button {
  /* background-color: rgba(0, 0, 0, 0.7); */
  background: none;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.control-button:hover {
  /* background-color: rgba(0, 0, 0, 0.9); */
}

#prevRSSlide {
  /* justify-content: flex-start;
  position: absolute; */
  visibility: hidden; /* Changed functionality to click right/left half of image */
}

#nextRSSlide {
  /* left: 100%;
  justify-content: flex-end;
  position: absolute; */
  visibility: hidden; /* Changed functionality to click right/left half of image */
}

.control-bar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 16px;
}

#current-index,
#total-images {
  display: none; /* To hide the counter in the rosary slides */
}

/* ROSARY CONTROL BAR */
#RSYControls {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  flex-direction: column;
  width: 100%;
  z-index: 4;
  /*background: inherit;*/
  /* background: rgba(0, 0, 0, 0.4); */
}

#RSYcontrolsBar {
  /* background: inherit; Moved to "media query" at additional CSS to allow mobile controls bar to be a different colour */
  /* overflow: hidden; */
  /*height: 8vh;*/ /* Height controlled through "media only" at Additional CSS */
  width: 100%;
  /*display: flex;*/ /* Display controlled through "media only at Additional CSS*/
  align-items: center;
  justify-content: center;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  height: 8vh;
  display: flex;
}

#RSYnextPrevSlideBar {
  overflow: hidden;
  /*height: 5vh;*/ /* Height controlled through "media only" at Additional CSS */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: rgba(0, 0, 0, 0.4); */
  /*z-index: 1;*/
}

#RSYnextPrevSlideWrapper {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  max-width: 1334px;
}

#RSYdrawerLine {
  all: unset;
  cursor: pointer;
  padding-top: 5px;
}

#RSYGuideButton {
  position: absolute;
  right: 0;
}

#RSYguideDrawer {
  /*height: 36vh; Moving this to media query*/
  width: 100%;
  background: #483b34;
  position: absolute;
  bottom: 0;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  z-index: 9999;
  overflow: hidden;
}

#RSYguideWindow {
  position: relative;
  height: 100%;
  /*width: 1250px;*/
  width: 100%;
  max-width: 1250px;
  overflow: hidden;
  margin: 0 auto;
}

/*#guideHeaderWrapper {
	width: 80%;
	overflow: hidden;
	position: relative;
}*/

#RSYguideHeader {
  margin-top: 20px;
  padding-left: 10px;
  display: flex;
  overflow-x: auto; /* Make it horizontally scrollable */
  white-space: nowrap; /* Prevent wrapping */
  scroll-behavior: smooth; /* Smooth scroll when indicator moves */
  scrollbar-width: none; /* Hide the scrollbar for a cleaner look */
  width: 80%;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

/* Hide the scrollbar in WebKit browsers (Chrome, Safari) */
#RSYguideHeader::-webkit-scrollbar {
  display: none;
}

#RSYguideWrapper {
  margin: 0; /*auto*/
  margin-top: 3vh;
  /*max-width: 1250px;*/
  width: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

#RSYcloseReflectionGuide {
  top: 20px;
  right: 20px;
  position: absolute;
  z-index: 99999;
}

#RSYRGNext {
  position: absolute;
  margin: 0;
  bottom: 10px;
  right: 4%;
}

#RSYRGNextImage {
  height: 30px;
}

#RSYRGPrev {
  position: absolute;
  margin: 0;
  bottom: 10px;
  left: 4%;
}

#RSYRGPrevImage {
  height: 30px;
}

#RSYsliderWrapper {
  position: absolute;
  transform: rotate(-90deg) translate(111px, -62px);
  width: 154px;
  height: 30px;
  padding-left: 10px;
}

#RSYvolumeSlider {
  /*display: none;*/
  cursor: pointer;
  margin: 0;
  /*position: absolute;
transform: rotate(-90deg) translate(80px,-73px);*/
  z-index: 99999;
}

#RSYplayPauseButton {
  /* margin-right: 5px; */
}

/* @media only screen and (min-width: 501px) {
  .mobile-only {
    display: none !important;
  }
} */

@keyframes blink {
  0% {
    opacity: 1; /* Fully visible */
  }
  50% {
    opacity: 0; /* Fully transparent */
  }
  100% {
    opacity: 1; /* Fully visible again */
  }
}

.duplicate-button {
  background: transparent;
  border: none;
  cursor: pointer;
}

.highlight-container {
  position: absolute;
  /* z-index: 10000; */
  z-index: 999999;
  pointer-events: none;
  width: 40px;
  height: 40px;
  animation: blink 1s infinite;
}

.highlight-container .inner-circle {
  position: absolute;
  top: 4.5px;
  left: 4.5px;
  width: 41px;
  height: 41px;
  border: 1.8px solid #FFDF6D;
  border-radius: 50%;
}

.highlight-container .outer-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border: 0.75px solid #FFDF6D;
  border-radius: 50%;
}

.inner-oblong {
  width: 60px;
  height: 32px;
  border-radius: 43%;
}

.outer-oblong {
  width: 69px;
  height: 41px;
  border-radius: 39%;
}

/* Tutorial Box */
.tutorial-box {
  background-color: white;
  /* padding: 20px; */
  padding: 55px 0 55px 0;
  border-radius: 16px;
  text-align: center;
  /* max-width: 400px;
  width: 90%; */
  width: 60vw;
  /* height: 52vh; */
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  position:relative;
}

.tutorial-close {
  width: 20px;
  position: absolute;
  top: 4%;
  right: 2%;
  cursor: pointer;
  visibility: hidden; /* Trying to make people click on no thanks */
}

.tutorial-box-elements {
  width: 60%;
}

.tutorial-question {
  font-size: 24px;
  color: #262626;
  margin-bottom: 20px;
}

/* Buttons */
.tutorial-button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: none;
  /* border-radius: 5px; */
  border-radius: 20px;
  font-size: 20px;
  cursor: pointer;
}

.red-button {
  background-color: #C16549;
  color: white;
}

.white-button {
  background-color: white;
  color: #464646;
  border: 1px solid #5A514B;
}

/* Checkbox */
.tutorial-checkbox-container {
  /* margin-top: 10px; */
  margin-top: -3px;
  font-size: 20px;
  color: #464646;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 5px;
}


/* Skip Message */
#noThanksMessageBox {
  position: relative;
}

.speech-bubble-pointer {
  /* position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background-color: white;
  clip-path: polygon(50% 0, 0 100%, 100% 100%); */

  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid white; /* Adjust the color to match your design */
  z-index: 10001; /* Ensure it appears above other elements */
  transform-origin: top center; /* Set the rotation origin */
  }

  /* Tutorial Overlay */
  .tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* --rect-size: 500px; */
    --rect-size: 70vh;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  }

  .tutorial-overlay.invisible {
    /* display: none; */ /* For fade in purposes */ 
    opacity: 0;
    visibility: hidden;
  }

  .tutorial-overlay.RSYspec {
    background-color: rgba(0, 0, 0, 0.7);

  }

  #SRtutorialClipPath {
    --rect-size: 70vh;

  }

  .tutorial-content {
    /* width: 60vw; */
    width: 100vw;
    height: 100vh;
    /* clip-path: var(--interactive-hole); /* Use the variable */
  }

  .tutorial-content.BMspec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .tutorial-header {
    position: relative;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    /* top: 108px; */
    /* top: 105px; /* After adding the additional line "TRY IT NOW" */
    /* transform: translateY(calc(100vh - 100% - 13vh - 36px - 80px - 22px)); */
  }
  
  .tutorial-header.BMspec {
    /* top: 5%; */
  }

  .tutorial-title {
    position: relative;
    font-size: 22px;
    color: #FFFFFF;
    text-align: center;
    margin:0;
    }
  
  .tutorial-caption {
    position: relative;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    margin:0;
  }

  .tutorial-image.BMspec {
    position: relative;
    width: 90vw;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    max-width: 500px;
  }

  .tutorial-footer {
    position: absolute;
    bottom: calc(13vh + 36px);
    left: 50%;
    transform: translateX(-50%);
    /* width: 60vw; */
    width: 100vw;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 760px;
  }
  
  .tutorial-footer.BMspec {
    position: relative;
    bottom: 0;
    margin-top: 20px;
    left: 0;
    transform: none;
  }

  .tutorial-footer.RSYspec {
    bottom: calc(17vh + 36px);
  }
  

  .tutorial-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  .tutorial-arrow {
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  
  .tutorial-arrow.hidden {
    visibility: hidden;
  }
  
  .tutorial-indicators {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }
  
  .tutorial-indicator {
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    border-radius: 50%;
  }
  
  .tutorial-indicator.active {
    background-color: #FFDF6D;
  }
  
  .tutorial-exit-button {
    /* background-color: #c16549; */
    background-color: transparent;
    color: white;
    border: 1px solid;
    padding: 1px 15px;
    border-radius: 20px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
  }
  
  .tutorial-exit-button:hover {
    /* background-color: #a14e3a; */

  }

  .RSYhighlight {
    position: absolute;
    top: 40%;
    left: 50%;
  }

  #RSYhighlightLeft{
    transform: translateX(-25vw);
  }

  #RSYhighlightRight{
    transform: translateX(25vw);
  }

  #footer {
    height: auto;
    background-color: #1D140F;
    border-top-right-radius: 30px;
    padding: 50px 0 30px;
  }

  .footer-quote-container {
    width: 90vw;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }

  .footer-quote {
    font-family: 'HKGrotesk Black', 'HKG-BL', sans-serif;
    font-size: 56.33px;
    font-weight: 900;
    text-align: center;
    margin: 0 0 24px 0;
    background: linear-gradient(90deg, #C3BAB6 0%, #F9E1D6 54%, #C8A99B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  .footer-divider {
    width: 100%;
    height: 2px;
    background: #C8A99B;
    margin: 32px 0 24px 0;
    opacity: 0.5;
  }

  .footer-speech-bubble {
    position: relative;
    background: transparent;
    color: #FFFFFF;
    border-color: #FFF6F1;
    border: solid 2px #FFF6F1;
    border-radius: 18px;
    padding: 24px 28px 20px 28px;
    max-width: 600px;
    width: 90%;
    margin: 32px auto 16px auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    text-align: center;
    font-family: 'HK Grotesk', sans-serif;
    font-size: 20px;
  }

  .footer-speech-bubble .bubble-title {
    /* font-size: 1.2em; */
    font-weight: 700;
    margin-bottom: 8px;
  }

  .footer-speech-bubble .bubble-text {
    /* font-size: 1em; */
    margin-bottom: 12px;
  }

  .footer-speech-bubble .bubble-email {
    color: #418FE3;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.1em;
    word-break: break-all;
  }

  .footer-speech-bubble .bubble-email:hover {
    text-decoration: underline;
  }

  .footer-speech-bubble .bubble-pointer {
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 18px solid #fff;
    /* Optional: add a subtle shadow */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.07));
  }

  .footer-bottom {
    /* display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    width: 100%;
    position: relative;   
  }

  .footer-left {
    /* display: flex;
    align-items: center;
    gap: 16px; */
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-self: start;
  }

  .footer-center {
    grid-column: 2;
    justify-self: center;
    align-self: center;
    text-align: center;
    word-break: break-word;
  }

  .footer-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .footer-scrollup-btn {
    /* display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(200,169,155,0.15);
    text-decoration: none; */
    grid-column: 3;
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(200,169,155,0.15);
    text-decoration: none;
    margin-left: 16px;
  }

  .footer-scrollup-btn:hover .footer-arrow circle {
    fill: #F9E1D6;
  }

  .footer-arrow svg {
    display: block;
  }

  .touchscreen-only {
    display: none;
  }

/* LARGER MONITOR ONLY */
@media only screen and (min-width: 1560px) {
  #RSSpeechBubblePolygon {
    /* left: clamp(52.4vw, calc(52.4vw + 9.4 * ((1920px - 100vw) / 479)), 61.8vw); */
  }
  
  .speechBubblePolygon {
    /* height: 500px; */
    /* width: 41.2vw; */
   /* width: calc(100vw - var(--speechBubbleLeftOffset, 0px)); /* Dynamically adjust width */

  }
}
/* LARGER MONITOR ONLY */

/* LAPTOP SCREEN ONLY */
@media only screen and (min-width: 1361px) {
  .mobile-only {
    display: none !important;
  }

  #hamburgerMenuButton {
    visibility: hidden;
  }

  #floatBegin {
    position: fixed;
    top: 4%;
    left: 2.5%;
    /* height: 20px;
    width: 20px; */
    cursor: pointer;
    z-index: 9999;
    visibility:hidden;
  }

  /* .int-section.mobile-only {
    visibility: hidden;
    height: 0;
    overflow: hidden;
  } */

  #homeLinkDesktop {
    text-decoration: none;
    display: inline-block;
    /* margin-top: 1.5%; */
    cursor: pointer;
    z-index: 2;
    visibility:hidden;
  }

  #extractActiveDesktop {
    margin-top: 1.5%;
    cursor: pointer;
    z-index: 2;
    /* display: none; /* Hide the active extract button */
  }

  #extractInactiveDesktop {
    margin-top: 1.5%;
    cursor: pointer;
    z-index: 2;
    display: none; /* Hide the inactive extract button */
  }

  #ScriptureReadingsContainer {
    /* DESKTOP */
    width: 80%;
    max-width: 720px;
    /*margin-left: 25%;*/
    font-size: 26px; /*2024/10/24 - Aaron changed to allow reflection guide font to be resized*/
    /* transition: margin-left 0.7s ease-in-out; */
  }

  #ScriptureReadingsContainer p {
    /*font-size: 26px;*/ /*2024/10/24 - Aaron changed to allow reflection guide font to be resized*/
    letter-spacing: 0.8px;
    line-height: 1.5;
    margin: 10px 0;
  }

  #ScriptureReadingIntro h5 {
    width: 60%;
  }

  #ScriptureReadingIntro p {
    width: 60%;
  }

  #ScriptureReadingsContainer h3 {
    font-size: 20px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 2;
  }

  #ScriptureReadingsContainer h3.alignRight {
    color: white;
    font-size: 20px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }


  #SRControls {
    /*background: inherit;*/
  }

  #nextPrevReadingBar {
    height: 5svh;
    height: 5vh; /* for systems that cannot read svh */
  }

  #nextPrevReadingWrapper {
    /* width: 70%;
    max-width: 720px; */
    /*width: 50%;*/
  }

  #guideDrawer {
    /* height: 29vh; */
    /* height: 244px; */
    height: 303px;
  }

  .reflectionGuide p {
    font-size: 20px;
    letter-spacing: 0;
    margin: 0;
    line-height: 1.8;
  }

  .star-indicator {
    font-size: 26px;
  }

  #controlsBar {
    /* height: 8svh; */
    /* height: 8vh;
    background: inherit; */
    /* display: flex; */
  }

  .playImage {
    height: 47px;
  }

  .notPlayImage {
    height: 27px;
  }

  #homeLinkMobile {
    display: none;
  }

  #extractButtonMobile {
    display: none;
  }

  #extractInactive {
    /* display: none; */
  }

  #upButtonMobile {
    display: none;
  }

  .nextPrevImage {
    /* height: 14px; */
    width: 22px;
  }

  .mobileDrawerLineImage {
    display: none;
  }

  #volumeSlider {
    /*display: none;*/
  }

  #RSYguideDrawer {
    height: 29vh;
  }

  #RSYcontrolsBar {
    /* height: 8vh;
    display: flex; */
    /* background: inherit; */
  }

  #RSYnextPrevReadingBar {
    height: 5svh;
    height: 5vh; /* for systems that cannot read svh */
  }

  #RSYGuideButton {
    visibility:hidden;
  }
}


/* TABLET SCREEN AND SMALLER */
/* @media only screen and (max-width: 768px) { */
@media only screen and (max-width: 1360px) {
  body {
    background: linear-gradient(to bottom, #261f1b 83%, #e8a181 17%);
  }

  .desktop-only {   /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    display: none;
  }

  .mobile-only {  /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    display: block;
    /* visibility: visible; */
  }

  .pagination-container {
    right: 0px;
  }

  .pagination-container-mobi { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    right: 0px;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Smooth transition for opacity change */
  }

  .pagination { /* TRANSFERRED TO TOUCH SCREENS ONLY */
    justify-content: space-between;
    width: 10px;
    /* width: 127px; */
  }

  .pagination:hover { /* TRANSFERRED TO TOUCH SCREENS ONLY */
    background-color: transparent;
  }

  .pagination li .bullet { 
    width: 5px;
    height: 5px;
  }

  .pagination li.active .bullet {
   width: 9px;
   height: 9px;
  }

  .begin-bullet {
    width: 13px;
    right: 6px;
  }
  
  .socialmediaiconscontainer {
    gap: 18px;
    bottom: 12px;
    right: 20px;
  }

  .socialmediaicons {
    width: 14px;
  }

  /* #floatBegin {
    position: fixed;
    bottom: 1.5%;
    left: 5%; */
    /* height: 20px;
    width: 20px; */
    /* cursor: pointer;
    z-index: 9999;
    visibility:hidden;
  } */


  #titleInvolved {
    margin-top: 43px; 
    width: 90%;
    max-width: 712px;
    left: 50%;
    transform: translateX(-50%);
   }

  .roadmap-mobi {   /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    transform: translateY(0%);
    position: relative;
    height: 214px;
    top:0;
  }

  #roadmapPath {
    top: 0;
  }

  #roadmapProgressMobi { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    position: absolute;
    left: 231px;
    top: 59px;
    z-index: 1;
  }

  .phase1Marker { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    top: 61px;
    left: 231px;
  }

  .phase2Marker { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    top: 56px;
    left: 566px;
  }
  
  .phase3Marker { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    top: 110px;
    left: 859px;
  }
  
  .phase4Marker { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    top: 57px;
    left: 1222px;
  }

  #phase1Text { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    top: 120px;
    left: 225px;
  }

  #phase2Text { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    top: 116px;
    left: 541px;
    text-wrap: auto;
  }

  #phase3Text { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    top: -6px;
    left: 818px;
    text-wrap: auto;
  }

  #phase4Text { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    top: 112px;
    left: 1216px;
  }

  #meteorBig {
    /* top: -16px;
    left: 69px; */
    /* right: -9%; */
    /* right: -5%; */ /* Correct position, but pushes body wide and overflow: hidden causes problems */
    right: 0;
    top: 3%;
    width: 168px;
    z-index: -1;
  }

  #meteorSmall {
    /* top: 8px;
    right: 88px; */
    top: 13%;
    /* right: -9%; */
    /* right: -5%; */ /* Correct position, but pushes body wide and overflow: hidden causes problems */
    right: 0;
    width: 96px;
    z-index: -1;
  }

  #rocksTop {
    top: 5px;
    left: -1px;
    width: 85px;
  }

  #rocksRight {
    /* top: 580px; */
    top: 104%;
    /* right: -10px; */
    right: 0;
    width: 112px;
  }

  .getinvolvedMenuTop {
    /* height: 100vh; */
    height: auto;
    /* height: 100%; */
    /* overflow: hidden; */
  }

  #contributeTextContainer {
  position: relative;
  /* width: 238px; */
  /* width: 273px; */
  /* width: 73%; */
  width: 60%;
  max-width: 450px;
  margin-top:12px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  /* top: -13px; */
  z-index: 2;
  scale: 1.3;
  text-align:center;
  }
 
  #contributeTextContainer a {
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }

  #getinvolvedContributeButton {
   /* position: relative; */
   /* left: 50%;
   transform: translateX(-50%); */
   width: 100%;
   transform: translateX(0%);
   left: 0;
 }

   .getinvolvedBottomBackgroundTop {
    /* position: absolute; */
    position: relative;
    /* bottom: -1px;; */
    width: 100vw;
    /* margin-top: -83px; */
    margin-top: 29px;
   }
  
  .getinvolvedMenuTopRadius {
    background-color: rgba(2,55,66,0.8);
    /* background-color: rgba(4, 73, 86, 1); */
    border-top-right-radius: 50px; /* Apply border-radius to the top-right corner */
    border-top-left-radius: 50px; /* Apply border-radius to the top-left corner */
    height: 50px;
    max-width: 1440px;
    margin: auto;
    margin-top: 29px;
  }

   .getinvolvedMenuBottom-mobi {
    /* height: 100vh; */
    height: auto;
    width: 100vw;
    /* max-width: 712px; */
    background-color: rgba(2, 55, 66, 0.8);
    /* background-image: url(Assets/Graphics/SectionJourney/MobBottomBackgroundBottom.png);
    background-size: cover;
    background-repeat: no-repeat; */
    /* position: absolute; */
    position: relative;
    /* overflow: hidden; */
    z-index: 0;
    border-top-right-radius: 50px; /* Apply border-radius to the top-right corner */
    border-top-left-radius: 50px; /* Apply border-radius to the top-left corner */
    max-width: 1440px;
    margin: auto;
    margin-top: 29px;
   }

   .getinvolvedMenuBottomRadius {
    /* margin-top: 100vh; */
    position: relative;
    /* max-width: 712px; */
    width: 100vw;
   }

   

   .getinvolvedCol {
     row-gap:10px;
   }
  
   .getinvolvedHeader {
     /* font-size: 24px; */
     /* line-height: 1.1; */
     font-size: 27px;
     line-height: 1.2;
     letter-spacing: 1px;
   }
  
   .getinvolvedSubHeader {
     /* font-size: 18px; */
     /* line-height: 1.2; */
     font-size: 21px;
     line-height: 1.3;
   }
  
   .getinvolvedDescription {
     /* font-size: 14px; */
     /* line-height: 1.2; */
     font-size: 17px;
     line-height: 1.3;
   }
  
   .getinvolvedButton {
     font-size: 17px;
     /* width: 238px; */
     width: 273px;
     /* width: 73%; */
     height: 48px;
     /* left: 50%;
     transform: translateX(-50%); */
   }
  
   #whereTextContainer {
     position: relative;
     /* width: 238px; */
     width: 272px;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     top: 37px;
   }
  
   #whereTextContainer-mobi {
      position: relative;
        /* width: 238px; */
      /* width: 273px; */
      width: 60%;
      scale: 1.3;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      /* margin-top: clamp(30px, calc(-84px + (30px - -84px) * ((100vw - 501px) / (1360px - 501px))), -84px); */
      /* top: calc(-84px + (114 * ((1360px - 100vw) / 859))); */
      /* top: 35px; */
      top: 80px;
   }

   #getinvolvedJourneyButton-mobi {
    left: 50%;
    /* transform: translateX(-50%); */
    transform: translateX(-38%);
    /* position: absolute; */
    position: relative;
    scale: 1.3;
    /* margin-top: 46px; */
    /* margin-top: 83px; */
    margin-top: 133px;
    margin-bottom: 50px;
    /* bottom: 126px; */
    /* bottom: 149px; */
    width: 60%;
    max-width: 450px;
   }

  .aboutusContainer {
    position: relative;
  }

  .aboutusMenuTop {
    height: 100%;
  }

  .titleAboutUs {
    top: 47px;
    left: 0;
  }
  
  .titleAboutUs-mobi {
    top: 47px;
    /* width: 100vw; */
    /* position: absolute; */
    position: relative;
    width: 90%;
    max-width: 712px;
    margin: auto;
  }

   #balloonAboutUs {
     width: 135px;
     position: absolute;
     transform: translateX(-50%);
    top: -75px;
   }
   
   #statuesAboutUs {
     /* height: 241px; */
     /* top: 199px; */
     /* top: -72px; */
     height: 100%;
     width: 57%;
     max-width: 458px;
     left: 50%;
     top: -6vh;
     transform: translateX(-50%);
     z-index:0;
     position: relative;
   }
  
  .aboutusTextBubble-mobi {
  position: relative;
  /* margin-top: -71px; */
  /* margin-top: -144px; */
  margin-top: -164px;
  z-index: 2;
  }

  .aboutusTextBubbleTop {
    width: 89vw;
    height: 30px;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    margin-left: 5px;
  }

  .aboutusTextBubbleTop img {
    width: 100%;
    }

  .aboutusTextbox-mobi {
    position: relative;
    z-index: 2;
    /* width: 90vw; */
    width: 86vw;

    max-width: 712px;
    margin-top: 0;
    /* margin-left: 5px; */
    /* background-image: url(Assets/Graphics/SectionAboutUs/MobileTextBubbleMiddle.png); */
    background-image: url(Assets/Graphics/SectionAboutUs/BubbleGradientBackgroundComplete.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 48px;
    padding-bottom: 30px;
    padding-right: 5px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;
    box-shadow: #54b8af 7px 18px 9px 0px;
    /* top: -71px; */
    /* padding-top: 1px; */
  }

  /* .aboutusTextboxTop {
    height: 43vh;
    background-image: url(Assets/Graphics/SectionAboutUs/MobileTextBubble.png);
    background-size: cover;
    width: 89vw;
    margin-left: 5px;
    padding-right: 5px;
  } */

  /* .aboutusTextTopContainer {
    position: relative;
    z-index: 2;
    width: 89vw;
    margin-top: 0;
    background-image: url(Assets/Graphics/SectionAboutUs/MobileTextBubbleMiddle.png);
    background-size: cover;
    margin-left: 5px;
    padding-right: 5px;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 1px;
  } */

  .aboutusTextTitle {
    font-size: 20px;
    /* font-size: 19px; */
    /* width: 74vw; */
    width: 100%;
    padding-left: 35px;
    padding-right: 35px;
    margin-left: auto;
    margin-right: auto;
    /* margin-top: 32px; */
  }


  .aboutusText-mobi {
    color: #9D4411;
    /* font-size: 18px; */
    font-size: 17px;
    line-height: 1.2;
    /* width: 74vw; */
    width: 100%;
    padding-left: 35px;
    padding-right: 35px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 55px;
  }

  /* .aboutusTextTop { 
    width: 74vw;
    font-size: 17px;
    margin-top: 13px;
    margin-left: auto;
    margin-right: auto;
  } */

  /* .textbubbleArrowDownImage {
    width: 30px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 11px;
    position: absolute;  
  } */

  /* .aboutusMenuMiddle {
    height: 100vh;
    width: 89vw;
    background-image: url(Assets/Graphics/SectionAboutUs/MobTextBubbleMiddle.png);
    background-size: cover;
    margin-left: 5px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    z-index: 1;
  } */

  /* .aboutusTextMiddleContainer {
    padding-top: 40px;
  } */

  /* .aboutusTextMiddle {
    color: #9D4411;
    font-size: 17px;
    line-height: 1.2;
    width: 74vw;
    margin: auto;
    margin-top: 10px;
  } */

  /* .aboutusTextMiddleContainer .aboutusTextTitle {
    margin-top: 50px;
  } */

  /* .aboutusTextboxBottom {
    height: 79vh;
    background-image: url(Assets/Graphics/SectionAboutUs/MobTextBubbleBottomwPointer.png);
    background-size: cover;
    width: 89vw;
    margin-left: 5px;
    z-index: 1;
  } */

  /* .aboutusTextBottomContainer {
    width: 74vw;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
  } */

  /* .aboutusTextBottom-mobi {
    color: #9D4411;
    font-size: 17px;
    line-height: 1.2;
    width: 74vw;
    margin: auto;
    margin-top: 10px;
  } */

  /* .aboutusTextBottom {
    grid-template-columns: none;
    grid-template-rows: auto;
  } */
  
  .aboutusBePart-mobi {
    background-color: #9d4411; /* Button background color */
    color: #ffffff; /* Font color */
    font-family: "HKGrotesk", sans-serif; /* Use your preferred font */
    font-size: 20px; /* Adjust font size */
    border: none; /* Remove border */
    border-radius: 38px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    text-align: center; /* Center the text */
    display: inline-block; /* Ensure proper alignment */
    text-transform: uppercase; /* Make text uppercase */
    transition: background-color 0.3s ease; /* Add hover transition */
    width: 275px;
    height: 60px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 50px;
  }

  .aboutusBePart-mobi a {
    /* left: 50%;
    width: 271px;
    height: 57px;
    border-radius: 38px;
    padding-top: 3px;
    padding-left: 43px;
    padding-right: 43px;
    transform: translate(-52%);
    margin-top: 0;
    top: 0;
    position: relative; */
    text-decoration: none; /* Remove underline from the link */
    color: inherit;
  }

  .aboutusTextBubbleBottom {
    width: 89vw;
    /* height: 30px; */
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    margin-left: 5px;
  }

  .aboutusTextBubbleBottom img {
    width: 100%;
  }

  .beginMenuContainer {
    bottom: 29vh;
  }

  .beginLogo {
    width: 120px;
    margin-bottom: -6px;
  }

  #beginMenu {
    row-gap: 16px;
  }

  .playPauseBG {
    margin-top: -22px;
  }

  .menu-link {
    font-size: 28px;
  }

  #textBubblePointer {
    position: relative;
    /* left: 42px; */
    left: clamp(42px, calc(42px + (319 * ((100vw - 790px) / 570))), 362px);
    top: -371px;
    z-index: 2;
    transform: rotate(-12deg);
  }

  #statueSpeaking {
    width: 278px;
    /* bottom: 85px; */
    bottom: 25px;
    /* left: -97px; */
    left: clamp(-97px, calc(-97px + (319 * ((100vw - 790px) / 570))), 222px);
  }

  #ScriptureReadingsContainer {
    /* MOBILE */
    width: 90%;
    max-width: 712px; /* To follow tablet width */
    /*transform: translateX(5%);*/
    /*margin: 0;*/
  } /* For some reason, the Scripture Container aligns left in mobile */

  #ScriptureReadingsContainer h3 { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    font-size: 18px;
  }
    
  #ScriptureReadingsContainer h3.alignRight { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
  font-size: 18px;
  }

  #ScriptureReadingsContainer h4 { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    font-size: 15px;
  }

  #ScriptureReadingsContainer p { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    font-size: 24px;
    line-height: 1.3;
  }

  /* #ScriptureReadingsContainer p {
    line-height: 1.3em;
  } */

  #universalisLink {
    display: none;
  }

  #SRHeader {
    display: none;
  }

  /* #homeLinkDesktop {
    display: none;
  }

  #extractActiveDesktop {
    display: none;
  }

  #extractInactiveDesktop {
    display: none;
  } */


  #SRBackground {
    /* position: absolute; */

    /* position: fixed; */ /* TEST REVERTING TO ORIGINAL METHOD OF PARALLAX SINCE IT DOESN'T HELP MOBILE */

    /* width: 100vw;
    height: 100vh;
    z-index: -1; */ /* TEST REVERTING TO ORIGINAL METHOD OF PARALLAX SINCE IT DOESN'T HELP MOBILE */

    /* background-image: url(Assets/Graphics/SectionScriptureReflection/HomeBG8-10SRReading1.png); */

    /* Create the parallax scrolling effect */
    /* background-attachment: fixed; */
    /* background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    transition: opacity 2s ease; */
    /* width: 100%;
    height: 100%; */


    /* top: 0;
    left: 0;
    opacity: 0; */
  }

  #SRControls {
    /*background: inherit;*/ /*Parallax background doesn't work in mobile*/
  }

  #nextPrevReadingBar {
    height: 6svh;
    height: 6vh; /* for systems that cannot read svh */
  }

  #nextPrevReadingWrapper {
    width: 90%;
    max-width: 720px;
  }

  .star-indicator {
    font-size: 23px;
  }

  .guidePrepare {
    font-size: 18px;
  }

  .reflectionGuide p {
    font-size: 18px;
    line-height: 1.3;
  }

  #controlsBar {
    /* height: 10vh; */
    /* display: none; */ /* Initially wanted to start hidden, but with the tutorial, to keep it up */

    /* Test moving this to touch screen only */
    /* height: 8vh;
    display: flex;
    padding-left: 10%;
    padding-right: 10%;
    background-color: #00000070;
    border-top-color: #ffffff;
    border-top-style: solid;
    border-top-width: 1px; */
  }

  #guideWindow { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    padding-top: 15px;
  }

  #guideDrawer { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    padding-right: 20px;
    height: 265px;
    /* height: 25vh; */
    /* height: 100%; */
    /* height: 43vh; */
    /* max-height: 300px; */
  }

  #playButtonSR {
    transform: translateX(6%);
  }

  #pauseButtonSR {
    transform: translateX(6%);
  }

  .playImage {
    /* height: 43px; */
    height: 48px;
  }

  .notPlayImage {
    height: 25px;
  }

  #upButton {
    /* display: none; */
  }

  .nextPrevImage {
    width: 20px;
  }

  .drawerLineImage {
    display: none;
  }

  .mobileDrawerLineImage {
    height: 13px;
  }

  /* #volume {
    display: none;
  }

  #fullscreen {
    display: none;
  } */

  /* .slider-image {
    height: 100vh;
  } */

  #rosaryContainer {
    max-width: 712px;
  }

  .RSYmysterycontainer { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    font-size: 14px;
    top: 22px;
    /* left: 9px; */
    /* padding-left: 9px; */
    padding-left: 24px;
  }

  #RSSpeechBubbleNew { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    top: 53px;
    left: 34%;
    /* left: 128px; */
    height: 255px;
    min-width: 247px;
  }

  /*#RSSpeechBubbleNew { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* top: 53px;
    left: 128px;
    height: 255px;
    min-width: 247px;
  } */

  .mainSpeechBubble { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    z-index: 999;
    top: 0;
    left: 0;
    height: 255px;
    width: auto;
    min-width: 247px;
  }

  #RSSpeechBubblePolygon {
    /* left: 49vw; */
  }
  
  .speechBubblePointer {
    top: 128px;
    left: -75px;
  }

  .speechBubblePolygon {
    /* height: 500px; */
    /* height: 443px; */
    height: 412px;
    top: 15px;
    /* width: 531px; */
    /* width: 52vw; */
    width: calc(100vw - var(--speechBubbleLeftOffset, 0px)); /* Dynamically adjust width */

  }

  .speechBubble-left { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    position:relative;
    top: -45px;
    left: 61px;
  }

  .speechBubble-right {
    position: relative;
    right: 0;
    transform: translateX(-50%);
    max-width: 62%;
  }

  .mainSpeechBubble {
    z-index: 999;
    top: 0;
    left: 0;
    height: 255px;
    width: auto;
    min-width: 247px;
  }
  
  .rosaryTypeButton {
    font-size: 20px;
  }

  .swiper-container {
  margin-top: 0;
  }

  .swiper {
    /* padding: 107px 0 0; */
    padding: 60px 0 0;
  }

  .swiper-slide {
    /* transform: translateX(calc((100vw - 1440px) / 5)); */
    /* max-width: calc(261px - ((1360px - 100vw) / 7.5)); */
    max-width: 246px; /* Active Slide width = ~45% x 712px (body width) / 1.3 (active slide scale up) */
    left: -172px;

  }

  .swiper-slide figcaption { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* left: -24px;
    bottom: -6px; */
    left: -45px;
    bottom: -25px;
    transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    /* width: 173px; */
    width: 353px;
    /* height: 21px; */
    height: 42px;
  }

  .swiper-slide figcaption p { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* font-size: 8px;
    letter-spacing: 1.5px; */
    font-size: 14px;
    letter-spacing: 3.4px;
  }

  .swiper-slide .saint-date p { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* font-size: 8px; */
    font-size: 14px;
  }

  .saint-date { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* letter-spacing: 1px; */
    /* left: -12px;
    bottom: 7px; */
    letter-spacing: 2px;
    left: -22px;
    bottom: 22px;
    text-shadow: 1px 1px #00000060;
  }

  .swiper-button-prev, .swiper-button-next { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* top: 156px; */
    /* top: 235px; */
    top: 186px;
  }

  .swiper-button-prev img, .swiper-button-next img {
    /* width: 35px; */
    width: 57px;
  }

  .swiper-button-prev { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* left: 8px; */
    left: 33px;
  }

  .swiper-button-next { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    left: -11px;
    transform: translate(306px, 100%);
    /* right: auto; */
  }

  #rosaryType { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* margin-top: -107px; */
    margin-top: 0;
    display: flex;
    row-gap: 24px;
    /* width: 340px; */
    width: 100%;
    /* display: none; /* TEMPORARY TO ADJUST FIGCAPTIONS */
  }

  .rosaryTypeButtonContainer {
    width: 80%;
  }

  .rosaryTypeButton { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    height: 29px;
    /* width: 340px; */
    width: 100%;
    letter-spacing: 7px;
    padding-left: 6px;
    font-size: 22px;    
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .rosaryTypeButton:hover{ /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    background-color: #859076;
    transition: none;
  }

  .rosaryTypeButton.active { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    background-color: #c08568;
    outline: 4px solid #fff7e5;
  }

  .RSYdropdown { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    width:38px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  }

  .line { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* position: absolute; */
    /* left: 50%; */
    width: 2.5px;
    /* height: 100px; */
    /* background-color: #FFF7E5; */
    /* transition: height 0.5s ease-in-out; */
    /* height: 0; /* Start with no height */
  }

  .circle { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* position: absolute; */
    /* width: 22px; */
    /* height: 22px; */
    /* background-color: #FFF7E5; */
    /* border-radius: 50%; */
    /* transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; */
    /* left: 50%; */
    /* transform: translate(-8.2px); */
    transform: translate(-50%) scale(0);
    top: -17.5px;
    /* opacity: 0; */
    /* border: 4px solid #3084AC; /* Border color */
  }

  .rosaryTypeInfoContainer { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    display: flex;
    opacity: 1;
    flex-direction: row;
    column-gap: 9px;
    margin-top: 3px;
    position: relative;
    align-items: start;
    white-space: wrap;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    margin-top: 0;
  }

  .rosaryTypeInfoContainer.visible { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    display: flex;
    opacity: 1;
  }

  .rosaryTypeInfoContainer.invisible { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    visibility: hidden;
    opacity: 0;
  }

  .RSYinfoImage { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    width: 20px;
    height: 20px;
  }

  .rosaryTypeInfoText { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    font-size: 16px;
    margin-top: 2px;
    font-weight: 400;
  }
  
  #mysteriesContainer { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* height: 140px; */
    height: 112px;
    max-width: 712px;
    width: 80%;
  }

  .mysteriesDay {
    padding-bottom: 0;
  }

  .mysteries-break {
    display: inline;
  }

  .mysteries-buttons {
    row-gap: 14px;
  }

  .rosaryMysteries { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    row-gap: 11px;
    /* padding-top: 17px; */
    /* padding: 0; */
    padding: 14px;
    height: fit-content;
  }

  .mysteryTypeButton { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    font-size: 16px;
    /* width: 150px; */
    width: 95%;
    /* height: 48px; */
    height: 36px;
  }

  .outline rect { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    stroke-width: 2.5;
  }

  #RSYcontrolsBar {

  }

  #RSYguideDrawer {
    height: 43vh;
  }

  #RSYplayButton {
    transform: translateX(6%);
  }

  #RSYpauseButtonSR {
    transform: translateX(6%);
  }

  #RSYvolume {
    /* display: none; */
  }

  #prevRSSlide {
    visibility: hidden;
  }

  #nextRSSlide {
    visibility: hidden;  }

  #RSYfullscreen {
    /* visibility: hidden; */
    /* display: none; */
  }
  
  .footer-quote {
    font-size: 36px;
  }
}
/* END OF TABLET SCREEN */

@media (max-width: 960px) {
  #membership-panel {
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }
  .membership-tier {
    width: 100%;
    /* max-width: 500px; */
  }
}


/* SCREENS BELOW 768PX */
@media only screen and (max-width: 768px) { 
  .tutorial-title {
    font-size: 20px;
  }

  .tutorial-caption {
    font-size: 18px;
  }

  .visionStatement {
    font-size: 33px;
  }

  .visionCaption {
    font-size: 30px;
  }

  .toggle-btn {
    font-size: 22px;
  }
}

/* SCREENS BELOW 712PX */
@media only screen and (max-width: 711px) { 
  .speechBubblePointer {
    top: 18vw;
    left: -8vw;
  }
  
  .speechBubblePolygon {
    /* height: 406px; */
    /* height: 62vw; */
    height: 55vw;
    border-top-left-radius: 25vw;
    border-bottom-left-radius: 25vw;
  }
  
  .swiper {
    padding: 8vw 0 0;
  }

  .swiper-slide {
    max-width: calc(43vw / 1.3);
    left: -25vw;
    /* max-width: 246px; /* Active Slide width = ~45% x 712px (body width) / 1.3 (active slide scale up) */
  }

  .swiper-slide figcaption {
    /* left: -24px;
    bottom: -6px; */
    left: -45px;
    /* bottom: -25px; */
    bottom: -3vw;
    transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    /* width: 173px; */
    width: 50vw;
    /* height: 21px; */
    height: 5.9vw;
  }

  .swiper-slide figcaption p {
    font-size: 2vw;
    letter-spacing: 3.4px;
  }

  .saint-date {
    bottom: 2.5vw;
  }

  .swiper-slide .saint-date p { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* font-size: 8px; */
    font-size: 2vw;
  }

  .swiper-button-prev, .swiper-button-next {
    top: 24vw;
  }

  .swiper-button-prev {
    /* left: 5vw; */
    left: 4vw;
  }

  .swiper-button-next {
    transform: translate(42vw, 100%);
  }

  .swiper-button-prev img, .swiper-button-next img {
    /* width: 35px; */
    width: 8vw;
  }

  .tutorial-box {
    width: 80vw;
  }

  .tutorial-box-elements {
    width: 70%;
  }
  
  .tutorial-close {
    right: 3%;
  }

}
/* END OF SCREENS BELOW 712PX */

@media only screen and (max-width: 560px) {
  .tier-top {
    position:relative;
    min-height: 185px;
  }
  
  .tier-top-text {
    position: absolute;
    left: 10%;
  }

  .tier-img {
    position: absolute;
    transform: translateX(40%);
  }

  #friend-img {
    transform: translateX(30%);

  }
}

/* MOBILE SCREEN */
@media only screen and (max-width: 500px) {

  /* html, body {
    scroll-snap-type: proximity;
    scroll-behavior: smooth;
  }

  .snap-section {
    scroll-snap-align: start;
  } */

  .header-links {
    /* width: calc(100vw - 215px); */
  }

  #titleInvolved {
    width: 100%;
    left: 0;
    transform: translateX(0%);
  }

  #meteorBig {
    top: -16px;
    left: 69px;
    width: 168px;
  }
 
  #meteorSmall {
    top: 8px;
    right: 88px;
    width: 96px;
  }

  #rocksRight {
    top: 510px;
  }

  #contributeTextContainer {
    width: 73%;
    scale: 1.0;
    text-align: left;
  }

  #getinvolvedContributeButton {
   left: 50%;
   transform: translateX(-50%); 
  }

  .getinvolvedBottomBackgroundTop {
    margin-top: 51px;
  }

  .getinvolvedMenuBottom-mobi {
    margin-top: 50px;
  }

  .visionStatement {
    width: 90%;
    font-size: 23px;
  }

  .visionCaption {
    margin-top: 10px;
  }

  .support-overlay-logo {
    display:none;
  }

  #donation-toggle {
    height: 56px;
  }


  #whereTextContainer-mobi {
    width: 73%;
    scale: 1.0;
    text-align: left;
    top: 30px;
  }

  .roadmapcontainer {
    top: 67px;
  }
  
  #getinvolvedJourneyButton-mobi {
    scale: 1;
    transform: translateX(-50%);
    /* margin-top: 28px; */
    margin-top: 55px;
    width: 73%;
  }
  
  .toggle-btn {
    font-size: 18px;
  }

  .titleAboutUs-mobi {
    width: 100vw;
  }
  
  #statuesAboutUs {
    /* height: 241px; */
    /* top: 199px; */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
  }

  .aboutusTextBubble-mobi {
   top: 71px; 
  }

  .aboutusTextbox-mobi {
    padding-top: 29px;
  }

  #textBubblePointer {
    top: -294px;
  }

  #statueSpeaking {
   bottom: -50px; 
  }

  #ScriptureReadingsContainer {
    width: 89%
  }

  #nextPrevReadingBar {
    height: 6svh;
    height: 6vh; /* for systems that cannot read svh */
  }

  #controlsBar {
    height: 10vh;
  }

  #guideDrawer { 
    /* height: 100%; */
    height: 43vh;
  }

  #RSSpeechBubble {
    transform: translate(calc(((100vw - 1440px) / 5) + 92px), -8px);
  }

  #RSSpeechBubbleNew {
    /* left: 128px; */
    top: 21vw;
    left: 100%;
    transform: translate(-100%);
  }

  #RSSpeechBubblePolygon {
    /* top: 70px; */
    /* top: -10px; */
    /* top: 0; */
    top: 8px;
  }

  .speechBubblePolygon {
    /* height: 58vw; */
    height: 55vw;
    top: 8px;
  }

  .speechBubblePointer {
    top: 11vw;
  }

  .swiper-container {
   height: auto; 
   top: 12vw;
   min-height: 260px
  }

  .swiper {
    /* padding: 107px 0 0; */
    /* padding: 8vw; */
    /* min-height: 384px; */
    padding-top: 40px; /* To allow space for the active slide scale up */
    /* min-height: 260px; */
    min-height: 290px;
  }

  .swiper-button-prev, .swiper-button-next {
    /* top: calc(24vw + 63px); */
    top: calc(24vw + 10px);
  }

  .swiper-button-prev {
    left: 2.1vw;
  }

  .swiper-button-next {
    transform: translate(40vw, 100%);
}

  .swiper-slide figcaption {
    left: -7.2vw;
    bottom: -2vw;
    width: 48vw;
  }

  .swiper-slide figcaption p {
    font-size: 2.2vw;
    letter-spacing: 2.1px;
  }

  .saint-date {
    left: -3.6vw;
    bottom: 1.7vw;
  }

  #rosaryType {
    /* margin-top: -107px; */
    /* margin-top: -30px; */
    /* margin-top: 12vh; */
    position: absolute;
    top: 53%;
  }

  .mysteriesDay {
    font-size: 12px;
  }

  .mysteryTypeButton {
    height: 48px;
  }

  .footer-quote {
    font-size: 24px;
  }

  .tutorial-box {
    width: 90vw;
  }

  .tutorial-box-elements {
    width: 80%;
  }

  .tutorial-checkbox-container {
    font-size: 18px;
  }
}
/* END OF MOBILE SCREEN */


/* TOUCH SCREENS ONLY */
@media only screen and (pointer: coarse) and (hover: none) {
  .touchscreen-only {
    display: block;
  }
  
  .header-links {
    display: none;
  }
  
  .pagination-container-mobi {
    /* display: block; /* To be displayed on touch screens only */
  }

  .pagination { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* justify-content: space-between; */
    /* width: 10px; */
    /* width: 127px; */
  }

  .pagination:hover { /* TRANSFERRED TO TABLET SCREEN AND SMALLER */
    /* background-color: transparent; */
  }

  #hamburgerMenuButton {
    /* top: 3px; */
    top: 12px;
  }

  .floating-kofi-link {
    top: 12px;
  }

  #volume {
    display: none;
  }

  #fullscreen {
    display: none;
  }

  .RGNextPrev {
    display: none;
  }

  #nextPrevReadingWrapper {
    width: 90%;
  }

  #controlsBar {
    /* height: 10vh; */
    /* display: none; */ /* Initially wanted to start hidden, but with the tutorial, to keep it up */

    /* Test moving this to touch screen only */
    height: 8vh;
    display: flex;
    padding-left: 10%;
    padding-right: 10%;
    background-color: #00000070;
    border-top-color: #ffffff;
    border-top-style: solid;
    border-top-width: 1px;
  }

  #RSYcontrolsBar {
    height: 10vh;
    /* display: none; */ /* Initially wanted to start hidden, but with the tutorial, to keep it up */
    padding-left: 10%;
    padding-right: 10%;
    background-color: #00000070;
    border-top-color: #ffffff;
    border-top-style: solid;
    border-top-width: 1px;
  }

  #RSYvolume {
    display: none;
  }

  #RSYfullscreen {
    display: none;
  }
}
/* END OF TOUCH SCREENS ONLY */

/* TOUCH SCREENS IN PORTRAIT MODE ONLY */
@media only screen and (pointer: coarse) and (hover: none) and (orientation: portrait) {
  .lightbox-content {
    max-height: inherit;
    max-width:100vw;
    width: auto;
    height: auto;
  }

  .slider-image {
    /* width: 100%; */
    /* height: 100%; */
    /* max-height: 720px; */
    /* width: 100vw; */
    max-width: 100vw;
    width: auto;
    height: 100vh;
    /* height: auto; */
    object-fit: contain;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
  }

  #rosaryType {
    position: absolute;
    top: 53%;
  }
}
/* END OF TOUCH SCREENS IN PORTRAIT MODE ONLY */


/* FIX KO-FI BUTTON AT SMALLER SCREEN SIZES */
@media (max-width: 350px), (max-width: 550px) {
  .floatingchat-container-wrap-mobi {
    width: 50% !important;
  }
}

@media (min-width: 751px) {
  .floatingchat-container-wrap-mobi {
    height: 50px !important;
  }
}

/* END OF FIX KO-FI BUTTON AT SMALLER SCREEN SIZES */

/* CENTERING BEGIN MENU CONTAINER FOR DIFFERENT SCREENS */
@media (max-height: 720px) {
  .beginMenuContainer {
    bottom: 22vh;
  }
}

@media (min-height: 960px) {
  .beginMenuContainer {
    bottom: 33vh;
  }
}
/* END OF CENTERING BEGIN MENU CONTAINER FOR DIFFERENT SCREENS */


/* TUTORIAL SCREENS BELOW 682PX x 667PX */
@media only screen and (max-width: 682px) and (max-height: 667px) {

}
/* END OF TUTORIAL SCREENS BELOW 682PX x 667PX */