/*!
 * Start Bootstrap - Blog Home HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
  padding-top: 0px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
  background-color: #dad3be;
}
a {
  color: #254336;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li {
  color: #254336;
}

.card {
  background-color: #b7b597;
  color: #254336;
}

.pagination .page-link {
  border: 2px solid #254336;
  color: #28a745;
  font-weight: bold;
}

.pagination .page-item.active .page-link {
  background-color: #254336;
  border-color: #254336;
  color: #ffff;
  font-weight: bold;
}

.pagination .page-link:hover {
  background-color: #28a745; /* Change background on hover */
  color: #ffffff; /* Change text color on hover */
}
.modal-content {
  background-color: #b7b597;
  color: #254336;
}

.sitename {
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.navbarback {
  background-color: #254336;
}

.formColor {
  color: #254336;
}

.navdropdown {
  background-color: #6b8a7a;
}

.addClass {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}

.invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

footer {
  margin: 50px 0;
}

.iframe-container {
    position: relative;
    width: 100%; /* Full width */
    max-width: 800px; /* Optional: Limit the width on larger screens */
    margin: 0 auto; /* Center the iframe horizontally */
    aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */
    overflow: hidden;
    border-radius: 0.5rem; /* Match the iframe's border-radius */
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    border: none;
}

/* Adjust iframe size for small screens */
@media (max-width: 576px) {
    .iframe-container {
        max-width: 100%; /* Allow full width on small screens */
        aspect-ratio: 4 / 3; /* Adjust aspect ratio for better visibility */
    }
}

/* Hide the navbar on small screens */
@media (max-width: 991.98px) {
  .nav-menu {
    display: flex; /* Ensure it displays when toggled */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%; /* Make it full width for small screens */
    max-width: 100%; /* Prevent any unintended width restrictions */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    background-color: #343a40;
    z-index: 1000;
    padding-top: 60px;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
  }
  .nav-menu.show {
    transform: translateX(0);
  }
  .navbar-toggler {
    display: block;
  }
}

/* Show the navbar on larger screens */
@media (min-width: 992px) {
  .nav-menu {
    display: flex;
    position: static;
    height: auto;
    width: auto;
    max-width: 100%; /* Prevent any unintended width restrictions */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    background-color: transparent;
    transform: none;
    padding-top: 0;
  }
  .navbar-toggler {
    display: none;
  }
}

/* Hide the sidebar on small screens */
@media (max-width: 991.98px) {
  .sidebar {
    display: none;
  }
}