/* =====================================================
   PERFECTPANEL + SMMJOBZ — FINAL GLOBAL CSS (ALL PAGES)
   Bootstrap 3.3.7 SAFE • Public + Private + Landing
   ✅ ONE :root
   ✅ Desktop + Mobile responsive
   ✅ No navbar gap
   ✅ Sidebar desktop + mobile drawer
   ✅ Equal height border-box (desktop only)
   ✅ FAQ + / − working
   ✅ Footer included
   Paste AFTER Bootstrap + PerfectPanel theme CSS
===================================================== */

/* ===============================
   1) TOKENS (ONE SOURCE OF TRUTH)
=============================== */
:root{
  /* Brand (Pro Blue) */
  --pp-primary:#1d6fd8;
  --pp-primary-2:#56a3ff;
  --pp-primary-dark:#1556a8;

  /* Page */
  --pp-bg:#f4f8ff;
  --pp-card:#ffffff;

  --pp-text:#0b1f3a;
  --pp-muted:#56708f;

  --pp-border:#dbe8fb;
  --pp-border-2:#cfe0fb;

  --pp-radius:14px;
  --pp-radius-sm:10px;

  --pp-shadow:0 18px 55px rgba(10,35,80,.10);
  --pp-shadow-sm:0 10px 28px rgba(10,35,80,.08);
  --pp-focus:0 0 0 3px rgba(29,111,216,.18);

  /* Navbar/Sidebar */
  --pp-navbar-h:56px;
  --pp-brand-img-h:34px;
  --pp-nav-gap:10px;

  --pp-sidebar-w:260px;
  --pp-sidebar-mini:74px;

  /* Landing / Section helpers */
  --section-pad:74px;
  --section-pad-m:54px;

  /* SKY BLUE ICON SYSTEM */
  --sky-grad: linear-gradient(135deg,#38bdf8,#60a5fa);
  --sky-border: rgba(56,189,248,.40);
}

/* ===============================
   2) GLOBAL BASE (SAFE)
=============================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ width:100%; overflow-x:hidden; }

body{
  background:var(--pp-bg);
  color:var(--pp-text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:var(--pp-primary-dark); text-decoration:none; }
a:hover, a:focus{ color:var(--pp-primary); text-decoration:none; }

::selection{ background:rgba(29,111,216,.16); }
hr{ border:0; border-top:1px solid var(--pp-border); }

.text-muted{ color:var(--pp-muted) !important; }

img,video,iframe{ max-width:100%; height:auto; }
pre,code{ white-space:pre-wrap; word-break:break-word; }

/* ===============================
   3) NAVBAR (BS3) — FIXED GAP + HEIGHT
=============================== */
.navbar{ margin-bottom:0 !important; }
.navbar.navbar-default{
  border:none;
  background:#fff;
  min-height:var(--pp-navbar-h) !important;
  box-shadow:0 12px 34px rgba(10,35,80,.08);
  border-radius:0;
}

@media (min-width:768px){
  .navbar.navbar-default .navbar-header{
    display:flex;
    align-items:center;
    min-height:var(--pp-navbar-h);
  }
  .navbar-default .navbar-brand{
    height:var(--pp-navbar-h);
    display:flex;
    align-items:center;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .navbar.navbar-default .navbar-nav > li > a{
    height:var(--pp-navbar-h);
    display:flex;
    align-items:center;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}

.navbar-default .navbar-brand{
  font-weight:950;
  letter-spacing:.2px;
  color:var(--pp-text) !important;
}
.navbar-default .navbar-brand img{
  height:var(--pp-brand-img-h);
  width:auto;
  display:block;
}

.navbar.navbar-default .navbar-collapse{ min-height:var(--pp-navbar-h); }
.navbar.navbar-default .navbar-nav{ margin-top:0; margin-bottom:0; }
.navbar.navbar-default .navbar-nav > li{ margin-left:var(--pp-nav-gap); }

.navbar.navbar-default .navbar-nav > li > a{
  font-weight:850;
  color:var(--pp-text);
  background:transparent;
}
.navbar.navbar-default .navbar-nav > li > a:hover{
  color:var(--pp-primary-dark);
  background:transparent;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus{
  color:var(--pp-primary-dark);
  background:transparent;
}

.navbar-default .navbar-nav > li > a .navbar-icon{
  margin-right:8px;
  color:var(--pp-primary-dark);
}

.navbar-default .navbar-toggle{
  border:none;
  margin:10px 8px;
  border-radius:12px;
}
.navbar-default .navbar-toggle:hover{ background:rgba(29,111,216,.08); }
.navbar-default .navbar-toggle:focus{ outline:none; box-shadow:var(--pp-focus); }
.navbar-default .navbar-toggle .icon-bar{ background:var(--pp-primary-dark); }

.navbar-default .dropdown-menu{
  border:1px solid var(--pp-border);
  border-radius:14px;
  box-shadow:var(--pp-shadow);
  padding:6px;
}
.navbar-default .dropdown-menu > li > a{
  border-radius:10px;
  padding:8px 10px;
  font-weight:850;
  color:var(--pp-text);
}
.navbar-default .dropdown-menu > li > a:hover{ background:rgba(29,111,216,.08); }

.badge{
  background:linear-gradient(135deg, var(--pp-primary), var(--pp-primary-2));
  border-radius:999px;
  font-weight:950;
}

/* ===============================
   4) LAYOUT WRAPPERS (OPTIONAL)
=============================== */
.pp-shell{ min-height:100vh; }
.pp-row{ display:table; width:100%; table-layout:fixed; }
.pp-col-sidebar, .pp-col-main{ display:table-cell; vertical-align:top; }
.pp-col-sidebar{ width:var(--pp-sidebar-w); }
.pp-col-main{ width:auto; }

/* ===============================
   5) SIDEBAR (PRO)
=============================== */
.pp-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(86,163,255,.22), rgba(86,163,255,0) 60%),
    linear-gradient(180deg, rgba(29,111,216,.10), rgba(255,255,255,0) 36%),
    linear-gradient(135deg, #ffffff, #f7fbff);
  border-right:1px solid var(--pp-border);
  padding:18px 14px;
}

.pp-sidebrand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 16px;
  border-bottom:1px solid var(--pp-border);
  margin-bottom:14px;
}

.pp-sidebrand .pp-logo{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--pp-primary), var(--pp-primary-2));
  box-shadow:0 14px 30px rgba(29,111,216,.22);
  overflow:hidden;
  position:relative;
}
.pp-sidebrand .pp-logo:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.pp-sidebrand .pp-logo img{ max-width:100%; max-height:100%; display:block; }

