/* =========================
   GLOBAL DRIVING SCHOOL
   MAIN STYLESHEET
   ========================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  color: #222;
  text-align: center;
}

h1, h2, h3, p { box-sizing: border-box; }
h2 { color: #b40000; }
p { line-height: 1.6; }
a { text-decoration: none; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 30px;
  background: #111;
  color: white;
}

.logo img { height: 75px; width: auto; display: block; }

nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

nav a {
  display: inline-block;
  background: transparent;
  color: white;
  border: 2px solid #d00000;
  padding: 10px 16px;
  border-radius: 7px;
  font-size: 16px;
  font-weight: bold;
  transition: 0.3s;
}

nav a:hover { background: #d00000; color: white; }

.header-buttons { display: flex; gap: 10px; flex-shrink: 0; }

.header-buttons a {
  display: inline-block;
  padding: 11px 17px;
  border-radius: 7px;
  color: white;
  font-size: 16px;
  font-weight: bold;
}

.call-btn { background: #d00000; }
.whatsapp-btn { background: #25D366; }
.header-buttons a:hover { opacity: 0.88; }

.hero {
  background:
    linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.50)),
    url("images/car1.jpg") center/cover no-repeat;
  color: white;
  min-height: 440px;
  padding: 65px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content { max-width: 950px; width: 100%; margin: auto; padding: 35px 15px 10px; }
.hero-small { color: #ffcc00; font-size: 18px; font-weight: bold; margin: 0 0 8px; }

.hero h1 {
  margin: 0 0 10px;
  color: white;
  font-size: 44px;
  line-height: 1.15;
  text-shadow: 0 2px 5px rgba(0,0,0,0.55);
}

.hero h3 { color: #ffcc00; font-size: 27px; margin: 12px 0; }
.hero-description { font-size: 18px; margin: 12px 0 20px; }

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 15px 0 5px;
}

.hero-badges span {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.7);
  padding: 9px 14px;
  border-radius: 20px;
  font-weight: bold;
}

.hero-quick-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 0 25px;
}

.hero-quick-links a {
  min-width: 145px;
  padding: 11px 18px;
  border: 2px solid #d00000;
  background: rgba(0,0,0,0.38);
  color: white;
  border-radius: 8px;
  font-weight: bold;
}

.hero-quick-links a:hover { background: #d00000; }

.hero-buttons { margin-top: 20px; }

.hero-buttons a {
  display: inline-block;
  margin: 7px;
  padding: 14px 25px;
  border-radius: 8px;
  color: white;
  font-size: 17px;
  font-weight: bold;
}

.hero-call { background: #d00000; }
.hero-whatsapp { background: #25D366; }

.services, .why-section, .rta-section, .admission-section { padding: 60px 20px; background: #f4f4f4; }
.driving-section, .insurance-section, .gallery-section, .contact-section, .documents-section, .owner-profile-section, .faq-section, .driving-details-section {
  padding: 60px 20px;
  background: white;
}

.service-cards { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; }

.service-card {
  width: 300px;
  background: white;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.service-card h3, .why-card h3, .driving-card h3, .rta-card h3, .insurance-card h3, .document-card h3 {
  color: #b40000;
}

.why-grid, .gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.why-card, .driving-card, .rta-card, .insurance-card, .document-card, .detail-card {
  background: #fff;
  padding: 28px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

.driving-topics, .rta-options, .insurance-topics, .documents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1000px;
  margin: auto;
}

.driving-admission-btn, .insurance-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 14px 28px;
  color: white;
  font-weight: bold;
  border-radius: 8px;
}

.driving-admission-btn { background: #d00000; }
.insurance-btn { background: #25D366; }

.detail-grid {
  max-width: 1050px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.detail-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8f8f8;
}

.detail-card strong { color: #b40000; font-size: 18px; }
.detail-card span { font-size: 16px; font-weight: bold; }

.document-card { text-align: left; background: #f8f8f8; }
.document-card ul { margin: 0; padding-left: 20px; }
.document-card li { margin: 9px 0; line-height: 1.45; }

.owner-profile-card {
  max-width: 620px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  background: #f8f8f8;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  text-align: left;
}

.owner-photo {
  width: 155px;
  height: 155px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #b40000;
}

.owner-profile-card h3 { color: #b40000; font-size: 24px; margin: 0 0 10px; }
.owner-profile-card p { margin: 6px 0; font-weight: bold; }

.gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.faq-list {
  max-width: 900px;
  margin: auto;
  text-align: left;
}

.faq-list details {
  background: #f8f8f8;
  margin: 12px 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}

.faq-list summary {
  cursor: pointer;
  padding: 17px 20px;
  font-weight: bold;
  color: #b40000;
}

.faq-list details p { padding: 0 20px 18px; margin: 0; }

.admission-card {
  max-width: 650px;
  margin: auto;
  background: white;
  padding: 35px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.admission-card input,
.admission-card textarea,
.admission-card select,
.edit-modal-content select {
  display: block;
  width: 90%;
  max-width: 520px;
  padding: 14px;
  margin: 12px auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  background: white;
}

.admission-card textarea { min-height: 100px; resize: vertical; }

.admission-card label {
  display: block;
  width: 90%;
  max-width: 520px;
  margin: 14px auto 2px;
  text-align: left;
  font-weight: bold;
}

.admission-card button {
  margin-top: 20px;
  padding: 14px 26px;
  background: #25D366;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.important-notice {
  width: 90%;
  max-width: 520px;
  margin: 15px auto;
  padding: 14px;
  text-align: left;
  color: #8a0000;
  background: #fff2f2;
  border: 2px solid #d00000;
  border-radius: 9px;
  line-height: 1.5;
}

#admission-result {
  margin-top: 20px;
  padding: 5px;
}

#admission-result h3 { color: #198754; }

.contact-card {
  max-width: 650px;
  margin: auto;
  background: #f8f8f8;
  padding: 35px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.contact-buttons { margin-top: 25px; }

.contact-buttons a {
  display: inline-block;
  margin: 7px;
  padding: 14px 24px;
  color: white;
  border-radius: 8px;
  font-weight: bold;
}

.contact-call { background: #d00000; }
.contact-whatsapp { background: #25D366; }
.map-btn { background: #1a73e8; }

.records-section {
  padding: 50px 20px;
  background: #f4f4f4;
  min-height: 100vh;
}

#recordCount { font-size: 18px; font-weight: bold; margin: 0 0 15px; }

#recordSearch {
  width: 100%;
  max-width: 550px;
  display: block;
  padding: 13px 16px;
  margin: 0 auto 25px;
  border: 1px solid #bbb;
  border-radius: 8px;
  background: white;
  font-size: 16px;
}

.records-box {
  max-width: 1450px;
  margin: auto;
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
  overflow-x: auto;
}

#records-table { width: 100%; border-collapse: collapse; min-width: 1250px; }

#records-table th,
#records-table td {
  padding: 12px 9px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
}

#records-table th { background: #111; color: white; }

.records-box button,
.approval-section button,
.records-tools button {
  margin: 5px 3px;
  padding: 9px 12px;
  background: #d00000;
  color: white;
  border: none;
  border-radius: 7px;
  font-weight: bold;
  cursor: pointer;
}

.status-pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.status-pending { background: #fff3cd; color: #7a5a00; }
.status-approved { background: #d1e7dd; color: #0f5132; }

.edit-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: rgba(0,0,0,0.65);
  padding: 30px 15px;
}

.edit-modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 20px auto;
  padding: 30px 30px 25px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.30);
  text-align: left;
}

.edit-modal-content h2 { margin: 0 0 25px; text-align: center; color: #b40000; }

.edit-close {
  position: absolute;
  top: 12px;
  right: 18px;
  color: #555;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
}

.edit-modal-content label {
  display: block;
  margin: 14px 0 6px;
  font-size: 15px;
  font-weight: bold;
}

.edit-modal-content input,
.edit-modal-content textarea,
.edit-modal-content select {
  width: 100%;
  max-width: none;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: white;
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 0;
}

.edit-modal-content textarea { min-height: 95px; resize: vertical; }

.edit-modal-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 25px;
}

.edit-modal-buttons button {
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  color: white;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

.edit-save-btn { background: #25D366; }
.edit-cancel-btn { background: #d00000; }

.site-footer { background: #111; color: white; padding: 35px 20px; }
.site-footer h3 { margin: 0 0 18px; color: #ffcc00; font-size: 24px; }

@media (max-width: 900px) {
  header { flex-direction: column; padding: 15px 10px; }
  .logo img { height: 60px; }
  nav { width: 100%; }
  nav a { margin: 3px; padding: 8px 11px; font-size: 14px; }
  .header-buttons { justify-content: center; }
  .hero h1 { font-size: 36px; }
  .why-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .hero { padding: 45px 12px; }
  .hero h1 { font-size: 31px; }
  .hero h3 { font-size: 20px; }

  .hero-quick-links { flex-direction: column; }
  .hero-quick-links a { width: 85%; max-width: 300px; }

  .service-card { width: 90%; max-width: 330px; }

  .why-grid,
  .driving-topics,
  .rta-options,
  .insurance-topics,
  .gallery-grid,
  .documents-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .owner-profile-card {
    flex-direction: column;
    text-align: center;
  }

  .gallery-grid img { height: 240px; }

  .contact-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contact-buttons a { width: 80%; max-width: 300px; margin: 6px 0; }

  .records-box { padding: 15px; }

  .edit-modal { padding: 15px 10px; }
  .edit-modal-content { margin: 10px auto; padding: 28px 18px 22px; }
  .edit-modal-buttons { flex-direction: column; }
  .edit-modal-buttons button { width: 100%; }
}


/* =========================================================
   HEADER BRANDING + OWNER PLACEMENT
   Keeps the original red/black website design unchanged.
   ========================================================= */

