/* =============================================================
   GLOBAL THEME — School ERP India (websitenew)
   Font System: Plus Jakarta Sans + Poppins (matches pricingn.php)
   ============================================================= */

/* ── 1. CSS Variables ────────────────────────────────────────── */
:root {
  --font-body:    'Plus Jakarta Sans', 'Poppins', sans-serif;
  --font-heading: 'Poppins', 'Plus Jakarta Sans', sans-serif;
  --purple: #7660db;
  --purple-dark: #5336ca;
  --purple-light: #ede9fb;
  --purple-mid: #c4b8f5;
  --red: #ec3237;
  --red-light: #fde8e9;
  --text:         #1a1040;
  --muted:        #6b6490;
  --border:       #e8e3f8;
  --bg: #ffffff;
  --surface:      #f7f5ff;
  --primary-gradient: linear-gradient(135deg, #4f46e5, #06b6d4);
    --card-bg: rgba(255, 255, 255, 0.75);
    --text-main: #1f2937;
    --text-muted: #4b5563;
    --radius: 16px;
	--app-primary: #5f46d8;
  --app-primary-dark: #3b2fdb;
  --app-accent: #ec3237;
  --app-text: #172033;
  --app-muted: #667085;
  background: #f7f8ff;
}



/* ── 2. Body / Paragraph / General text ─────────────────────── */
body {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #3e3e3e !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, span, li, a, td, th,
input, select, textarea, button,
label, small, blockquote, cite,
.para, .benefit_point, .section-desc {
  font-family: var(--font-body) !important;
}

p {
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* ── 3. Headings ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.heading-titel,
.section-title,
.plan-name,
.addon-title,
.plan-label,
.section-tag {
  font-family: var(--font-heading) !important;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; font-weight: 800 !important; line-height: 1.2 !important; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem) !important; font-weight: 800 !important; line-height: 1.25 !important; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.3rem) !important; font-weight: 700 !important; }
h4 { font-size: clamp(1rem, 2vw, 1.4rem) !important;   font-weight: 700 !important; }
h5 { font-size: 1rem !important;   font-weight: 600 !important; }
h6 { font-size: 0.9rem !important; font-weight: 600 !important; }

/* ── 4. Navigation ───────────────────────────────────────────── */
nav, .main-menu, .main-menu a,
.sub-menu a, .nav-links li a,
.header-top-area, .header-top-area a {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}

/* ── 5. Buttons ──────────────────────────────────────────────── */
.cs-btn-one, .plan-btn, .btn,
button, input[type="submit"],
input[type="button"] {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ── 6. Footer ───────────────────────────────────────────────── */
footer, footer p, footer a, footer li,
footer h4, footer h5 {
  font-family: var(--font-body) !important;
}

/* ── 7. Pricing-specific classes (for pricingn.php) ─────────── */
.plan-label    { font-size: 0.9rem !important;   font-weight: 700 !important; }
.plan-name     { font-size: 1.35rem !important;  font-weight: 800 !important; }
.plan-sub      { font-size: 0.82rem !important; }
.price-amt     { font-size: 2.4rem !important;   font-weight: 800 !important; }
.price-from,
.price-note    { font-size: 0.72rem !important; }
.feature-list li { font-size: 0.78rem !important; }
.addon-title   { font-size: 1.1rem !important;   font-weight: 800 !important; }
.addon-subtitle { font-size: 0.82rem !important; }
.section-title  { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; font-weight: 800 !important; }
.section-desc   { font-size: 0.95rem !important; line-height: 1.75 !important; }

/* ── 8. Table fonts ──────────────────────────────────────────── */
table.pt thead th,
.price-table7 tr td,
.price-table7 tr th,
.dcf-table td {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}

.price-table7 tr.price-table7-head td,
.price-table7 td.price,
.pc {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

/* ── 9. Contact blocks ───────────────────────────────────────── */
.contact-block, .contact-details,
.contact-details h5, .contact-details p {
  font-family: var(--font-body) !important;
}

/* ── 10. Breadcrumb ──────────────────────────────────────────── */
.breadcrumb, .breadcrumb-item,
.breadcrumb-item a {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}

/* ── 11. Hero / Banner ───────────────────────────────────────── */
.hero h1 {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
  font-weight: 800 !important;
}

.hero p {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
}

/* ── 12. Section tags / eyebrows ─────────────────────────────── */
.section-tag, .hero-eyebrow {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
}

/* ── 13. Testimonials / Reviews ──────────────────────────────── */
.testimonial-item .comments,
.testimonial-content p {
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
}

/* ── 14. Override any leftover sans-serif !important ─────────── */
/* (style.css had `font-family: sans-serif !important` on body) */
/* This file loads AFTER style.css so it wins */

/* ── 15. Mobile responsive tweaks ───────────────────────────── */
@media (max-width: 767px) {
  body { font-size: 14px !important; }
  h1   { font-size: 1.6rem !important; }
  h2   { font-size: 1.4rem !important; }
  h3   { font-size: 1.2rem !important; }
  p    { font-size: 14px !important; }
}

/* ── 16. Footer Bottom Area Premium Redesign ──────────────── */
.footer-bottom-area {
  background: #171d29 !important; /* Premium dark background */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 25px 0 !important;
  color: #9ca3af !important;
}

.footer-copyright-text {
  font-size: 13.5px;
  color: #9ca3af;
  font-weight: 500;
}

.footer-brand-link {
  color: #7660db !important; /* Premium purple matches branding */
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-brand-link:hover {
  color: #00d2ff !important; /* Neon blue secondary glow on hover */
}

/* Premium Visitor Badge styling */
.visitor-counter-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.visitor-counter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
}

.visitor-counter-number {
  font-family: 'Poppins', monospace !important;
  font-size: 14px;
  font-weight: 700;
  color: #00d2ff !important; /* Neon blue counter text */
  letter-spacing: 0.5px;
}

/* Legal Links */
.footer-legal-links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-legal-links a {
  font-size: 13.5px;
  color: #9ca3af !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-legal-links a:hover {
  color: #00d2ff !important;
}

.legal-divider {
  color: rgba(255, 255, 255, 0.15);
  font-size: 12px;
  user-select: none;
}

/* Responsive adjust for bottom footer alignment */
@media (max-width: 991px) {
  .footer-copyright-text {
    display: block;
    margin-bottom: 12px;
  }
  .visitor-counter-badge {
    margin-bottom: 12px;
  }
  .footer-legal-links {
    justify-content: center;
    gap: 8px;
  }
}






/* Blobs on hero */



/* Nav */



/* pricing.php */
.hero { position:relative; z-index:1; text-align:center; padding:148px 40px 90px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:var(--purple-light); border:1px solid rgba(118,96,219,0.25); padding:6px 20px; border-radius:100px; font-size:0.72rem; font-weight:700; color:var(--purple-dark); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:26px; animation:fadeUp 0.7s ease 0.2s both; }
.pulse-dot { width:7px; height:7px; background:var(--purple); border-radius:50%; display:inline-block; animation:pulse 1.5s ease infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(118,96,219,0.5);} 50%{transform:scale(1.4);box-shadow:0 0 0 6px rgba(118,96,219,0);} }
.hero h1 { font-family:"Poppins", sans-serif; font-size:clamp(2.4rem,5vw,3.8rem); font-weight:800; line-height:1.1; color:var(--text); margin-bottom:20px; animation:fadeUp 0.7s ease 0.3s both; }
.hero h1 .grad { background:linear-gradient(135deg,var(--purple) 0%,var(--red) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { max-width:600px; margin:0 auto 28px; color:var(--muted); font-size:1rem; line-height:1.75; animation:fadeUp 0.7s ease 0.4s both; }
.gst-badge { display:inline-flex; align-items:center; gap:8px; background:var(--red-light); border:1px solid rgba(236,50,55,0.2); color:#b02226; padding:8px 20px; border-radius:100px; font-size:0.8rem; font-weight:700; animation:fadeUp 0.7s ease 0.5s both; }
@keyframes fadeUp { from{transform:translateY(28px);opacity:0;} to{transform:translateY(0);opacity:1;} }

/* Page body */


/* Sections */
.section-header { margin-bottom:44px; }
.section-tag { display:inline-flex; align-items:center;justify-content: center; gap:8px; font-size:0.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--purple); margin-bottom:12px; }
.section-tag::before { content:''; display:block; width:20px; height:2px; background:var(--purple); border-radius:2px; }
.section-title { font-family:"Poppins", sans-serif; font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; color:var(--text); margin-bottom:10px; line-height:1.15; }
.section-title .accent { color:var(--red); }
.section-desc { color:var(--muted); font-size:0.95rem;  line-height:1.75; }

/* Plan grid */


/* Plan card */
.plan-card { background:#fff; border:1.5px solid var(--border); border-radius:24px; padding:15px; position:relative; overflow:hidden; transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s; animation:cardIn 0.7s ease both; }
.plan-card::after { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--purple),var(--purple-dark)); opacity:0; transition:opacity 0.3s; }
.plan-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(118,96,219,0.13); border-color:rgba(118,96,219,0.35); }
.plan-card:hover::after { opacity:1; }
.plan-card.featured { border-color:var(--purple); box-shadow:0 12px 40px rgba(118,96,219,0.14); }
.plan-card.featured::after { opacity:1; }
.plan-card.featured-red { border-color:var(--red); box-shadow:0 12px 40px rgba(236,50,55,0.11); }
.plan-card.featured-red::after { background:linear-gradient(90deg,var(--red),#b01f23); opacity:1; }

.featured-badge { position:absolute; top:15px; right:20px; background:linear-gradient(45deg,var(--purple),var(--purple-dark)); color:#fff; font-size:0.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:0px 10px; border-radius:100px; box-shadow:0 4px 12px rgba(118,96,219,0.3); }
.featured-badge.red-b { background:linear-gradient(45deg,var(--red),#b01f23); box-shadow:0 4px 12px rgba(236,50,55,0.3); }

.plan-label { font-size:0.9rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--purple); margin-bottom:6px; }
.plan-label.red { color:var(--red); }
.plan-name { font-family:"Poppins", sans-serif; font-size:1.35rem; font-weight:800; color:var(--text); margin-bottom:6px; }
.plan-sub { font-size:0.82rem; color:var(--muted); margin-bottom:15px; line-height:1.6; }
.price-from { font-size:0.72rem; color:var(--muted); margin-bottom:2px; }
.price-amt { font-family:"Poppins", sans-serif; font-size:2.4rem; font-weight:800; color:var(--text); line-height:1; }
.price-note { font-size:0.72rem; color:var(--muted); margin-bottom:22px; margin-top:4px; }
.divider-line { height:1px; background:var(--border); margin:18px 0; }
.feature-list { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:26px;padding: 15px; }
.feature-list li { display:flex; align-items:center; gap:10px; font-size:0.73rem; color:var(--muted);margin: 0px 0px; }
.feature-list li.on { color:var(--text); font-weight:500;margin: 0px 0px; }
.fi { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.6rem; flex-shrink:0; }
.fi.yes { background:var(--purple-light); color:var(--purple); }
.fi.no  { background:#f3f3f4; color:#ec3237; }

.plan-btn { display:block; width:100%; padding:12px; border-radius:12px; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.86rem; font-weight:700; cursor:pointer; border:none; text-align:center; text-decoration:none; transition:all 0.2s; }
.plan-btn.outline { background:transparent; border:1.5px solid var(--border); color:var(--purple-dark); }
.plan-btn.outline:hover { border-color:var(--purple); background:var(--purple-light); transform:translateY(-2px); }
.plan-btn.solid { background:linear-gradient(45deg,var(--purple),var(--purple-dark)); color:#fff; box-shadow:0 6px 20px rgba(118,96,219,0.3); }
.plan-btn.solid:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(118,96,219,0.45); }
.plan-btn.solid-red { background:linear-gradient(45deg,var(--red),#b01f23); color:#fff; box-shadow:0 6px 20px rgba(236,50,55,0.25); }
.plan-btn.solid-red:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(236,50,55,0.4); }

@keyframes cardIn { from{opacity:0;transform:translateY(36px);} to{opacity:1;transform:translateY(0);} }
.plan-card:nth-child(1){animation-delay:0.05s;} .plan-card:nth-child(2){animation-delay:0.15s;} .plan-card:nth-child(3){animation-delay:0.25s;} .plan-card:nth-child(4){animation-delay:0.35s;}

/* Table */
.table-wrap { background:#fff; border:1.5px solid var(--border); border-radius:24px; overflow:hidden; margin-bottom:56px; box-shadow:0 8px 32px rgba(118,96,219,0.06); }
table.pt { width:100%; border-collapse:collapse; font-size:0.84rem; min-width:720px; }
table.pt thead th { padding:16px 20px; text-align:center; font-weight:700; font-size:0.88rem; letter-spacing:0.5px; background:var(--surface); border-bottom:1.5px solid var(--border); color:var(--text); }
table.pt thead th:first-child { text-align:left; }
table.pt td { padding:13px 20px; text-align:center; border-bottom:1px solid #f1effe; color:var(--muted); }
table.pt td:first-child { text-align:left; font-weight:800; color:var(--text); background:#fdfcff; }
table.pt tr:last-child td { border-bottom:none; }
table.pt tr:hover td { background:#faf8ff; }
table.pt tr:hover td:first-child { background:#f3f0ff; }
.pc { font-family:"Poppins", sans-serif; font-weight:700; font-size:0.95rem; color:var(--purple-dark); }
.ic-yes { color:var(--purple); font-size:1rem; }
.ic-no  { color:#ec3237; font-size:1rem; }
.row-header td { background:linear-gradient(45deg,#7660db,#7660db) !important; color:#fff !important; font-size:0.78rem !important; letter-spacing:2px; text-transform:uppercase; padding:10px 20px !important; font-weight:800 !important; }
.th-pop { display:inline-block; font-size:0.58rem; padding:2px 9px; border-radius:100px; background:linear-gradient(45deg,var(--purple),var(--purple-dark)); color:#fff; margin-left:6px; vertical-align:middle; font-weight:700; }

/* Divider */
.s-divider { height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); max-width:1380px; margin:0 auto; }

/* Addons */

.modern-addon{
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,#ffffff,#f8f7ff);
    border:1px solid #ece8ff;
    border-radius:24px;
    padding: 20px;
    text-align:center;
    transition:0.35s ease;
    cursor:pointer;
    z-index:1;
    height:100%;
    box-shadow:
        0 10px 30px rgba(90,70,200,0.05),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Hover */
.modern-addon:hover{
    transform:translateY(-8px);
    border-color:#7c5cff;
    box-shadow:
        0 22px 50px rgba(124,92,255,0.18),
        0 8px 20px rgba(124,92,255,0.08);
}

/* Background Glow */
.addon-glow{
    position:absolute;
    width:180px;
    height:180px;
    background:radial-gradient(circle,rgba(124,92,255,0.18),transparent 70%);
    top:-60px;
    right:-60px;
    z-index:-1;
    transition:0.4s;
}

.modern-addon:hover .addon-glow{
    transform:scale(1.2);
}

/* Badge */
.addon-badge{
    position:absolute;
    top:14px;
    right:14px;
    background:linear-gradient(45deg,#7c5cff,#5a3fff);
    color:#fff;
    font-size:11px;
    font-weight:600;
    padding:6px 12px;
    border-radius:30px;
    display:flex;
    align-items:center;
    gap:5px;
    box-shadow:0 6px 16px rgba(124,92,255,0.25);
}

/* Icon */
.addon-icon{
    width:78px;
    height:78px;
    margin:8px auto 20px;
    border-radius:24px;
    background:linear-gradient(135deg,#7c5cff,#5a3fff);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#fff;
    position:relative;
    box-shadow:
        0 10px 25px rgba(124,92,255,0.35);
    transition:0.35s ease;
}

.modern-addon:hover .addon-icon{
    transform:rotate(-6deg) scale(1.06);
}

/* Title */
.addon-title{
    font-family:"Poppins", sans-serif;
    font-size:1.1rem;
    font-weight:800;
    color:#1f1f35;
    margin-bottom:6px;
    line-height:1.4;
}

/* Subtitle */
.addon-subtitle{
    font-size:0.82rem;
    color:#7d7d98;
    letter-spacing:0.3px;
}

/* Price Box */
.price-box{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:2px;
    margin-bottom:10px;
}

.currency{
    font-size:1.2rem;
    font-weight:700;
    color:#5a3fff;
    margin-top:6px;
}

.price{
    font-size:1.8rem;
    line-height:1;
    font-weight:800;
    color:#5a3fff;
    font-family:"Poppins", sans-serif;
}

.slash{
    font-size:0.85rem;
    color:#7d7d98;
    font-weight:600;
    margin-top:5px;
}

/* Bottom Text */
.addon-plan{
    display:inline-block;
    padding:8px 16px;
    border-radius:30px;
    background:#f1edff;
    color:#5a3fff;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.3px;
}

.addon-plan a {
    display:inline-block;
    padding:8px 16px;
    border-radius:30px;
    background:#f1edff;
    color:#5a3fff;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.3px;
}

/* Mobile */
@media(max-width:576px){

    .modern-addon{
        padding:24px 18px;
    }

    .addon-icon{
        width:68px;
        height:68px;
        font-size:26px;
    }

    .price{
        font-size:2.3rem;
    }
}

/* Includes bar */
.includes-bar { background:linear-gradient(135deg,var(--red-light),#fff5f5); border:1.5px solid rgba(236,50,55,0.18); border-radius:16px; padding:18px 26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:56px; }
.includes-bar i { color:var(--red); font-size:1.3rem; flex-shrink:0; }

/* Footer */


/* Back to top */


/* Reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.65s ease,transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
/*
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} nav{padding:14px 20px;} }
@media(max-width:640px){ .footer-grid{grid-template-columns:1fr;} .nav-links li:not(:last-child){display:none;} .hero{padding:120px 20px 60px;} .section{padding:48px 16px;} footer{padding:48px 20px 28px;} }*/


               .footer-contact{
               background: #fff;
               padding: 80px 0 35px;
               position: relative;
               overflow: hidden;
               }
               /* light background shape */
               .footer-contact::before{
               content: "";
               position: absolute;
               width: 450px;
               height: 450px;
               background: rgba(118,96,219,0.06);
               border-radius: 50%;
               top: -150px;
               right: -120px;
               z-index: 0;
               }
               .footer-contact::after{
               content: "";
               position: absolute;
               width: 350px;
               height: 350px;
               background: rgba(236,50,55,0.05);
               border-radius: 50%;
               bottom: -120px;
               left: -100px;
               z-index: 0;
               }
               .footer-wrapper{
               position: relative;
               z-index: 2;
               }
               .footer-heading{
               text-align: center;
               margin-bottom: 50px;
               }
               .footer-heading h2{
               font-size: 2.2rem;
               font-weight: 800;
               color: #5336ca;
               margin-bottom: 10px;
               }
               .footer-heading p{
               color: #666;
               max-width: 700px;
               margin: auto;
               }
               .erp-contact-row{
               margin-bottom: 40px;
               }
               .erp-contact-card{
               display: flex;
               align-items: flex-start;
               gap: 18px;
               background: #fff;
               border-radius: 24px;
               padding: 28px;
               height: 100%;
               position: relative;
               overflow: hidden;
               border: 1px solid #f1f1f1;
               box-shadow: 0 12px 35px rgba(0,0,0,0.06);
               transition: all .35s ease;
               }
               .erp-contact-card:hover{
               transform: translateY(-8px);
               box-shadow: 0 20px 50px rgba(83,54,202,0.14);
               }
               .erp-contact-card::before{
               content: "";
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 5px;
               background: linear-gradient(45deg,#7660db,#ec3237);
               }
               .erp-contact-icon{
               min-width: 75px;
               width: 75px;
               height: 75px;
               border-radius: 22px;
               display: flex;
               align-items: center;
               justify-content: center;
               background: linear-gradient(45deg,#7660db,#5336ca);
               color: #fff;
               font-size: 30px;
               box-shadow: 0 12px 25px rgba(118,96,219,0.25);
               transition: .3s;
               }
               .erp-contact-card:hover .erp-contact-icon{
               transform: rotate(-8deg) scale(1.08);
               }
               .erp-contact-content h5{
               font-size: 22px;
               font-weight: 700;
               color: #1f1f1f;
               margin-bottom: 12px;
               }
               .erp-contact-content p{
               margin: 0;
               color: #666;
               line-height: 1.9;
               font-size: 15px;
               }
               .erp-contact-content a{
               text-decoration: none;
               color: #666;
               transition: .3s;
               }
               .erp-contact-content a:hover{
               color: #5336ca;
               }
               @media(max-width:768px){
               .erp-contact-card{
               padding: 22px;
               }
               .erp-contact-content h5{
               font-size: 18px;
               }
               .erp-contact-icon{
               width: 65px;
               height: 65px;
               min-width: 65px;
               font-size: 24px;
               }
               }
               /* office section */
               .office-box{
               margin-top: 55px;
               background: #faf8ff;
               border: 1px solid #ece7ff;
               border-radius: 30px;
               padding: 30px;
               text-align: center;
               }
               .office-box h4{
               color: #5336ca;
               margin-bottom: 18px;
               }
               .office-list{
               display: flex;
               gap: 12px;
               flex-wrap: wrap;
               justify-content: center;
               }
               .office-list span{
               padding: 10px 18px;
               background: #fff;
               border-radius: 50px;
               border: 1px solid #ece7ff;
               color: #5336ca;
               font-size: .88rem;
               transition: .3s;
               font-weight: 600;
               }
               .office-list span:hover{
               background: #5336ca;
               color: #fff;
               transform: translateY(-4px);
               }
               /* bottom section */
               .footer-bottom{
               margin-top: 40px;
               text-align: center;
               border-top: 1px solid #eee;
               padding-top: 30px;
               }
               .footer-bottom p{
               color: #666;
               font-size: .9rem;
               line-height: 1.8;
               }
               .footer-bottom strong{
               color: #5336ca;
               }
               @media(max-width:768px){
               .footer-heading h2{
               font-size: 1.7rem;
               }
               .contact-card{
               min-width: 100%;
               }
               }
/*--------- pricing.php -----------------*/

/* ── SECTION HEADER PILL ── */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--purple-light);
  color: var(--purple-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 100px;
  letter-spacing: .4px;
  margin-bottom: 14px;
}

/* ── PAGE HEADER ── */
.page-header {
  text-align: center;
  padding: 48px 20px 20px;
  background: var(--bg);
}
.page-header h1 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
}
.page-header h1 span {
  color: var(--red);
  position: relative;
}
.page-header h1 span::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red-light));
  border-radius: 4px;
}
.page-header p {
  color: var(--muted);
  font-size: 16px;
  margin-top: 14px;
  text-align:center;
}

/* ── HERO ── */
.hero-section {
  padding: 70px 0 80px;
  background: linear-gradient(135deg, #f7f5ff 0%, #ede9fb 50%, #e4defa 100%);
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(118,96,219,.12) 0%, transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
}
.hero-left h2 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 18px;
}
.hero-left h2 em {
  font-style: normal;
  color: var(--purple);
}
.hero-left p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
}
.hero-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  color: var(--purple-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 12px rgba(118,96,219,.1);
}
.hero-tag svg {
  width: 16px; height: 16px;
  stroke: var(--purple);
  stroke-width: 2.5;
  fill: none;
}
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
.hero-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 24px 64px rgba(118,96,219,.18);
  border: 1px solid rgba(255, 255, 255, 0.6);
  animation: float 5s ease-in-out infinite;
}
.hero-card h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 20px;
}
.check-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--purple-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.check-icon svg {
  width: 12px; height: 12px;
  stroke: var(--purple-dark);
  stroke-width: 2.5;
  fill: none;
}

/* ── STATS STRIP ── */
.stats-strip {
  background: var(--purple);
  padding: 20px 0;
  overflow: hidden;
}
.stat-item {
  text-align: center;
  padding: 20px 15px;
  position: relative;
}
@media (min-width: 768px) {
  .stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: rgba(255,255,255,.2);
  }
}
.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: #fff;
}
.stat-num span { color: var(--purple-mid); }
.stat-label {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
  letter-spacing: .3px;
}

/* ── HOW IT WORKS ── */
.how-section {
  padding: 70px 0;
  background: var(--surface);
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 800;
  color: var(--text);
  text-align: center;
  margin-bottom: 8px;
}
.section-title span { color: var(--purple); }
.section-sub {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 60px;
}
.step-card {
  background: var(--bg);
  border-radius: 20px;
  padding: 32px 26px;
  border: 1.5px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  cursor: default;
  height: 100%;
}
.step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--purple-light), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
}
.step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(118,96,219,.18);
  border-color: var(--purple-mid);
}
.step-card:hover::before { opacity: 1; }
.step-num {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 800;
  color: var(--purple-light);
  line-height: 1;
  margin-bottom: 16px;
  position: relative;
}
.step-icon {
  width: 46px; height: 46px;
  background: var(--purple-light);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
}
.step-icon svg {
  width: 22px; height: 22px;
  stroke: var(--purple);
  stroke-width: 2;
  fill: none;
}
.step-card h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  position: relative;
}
.step-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
  position: relative;
}

/* ── BENEFITS ── */
.benefits-section {
  padding: 70px 0;
  background: var(--bg);
}
.benefit-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 28px 26px;
  border-left: 5px solid var(--purple);
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
}
.benefit-card:hover {
  transform: translateX(6px);
  box-shadow: 0 12px 32px rgba(118,96,219,.12);
}
.benefit-icon {
  width: 42px; height: 42px;
  background: var(--purple-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.benefit-icon svg {
  width: 20px; height: 20px;
  stroke: var(--purple-dark);
  stroke-width: 2;
  fill: none;
}
.benefit-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.benefit-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
}

/* ── DASHBOARD ── */
.dashboard-section {
  padding: 70px 0;
  background: linear-gradient(160deg, var(--surface) 0%, #f0eeff 100%);
}
.dash-feat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  transition: box-shadow .3s;
}
.dash-feat:hover {
  box-shadow: 0 6px 24px rgba(118,96,219,.1);
}
.dash-feat svg {
  width: 20px; height: 20px;
  stroke: var(--purple);
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}
.dash-feat span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* ── MOCK DASHBOARD UI (GLASSMORPHISM) ── */
.mock-dash {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  box-shadow: 0 32px 80px rgba(118,96,219,.22);
  overflow: hidden;
  border: 1px solid var(--border);
}
.mock-topbar {
  background: var(--purple);
  padding: 14px 20px;
}
.mock-topbar span {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.mock-dots { display: flex; gap: 6px; }
.mock-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
}
.mock-body { padding: 20px; }
.mock-stat {
  background: var(--bg);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  border: 1px solid var(--border);
}
.mock-stat .num {
  font-size: 20px;
  font-weight: 800;
  color: var(--purple);
  font-family: var(--font-heading);
}
.mock-stat .lbl {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.mock-table-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  gap: 12px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  background: #fff;
}
.mock-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--purple-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-dark);
  flex-shrink: 0;
}
.mock-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.mock-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
}
.status-approved { background: #e6f9f0; color: #15803d; }
.status-pending  { background: #fff8e1; color: #b45309; }
.status-review   { background: var(--purple-light); color: var(--purple-dark); }

/* ── CTA ── */
.cta-section {
  padding: 30px 20px;
  background: var(--purple);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 60%);
  top: -200px; left: 50%;
  transform: translateX(-50%);
}
.cta-section h2 {
  font-family: var(--font-heading);
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
}
.cta-section p {
  color: rgba(255,255,255,.75);
  font-size: 16px;
  margin-bottom: 36px;
  text-align: center;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--purple-dark);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 34px;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 42px rgba(0,0,0,.25);
  text-decoration: none;
  color: var(--purple-dark);
}
.cta-btn svg {
  width: 18px; height: 18px;
  stroke: var(--purple-dark);
  stroke-width: 2.5;
  fill: none;
  transition: transform .3s;
}
.cta-btn:hover svg { transform: translateX(4px); }

/* Extra responsive fine-tuning */
@media (max-width: 576px) {
  .hero-tag { width: 100%; justify-content: center; }
}


.modern-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 24px 64px rgba(118,96,219,.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: transform .4s ease, box-shadow .4s ease;
}
.modern-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 80px rgba(118,96,219,.22);
}

.video-card-wrapper {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  box-shadow: 0 24px 50px rgba(118,96,219,.18);
  overflow: hidden;
  border: 1px solid var(--border);
  padding: 15px;
  transition: transform .4s ease;
}
.video-card-wrapper:hover {
  transform: scale(1.015);
}

/* ── SECTIONS ── */
.section-padding-lg {
  padding: 70px 0;
}
.bg-surface {
  background-color: var(--surface);
}
.bg-white-section {
  background-color: var(--bg);
}


/* ── CUSTOM LISTS & TAGS ── */
 

.custom-list {
  list-style: none;
}
.custom-list li {
  position: relative;
  padding-left: 28px;
  margin : 15px 0px;
  font-size: 15px;
  color: var(--text);
  display: flow !important;
}
.custom-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}


.modern-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 24px 64px rgba(118,96,219,.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: transform .4s ease, box-shadow .4s ease;
}
.modern-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 80px rgba(118,96,219,.22);
}

.feature-card {
  background: var(--bg);
  padding: 30px;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(118,96,219,0.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(118,96,219,0.12);
  border-color: var(--purple-mid);
}



.bg-surface {
  background-color: var(--surface);
}
.bg-white-section {
  background-color: var(--bg);
}
.gradient-hero {
  background: linear-gradient(135deg, #4338ca, #6366f1);
  color: #ffffff;
}
.gradient-footer {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #ffffff;
}


.feature-icon-box {
  width: 46px;
  height: 46px;
  background: var(--purple-light);
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
  margin-bottom: 18px;
  transition: all 0.3s ease;
}
.feature-card:hover .feature-icon-box {
  background: var(--purple);
  color: #ffffff;
  transform: scale(1.08);
}



.academics-sidebar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 24px;
  border-radius: 24px;
  box-shadow: 0 16px 45px rgba(118, 96, 219, 0.08);
  border: 1px solid var(--border);
}

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

.academics-li {
  padding: 12px 15px;
  border-radius: 10px;
  margin: 5px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text);
  background: transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.academics-li i {
  font-size: 18px;
  color: var(--purple);
  width: 24px;
  text-align: center;
  transition: color 0.3s ease;
}

/* Hover State */
.academics-li:hover {
  background: var(--surface);
  color: var(--purple-dark);
  padding-left: 24px;
}

/* Active State (Triggered via JS) */
.academics-li.active-feature {
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(67, 56, 202, 0.25);
}
.academics-li.active-feature i {
  color: #ffffff !important;
}

/* ── DYNAMIC CONTENT DISPLAY ── */
.content-display-card {
  background: #ffffff;
  padding: 45px;
  border-radius: 24px;
  box-shadow: 0 20px 55px rgba(118, 96, 219, 0.1);
  border: 1px solid var(--border);
  min-height: 450px;
  transition: opacity 0.25s ease-in-out;
}
.content-display-card h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--purple-dark);
  font-size: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── VIDEO & MEDIA WRAPPERS ── */
.media-card-wrapper {
  background: var(--bg);
  border-radius: 22px;
  box-shadow: 0 20px 45px rgba(118,96,219,.12);
  overflow: hidden;
  border: 1px solid var(--border);
  padding: 14px;
  transition: transform .4s ease;
}
.media-card-wrapper:hover {
  transform: translateY(-4px);
}
.dynamic-img {
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  object-fit: cover;
}


/* ── WORKFLOW STEPS ── */
.workflow-step {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 35px 28px;
  border-radius: 20px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.02);
  height: 100%;
  transition: all 0.3s ease;
}
.workflow-step:hover {
  border-color: var(--purple-mid);
  box-shadow: 0 16px 35px rgba(118,96,219,0.08);
}
.workflow-step strong {
  display: block;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--purple);
  margin-bottom: 10px;
  font-weight: 800;
}
.workflow-step h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}
.workflow-step p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}