.pp-sidebrand .pp-brandtxt strong{
  display:block;
  font-size:14px;
  font-weight:950;
  letter-spacing:.25px;
  color:var(--pp-text);
}
.pp-sidebrand .pp-brandtxt span{
  display:block;
  font-size:12px;
  color:var(--pp-muted);
  font-weight:700;
}

.pp-sidegroup-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--pp-muted);
  margin:16px 10px 8px;
  font-weight:900;
}

.pp-sidenav{ margin:0; padding:0; list-style:none; }
.pp-sidenav > li{ margin:6px 0; }

.pp-sidenav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--pp-text);
  border:1px solid transparent;
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.pp-sidenav a:before{
  content:"";
  width:4px;
  height:18px;
  border-radius:99px;
  background:transparent;
  display:inline-block;
}
.pp-sidenav i{
  width:18px;
  text-align:center;
  color:var(--pp-primary);
}
.pp-sidenav a:hover{
  background:#fff;
  border-color:var(--pp-border);
  box-shadow:var(--pp-shadow-sm);
  transform:translateY(-1px);
}
.pp-sidenav .pp-active > a{
  background:linear-gradient(135deg, rgba(29,111,216,.14), rgba(86,163,255,.10));
  border-color:var(--pp-border-2);
  box-shadow:0 10px 24px rgba(10,35,80,.06);
}
.pp-sidenav .pp-active > a:before{
  background:linear-gradient(180deg, var(--pp-primary), var(--pp-primary-2));
}

.pp-sidecard{
  margin:14px 10px 0;
  padding:12px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--pp-border);
  box-shadow:var(--pp-shadow-sm);
}
.pp-sidecard .pp-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(29,111,216,.10);
  color:var(--pp-primary-dark);
  font-weight:950;
  font-size:12px;
}
.pp-sidecard p{
  margin:10px 0 0;
  color:var(--pp-muted);
  font-size:12px;
  line-height:1.55;
  font-weight:700;
}