header {
  align-items: flex-start;
}

.brand-left {
  width: 290px;
  flex-shrink: 0;
  text-align: left;
}

.brand-left .logo img {
  height: 75px;
  width: auto;
}

.brand-under-logo {
  margin-top: 7px;
  line-height: 1.12;
}

.brand-global {
  color: #d00000;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1;
}

.brand-school {
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.7px;
  margin-top: 3px;
}

.brand-tagline {
  color: #ffcc00;
  font-size: 14px;
  font-weight: bold;
  margin-top: 7px;
}

.brand-subline,
.brand-reg {
  color: #ffffff;
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.3;
}

.top-owner-area {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.top-login-btn {
  display: inline-block;
  background: #d00000;
  color: #ffffff;
  padding: 9px 18px;
  border-radius: 7px;
  font-weight: bold;
  margin-bottom: 10px;
}

.top-owner-photo {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #d00000;
}

.top-owner-name {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  margin-top: 7px;
}

.top-owner-line {
  color: #dddddd;
  font-size: 11px;
  line-height: 1.3;
}

.open-admission-btn {
  background: #d00000;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 13px 24px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  header {
    align-items: center;
  }

  .brand-left {
    width: 100%;
    text-align: center;
  }

  .brand-left .logo img {
    margin: auto;
  }

  .brand-global {
    font-size: 34px;
  }

  .top-owner-area {
    width: 100%;
  }
}


/* =========================================================
   TOP MENU CLEANUP
   - Hero photo only
   - RTA & Documents open from top dropdown
   - Admission opens as modal
   - Contact section removed; footer is contact area
   ========================================================= */

.hero-photo-only {
  min-height: 440px;
  padding: 0;
  background:
    linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12)),
    url("images/car1.jpg") center/cover no-repeat;
}

/* dropdown wrapper */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown > .nav-drop-btn {
  cursor: pointer;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 285px;
  max-height: 440px;
  overflow-y: auto;
  background: #111;
  border: 1px solid #d00000;
  border-radius: 8px;
  padding: 8px;
  z-index: 9999;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  text-align: left;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 8px 10px;
  color: #fff;
  font-size: 13px;
  font-weight: normal;
}

.nav-dropdown-menu a:hover {
  background: #d00000;
}

.nav-subtitle {
  color: #ffcc00;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px 5px;
  border-bottom: 1px solid rgba(255,255,255,.15);
  margin-top: 3px;
}

/* hidden admission popup */
.admission-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.72);
  padding: 24px 12px;
  overflow-y: auto;
}

.admission-modal-card {
  position: relative;
  max-width: 720px;
  margin: 30px auto;
  background: #f4f4f4;
  border-radius: 14px;
  padding: 28px 20px;
  box-shadow: 0 15px 45px rgba(0,0,0,.4);
}

.admission-modal-card h2 {
  margin-top: 0;
}

.admission-close {
  position: absolute;
  right: 14px;
  top: 10px;
  border: none;
  background: transparent;
  color: #b40000;
  font-size: 34px;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-dropdown {
    position: static;
  }

  .nav-dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 320px);
  }

  .hero-photo-only {
    min-height: 300px;
  }
}


/* =========================================================
   USER REQUESTED HEADER + DROPDOWN CLICK FIX
   ========================================================= */

body,
button,
input,
select,
textarea,
nav,
.site-footer {
  font-family: "Times New Roman", Times, serif;
}

/* GLOBAL larger and stronger */
.brand-global {
  font-family: "Times New Roman", Times, serif;
  font-size: 58px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 1px;
}

.brand-school {
  font-family: "Times New Roman", Times, serif;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 1px;
}

/* Login stays beside the owner photo, not above it */
.top-owner-area {
  width: 205px;
}

.owner-photo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.owner-photo-row .top-login-btn {
  margin: 0;
  flex-shrink: 0;
}

.top-owner-photo {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}

/* Phone numbers in footer */
.footer-phone-line {
  font-size: 17px;
  margin: 12px 0;
}

.footer-sep {
  display: inline-block;
  margin: 0 16px;
  color: #ffcc00;
}

/* Selected dropdown item appears near bottom */
.service-result-section {
  padding: 45px 20px;
  background: #f4f4f4;
  text-align: center;
  scroll-margin-top: 20px;
}