.academics-li i {
    color: #64748b;
    font-size: 16px;
    width: 20px;
    text-align: center;
    transition: color 0.25s ease;
}

/* Hover & Active System */
.academics-li:hover {
    background-color: #f1f5f9;
    color: #6366f1;
}
.academics-li:hover i {
    color: #6366f1;
}

.academics-li.active {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.22);
}
.academics-li.active i {
    color: #ffffff !important;
}

/* Right Content Box Styling */
.content-display-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.05);
    min-height: 400px;
}

/* Inner Display Panes Animation */
.hr-feature-pane {
    display: none;
    animation: paneEffect 0.4s ease forwards;
}

.hr-feature-pane.active {
    display: block;
}


.pane-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 8px;
}
.pane-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 50px; height: 3px;
    background: #6366f1;
    border-radius: 2px;
}

.pane-desc {
    color: #475569;
    font-size: 15.5px;
    line-height: 1.7;
}

/* Responsive Support for Tab List */
@media (max-width: 991px) {
    .academics-ul {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 8px;
    }
    .academics-li {
        display: inline-flex;
        flex: 0 0 auto;
    }
}

/* Premium Outer Container for Embedded Video */
.premium-video-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}
.premium-video-box .embed-responsive {
    border-radius: 12px;
    overflow: hidden;
}

