body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: #fff;
  }

  /* Top Strip */
  .mh-top-strip {
      background: #ec8937;
      color: white;
      font-size: 14px;
  }

  .mh-btn {
      border: 1px solid #fff;
      padding: 0 8px;
  }

  .mh-top-links a {
      color: white;
      text-decoration: none;
      margin-right: 6px;
  }

  /* Logo Section */
  .mh-logo-section {
      background: #fcf2e8;
  }

  .eng-title {
      font-size: 30px;
      font-weight: 700;
      color: #ad0303;
  }

  .hindi-title {
      font-size: 28px;
      color: #ad0303;
      font-weight: 600;
  }

  .sub-heading {
      font-size: 16px;
      margin-top: -5px;
  }

  /* Icons */
  .mh-icons img {
      margin-right: 10px;
  }

  /* Navbar */
  .mh-navbar {
      background: #ec8937;
  }

  .mh-navbar .nav-link {
      color: #fff !important;
      font-size: 15px;
      padding: 12px 18px;
      font-weight: 600;
  }

  .mh-navbar .nav-link:hover {
      background: #e9691b;
      color: #fff !important;
  }

  /* Dropdown */
  .dropdown-menu {
      background: #fff;
      border-radius: 0;
      padding: 8px 0;
  }

  .dropdown-item:hover {
      background: #e9691b;
      color: #fff;
  }

  /* principle desk section */

  :root {
      --bg-beige: #f7e6d7;
      --shadow: rgba(0, 0, 0, 0.1);
      --tab-text: #7a4a1d;
      --border-color: #e6b97d;
      --principal-text: #7a4a1d;
  }

  .custom-container {
      display: flex;
      gap: 20px;
      max-width: 1200px;
      margin: auto;
  }

  /* Left column - Notification panel - col-4 (approx 33%) */
  .custom-notification-panel {
      flex: 0 0 33.3333%;
      background: var(--bg-beige);
      border-radius: 20px;
      box-shadow: 0 3px 8px var(--shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 460px;
      /* fixed height for matching principal card */
  }

  /* Tabs */
  .custom-tabs {
      display: flex;
      background: #f1c9a3;
  }

  .custom-tab-item {
      flex: 1;
  }

  .custom-tab-link {
      display: block;
      padding: 12px 0;
      text-align: center;
      color: #ad0303;
      font-weight: 700;
      font-size: 0.9rem;
      cursor: pointer;
      user-select: none;
      background-color: #f6c7a6;
      border-radius: 15px 15px 0 0;
      transition: background 0.3s, color 0.3s;
  }

  .custom-tab-link.active {
      background: #ec8937 !important;
      color: #fff !important;
  }

  /* Content */
  .custom-tab-content {
      background: #fff8f1;
      height: 400px;
      border-radius: 0 0 20px 20px;
      overflow: hidden;
      padding: 15px 20px;
  }

  .custom-tab-pane {
      display: none;
      height: 100%;
  }

  .custom-tab-pane.active {
      display: block;
  }

  /* Marquee */
  marquee {
      height: 370px;
      display: block;
  }

  ul.notifications-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  ul.notifications-list li {
      border-bottom: 1px solid var(--border-color);
      padding: 12px 0;
  }

  ul.notifications-list li:last-child {
      border-bottom: none;
  }

  .date {
      background: #ec8937;
      color: #fff;
      border-radius: 15px;
      padding: 5px 14px;
      font-weight: 700;
      font-size: 0.8rem;
      display: inline-block;
      margin-bottom: 6px;
  }

  .notification-text {
      font-size: 0.95rem;
      color: var(--tab-text);
  }

  /* Right column - Principal Card - col-8 (approx 66%) */
  .custom-principal-card {
      flex: 0 0 66.6667%;
      background: #fff8f1;
      border-radius: 20px;
      box-shadow: 0 3px 8px var(--shadow);
      display: flex;
      padding: 20px;
      align-items: center;
      gap: 20px;
      height: 460px;
  }

  .custom-principal-photo {
      flex-shrink: 0;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      border: 4px solid #ec8937;
  }

  .custom-principal-content {
      flex: 1;
      color: var(--principal-text);
  }

  .custom-principal-content h2 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 1.8rem;
      color: #ad0303;
  }

  .custom-principal-content p {
      font-size: 1rem;
      line-height: 1.5;
  }

  /* Responsive for smaller screens */
  @media (max-width: 900px) {
      .custom-container {
          flex-direction: column;
      }

      .custom-notification-panel,
      .custom-principal-card {
          flex: 1 1 100%;
          height: auto;
      }

      .custom-principal-photo {
          width: 140px;
          height: 140px;
          margin-bottom: 15px;
      }

      .custom-principal-card {
          flex-direction: column;
          align-items: center;
          text-align: center;
      }

      .custom-principal-content h2 {
          font-size: 1.5rem;
      }
  }

  /* activiti section */



  /* Section heading */
  .activiti-section-heading {
      text-align: center;
      font-size: 36px;
      margin-top: 40px;
      margin-bottom: 30px;
      color: #333;
      font-weight: bold;
  }

  /* Container for the image grid */
  .activiti-section {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      padding: 0 50px 50px 50px;
  }

  /* Individual image card */
  .card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border-radius: 10px;
  }

  /* Image styling */
  .card img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
  }

  /* Zoom image slightly on hover */
  .card:hover img {
      transform: scale(1.1);
  }

  /* Overlay */
  .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 165, 0, 0.6);
      /* Orange with opacity */
      opacity: 0;
      transition: opacity 0.5s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 20px;
      box-sizing: border-box;
  }

  /* Show overlay on hover */
  .card:hover .overlay {
      opacity: 1;
  }

  /* Overlay content */
  .overlay h3 {
      color: white;
      margin: 0 0 10px 0;
      font-size: 24px;
  }

  .overlay p {
      color: white;
      margin-bottom: 15px;
  }

  .overlay a {
      text-decoration: none;
      padding: 10px 20px;
      background-color: white;
      color: #ad0303;
      border-radius: 5px;
      font-weight: bold;
      transition: background-color 0.3s ease, color 0.3s ease;
  }

  .overlay a:hover {
      background-color: #ad0303;
      color: white;
  }


  /* rostor css */
  .custom-card {
      display: block;
      background: #ffffff;
      padding: 30px 15px;
      border-radius: 15px;
      text-decoration: none;
      color: #000;
      position: relative;
      transition: 0.4s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .custom-card .icon-box {
      height: 70px;
      width: 70px;
      background: #f57c2f;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      transition: 0.3s ease;
  }

  .custom-card .icon-box i {
      font-size: 32px;
      color: #fff;
      transition: 0.3s;
  }

  .custom-card h6 {
      font-weight: 600;
      margin-top: 15px;
      transition: 0.3s;
  }

  /* Arrow top Right */
  .custom-card .arrow-icon {
      position: absolute;
      top: 0px;
      right: 0px;
      font-size: 18px;
      color: #ffffff;
      transition: .3s;
      background: #f57c2f;
      opacity: 0.7;
      height: 40px;
      width: 40px;
      border-bottom-left-radius: 50px;
      border-left: 4px solid #ffffff;
      border-bottom: 4px solid #fff;
  }

  /* Hover Effects */
  .custom-card:hover {
      background: #f57c2f;
      color: #fff;
      transform: translateY(-5px);
  }

  .custom-card:hover .icon-box {
      background: #ffffff;
  }

  .custom-card:hover .icon-box i {
      color: #f57c2f;
  }

  .custom-card:hover h6 {
      color: #fff;
  }

  .custom-card:hover .arrow-icon {
      color: #fff;
      opacity: 1;
      transform: translateX(3px);
  }

  /* footer section css */
  /* Footer Base */
  .footer-section {
      background: #ec8937;
      color: #fff;
      position: relative;
  }

  .text-light-footer {
      color: #ffffff;
  }
/* galeery  */
#owl-demo .item {
  margin: 3px;
  overflow: hidden;
  border-radius: 10px;
}

#owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease; /* Smooth zoom */
}

/* Hover Zoom Effect */
#owl-demo .item:hover img {
  transform: scale(1.1); /* Zoom image */
}
  /* Logo */
  .footer-logo {
      font-size: 35px;
      color: #ad0303;
      font-weight: 700;
  }

  .footer-info i {
      margin-right: 10px;
      color: #ad0303;
  }

  /* Titles */
  .footer-title {
      color: #ad0303;
      font-weight: 700;
      margin-bottom: 15px;
      position: relative;
  }

  .footer-title::after {
      content: "";
      width: 40px;
      height: 3px;
      background: #ad0303;
      display: block;
      margin-top: 4px;
  }

  /* Links */
  .footer-links {
      list-style: none;
      padding: 0;
  }

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

  .footer-links a {
      color: #ffffff;
      text-decoration: none;
  }

  .footer-links a:hover {
      color: #ad0303;
  }

  .btn-location {
      background-color: #ad0303;
      color: #ffffff;
  }

  /* Newsletter */
  .email-box {
      border-radius: 10px;
      padding: 10px;
  }

  .subscribe-btn {
      border-radius: 15px;
      font-weight: 600;
  }

  /* Bottom Bar Line */
  .footer-line {
      border-color: rgba(255, 255, 255, 0.2);
  }

  /* Social Icons */
  .footer-social a {
      color: #fff;
      margin-left: 12px;
      background: #ad0303;
      padding: 10px 12px;
      border-radius: 10px;
      display: inline-block;
  }

  .footer-social a:hover {
      background: #fdf2e9;
      color: #ec8937;
  }

  /* Go Up icon round */
  .go-up {
      background: #ad0303 !important;
      border-radius: 50%;
  }

  .footer-logo img {
      background-color: #fdf2e9 !important;
      width: 70px;
      border-radius: 50px;
  }