/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

/* Layout Container */
.layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Sidebar (Fixed Left Panel) */
.sidebar {
  width: 25%;
  min-width: 280px;
  max-width: 300px;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  padding: 30px 20px;
  display: flex;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 999;
  flex-direction: column;
}

.sidebar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}


.sidebar img {
  max-width: 70%;
  height: auto;
}

.sidebar-footer img{
    max-width:100px;
}
.header-logo{
    
    padding: 0px 20px;
}
    
}


.sidebar-nav {
  flex-grow: 1;
  margin-top: 30px;
}
.sidebar-nav ul {
  list-style: none;
  padding-left: 0;
}
.sidebar-nav ul li {
  margin-bottom: 10px;
  position: relative;
}
.sidebar-nav ul li a {
  position: relative;
  display: block;
  padding: 5px 15px;
  color: #333;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.sidebar-nav ul li a:hover {
  color: #28a745;
  background-color: #f0f0f0;
}

.sidebar-nav .menu-item-has-children > a::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #999;
  transition: transform 0.8s ease;
}

.sidebar-nav .menu-item-has-children.active > a::after {
  transform: translateY(-50%) rotate(180deg);
}

.sidebar-nav ul.sub-menu {
 max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease;
  padding-left: 15px;
  margin-top: 5px;
  border-left: 2px solid #28a745;
}
.sidebar-nav li.menu-item-has-children.active > .sub-menu {
  max-height: 600px;
}

.sidebar-nav ul.sub-menu li a {
  font-size: 13px;
  padding: 1px 15px;
  color: #555;
}
.sidebar-nav ul.sub-menu li a:hover {
  color: #28a745;
  background-color: #f8f8f8;
}
.sidebar-footer {
  margin-top: auto;
  text-align: left;
  padding-top: 20px;
}

/* Right Content Area */
.right-content {
  margin-left: 280px;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: calc(100% - 280px);
  flex: 1;
}

.right-content > main {
  flex-grow: 1;
}

.page-content-wrapper {
  padding: 0;
  flex-grow: 1;
}
.page-content-wrapper img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Sticky Call + Search Overlay */
/* Existing */
.call-search-overlay {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
}

/* New: the number as a pill */
.call-search-overlay .contact-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 9999px;              /* full round */
  line-height: 1;
  font-weight: 600;
  color: #fff;                        /* on hero it stays white w/o bg */
  background: transparent;            /* no bg before scroll */
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

/* When scrolled: show a solid pill so it contrasts on white sections */
.call-search-overlay.scrolled .contact-pill {
  background: rgba(0,0,0,.75);        /* dark pill */
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Optional: make the round icons look like buttons */
.call-search-overlay .call-icon {
  display: inline-flex;
  width: 40px; height: 40px;
  justify-content: center; align-items: center;
  border-radius: 50%;
  background: #fff;
  color: #222;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition: transform .15s ease;
}
.call-search-overlay .call-icon:hover { transform: translateY(-1px); }

/* Small screens: keep it tidy */
@media (max-width: 576px) {
  .call-search-overlay { gap: 6px; right: 12px; top: 12px; }
  .call-search-overlay .contact-pill { padding: 5px 10px; font-size: 14px; }
}

.call-icon {
  background: #444;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
}
.search-box {
  background: white;
  border-radius: 25px;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  min-width: 200px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.search-box input {
  border: none;
  outline: none;
  width: 100%;
  padding: 5px;
  background: none;
}

/* Footer */
.site-footer {
  background: #fff;
  padding: 15px 30px;
  font-size: 14px;
  border-top: 1px solid #ddd;
  color: #555;
 
}

.footer-links a {
  color: #333;
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}

.site-footer i {
  font-size: 18px;
}

  /* Style Mobile Header Icons Black */
.mobile-header .btn-link i {
  color: #000 !important; /* Ensures black color */
}

/* Optional: Remove blue hover/focus background on Bootstrap buttons */
.mobile-header .btn-link {
  color: #000 !important;
  background-color: transparent !important;
  box-shadow: none;
}

/* Responsive */
@media (max-width: 991px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    display: none !important;
  }

  .right-content {
    width: 100%;
    margin-left: 0;
  }

  .call-search-overlay {
    display: none;
  }
  


  .mobile-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  }
  
.mobile-sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-sidebar-content {
  width: 280px;
  height: 100%;
  background: #fff;
  overflow-y: auto;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: -300px;
  z-index: 10000;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
}

.mobile-sidebar-overlay.active .mobile-sidebar-content {
  left: 0; /* slide in */
}

  .mobile-sidebar-content nav {
    flex-grow: 1;
  }

  .mobile-sidebar-content .nav {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .mobile-sidebar-content .nav li {
    position: relative;
    margin-bottom: 10px;
  }

  .mobile-sidebar-content .nav li a {
    display: block;
    color: #333;
    font-size: 15px;
    text-decoration: none;
    padding: 10px 15px;
    transition: background 0.2s ease;
  }

  .mobile-sidebar-content .nav li a:hover {
    background-color: #f8f8f8;
    color: #28a745;
  }
  
  .mobile-sidebar-content .menu-item-has-children > a {
  position: relative;
  padding-right: 30px; /* Space for arrow */
}

  .mobile-sidebar-content .menu-item-has-children > a::after {
    content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: #888;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  pointer-events: none; /* prevent accidental clicks */
  }

  .mobile-sidebar-content .menu-item-has-children.open > a::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .mobile-sidebar-content .sub-menu {
    display: none;
    padding-left: 20px;
    border-left: 2px solid #28a745;
    margin-top: 5px;
  }

  .mobile-sidebar-content .menu-item-has-children.open .sub-menu {
    display: block;
  }

  .mobile-sidebar-content .sub-menu li {
    margin: 5px 0;
  }

  .mobile-sidebar-content .sub-menu li a {
    font-size: 14px;
    color: #555;
    display: block;
    padding: 6px 10px;
  }

  .mobile-sidebar-content .sub-menu li a:hover {
    color: #28a745;
    background: #f2f2f2;
  }

  .mobile-sidebar-content button.close-btn {
    align-self: flex-end;
    font-size: 24px;
    background: none;
    border: none;
    color: #333;
    margin-bottom: 20px;
  }
  
  .submenu-toggle {
  position: absolute;
  right: 10px;
  top: 12px;
  background: none;
  border: none;
  font-size: 14px;
  color: #000;
  cursor: pointer;
  z-index: 10;
}

.menu-item-has-children.open .submenu-toggle i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

}

.date-badge {
  display: inline-block;
  background-color: #A1C2AD;
  color: #000;
  font-size: 0.65em;
  padding: 4px 4px;
  border-radius: 6px;
  font-weight: 500;
}