/* Main */
.pp-main{ padding:18px 18px 0; }
.pp-content-wrap{ padding:0 0 18px; }

/* ===============================
   6) GLOBAL COMPONENTS (ALL PAGES)
=============================== */
.panel,
.well{
  border-radius:var(--pp-radius);
  border:1px solid var(--pp-border);
  box-shadow:var(--pp-shadow-sm);
  background:var(--pp-card);
}
.panel-heading{
  border-top-left-radius:var(--pp-radius);
  border-top-right-radius:var(--pp-radius);
  background:linear-gradient(135deg, rgba(29,111,216,.08), rgba(86,163,255,.06));
  border-bottom:1px solid var(--pp-border);
}
.panel-title{
  font-weight:950;
  color:var(--pp-text);
  letter-spacing:.2px;
}

.alert{
  border-radius:var(--pp-radius);
  border:1px solid var(--pp-border);
  box-shadow:var(--pp-shadow-sm);
}

label{ font-weight:900; color:var(--pp-text); }

.form-control{
  border-radius:12px;
  border:1px solid var(--pp-border);
  box-shadow:none;
  height:42px;
}
.form-control:focus{
  border-color:var(--pp-border-2);
  box-shadow:var(--pp-focus);
}
textarea.form-control{ height:auto; }

.btn{
  border-radius:12px;
  font-weight:950;
  letter-spacing:.2px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:focus{ outline:none; box-shadow:var(--pp-focus); }

.btn-primary{
  border:none;
  background:linear-gradient(135deg, var(--pp-primary), var(--pp-primary-2));
  box-shadow:0 12px 26px rgba(29,111,216,.22);
}
.btn-primary:hover,
.btn-primary:focus{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(29,111,216,.26);
}

.btn-default{
  border:1px solid var(--pp-border);
  background:#fff;
  color:var(--pp-text);
}
.btn-default:hover,
.btn-default:focus{
  transform:translateY(-1px);
  box-shadow:var(--pp-shadow-sm);
}

.table{
  background:#fff;
  border-radius:var(--pp-radius);
  overflow:hidden;
}
.table > thead > tr > th{
  background:linear-gradient(135deg, rgba(29,111,216,.08), rgba(86,163,255,.06));
  border-bottom:1px solid var(--pp-border);
  color:var(--pp-text);
  font-weight:950;
}
.table > tbody > tr > td{ border-top:1px solid rgba(219,232,251,.75); }
.table-hover > tbody > tr:hover{ background:rgba(29,111,216,.06); }
.table-responsive{ border:none; }

/* ===============================
   7) WEBSITE SECTIONS (PUBLIC + LANDING)
=============================== */
.section-padding{ padding:var(--section-pad) 0; }
@media (max-width:767px){ .section-padding{ padding:var(--section-pad-m) 0; } }

.section-title{
  font-weight:950;
  color:var(--pp-text);
  letter-spacing:-.4px;
  margin:0 0 10px;
}
.section-subtitle{
  max-width:760px;
  margin:0 auto;
  color:var(--pp-muted);
  font-size:16px;
  line-height:1.7;
}
.lead{ line-height:1.75; }

/* HERO TEXT SAFETY (for gradient backgrounds) */
#hero, .hero-section{ color:#fff; }
#hero h1, #hero .hero-title{ color:#fff !important; }
#hero p, #hero .hero-text{ color:rgba(255,255,255,.92) !important; }

#hero{ position:relative; overflow:hidden; }
#hero:before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(circle at 80% 26%, rgba(255,255,255,.14), transparent 42%),
    radial-gradient(circle at 40% 90%, rgba(255,255,255,.10), transparent 45%);
  pointer-events:none;
}
#hero .container{ position:relative; z-index:2; }

.hero-img{
  border-radius:var(--pp-radius);
  box-shadow:var(--pp-shadow);
}

