:root{
  --primary:#e76732;
  --secondary:#224365;
  --white:#ffffff;
  --text:#1f2937;
  --border:#22436514;
  --shadow:0 8px 24px rgba(34,67,101,.12);
  --shadow-sm:0 4px 12px rgba(34,67,101,.12);
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#fff;color:var(--text);line-height:1.6}
.container{width:92%;max-width:1240px;margin:0 auto}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
/* Topbar */
.topbar{position:sticky;top:0;background:var(--secondary);color:#fff;z-index:1100;transition:transform .25s ease}
.topbar.hide{transform:translateY(-100%)}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;padding:.45rem 0;white-space:nowrap}
.topbar .left{display:flex;gap:1rem}
.topbar .right{display:flex;gap:.5rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:.6rem;border:2px solid transparent;font-weight:700;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}
.btn.white{background:#fff;color:var(--secondary);border-color:#fff}
.btn.sm{padding:.35rem .6rem;font-size:.9rem}
.desktop-only{display:inline-flex}.mobile-only{display:none}
/* Main header */
header.main-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:1000;transition:transform .25s ease, box-shadow .25s ease}
header.main-header.hide{transform:translateY(-100%)}
header.main-header.sticky{box-shadow:var(--shadow)}
.head-row{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;color:var(--secondary)}
.brand img{height:36px;width:auto}
nav.primary{display:flex;align-items:center;gap:1.1rem;font-weight:700}
nav.primary a{padding:.5rem .6rem;border-radius:.5rem;color:var(--secondary)}
nav.primary a:hover{background:rgba(231,103,50,.1);color:var(--primary)}
.menu-toggle{display:none;border:none;background:transparent;color:var(--secondary);font-size:1.7rem;cursor:pointer}
.header-ctas{display:none;gap:.4rem}
.header-ctas a{width:40px;height:40px;border-radius:.6rem;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
/* Hero + slider */
.hero{background:#fff}
.slider{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.slides{display:flex;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.slide{min-width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:3rem 0}
.slide h1{color:var(--secondary);font-size:2.5rem;line-height:1.15;margin:.2rem 0}
.slide p.lead{opacity:.92;margin:.6rem 0 1rem}
.slide .art{aspect-ratio:4/3;border:1px solid var(--border);border-radius:1rem;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--secondary);background:url('../images/hero-banner.png') center/cover no-repeat}
.slider .dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:.4rem}
.slider .dot{width:10px;height:10px;border-radius:50%;background:#e5e7eb;cursor:pointer;border:2px solid #fff}
.slider .dot.active{background:var(--primary)}
/* Sections */
section{padding:2.2rem 0}
.section-title{font-size:1.8rem;color:var(--secondary);text-align:center;margin-bottom:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{border:1px solid var(--border);border-radius:1rem;background:#fff;padding:1rem;box-shadow:var(--shadow-sm)}
.card h3{color:var(--secondary);margin:.25rem 0 .35rem}

/* Blog */
.blog-hero{background:#f7f9fc;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2rem 0}
.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.blog-card{border:1px solid var(--border);border-radius:1rem;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.blog-card .cover{height:160px;background:linear-gradient(135deg,rgba(231,103,50,.2),rgba(34,67,101,.2))}
.blog-card .body{padding:1rem}
.blog-card h3{color:var(--secondary);margin:.2rem 0 .4rem}
.meta{font-size:.85rem;opacity:.7;margin-bottom:.4rem}
.blog-detail{max-width:820px;margin:0 auto}
.blog-detail .cover{height:260px;border-radius:1rem;background:linear-gradient(135deg,rgba(231,103,50,.2),rgba(34,67,101,.2));margin-bottom:1rem}
.blog-detail h1{color:var(--secondary)}
/* Pricing */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.plan{border:2px solid var(--border);border-radius:1rem;padding:1.2rem;background:#fff;box-shadow:var(--shadow-sm)}
.plan.popular{border-color:var(--primary);box-shadow:0 10px 30px rgba(231,103,50,.25)}
.plan h3{color:var(--secondary);margin:0 0 .4rem}
.price{font-size:1.2rem;color:var(--primary);margin:.4rem 0 1rem}
/* Contact */
.form{display:grid;gap:.8rem}
input,textarea{width:100%;padding:.75rem;border-radius:.6rem;border:1px solid var(--border);font:inherit}
textarea{min-height:140px}
/* Footer */
footer{background:#0f172a;color:#e5e7eb;margin-top:2rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;padding:2rem 0}
footer a{color:#cbd5e1}
footer .brand{color:#e2e8f0}
.copy{border-top:1px solid #ffffff14;padding:1rem 0;color:#94a3b8}
/* Floating WhatsApp + live chat button (simple) */
.fab{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:.6rem;z-index:1200}
.fab a{width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);border:1px solid var(--border)}
/* Responsive */
@media (max-width:992px){
  .slide{grid-template-columns:1fr}
  .grid-3,.blog-list,.plan-grid{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
}

/* === v18 overrides: fix mobile topbar, header offset and responsive logo === */

/* Ensure login/register and icon CTAs display on mobile topbar and align to the right */
@media (max-width: 768px) {
  /* Hide the contact text group (phone/email) on mobile */
  .topbar .contact {
    display: none !important;
  }
  /* Show login and register buttons and icons */
  .topbar .cta a.btn {
    display: inline-flex !important;
  }
  .topbar .cta a.icon {
    display: inline-flex !important;
  }
  /* Align the CTA items to the right with spacing */
  .topbar .cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-left: auto;
    width: 100%;
  }
  /* Make the inner container right-aligned */
  .topbar .inner {
    justify-content: flex-end;
  }
  /* Enlarge the logo slightly on mobile for readability */
  .brand img {
    height: 48px !important;
  }
  /* Refine the mobile nav slide-in from right */
  nav.primary {
    right: 0;
    left: auto;
    width: min(80vw, 340px);
    padding-top: 5rem;
    gap: 0;
  }
  /* Indent submenu links */
  nav.primary span.has-sub .sub a {
    padding-left: 1.8rem;
  }
}

/* Enlarge the logo on larger screens for better visibility */
@media (min-width: 769px) {
  .brand img {
    height: 60px !important;
  }
}

/* When the topbar is visible, add an offset to the header to prevent overlap */
header.main-header.offset {
  /* The top value is dynamically set via inline style in JS */
  /* This class exists for clarity and potential future styling */
}

/* === v20: final mobile menu improvements === */
@media (max-width: 768px) {
  /* Force the nav drawer to be off-canvas by default and slide in from the left */
  nav.primary {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    height: 100vh !important;
    width: min(80vw, 340px) !important;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,.15);
    padding: 5rem 1rem 2rem;
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    z-index: 1200 !important;
  }
  nav.primary.open {
    transform: translateX(0) !important;
  }
  nav.primary a {
    width: 100% !important;
    padding: 0.9rem 1rem !important;
    border-bottom: 1px solid var(--border);
    font-size: 1.05rem;
  }
  nav.primary span.has-sub .sub a {
    padding-left: 2rem !important;
  }
  /* Ensure the hamburger icon appears on the right and the logo on the left */
  .menu-toggle {
    display: inline-flex !important;
    order: 2 !important;
    margin-left: auto !important;
    font-size: 1.6rem !important;
    background: transparent !important;
    border: none !important;
    color: var(--secondary) !important;
  }
  .brand {
    order: 1 !important;
  }
}

/* === final v14 mobile header layout fix === */
@media (max-width: 768px) {
  /* Ensure brand appears on the left and the burger menu on the right */
  header.main-header .head-row {
    flex-direction: row;
  }
  header.main-header .head-row .brand {
    order: 1;
    margin-left: 0;
  }
  header.main-header .head-row .menu-toggle {
    order: 2;
    margin-left: auto;
  }
}
@media (max-width:720px){
  .desktop-only{display:none}.mobile-only{display:inline-flex}
  .topbar .left{display:none}
  nav.primary{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--border);flex-direction:column;padding:.7rem .9rem;box-shadow:var(--shadow-sm)}
  nav.primary.open{display:flex}
  .menu-toggle{display:inline-block}
  .header-ctas{display:flex}
  .grid-3,.blog-list,.plan-grid{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
}

/* === v22 final modifications === */
/* Make topbar smaller and login/register with icons */
.topbar .inner {
  padding: 0.25rem 0;
}
.topbar .contact a {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.topbar .contact a .number {
  margin-right: 0.3rem;
}
.topbar .contact a .wa-icon {
  margin-left: 0.2rem;
  height: 16px;
  width: 16px;
}
.topbar .cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topbar .cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.4rem;
}
.topbar .cta a img {
  height: 14px;
  width: 14px;
}
/* On mobile hide contact text and only show CTA icons (login/register plus contact icons) */
@media (max-width: 768px) {
  .topbar .contact {
    display: none;
  }
  .topbar .cta a.login span,
  .topbar .cta a.register span {
    display: none;
  }
  .topbar .cta a {
    padding: 0.3rem 0.4rem;
  }
}
/* Increase logo size for better visibility */
.brand img {
  height: 52px;
}
@media (max-width: 768px) {
  .brand img {
    height: 44px;
  }
}
/* Footer background and colours */
footer {
  background: #FCF3F3;
  color: var(--secondary);
}
footer a {
  color: var(--secondary);
}
footer .copy {
  border-top: 1px solid #EBDADB;
  color: var(--secondary);
}
/* Remove floating action buttons if still present */
.fab {
  display: none !important;
}
/* Hero slider dots larger */
.hero .dot,
.slider .dot {
  width: 12px;
  height: 12px;
}
/* Checklist styling for about page */
.check-list {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}
.check-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--primary);
  font-weight: 700;
}
/* Contact grid responsiveness */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.2rem;
}
.contact-grid .office h4 {
  margin: 0.8rem 0 0.3rem;
  color: var(--secondary);
}
.contact-grid .office p {
  margin: 0 0 0.8rem;
}
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* === v9: HRBlock inspired header + color system === */
:root { --primary: #e76732; --secondary: #224365; }
body { background: #fff; }
/* Topbar: 4 items equally spaced */
.topbar { background: var(--primary); color: #fff; }
.topbar .inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; align-items: center; padding: .35rem 0; }
.topbar a { color: #fff; font-weight: 600; display: flex; justify-content: center; }
@media (max-width: 768px) {
  .topbar .inner { grid-template-columns: repeat(2, 1fr); row-gap: .3rem; }
  .topbar a { font-size: .9rem; }
}
/* Main header */
header.main-header { background: #fff; position: sticky; top: 0; z-index: 1001; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.head-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; gap: .8rem; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--secondary); }
.brand img { height: 32px; }
nav.primary { display: flex; gap: .6rem; }
nav.primary a { padding: .6rem .8rem; border-radius: .5rem; text-transform: lowercase; }
nav.primary a.active { background: rgba(34,67,101,.08); color: var(--secondary); font-weight: 700; }
.menu-toggle { display: none; background: transparent; border: 0; font-size: 1.4rem; }
@media (max-width: 768px) {
  .menu-toggle { display: inline-flex; order: 1; }
  .brand { order: 2; margin-left: auto; }
  nav.primary { position: fixed; left: 0; top: 0; height: 100vh; width: min(80vw, 340px); background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.15); padding: 5rem 1rem 2rem; transform: translateX(-100%); transition: transform .25s ease; flex-direction: column; }
  nav.primary.open { transform: translateX(0); }
  nav.primary a { padding: .9rem 1rem; }
}
/* Buttons and CTA sections */
.btn.primary { background: var(--secondary); color: #fff; }
.btn.ghost { border: 2px solid var(--secondary); color: var(--secondary); background: transparent; }
.cta-section { background: var(--secondary); color: #fff; padding: 2rem 0; }
/* Hero slider styling */
.hero { position: relative; overflow: hidden; }
.hero .slides { display: flex; transition: transform .5s ease; }
.hero .slide { position: relative; display: flex; align-items: center; min-height: 58vh; background-size: cover; background-position: center; }
.hero .slide .overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34,67,101,.65), rgba(34,67,101,.15) 60%); }
.hero .slide .content { position: relative; z-index: 1; color: #fff; max-width: 760px; padding: 2rem; }
.hero .content h1, .hero .content .lead { color: #fff; }
@media (max-width: 900px) { .hero .slide { min-height: 62vh; } .hero .content { padding: 1.25rem; } }

/* === v11 modifications === */
@media (max-width: 768px){
  .topbar .inner{grid-template-columns:1fr 1fr;}
  .topbar .inner a:nth-child(1),
  .topbar .inner a:nth-child(2),
  .topbar .inner a.btn{display:none;}
  .topbar .icons-right{display:flex;justify-content:flex-end;gap:0.6rem;}
  .topbar .icons-right a img{height:18px;width:18px;}
  .brand{order:1;margin-left:0;}
  .menu-toggle{order:2;margin-left:0.6rem;}
  .head-row{flex-direction:row;}
}
@media (min-width: 769px){
  .brand{order:1;}
  nav.primary{order:2;margin-left:auto;}
}


/* === v12 header cleanup === */
/* Topbar styling */
.topbar {
  background: var(--primary);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1100;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.topbar .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.5rem 0;
}

.topbar .contact {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.topbar .contact a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.topbar .contact a img {
  height: 16px;
  width: 16px;
}

.topbar .cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.topbar .cta a.btn {
  background: var(--secondary);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.topbar .cta a.icon {
  display: none;
}

@media (max-width: 768px) {
  .topbar .contact { display: none; }
  .topbar .cta a.btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
  }
  .topbar .cta a.icon {
    display: flex;
    align-items: center;
  }

  /* v16: when contact is hidden on mobile, push the CTA group (login/register + icons) to the right */
  .topbar .cta {
    margin-left: auto;
  }
  /* v16: ensure the inner container aligns items to the right when the left contact group is hidden */
  .topbar .inner {
    justify-content: flex-end;
  }

  /* v16: improve mobile menu item readability and separation */
  nav.primary a {
    font-size: 1.05rem;
    border-bottom: 1px solid var(--border);
    width: 100%;
  }
}

/* v14: enlarge logo for better visibility */
/* v16: enlarge logo further for better visibility */
.brand img {
  height: 48px;
}
@media (max-width: 768px) {
  /* Slightly smaller logo on mobile for proportional look */
  .brand img {
    height: 40px;
  }
}

/* v16: modern mobile navigation styles */
@media (max-width: 768px) {
  header.main-header .head-row {
    display: flex;
    align-items: center;
  }
  header.main-header .brand {
    order: 1;
    margin-left: 0;
  }
  header.main-header .menu-toggle {
    display: inline-flex;
    order: 2;
    margin-left: auto;
    font-size: 1.6rem;
  }
  nav.primary {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: min(80vw, 340px);
    background: #fff;
    padding: 5rem 1rem 2rem;
    box-shadow: 0 0 20px rgba(0,0,0,.15);
    transform: translateX(100%);
    transition: transform .25s ease;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  nav.primary.open {
    transform: translateX(0);
  }
  nav.primary a {
    width: 100%;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 1.05rem;
  }
  nav.primary span.has-sub {
    width: 100%;
  }
  nav.primary span.has-sub > a {
    width: 100%;
  }
  nav.primary span.has-sub .sub {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  nav.primary span.has-sub.open .sub {
    display: flex;
  }
}

/* Main header styling */
header.main-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  color: var(--secondary);
}

.brand img {
  height: 36px;
}

nav.primary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

nav.primary > a,
nav.primary > span > a {
  padding: 0.5rem 0.8rem;
  border-radius: 0.5rem;
  text-transform: lowercase;
  color: var(--secondary);
}

nav.primary > a:hover,
nav.primary > span > a:hover {
  background: rgba(34,67,101,.08);
  color: var(--primary);
}

span.has-sub {
  position: relative;
}

span.has-sub .sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  min-width: 180px;
  padding: 0.3rem 0;
  z-index: 1000;
}

span.has-sub:hover .sub {
  display: block;
}

span.has-sub .sub a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--secondary);
}

span.has-sub .sub a:hover {
  background: rgba(34,67,101,.08);
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--secondary);
}

@media (max-width: 768px) {
  nav.primary {
    position: fixed;
    top: 0;
    right: 0;
    width: 80vw;
    max-width: 340px;
    height: 100vh;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,.15);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    padding: 5rem 1rem 2rem;
    gap: 0;
    z-index: 999;
  }
  nav.primary.open {
    transform: translateX(0);
  }
  nav.primary > a,
  nav.primary > span > a {
    padding: 0.9rem 0;
    width: 100%;
    border-radius: 0;
  }
  nav.primary span.has-sub .sub {
    position: relative;
    top: auto;
    left: auto;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  nav.primary span.has-sub .sub a {
    padding: 0.6rem 1.2rem;
  }
  nav.primary span.has-sub > a::after {
    content: '▶';
    float: right;
    transform: rotate(0);
    transition: transform 0.2s ease;
  }
  nav.primary span.has-sub.open > a::after {
    transform: rotate(90deg);
  }
  nav.primary span.has-sub .sub {
    display: none;
    flex-direction: column;
  }
  nav.primary span.has-sub.open .sub {
    display: flex;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .head-row {
    justify-content: space-between;
  }
}

/* Button container */
.stf-btn-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* Base button style */
.stf-btn {
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

/* Hover effect */
.stf-btn:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

/* 🌐 Mobile phones (small size) */
@media (max-width: 576px) {
  .stf-btn {
    padding: 4px 15px;
    font-size: 14px;
  }
}

/* 📱 Tablets (slightly bigger) */
@media (min-width: 577px) and (max-width: 991px) {
  .stf-btn {
    padding: 4px 15px;
    font-size: 15px;
  }
}

/* 💻 Desktop (medium size) */
@media (min-width: 992px) {
  .stf-btn {
    padding: 5px 20px;
    font-size: 16px;
  }
}

/* Center container */
.paynow-wrapper {
  text-align: center;
  margin: 20px 0;
}

/* Base button styling */
.paynow-btn {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: #0070ba;     /* PayPal Blue */
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: 0.2s ease-in-out;
  text-align: center;
}

/* Mobile (small button) */
@media (max-width: 575px) {
  .paynow-btn {
    padding: 8px 18px;
    font-size: 14px;
  }
}

/* Tablets (medium button) */
@media (min-width: 576px) and (max-width: 991px) {
  .paynow-btn {
    padding: 10px 28px;
    font-size: 15px;
  }
}

/* Desktop (medium) */
@media (min-width: 992px) {
  .paynow-btn {
    padding: 12px 35px;
    font-size: 16px;
  }
}

/* Hover effect */
.paynow-btn:hover {
  background: #005c9a;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}