.service-result-card {
  max-width: 850px;
  margin: auto;
  background: #ffffff;
  border-top: 5px solid #d00000;
  border-radius: 12px;
  padding: 30px 25px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.service-result-kicker {
  color: #d00000;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 8px;
}

.service-result-card h2 {
  color: #111;
  font-size: 30px;
  margin: 4px 0 12px;
}

.service-result-card p {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .brand-global {
    font-size: 46px;
  }

  .brand-school {
    font-size: 20px;
  }

  .top-owner-area {
    width: 100%;
  }

  .owner-photo-row {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .brand-global {
    font-size: 40px;
  }

  .footer-phone-line {
    line-height: 1.8;
  }

  .footer-sep {
    display: block;
    height: 0;
    margin: 0;
    overflow: hidden;
  }
}


/* FINAL LOGIN POSITION FIX */
.top-owner-area{
  width: 245px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

.owner-photo-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  width:100% !important;
}

.owner-photo-row .top-login-btn{
  order:2 !important;
  margin:0 !important;
  display:inline-block !important;
  white-space:nowrap !important;
}

.owner-photo-row .top-owner-photo{
  order:1 !important;
  margin:0 !important;
  flex:0 0 auto !important;
}

@media (max-width:900px){
  .top-owner-area{
    width:100% !important;
  }
}


/* FINAL: LOGIN on LEFT of owner photo */
.owner-photo-row .top-login-btn{
  order:1 !important;
}

.owner-photo-row .top-owner-photo{
  order:2 !important;
}

/* Grievance only under owner details */
.owner-grievance-link{
  display:inline-block;
  margin-top:6px;
  padding:5px 10px;
  border:1px solid #d00000;
  border-radius:6px;
  color:#ffffff;
  background:#111111;
  text-decoration:none;
  font-size:12px;
  font-weight:bold;
}

.owner-grievance-link:hover{
  background:#d00000;
  color:#ffffff;
}


/* =========================================================
   CONTACT + WHATSAPP + GRIEVANCE TOP MENU FIX
   ========================================================= */

.nav-contact-menu {
  width: 285px;
}

.whatsapp-top-btn {
  color: #ffffff !important;
}

.footer-whatsapp-line {
  margin: 10px 0 14px;
}

.footer-whatsapp-line a {
  display: inline-block;
  color: #25D366;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
}

.footer-whatsapp-line a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .nav-contact-menu {
    width: min(92vw, 320px);
  }

  .footer-whatsapp-line a {
    display: block;
    margin: 6px 0;
  }
}


/* =========================================================
   INTERNAL CUSTOMER GRIEVANCE
   ========================================================= */
.grievance-modal{
  position:fixed;
  inset:0;
  z-index:20000;
  background:rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
}

.grievance-card{
  position:relative;
  width:min(620px, 96vw);
  background:#ffffff;
  border-top:6px solid #d00000;
  border-radius:14px;
  padding:30px 25px 25px;
  box-shadow:0 15px 45px rgba(0,0,0,.4);
  text-align:left;
}

.grievance-card h2{
  margin:0 0 8px;
  color:#b40000;
  text-align:center;
}

.grievance-intro{
  text-align:center;
  margin:0 0 20px;
  color:#333;
}

.grievance-card label{
  display:block;
  font-weight:bold;
  margin:11px 0 6px;
  color:#111;
}

.grievance-card input,
.grievance-card select,
.grievance-card textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid #bbb;
  border-radius:7px;
  font-family:"Times New Roman", Times, serif;
  font-size:16px;
}

.grievance-card textarea{
  resize:vertical;
}

.grievance-submit{
  width:100%;
  margin-top:18px;
  padding:13px 18px;
  border:none;
  border-radius:8px;
  background:#25D366;
  color:#fff;
  font-weight:bold;
  font-size:17px;
  cursor:pointer;
}

.grievance-close{
  position:absolute;
  right:14px;
  top:8px;
  border:none;
  background:transparent;
  color:#b40000;
  font-size:34px;
  font-weight:bold;
  cursor:pointer;
}

.grievance-note{
  margin:12px 0 0;
  text-align:center;
  font-size:13px;
  color:#666;
}


/* =========================================================
   GRIEVANCE CUSTOMER LOOKUP
   ========================================================= */
.grievance-lookup-box{
  background:#f7f7f7;
  border:1px solid #ddd;
  border-radius:10px;
  padding:16px;
  margin:10px 0 18px;
}

.grievance-lookup-box h3,
.grievance-customer-details h3{
  margin:0 0 5px;
  color:#b40000;
}

.grievance-lookup-box p{
  margin:0 0 10px;
  color:#444;
}

.grievance-lookup-row{
  display:flex;
  gap:8px;
  align-items:stretch;
}

.grievance-lookup-row input{
  flex:1;
}

.grievance-lookup-row button{
  border:none;
  border-radius:7px;
  padding:0 16px;
  background:#b40000;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  white-space:nowrap;
}

.grievance-lookup-status{
  min-height:20px;
  margin-top:8px;
  font-weight:bold;
  color:#333;
}

.grievance-customer-details{
  border:1px solid #ccc;
  border-left:5px solid #25D366;
  border-radius:9px;
  padding:15px;
  margin-bottom:18px;
  background:#fff;
}

.customer-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 18px;
}

@media(max-width:600px){
  .grievance-lookup-row{
    flex-direction:column;
  }

  .grievance-lookup-row button{
    padding:11px;
  }

  .customer-detail-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   FINAL VISUAL FIXES
   - English Grievance intro
   - Brighter car image
   - Smaller black header / branding area
   ========================================================= */

/* Make the car photo brighter and clearer */
.hero-photo-only{
  min-height: 390px !important;
  background:
    linear-gradient(rgba(0,0,0,0.02), rgba(0,0,0,0.02)),
    url("images/car1.jpg") center/cover no-repeat !important;
  filter: brightness(1.12);
}

/* Reduce the height of the black top board/header */
header{
  padding: 10px 22px !important;
  gap: 16px !important;
  align-items:flex-start !important;
}

.brand-left{
  width: 255px !important;
}

.brand-left .logo img{
  height: 60px !important;
}

.brand-under-logo{
  margin-top: 4px !important;
  line-height:1.05 !important;
}

.brand-global{
  font-size: 46px !important;
  line-height:0.90 !important;
}

.brand-school{
  font-size: 18px !important;
  line-height:1.05 !important;
  margin-top:2px !important;
}

.brand-tagline{
  font-size: 12px !important;
  margin-top:5px !important;
}

.brand-subline,
.brand-reg{
  font-size: 9px !important;
  margin-top:2px !important;
  line-height:1.15 !important;
}

/* Slightly compact owner area so header height stays controlled */
.top-owner-area{
  width: 225px !important;
}

.top-owner-photo{
  width: 78px !important;
  height: 78px !important;
}

.top-owner-name{
  font-size:14px !important;
  margin-top:4px !important;
}

.top-owner-line{
  font-size:10px !important;
  line-height:1.15 !important;
}

.top-login-btn{
  padding:7px 15px !important;
  font-size:14px !important;
}

@media (max-width:900px){
  header{
    padding:12px 10px !important;
  }

  .brand-left{
    width:100% !important;
  }

  .brand-global{
    font-size:40px !important;
  }

  .hero-photo-only{
    min-height:330px !important;
  }
}


/* PUBLIC ADMISSION DATE - AUTO + LOCKED */
#admissionDate[readonly]{
  background:#f1f1f1 !important;
  color:#111 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
  user-select:none !important;
}


