/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  background-color: none;
}

/* Style for the navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #000;
  margin-right: 75px;
}

/* Logo styling */
.navbar .logo {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}

/* Default Navigation (Visible on Desktop) */
.nav-links {
  display: flex; /* Ensure it is visible on larger screens */
  position: static;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  transform: none; /* No transform needed for larger screens */
  width: auto;
  height: auto;
  background: none;
}

/* Navigation links */
.navbar .nav-links li {
  list-style: none;
  text-align: center;
  margin-left: 2rem;
  position: relative;
}

.navbar .nav-links li a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  display: block;
  transition: background-color 0.3s;
}

.navbar .nav-links li a:hover {
  background-color: #222;
}

/* Dropdown menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 100%; 
  width: auto;
  line-height: 200%;
  text-align: left;
  border-radius: 5px;
  z-index: 1100;
}

/* Show dropdown when active */
.dropdown.active .dropdown-menu {
  display: block;
}

/* Style the dropdown items */
.dropdown-menu li {
  display: block;
  width: 100%;
}

.dropdown-menu li a {
  display: block;
  padding: 0.8rem;
  white-space: nowrap;
  text-align: left; /* Ensures text is aligned to the left */
}
/* Dropdown appears only when hovering over parent or dropdown itself */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Ensure the dropdown disappears when the mouse leaves */
.dropdown-menu:hover {
  display: block;
}

/* Style dropdown items */
.dropdown-menu li {
  display: block;
  width: 100%;
}

.dropdown-menu li a {
  display: block;
  padding: 0.8rem;
  white-space: nowrap;
  text-align: left;
  color: #fff;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background-color: #333; /* Change color on hover */
}

/* Arrow indicator */
.arrow {
  font-size: 18px;
  margin-left: 5px;
}
/* Arrow indicator */
.arrow {
  font-size: 18px;
  margin-left: 5px;
}

/* Hamburger menu icon */
.menu-icon {
  display: none;
  flex-direction: column;
  cursor: pointer;
  justify-content: space-between;
  height: 20px;
}

.menu-icon .bar {
  width: 25px;
  height: 4px;
  background-color: #fff;
  border-radius: 2px;
}

/* Mobile Navigation */
@media (max-width: 950px) {
  /* Hide navigation by default on mobile */
  .navbar {
  margin-right: 20px;
}
	.nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    background-color: #000;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  /* Show navigation when active */
  .nav-links.active {
    transform: translateX(0);
    display: flex;
  }

  /* Show hamburger icon on mobile */
  .menu-icon {
    display: flex;
  }

  .navbar .nav-links li {
    margin: 1.5rem 0;
  }

  /* Dropdown menu on mobile */
  .dropdown-menu {
    position: static;
    width: 100%;
  }

  .dropdown.active .dropdown-menu {
    display: block;
  }
}
  

  .dropdown .arrow {
    margin-left: 5px;
  }

/* Ensure dropdowns are hidden by default on mobile */
@media (max-width: 950px) {
  .dropdown-menu {
    display: none;
  }

  .dropdown.active .dropdown-menu {
    display: block;
  }
}

.responsive-background-left,
.responsive-background-right {
  display: block;
  width: 100vw; /* Full viewport width */
  height: auto; /* Adjust height dynamically */
  background-size: contain; /* Ensures the entire image is visible */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat;
  max-width: 100%; /* Prevents overflow */
}

/* Adjustments for smaller screens */
@media (max-width: 1900px) {
  .responsive-background-left {
    background-image: url("assets/1200-l.png");
  }
  .responsive-background-right {
    background-image: url("assets/1200-r.png");
  }
}

@media (max-width: 950px) {
  .responsive-background-left {
    background-image: url("assets/960-l.png");
  }
  .responsive-background-right {
    background-image: url("assets/960-r.png");
  }
}

@media (max-width: 768px) {
  .responsive-background-left {
    background-image: url("assets/768-l.png");
  }
  .responsive-background-right {
    background-image: url("assets/768-r.png");
  }
}


@media (max-width: 1900px) {
 .responsive-background-left {
  width: 931px; /* Make the div take full width of its container */
  height: 23px; /* Set height using padding for aspect ratio */
  background-image: url("assets/1200-l.png");
  background-position: left; /* Center the image */
  background-repeat: no-repeat;
}
	 .responsive-background-right {
  width: 931px; /* Make the div take full width of its container */
  height: 23px; /* Set height using padding for aspect ratio */
  background-image: url("assets/1200-r.png");
  float:right;/* Center the image */
  background-repeat: no-repeat;
}

}

/* Group class schedule */
 .group-class-schedule {
    background-color: #000000; /* White background */
    padding: 2rem 1rem; /* Padding for spacing */
    text-align: center; /* Center align text */
  }

  .group-class-schedule h1 {
    font-size: 2rem; /* Default font size for small screens */
    font-weight: bold; /* Bold text */
    margin-bottom: 1rem; /* Spacing below the header */
    color: #FFFFFF; /* Dark gray text color */
  }



  .group-class-schedule a {
    color: #D7FB01; 
    text-decoration: none; /* Underline link */
    transition: color 0.3s; /* Smooth hover effect */
  }

  .group-class-schedule a:hover {
    color: #869D00; 
  }

  .group-class-schedule p {
    font-size: 1.125rem; /* Default paragraph size */
    margin-top: 1rem; /* Spacing above the paragraph */
    color: #FFFFFF; /* Gray text color */
    line-height: 1.6; /* Better readability */
    max-width: 40rem; /* Limit the paragraph width */
    margin-left: auto; /* Center the text block */
    margin-right: auto; /* Center the text block */
  }
