/* ── TRACK Foundation – Inner Pages Shared CSS ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
--blue:    #1a3a8f;
      --green:   #2e8b2e;
      --orange:  #f5821f;
      --pink:    #c0185e;
  --gold: #e8b400;
   --dark: #0d1b4b;
  --light: #f4f7ff;
  --text: #444;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: #fff;
}

/* ── NAVBAR ── */
 

/* ── PAGE HERO ── */
.page-hero {
  background: linear-gradient(135deg, var(--blue) 0%, #0d2260 100%);
  padding: 5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
  top: -100px; right: -100px;
}
.page-hero::after {
  content: '';
  position: absolute;
  width: 250px; height: 250px;
  background: rgba(201,148,26,.15);
  border-radius: 50%;
  bottom: -60px; left: 10%;
}
.page-hero .breadcrumb-nav {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  margin-bottom: .8rem;
  margin-top: 40px;
}
.page-hero .breadcrumb-nav a { color: var(--gold); text-decoration: none; }
.page-hero .breadcrumb-nav span { margin: 0 .4rem; }
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.2;
}
.page-hero h1 span { color: var(--gold); }
.page-hero p {
  color: rgba(255,255,255,.75);
  font-size: 1rem;
  margin-top: .8rem;
  max-width: 560px;
  line-height: 1.75;
}
.page-hero .hero-tag {
  display: inline-block;
  background: rgba(201,148,26,.2);
  border: 1px solid rgba(201,148,26,.4);
  color: var(--gold);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}

/* ── SECTION TAGS ── */
.section-tag {
  display: inline-block;
  background: rgba(26,58,143,.08);
  color: var(--blue);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 50px;
  margin-bottom: .8rem;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.2;
}
.section-title span { color: var(--blue); }

/* ── REVEAL ANIMATION ── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── FOOTER ── */
 

/* ── SHARED CARD STYLES ── */
.info-card {
  background: #fff;
  border-radius: 18px;
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.05);
  height: 100%;
  transition: transform .3s, box-shadow .3s;
}
.info-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.icon-box {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* ── AWARD TABLE ── */
.table-wrap {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  overflow: hidden;
}
.table thead th {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1rem 1.2rem;
  border: none;
}
.table tbody td {
  padding: .95rem 1.2rem;
  font-size: .9rem;
  vertical-align: middle;
  border-color: rgba(0,0,0,.05);
}
.table tbody tr:hover { background: rgba(26,58,143,.03); }
.year-badge {
  background: rgba(26,58,143,.1);
  color: var(--blue);
  font-size: .78rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border-radius: 50px;
}
.award-name { font-weight: 600; color: var(--dark); }
.media-badge {
  background: rgba(201,148,26,.1);
  color: var(--gold);
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 4px;
  display: inline-block;
}

/* ── CTA STRIP ── */
.cta-strip {
  
}
.cta-strip h2 {
 
}
.cta-strip p { color: rgba(255,255,255,.75); max-width: 520px; margin: 0 auto 2rem; line-height: 1.75; font-size: .95rem; }
.btn-gold {
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: .78rem 2.2rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background .25s, transform .2s;
}
.btn-gold:hover { background: #b07e10; color: #fff; transform: translateY(-2px); }

/* ── PROGRAM HERO CARDS ── */
.program-hero-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
}
.program-hero-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 60%);
}
.program-hero-card .content {
  position: relative;
  z-index: 1;
  padding: 2rem;
  color: #fff;
}
.program-hero-card .content h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; }
.program-hero-card .content p { font-size: .85rem; opacity: .85; margin-top: .3rem; }