/* =========================================================
   HEADER BRAND CENTER + HERO LIGHT FIX
   ========================================================= */

/* Make the driving-school/car photo lighter and clearer */
.hero-photo-only{
  background:
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)),
    url("images/car1.jpg") center/cover no-repeat !important;
  filter: brightness(1.24) contrast(1.02) !important;
}

/* Center the complete GLOBAL branding block */
.brand-left{
  width:300px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}

.brand-left .logo{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
}

.brand-left .logo img{
  height:64px !important;
  width:auto !important;
  margin:0 auto !important;
}

.brand-under-logo{
  width:100% !important;
  text-align:center !important;
  margin-top:3px !important;
  line-height:1.12 !important;
}

.brand-welcome{
  color:#ffffff !important;
  font-size:15px !important;
  font-weight:bold !important;
  margin-bottom:3px !important;
  text-align:center !important;
}

.brand-global{
  font-size:50px !important;
  line-height:.95 !important;
  text-align:center !important;
  margin:0 !important;
}

.brand-school{
  font-size:21px !important;
  line-height:1.05 !important;
  text-align:center !important;
  margin-top:3px !important;
}

.brand-tagline{
  font-size:14px !important;
  margin-top:6px !important;
  text-align:center !important;
}

.brand-subline{
  font-size:12px !important;
  margin-top:3px !important;
  line-height:1.2 !important;
  text-align:center !important;
}

.brand-reg{
  font-size:11px !important;
  margin-top:3px !important;
  line-height:1.2 !important;
  text-align:center !important;
}

@media (max-width:900px){
  .brand-left{
    width:100% !important;
  }

  .brand-welcome{
    font-size:14px !important;
  }

  .brand-global{
    font-size:44px !important;
  }

  .brand-school{
    font-size:19px !important;
  }

  .brand-tagline{
    font-size:13px !important;
  }

  .brand-subline,
  .brand-reg{
    font-size:11px !important;
  }
}


/* =========================================================
   FINAL CENTER BRAND LAYOUT
   Keep logo left, owner right, branding centered on website
   ========================================================= */

header{
  position:relative !important;
  min-height:200px !important;
}

/* Keep only logo on the left */
.brand-left{
  width:90px !important;
  min-width:90px !important;
  align-items:flex-start !important;
  text-align:left !important;
}

.brand-left .logo{
  justify-content:flex-start !important;
}

.brand-left .logo img{
  height:64px !important;
  margin:0 !important;
}

/* Main center branding */
.header-center-brand{
  position:absolute !important;
  left:50% !important;
  top:70px !important;
  transform:translateX(-50%) !important;
  width:min(620px, 55vw) !important;
  text-align:center !important;
  z-index:1 !important;
  pointer-events:none !important;
}

.header-center-brand .brand-global{
  color:#e00000 !important;
  font-family:"Times New Roman", Times, serif !important;
  font-size:52px !important;
  line-height:.95 !important;
  font-weight:900 !important;
  margin:0 !important;
}

.header-center-brand .brand-school{
  color:#ffffff !important;
  font-family:"Times New Roman", Times, serif !important;
  font-size:23px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  margin-top:3px !important;
}

.header-center-brand .brand-reg{
  color:#ffffff !important;
  font-size:12px !important;
  line-height:1.2 !important;
  margin-top:5px !important;
}

.header-center-brand .brand-tagline{
  color:#ffd400 !important;
  font-size:14px !important;
  font-weight:bold !important;
  margin-top:6px !important;
}

.header-center-brand .brand-subline{
  color:#ffffff !important;
  font-size:12px !important;
  margin-top:3px !important;
  line-height:1.2 !important;
}

/* Remove any effect from the old welcome line if cached */
.brand-welcome{
  display:none !important;
}

@media(max-width:1100px){
  .header-center-brand{
    width:min(520px, 52vw) !important;
    top:72px !important;
  }

  .header-center-brand .brand-global{
    font-size:44px !important;
  }

  .header-center-brand .brand-school{
    font-size:19px !important;
  }
}

@media(max-width:900px){
  header{
    min-height:auto !important;
  }

  .header-center-brand{
    position:static !important;
    transform:none !important;
    width:100% !important;
    order:3 !important;
    margin:8px 0 10px !important;
  }

  .brand-left{
    width:auto !important;
    min-width:0 !important;
  }
}


/* =========================================================
   FINAL FIX - WEBSITE ONLY
   1) Last center line fully visible
   2) Hero/car board brightness reduced
   ========================================================= */

header{
  min-height:225px !important;
  overflow:visible !important;
}

.header-center-brand{
  top:70px !important;
  width:min(680px, 58vw) !important;
}

.header-center-brand .brand-global{
  font-size:50px !important;
  line-height:.95 !important;
}

.header-center-brand .brand-school{
  font-size:22px !important;
  line-height:1.05 !important;
  margin-top:3px !important;
}

.header-center-brand .brand-reg{
  font-size:12px !important;
  line-height:1.15 !important;
  margin-top:4px !important;
}

.header-center-brand .brand-tagline{
  font-size:14px !important;
  line-height:1.15 !important;
  margin-top:5px !important;
}

.header-center-brand .brand-subline{
  font-size:12px !important;
  line-height:1.15 !important;
  margin-top:4px !important;
  padding-bottom:6px !important;
}

/* Reduce brightness of the car/board photo */
.hero-photo-only{
  background:
    linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)),
    url("images/car1.jpg") center/cover no-repeat !important;
  filter: brightness(.92) contrast(1.02) !important;
}

@media(max-width:1100px){
  header{
    min-height:215px !important;
  }

  .header-center-brand{
    top:72px !important;
    width:min(600px, 56vw) !important;
  }
}


/* =========================================================
   FINAL OVERRIDE - CENTER TEXT FULLY VISIBLE + HERO DARKER
   ========================================================= */

/* Give enough black header space so every branding line is visible */
header{
  min-height:245px !important;
  height:auto !important;
  overflow:visible !important;
}

/* Keep centered branding higher with enough room below */
.header-center-brand{
  top:72px !important;
  width:min(700px, 60vw) !important;
  padding-bottom:12px !important;
}

/* Ensure every line is visible */
.header-center-brand .brand-global{
  font-size:50px !important;
  line-height:1 !important;
}

.header-center-brand .brand-school{
  font-size:22px !important;
  line-height:1.1 !important;
  margin-top:4px !important;
}

.header-center-brand .brand-reg{
  font-size:12px !important;
  line-height:1.2 !important;
  margin-top:5px !important;
}

.header-center-brand .brand-tagline{
  font-size:14px !important;
  line-height:1.2 !important;
  margin-top:6px !important;
}

.header-center-brand .brand-subline{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#ffffff !important;
  font-size:13px !important;
  line-height:1.25 !important;
  margin-top:5px !important;
  padding-bottom:10px !important;
  white-space:normal !important;
}

/* Make the car + roof-board photo darker than before */
.hero-photo-only{
  background:
    linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)),
    url("images/car1.jpg") center/cover no-repeat !important;
  filter:brightness(.82) contrast(1.03) !important;
}