/* Feature Image Card Layout */
.feature-image-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-image-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(99, 102, 241, 0.1);
}

/* Image Wrapper Box */
.feature-image-box .img-wrapper {
    background: #f1f5f9;
    padding: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.transport-screen-img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 12px;
}

/* Details Box under Image */
.feature-image-box .box-details {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-image-box .box-details h3, h5 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-image-box .box-details h3, h5 i {
    color: #6366f1;
    font-size: 20px;
}

.feature-image-box .box-details p {
    font-size: 13px;
    line-height: 1.5;
}

/* Video Card Shadow Fix */


/* ─── ADDITION FOR MODERN ACCORDIONS ─── */
.premium-visual-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.05);
}

/* Checklist Layout Elements */



/* ─── MODERN HTML5 DETAILS ACCORDIONS ─── */
.custom-premium-accordion {
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 0;
    transition: all 0.3s ease;
}
.custom-premium-accordion:last-child {
    border-bottom: none;
}

.custom-premium-accordion summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    outline: none;
}
.custom-premium-accordion summary::-webkit-details-marker {
    display: none;
}

.accordion-trigger-icon {
    font-size: 22px;
    font-weight: 400;
    color: #6366f1;
    transition: transform 0.25s ease;
}

.custom-premium-accordion[open] .accordion-trigger-icon {
    transform: rotate(45deg);
    color: #ef4444;
}

