:root {
  /*1. Make background black*/
  --body-bg: #191919;
  /*2. Make Text White*/
  --body-color: #FFFFFF;
  /*3. Adjust Cassiopeia Color Scheme*/
  --cassiopeia-color-primary: #D50000;
  --cassiopeia-color-link: #ff9f00;
  --cassiopeia-color-hover: orange;
  --emphasis-color: #FFF;
  --emphasis-color-rgb: 255, 255, 255;
  --secondary-color: #C0AFA0;
  --link-color: #FFF;
  --link-color-rgb: 255, 255, 255;
  --link-hover-color: #FFF;
  --link-hover-color-rgb: 255, 255, 255;
  --fc-page-bg-color: #555;
}

.nav {
  display: flex;
  flex-direction: column; /* Stack vertically by default (mobile) */
  background-color: black;
  justify-content: right;
  align-items: right;
  font-size: .8rem;
}

@media screen and (min-width: 768px) {
  .nav {
    flex-direction: row; /* Side by side on desktop */
  }
}

.container-header {
  background-color: black;
  background-image: none;
}

main-image {
  width: 800;
}

.about-background {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://prathermartialarts.com/images/shoshin-nagamine-chotoku-omine-1000px-851px.png");
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-size: auto; /* Use the image's intrinsic size */
  background-position: center; /* Center the image */
  /*width: 1000px;
  height: 851px;*/
  min-height: 851px; /* Set the minimum height */
  overflow-y: auto; /* Allow vertical scrolling if content overflows */
}

.about-text {
  font-family: 'Lora', serif;
  font-size: 1.5rem !important;
  font-style: italic;
}

@media screen and (min-width: 768px) {
  .about-text {
    width: 50%;
    height: 50%;
  }
}

.footer {
  background-color: #191919;
  background-image: none;
}

.mod-footer {
  width: 100%;
}

.footer1 {
  text-align: center;
  width: 100%;
}

.main-text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /*width: 100%;*/
  /*height: 700px;*/
}

.main-text-image {
  background-image: url("https://prathermartialarts.com/images/hero1-500x303.png");
  width: 50%;
  height: 303px;
}

.main-text-item-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
}

.main-text-item {
  width: 70%;
  text-align: center;
  font-family: poppins-extralight;
}

.main-text-title {
  font-size: 3rem;
}

.main-text-tagline {
  padding: 10px;
  font-weight: bold;
}

.gm-style-iw {
    color: #000000; /* Set text color to black */
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="checkbox"],
textarea,
select, 
select.form-select,
.form-control,
select option, 
select.form-select option,
.form-control option,
option {
    background-color: #191919 !important; /* Change this to your desired color */
    color: white !important; /* Optional: Change text color for better visibility */
}

joomla-alert[type="success"] {
  background-color: #F2F8F4 !important; /* Change this to your desired color */
  color: #448344 !important; /* Optional: Change text color for better visibility */
  font-weight: bold;
}

joomla-alert[type="danger"] {
  background-color: #FBE4E3 !important; /* Change this to your desired color */
  color: #A51F18 !important; /* Optional: Change text color for better visibility */
  font-weight: bold;
}

joomla-alert[type="warning"] {
  background-color: #FFECD2 !important; /* Change this to your desired color */
  color: #AD6200 !important; /* Optional: Change text color for better visibility */
  font-weight: bold;
}

joomla-alert[type="info"] {
  background-color: #D9E7F2 !important; /* Change this to your desired color */
  color: #30638D !important; /* Optional: Change text color for better visibility */
  font-weight: bold;
}

.container-header .metismenu > li > a:hover:after, .container-header .metismenu > li > button:hover:before, .container-header .metismenu > li.active > a:after, .container-header .metismenu > li.active > button:before {
  background: --body-bg; 
}

.metismenu.mod-menu .mm-collapse {
  background-color: var(--body-bg);
}