.faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.3s ease;
        }

        .faq-answer.open {
            max-height: 300px;
            padding-bottom: 16px;
        }

        .faq-answer p {
            margin: 0;
        }

        .faq-icon {
            transition: transform 0.3s ease;
        }

        .faq-icon.rotate-180 {
            transform: rotate(180deg);
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease forwards;
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
    
body{font-family:Inter,sans-serif}.hub{max-width:1280px;margin:auto;padding:0 24px}.hero{background:linear-gradient(120deg,#10184e,#20356c);padding:64px 0;color:white}.hero h1{font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1.2;margin:14px 0}.hero p{max-width:690px;line-height:1.8;color:#dde4f4}.badge{font-size:12px;letter-spacing:2px;font-weight:700}.search{margin-top:28px;background:white;border-radius:10px;max-width:650px;display:flex;align-items:center;padding:0 18px;color:#10184e}.search input{width:100%;padding:18px;border:0;outline:none;color:#10184e}.search:focus-within{outline:3px solid #ff0030}.filters{display:flex;flex-wrap:wrap;gap:10px;padding:24px 0}.filters button,.pages button{border:1px solid #dfe3ee;border-radius:24px;padding:10px 18px;font-size:13px;font-weight:700;background:white}.filters button.active,.pages button.active{background:#ff0030;color:white;border-color:#ff0030}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:30px;padding:15px 0 60px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.card,.widget{border:1px solid #e4e7ef;border-radius:14px;background:white;overflow:hidden}.card img{height:210px;width:100%;object-fit:cover;background:#edf0f7}.card-body{padding:24px}.card h3{font-size:20px;line-height:1.45;font-weight:700;color:#10184e;margin:10px 0}.card p,.widget p{font-size:14px;line-height:1.75;color:#64748b}.category{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#ff0030}.read{display:inline-block;margin-top:18px;color:#ff0030;font-size:14px;font-weight:700}.widget{padding:25px;margin-bottom:22px}.widget h2{font-size:21px;font-weight:800;color:#10184e;margin-bottom:10px}.cta{display:block;text-align:center;background:#ff0030;color:white;padding:13px 16px;border-radius:8px;font-weight:700;font-size:14px;margin-top:20px}.trending a{display:block;padding:13px 0;border-bottom:1px solid #edf0f7;color:#10184e;font-size:14px;font-weight:600}.pages{display:flex;gap:8px;justify-content:center;margin-top:28px}.empty{padding:35px;background:#f7f8fc;border-radius:12px;grid-column:1/-1}.grid-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:15px}.grid-title h2{font-size:27px;font-weight:800;color:#10184e}.grid-title span{font-size:13px;color:#64748b}@media(max-width:950px){.layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:20px}.widget{margin:0}}@media(max-width:620px){.grid,.sidebar{grid-template-columns:1fr}.hero{padding:42px 0}.hub{padding:0 18px}.grid-title{align-items:flex-start;flex-direction:column}}
/* ================================================================

   RIYO ADVERTISING — BANGALORE SMM BLOG PAGE

   Blog layout: Article ↔ Banner alternating

   All !important to beat Tailwind resets

================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');



html, body {

  overflow-x: hidden !important;

  max-width: 100vw !important;

}



:root {

  --red: #ff0030;

  --red-dark: #2547a0;

  --red-deep: #0096f0;

  --navy: #10184e;

  --navy-mid:  #1e293b;

  --muted:     #64748b;

  --border:    #e2e8f0;

  --offwhite:  #f8fafc;

  --gold:      #f59e0b;

  --white:     #ffffff;

}



.sp-wrap, .sp-wrap * {

  box-sizing: border-box !important;

  font-family: 'Inter', 'Outfit', sans-serif !important;

}

.sp-wrap {

  padding-top: 68px !important;

  background: #ffffff !important;

  color: var(--navy) !important;

  overflow-x: hidden !important;

  max-width: 100% !important;

}



/* ── Container ─────────────────────────── */

.sp-con {

  max-width: 1600px !important;

  margin: 0 auto !important;

  padding: 0 48px !important;

  box-sizing: border-box !important;

}

.sp-con-narrow {

  max-width: 1280px !important;

  margin: 0 auto !important;

  padding: 0 48px !important;

  box-sizing: border-box !important;

}



/* ══════════════════════════════════════════

   HERO

══════════════════════════════════════════ */

.rp-hero {

  background: #ffffff !important;

  position: relative !important;

  overflow: hidden !important;

  padding: 24px 0 0 !important;

  min-height: 580px !important;

  border-bottom: 1px solid #e2e8f0 !important;

}



/* Background image on right side — Auto Fits Any Dimensions without breaking/cropping */

.rp-hero-bg-team {

  position: absolute !important;

  top: 24px !important;

  right: 10% !important;

  width: 44% !important;

  max-width: 600px !important;

  max-height: 480px !important;

  height: calc(100% - 130px) !important;

  object-fit: contain !important;

  object-position: center center !important;

  z-index: 1 !important;

  filter: none !important;

  opacity: 1 !important;

  display: block !important;

}



/* Red Gradient Overlay — Removed for Plain White Style */

.rp-hero-overlay {

  display: none !important;

}



/* Bottom shadow fade — Removed for Plain White Style */

.rp-hero::before {

  display: none !important;

}



/* Hero Top Category List Bar */

.rp-hero-cat-bar {

  display: flex !important;

  justify-content: flex-end !important;

  gap: 24px !important;

  padding-bottom: 18px !important;

  border-bottom: 1px solid #e2e8f0 !important;

  margin-bottom: 28px !important;

  flex-wrap: wrap !important;

  position: relative !important;

  z-index: 3 !important;

}

.rp-hero-cat-bar span {

  color: #475569 !important;

  font-size: 0.78rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;

}



.rp-hero-inner {

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  max-width: 780px !important;

  width: 52% !important;

  position: relative !important;

  z-index: 3 !important;

  padding: 10px 0 54px !important;

}

.rp-badge {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  background: #f1f5f9 !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 8px !important;

  padding: 5px 14px !important;

  font-size: .75rem !important;

  font-weight: 700 !important;

  color: #0f172a !important;

  text-transform: uppercase !important;

  letter-spacing: .1em !important;

  margin-bottom: 18px !important;

  align-self: flex-start !important;

}

.rp-badge .star { color: #d97706 !important }

.rp-hero h1 {

  font-size: clamp(2.2rem, 3.8vw, 3.4rem) !important;

  font-weight: 800 !important;

  color: #0f172a !important;

  line-height: 1.18 !important;

  letter-spacing: -.02em !important;

  margin: 0 0 16px !important;

}

.rp-hero-text > p {

  font-size: 1.12rem !important;

  color: #334155 !important;

  line-height: 1.7 !important;

  max-width: 720px !important;

  margin-bottom: 20px !important;

}



.rp-hero-features {

  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 6px 12px !important;

  color: #b45309 !important;

  font-weight: 700 !important;

  font-size: 0.92rem !important;

  margin-bottom: 24px !important;

}

.rp-hero-features .sep {

  color: #94a3b8 !important;

  font-weight: 400 !important;

  margin: 0 2px !important;

}



.rp-hero-btns { display: flex !important; gap: 14px !important; flex-wrap: wrap !important }

.btn-hero-w {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 14px 34px !important;

  background: #0f172a !important;

  color: #ffffff !important;

  border-radius: 8px !important;

  font-size: 1rem !important;

  font-weight: 800 !important;

  text-decoration: none !important;

  transition: all .2s !important;

  border: none !important;

  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2) !important;

}

.btn-hero-w:hover { background: #2547a0 !important; color: #ffffff !important; transform: translateY(-2px) !important }

.btn-hero-o {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 14px 30px !important;

  background: transparent !important;

  color: #0f172a !important;

  border: 1.5px solid #0f172a !important;

  border-radius: 8px !important;

  font-size: 1rem !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  transition: all .2s !important;

}

.btn-hero-o:hover { background: #f1f5f9 !important; border-color: #0f172a !important; color: #0f172a !important }



.rp-hero-img {

  display: flex !important;

  align-items: flex-end !important;

  justify-content: flex-end !important;

  margin-bottom: -4px !important;

}

.rp-hero-img img {

  max-height: 480px !important;

  width: 100% !important;

  object-fit: contain !important;

  filter: drop-shadow(0 20px 40px rgba(0,0,0,.15)) !important;

  display: block !important;

}

/* Hero stats bar — Removed */

.rp-herostat,

.rp-herostats-bar {

  display: none !important;

}



/* ══════════════════════════════════════════

   ARTICLE / CONTENT SECTIONS

══════════════════════════════════════════ */

.rp-article {

  padding: 64px 0 !important;

  background: #ffffff !important;

  border-bottom: 1px solid #e2e8f0 !important;

}

.rp-article.bg-off {

  background: #f8fafc !important;

}

.rp-article-label {

  display: block !important;

  text-align: center !important;

  font-size: .85rem !important;

  font-weight: 700 !important;

  color: #c91c26 !important;

  text-transform: uppercase !important;

  letter-spacing: .14em !important;

  margin-bottom: 12px !important;

}

.rp-article h2 {

  font-size: clamp(1.9rem, 3.2vw, 2.7rem) !important;

  font-weight: 800 !important;

  color: #4d0559 !important;

  line-height: 1.25 !important;

  margin: 0 0 10px !important;

  text-align: center !important;

}

.rp-article .sub-head {

  text-align: center !important;

  font-size: 1.15rem !important;

  font-weight: 700 !important;

  color: #c91c26 !important;

  margin-bottom: 36px !important;

}

.rp-article h3 {

  font-size: 1.4rem !important;

  font-weight: 800 !important;

  color: #4d0559 !important;

  margin: 36px 0 14px !important;

  line-height: 1.35 !important;

}

.rp-article h3:first-of-type { margin-top: 0 !important }

.rp-article p {

  font-size: 1.05rem !important;

  color: #475569 !important;

  line-height: 1.85 !important;

  margin-bottom: 20px !important;

}

.rp-article p a, .rp-article li a {

  color: #c91c26 !important;

  text-decoration: underline !important;

  font-weight: 600 !important;

  transition: color 0.2s !important;

}

.rp-article p a:hover, .rp-article li a:hover {

  color: #4d0559 !important;

}

.rp-article ul {

  padding-left: 0 !important;

  list-style: none !important;

  margin-bottom: 24px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 12px !important;

}

.rp-article ul li {

  font-size: 1.02rem !important;

  color: #475569 !important;

  padding: 4px 0 4px 26px !important;

  position: relative !important;

  line-height: 1.7 !important;

}

.rp-article ul li::before {

  content: '•' !important;

  position: absolute !important;

  left: 4px !important;

  top: 1px !important;

  color: #c91c26 !important;

  font-size: 1.5rem !important;

  line-height: 1 !important;

}

.rp-article strong { color: #1e293b !important; font-weight: 700 !important }



/* ══════════════════════════════════════════

   BANNERS  (4 variants)

══════════════════════════════════════════ */

/* ══════════════════════════════════════════

   BANNER ANIMATIONS & DYNAMIC BACKGROUNDS

══════════════════════════════════════════ */

@keyframes bannerGradientFlow {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}



@keyframes bannerOrbFloat1 {

  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }

  50% { transform: translate(45px, -35px) scale(1.15); opacity: 0.85; }

}



@keyframes bannerOrbFloat2 {

  0%, 100% { transform: translate(0, 0) scale(1.05); opacity: 0.45; }

  50% { transform: translate(-55px, 40px) scale(0.9); opacity: 0.75; }

}



/* ══════════════════════════════════════════

   BANNERS  (4 variants)

══════════════════════════════════════════ */

.rp-banner {

  padding: 72px 0 !important;

  position: relative !important;

  overflow: hidden !important;

  transition: all 0.4s ease !important;

}



/* Floating Glow Orbs in Background */

.rp-banner::before {

  content: '' !important;

  position: absolute !important;

  width: 480px !important;

  height: 480px !important;

  top: -120px !important;

  left: -100px !important;

  border-radius: 50% !important;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 70%) !important;

  pointer-events: none !important;

  z-index: 1 !important;

  animation: bannerOrbFloat1 14s ease-in-out infinite !important;

}



.rp-banner::after {

  content: '' !important;

  position: absolute !important;

  width: 520px !important;

  height: 520px !important;

  bottom: -160px !important;

  right: -100px !important;

  border-radius: 50% !important;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%) !important;

  pointer-events: none !important;

  z-index: 1 !important;

  animation: bannerOrbFloat2 18s ease-in-out infinite !important;

}



/* BG variants with animated mesh gradients */

.rp-banner.bg-yellow {

  background: #0096f0 !important;

  background-size: 200% 200% !important;

  animation: bannerGradientFlow 12s ease infinite !important;

}

.rp-banner.bg-yellow::before {

  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%) !important;

}

.rp-banner.bg-yellow::after {

  background: radial-gradient(circle, rgba(185, 28, 28, 0.18) 0%, rgba(185, 28, 28, 0) 70%) !important;

}



.rp-banner.bg-purple {

  background: #0096f0 !important;

  background-size: 200% 200% !important;

  animation: bannerGradientFlow 14s ease infinite !important;

}

.rp-banner.bg-purple::before {

  background: radial-gradient(circle, rgba(192, 132, 252, 0.35) 0%, rgba(192, 132, 252, 0) 70%) !important;

}

.rp-banner.bg-purple::after {

  background: radial-gradient(circle, rgba(247, 201, 72, 0.22) 0%, rgba(247, 201, 72, 0) 70%) !important;

}



.rp-banner.bg-dark {

  background: #0096f0 !important;

  background-size: 200% 200% !important;

  animation: bannerGradientFlow 13s ease infinite !important;

}

.rp-banner.bg-dark::before {

  background: radial-gradient(circle, rgba(248, 113, 113, 0.35) 0%, rgba(248, 113, 113, 0) 70%) !important;

}

.rp-banner.bg-dark::after {

  background: radial-gradient(circle, rgba(247, 201, 72, 0.25) 0%, rgba(247, 201, 72, 0) 70%) !important;

}



.rp-banner.bg-navy {

  background: #0096f0 !important;

  background-size: 200% 200% !important;

  animation: bannerGradientFlow 15s ease infinite !important;

}

.rp-banner.bg-navy::before {

  background: radial-gradient(circle, rgba(99, 102, 241, 0.32) 0%, rgba(99, 102, 241, 0) 70%) !important;

}

.rp-banner.bg-navy::after {

  background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0) 70%) !important;

}