.accordion-content {
    padding-top: 10px;
    padding-left: 24px;
    animation: foldDownEffect 0.3s ease forwards;
}

/* Description Typography */
.module-sub-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.5px !important;
	text-align:left !important;
}

.module-description-text {
    color: #475569;
    font-size: 15.5px;
    line-height: 1.7;
	text-align:left !important;
}


.gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.title-separator {
    width: 60px;
    height: 4px;
    background: var(--primary-gradient);
    margin: 15px auto 0;
    border-radius: 2px;
}

.lead-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-muted);
}

/* --- Features List Styling --- */


.highlight-note {
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.1), rgba(6, 182, 212, 0.1));
    border-left: 4px solid #4f46e5;
    padding: 20px;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-weight: 500;
    color: var(--text-main);
}

/* --- Project Grid & Card UI --- */
.projects-section {
    background: #f8fafc;
}

.project-card {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(6, 182, 212, 0.4);
}

.image-bg {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
    background: #e2e8f0;
}

.image-bg .image-shop-scroll {
    width: 100%;
    height: 240px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-position 4s ease-in-out;
}

.project-card:hover .image-shop-scroll {
    background-position: center bottom !important;
}

.project-card .card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    text-align: center;
}

.project-card .card-body h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
    line-height: 1.4;
    min-height: 50px; /* Aligns buttons evenly */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Modern Interactive Button --- */
