@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,300;1,700&family=Poppins:wght@400;500;600;700;800;900&display=swap";
:root {
  /* ------------------- CS STYLES ------------------- */
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #ff6a3e;
  --primaryLight: #ffba43;
  --secondary: #ffba43;
  --secondaryLight: #ffba43;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  /* ------------------- NAV STYLES ------------------- */
  --navTextColor: #fff;
  --font-family_1: 'Poppins', sans-serif;
  --backgroundColor:#fff;
  --contentBackgroundColor:#faf6f6;
  --topNavBackgroundColor: #141d10;
  --sideNavBackgroundColor: #141d10;
  --navBackgroundHighlightColor: #1d362c;
  --topNavBackgroundHighlightColor: #1d362c;
  --settingsHighlightColor: #639982;
  --settingsTextColor: #294d3e;
  --choirhubTextColor: #639982;
}

body {
  margin: 0;
  padding: 0;
  background: var(--backgroundColor);
}

*, *:before, *:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}

.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: calc(4 / 16 * 1rem);
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: calc(700 / 16 * 1rem);
  margin: 0 0 calc(16 / 16 * 1rem) 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: calc(650 / 16 * 1rem);
  margin: 0;
  color: var(--bodyTextColor);
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--backgroundColor);
}

.my-container {
  margin-top: 0;
  margin-bottom: 6em;
  width: 85vw;
}

@media screen and (min-width: 768px) {
  .my-container {
    margin-top: 4em;
  }
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 260px;
  background: var(--sideNavBackgroundColor);
  z-index: 100;
  transition: all 0.5s ease;
}