/* Desktop owner/menu stay unchanged */
@media (max-width:1100px) and (min-width:901px){
  header{
    min-height:235px !important;
  }

  .header-center-brand{
    top:76px !important;
    width:min(620px, 56vw) !important;
  }

  .header-center-brand .brand-subline{
    font-size:12px !important;
  }
}

/* Mobile keeps normal stacked behavior */
@media (max-width:900px){
  header{
    min-height:auto !important;
  }

  .header-center-brand{
    position:static !important;
    transform:none !important;
    width:100% !important;
    padding:8px 10px 14px !important;
  }
}


/* FINAL WELCOME LINE */
.header-center-brand .brand-welcome{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#ffffff !important;
  font-size:15px !important;
  font-weight:bold !important;
  line-height:1.1 !important;
  margin-bottom:4px !important;
  text-align:center !important;
}


/* FINAL: clickable footer phone numbers + welcome sentence */
.footer-call-link{
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:bold !important;
}

.footer-call-link:hover{
  color:#ffd400 !important;
  text-decoration:underline !important;
}

.header-center-brand .brand-welcome{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#ffd400 !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  margin:0 0 5px 0 !important;
  text-align:center !important;
  position:relative !important;
  z-index:5 !important;
}


/* =========================================================
   FINAL: OFFICE +91 + LARGE HERO WELCOME
   ========================================================= */

/* Footer phone numbers */
.footer-phone-line{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  flex-wrap:wrap !important;
}

.footer-call-link{
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:bold !important;
}

.footer-call-link:hover{
  color:#ffd400 !important;
  text-decoration:underline !important;
}

/* Welcome text moved from black header onto the car/board hero photo */
.header-center-brand .brand-welcome{
  display:none !important;
}

.hero-photo-only{
  position:relative !important;
  overflow:hidden !important;
}

.hero-welcome-overlay{
  position:absolute !important;
  left:50% !important;
  top:28px !important;
  transform:translateX(-50%) !important;
  width:min(92%, 900px) !important;
  text-align:center !important;
  font-family:"Times New Roman", Times, serif !important;
  font-size:38px !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  color:#ffffff !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,.95),
    0 0 8px rgba(0,0,0,.75) !important;
  z-index:3 !important;
  letter-spacing:.3px !important;
}

/* Red/yellow accent to match the car roof-board and website branding */
.hero-welcome-overlay::after{
  content:"" !important;
  display:block !important;
  width:190px !important;
  height:4px !important;
  margin:9px auto 0 !important;
  background:#d40000 !important;
  border-radius:4px !important;
  box-shadow:0 2px 0 #ffd400 !important;
}

@media(max-width:900px){
  .hero-welcome-overlay{
    top:18px !important;
    font-size:28px !important;
  }
}

@media(max-width:600px){
  .hero-welcome-overlay{
    top:14px !important;
    font-size:22px !important;
    width:94% !important;
  }
}


/* =========================================================
   FINAL HEADER OWNER/WELCOME POSITION
   ========================================================= */

/* Remove old hero overlay welcome */
.hero-welcome-overlay{
  display:none !important;
}

/* Place welcome text in top-right owner/login area */
.top-owner-area{
  width:260px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}

.owner-welcome-text{
  display:block !important;
  width:100% !important;
  margin:0 0 7px !important;
  color:#ffd400 !important;
  font-family:"Times New Roman", Times, serif !important;
  font-size:14px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  text-align:center !important;
}

/* Keep LOGIN + photo nicely aligned */
.owner-photo-row{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
}

/* Owner name/details centered under photo area */
.top-owner-name{
  width:100% !important;
  text-align:center !important;
  margin-top:5px !important;
}

.top-owner-line{
  width:100% !important;
  text-align:center !important;
}

/* Keep overall owner block centered visually */
.top-owner-photo{
  display:block !important;
  margin:0 !important;
}

/* Make welcome line visible without increasing header too much */
header{
  min-height:245px !important;
}

@media(max-width:900px){
  .top-owner-area{
    width:100% !important;
  }

  .owner-welcome-text{
    font-size:13px !important;
  }
}


/* =========================================================
   WELCOME - BEST POSITION
   Centered above GLOBAL for a balanced professional header
   ========================================================= */

/* Hide old owner welcome if browser has cached old markup */
.owner-welcome-text{
  display:none !important;
}

/* Best placement: centered above GLOBAL */
.header-center-brand .brand-welcome-best{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#ffd400 !important;
  font-family:"Times New Roman", Times, serif !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  margin:0 0 6px 0 !important;
  text-align:center !important;
  letter-spacing:.2px !important;
}

/* Slightly move brand block up so all lines fit comfortably */
.header-center-brand{
  top:64px !important;
}

/* Keep owner/login area clean and centered */
.top-owner-area{
  text-align:center !important;
}

.top-owner-name,
.top-owner-line{
  text-align:center !important;
}

@media(max-width:1100px) and (min-width:901px){
  .header-center-brand{
    top:68px !important;
  }

  .header-center-brand .brand-welcome-best{
    font-size:15px !important;
  }
}

@media(max-width:900px){
  .header-center-brand .brand-welcome-best{
    font-size:14px !important;
    margin-bottom:5px !important;
  }
}


/* =========================================================
   LOGIN MOVED BESIDE GRIEVANCE
   ========================================================= */

.nav-login-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 18px !important;
  border:1px solid #ff0000 !important;
  border-radius:7px !important;
  background:#d00000 !important;
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:bold !important;
  white-space:nowrap !important;
}

.nav-login-btn:hover{
  background:#ff0000 !important;
}

/* Owner photo row no longer needs space for login */
.owner-photo-row{
  justify-content:center !important;
  gap:0 !important;
}

.top-login-btn{
  display:none !important;
}


/* OWNER NAME & DESIGNATION SIZE FIX */
.top-owner-name{
  font-size:20px !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  margin-top:7px !important;
  text-align:center !important;
}

.top-owner-line{
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  margin-top:2px !important;
  text-align:center !important;
}


/* Only "Welcome to" slightly bigger */
.brand-welcome-best .welcome-big{
  font-size:22px !important;
  font-weight:900 !important;
}


/* =========================================================
   TOP MENU DESKTOP ALIGNMENT FIX
   Keep all top options in one clean row, no overlap with Welcome/GLOBAL
   ========================================================= */