/* ===============================
   8) BORDER-BOX (ALL SECTIONS)
=============================== */
.border-box{
  background:#fff;
  border:1px solid rgba(219,232,251,.95);
  border-radius:var(--pp-radius);
  padding:22px;
  box-shadow:var(--pp-shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.border-box:hover{
  transform:translateY(-3px);
  box-shadow:var(--pp-shadow);
  border-color:var(--pp-border-2);
}
.border-box h3,
.border-box h4{
  margin:12px 0 8px;
  font-weight:950;
  color:var(--pp-text);
  letter-spacing:-.2px;
}
.border-box p{
  margin:0;
  color:var(--pp-muted);
  line-height:1.75;
}

/* ✅ Equal height only on desktop (safe) */
@media (min-width:768px){
  .row.equal-boxes{
    display:flex;
    flex-wrap:wrap;
    margin-left:-15px;
    margin-right:-15px;
  }
  .row.equal-boxes:before,
  .row.equal-boxes:after{ content:none; }
  .row.equal-boxes > [class*="col-"]{
    float:none !important;
    display:flex;
    flex-direction:column;
  }
  .row.equal-boxes > [class*="col-"] .border-box,
  .row.equal-boxes > [class*="col-"] .stat-box{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
  }
  .row.equal-boxes > [class*="col-"] .border-box p:last-child{
    margin-top:auto; /* ✅ only last paragraph pushes */
  }
}
.row.equal-boxes > [class*="col-"]{ margin-bottom:24px; }

/* ===============================
   9) SKY BLUE ICONS (ALL ICON-CIRCLE)
=============================== */
.icon-circle{
  width:54px;
  height:54px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;

  background:var(--sky-grad);
  border:1px solid var(--sky-border);
  box-shadow:0 12px 28px rgba(56,189,248,.22);
}
.icon-circle i{ font-size:22px; color:#fff; }
.border-box:hover .icon-circle{
  box-shadow:0 18px 40px rgba(96,165,250,.28);
  transform:translateY(-1px);
}

/* ===============================
   10) FAQ (BOOTSTRAP 3.3.7) — + / − ICON
=============================== */
#faq{ padding:var(--section-pad) 0; }
@media (max-width:767px){ #faq{ padding:var(--section-pad-m) 0; } }

#faq #faqAccordion{ margin:0; }

#faq #faqAccordion .panel{
  border-radius:var(--pp-radius);
  overflow:hidden;
  border:1px solid rgba(219,232,251,.95);
  box-shadow:var(--pp-shadow-sm);
  background:#fff;
  margin-bottom:14px;
}
#faq #faqAccordion .panel-heading{
  background:#fff;
  border-bottom:1px solid rgba(219,232,251,.75);
  padding:0;
}
#faq #faqAccordion .panel-title{
  margin:0;
  font-size:16px;
  font-weight:950 !important;
}
#faq #faqAccordion .panel-title > a.faq-toggle{
  display:block;
  position:relative;
  padding:16px 56px 16px 18px;
  color:var(--pp-text);
  text-decoration:none;
  line-height:1.35;
}
#faq #faqAccordion .panel-title > a.faq-toggle:hover{
  background:rgba(56,189,248,.08);
  color:var(--pp-primary-dark);
}
#faq #faqAccordion .panel-title > a.faq-toggle:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(56,189,248,.18);
}
#faq #faqAccordion .panel-body{
  padding:16px 18px;
  color:var(--pp-muted);
  line-height:1.8;
  border-top:0;
}
#faq #faqAccordion .faq-icon{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--sky-grad);
  border:1px solid var(--sky-border);
  color:#fff;

  font-size:18px;
  font-weight:950;
  line-height:1;
  box-shadow:0 10px 22px rgba(56,189,248,.20);
}
#faq #faqAccordion a.faq-toggle.collapsed .faq-icon:before{ content:"+"; }
#faq #faqAccordion a.faq-toggle:not(.collapsed) .faq-icon:before{ content:"−"; }
#faq #faqAccordion a.faq-toggle:not(.collapsed){ background:rgba(56,189,248,.08); }

/* ===============================
   11) SIDEBAR TOGGLE (DESKTOP MINI + MOBILE DRAWER)
=============================== */
.pp-side-toggle{
  border:0;
  background:transparent;
  padding:10px 10px;
  margin:8px 6px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.pp-side-toggle:hover{ background:rgba(29,111,216,.08); }
.pp-side-toggle:focus{ outline:none; box-shadow:var(--pp-focus); }
.pp-side-toggle:active{ transform:scale(.98); }

.pp-bars{
  width:20px;
  height:14px;
  position:relative;
  display:inline-block;
}
.pp-bars:before,
.pp-bars:after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--pp-primary-dark);
  border-radius:2px;
  transition:transform .18s ease, top .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.pp-bars:before{ top:2px; box-shadow:0 4px 0 var(--pp-primary-dark); }
