body { background: #f5f4f1; color: #222; }
  .site-banner {
    background: #1f2430;
    color: #fff;
    padding: 3rem 0 2.5rem;
    margin-bottom: 2.5rem;
  }
  .site-banner h1 { font-weight: 700; letter-spacing: .5px; }
  .site-banner p { color: #c7cad1; margin-bottom: 0; }
  .navbar-brand { font-weight: 700; }

  .tutorial-card {
    border: 1px solid #eceae5;
    border-radius: .5rem;
    background: #fff;
    padding: 1rem;
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
  }
  .tutorial-card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); transform: translateY(-2px); }
  .tutorial-thumb {
    width: 64px;
    height: 84px;
    background: #f1efe9;
    border: 1px solid #e4e1d8;
    border-radius: .25rem;
    flex-shrink: 0;
  }
  .tutorial-title a {
    color: #1f2430;
    font-weight: 700;
    text-decoration: none;
  }
  .tutorial-title a:hover { color: #fe6619; }
  .tutorial-price { font-weight: 700; color: #1f2430; white-space: nowrap; }
  .tutorial-meta { color: #6c757d; font-size: .8rem; }
  .tutorial-meta .fa-check-circle { color: #2e9e5b; }

  footer { padding: 2rem 0; color: #8a8a8a; font-size: .85rem; }
  /* =========================================================
   Tutorial Card
   ========================================================= */

.tutorial-card {
    display: flex;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
}

.tutorial-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}


/* =========================================================
   Document Thumbnail
   ========================================================= */

.tutorial-thumb {
    width: 100px;
    height: 110px;

    min-width: 100px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef5ff;
    border: 1px solid #d7e6ff;
    border-radius: 6px;

    overflow: hidden;
}


/* Font Awesome 5 document icon */

.tutorial-thumb i {
      font-size: 46px;
    line-height: 1;
    color: #75818d;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   Tutorial Content
   ========================================================= */

.tutorial-title {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
    margin: 0;
}

.tutorial-title a {
    color: #212529;
    text-decoration: none;
}

.tutorial-title a:hover {
    color: #007bff;
}


/* =========================================================
   Price
   ========================================================= */

.tutorial-price {
    font-size: 14px;
 
    color: #007bff;
    white-space: nowrap;
}


/* =========================================================
   Tutorial Meta
   ========================================================= */

.tutorial-meta {
    margin-top: 8px;
    font-size: 12px;
    color: #6c757d;
}

.tutorial-meta i {
    color: #28a745;
    margin-right: 4px;
}


/* =========================================================
   Banner
   ========================================================= */

.site-banner {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 35px 0;
    margin-bottom: 30px;
}

.site-banner h1 {
    margin: 0 0 5px;
    font-size: 30px;
    font-weight: 700;
}

.site-banner p {
    margin: 0;
    color: #6c757d;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 575.98px) {

    .tutorial-card {
        padding: 10px;
    }

    .tutorial-thumb {
        width: 85px;
        height: 95px;
        min-width: 85px;
    }

    .tutorial-thumb i {
        font-size: 65px;
    }

    .tutorial-title {
        font-size: 14px;
    }

    .tutorial-price {
        font-size: 13px;
    }
       .navbar-collapse {
  
    background: #202074  !important;
    padding-right: 10px;
    
}

}

#mainNavbar {
  --nav-bg: transparent;
  --nav-text: #1a1a1a;
  --btn-bg: #6c5ce7;
  --btn-text: #ffffff;

  background: var(--nav-bg);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  padding: 1rem 0;
}

#mainNavbar .navbar-brand,
#mainNavbar .nav-link {
  color: var(--nav-text);
  transition: color 0.3s ease;
}

#mainNavbar .btn-register {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
}

/* Scrolled state */
#mainNavbar.navbar-scrolled {
  --nav-bg: #1266c0;   /* match your blue */
  --nav-text: #ffffff;
  --btn-bg: #6c5ce7;
  --btn-text: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.site-footer {
  font-size: 0.95rem;
}

/* Top dark-navy section */
.footer-top {
  background-color: #0a0f2c;
  color: #ffffff;
  padding: 3.5rem 0 3rem;
}

.footer-heading {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.footer-about {
  color: #8a8fa3;
  line-height: 1.7;
  margin: 0;
}

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

.footer-links li {
  margin-bottom: 0.85rem;
}

.footer-links a {
  color: #8a8fa3;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #ffffff;
}

.payment-badge {
  background: #ffffff;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: inline-block;
}

.paypal-row {
  font-weight: 700;
  font-size: 1.1rem;
  color: #003087;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.cards-row img {
  height: 28px;
  margin-right: 6px;
}

/* Navy SEO links strip */
.footer-links-strip {
  background-color: #101a4a;
  color: #ffffff;
  padding: 2.5rem 0;
}

.footer-strip-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-strip-list li {
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.footer-strip-list a {
  color: #ffffff;
  text-decoration: none;
}

.footer-strip-list a:hover {
  text-decoration: underline;
}

.chevrons {
  color: #6c8cff;
  font-weight: 700;
}

/* Bottom copyright bar */
.footer-bottom {
  background-color: #0a0f2c;
  color: #8a8fa3;
  padding: 1rem 0;
  font-size: 0.85rem;
}
/* ==========================================================================
   Fancy hero banner  —  <header class="site-banner home_hero_banner">
   Pure CSS: no extra HTML or images needed.
   Re-theme it by changing the four colour variables below.
   ========================================================================== */

.site-banner.home_hero_banner {
    --banner-dark:  #0f172a;   /* base background            */
    --banner-mid:   #312e81;   /* base gradient end          */
    --banner-a:     #7c3aed;   /* violet glow                */
    --banner-b:     #06b6d4;   /* cyan glow / accent         */
    --banner-c:     #ec4899;   /* pink glow                  */

    position: relative;
    isolation: isolate;                 /* keeps the glow layers behind the text */
    overflow: hidden;
    padding: clamp(4rem, 10vw, 7.5rem) 0 clamp(5rem, 12vw, 9rem);
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--banner-dark) 0%, #1e1b4b 50%, var(--banner-mid) 100%);

    /* gently curved bottom edge */
    clip-path: ellipse(140% 100% at 50% 0%);
}

/* Layer 1: soft, slowly drifting colour glows */
.site-banner.home_hero_banner::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -2;
    background:
        radial-gradient(40% 50% at 20% 30%, rgba(124, 58, 237, .55), transparent 70%),
        radial-gradient(35% 45% at 80% 20%, rgba(6, 182, 212, .45), transparent 70%),
        radial-gradient(45% 55% at 60% 90%, rgba(236, 72, 153, .35), transparent 70%);
    filter: blur(30px);
    animation: banner-drift 18s ease-in-out infinite alternate;
}

/* Layer 2: fine grid that fades out towards the edges */
.site-banner.home_hero_banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.site-banner.home_hero_banner .container {
    position: relative;
    z-index: 1;
}

/* Heading: gradient text with a glowing underline bar */
.site-banner.home_hero_banner h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    background: linear-gradient(90deg, #ffffff 0%, #c7d2fe 50%, #67e8f9 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: banner-rise .8s ease-out both;
}

.site-banner.home_hero_banner h1::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin: 1.1rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--banner-b), var(--banner-a));
    box-shadow: 0 0 18px rgba(103, 232, 249, .6);
}

/* Sub-text */
.site-banner.home_hero_banner p {
    max-width: 38rem;
    margin: 0 auto;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.6;
    color: rgba(226, 232, 240, .85);
    animation: banner-rise .8s .15s ease-out both;
}

/* Animations */
@keyframes banner-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1)    rotate(0deg); }
    100% { transform: translate3d(3%, 3%, 0)   scale(1.12) rotate(6deg); }
}

@keyframes banner-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .site-banner.home_hero_banner::before,
    .site-banner.home_hero_banner h1,
    .site-banner.home_hero_banner p {
        animation: none;
    }
}

.home_solutions nav a{
    color:white !important;
}

.page-link {
     background-color: #2196F3  !important;
    border: 1px solid #dee2e6;
}

.page-item.disabled .page-link {
    color: #000 !important; 
}

.navbar-light .navbar-toggler {
    
  background: #b0b8bf !important;
    margin-bottom: 10px;
    margin-right: 10px;
}

#mainNavbar .navbar-brand, #mainNavbar .nav-link {
      margin-left: 9px;
}