/* ── TIMELINE ── */
.timeline { position: relative; padding-left: 2.5rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: .5rem;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(26,58,143,.15);
}
.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -2.1rem;
  top: .35rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(26,58,143,.2);
}
.timeline-year {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.timeline-item h5 { font-weight: 700; color: var(--dark); font-size: 1rem; }
.timeline-item p { font-size: .88rem; color: #666; line-height: 1.7; margin-top: .3rem; }

/* philosophy quote */
.phil-quote {
  border-left: 4px solid var(--gold);
  padding: 1.2rem 1.5rem;
  background: rgba(201,148,26,.06);
  border-radius: 0 12px 12px 0;
  font-size: 1.05rem;
  color: var(--dark);
  line-height: 1.8;
  font-style: italic;
  margin: 1.5rem 0;
}
.principle-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.principle-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}



/*---- Founders Style ----*/
  .founder-profile { background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.1); margin-bottom:4rem; }
    .founder-profile .fp-header { background:linear-gradient(135deg,var(--blue),#0d2260); padding:3rem; color:#fff; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
    .founder-avatar-lg { width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.15); border:4px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-size:2.8rem; color:rgba(255,255,255,.8); flex-shrink:0; overflow:hidden; }
    .founder-avatar-lg img { width:100%; height:100%; object-fit:cover; }
    .fp-header h2 { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:900; margin-bottom:.3rem; }
    .fp-header p { opacity:.8; font-size:.92rem; }
    .medal-badge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(201,148,26,.25); border:1px solid rgba(201,148,26,.5); color:var(--gold); font-size:.78rem; font-weight:600; padding:.3rem .8rem; border-radius:50px; margin-top:.6rem; margin-right:.4rem; }
    .fp-body { padding:2.5rem 3rem; }
    .fp-body p { color:#555; line-height:1.85; font-size:.95rem; margin-bottom:1rem; }
    .achievement-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:1.5rem; }
    .achievement-item { background:var(--light); border-radius:12px; padding:1.2rem; border-left:4px solid var(--blue); }
    .achievement-item h6 { font-weight:700; font-size:.88rem; color:var(--dark); margin-bottom:.2rem; }
    .achievement-item p { font-size:.8rem; color:#777; margin:0; }
    @media(max-width:768px) { .fp-body { padding:1.5rem; } .fp-header { padding:2rem 1.5rem; } }
	
	
	/*---- Environment ----*/
	.env-card { background:#fff; border-radius:18px; padding:2rem; box-shadow:0 4px 20px rgba(0,0,0,.07); height:100%; border-top:4px solid var(--green); transition:transform .3s; }
    .env-card:hover { transform:translateY(-5px); }
    .env-card .ec-icon { width:50px; height:50px; border-radius:14px; background:rgba(46,139,46,.1); color:var(--green); font-size:1.3rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
    .env-card h5 { font-weight:700; color:var(--dark); }
    .env-card p { font-size:.88rem; color:#666; line-height:1.75; margin-top:.4rem; }
	
	/*---- Water Conversation ----*/
	 
    .water-stat { background:#fff; border-radius:18px; padding:2rem; box-shadow:0 4px 20px rgba(0,0,0,.07); text-align:center; height:100%; }
    .water-stat .ws-icon { font-size:2.5rem; margin-bottom:.8rem; display:block; }
    .water-stat h4 { font-family:'Playfair Display',serif; font-size:2rem; font-weight:900; color:#1a6faf; }
    .water-stat p { font-size:.85rem; color:#666; line-height:1.7; margin-top:.3rem; }
    .initiative-card { background:#fff; border-radius:18px; padding:1.8rem; box-shadow:0 4px 20px rgba(0,0,0,.07); height:100%; display:flex; gap:1rem; align-items:flex-start; transition:transform .3s; }
    .initiative-card:hover { transform:translateY(-4px); }
    .init-icon { width:48px; height:48px; border-radius:14px; background:rgba(26,111,175,.1); color:#1a6faf; font-size:1.2rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .initiative-card h5 { font-weight:700; color:var(--dark); font-size:.97rem; }
    .initiative-card p { font-size:.85rem; color:#666; line-height:1.75; margin-top:.3rem; }
	
	/*---- Civil Defence ----*/
	
	    .prong-card { background:#fff; border-radius:18px; padding:1.8rem; box-shadow:0 4px 20px rgba(0,0,0,.07); height:100%; border-top:4px solid var(--orange); transition:transform .3s; }
    .prong-card:hover { transform:translateY(-5px); }
    .prong-num { font-family:'Playfair Display',serif; font-size:2.5rem; font-weight:900; color:var(--orange); opacity:.3; line-height:1; margin-bottom:.3rem; }
    .prong-card h5 { font-weight:700; color:var(--dark); }
    .prong-card p { font-size:.88rem; color:#666; line-height:1.75; margin-top:.4rem; }
	
	/*---- Disaster Relief ----*/
	    .disaster-card { background:#fff; border-radius:18px; padding:2rem; box-shadow:0 4px 20px rgba(0,0,0,.07); height:100%; border-left:5px solid #c91f1f; }
    .disaster-card .dc-icon { font-size:2rem; color:#c91f1f; margin-bottom:.8rem; }
    .disaster-card h5 { font-weight:700; color:var(--dark); }
    .disaster-card p { font-size:.88rem; color:#666; line-height:1.75; margin-top:.4rem; }
    .response-step { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
    .step-num { width:36px; height:36px; border-radius:50%; background:#c91f1f; color:#fff; font-weight:700; font-size:.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
	
	/*---- Women Empowernment ----*/
	    .pillar-card { background:#fff; border-radius:18px; padding:2rem; box-shadow:0 4px 20px rgba(0,0,0,.07); height:100%; text-align:center; transition:transform .3s; }
    .pillar-card:hover { transform:translateY(-6px); }
    .pillar-icon { width:64px; height:64px; border-radius:20px; background:rgba(192,24,94,.1); color:var(--pink); font-size:1.5rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
    .pillar-card h5 { font-weight:700; color:var(--dark); font-size:1rem; }
    .pillar-card p { font-size:.85rem; color:#666; line-height:1.75; margin-top:.4rem; }
	
	/*---- Healthcare ----*/
	.hc-icon-box { background: #fff; border-radius: 20px; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.07); border-top: 4px solid #0d7377; transition: transform .3s, box-shadow .3s; }
    .hc-icon-box:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(0,0,0,.13); }
    .hc-icon-box .ic { width: 64px; height: 64px; border-radius: 50%; background: rgba(13,115,119,.1); color: #0d7377; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1rem; }
    .hc-icon-box h5 { font-weight: 700; color: var(--dark); margin-bottom: .5rem; }
    .hc-icon-box p { font-size: .88rem; color: #666; line-height: 1.7; margin: 0; }
    .camp-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.07); display: flex; flex-direction: column; }
    .camp-card-head { background: linear-gradient(135deg, #0d7377, #14a085); padding: 1.5rem; }
    .camp-card-head i { font-size: 2rem; color: #fff; opacity: .9; }
    .camp-card-head h5 { color: #fff; font-weight: 700; margin: .7rem 0 .2rem; font-size: 1.05rem; }
    .camp-card-head span { color: rgba(255,255,255,.75); font-size: .82rem; }
    .camp-card-body { padding: 1.4rem 1.5rem; flex: 1; }
    .camp-card-body p { font-size: .88rem; color: #666; line-height: 1.7; margin: 0; }
    .health-stat { text-align: center; background: rgba(13,115,119,.06); border-radius: 18px; padding: 2rem 1rem; }
    .health-stat .num { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 900; color: #0d7377; }
    .health-stat .lbl { font-size: .82rem; color: #777; font-weight: 500; margin-top: .25rem; }
    .approach-step { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.5rem; background: #fff; border-radius: 16px; box-shadow: 0 4px 18px rgba(0,0,0,.06); margin-bottom: 1rem; }
    .approach-step .step-num { width: 46px; height: 46px; border-radius: 12px; background: #0d7377; color: #fff; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .approach-step h6 { font-weight: 700; color: var(--dark); margin-bottom: .3rem; }
    .approach-step p { font-size: .87rem; color: #666; line-height: 1.65; margin: 0; }
    .cta-strip { background: linear-gradient(135deg, #0d7377 0%, #14a085 100%); }
	
	/*---- Awards ----*/
	 .award-hero-card { background:#fff; border-radius:20px; box-shadow:0 6px 30px rgba(0,0,0,.08); padding:2rem; display:flex; align-items:flex-start; gap:1.2rem; transition:transform .3s,box-shadow .3s; height:100%; }
    .award-hero-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,.13); }
    .award-num-badge { width:48px; height:48px; border-radius:14px; background:var(--blue); color:#fff; font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .award-hero-card h5 { font-weight:700; color:var(--dark); font-size:.97rem; margin-bottom:.25rem; }
    .award-hero-card .presenter { font-size:.82rem; color:#777; margin-bottom:.3rem; }
    .award-hero-card .year { font-size:.78rem; font-weight:700; color:var(--gold); }
    /* Media Table */
    .media-table thead th { background:var(--blue); color:#fff; font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.9rem 1rem; border:none; white-space:nowrap; }
    .media-table tbody td { font-size:.85rem; padding:.85rem 1rem; vertical-align:middle; border-color:rgba(0,0,0,.05); }
    .media-table tbody tr:hover { background:rgba(26,58,143,.03); }
    .media-note { font-size:.78rem; color:#666; }
    .paper-badge { display:inline-block; background:rgba(201,148,26,.12); color:#9a7010; font-size:.72rem; font-weight:600; padding:.18rem .55rem; border-radius:4px; margin-bottom:.15rem; }
	
	 /* Contact Info Card */
    .contact-info-card { background: linear-gradient(135deg, var(--blue), #2552c9); border-radius: 24px; padding: 2.5rem; color: #fff; height: 100%; }
    .contact-info-card h3 { font-family: 'Playfair Display', serif; font-weight: 700; margin-bottom: .5rem; }
    .contact-info-card p { opacity: .85; line-height: 1.8; font-size: .95rem; margin-bottom: 2rem; }
    .contact-info-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.15); }
    .contact-info-item:last-of-type { border-bottom: none; }
    .contact-info-item .ci-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; color: #fff; }
    .contact-info-item .ci-text strong { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .65; margin-bottom: .2rem; }
    .contact-info-item .ci-text span { font-size: .95rem; opacity: .9; line-height: 1.6; display: block; }
    .contact-info-item .ci-text a { color: #fff; text-decoration: none; opacity: .9; }
    .contact-info-item .ci-text a:hover { opacity: 1; }
 
    /* Form */
    .contact-form-wrap { background: #fff; border-radius: 24px; padding: 2.5rem; box-shadow: 0 12px 50px rgba(0,0,0,.09); }
    .contact-form-wrap h3 { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--dark); margin-bottom: .4rem; }
    .contact-form-wrap p { color: #777; font-size: .92rem; margin-bottom: 1.8rem; }
    .form-label { font-size: .85rem; font-weight: 600; color: #444; margin-bottom: .4rem; }
    .form-control, .form-select { border: 1.5px solid #e0e4ef; border-radius: 12px; padding: .75rem 1rem; font-size: .92rem; color: #333; transition: border-color .25s, box-shadow .25s; }
    .form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,58,143,.1); outline: none; }
    textarea.form-control { resize: vertical; min-height: 130px; }
    .btn-submit { background: linear-gradient(135deg, var(--blue), #2552c9); color: #fff; border: none; border-radius: 50px; padding: .85rem 2.5rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform .25s, box-shadow .25s; width: 100%; }
    .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(26,58,143,.35); }
    .btn-submit i { margin-right: .5rem; }
 
    /* Quick contact boxes */
    .qc-box { background: #fff; border-radius: 18px; padding: 1.8rem; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.07); border-top: 4px solid var(--blue); transition: transform .3s; }
    .qc-box:hover { transform: translateY(-5px); }
    .qc-box .qc-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(26,58,143,.08); color: var(--blue); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto .9rem; }
    .qc-box h6 { font-weight: 700; color: var(--dark); margin-bottom: .3rem; font-size: 1rem; }
    .qc-box p { font-size: .85rem; color: #777; line-height: 1.6; margin: 0; }
    .qc-box a { color: var(--blue); font-weight: 600; font-size: .9rem; text-decoration: none; display: block; margin-top: .6rem; }
 
    /* Map frame */
    .map-wrap { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.1); }
    .map-wrap iframe { display: block; width: 100%; height: 380px; border: none; }
 
    /* Social section */
    .social-connect a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; font-size: 1.1rem; color: #fff; text-decoration: none; transition: transform .25s, opacity .25s; margin: 0 .3rem; }
    .social-connect a:hover { transform: scale(1.15); opacity: .9; }
    .social-connect .fb { background: #1877f2; }
    .social-connect .ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
    .social-connect .tw { background: #1da1f2; }
    .social-connect .li { background: #0077b5; }
    .social-connect .yt { background: #ff0000; }
	
	/*---- Work Style ----*/
	  .work-card { border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 6px 30px rgba(0,0,0,.08); height:100%; transition:transform .3s,box-shadow .3s; display:flex; flex-direction:column; }
    .work-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(0,0,0,.15); }
    .work-card-img { height:220px; background-size:cover; background-position:center; position:relative; }
    .work-card-img .wc-icon { position:absolute; bottom:-22px; left:1.5rem; width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.2); }
    .work-card-body { padding:2rem 1.5rem 1.5rem; flex:1; display:flex; flex-direction:column; }
    .work-card-body h5 { font-weight:700; color:var(--dark); font-size:1.1rem; margin-bottom:.6rem; }
    .work-card-body p { font-size:.88rem; color:#666; line-height:1.75; flex:1; }
    .work-card-body a { display:inline-flex; align-items:center; gap:.4rem; color:var(--blue); font-weight:600; font-size:.88rem; text-decoration:none; margin-top:1rem; transition:gap .2s; }
    .work-card-body a:hover { gap:.7rem; }
    .stat-pill { display:inline-flex; align-items:center; gap:.4rem; background:rgba(26,58,143,.08); color:var(--blue); font-size:.78rem; font-weight:600; padding:.3rem .7rem; border-radius:50px; margin-top:.6rem; margin-right:.3rem; }