.sidebar a {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.sidebar .logo-details {
  height: 60px;
  width: 100%;
}

.sidebar .logo-details i {
  font-size: 30px;
  color: var(--navTextColor);
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}

.sidebar .logo-details .nav-icon-container {
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}

.sidebar .logo-details .nav-icon {
  height: 90px;
}

.sidebar .logo-details .logo_name {
  font-size: 22px;
  color: var(--navTextColor);
  font-weight: 600;
  transition: opacity 0.4s ease;
  transition-delay: 0.1s;
}

.sidebar .logo-details .logo_name .choirhub-text {
  color: var(--choirhubTextColor);
  font-weight: 700;
  font-size: 1.2em;
}

.sidebar .nav-links {
  height: 100%;
  padding: 30px 0 150px 0;
  overflow: auto;
}

.sidebar .nav-links::-webkit-scrollbar {
  display: none;
}

.sidebar .nav-links li {
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}

.sidebar .nav-links li:hover {
  background: var(--navBackgroundHighlightColor);
}

.sidebar .nav-links li .icon-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar .nav-links li i {
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
  color: var(--navTextColor);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar .nav-links li .nav-icon-container {
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}

.sidebar .nav-links li .nav-icon {
  filter: brightness(0.3) invert(1);
  height: 30px;
  margin: auto;
  vertical-align: middle;
}

.sidebar .nav-links li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sidebar .nav-links li a .link_name {
  font-size: 18px;
  font-weight: 400;
  color: var(--navTextColor);
  transition: all 0.4s ease;
}

.sidebar .nav-links li .sub-menu {
  padding: 6px 6px 14px 80px;
  margin-top: -10px;
  background: var(--navBackgroundHighlightColor);
  display: none;
}

.sidebar .nav-links li .sub-menu a {
  color: var(--navTextColor);
  font-size: 15px;
  padding: 5px 0;
  white-space: normal;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.sidebar .nav-links li .sub-menu a:hover {
  opacity: 1;
}

.sidebar .nav-links li .sub-menu .past-event {
  color: #ffa5a5;
}

.sidebar .nav-links li .sub-menu .link_name {
  display: none;
}

.sidebar .nav-links li .sub-menu.blank {
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}

.sidebar .nav-links li.showMenu i.arrow {
  transform: rotate(-180deg);
}

.sidebar .nav-links li.showMenu .sub-menu {
  display: block;
}

.sidebar .profile-details {
  position: fixed;
  bottom: 0;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navBackgroundHighlightColor);
  padding: 12px 20px 12px 0px;
  transition: all 0.5s ease;
}

.sidebar .profile-details .profile-content {
  display: flex;
  align-items: center;
}

.sidebar .profile-details .name-job {
  overflow: hidden;
}

.sidebar .profile-details img {
  height: 52px;
  width: 52px;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 14px 0 12px;
  background: var(--navBackgroundHighlightColor);
  transition: all 0.5s ease;
}

.sidebar .profile-details .profile_name {
  color: var(--navTextColor);
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.sidebar .profile-details .job {
  color: var(--navTextColor);
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  font-size: 12px;
}

.sidebar .profile-details i {
  color: var(--navTextColor);
  font-size: 24px;
  margin-right: 12px;
  cursor: pointer;
}

.sidebar.close {
  width: 78px;
}

.sidebar.close .logo-details .logo_name {
  transition: opacity 0.2s ease;
  transition-delay: 0s;
  opacity: 0;
  pointer-events: none;
}

.sidebar.close .logo-details .nav-icon-container {
  height: 50px;
  min-width: 78px;
  text-align: center;
}

.sidebar.close .logo-details .nav-icon {
  height: 90px;
  margin: auto;
}

.sidebar.close .nav-links {
  overflow: visible;
}

.sidebar.close .nav-links li .icon-link {
  display: block;
}

.sidebar.close .nav-links li a .link_name {
  opacity: 0;
  pointer-events: none;
}

.sidebar.close .nav-links li .sub-menu {
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}

.sidebar.close .nav-links li .sub-menu .link_name {
  font-size: 18px;
  opacity: 1;
  display: block;
}

.sidebar.close .nav-links li:hover .sub-menu {
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}

.sidebar.close .nav-links i.arrow {
  display: none;
}

.sidebar.close .profile-details {
  background: none;
  width: 78px;
}

.sidebar.close .profile-details img {
  padding: 10px;
}

.sidebar.close .profile-details i {
  display: none;
}

.sidebar.close .profile-details .profile_name {
  display: none;
}

.sidebar.close .profile-details .job {
  display: none;
}

.sidebar.close ~ .not-the-sidebar {
  left: 78px;
  width: calc(100% - 78px);
}

.not-the-sidebar {
  position: relative;
  height: 100%;
  left: 260px;
  width: calc(100% - 260px);
  transition: all 0.5s ease;
}

.top-nav {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--topNavBackgroundColor);
  display: flex;
  align-items: center;
  justify-content: start;
  height: 60px;
  width: 100%;
}

.top-nav li {
  float: left;
  list-style: none;
}

.top-nav li a, .top-nav li i, .top-nav li.toggle-sidebar, .top-nav .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.top-nav li:hover, .top-nav .dropdown:hover .dropbtn {
  background-color: var(--topNavBackgroundHighlightColor);
}

.top-nav li.dropdown {
  display: inline-block;
}

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

.top-nav .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.top-nav .dropdown-content a:hover {
  background-color: #f1f1f1;
}

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

.top-nav .bx-menu {
  color: var(--navTextColor);
  font-size: 35px;
  margin: 0 15px;
  cursor: pointer;
}

.top-nav .hamburger {
  max-width: 35px;
  filter: brightness(0.5) invert(1);
  vertical-align: middle;
  cursor: pointer;
  margin: 0 15px;
}

.top-nav .text {
  color: var(--navTextColor);
  font-size: 35px;
  font-size: 26px;
  font-weight: 600;
}

.top-nav .first-right {
  margin-left: auto;
}

.top-nav .logged-out-top-nav-logo {
  max-width: 80px;
}

.top-nav .top-nav-desktop {
  display: none;
}

.top-nav .top-nav-toggle {
  display: flex;
  margin-left: auto;
}

.top-nav .top-nav-open {
  display: flex;
  top: 60px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #384d3f;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1000;
}

.top-nav .top-nav-open li {
  float: none;
  margin: 0 auto;
}

.top-nav .top-nav-open .right {
  margin: 0 auto;
}

.top-nav .top-nav-closed {
  display: none;
}

@media (min-width: 767px) {
  .top-nav .logged-out-top-nav-logo {
    display: flex;
  }
  .top-nav .top-nav-desktop {
    display: flex;
    width: 100%;
  }
  .top-nav .top-nav-desktop .last-right {
    margin-right: 1em;
  }
  .top-nav #top-nav-mobile {
    display: none;
  }
  .top-nav .top-nav-toggle {
    display: none;
  }
}

.page-header {
  color: #1d362c;
  /* Echoing the color used in your div for consistency */
  text-align: center;
  /* Centers the heading on the page */
  margin-top: 30px;
  /* Spacing from the top of the page */
  margin-bottom: 50px;
  /* Spacing before the content starts */
  text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
  /* Soft shadow for depth */
}

.page-header h2 {
  font-weight: 700;
  /* Bold font weight for emphasis */
  font-size: 2em;
  /* Large size for visibility */
}

@media screen and (min-width: 769px) {
  .page-header h2 {
    font-weight: 700;
    /* Bold font weight for emphasis */
    font-size: 4em;
    /* Large size for visibility */
  }
}

/* -----------MESSAGE FLASHING-------------- */
.flashes {
  position: fixed;
  /* Positioning the messages */
  top: 70px;
  /* Distance from the top of the viewport */
  right: 10px;
  /* Distance from the right side of the viewport */
  width: 300px;
  /* Width of the message box */
  padding: 10px;
  background-color: #f4f4f4;
  /* Light grey background */
  border: 1px solid #800000;
  /* Grey border */
  border-radius: 5px;
  /* Rounded corners */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  /* Subtle shadow */
  animation: fadeOut 4s ease-in forwards;
  /* Animation to fade out */
  animation-delay: 2s;
  z-index: 1000;
  /* Ensure it's on top of everything */
}

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

.flashes li {
  margin: 5px 0;
  /* Space between messages */
  color: #800000;
  /* Dark red text color */
  list-style-type: none;
}

.user-settings {
  max-width: 400px;
  margin: 3em auto;
  padding: 30px;
  border: 1px solid #ccc;
  text-align: center;
  background-color: #f9f9f9;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2), 0 15px 25px rgba(0, 0, 0, 0.1);
  /* Largest but lightest shadow */
  border-radius: 10px;
  /* Optional: adds rounded corners */
}

.user-settings h2 {
  color: #333;
  margin-bottom: 20px;
}

.user-settings .profile-link {
  display: block;
  padding: 12px 20px;
  margin: 10px auto;
  font-size: 18px;
  color: var(--settingsTextColor);
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.user-settings .profile-link:hover {
  background-color: var(--settingsHighlightColor);
  color: white;
}

.user-settings hr {
  border: none;
  height: 1px;
  background-color: #ddd;
  /* Neutral color for the horizontal rule */
  margin: 15px 0;
}

* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.welcome {
  position: relative;
  width: 90%;
  min-height: 80vh;
  margin: 20px;
  padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  display: flex;
  justify-content: space-between;
  background: var(--contentBackgroundColor);
  /* Layered shadows */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2), 0 15px 25px rgba(0, 0, 0, 0.1);
  /* Largest but lightest shadow */
  border-radius: 10px;
  /* Optional: adds rounded corners */
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo {
  position: relative;
  max-width: 80px;
}

header ul {
  position: relative;
  display: flex;
}

header ul li {
  list-style: none;
}

header ul li a {
  display: inline-block;
  color: #333;
  font-weight: 800;
  margin-left: 40px;
  text-decoration: none;
}

.welcome-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.welcome-container .welcome-text-box {
  margin-top: 2em;
  position: relative;
  max-width: 600px;
}

.welcome-container .welcome-text-box h2 {
  color: #333;
  font-size: 3em;
  font-weight: 500;
}

.welcome-container .welcome-text-box h2 span {
  color: #017143;
  font-size: 1.2em;
  font-weight: 900;
}

.welcome-container .welcome-text-box p {
  color: #333;
}

.welcome-container .welcome-text-box a {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 20px;
  background: #017143;
  color: #fff;
  border-radius: 40px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
}

.welcome-container .welcome-text-box .choirhub-text {
  color: #00633a;
  font-weight: 700;
  font-size: 1.1em;
}

.welcome-container .img-box {
  width: 600px;
  display: flex;
  justify-content: flex-end;
  padding-right: 50px;
  margin-top: 50px;
}

.welcome-container .img-box img {
  max-width: 340px;
}

.circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #639982;
  /* Adjust the circle size and position */
  clip-path: circle(65% at 100% 100%);
}

@media screen and (min-width: 768px) {
  .welcome {
    align-items: center;
    padding-top: 0;
  }
  .welcome .welcome-container {
    align-items: center;
  }
  .welcome .welcome-container .welcome-text-box h2 {
    font-size: 4em;
  }
  .welcome .welcome-container .welcome-text-box h2 span {
    color: #017143;
    font-size: 1.2em;
    font-weight: 900;
  }
}