.modern-btn {
    background: var(--primary-gradient);
    color: white !important;
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    border: none;
    align-self: center;
}

.modern-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
    opacity: 0.95;
}

/* Lazy loading native styling */
img {
    content-visibility: auto;
}

.feature-row{
    margin-top:30px;
}

.feature-box{
    display:flex;
    align-items:flex-start;
    height:100%;
    background:rgba(255,255,255,.75);
    padding:18px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.6);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 4px 15px rgba(0,0,0,.06);
    transition:all .3s ease;
}

.feature-box:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.feature-box .icon-box{
    width:50px;
    height:50px;
    min-width:50px;
    border-radius:12px;
    background:linear-gradient(135deg,#4f46e5,#06b6d4);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    margin-right:15px;
    box-shadow:0 4px 12px rgba(79,70,229,.25);
}

.feature-box .list-content{
    flex:1;
}

.feature-box .list-content strong{
    display:block;
    font-size:17px;
    color:#1f2937;
    margin-bottom:5px;
    font-weight:700;
	text-align: left;
}

.feature-box .list-content span{
    display:block;
    font-size:14px;
    line-height:1.7;
    color:#6b7280;
	text-align: left;
}

/* Mobile */
@media (max-width:767px){

    .feature-box{
        padding:15px;
    }

    .feature-box .icon-box{
        width:45px;
        height:45px;
        min-width:45px;
        font-size:16px;
    }

    .feature-box .list-content strong{
        font-size:16px;
    }

    .feature-box .list-content span{
        font-size:13px;
    }
}




.mobile-app-page .mobile-app-section {
  padding: 70px 0 86px;
}

.mobile-app-page .mobile-app-section .container {
  max-width: 1180px;
}

.mobile-app-page .app-hero {
  align-items: center;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.85fr);
}