.pp-bars:after{ top:10px; }

body.pp-sidebar-open .pp-bars:before,
body.pp-sidebar-collapsed .pp-bars:before{ top:6px; box-shadow:none; transform:rotate(45deg); }
body.pp-sidebar-open .pp-bars:after,
body.pp-sidebar-collapsed .pp-bars:after{ top:6px; transform:rotate(-45deg); }

/* Desktop mini */
body.pp-sidebar-collapsed .pp-col-sidebar{ width:var(--pp-sidebar-mini) !important; }
body.pp-sidebar-collapsed .pp-sidebar{ padding:14px 10px; }
body.pp-sidebar-collapsed .pp-sidebrand .pp-brandtxt,
body.pp-sidebar-collapsed .pp-sidenav span,
body.pp-sidebar-collapsed .pp-sidegroup-title,
body.pp-sidebar-collapsed .pp-sidecard{ display:none !important; }
body.pp-sidebar-collapsed .pp-sidenav a{ justify-content:center; }
body.pp-sidebar-collapsed .pp-sidenav i{ width:auto; }

/* Overlay */
.pp-sidebar-overlay{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(10,35,80,.35);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
  z-index:1200;
}
body.pp-sidebar-open .pp-sidebar-overlay{
  opacity:1;
  visibility:visible;
}

/* ===============================
   12) FOOTER — BS3 (PRO BLUE VIBE)
=============================== */
.footer-bs3{
  background:#ffffff;
  border-top:1px solid rgba(219,232,251,.95);
  padding:46px 0 20px;
  margin-top:40px;
}
.footer-bs3 h5{
  margin:0 0 14px;
  font-weight:950;
  color:#0b1f3a;
  font-size:15px;
  letter-spacing:.2px;
}
.footer-bs3 p{
  color:#56708f;
  line-height:1.7;
  margin:0;
  font-size:13px;
}
.footer-bs3 ul{ list-style:none; padding:0; margin:0; }
.footer-bs3 ul li{ margin:0 0 9px; }
.footer-bs3 ul li a{
  color:#56708f;
  font-weight:800;
  text-decoration:none;
  transition:color .15s ease;
}
.footer-bs3 ul li a:hover{ color:#1d6fd8; }

.footer-bs3 .footer-divider{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(219,232,251,.85);
}
.footer-bs3 .footer-payments i{
  font-size:18px;
  margin-right:10px;
  color:#1d6fd8;
}
.footer-bs3 .footer-icons a{
  display:inline-block;
  width:34px;
  height:34px;
  line-height:34px;
  text-align:center;
  border-radius:999px;
  margin-right:8px;
  background:var(--sky-grad);
  border:1px solid var(--sky-border);
  box-shadow:0 10px 22px rgba(56,189,248,.20);
  color:#fff;
  transition:transform .12s ease, box-shadow .12s ease;
}
.footer-bs3 .footer-icons a:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(56,189,248,.26);
  color:#fff;
}
.footer-bs3 .btn-footer{
  display:inline-block;
  width:100%;
  max-width:220px;
  padding:12px 14px;
  border-radius:12px;
  text-align:center;
  font-weight:950;
  color:#fff !important;
  text-decoration:none;
  background:var(--sky-grad);
  border:1px solid var(--sky-border);
  box-shadow:0 14px 28px rgba(56,189,248,.22);
}
.footer-bs3 .btn-footer:hover{
  box-shadow:0 18px 34px rgba(56,189,248,.28);
  transform:translateY(-1px);
}

