@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
}


/* Medium headings (card titles, labels) */
h2, h3,
.outlet-name-label,
.mm-user-greet {
  font-weight: 600;
}
:root{
      --brand-bg-start:#ffb21d;
      --brand-bg-end:#f09711;
      --card-radius:24px;
      --green:#0b7a50;
      --green-dark:#056241;
    }

.mm-hero {
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  box-shadow: 0 16px 28px rgba(0,0,0,0.25); margin:0 0px;
}

body.login_bg {
    background-image: url("../images/Login.jpg");
    background-size: cover;
    height: auto; 
    background-repeat: no-repeat;  min-height:100vh;    background-position: 0;
	 font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
h1, h2, h3,
.mm-hero-title,
.ds-heading,
.enrolled-title {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.login-card h1{font-weight:500;}

    /* Subtle cookie pattern dots (optional) */
    .bg-dots{
      position:absolute; inset:0; pointer-events:none; opacity:.12;
      background-image:
        radial-gradient(circle at 20% 25%, #fff 2px, transparent 2px),
        radial-gradient(circle at 60% 15%, #fff 2px, transparent 2px),
        radial-gradient(circle at 45% 55%, #fff 2px, transparent 2px),
        radial-gradient(circle at 80% 65%, #fff 2px, transparent 2px),
        radial-gradient(circle at 30% 85%, #fff 2px, transparent 2px);
      background-size: 180px 180px;
    }
    .hero-wrap{
      position:relative;
      padding: clamp(16px, 4vw, 40px);
    }
    .logo{
     width: 225px; 
    margin: 0 auto;
     
    }/* Top navbar */
.mm-topbar {
  background: linear-gradient(90deg, #e5413b, #f46d3b);
  color: #fff;
  padding: 0.55rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* bottom soft curve into banner */
.mm-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
  background: radial-gradient(circle at 50% 0,
    rgba(0, 0, 0, 0.08) 0,
    transparent 65%);
  opacity: 0.6;
  pointer-events: none;
}
/* HERO = fancy banner container */
/* base hero */
.mm-hero {
  position: relative;
  padding: 0;                 /* banner ke liye extra space na katega */
  min-height: 240px;          /* mobile / chhoti screen */
  background:
    radial-gradient(circle at 0 100%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(circle at 100% 0, rgba(255,255,255,0.16), transparent 60%),
    url("../images/banner.png") center/cover no-repeat;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  box-shadow: 0 16px 28px rgba(0,0,0,0.22);
  overflow: hidden;
}

/* medium screens (tablet / normal laptop) */
@media (min-width: 992px) {
  .mm-hero {
    min-height: 360px;
  }
}

/* very wide desktop screens */
@media (min-width: 1900px) {
  .mm-hero {
    min-height: 350px;
  }
}

@media (min-width: 1400px) {
  .mm-hero {
    background-position: center top;   /* pack thoda neeche aa jayega */
  }
}
/* very wide desktop screens */
@media (min-width: 2000px) {
  .mm-hero {
    min-height:640px;
  }
}
/* original img ko visually hide kar do (HTML same rahega) */
.mm-pack-img {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.mm-home-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: background 0.18s ease, color 0.18s ease,
              transform 0.12s ease, box-shadow 0.18s ease;
}

.mm-home-btn:hover {
  background: #ffffff;
  color: #e5413b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mm-topbar .d-flex.align-items-center.gap-2 > a img.mm-logo {
  height: 80px;         /* thoda chhota, header slim लगेगा */
}

.mm-home-btn {
  width: 38px;
  height: 38px;
  font-size: 1.2rem;
}

.mm-home-btn:hover {
  background: #ffffff;
  color: #e5413b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* User text */
.mm-user-wrap {
  color: #fff;
}

.mm-user-greet {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.mm-user-branch {
  font-size: 0.8rem;
  opacity: 0.9;
  margin-top: 2px;      /* thoda gap greet se */
}

/* Logo pill */
.mm-logo {
  height: 40px;
}

.mm-logo-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.mm-logout-btn {
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  font-weight: 500;
}

.mm-logout-btn i {
  font-size: 1.1rem;
}

.mm-logout-btn:hover {
  background: #ffffff;
  color: #e5413b !important;
}

@media (max-width: 767.98px) {
  .mm-topbar {
    padding: 0.45rem 0;
  }

  .mm-user-greet {
    font-size: 0.95rem;
  }

  .mm-user-branch {
    font-size: 0.75rem;
  }

  .mm-home-btn {
    width: 34px;
    height: 34px;
  }
}
    /* Podium */
    .podium{
      width:min(680px, 88%);
      aspect-ratio: 3/1.1;
      background: linear-gradient(#f7e6c6, #f0c37a);
      border-radius: 1000px;
      margin-inline:auto;
      box-shadow:
        0 14px 30px rgba(0,0,0,.25) inset,
        0 22px 40px rgba(133,74,0,.25);
      position:relative;
    }
    .podium::before, .podium::after{
      content:"";
      position:absolute; left:50%; transform:translateX(-50%);
      width:92%; height:55%;
      border-radius:1000px;
      background: linear-gradient(#ffdca8, #eea64e);
      bottom: -18%;
      box-shadow: 0 10px 22px rgba(0,0,0,.18) inset;
    }
    .podium::after{
      width:84%; height:40%; bottom:-34%;
      background: linear-gradient(#ffe7c6, #efb56a);
    }
    .pack{
      max-width:min(720px, 90%);
      width:100%;
      filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
      position:relative;
      z-index:1;
      margin-inline:auto;
      margin-top:-6%;
    }
    /* Right card */
    .login-card{
    border: 0;
    border-radius: var(--card-radius);
    box-shadow: 2px 13px 6px 3px rgba(0, 0, 0, .18);
    background: #fff;padding:30px;
    }
    .login-card .btn-brand{
      background: var(--green);
      border:0;color:#fff;    font-weight:600; 
    }
.form-control{
    border: 2px solid #0b7a50; font-size: 14px;
}
 

   /* FOOTER */
.mm-footer {
  background: linear-gradient(90deg, #e5413b, #f46d3b);
  color: #fff;
  font-size: 0.82rem;
  padding: 1.5rem 0 0.7rem 0;            /* thoda padding bhi badha di */
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 900;
  overflow: visible;
}
.mm-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;                    /* curve aur upar aa jayega */
  height: 80px;                  /* curve ki depth zyada */
  background: radial-gradient(
    140% 120% at 50% 0,          /* radius bada */
    #fff 0,
    #fff 55%,
    transparent 56%,
    transparent 100%
  );
  pointer-events: none;
}

/* text styling */
.mm-footer-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #feece6;
}

.mm-footer-prog {
  font-weight: 500;
}

.mm-footer-power {
  opacity: 0.9;
}

/* separator dot */
.mm-footer-sep {
  opacity: 0.8;
  font-size: 0.9em;
}

/* mobile tweaks */
@media (max-width: 576px) {
  .mm-footer {
    font-size: 0.78rem;
    padding: 0.4rem 0.2rem;
  }
  .mm-footer-text {
    flex-direction: column;
    gap: 0.2rem;
  }
  .mm-footer-sep {
    display: none;
  }
}


  
    .btn-brand:hover{ background: var(--green-dark); }
    .brand-wordmark{
       letter-spacing:.5px;
    }
    @media (max-width: 991.98px){
      .hero-wrap{ padding-top:0px; }
      .podium{ margin-top:22px; }
	  .login-card{padding:15px;}
    }


	/* default: no fixed height */
.min-vh-lg-100 {
    min-height: auto;
}
	
	
	@media only screen and (max-width: 549px) {
    .login_bg {
        background-image: url(../images/mobile.jpg)  !important;
        background-repeat: no-repeat;
        background-position: 0 !important;
    }
}




/* lg (≥ 992px) and above: full viewport height */
@media (min-width: 1200px) {
    .min-vh-lg-100 {
        min-height: 100vh;
    }
}


@media (min-width: 671px) and (max-width: 1200px) {
       .login_bg {
            background-image: url(../images/tab.jpg)  !important;
            background-repeat: no-repeat;
            background-position: 0px !important;
        } 
}

@media (min-width: 1400px) {
body.login_bg {
   background-position: 0 -110px;

}

}