@media (min-width:1201px){
  header{
    position:relative !important;
    min-height:245px !important;
    padding:15px 24px !important;
  }

  nav{
    position:absolute !important;
    top:16px !important;
    left:105px !important;
    right:285px !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    z-index:20 !important;
  }

  nav > a,
  nav .nav-drop-btn{
    padding:8px 10px !important;
    font-size:13px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  .nav-login-btn{
    padding:8px 13px !important;
    font-size:13px !important;
  }

  .nav-dropdown{
    flex:0 0 auto !important;
  }

  .header-center-brand{
    top:88px !important;
    z-index:5 !important;
  }

  .brand-left{
    position:absolute !important;
    left:14px !important;
    top:17px !important;
    z-index:25 !important;
  }

  .top-owner-area{
    position:absolute !important;
    right:16px !important;
    top:16px !important;
    width:250px !important;
    z-index:25 !important;
  }
}

/* Slightly tighter menu for medium desktop/laptop screens */
@media (min-width:1201px) and (max-width:1500px){
  nav{
    left:90px !important;
    right:245px !important;
    gap:4px !important;
  }

  nav > a,
  nav .nav-drop-btn{
    padding:7px 7px !important;
    font-size:11px !important;
  }

  .nav-login-btn{
    padding:7px 10px !important;
    font-size:11px !important;
  }

  .top-owner-area{
    width:220px !important;
  }

  .header-center-brand{
    top:86px !important;
  }
}


/* =========================================================
   HEADER CENTER BRAND - LAST LINE POSITION FIX
   ========================================================= */
@media (min-width:1201px){
  .header-center-brand{
    top:74px !important;
  }

  .header-center-brand .brand-welcome-best{
    margin-bottom:4px !important;
  }

  .header-center-brand .brand-global{
    line-height:0.95 !important;
    margin-bottom:4px !important;
  }

  .header-center-brand .brand-school{
    margin-bottom:4px !important;
    line-height:1.05 !important;
  }

  .header-center-brand .brand-reg{
    margin-bottom:5px !important;
    line-height:1.1 !important;
  }

  .header-center-brand .brand-tagline{
    margin-bottom:5px !important;
    line-height:1.1 !important;
  }

  .header-center-brand .brand-subline{
    margin:0 !important;
    line-height:1.1 !important;
  }
}

@media (min-width:1201px) and (max-width:1500px){
  .header-center-brand{
    top:72px !important;
  }
}


/* ===== GMDS ATTENDANCE ===== */
.records-top-attendance{height:44px;padding:0 19px;border:0;border-radius:10px;background:#1565c0;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 5px 14px rgba(15,23,42,.14)}
.attendance-panel{position:fixed;inset:0;z-index:20000;background:rgba(0,0,0,.68);align-items:flex-start;justify-content:center;padding:25px;overflow:auto}
.attendance-card{position:relative;width:min(1050px,97vw);background:#fff;border-radius:16px;padding:25px;text-align:left}.attendance-close{position:absolute;right:18px;top:12px;border:0;background:none;font-size:32px;cursor:pointer}.attendance-card>h2{text-align:center}
#attendanceSearch{width:100%;padding:13px;border:1px solid #bbb;border-radius:9px;font-size:16px}.attendance-result{display:block;width:100%;text-align:left;padding:11px;margin:6px 0;border:1px solid #ddd;background:#f7f7f7;border-radius:8px;cursor:pointer}
.attendance-grid{display:grid;grid-template-columns:repeat(7,minmax(105px,1fr));gap:12px;margin:16px 0 26px}
.attendance-box{position:relative;min-height:82px;border:1px solid #c9dceb;border-radius:14px;background:linear-gradient(180deg,#f8fbfe,#eaf3f9);color:#174a72;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(8,64,105,.07);transition:.18s ease}
.attendance-box:hover{transform:translateY(-2px);border-color:#75acd2;box-shadow:0 7px 16px rgba(8,64,105,.12)}
.attendance-box.done{background:linear-gradient(180deg,#25a454,#16833b);border-color:#16833b;color:#fff}
.attendance-box.done:after{content:"✓";position:absolute;right:9px;top:7px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);font-size:14px}
.attendance-box span{display:block;font-size:16px;margin-bottom:4px}.attendance-box small{display:block;font-size:12px;opacity:.9}
.attendance-box:not(.done):first-of-type{border-color:#0b67ad}
.attendance-history-table{width:100%;border-collapse:collapse}.attendance-history-table th,.attendance-history-table td{padding:9px;border:1px solid #ddd}.attendance-history-table th{background:#111;color:#fff}
@media(max-width:700px){.attendance-grid{grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px}.attendance-box{min-height:74px}.records-top-attendance{height:42px;padding:0 12px}}


/* GMDS Mechanical Sunday Learning */
.mechanical-learning-section{padding:55px 18px;background:#f5f5f5}.mechanical-learning-card{max-width:1180px;margin:auto;background:#fff;border:2px solid #b40000;border-radius:18px;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.12)}.mechanical-kicker{font-weight:800;letter-spacing:1.5px;color:#b40000}.mechanical-learning-card h2{margin:7px 0 10px}.mechanical-intro{font-size:17px}.mechanical-learning-card select,.mechanical-login-box input{width:100%;max-width:520px;padding:12px;border:1px solid #bbb;border-radius:8px;margin:8px 0 16px}.mechanical-class-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.mechanical-topic-card{border:1px solid #ddd;border-radius:12px;padding:17px;background:#fafafa}.mechanical-topic-card>span{font-weight:800;color:#b40000}.mechanical-video-link,.mechanical-login-box button,.mechanical-progress-box button{background:#075bd8;color:#fff;border:0;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}.mechanical-safety-note{grid-column:1/-1;background:#fff4d8;border-left:5px solid #d99b00;padding:14px;border-radius:8px}.mechanical-login-box{margin-top:22px;padding:20px;background:#111;color:#fff;border-radius:12px}.mechanical-login-box input{display:block;background:#fff}.mechanical-message{margin-top:10px;font-weight:700}.mechanical-message.bad{color:#ffb3b3}.mechanical-message.good{color:#9cffae}.mechanical-customer-area{margin-top:18px}.mechanical-customer-head{padding:14px;border-radius:10px;background:#f2f2f2}.mechanical-progress-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.mechanical-progress-box{min-height:150px;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;border:2px solid #bbb}.mechanical-progress-box.done{background:#e7f8ea;border-color:#159447}.mechanical-progress-box.current{background:#fff5e5;border-color:#e39a12}.mechanical-progress-box.locked{background:#eee;opacity:.65}.mechanical-video-modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:99999;display:flex;align-items:center;justify-content:center;padding:15px}.mechanical-video-card{width:min(900px,96vw);background:#fff;border-radius:14px;padding:18px;position:relative}.mechanical-video-card video{width:100%;max-height:68vh;background:#000}.mechanical-video-close{position:absolute;right:10px;top:8px;border:0;background:#b40000;color:#fff;border-radius:50%;width:34px;height:34px;font-size:22px}.mechanical-video-card #gdsMechanicalVideoStatus{font-weight:800;text-align:center;padding:10px;color:#15803d}@media(max-width:800px){.mechanical-class-preview{grid-template-columns:1fr}.mechanical-progress-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.mechanical-progress-grid{grid-template-columns:1fr}.mechanical-learning-card{padding:17px}}
\n\n/* GMDS Mechanical Detailed v2 */\n.mechanical-login-top{margin-top:18px}.mechanical-search-row{display:flex;gap:10px;align-items:center}.mechanical-search-row input{flex:1;max-width:none!important;margin:8px 0!important}.mechanical-search-row button{min-width:170px;padding:13px 18px}.mechanical-language-row{margin:18px 0 4px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.mechanical-language-row select{margin:0!important;max-width:360px!important}.mechanical-basic-info{margin:16px 0;padding:16px 18px;background:#eef6ff;border-left:5px solid #075bd8;border-radius:10px}.mechanical-basic-info h3{margin:0 0 8px;color:#075bd8}.mechanical-sunday-note{margin-bottom:0}.mechanical-detailed-classes{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}.mechanical-detailed-card{border:2px solid #d7d7d7;border-radius:14px;padding:18px;background:#fff}.mechanical-detailed-card.current{border-color:#e39a12}.mechanical-detailed-card.done{border-color:#159447;background:#f4fff6}.mechanical-detailed-card.locked{border-color:#ccc;background:#fafafa}.mechanical-class-title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:12px}.mechanical-class-title>span{display:inline-block;background:#b40000;color:#fff;font-weight:800;padding:6px 12px;border-radius:7px}.mechanical-class-title h3{margin:10px 0 5px}.mechanical-class-title small{font-weight:700;color:#555}.mechanical-detail-list{columns:2;column-gap:38px;margin:0;padding-left:24px}.mechanical-detail-list li{break-inside:avoid;margin:0 0 9px;line-height:1.35}.mechanical-watch-area{margin-top:14px;padding-top:12px;border-top:1px dashed #bbb}.mechanical-big-video-btn{font-size:16px;padding:13px 20px!important;min-width:290px}.mechanical-big-video-btn:disabled{background:#888;cursor:not-allowed;opacity:.7}@media(max-width:760px){.mechanical-search-row{flex-direction:column;align-items:stretch}.mechanical-search-row button{width:100%}.mechanical-detail-list{columns:1}.mechanical-big-video-btn{width:100%;min-width:0}}\n
/* GMDS Owner Mechanical Test Mode */
.mechanical-test-banner{background:#fff3cd;border:2px solid #e0a000;color:#6b4b00;padding:12px 16px;border-radius:10px;font-weight:700;text-align:center;margin:0 0 14px;}


/* Administrative Mechanical button */
.records-top-mechanical{background:#7c3aed;color:#fff;border:0;border-radius:10px;padding:14px 20px;font-weight:700;cursor:pointer;box-shadow:0 5px 12px rgba(0,0,0,.12)}
.records-top-mechanical:hover{filter:brightness(.95)}

/* Mechanical replay controls */
.attendance-mechanical-wrap{display:flex;flex-direction:column;gap:6px}.mechanical-replay-btn{border:0;border-radius:8px;padding:7px 9px;background:#6f42c1;color:#fff;font-weight:700;cursor:pointer;font-size:12px}.mechanical-replay-btn:hover{filter:brightness(.95)}


/* GMDS Mechanical Video Management */
.records-top-video-manager{background:#0f766e;color:#fff;border:0;border-radius:10px;padding:14px 18px;font-weight:700;cursor:pointer;box-shadow:0 5px 12px rgba(0,0,0,.12)}
.mechanical-video-manager-overlay{position:fixed;inset:0;z-index:30000;background:rgba(0,0,0,.72);align-items:flex-start;justify-content:center;padding:24px;overflow:auto}.mechanical-video-manager-card{position:relative;width:min(980px,98vw);background:#fff;border-radius:16px;padding:26px;margin:auto}.mechanical-video-manager-close{position:absolute;right:16px;top:10px;border:0;background:#b91c1c;color:#fff;border-radius:50%;width:36px;height:36px;font-size:24px;cursor:pointer}.mechanical-video-manager-card h2{text-align:center;margin-top:0}.mechanical-video-manager-note{background:#eef6ff;border-left:5px solid #075bd8;padding:12px;border-radius:8px}.mechanical-video-manager-status{padding:10px 12px;margin:12px 0;border-radius:8px;font-weight:700}.mechanical-video-manager-status.good{background:#e9f8ed;color:#166534}.mechanical-video-manager-status.bad{background:#fee2e2;color:#991b1b}.mechanical-video-manager-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mechanical-video-manager-item{border:1px solid #ddd;border-radius:12px;padding:16px;background:#fafafa}.mechanical-video-manager-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.mechanical-video-manager-head span{font-size:12px;font-weight:800;background:#e5e7eb;padding:5px 8px;border-radius:999px}.mechanical-video-manager-item label{display:block;font-weight:700;margin-bottom:6px}.mechanical-video-manager-item input{width:100%;box-sizing:border-box;padding:11px;border:1px solid #bbb;border-radius:8px}.mechanical-video-manager-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.mechanical-video-manager-actions button{border:0;border-radius:8px;padding:9px 11px;color:#fff;font-weight:700;cursor:pointer}.mechanical-video-manager-actions button:disabled{opacity:.45;cursor:not-allowed}.vm-save{background:#075bd8}.vm-test{background:#15803d}.vm-remove{background:#b91c1c}@media(max-width:760px){.mechanical-video-manager-grid{grid-template-columns:1fr}.records-top-video-manager{padding:12px}}

/* Mechanical labelled visual guide */
.mechanical-parts-visual{margin:18px 0 22px;padding:18px;background:#fff;border:1px solid #d9e2ec;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.07)}
.mechanical-parts-visual h3{margin:0 0 8px;color:#123b66}
.mechanical-parts-visual p{margin:6px 0 12px;line-height:1.55}
.mechanical-parts-visual img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #e3e8ee;background:#fff}
.mechanical-parts-caption{font-size:.92rem;color:#536273}
@media(max-width:700px){.mechanical-parts-visual{padding:10px}.mechanical-parts-visual h3{font-size:1.05rem}}

/* Class 1 — individual part image beside each learning point */
.mechanical-part-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.mechanical-part-topic{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid #dce5ef;border-radius:14px;padding:12px;box-shadow:0 5px 16px rgba(15,23,42,.06)}
.mechanical-part-topic img{width:150px;height:105px;object-fit:contain;background:#f7fafc;border-radius:10px;border:1px solid #e5e7eb;flex:0 0 auto}
.mechanical-part-topic p{margin:5px 0 0;font-size:14px;line-height:1.45;color:#172033}
.mechanical-part-number{display:inline-flex;width:25px;height:25px;border-radius:50%;align-items:center;justify-content:center;background:#0b5ed7;color:#fff;font-weight:800;font-size:12px}
@media(max-width:760px){.mechanical-part-topic-grid{grid-template-columns:1fr}.mechanical-part-topic{align-items:flex-start}.mechanical-part-topic img{width:118px;height:88px}}
@media(max-width:430px){.mechanical-part-topic{display:block}.mechanical-part-topic img{width:100%;height:150px;margin-bottom:10px}}

/* Preserve original Class 1-4 topic lists above the related images */
.mechanical-original-topics{margin:14px 0 18px;padding:16px;border:1px solid #dbe4f0;border-radius:14px;background:#f8fbff}
.mechanical-original-topics h4,.mechanical-topic-images-heading h4{margin:0 0 8px;font-size:18px;color:#102a43}
.mechanical-topic-summary{margin:0 0 10px;font-weight:700;color:#334e68;line-height:1.55}
.mechanical-original-topic-list{margin:0;padding-left:24px;display:block}
.mechanical-original-topic-list li{margin:7px 0;line-height:1.5;color:#243b53}
.mechanical-topic-images-heading{margin:18px 0 10px}
.mechanical-topic-images-heading p{margin:0;color:#627d98}

/* Admission fees / amount section */
.admission-fees-box{margin:14px 0;padding:14px;border:1px solid #d9e2ec;border-radius:10px;background:#f8fbff}
.admission-fees-box h3{margin:0 0 12px;color:#123b67}
.admission-fees-box label{display:block;font-weight:700;margin:9px 0 5px}
.admission-fees-box input{width:100%;box-sizing:border-box}
.admission-fees-box #balanceAmount{font-weight:800;background:#eef7ee}
.admission-fees-box small{display:block;margin-top:6px;color:#52606d}

/* ===== GDS FINAL TYPOGRAPHY ===== */
html, body, button, input, select, textarea, table, th, td, label, a, p, span, div, small {
  font-family: Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, strong, b,
nav a, button, .mechanical-kicker, .mechanical-class-title span,
.top-owner-name, .service-card h3, .records-title {
  font-family: Arial, sans-serif !important;
  font-weight: 700 !important;
}

.aadhaar-help{width:90%;max-width:520px;margin:-5px auto 10px;text-align:left;font-size:12px;color:#555;line-height:1.4}


/* GDS records page: keep top action buttons in normal page flow */
body.records-page .records-top-actions,
body.records-page .records-actions,
body.records-page .top-actions,
body.records-page .admin-actions,
body.records-page .records-nav,
body.records-page .dashboard-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: auto !important;
}

/* Fallback for the actual records header/action containers */
.records-header,
.records-header .header-actions,
.records-header .top-buttons,
.page-header,
.page-header .header-actions {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* Records header alignment: right side, normal scroll */
body.records-page .header-actions,
body.records-page .top-actions,
body.records-page .records-top-actions,
body.records-page .records-actions,
body.records-page nav {
  margin-left: auto !important;
  justify-content: flex-end !important;
  position: static !important;
}

/* =========================================================
   2026 PREMIUM HOME PAGE REFRESH
   Visual-only upgrade: preserves existing content/functions.
   ========================================================= */
:root{--gds-red:#c90000;--gds-red2:#8d0000;--gds-gold:#f4c542;--gds-ink:#0b0d12;--gds-paper:#f5f7fb;--gds-card:#fff;--gds-muted:#64748b}
body{background:linear-gradient(180deg,#f7f8fb 0%,#eef2f7 100%) !important;color:#151922}
header{background:linear-gradient(135deg,#050505 0%,#171717 52%,#090909 100%) !important;border-bottom:3px solid var(--gds-red) !important;box-shadow:0 10px 30px rgba(0,0,0,.22) !important}
header::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--gds-gold),transparent);opacity:.65}
.brand-left .logo img{filter:drop-shadow(0 5px 10px rgba(0,0,0,.45))}
.header-center-brand .brand-welcome-best{color:var(--gds-gold)!important;text-transform:uppercase;letter-spacing:2px!important;font-size:13px!important}
.header-center-brand .brand-global{color:#ef1b1b!important;text-shadow:0 3px 18px rgba(239,27,27,.22)}
.header-center-brand .brand-school{letter-spacing:1.8px!important}
.header-center-brand .brand-reg{display:inline-block;padding:5px 12px;margin-top:8px!important;border:1px solid rgba(244,197,66,.5);border-radius:999px;background:rgba(244,197,66,.08);color:#ffe48a!important}
.top-owner-photo{border:3px solid var(--gds-gold)!important;box-shadow:0 0 0 4px rgba(201,0,0,.38),0 8px 22px rgba(0,0,0,.45)!important}
nav{background:rgba(0,0,0,.94)!important;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 7px 18px rgba(0,0,0,.18)}
nav a{border-radius:7px!important;transition:transform .18s ease,background .18s ease,color .18s ease!important}
nav a:hover{transform:translateY(-1px);background:linear-gradient(135deg,var(--gds-red),#ed1c24)!important}
.nav-login-btn{background:linear-gradient(135deg,#d50000,#970000)!important;box-shadow:0 5px 15px rgba(201,0,0,.35)}
.hero-photo-only{min-height:455px!important;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:inset 0 -70px 90px rgba(0,0,0,.12),0 12px 30px rgba(15,23,42,.13)!important;filter:brightness(1.13) contrast(1.04)!important}
.hero-photo-only::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 34%,transparent 70%,rgba(0,0,0,.06));pointer-events:none}
.insurance-section,.gallery-section,.driving-section,.contact-section,.documents-section,.owner-profile-section,.faq-section,.driving-details-section{width:min(1180px,calc(100% - 34px))!important;margin:30px auto!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(148,163,184,.22)!important;border-radius:22px!important;padding:30px!important;box-shadow:0 15px 40px rgba(15,23,42,.08)!important}
.insurance-section h2,.gallery-section h2,.driving-section h2,.faq-section h2,.driving-details-section h2{font-size:30px!important;color:#151922!important;position:relative;display:inline-block;margin-bottom:25px!important}
.insurance-section h2::after,.gallery-section h2::after,.driving-section h2::after,.faq-section h2::after,.driving-details-section h2::after{content:"";position:absolute;left:0;bottom:-9px;width:58%;height:4px;border-radius:5px;background:linear-gradient(90deg,var(--gds-red),var(--gds-gold))}
.insurance-topics,.service-cards{gap:18px!important}
.insurance-card,.service-card,.why-card,.driving-card,.rta-card,.document-card{border:1px solid #e7eaf0!important;border-radius:16px!important;background:linear-gradient(180deg,#fff,#fbfcfe)!important;box-shadow:0 9px 24px rgba(15,23,42,.07)!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
.insurance-card:hover,.service-card:hover,.why-card:hover,.driving-card:hover,.rta-card:hover,.document-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(15,23,42,.12)!important;border-color:rgba(201,0,0,.22)!important}
.insurance-card h3,.service-card h3,.why-card h3,.driving-card h3,.rta-card h3,.document-card h3{color:#a80000!important}
.insurance-btn,.open-admission-btn{background:linear-gradient(135deg,#d60000,#990000)!important;border-radius:999px!important;box-shadow:0 8px 20px rgba(201,0,0,.28)!important;transition:transform .18s ease,box-shadow .18s ease!important}
.insurance-btn:hover,.open-admission-btn:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(201,0,0,.34)!important}
.gallery-grid{gap:16px!important}
.gallery-grid img{border-radius:16px!important;box-shadow:0 10px 25px rgba(15,23,42,.13)!important;border:3px solid #fff;transition:transform .22s ease,box-shadow .22s ease!important}
.gallery-grid img:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 18px 35px rgba(15,23,42,.18)!important}
.site-footer{border-top:4px solid var(--gds-red)!important;background:linear-gradient(135deg,#090909,#171717)!important}
@media(max-width:900px){.hero-photo-only{min-height:350px!important}.insurance-section,.gallery-section,.driving-section,.faq-section,.driving-details-section{width:min(94%,1180px)!important;padding:22px 16px!important;border-radius:17px!important}.insurance-section h2,.gallery-section h2,.driving-section h2,.faq-section h2,.driving-details-section h2{font-size:25px!important}}
@media(max-width:600px){body{background:#f4f6f9!important}.hero-photo-only{min-height:285px!important}.gallery-grid{gap:10px!important}.gallery-grid img{border-radius:12px!important}.header-center-brand .brand-reg{font-size:9px!important;padding:4px 8px}}