/* =====================================================
   13) MOBILE RESPONSIVE (ALL PERFECTPANEL PAGES)
   Bootstrap 3.3.7 SAFE • MOBILE ONLY (<=767px)
===================================================== */
@media (max-width:767px){

  /* stop overflow */
  html,body{ overflow-x:hidden !important; }

  /* keep BS3 grid */
  .container{ padding-left:15px !important; padding-right:15px !important; }
  .row{ margin-left:-15px !important; margin-right:-15px !important; }
  [class*="col-"]{ padding-left:15px !important; padding-right:15px !important; }

  /* navbar mobile */
  .navbar-header{ float:none !important; }
  .navbar-toggle{ display:block !important; }
  .navbar-collapse{
    border-top:1px solid rgba(219,232,251,.85) !important;
    max-height:70vh !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .navbar-nav{ float:none !important; margin:8px 0 !important; }
  .navbar-nav>li{ float:none !important; }
  .navbar-nav>li>a{
    height:auto !important;
    padding:12px 12px !important;
    border-radius:12px !important;
  }

  /* BS3 dropdown fix */
  .navbar-nav .open .dropdown-menu{
    position:static !important;
    float:none !important;
    width:auto !important;
    margin:6px 0 10px !important;
    padding:6px !important;
    border:1px solid rgba(219,232,251,.85) !important;
    border-radius:12px !important;
    box-shadow:none !important;
    background:#fff !important;
  }
  .navbar-nav .open .dropdown-menu>li>a{
    padding:10px 10px !important;
    border-radius:10px !important;
  }

  /* dashboard layout */
  .pp-row{ display:block !important; }
  .pp-col-sidebar,
  .pp-col-main{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  /* drawer sidebar */
  .pp-sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:84% !important;
    max-width:320px !important;
    height:auto !important;
    transform:translateX(-105%) !important;
    transition:transform .18s ease !important;
    z-index:1300 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  body.pp-sidebar-open .pp-sidebar{ transform:translateX(0) !important; }
  body.pp-sidebar-collapsed .pp-col-sidebar{ width:100% !important; }

  .pp-main{ padding:14px 12px 0 !important; }
  .pp-content-wrap{ padding-bottom:14px !important; }

  /* hero + sections */
  #hero,.hero-section{ padding-top:70px !important; padding-bottom:40px !important; }
  .section-padding{ padding:54px 0 !important; }

  /* typography */
  h1,.section-title{ font-size:26px !important; line-height:1.2 !important; }
  h2{ font-size:22px !important; }
  h3{ font-size:18px !important; }
  p,.lead{ font-size:14px !important; }

  /* boxes + icons */
  .border-box{ padding:18px !important; margin-bottom:16px !important; }
  .icon-circle{ width:48px !important; height:48px !important; }
  .icon-circle i{ font-size:20px !important; }

  /* forms */
  .form-control{ height:44px !important; font-size:14px !important; }
  textarea.form-control{ height:auto !important; }

  /* tables */
  .table-responsive{
    border:0 !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .table{ min-width:650px; }
  .table>thead>tr>th,
  .table>tbody>tr>td{ white-space:nowrap !important; }

  /* faq mobile */
  #faq #faqAccordion .panel-title > a.faq-toggle{
    padding:14px 52px 14px 14px;
    font-size:15px;
  }
  #faq #faqAccordion .faq-icon{
    width:30px;
    height:30px;
    right:12px;
  }

  /* footer mobile */
  .footer-bs3{ padding:38px 0 18px; }
  .footer-bs3 .col-sm-6{ margin-bottom:18px; }
  .footer-bs3 .footer-right-lg{ margin-top:10px; }
  .footer-bs3 .btn-footer{ max-width:100%; }
}

/* ===============================
   STATS BOX (BS3) — for your numbers
   Works with: .stat-box + .stat-number
=============================== */

.stat-box{
  background:#fff;
  border:1px solid rgba(219,232,251,.95);
  border-radius:var(--pp-radius);
  padding:22px 18px;
  box-shadow:var(--pp-shadow-sm);
  text-align:center;
  font-weight:900;
  color:var(--pp-muted);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stat-number{
  font-size:34px;
  font-weight:950;
  letter-spacing:-.4px;
  color:var(--pp-text);
  margin:0 0 6px;
  line-height:1.1;
}

/* hover pro */
.stat-box:hover{
  transform:translateY(-2px);
  box-shadow:var(--pp-shadow);
  border-color:var(--pp-border-2);
}

/* mobile */
@media (max-width:767px){
  .stat-box{ padding:18px 14px; }
  .stat-number{ font-size:30px; }
}