:root{
    --navy:#0A2463;
    --teal:#00C9B1;
    --gold:#FFD700;
    --white:#FFFFFF;
    --light-gray:#F5F5F5;
    --dark-gray:#333333;
  }
  *{box-sizing:border-box}
  body { margin: 0; font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--dark-gray); background:var(--white); overflow-x:hidden; }
  .container { width:90%; max-width:1200px; margin:0 auto; }

  /* Header */
  header {
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .header-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:90%; }
  .logo img{ height:40px; display:block; }
  .logo-text{ font-weight:700; color:var(--navy); font-size:1.05rem; }

  /* Desktop nav (hidden on small screens) */
  nav.main-nav { display:flex; align-items:center; gap:20px; }
  nav.main-nav .nav-list { display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center; }
  nav.main-nav a { text-decoration:none; color:var(--navy); font-weight:500; padding:6px 4px; }
  nav.main-nav a:hover{ color:var(--teal); }

  .dropdown { position:relative; }
  .dropdown-menu { display:none; position:absolute; top:calc(100% + 3px); left:0; background:var(--white); box-shadow:0 6px 18px rgba(0,0,0,0.08); border-radius:6px; padding:8px 0; min-width:160px; }
  .dropdown-menu li{ list-style:none; }
  .dropdown-menu a{ display:block; padding:8px 14px; color:var(--dark-gray); }
  .dropdown:hover .dropdown-menu{ display:block; }

  /* Auth (kept invisible per original) */
  .auth-buttons { display:flex; gap:10px; align-items:center; }
  .invisible{ color:transparent; background:transparent; border-color:transparent; cursor:default; }

  /* Burger button (mobile) */
  .burger { display:none; cursor:pointer; width:28px; height:22px; background:transparent; border:none; padding:0; }
  .burger span{ display:block; height:3px; width:100%; background:var(--navy); margin-bottom:5px; border-radius:3px; transition: transform .25s ease, opacity .25s ease; }
  .burger span:last-child{ margin-bottom:0; }
  .burger.active span:nth-child(1){ transform: rotate(45deg) translate(4px,4px); }
  .burger.active span:nth-child(2){ opacity:0; transform: translateX(-8px); }
  .burger.active span:nth-child(3){ transform: rotate(-45deg) translate(4px,-4px); }

  /* Slide-in mobile menu */
  .nav-menu {
    position: fixed; top: 0; right: -320px;
    width: 320px; height: 100vh;
    background: var(--navy);
    color: var(--white);
    box-shadow: -8px 0 30px rgba(0,0,0,0.25);
    transition: right 0.28s ease-in-out;
    z-index:1200;
    display:flex; flex-direction:column; padding:1.25rem;
  }
  .nav-menu.active { right: 0; }
  .nav-menu .close-btn { align-self:flex-end; background:none; border:none; color:var(--white); font-size:1.6rem; cursor:pointer; margin-bottom:0.5rem; }
  .nav-menu nav a { color:var(--white); text-decoration:none; padding:12px 0; display:block; border-bottom:1px solid rgba(255,255,255,0.06); font-size:1.05rem; }
  .nav-menu .panel-logo { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .nav-menu .panel-logo img{ height:30px; }

  /* Certificate container */
  #certificate-container {width: 50%; margin:50px auto 24px; text-align:center; display:flex; justify-content:center; align-items:center; padding:14px; }
  .certificate-svg { width:100%; max-width:780px; height:auto; border:1px solid #e6e6e6; border-radius:6px; background:#fff; box-shadow:0 6px 20px rgba(10,18,50,0.04); display:block; }

  .controls { margin-top:20px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .btn-primary { background:var(--gold); color:var(--navy); padding:10px 14px; border-radius:6px; border:none; cursor:pointer; font-weight:600; }
  .cert-btn { background:#fcf6d6; color:var(--navy); border:none; padding:10px 14px; border-radius:6px; cursor:pointer; }

  textarea#embed-code { margin-top:20px; width:50%; height:140px; resize:vertical; }

  /* Footer */
  footer { background:var(--navy); color:var(--white); padding:40px 0 20px; margin-top:40px; }
  footer .container { display:flex; gap:40px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
  .footer-logo img{ height:40px; margin-bottom:8px; }
  .footer-links a{ color:var(--white); text-decoration:none; display:block; margin-bottom:8px; }
  .copyright{ text-align:center; width:100%; margin-top:18px; color:rgba(255,255,255,0.85); }

/**/
/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--navy), var(--teal));
    color: var(--white);
    padding: 80px 0;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-primary, .btn-secondary {
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
}

.btn-primary {
    background: var(--gold);
    color: var(--navy);
}

.cert-btn {
    background: #fcf6d6;
    color: var(--navy);
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

/* Certificate Tiers section*/
.certificate-tiers {
	padding: 80px 0;
	background: var(--white);
}

.tiers-container {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	margin-top: 50px;
}

.tier-card {
	width: 300px;
	padding: 30px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s;
}

.tier-card:hover {
	transform: translateY(-10px);
}

.tier-badge {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 20px;
	font-weight: 600;
	margin-bottom: 20px;
}

.badge-verygood {
	background-color: var(--gold);
	color: var(--navy);
}

.badge-excellent {
	background: linear-gradient(135deg, var(--gold), #FFC000);
	color: var(--navy);
}

.tier-card img {
	width: 100%;
	border-radius: 8px;
	margin: 20px 0;
}

/* How It Works section */
        .how-it-works {
            padding: 80px 0;
            background: var(--light-gray);
        }

        .steps {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 50px;
        }

        .step {
            flex: 1;
            min-width: 250px;
            text-align: center;
            padding: 30px;
            border-radius: 10px;
            background: var(--white);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .step-number {
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            border-radius: 50%;
            background: var(--teal);
            color: var(--white);
            font-weight: 600;
            margin-bottom: 20px;
        }

    /* Features Section */
.features {
    padding: 60px 0;
    background: var(--light-gray);
}

.features h2 {
    text-align: center;
    color: var(--navy);
    margin-bottom: 40px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card .icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.feature-card h3 {
    color: var(--navy);
    margin-bottom: 10px;
}

/* Footer */
footer {
    background: var(--navy);
    color: var(--white);
    padding: 50px 0 20px;
}

.footer-logo img {
    height: 40px;
    margin-bottom: 15px;
}

.footer-links h4, .footer-contact h4 {
    color: var(--gold);
    margin-bottom: 15px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--teal);
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 30px;
}

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

.section-title h2 {
	color: var(--navy);
	font-size: 2.2rem;
	margin-bottom: 15px;
}

.section-title p {
	color: var(--dark-gray);
	max-width: 700px;
	margin: 0 auto;
}

td a {text-decoration: none;}
.contact{color: var(--white); text-decoration: none;}
.contact:hover {
    color: var(--teal);
}

/**/
/* The Visit Counter Badge */
.visit-counter {
  display: inline-flex;
  align-items: center;
  background-color: #f3f4f6; /* Light gray background */
  color: #4b5563; /* Dark gray text */
  padding: 0.25rem 0.75rem;
  border-radius: 9999px; /* Makes it a pill shape */
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

/* Optional: Add a subtle icon before the number */
.visit-counter::before {
  content: "Visits:";
  margin-right: 6px;
  font-size: 1rem;
}

.visit-counter:hover {
  background-color: #e5e7eb;
  color: #111827;
  transform: translateY(-1px);
}

  /* Responsive */
  @media (max-width: 880px){
    nav.main-nav{ display:none; }
    .burger{ display:block; }
    .container { width:90%; }
    textarea#embed-code{ width:100% !important; height:120px; }
    #certificate-container{ width:100%; padding:8px; }
    footer .container{ flex-direction:column; align-items:flex-start; gap:18px; }
    .auth-buttons{ display:none; }
  }

  @media (min-width: 881px){
    .nav-menu{ display:none; }
  }