.mobile-app-page .app-hero h1 {
  color: var(--app-text);
  font-size: clamp(34px, 5vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  margin-bottom: 18px;
}

.mobile-app-page .app-hero h1 span {
  color: var(--app-accent);
}

.mobile-app-page .app-hero p {
  color: var(--app-muted);
  font-size: 18px !important;
  line-height: 1.75 !important;
  max-width: 720px;
}

.mobile-app-page .app-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.mobile-app-page .app-btn {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 800;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  text-decoration: none;
}

.mobile-app-page .app-btn-primary {
  background: linear-gradient(135deg, var(--app-primary-dark), var(--app-primary));
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(59, 47, 219, 0.23);
}

.mobile-app-page .app-btn-light {
  background: #ffffff;
  border: 1px solid rgba(95, 70, 216, 0.15);
  color: var(--app-primary-dark);
}

.mobile-app-page .app-btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.mobile-app-page .app-device {
  background: #ffffff;
  border: 1px solid rgba(95, 70, 216, 0.12);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(23, 32, 51, 0.12);
  padding: 20px;
}

.mobile-app-page .app-device img {
  border-radius: 18px;
  display: block;
  width: 100%;
}

.mobile-app-page .app-section-title {
  margin: 64px auto 32px;
  max-width: 820px;
  text-align: center;
}

.mobile-app-page .app-section-title h2 {
  color: var(--app-primary-dark);
  font-size: 34px !important;
  font-weight: 800 !important;
  margin-bottom: 12px;
}

.mobile-app-page .app-section-title p {
  color: var(--app-muted);
  font-size: 17px !important;
  line-height: 1.7 !important;
}

.mobile-app-page .app-card {
  background: #ffffff;
  border: 1px solid rgba(95, 70, 216, 0.11);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(23, 32, 51, 0.08);
  height: 100%;
  padding: 26px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.mobile-app-page .app-card:hover {
  border-color: rgba(95, 70, 216, 0.28);
  box-shadow: 0 20px 48px rgba(23, 32, 51, 0.12);
  transform: translateY(-4px);
}

.mobile-app-page .app-card-icon {
  align-items: center;
  background: rgba(95, 70, 216, 0.1);
  border-radius: 14px;
  color: var(--app-primary-dark);
  display: inline-flex;
  font-size: 24px;
  height: 48px;
  justify-content: center;
  margin-bottom: 18px;
  width: 48px;
}

.mobile-app-page .app-card h3 {
  color: var(--app-primary-dark);
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 12px;
}

.mobile-app-page .app-card p,
.mobile-app-page .app-card li {
  color: #475467;
  font-size: 15.5px;
  line-height: 1.2;
}

.mobile-app-page .app-card ul {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-app-page .app-card li {
  padding-left: 26px;
  position: relative;
  margin: 4px 0px;
}

.mobile-app-page .app-card li::before {
  color: var(--app-accent);
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 0;
}

.mobile-app-page .app-showcase {
  align-items: center;
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  margin-top: 62px;
}

.mobile-app-page .app-screens {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-app-page .app-screen {
  background: #ffffff;
  border: 1px solid rgba(95, 70, 216, 0.12);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(23, 32, 51, 0.1);
  overflow: hidden;
  padding: 10px;
}

.mobile-app-page .app-screen img {
  border-radius: 12px;
  display: block;
  width: 100%;
}

.mobile-app-page .app-highlight {
  background: linear-gradient(135deg, var(--app-primary-dark), var(--app-primary));
  border-radius: 20px;
  box-shadow: 0 22px 55px rgba(59, 47, 219, 0.24);
  color: #ffffff;
  padding: 36px;
}

.mobile-app-page .app-highlight h2 {
  color: #ffffff !important;
  font-size: 31px !important;
  font-weight: 800 !important;
  margin-bottom: 15px;
}

.mobile-app-page .app-highlight p,
.mobile-app-page .app-highlight li {
  color: rgba(255, 255, 255, 0.9);
}

.mobile-app-page .app-highlight ul {
  display: grid;
  gap: 11px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.mobile-app-page .app-highlight li {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
}

@media (max-width: 991px) {
  .mobile-app-page .app-hero,
  .mobile-app-page .app-showcase {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .mobile-app-page .mobile-app-section {
    padding: 48px 0 58px;
  }

  .mobile-app-page .app-screens {
    grid-template-columns: 1fr;
  }

  .mobile-app-page .app-highlight {
    padding: 26px;
  }
}




.partner-section{
    padding:40px 0;
     overflow:hidden;
}

.partner-hero{
    background:linear-gradient(135deg,#7660db,#4f46e5,#06b6d4);
    border-radius:30px;
    padding:70px;
    color:#fff;
    margin-bottom:80px;
    position:relative;
    overflow:hidden;
}

.partner-hero:before{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-120px;
    right:-120px;
}

.partner-hero h1{
    font-size:56px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:25px;
}

.partner-hero h1 span{
    color: var(--red);
}

.partner-hero p{
    font-size:17px;
    line-height:1.9;
    opacity:.95;
}

.partner-image{
    text-align:center;
}

.partner-image img{
    width:100%;
    max-width:480px;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.25);
}

.partner-actions{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-top:30px;
}

.partner-btn{
    padding:14px 28px;
    border-radius:50px;
    font-weight:600;
    text-decoration:none!important;
    transition:.3s;
}

.partner-btn-primary{
    background:#fff;
    color:#4f46e5!important;
}

.partner-btn-light{
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.2);
    color:#fff!important;
}

.partner-btn:hover{
    transform:translateY(-3px);
}

.partner-section-title{
    text-align:center;
    margin-bottom:50px;
}

.partner-section-title h2{
    font-size:42px;
    font-weight:800;
    color:#1f2937;
}

.partner-section-title p{
    color:#6b7280;
     margin:auto;
	 text-align: center;
}

.partner-card{
    background:#fff;
    border-radius:24px;
    padding: 15px;
    height:100%;
    text-align:center;
    border:1px solid #ebe8ff;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.04);
}

.partner-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(118,96,219,.15);
}

.partner-card-icon{
    width:90px;
    height:90px;
    background:#f3f0ff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
}

.partner-card-icon img{
    width:50px;
    height:50px;
    object-fit:contain;
}

.partner-card h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:15px;
    color:#1f2937;
}

.partner-card p{
    color:#6b7280;
    line-height:1.8;
}

.partner-process{
    margin-top:40px;
}

.partner-step{
    background:#fff;
    border-radius:24px;
    padding: 20px;
    text-align:center;
    position:relative;
    height:100%;
    border:1px solid #ebe8ff;
}

.partner-step strong{
    display:inline-block;
    background:#7660db;
    color:#fff;
    padding:8px 16px;
    border-radius:30px;
    margin-bottom:20px;
    font-size:13px;
}

.partner-step h3{
    font-size:24px;
    font-weight:700;
    color:#1f2937;
}

.partner-step p{
    color:#6b7280;
    line-height:1.8;
}

.partner-highlight{
    margin-top:40px;
    background:#fff;
    border-radius:30px;
    padding:60px;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
}

.partner-highlight h2{
    font-size:40px;
    font-weight:800;
    margin-bottom:20px;
}

.partner-highlight p{
    color:#6b7280;
}

.partner-highlight ul{
    margin-top:25px;
    padding-left:0;
    list-style:none;
}

.partner-highlight ul li{
    padding:12px 0 12px 35px;
    position:relative;
    border-bottom:1px solid #f1efff;
	display: block;
}

.partner-highlight ul li:before{
    content:"✓";
    position:absolute;
    left:0;
    top:12px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#7660db;
    color:#fff;
    text-align:center;
    line-height:24px;
    font-size:12px;
}

.partner-cta{
    margin-top:40px;
    text-align:center;
    padding:70px 40px;
    border-radius:30px;
    background:linear-gradient(135deg,#7660db,#4f46e5,#06b6d4);
    color:#fff;
}

.partner-cta h2{
    font-size:42px;
    font-weight:800;
    margin-bottom:20px;
}

.partner-cta p{
     margin:auto;
    line-height:1.9;
    opacity:.95;
}

.partner-cta .partner-btn-primary{
    background:#fff;
    color:#4f46e5!important;
}

.partner-cta .partner-btn-light{
    background:rgba(255,255,255,.15);
    color:#fff!important;
}

@media(max-width:991px){

    .partner-hero{
        padding:40px;
        text-align:center;
    }

    .partner-hero h1{
        font-size:38px;
    }

    .partner-image{
        margin-top:30px;
    }

    .partner-actions{
        justify-content:center;
    }

    .partner-highlight{
        padding:30px;
    }

    .partner-cta{
        padding:50px 25px;
    }

    .partner-cta h2{
        font-size:30px;
    }

    .partner-section-title h2{
        font-size:32px;
    }
}

.school-erp-demo-page .demo-showcase {
    background: radial-gradient(circle at top left, rgba(236, 50, 55, 0.12), transparent 32%), linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
    padding: 85px 0 95px;
}
.feature-section .feature-box {
display:block;

}


.privacy-hero{
    padding:40px 0 70px;
    background:#f8f9ff;
}

.privacy-badge{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:#ede9fb;
    color:#7660db;
    font-weight:600;
    margin-bottom:20px;
}

.privacy-title{
    font-size:62px;
    font-weight:800;
    color:#1f2937;
}

.privacy-title span{
    background:linear-gradient(
    135deg,
    #7660db,
    #4f46e5,
    #06b6d4
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.privacy-section{
    padding:0 0 100px;
    background:#f8f9ff;
}

.privacy-card,
.policy-card{
    background:#fff;
    border-radius:24px;
    padding:35px;
    margin-bottom:30px;
    border:1px solid #ebe8ff;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.35s;
}

.policy-card{
    display:flex;
    gap:25px;
    align-items:flex-start;
}

.policy-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(118,96,219,.12);
}

.policy-icon{
    width:70px;
    height:70px;
    min-width:70px;
    border-radius:20px;
    background:linear-gradient(
    135deg,
    #7660db,
    #4f46e5
    );
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
}

.policy-heading{
    font-size:28px;
    font-weight:700;
    color:#1f2937;
    margin-bottom:20px;
}

.policy-content p{
    color:#6b7280;
    line-height:1.9;
    margin-bottom:15px;
}

.policy-content ul{
    padding-left:0;
    list-style:none;
}

.policy-content ul li{
    padding:0;
    color:#6b7280;
    border-bottom:1px solid #f1efff;
	display: block;
	margin: 5px 0px;
}

.policy-content ul li i{
    color:#7660db;
    margin-right:10px;
}

.contact-policy-card{
    background:
    linear-gradient(
    135deg,
    rgba(118,96,219,.08),
    rgba(79,70,229,.08)
    );
}

@media(max-width:768px){

    .privacy-title{
        font-size:38px;
    }

    .policy-card{
        flex-direction:column;
    }

    .policy-icon{
        margin-bottom:15px;
    }

    .privacy-card,
    .policy-card{
        padding:25px;
    }
}