.rp-banner-inner {

  display: grid !important;

  grid-template-columns: 1fr 1.15fr !important;

  gap: 64px !important;

  align-items: center !important;

  position: relative !important;

  z-index: 2 !important;

  max-width: 1350px !important;

  margin: 0 auto !important;

}

.rp-banner-inner.flip {

  direction: rtl !important;

}

.rp-banner-inner.flip > * {

  direction: ltr !important;

}



/* image side */

.rp-banner-pic {

  text-align: center !important;

  position: relative !important;

  z-index: 3 !important;

}

.rp-banner-pic img {

  max-width: 500px !important;

  width: 100% !important;

  height: auto !important;

  object-fit: cover !important;

  border-radius: 8px !important;

  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

  border: 2px solid rgba(255,255,255,0.2) !important;

}

.rp-banner-pic img:hover {

  transform: translateY(-8px) scale(1.02) !important;

  box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 255, 255, 0.35) !important;

}



/* text side */

.rp-banner-text h2 {

  font-size: clamp(1.55rem, 2.6vw, 2.2rem) !important;

  font-weight: 800 !important;

  line-height: 1.22 !important;

  margin: 0 0 10px !important;

}

.rp-banner.bg-yellow .rp-banner-text h2  { color: #0096f0 !important }

.rp-banner.bg-purple .rp-banner-text h2  { color: #f7c948 !important }

.rp-banner.bg-dark .rp-banner-text h2    { color: #f7c948 !important }

.rp-banner.bg-navy .rp-banner-text h2    { color: #f7c948 !important }



.rp-banner-text .bsub {

  display: block !important;

  font-size: 1.05rem !important;

  font-weight: 700 !important;

  margin-bottom: 14px !important;

}

.rp-banner.bg-yellow .bsub { color: #0f172a !important }

.rp-banner.bg-purple .bsub,

.rp-banner.bg-dark .bsub,

.rp-banner.bg-navy .bsub   { color: rgba(255,255,255,.75) !important }



.rp-banner-text > p {

  font-size: 1rem !important;

  line-height: 1.8 !important;

  margin-bottom: 32px !important;

}

.rp-banner.bg-yellow .rp-banner-text > p { color: #334155 !important }

.rp-banner.bg-purple .rp-banner-text > p,

.rp-banner.bg-dark .rp-banner-text > p,

.rp-banner.bg-navy .rp-banner-text > p   { color: rgba(255,255,255,.65) !important }



/* CTA 3-column cards (X-Axis Horizontal Layout) */

/* ══════════════════════════════════════════

   HORIZONTAL CTA ACTION ITEMS IN BANNERS (X-AXIS)

══════════════════════════════════════════ */

.rp-cta-cols {

  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  gap: 16px !important;

  margin-top: 28px !important;

}



.rp-cta-card {

  display: grid !important;

  grid-template-columns: auto 1fr !important;

  grid-template-rows: auto auto !important;

  column-gap: 10px !important;

  row-gap: 12px !important;

  align-items: center !important;

  background: rgba(255, 255, 255, 0.12) !important;

  backdrop-filter: blur(10px) !important;

  border: 1px solid rgba(255, 255, 255, 0.22) !important;

  border-radius: 8px !important;

  padding: 16px 14px !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;

  transition: transform 0.25s ease, box-shadow 0.25s ease !important;

}



.rp-banner.bg-yellow .rp-cta-card {

  background: rgba(255, 255, 255, 0.55) !important;

  border: 1px solid rgba(15, 23, 42, 0.12) !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;

}



.rp-cta-card:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;

}



.rp-cta-card .cc-ico {

  grid-column: 1 !important;

  grid-row: 1 !important;

  width: 24px !important;

  height: 24px !important;

  background: transparent !important;

  border-radius: 0 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  margin: 0 !important;

  flex-shrink: 0 !important;

}



.rp-cta-card strong {

  grid-column: 2 !important;

  grid-row: 1 !important;

  font-size: 0.92rem !important;

  font-weight: 800 !important;

  line-height: 1.25 !important;

  margin: 0 !important;

  text-align: left !important;

}



.rp-cta-card .btn-cc {

  grid-column: 1 / span 2 !important;

  grid-row: 2 !important;

  width: 100% !important;

  padding: 10px 16px !important;

  border-radius: 8px !important;

  font-size: 0.88rem !important;

  font-weight: 800 !important;

  text-decoration: none !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 6px !important;

  text-align: center !important;

  transition: all 0.2s ease !important;

}



/* Yellow Banner Styling */

.rp-banner.bg-yellow .rp-cta-card strong {

  color: #0096f0 !important;

}

.rp-banner.bg-yellow .cc-ico svg {

  stroke: #0096f0 !important;

}

.rp-banner.bg-yellow .btn-cc {

  background: #0096f0 !important;

  color: #ffffff !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0,0.28) !important;

}

.rp-banner.bg-yellow .btn-cc:hover {

  background: #0f172a !important;

  color: #ffffff !important;

}



/* Purple / Dark / Navy Banner Styling */

.rp-banner.bg-purple .rp-cta-card strong,

.rp-banner.bg-dark .rp-cta-card strong,

.rp-banner.bg-navy .rp-cta-card strong {

  color: #ffffff !important;

}

.rp-banner.bg-purple .cc-ico svg,

.rp-banner.bg-dark .cc-ico svg,

.rp-banner.bg-navy .cc-ico svg {

  stroke: #f7c948 !important;

}

.rp-banner.bg-purple .btn-cc,

.rp-banner.bg-dark .btn-cc,

.rp-banner.bg-navy .btn-cc {

  background: #f7c948 !important;

  color: #0f172a !important;

  box-shadow: 0 4px 14px rgba(247,201,72,0.28) !important;

}

.rp-banner.bg-purple .btn-cc:hover,

.rp-banner.bg-dark .btn-cc:hover,

.rp-banner.bg-navy .btn-cc:hover {

  background: #ffffff !important;

  color: #0f172a !important;

}



/* ══════════════════════════════════════════

   RED STATS BAR IN HERO SECTION (5 ITEMS)

══════════════════════════════════════════ */

.rp-statsbar {

  background: #0096f0 !important;

  display: grid !important;

  grid-template-columns: repeat(5, 1fr) !important;

  position: relative !important;

  z-index: 10 !important;

  margin-top: 30px !important;

  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;

}

.rp-stat {

  text-align: center !important;

  padding: 22px 14px !important;

  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;

}

.rp-stat:last-child { border-right: none !important }

.rp-stat strong {

  display: block !important;

  font-size: 2.3rem !important;

  font-weight: 900 !important;

  color: #ffffff !important;

  line-height: 1 !important;

  margin-bottom: 6px !important;

  font-family: 'Inter', 'Outfit', sans-serif !important;

}

.rp-stat span {

  font-size: .78rem !important;

  font-weight: 700 !important;

  color: rgba(255, 255, 255, 0.88) !important;

  text-transform: uppercase !important;

  letter-spacing: .07em !important;

  display: block !important;

  font-family: 'Inter', 'Outfit', sans-serif !important;

}



/* ══════════════════════════════════════════

   ALL SERVICES GRID

══════════════════════════════════════════ */

.rp-services {

  background: #f8fafc !important;

  padding: 64px 0 !important;

  border-top: 1px solid #e2e8f0 !important;

}

.rp-svc-head {

  text-align: center !important;

  margin-bottom: 36px !important;

}

.rp-svc-h2 {

  font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important;

  font-weight: 800 !important;

  color: #0f172a !important;

  margin: 8px 0 !important;

}

.rp-svc-sub {

  font-size: 1.05rem !important;

  color: #64748b !important;

  max-width: 680px !important;

  margin: 0 auto !important;

}

.rp-svc-grid {

  display: grid !important;

  grid-template-columns: repeat(7, 1fr) !important;

  gap: 14px !important;

}

.rp-svc-card {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 8px !important;

  padding: 20px 12px 16px !important;

  text-decoration: none !important;

  transition: all .22s ease !important;

}

.rp-svc-card:hover {

  background: rgba(0, 0, 0,.04) !important;

  border-color: rgba(0, 0, 0,.3) !important;

  transform: translateY(-4px) !important;

  box-shadow: 0 8px 28px rgba(0, 0, 0,.1) !important;

  text-decoration: none !important;

}

.rp-svc-card img {

  width: 72px !important;

  height: 72px !important;

  object-fit: contain !important;

  margin-bottom: 12px !important;

  transition: transform .3s ease !important;

}

.rp-svc-card:hover img { transform: scale(1.08) !important }

.rp-svc-card span {

  font-size: .7rem !important;

  font-weight: 700 !important;

  color: #475569 !important;

  text-transform: uppercase !important;

  letter-spacing: .06em !important;

  line-height: 1.4 !important;

  display: block !important;

}

.rp-svc-card:hover span { color: #0096f0 !important }



@media (max-width: 960px) {

  .rp-svc-grid { grid-template-columns: repeat(4, 1fr) !important }

}

@media (max-width: 600px) {

  .rp-svc-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important }

  .rp-svc-card { padding: 14px 8px 12px !important }

  .rp-svc-card img { width: 52px !important; height: 52px !important }

}



/* ══════════════════════════════════════════

   LOCATIONS

══════════════════════════════════════════ */

.rp-locations {

  background: #ffffff !important;

  padding: 52px 0 !important;

  border-top: 1px solid #e2e8f0 !important;

}

.rp-locations h2 {

  font-size: 1.5rem !important;

  font-weight: 800 !important;

  color: #0f172a !important;

  margin: 8px 0 8px !important;

}

.rp-locations p {

  font-size: 1rem !important;

  color: #64748b !important;

  margin-bottom: 22px !important;

}

.rp-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important }

.rp-tag {

  display: inline-block !important;

  padding: 7px 16px !important;

  background: #f8fafc !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 8px !important;

  font-size: .75rem !important;

  font-weight: 600 !important;

  color: #334155 !important;

  text-decoration: none !important;

  transition: all .2s !important;

}

.rp-tag:hover { background: rgba(0, 0, 0,.07) !important; border-color: #ff7733 !important; color: #0096f0 !important }



/* ══════════════════════════════════════════

   FAQ

══════════════════════════════════════════ */

.rp-faq {

  background: #f8fafc !important;

  padding: 64px 0 !important;

  border-top: 1px solid #e2e8f0 !important;

}

.rp-faq-head { text-align: center !important; margin-bottom: 40px !important }

.rp-faq-head h2 {

  font-size: clamp(1.6rem,2.8vw,2.3rem) !important;

  font-weight: 800 !important; color: #0f172a !important;

  margin: 8px 0 !important;

}

.rp-faq-head p { font-size: 1.05rem !important; color:#64748b !important }

.rp-faq-list { max-width: 980px !important; margin: 0 auto !important }

.rp-faq-item {

  border: 1px solid #e2e8f0 !important;

  border-radius: 8px !important;

  margin-bottom: 12px !important;

  background: #ffffff !important;

  overflow: hidden !important;

}

.rp-faq-q {

  width: 100% !important; text-align: left !important;

  padding: 22px 24px !important; background: none !important; border: none !important;

  cursor: pointer !important; display: flex !important; justify-content: space-between !important;

  align-items: center !important; gap: 12px !important;

  font-size: 1.05rem !important; font-weight: 700 !important; color: #0f172a !important;

  transition: color .2s !important;

}

.rp-faq-q:hover { color: #0096f0 !important }

.rp-faq-q svg { flex-shrink: 0 !important; transition: transform .3s !important }

.rp-faq-item.open .rp-faq-q { color: #0096f0 !important }

.rp-faq-item.open .rp-faq-q svg { transform: rotate(180deg) !important }

.rp-faq-a { max-height: 0 !important; overflow: hidden !important; transition: max-height .35s ease !important }

.rp-faq-item.open .rp-faq-a { max-height: 500px !important }

.rp-faq-a p {

  padding: 0 24px 22px !important;

  font-size: 1rem !important; color: #64748b !important; line-height: 1.82 !important; margin: 0 !important;

}



/* ══════════════════════════════════════════

   RESPONSIVE

══════════════════════════════════════════ */

@media (max-width: 960px) {

  .rp-hero-inner     { grid-template-columns: 1fr !important }

  .rp-hero-img       { display: none !important }

  .rp-banner-inner   { grid-template-columns: 1fr !important }

  .rp-banner-inner.flip { direction: ltr !important }

  .rp-banner-pic     { display: none !important }

  .rp-statsbar       { grid-template-columns: repeat(3,1fr) !important }

  .rp-stat:nth-child(3) { border-right: none !important }

  .rp-stat:nth-child(4),

  .rp-stat:nth-child(5) { border-top: 1px solid rgba(255,255,255,.14) !important }

  .rp-article ul     { grid-template-columns: 1fr !important }

  .rp-cta-cols       { grid-template-columns: 1fr !important }

}

@media (max-width: 600px) {

  .rp-statsbar { grid-template-columns: repeat(2,1fr) !important }

  .rp-stat:nth-child(2) { border-right: none !important }

  .rp-stat:nth-child(3),

  .rp-stat:nth-child(4),

  .rp-stat:nth-child(5) { border-top: 1px solid rgba(255,255,255,.14) !important }

  .rp-herostat { grid-template-columns: repeat(3,1fr) !important }

  .rp-article ul { grid-template-columns: 1fr !important }

}



/* ══════════════════════════════════════════

   HEADER & NAVBAR (#0096f0)

══════════════════════════════════════════ */

.rp-main-header {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  z-index: 1000 !important;

  background: #ffffff !important;

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;

}



/* Top Utility Bar */

.rp-topbar {

  background: #0096f0 !important;

  border-bottom: 1px solid rgba(255,255,255,0.12) !important;

  font-size: 0.78rem !important;

  padding: 7px 0 !important;

  color: rgba(255,255,255,0.9) !important;

}

.rp-topbar-inner {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

}

.rp-topbar-left, .rp-topbar-right {

  display: flex !important;

  align-items: center !important;

  gap: 18px !important;

}

.rp-social-links {

  display: flex !important;

  align-items: center !important;

  gap: 14px !important;

}

.rp-social-links a {

  color: rgba(255,255,255,0.85) !important;

  transition: color 0.2s !important;

  display: flex !important;

  align-items: center !important;

}

.rp-social-links a:hover { color: #f7c948 !important; }



.rp-topbar-badge {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  color: #ffffff !important;

  text-decoration: none !important;

  font-weight: 600 !important;

  font-size: 0.76rem !important;

  transition: color 0.2s !important;

}

.rp-topbar-badge:hover { color: #f7c948 !important; }



.rp-topbar-phone {

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  color: #ffffff !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  transition: color 0.2s !important;

}

.rp-topbar-phone:hover { color: #f7c948 !important; }



.rp-topbar-btn {

  background: rgba(255,255,255,0.15) !important;

  color: #ffffff !important;

  padding: 5px 14px !important;

  border-radius: 8px !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  transition: all 0.2s !important;

  font-size: 0.74rem !important;

  border: 1px solid rgba(255,255,255,0.2) !important;

}

.rp-topbar-btn:hover { background: #f7c948 !important; color: #0f172a !important; border-color: #f7c948 !important; }



.rp-topbar-link {

  color: rgba(255,255,255,0.92) !important;

  text-decoration: none !important;

  display: flex !important;

  align-items: center !important;

  gap: 5px !important;

  font-weight: 700 !important;

  letter-spacing: 0.03em !important;

  transition: color 0.2s !important;

}

.rp-topbar-link:hover { color: #f7c948 !important; }

.rp-topbar-divider { color: rgba(255,255,255,0.3) !important; }

.rp-topbar-lang { color: rgba(255,255,255,0.9) !important; font-weight: 600 !important; }



/* Main Navbar */

.rp-navbar {

  padding: 10px 0 !important;

}

.rp-navbar-inner {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

}

.rp-nav-logo {

  display: flex !items: center !important;

  text-decoration: none !important;

}

.rp-logo-wrapper {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  background: rgba(255,255,255,0.95) !important;

  padding: 6px 14px !important;

  border-radius: 8px !important;

  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;

}

.rp-logo-img {

  height: 34px !important;

  width: auto !important;

  display: block !important;

}

.rp-nav-menu {

  display: flex !important;

  align-items: center !important;

  gap: 28px !important;

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

}

.rp-nav-item {

  position: relative !important;

}

.rp-nav-link {

  color: #ffffff !important;

  font-size: 0.96rem !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 6px 0 !important;

  transition: color 0.2s !important;

}

.rp-nav-link:hover {

  color: #f7c948 !important;

}



/* Dropdown Menu */

.rp-has-dropdown:hover .rp-dropdown-menu {

  opacity: 1 !important;

  visibility: visible !important;

  transform: translateY(0) !important;

}

.rp-dropdown-menu {

  position: absolute !important;

  top: 100% !important;

  left: 0 !important;

  min-width: 270px !important;

  background: #0096f0 !important;

  border: 1px solid rgba(255,255,255,0.18) !important;

  border-radius: 8px !important;

  box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;

  padding: 8px 0 !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transform: translateY(8px) !important;

  transition: all 0.22s ease !important;

  z-index: 1100 !important;

}

.rp-dropdown-menu a {

  display: block !important;

  padding: 10px 20px !important;

  color: rgba(255,255,255,0.92) !important;

  font-size: 0.9rem !important;

  font-weight: 600 !important;

  text-decoration: none !important;

  transition: all 0.2s !important;

  border-bottom: 1px solid rgba(255,255,255,0.05) !important;

}

.rp-dropdown-menu a:last-child { border-bottom: none !important; }

.rp-dropdown-menu a:hover {

  background: rgba(255,255,255,0.12) !important;

  color: #f7c948 !important;

  padding-left: 24px !important;

}



/* Right Actions */

.rp-nav-actions {

  display: flex !important;

  align-items: center !important;

  gap: 16px !important;

}

.rp-search-btn {

  background: none !important;

  border: none !important;

  color: #ffffff !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 6px !important;

  transition: color 0.2s !important;

}

.rp-search-btn:hover { color: #f7c948 !important; }



.rp-cta-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  background: #0096f0 !important;

  color: #ffffff !important;

  padding: 10px 22px !important;

  border-radius: 8px !important;

  font-size: 0.9rem !important;

  font-weight: 800 !important;

  text-decoration: none !important;

  transition: all 0.2s !important;

  border: 1.5px solid rgba(255,255,255,0.25) !important;

}

.rp-cta-btn:hover {

  background: #f7c948 !important;

  color: #0f172a !important;

  border-color: #f7c948 !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;

}



.rp-mobile-toggle {

  display: none !important;

  background: none !important;

  border: none !important;

  color: #ffffff !important;

  cursor: pointer !important;

  padding: 4px !important;

}



/* Mobile Drawer Overlay */

.rp-mobile-drawer {

  display: none !important;

  position: fixed !important;

  top: 105px !important;

  left: 0 !important;

  right: 0 !important;

  background: #0096f0 !important;

  border-bottom: 3px solid #0096f0 !important;

  padding: 20px 24px !important;

  z-index: 999 !important;

  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;

}

.rp-mobile-drawer.open {

  display: block !important;

}

.rp-mobile-drawer a {

  display: block !important;

  padding: 12px 0 !important;

  color: #ffffff !important;

  font-size: 1.05rem !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  border-bottom: 1px solid rgba(255,255,255,0.1) !important;

}

.rp-mobile-drawer a:hover { color: #f7c948 !important; }



/* Mobile responsive adjustments */

@media (max-width: 1120px) {

  .rp-nav-menu { gap: 18px !important; }

  .rp-nav-link { font-size: 0.88rem !important; }

}

@media (max-width: 980px) {

  .rp-topbar-right .rp-topbar-link,

  .rp-topbar-right .rp-topbar-divider,

  .rp-topbar-right .rp-topbar-lang { display: none !important; }

  .rp-nav-menu { display: none !important; }

  .rp-mobile-toggle { display: block !important; }

  .sp-wrap { padding-top: 86px !important; }

}

@media (max-width: 640px) {

  .rp-topbar { display: none !important; }

  .sp-wrap { padding-top: 58px !important; }

}



/* ══════════════════════════════════════════

   POPUP MODAL STYLES (FIX UNSTYLED FOOTER POPUP)

══════════════════════════════════════════ */

.popup-overlay {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  width: 100vw !important;

  height: 100vh !important;

  background: rgba(0, 0, 0, 0.75) !important;

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  z-index: 99999 !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition: opacity 0.3s ease, visibility 0.3s ease !important;

}

.popup-overlay.active {

  opacity: 1 !important;

  visibility: visible !important;

}

.popup-container {

  background: #ffffff !important;

  width: 90% !important;

  max-width: 860px !important;

  border-radius: 8px !important;

  display: flex !important;

  flex-direction: row !important;

  position: relative !important;

  transform: scale(0.95) !important;

  transition: transform 0.3s ease !important;

  box-shadow: 0 20px 50px rgba(0,0,0,0.4) !important;

  overflow: hidden !important;

}

.popup-overlay.active .popup-container {

  transform: scale(1) !important;

}

.popup-close {

  position: absolute !important;

  top: 16px !important;

  right: 18px !important;

  background: rgba(0,0,0,0.1) !important;

  border: none !important;

  font-size: 24px !important;

  color: #333333 !important;

  cursor: pointer !important;

  width: 36px !important;

  height: 36px !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  z-index: 10 !important;

  transition: all 0.2s ease !important;

}

.popup-close:hover {

  background: #0096f0 !important;

  color: #ffffff !important;

}

.popup-left {

  flex: 1 !important;

  position: relative !important;

  overflow: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  background: #0096f0 !important;

}

.popup-left-video {

  position: absolute !important;

  top: 50% !important;

  left: 50% !important;

  min-width: 100% !important;

  min-height: 100% !important;

  width: auto !important;

  height: auto !important;

  transform: translate(-50%, -50%) !important;

  object-fit: cover !important;

  z-index: 0 !important;

}

.popup-left-overlay {

  position: absolute !important;

  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;

  background: rgba(84, 0, 0, 0.75) !important;

  z-index: 1 !important;

}

.popup-left-content {

  position: relative !important;

  z-index: 2 !important;

  padding: 48px 36px !important;

  display: flex !important;

  flex-direction: column !important;

  height: 100% !important;

}

.popup-left-title {

  font-size: 30px !important;

  font-weight: 800 !important;

  color: #ffffff !important;

  margin-bottom: 12px !important;

  line-height: 1.2 !important;

}

.popup-left-subtitle {

  font-size: 15px !important;

  color: rgba(255,255,255,0.85) !important;

  margin-bottom: 30px !important;

  line-height: 1.5 !important;

}

.popup-left-contact {

  margin-top: auto !important;

}

.popup-left-contact a {

  display: inline-block !important;

  color: #f7c948 !important;

  font-size: 15px !important;

  text-decoration: none !important;

  margin-bottom: 6px !important;

  font-weight: 700 !important;

}

.popup-left-contact a.email {

  display: block !important;

  color: rgba(255,255,255,0.9) !important;

}

.popup-right {

  flex: 1.2 !important;

  padding: 44px 36px !important;

  background: #ffffff !important;

}

.popup-form {

  display: flex !important;

  flex-direction: column !important;

  gap: 16px !important;

}

.popup-form-group {

  display: flex !important;

  flex-direction: column !important;

}

.popup-form label {

  font-size: 11px !important;

  text-transform: uppercase !important;

  color: #64748b !important;

  letter-spacing: 1px !important;

  margin-bottom: 6px !important;

  font-weight: 700 !important;

}

.popup-form input,

.popup-form select,

.popup-form textarea {

  width: 100% !important;

  padding: 10px 14px !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 8px !important;

  background: #f8fafc !important;

  font-size: 14px !important;

  color: #0f172a !important;

  outline: none !important;

  transition: border-color 0.2s ease !important;

}

.popup-form input:focus,

.popup-form select:focus,

.popup-form textarea:focus {

  border-color: #0096f0 !important;

  background: #ffffff !important;

}

.popup-submit {

  background: #0096f0 !important;

  color: #ffffff !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  border: none !important;

  padding: 12px 28px !important;

  border-radius: 8px !important;

  cursor: pointer !important;

  transition: background 0.2s ease !important;

  align-self: flex-start !important;

  margin-top: 8px !important;

}

.popup-submit:hover {

  background: #0096f0 !important;

}

@media (max-width: 768px) {

  .popup-container {

    flex-direction: column !important;

    max-height: 90vh !important;

    overflow-y: auto !important;

  }

  .popup-left {

    padding: 30px 20px 20px 20px !important;

  }

  .popup-right {

    padding: 24px 20px !important;

  }

}



/* ══════════════════════════════════════════

   NEW CUSTOM FOOTER STYLES (Matching Reference)

══════════════════════════════════════════ */

.rp-custom-footer {

  background: #f8fafc !important;

  color: #334155 !important;

  border-top: 1px solid #e2e8f0 !important;

  font-family: 'Inter', 'Outfit', sans-serif !important;

}



/* 1. Top SEO Cities Section */

.rp-ft-seo-sec {

  padding: 36px 0 28px !important;

  border-bottom: 1px solid #e2e8f0 !important;

}

.rp-ft-seo-title {

  font-size: 1.15rem !important;

  font-weight: 800 !important;

  color: #0096f0 !important;

  margin-bottom: 20px !important;

}

.rp-ft-seo-grid {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 16px 28px !important;

  margin-bottom: 16px !important;

}

.rp-ft-seo-col a {

  display: block !important;

  font-size: 0.88rem !important;

  color: #475569 !important;

  text-decoration: none !important;

  margin-bottom: 8px !important;

  transition: color 0.2s !important;

}

.rp-ft-seo-col a:hover { color: #0096f0 !important; }

.rp-ft-showmore {

  display: inline-block !important;

  font-size: 0.88rem !important;

  font-weight: 700 !important;

  color: #0096f0 !important;

  text-decoration: none !important;

}



/* 2. Main Navigation Section */

.rp-ft-main-sec {

  padding: 44px 0 36px !important;

}

.rp-ft-grid {

  display: grid !important;

  grid-template-columns: repeat(5, 1fr) !important;

  gap: 32px 24px !important;

}

.rp-ft-grid-row2 {

  margin-top: 36px !important;

  grid-template-columns: repeat(4, 1fr) !important;

}



.rp-ft-col-head {

  font-size: 0.95rem !important;

  font-weight: 900 !important;

  color: #0096f0 !important;

  letter-spacing: 0.05em !important;

  text-transform: uppercase !important;

  margin: 0 0 2px !important;

}

.rp-ft-sub {

  display: block !important;

  font-size: 0.76rem !important;

  color: #94a3b8 !important;

  font-weight: 500 !important;

  margin-bottom: 16px !important;

}



.rp-ft-links {

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

}

.rp-ft-links li {

  margin-bottom: 10px !important;

  font-size: 0.88rem !important;

}

.rp-ft-links a {

  color: #475569 !important;

  text-decoration: none !important;

  transition: color 0.2s !important;

}

.rp-ft-links a:hover { color: #0096f0 !important; }



.rp-ft-addresses li {

  color: #475569 !important;

  line-height: 1.4 !important;

}

.rp-ft-contact-list a {

  font-weight: 700 !important;

  color: #334155 !important;

}

.rp-ft-contact-list a.email {

  color: #475569 !important;

  font-weight: 500 !important;

}



/* 3. Bottom Bar */

.rp-ft-bottom-bar {

  border-top: 1px solid #e2e8f0 !important;

  padding: 18px 0 !important;

  background: #ffffff !important;

}

.rp-ft-bottom-inner {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 12px !important;

  font-size: 0.88rem !important;

  color: #64748b !important;

}

.rp-ft-reach a {

  color: #0096f0 !important;

  font-weight: 800 !important;

  text-decoration: none !important;

  margin-left: 8px !important;

}



/* Responsive Footer */

@media (max-width: 1024px) {

  .rp-ft-seo-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .rp-ft-grid { grid-template-columns: repeat(3, 1fr) !important; }

  .rp-ft-grid-row2 { grid-template-columns: repeat(2, 1fr) !important; }

}

@media (max-width: 640px) {

  .rp-ft-seo-grid { grid-template-columns: 1fr !important; }

  .rp-ft-grid { grid-template-columns: 1fr 1fr !important; }

  .rp-ft-grid-row2 { grid-template-columns: 1fr !important; }

  .rp-ft-bottom-inner { flex-direction: column !important; text-align: center !important; }

}



/* ══════════════════════════════════════════

   DYNAMIC MORE ARTICLES / RECENT BLOGS GRID

══════════════════════════════════════════ */

.rp-more-blogs-sec {

  background: #f8fafc !important;

  padding: 64px 0 !important;

  border-top: 1px solid #e2e8f0 !important;

  border-bottom: 1px solid #e2e8f0 !important;

  overflow: hidden !important;

}



.rp-mb-header-bar {

  display: flex !important;

  align-items: flex-end !important;

  justify-content: space-between !important;

  margin-bottom: 36px !important;

  gap: 20px !important;

}



.rp-mb-head {

  text-align: left !important;

  max-width: 680px !important;

  margin: 0 !important;

}

.rp-mb-head h2 {

  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;

  font-weight: 800 !important;

  color: #0f172a !important;

  margin: 8px 0 12px !important;

}

.rp-mb-head p {

  font-size: 1.05rem !important;

  color: #64748b !important;

  line-height: 1.6 !important;

}



.rp-mb-controls {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  flex-shrink: 0 !important;

}



.rp-slider-btn {

  width: 48px !important;

  height: 48px !important;

  border-radius: 50% !important;

  background: #ffffff !important;

  border: 1.5px solid #cbd5e1 !important;

  color: #0f172a !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  transition: all 0.22s ease !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;

  outline: none !important;

}

.rp-slider-btn:hover {

  background: #0096f0 !important;

  color: #ffffff !important;

  border-color: #0096f0 !important;

  box-shadow: 0 6px 18px rgba(0, 0, 0,0.35) !important;

  transform: translateY(-2px) !important;

}

.rp-slider-btn:active {

  transform: translateY(0) !important;

}

.rp-slider-btn:disabled {

  opacity: 0.35 !important;

  cursor: not-allowed !important;

  pointer-events: none !important;

  box-shadow: none !important;

}



.rp-mb-slider-wrap {

  position: relative !important;

  width: 100% !important;

}



.rp-mb-grid {

  display: flex !important;

  gap: 28px !important;

  overflow-x: auto !important;

  scroll-behavior: smooth !important;

  scroll-snap-type: x mandatory !important;

  padding: 8px 4px 24px !important;

  -webkit-overflow-scrolling: touch !important;

  scrollbar-width: none !important; /* Firefox */

}



.rp-mb-grid::-webkit-scrollbar {

  display: none !important; /* Chrome / Safari / Edge */

}



.rp-bcard {

  flex: 0 0 calc(33.333% - 19px) !important;

  min-width: calc(33.333% - 19px) !important;

  scroll-snap-align: start !important;

  scroll-snap-stop: always !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 8px !important;

  overflow: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;

  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;

}

.rp-bcard:hover {

  transform: translateY(-6px) !important;

  box-shadow: 0 16px 36px rgba(0,0,0,0.09) !important;

  border-color: #cbd5e1 !important;

}



.rp-bcard-img-wrap {

  position: relative !important;

  width: 100% !important;

  height: 210px !important;

  overflow: hidden !important;

  background: #0f172a !important;

}

.rp-bcard-img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  transition: transform 0.4s ease !important;

}

.rp-bcard:hover .rp-bcard-img {

  transform: scale(1.06) !important;

}

.rp-bcard-cat {

  position: absolute !important;

  top: 14px !important;

  left: 14px !important;

  background: #0096f0 !important;

  color: #ffffff !important;

  font-size: 0.72rem !important;

  font-weight: 800 !important;

  padding: 4px 12px !important;

  border-radius: 8px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.06em !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0,0.4) !important;

}



.rp-bcard-body {

  padding: 24px !important;

  display: flex !important;

  flex-direction: column !important;

  flex-grow: 1 !important;

}

.rp-bcard-meta {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  font-size: 0.78rem !important;

  color: #94a3b8 !important;

  font-weight: 600 !important;

  margin-bottom: 12px !important;

}

.rp-bcard-meta .sep { color: #cbd5e1 !important; }



.rp-bcard-title {

  font-size: 1.15rem !important;

  font-weight: 800 !important;

  color: #0f172a !important;

  line-height: 1.38 !important;

  margin: 0 0 10px !important;

  transition: color 0.2s ease !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 2 !important;

  -webkit-box-orient: vertical !important;

  overflow: hidden !important;

}

.rp-bcard:hover .rp-bcard-title {

  color: #0096f0 !important;

}



.rp-bcard-excerpt {

  font-size: 0.92rem !important;

  color: #64748b !important;

  line-height: 1.6 !important;

  margin-bottom: 20px !important;

  flex-grow: 1 !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 3 !important;

  -webkit-box-orient: vertical !important;

  overflow: hidden !important;

}



.rp-bcard-link {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  color: #0096f0 !important;

  font-weight: 800 !important;

  font-size: 0.9rem !important;

  text-decoration: none !important;

  transition: gap 0.2s ease !important;

  margin-top: auto !important;

}

.rp-bcard:hover .rp-bcard-link {

  gap: 10px !important;

}



.rp-slider-dots {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  margin-top: 24px !important;

}

.rp-slider-dot {

  width: 10px !important;

  height: 10px !important;

  border-radius: 8px !important;

  background: #cbd5e1 !important;

  cursor: pointer !important;

  transition: all 0.3s ease !important;

  border: none !important;

  padding: 0 !important;

}

.rp-slider-dot.active {

  width: 28px !important;

  background: #0096f0 !important;

}



/* Responsive Slider Breakpoints */

@media (max-width: 1024px) {

  .rp-bcard {

    flex: 0 0 calc(50% - 14px) !important;

    min-width: calc(50% - 14px) !important;

  }

}

@media (max-width: 640px) {

  .rp-mb-header-bar {

    flex-direction: column !important;

    align-items: flex-start !important;

  }

  .rp-bcard {

    flex: 0 0 100% !important;

    min-width: 100% !important;

  }

}



/* ══════════════════════════════════════════

   PREMIUM LEAD CAPTURE FORM SECTION

══════════════════════════════════════════ */

.rp-lead-form-sec { background: #0096f0 !important; color: #ffffff !important; padding: 60px 0 !important; border-top: 1px solid #0096f0 !important; }



.rp-lf-container {

  display: grid !important;

  grid-template-columns: 1fr 1.1fr !important;

  gap: 56px !important;

  align-items: center !important;

}



.rp-lf-info h2 {

  font-size: clamp(2rem, 3.2vw, 2.6rem) !important;

  font-weight: 800 !important;

  color: #ffffff !important;

  line-height: 1.25 !important;

  margin: 16px 0 !important;

}

.rp-lf-info p {

  font-size: 1.1rem !important;

  color: #f1f5f9 !important;

  line-height: 1.6 !important;

  margin-bottom: 32px !important;

  opacity: 0.95 !important;

}



.rp-lf-perks {

  display: flex !important;

  flex-direction: column !important;

  gap: 18px !important;

  margin-bottom: 36px !important;

}

.rp-lf-perk-item {

  display: flex !important;

  align-items: flex-start !important;

  gap: 14px !important;

}

.rp-lf-perk-ico {

  width: 26px !important;

  height: 26px !important;

  background: #0096f0 !important;

  color: #ffffff !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-weight: 900 !important;

  font-size: 0.85rem !important;

  flex-shrink: 0 !important;

  margin-top: 2px !important;

}

.rp-lf-perk-item strong {

  display: block !important;

  font-size: 1rem !important;

  color: #ffffff !important;

}

.rp-lf-perk-item span {

  font-size: 0.88rem !important;

  color: #cbd5e1 !important;

}



.rp-lf-direct {

  background: rgba(255,255,255,0.08) !important;

  border: 1px solid rgba(255,255,255,0.15) !important;

  padding: 18px 22px !important;

  border-radius: 8px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 8px !important;

}

.rp-lf-direct span {

  font-size: 0.85rem !important;

  color: #e2e8f0 !important;

}

.rp-lf-call-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  color: #f7c948 !important;

  font-weight: 800 !important;

  font-size: 1.05rem !important;

  text-decoration: none !important;

}



/* Form Card */

.rp-lf-box { background: #ffffff !important; border-radius: 12px !important; padding: 32px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; color: #111827 !important; }

.rp-lf-title { font-size: 1.5rem !important; font-weight: 700 !important; color: #0096f0 !important; margin-bottom: 8px !important; }

.rp-lf-sub { color: #4b5563 !important; font-size: 0.95rem !important; margin-bottom: 24px !important; }



.rp-lead-form {

  display: flex !important;

  flex-direction: column !important;

  gap: 16px !important;

}

.rp-lf-field {

  display: flex !important;

  flex-direction: column !important;

  gap: 6px !important;

}

.rp-lf-row {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 14px !important;

}

.rp-lf-field label { display: block !important; font-size: 0.85rem !important; font-weight: 600 !important; color: #374151 !important; margin-bottom: 6px !important; }

.rp-lf-field label .req { color: #0096f0 !important; }



.rp-lf-field input, .rp-lf-field textarea { width: 100% !important; padding: 12px 16px !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; font-size: 0.95rem !important; background: #f9fafb !important; color: #111827 !important; outline: none !important; transition: 0.2s !important; }

.rp-lf-field input:focus,

.rp-lf-field textarea:focus {

  border-color: #0096f0 !important;

  background: #ffffff !important;

  box-shadow: 0 0 0 3px rgba(0, 0, 0,0.15) !important;

}



.rp-lf-submit-btn { width: 100% !important; padding: 14px !important; background: #0096f0 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-size: 1.05rem !important; font-weight: 700 !important; cursor: pointer !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; transition: 0.2s !important; }

.rp-lf-submit-btn:hover {

  background: #991b1b !important;

  transform: translateY(-2px) !important;

}

.rp-lf-submit-btn:disabled {

  opacity: 0.7 !important;

  cursor: not-allowed !important;

}



.rp-lf-status-msg {

  padding: 12px 14px !important;

  border-radius: 8px !important;

  font-size: 0.88rem !important;

  font-weight: 700 !important;

  text-align: center !important;

  display: none;

}

.rp-lf-status-msg.success {

  background: #dcfce7 !important;

  color: #166534 !important;

  border: 1px solid #bbf7d0 !important;

}

.rp-lf-status-msg.error {

  background: #fee2e2 !important;

  color: #991b1b !important;

  border: 1px solid #fecaca !important;

}



/* ══════════════════════════════════════════════════════════

   ENTERPRISE MULTI-BREAKPOINT RESPONSIVE ENGINE

   (Desktop > Tablet > Mobile > Small Mobile)

══════════════════════════════════════════════════════════ */



/* ── 1. Laptop & Medium Desktops (992px - 1200px) ──────── */

@media (max-width: 1200px) {

  .sp-con {

    padding-left: 32px !important;

    padding-right: 32px !important;

  }

  .sp-con-narrow {

    max-width: 100% !important;

    padding-left: 32px !important;

    padding-right: 32px !important;

  }

  .rp-hero-bg-team {

    width: 55% !important;

  }

}



/* ── 2. Tablets & Small Laptops (769px - 991px) ────────── */

@media (max-width: 991px) {

  .sp-con,

  .sp-con-narrow {

    padding-left: 24px !important;

    padding-right: 24px !important;

  }

  .rp-hero {

    min-height: auto !important;

    padding: 32px 0 40px !important;

    background: #ffffff !important;

  }

  .rp-hero-bg-team {

    width: 60% !important;

    opacity: 0.25 !important;

  }

  .rp-hero-overlay {

    display: none !important;

  }

  .rp-banner-inner {

    gap: 28px !important;

  }

  .rp-banner-pic {

    flex: 0 0 100% !important;

    max-width: 100% !important;

  }

  .rp-banner-pic img {

    height: 260px !important;

    object-fit: cover !important;

  }

  .rp-lf-container {

    grid-template-columns: 1fr !important;

    gap: 36px !important;

  }

}



/* ── 3. Mobile & Phablet Screens (max-width: 768px) ────── */

@media (max-width: 768px) {

  .sp-wrap {

    padding-top: 68px !important;

    background: #ffffff !important;

  }

  .sp-con,

  .sp-con-narrow {

    width: 100% !important;

    max-width: 100% !important;

    padding-left: 16px !important;

    padding-right: 16px !important;

    box-sizing: border-box !important;

  }



  /* Hero Section Mobile */

  .rp-hero {

    min-height: auto !important;

    padding: 16px 0 24px !important;

    position: relative !important;

    overflow: hidden !important;

    background: #ffffff !important;

  }

  .rp-hero-bg-team {

    position: relative !important;

    top: 0 !important;

    right: 0 !important;

    width: 100% !important;

    height: auto !important;

    max-height: 320px !important;

    object-fit: contain !important;

    object-position: center !important;

    opacity: 1 !important;

    filter: none !important;

    z-index: 1 !important;

    display: block !important;

    margin: 16px auto 0 !important;

    border-radius: 8px !important;

    box-shadow: none !important;

  }

  .rp-hero-overlay {

    display: none !important;

  }

  .rp-hero-cat-bar {

    justify-content: flex-start !important;

    gap: 10px !important;

    font-size: 0.76rem !important;

    margin-bottom: 20px !important;

    padding-bottom: 12px !important;

    border-bottom: 1px solid #e2e8f0 !important;

    position: relative !important;

    z-index: 3 !important;

  }

  .rp-hero-cat-bar span {

    color: #475569 !important;

  }

  .rp-hero-inner {

    max-width: 100% !important;

    width: 100% !important;

    position: relative !important;

    z-index: 3 !important;

  }

  .rp-hero h1 {

    font-size: clamp(1.65rem, 6.8vw, 2.15rem) !important;

    line-height: 1.28 !important;

    font-weight: 800 !important;

    color: #0f172a !important;

    margin-bottom: 14px !important;

  }

  .rp-hero-text > p,

  .rp-hero-inner > p {

    font-size: 0.98rem !important;

    line-height: 1.58 !important;

    color: #334155 !important;

    margin-bottom: 20px !important;

  }

  .rp-hero-features {

    font-size: 0.8rem !important;

    gap: 6px 12px !important;

    color: #b45309 !important;

  }

  .rp-herostats-bar {

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 10px !important;

    padding: 14px 10px !important;

    margin-top: 24px !important;

    background: #f8fafc !important;

    backdrop-filter: blur(8px) !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 8px !important;

    position: relative !important;

    z-index: 3 !important;

  }

  .rp-herostat-item strong {

    font-size: 1.25rem !important;

    color: #0f172a !important;

  }

  .rp-herostat-item span {

    font-size: 0.72rem !important;

    color: #64748b !important;

  }



  /* Article Content Mobile */

  .rp-article {

    padding: 36px 0 !important;

  }

  .rp-article h2 {

    font-size: clamp(1.45rem, 6vw, 1.85rem) !important;

    line-height: 1.35 !important;

    margin-bottom: 12px !important;

  }

  .rp-article .sub-head {

    font-size: 1rem !important;

    line-height: 1.55 !important;

    margin-bottom: 20px !important;

  }

  .rp-article h3 {

    font-size: 1.22rem !important;

    line-height: 1.4 !important;

    margin: 24px 0 10px !important;

  }

  .rp-article p {

    font-size: 0.98rem !important;

    line-height: 1.7 !important;

    margin-bottom: 16px !important;

  }

  .rp-article ul {

    padding-left: 20px !important;

    margin-bottom: 20px !important;

  }

  .rp-article ul li {

    font-size: 0.94rem !important;

    line-height: 1.6 !important;

    margin-bottom: 8px !important;

  }



  /* Section Banners Mobile */

  .rp-banner {

    padding: 36px 0 !important;

  }

  .rp-banner-inner {

    flex-direction: column !important;

    gap: 20px !important;

    text-align: left !important;

  }

  .rp-banner-pic {

    width: 100% !important;

    max-width: 420px !important;

    margin: 0 auto 16px !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

  }

  .rp-banner-pic img {

    width: 100% !important;

    height: auto !important;

    max-height: none !important;

    object-fit: contain !important;

    border-radius: 8px !important;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;

    display: block !important;

  }

  .rp-banner-text h2 {

    font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;

    line-height: 1.32 !important;

  }

  .rp-banner-text .bsub {

    font-size: 0.92rem !important;

    display: inline-block !important;

    margin-bottom: 10px !important;

  }

  .rp-banner-text p {

    font-size: 0.95rem !important;

    line-height: 1.6 !important;

    margin-bottom: 18px !important;

  }

  .rp-cta-cols {

    display: flex !important;

    flex-direction: column !important;

    gap: 20px !important;

    margin-top: 18px !important;

  }

  .rp-cta-card {

    display: grid !important;

    grid-template-columns: auto 1fr !important;

    column-gap: 10px !important;

    row-gap: 8px !important;

    align-items: center !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding: 0 !important;

    border-radius: 0 !important;

    text-align: left !important;

    transition: none !important;

    transform: none !important;

  }

  .rp-cta-card:hover {

    background: transparent !important;
    transform: none !important;

  }

  .rp-cta-card .cc-ico {

    grid-column: 1 !important;

    grid-row: 1 !important;

    margin: 0 !important;

    width: 24px !important;

    height: 24px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

  }

  .rp-cta-card strong {

    grid-column: 2 !important;

    grid-row: 1 !important;

    font-size: 0.98rem !important;

    font-weight: 800 !important;

    line-height: 1.25 !important;

    margin: 0 !important;

    text-align: left !important;

  }

  .rp-banner.bg-yellow .rp-cta-card strong {

    color: #0096f0 !important;

  }

  .rp-banner.bg-purple .rp-cta-card strong,

  .rp-banner.bg-dark .rp-cta-card strong,

  .rp-banner.bg-navy .rp-cta-card strong {

    color: #ffffff !important;

  }

  .rp-cta-card .btn-cc {

    grid-column: 1 / span 2 !important;

    grid-row: 2 !important;

    justify-self: start !important;

    margin: 0 !important;

    padding: 10px 22px !important;

    font-size: 0.88rem !important;

    width: auto !important;

    min-width: 180px !important;

    border-radius: 8px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

  }



  /* FAQs Mobile */

  .rp-faq {

    padding: 40px 0 !important;

  }

  .rp-faq h2 {

    font-size: 1.6rem !important;

  }

  .rp-faq-q {

    padding: 16px 14px !important;

    font-size: 0.96rem !important;

  }

  .rp-faq-a {

    padding: 0 14px 16px !important;

    font-size: 0.9rem !important;

  }



  /* Lead Form Mobile */

  .rp-lead-form-sec {

    padding: 44px 0 !important;

  }

  .rp-lf-container {

    grid-template-columns: 1fr !important;

    gap: 28px !important;

  }

  .rp-lf-info h2 {

    font-size: 1.6rem !important;

    text-align: left !important;

  }

  .rp-lf-info p {

    font-size: 0.96rem !important;

    text-align: left !important;
  }

  .rp-lf-box {

    padding: 20px 16px !important;

    border-radius: 8px !important;

  }

  .rp-lf-row {

    grid-template-columns: 1fr !important;

    gap: 12px !important;

  }



  /* Knowledge Hub Mobile */

  .rp-more-blogs-sec {

    padding: 40px 0 !important;

  }

  .rp-mb-head h2 {

    font-size: 1.6rem !important;

  }

  .rp-mb-grid {

    gap: 16px !important;

  }

  .rp-bcard-img-wrap {

    height: 180px !important;

  }

  .rp-bcard-body {

    padding: 16px !important;

  }

}







/* ================================================================

   BLOG LISTING HOME PAGE STYLES (GBIM INSPIRED)

================================================================ */



/* ── Hero Listing Search & Filter Section ─────────────────── */

.rp-listing-hero { background: #ffffff !important; color: #111827 !important; padding: 60px 0 40px !important; border-bottom: 1px solid #e5e7eb !important; position: relative !important; }



.rp-hero-headline-wrap {

  max-width: 860px !important;

  margin: 0 auto 28px !important;

  text-align: center !important;

}



.rp-hero-badge-top { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 0.8rem !important; font-weight: 700 !important; color: #0096f0 !important; background: #f3f4f6 !important; padding: 6px 14px !important; border-radius: 999px !important; margin-bottom: 16px !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; }



.rp-listing-hero h1 { font-size: 2.75rem !important; font-weight: 800 !important; color: #0096f0 !important; margin-bottom: 14px !important; line-height: 1.2 !important; }



.rp-listing-hero p { font-size: 1.15rem !important; color: #4b5563 !important; line-height: 1.6 !important; margin-bottom: 28px !important; }



/* Search Bar in Hero */

.rp-search-box-wrap {

  max-width: 640px !important;

  margin: 0 auto !important;

  position: relative !important;

}



.rp-search-input-field { width: 100% !important; padding: 18px 24px 18px 56px !important; border-radius: 999px !important; border: 1px solid #d1d5db !important; font-size: 1.05rem !important; background: #f9fafb !important; color: #111827 !important; outline: none !important; transition: all 0.2s !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; }



.rp-search-input-field:focus {

  border-color: #0096f0 !important;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;

}



.rp-search-icon-svg {

  position: absolute !important;

  left: 20px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  color: #64748b !important;

  pointer-events: none !important;

}



/* ── Category Pill Toolbar ──────────────────────────────── */

.rp-category-sec {

  background: #ffffff !important;

  padding: 20px 0 !important;

  border-bottom: 1px solid #e2e8f0 !important;

  position: sticky !important;

  top: 80px !important;

  z-index: 100 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;

}



.rp-category-pills-wrap {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  overflow-x: auto !important;

  padding-bottom: 4px !important;

  scrollbar-width: thin !important;

}



.rp-cat-pill {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 10px 18px !important;

  background: #f1f5f9 !important;

  color: #475569 !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 8px !important;

  font-size: 0.92rem !important;

  font-weight: 600 !important;

  cursor: pointer !important;

  white-space: nowrap !important;

  transition: all 0.25s ease !important;

}



.rp-cat-pill:hover {

  background: #e2e8f0 !important;

  color: var(--navy) !important;

}



.rp-cat-pill.active {

  background: #0096f0 !important;

  color: #ffffff !important;

  border-color: #0096f0 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;

}



.rp-pill-count {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: rgba(0, 0, 0, 0.08) !important;

  color: inherit !important;

  padding: 2px 8px !important;

  border-radius: 8px !important;

  font-size: 0.78rem !important;

  font-weight: 700 !important;

}



.rp-cat-pill.active .rp-pill-count {

  background: rgba(255, 255, 255, 0.25) !important;

  color: #ffffff !important;

}



/* ── Main Layout: Grid + Sidebar ───────────────────────── */

.rp-main-listing-sec {

  background: #f8fafc !important;

  padding: 48px 0 80px !important;

}



.rp-listing-layout {

  display: grid !important;

  grid-template-columns: 1fr 340px !important;

  gap: 40px !important;

}



@media (max-width: 1024px) {

  .rp-listing-layout {

    grid-template-columns: 1fr !important;

  }

}



/* ── Featured Spotlight Article Card ────────────────────── */

.rp-spotlight-container {

  margin-bottom: 40px !important;

}



.rp-spotlight-card {

  background: #ffffff !important;

  border-radius: 8px !important;

  overflow: hidden !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;

  border: 1px solid #e2e8f0 !important;

  position: relative !important;

  transition: transform 0.3s ease, box-shadow 0.3s ease !important;

}



.rp-spotlight-card:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;

}



.rp-spotlight-badge {

  position: absolute !important;

  top: 16px !important;

  left: 16px !important;

  background: #0096f0 !important;

  color: #ffffff !important;

  font-size: 0.8rem !important;

  font-weight: 800 !important;

  padding: 6px 14px !important;

  border-radius: 8px !important;

  z-index: 10 !important;

  letter-spacing: 0.05em !important;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;

}



.rp-spotlight-grid {

  display: grid !important;

  grid-template-columns: 1.1fr 1fr !important;

}



@media (max-width: 768px) {

  .rp-spotlight-grid {

    grid-template-columns: 1fr !important;

  }

}



.rp-spotlight-img-wrap {

  position: relative !important;

  min-height: 320px !important;

  overflow: hidden !important;

}



.rp-spotlight-img-wrap img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  transition: transform 0.5s ease !important;

}



.rp-spotlight-card:hover .rp-spotlight-img-wrap img {

  transform: scale(1.05) !important;

}



.rp-spotlight-content {

  padding: 36px 32px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

}



.rp-spotlight-title {

  font-size: 1.65rem !important;

  font-weight: 800 !important;

  line-height: 1.35 !important;

  color: var(--navy) !important;

  margin: 12px 0 14px !important;

}



.rp-spotlight-title a {

  color: inherit !important;

  text-decoration: none !important;

  transition: color 0.2s ease !important;

}



.rp-spotlight-title a:hover {

  color: #0096f0 !important;

}



.rp-spotlight-excerpt {

  font-size: 1rem !important;

  color: #475569 !important;

  line-height: 1.6 !important;

  margin-bottom: 24px !important;

}



.rp-spotlight-footer {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  flex-wrap: wrap !important;

  gap: 16px !important;

  padding-top: 20px !important;

  border-top: 1px solid #f1f5f9 !important;

}



.rp-author-block {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

}



.rp-author-avatar {

  width: 42px !important;

  height: 42px !important;

  border-radius: 50% !important;

  background: var(--navy) !important;

  color: #ffffff !important;

  font-weight: 700 !important;

  font-size: 0.95rem !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.rp-author-info {

  display: flex !important;

  flex-direction: column !important;

}



.rp-author-name {

  font-weight: 700 !important;

  color: var(--navy) !important;

  font-size: 0.95rem !important;

}



.rp-author-role {

  font-size: 0.8rem !important;

  color: #64748b !important;

}



.rp-btn-read-feat {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  background: #0096f0 !important;

  color: #ffffff !important;

  font-weight: 700 !important;

  font-size: 0.92rem !important;

  padding: 10px 20px !important;

  border-radius: 8px !important;

  text-decoration: none !important;

  transition: all 0.25s ease !important;

}



.rp-btn-read-feat:hover {

  background: #333333 !important;

  transform: translateX(3px) !important;

}



/* ── Card Grid ──────────────────────────────────────────── */

.rp-grid-header {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  margin-bottom: 24px !important;

}



.rp-grid-title {

  font-size: 1.5rem !important;

  font-weight: 800 !important;

  color: var(--navy) !important;

}



.rp-results-count {

  font-size: 0.92rem !important;

  color: #64748b !important;

  font-weight: 600 !important;

}



.rp-blog-cards-grid {

  display: grid !important;

  grid-template-columns: repeat(2, 1fr) !important;

  gap: 28px !important;

}



@media (max-width: 640px) {

  .rp-blog-cards-grid {

    grid-template-columns: 1fr !important;

  }

}



/* Single Card */

.rp-blog-card { background: #ffffff !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid #e5e7eb !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important; transition: transform 0.3s, box-shadow 0.3s !important; display: flex !important; flex-direction: column !important; text-decoration: none !important; }



.rp-blog-card:hover {

  transform: translateY(-5px) !important;

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1) !important;

  border-color: #cbd5e1 !important;

}



.rp-card-img-holder {

  position: relative !important;

  height: 210px !important;

  overflow: hidden !important;

}



.rp-card-img-holder img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  transition: transform 0.4s ease !important;

}



.rp-blog-card:hover .rp-card-img-holder img {

  transform: scale(1.06) !important;

}



.rp-card-badge {

  position: absolute !important;

  top: 12px !important;

  left: 12px !important;

  background: rgba(15, 23, 42, 0.85) !important;

  backdrop-filter: blur(4px) !important;

  color: #ffffff !important;

  font-size: 0.75rem !important;

  font-weight: 700 !important;

  padding: 4px 10px !important;

  border-radius: 8px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.04em !important;

}



.rp-card-body {

  padding: 24px !important;

  display: flex !important;

  flex-direction: column !important;

  flex-grow: 1 !important;

}



.rp-card-meta {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  font-size: 0.82rem !important;

  color: #64748b !important;

  margin-bottom: 10px !important;

}



.rp-card-meta svg {

  vertical-align: middle !important;

}



.rp-meta-dot {

  color: #cbd5e1 !important;

}



.rp-card-title {

  font-size: 1.2rem !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  margin-bottom: 12px !important;

  color: var(--navy) !important;

}



.rp-card-title a {

  color: inherit !important;

  text-decoration: none !important;

  transition: color 0.2s ease !important;

}



.rp-card-title a:hover {

  color: #0096f0 !important;

}



.rp-card-excerpt {

  font-size: 0.92rem !important;

  color: #475569 !important;

  line-height: 1.55 !important;

  margin-bottom: 20px !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 3 !important;

  -webkit-box-orient: vertical !important;

  overflow: hidden !important;

}



.rp-card-footer {

  margin-top: auto !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding-top: 14px !important;

  border-top: 1px solid #f1f5f9 !important;

}



.rp-card-author {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

}



.rp-author-avatar-sm {

  width: 28px !important;

  height: 28px !important;

  border-radius: 50% !important;

  background: #e2e8f0 !important;

  color: var(--navy) !important;

  font-weight: 700 !important;

  font-size: 0.75rem !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.rp-author-name-sm {

  font-size: 0.82rem !important;

  font-weight: 600 !important;

  color: #475569 !important;

}



.rp-card-link {

  display: inline-flex !important;

  align-items: center !important;

  gap: 4px !important;

  color: #0096f0 !important;

  font-weight: 700 !important;

  font-size: 0.88rem !important;

  text-decoration: none !important;

  transition: color 0.2s ease !important;

}



.rp-card-link:hover {

  color: #333333 !important;

  text-decoration: underline !important;

}



/* Social Sharing Bar inside Card */

.rp-card-share-bar {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  margin-top: 12px !important;

  padding-top: 10px !important;

  border-top: 1px dashed #e2e8f0 !important;

}



.rp-share-label {

  font-size: 0.78rem !important;

  color: #94a3b8 !important;

  font-weight: 600 !important;

}



.rp-share-btn {

  width: 26px !important;

  height: 26px !important;

  border-radius: 50% !important;

  background: #f1f5f9 !important;

  color: #64748b !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

}



.rp-share-btn:hover {

  color: #ffffff !important;

}



.rp-share-btn.fb:hover { background: #1877f2 !important; }

.rp-share-btn.tw:hover { background: #0096f0 !important; }

.rp-share-btn.in:hover { background: #0a66c2 !important; }

.rp-share-btn.wa:hover { background: #25d366 !important; }



/* ── Pagination Bar ─────────────────────────────────────── */

.rp-pagination-wrapper {

  margin-top: 48px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

}



.rp-page-num {

  min-width: 42px !important;

  height: 42px !important;

  padding: 0 14px !important;

  border-radius: 8px !important;

  border: 1px solid #cbd5e1 !important;

  background: #ffffff !important;

  color: var(--navy) !important;

  font-weight: 700 !important;

  font-size: 0.95rem !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: all 0.25s ease !important;

}



.rp-page-num:hover:not(.disabled):not(.active) {

  background: #f1f5f9 !important;

  border-color: var(--navy) !important;

}



.rp-page-num.active {

  background: #0096f0 !important;

  color: #ffffff !important;

  border-color: #0096f0 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;

}



.rp-page-num.disabled {

  opacity: 0.4 !important;

  cursor: not-allowed !important;

}



/* ── Sidebar Styles ─────────────────────────────────────── */

.rp-sidebar-wrapper {

  display: flex !important;

  flex-direction: column !important;

  gap: 32px !important;

}



.rp-sidebar-widget {

  background: #ffffff !important;

  border-radius: 8px !important;

  border: 1px solid #e2e8f0 !important;

  padding: 28px 24px !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;

}



.rp-sidebar-widget-lead {

  border-top: 4px solid #0096f0 !important;

  background: #0096f0 !important;

}



.rp-widget-title {

  font-size: 1.25rem !important;

  font-weight: 800 !important;

  color: var(--navy) !important;

  margin-bottom: 12px !important;

  position: relative !important;

  padding-bottom: 10px !important;

}



.rp-widget-title::after {

  content: '' !important;

  position: absolute !important;

  bottom: 0 !important;

  left: 0 !important;

  width: 40px !important;

  height: 3px !important;

  background: #0096f0 !important;

  border-radius: 8px !important;

}



.rp-widget-subtitle {

  font-size: 0.9rem !important;

  color: #64748b !important;

  line-height: 1.5 !important;

  margin-bottom: 20px !important;

}



/* Sidebar Lead Form */

.rp-sidebar-form {

  display: flex !important;

  flex-direction: column !important;

  gap: 14px !important;

}



.rp-sidebar-form input,

.rp-sidebar-form select {

  width: 100% !important;

  padding: 12px 14px !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 8px !important;

  font-size: 0.9rem !important;

  color: var(--navy) !important;

  background: #ffffff !important;

  outline: none !important;

  transition: border-color 0.2s ease !important;

}



.rp-sidebar-form input:focus,

.rp-sidebar-form select:focus {

  border-color: #0096f0 !important;

}



.rp-sidebar-btn-submit {

  width: 100% !important;

  padding: 14px !important;

  background: #0096f0 !important;

  color: #ffffff !important;

  font-weight: 700 !important;

  font-size: 0.95rem !important;

  border: none !important;

  border-radius: 8px !important;

  cursor: pointer !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;

  transition: background 0.25s ease !important;

}



.rp-sidebar-btn-submit:hover {

  background: #333333 !important;

}



/* Sidebar Trending List */

.rp-trending-list {

  display: flex !important;

  flex-direction: column !important;

  gap: 16px !important;

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

}



.rp-trending-item {

  display: flex !important;

  align-items: flex-start !important;

  gap: 12px !important;

}



.rp-trending-num {

  font-size: 1.25rem !important;

  font-weight: 800 !important;

  color: #cbd5e1 !important;

  line-height: 1 !important;

}



.rp-trending-text a {

  font-size: 0.92rem !important;

  font-weight: 700 !important;

  color: var(--navy) !important;

  text-decoration: none !important;

  line-height: 1.35 !important;

  transition: color 0.2s ease !important;

}



.rp-trending-text a:hover {

  color: #0096f0 !important;

}



/* No Results State */

.rp-no-results {

  grid-column: 1 / -1 !important;

  text-align: center !important;

  padding: 60px 20px !important;

  background: #ffffff !important;

  border-radius: 8px !important;

  border: 1px solid #e2e8f0 !important;

}



.rp-no-results-icon {

  font-size: 3rem !important;

  margin-bottom: 12px !important;

}



.rp-no-results h3 {

  font-size: 1.4rem !important;

  font-weight: 800 !important;

  color: var(--navy) !important;

  margin-bottom: 8px !important;

}



.rp-no-results p {

  font-size: 0.95rem !important;

  color: #64748b !important;

  margin-bottom: 20px !important;

}



.rp-btn-reset-filters {

  background: #0096f0 !important;
  color: #ffffff !important;

  padding: 10px 20px !important;

  font-weight: 700 !important;

  border: none !important;

  border-radius: 8px !important;

  cursor: pointer !important;

}











.rp-sidebar-widget-lead .rp-widget-title { color: #ffffff !important; }

.rp-sidebar-widget-lead .rp-widget-subtitle { color: #e2e8f0 !important; }





/* Header/Footer CSS from template */



        /* small extra polish for mobile */

        .line-clamp-2 {

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            overflow: hidden;

        }



        .faq-content p:last-child {

            margin-bottom: 0;

        }



        .faq-btn:focus-visible {

            outline: 2px solid #3b82f6;

            outline-offset: 2px;

        }



        /* Custom color variables */

        :root {

            --primary-red: #2547a0;

            --primary-red-dark: #0096f0;

            --primary-blue: #0F2454;

        }



        .bg-primary-red {

            background-color: #2547a0;

        }



        .bg-primary-red-dark {

            background-color: #0096f0;

        }



        .bg-primary-blue {

            background-color: #0F2454;

        }



        .text-primary-red {

            color: #2547a0;

        }



        .hover\:bg-primary-red:hover {

            background-color: #2547a0;

        }



        .hover\:bg-primary-red-dark:hover {

            background-color: #0096f0;

        }



        .hover\:text-primary-red:hover {

            color: #2547a0;

        }



        .border-primary-red {

            border-color: #2547a0;

        }



        /* Custom Header & Footer Styles for Corporate */

        header {

            position: sticky;

            top: 0;

            z-index: 50;

            background-color: #ffffff;

            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);

            border-bottom: 1px solid #f1f5f9;

        }



        header nav {

            max-width: 1280px;

            margin: 0 auto;

            padding: 1rem 1.5rem;

            display: flex;

            align-items: center;

            justify-content: space-between;

        }



        .logo img {

            height: 48px;

            width: auto;

            object-fit: contain;

        }



        .nav-links {

            display: flex;

            align-items: center;

            gap: 2.25rem;

            list-style: none;

            margin: 0;

            padding: 0;

        }



        .nav-links li a {

            text-decoration: none;

            font-size: 0.875rem;

            font-weight: 600;

            letter-spacing: 0.05em;

            color: #334155;

            transition: color 0.2s ease;

        }



        .nav-links li a:hover {

            color: #2547a0;

        }



        .btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            padding: 0.65rem 1.5rem;

            border-radius: 0.5rem;

            font-weight: 600;

            font-size: 0.875rem;

            cursor: pointer;

            border: none;

            transition: all 0.2s ease;

            text-decoration: none;

        }



        .btn-primary {

            background-color: #2547a0;

            color: #ffffff;

            box-shadow: 0 4px 12px rgba(37, 71, 160, 0.25);

        }



        .btn-primary:hover {

            background-color: #0096f0;

            transform: translateY(-1px);

        }



        .mobile-menu-btn {

            display: none;

            background: none;

            border: none;

            cursor: pointer;

            color: #1e293b;

            padding: 0.5rem;

        }



        .mobile-menu-btn svg {

            width: 24px;

            height: 24px;

        }



        @media (max-width: 1024px) {

            .nav-links {

                display: none;

            }



            .mobile-menu-btn {

                display: block;

            }

        }



        .mobile-menu {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100vh;

            background: #ffffff;

            z-index: 100;

            flex-direction: column;

            padding: 1.5rem;

            overflow-y: auto;

        }



        .mobile-menu.active {

            display: flex;

        }



        .mobile-menu-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 2rem;

        }



        .mobile-menu-close {

            background: none;

            border: none;

            cursor: pointer;

            color: #1e293b;

        }



        .mobile-menu-close svg {

            width: 28px;

            height: 28px;

        }



        .mobile-nav-links {

            list-style: none;

            padding: 0;

            margin: 0 0 2rem 0;

            display: flex;

            flex-direction: column;

            gap: 1.25rem;

        }



        .mobile-nav-links a {

            text-decoration: none;

            font-size: 1.125rem;

            font-weight: 600;

            color: #1e293b;

        }



        footer {

            background-color: #ffffff;

            border-top: 1px solid #e2e8f0;

            padding: 4rem 1.5rem 2rem;

            color: #475569;

        }



        .footer-content {

            max-width: 1280px;

            margin: 0 auto;

        }



        .footer-grid {

            display: grid;

            grid-template-columns: 2.2fr 1fr 1.2fr 1.5fr;

            gap: 3rem;

        }



        @media (max-width: 1024px) {

            .footer-grid {

                grid-template-columns: 1fr 1fr;

                gap: 2rem;

            }

        }



        @media (max-width: 640px) {

            .footer-grid {

                grid-template-columns: 1fr;

                gap: 2rem;

            }

        }



        .footer-brand p {

            font-size: 0.875rem;

            line-height: 1.6;

            color: #64748b;

            margin-bottom: 1.5rem;

        }



        .footer-socials {

            display: flex;

            gap: 0.75rem;

            margin-bottom: 1.5rem;

        }



        .social-icon {

            width: 38px;

            height: 38px;

            border-radius: 50%;

            border: 1px solid #e2e8f0;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #64748b;

            text-decoration: none;

            transition: all 0.2s ease;

        }



        .social-icon svg {

            width: 18px;

            height: 18px;

        }



        .social-icon:hover {

            border-color: #2547a0;

            color: #2547a0;

            background-color: #eff6ff;

        }



        .footer-badges {

            display: flex;

            gap: 0.75rem;

            flex-wrap: wrap;

        }



        .footer-badge {

            display: inline-flex;

            align-items: center;

            gap: 0.5rem;

            padding: 0.4rem 0.8rem;

            border: 1px solid #cbd5e1;

            border-radius: 6px;

            font-size: 0.75rem;

            font-weight: 600;

            color: #334155;

            background: #f8fafc;

        }



        .footer-badge svg {

            width: 16px;

            height: 16px;

            color: #2547a0;

        }



        .footer-section h4 {

            font-size: 0.95rem;

            font-weight: 700;

            color: #0F2454;

            margin-bottom: 1.25rem;

            text-transform: uppercase;

            letter-spacing: 0.05em;

        }



        .footer-links {

            list-style: none;

            padding: 0;

            margin: 0;

            display: flex;

            flex-direction: column;

            gap: 0.75rem;

        }



        .footer-links a {

            color: #64748b;

            font-size: 0.875rem;

            text-decoration: none;

            transition: color 0.2s ease;

        }



        .footer-links a:hover {

            color: #2547a0;

        }



        .footer-contact {

            display: flex;

            flex-direction: column;

            gap: 0.85rem;

        }



        .contact-item {

            display: flex;

            align-items: center;

            gap: 0.75rem;

            color: #64748b;

            font-size: 0.875rem;

            text-decoration: none;

            transition: color 0.2s ease;

        }



        .contact-item:hover {

            color: #2547a0;

        }



        .contact-item svg {

            width: 18px;

            height: 18px;

            color: #2547a0;

            flex-shrink: 0;

        }



        .footer-bottom {

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-wrap: wrap;

            gap: 1rem;

            border-top: 1px solid #e2e8f0;

            padding-top: 2rem;

            margin-top: 3rem;

        }



        .copyright {

            font-size: 0.85rem;

            color: #94a3b8;

            margin: 0;

        }



        .footer-legal {

            display: flex;

            gap: 1.5rem;

        }



        .footer-legal a {

            font-size: 0.85rem;

            color: #94a3b8;

            text-decoration: none;

            transition: color 0.2s ease;

        }



        .footer-legal a:hover {

            color: #2547a0;

        }

    
/* Pagination */
#rp-pagination-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 30px 0;
}

#rp-pagination-bar .rp-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 42px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #101828;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

#rp-pagination-bar .rp-page-num.active {
  background: #0096f0;
  border-color: #0096f0;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#rp-pagination-bar .rp-page-num.disabled,
#rp-pagination-bar .rp-page-num:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

#rp-pagination-bar .rp-page-num:focus-visible {
  outline: 2px solid #0096f0;
  outline-offset: 3px;
}













.rp-listing-hero h1{color:#10184e!important}.rp-sidebar-btn-submit{background:#ff0030!important}.rp-cat-pill.active{background:#ff0030!important;border-color:#ff0030!important}