body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
	        text-align: center
        }
        .container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 1.5rem;
            background: #000;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .title {
            font-size: 4rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #FFFFFF;
        }
        .content {
            font-size: 1rem;
            line-height: 1.6;
            color: #FFFFFF;
        }
        .schedule {
            margin-top: 1.5rem;
        }
        .schedule a {
            display: inline-block;
            margin-top: 0.5rem;
            color: #D7FB01;
            text-decoration: none;
        }
        .schedule a:hover {
            text-decoration: underline;
        }
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color:#000000;
}

.responsive-placeholders {
  display: flex;
  flex-wrap: wrap; /* Ensures placeholders wrap to the next line if needed */
  gap: 20px; /* Adds spacing between placeholders */
  padding: 1px;
  justify-content: center; /* Centers the placeholders horizontally */
}

.placeholder {
  flex: 1 1 calc(20% - 20px); /* Each placeholder takes up 20% of the container minus the gap */
  background-color: #000000;/* Light gray background */
  text-align: center;
  padding: 20px;
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for a modern look */
 
}

@media (max-width: 1200px) {
  .placeholder {
    flex: 1 1 calc(33.33% - 20px); /* 3 placeholders per row on medium screens */
  }
}

@media (max-width: 768px) {
  .placeholder {
    flex: 1 1 calc(50% - 20px); /* 2 placeholders per row on small screens */
  }
}

@media (max-width: 480px) {
  .placeholder {
    flex: 1 1 100%; /* 1 placeholder per row on extra-small screens */
  }
}
/* Footer */
footer {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start; /* Ensures alignment of the logo and sections horizontally */
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
  padding-top: 50px;
	padding-bottom: 30px;
}

.footer-logo {
  flex: 0 0 auto; /* Fixes the width of the logo */
  margin-right: 20px;
  text-align: left;
}

.footer-logo img {
  max-width: 300px;
  height: auto;
}

.footer-logo p {
  margin-top: 10px;
  font-size: 60px;
}

.footer-logo p a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-logo p a:hover {
  color: #fff;
}

.footer-sections {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  gap: 20px;
}

.footer-section {
  flex: 1 1 200px;
}

.footer-section h4 {
  font-size: 18px;
  margin-bottom: 15px;
  border-bottom: 2px solid #555;
  padding-bottom: 5px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section ul li a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section ul li a:hover {
  color: #fff;
}

.footer-social {
  text-align: center;
  margin-top: 20px;
}

.footer-social a {
  margin: 0 10px;
  color: #bbb;
  font-size: 24px;
  transition: color 0.3s;
}

.footer-social a:hover {
  color: #fff;
}

.footer-bottom {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid #555;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
  }
  .footer-logo {
    margin-bottom: 20px;
  }
  .footer-sections {
    flex-direction: column;
    align-items: center;
  }
  .footer-section {
    margin: 10px 0;
  }
}
/* Chat box and button */
     .chat-box {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      width: 300px;
      display: none;
      flex-direction: column;
    }

    .chat-box header {
      background-color: #333;
      color: #fff;
      padding: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    .chat-box .messages {
      padding: 10px;
      overflow-y: auto;
      max-height: 200px;
      flex-grow: 1;
    }

    .chat-box .input {
      display: flex;
      border-top: 1px solid #ccc;
    }

    .chat-box .input input {
      flex-grow: 1;
      border: none;
      padding: 10px;
      border-bottom-left-radius: 10px;
    }

    .chat-box .input button {
      background-color: #333;
      color: #fff;
      border: none;
      padding: 10px;
      border-bottom-right-radius: 10px;
      cursor: pointer;
    }

    .chat-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #000000;
	  border-color: #FFFFFF;
      padding: 5px 10px;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	  border: 1.5px solid white;
	  font-size: 20px;
    }

    .chat-button:hover {
      background-color: #000000;
    }

/* Phone link */
    .phone-link {
      color: #fff;
      text-decoration: none;
      font-size: 38px;
      display: block;
      margin-top: 15px;
	  font-family:"impact", "sans-serif";
	  letter-spacing: 2.8px;
	  padding-bottom: 15px;
	  
    }
   .logo-1{
	 align-items: left;
}
   .phone-link:hover {
     text-decoration: underline;
    }


	@media (max-width: 950px) {
  .nav-links.active {
    overflow-y: auto;
    max-height: 100vh;
    padding-bottom: 40px;
  }
}
@media (max-width: 950px) {
  .dropdown-menu {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    padding-left: 0;
  }

  .dropdown-menu li a {
    padding-left: 20px; /* indents submenu items */
    text-align: left;
    width: 100%;
  }
}