body
{
	/*font-family: 'Poppins', sans-serif;*/
	font-family: 'Raleway', sans-serif;
	background: url(../images/bg.jpg) repeat;
}

.header
{
	margin: 10px;
}

.navbar
{
	margin-bottom: 5px;
}

.navbar-inverse
{
	background: none;
	border: none;
	margin-top: 10px;
}

.navbar-inverse .navbar-nav>li>a
{
	color: #ffffff;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: bold;
	padding: 8px;
}

.navbar-inverse .navbar-nav>li>a:hover
{
	color: #ffdd00;
}

.navbar-inverse .navbar-toggle
{
	border: none;
}

.navbar-inverse .navbar-toggle:hover
{
	background: none;
}

.dropdown-menu
{
	background: #03336b;
}

.dropdown-menu li a
{
	text-transform: uppercase;
	font-size: 0.9em;
	font-weight: bold;
	color: #ffffff;
	padding: 5px;
	
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}

.dropdown-menu li a:hover
{
	background-color: #012753;
	color: #ffffff;
}

.ticker
{
	background-color: #002473;
	padding: 10px;
	height: 55px;
	color: #ffffff;
	display: none;
}

.newsticker ul li
{
	margin-left: -25px;
	display:none;
	font-size: 0.9em;
	list-style: none;
}

.newsticker ul li a
{
	color: #ffdd00;
	text-decoration: none;
}

.divider
{
	height: 5px;
	background-color: #ffdd00;
}

.img-block
{
	border: 1px solid #dfdfdf;
	padding: 5px;
	height: 350px;
	/* width: 100%; */
}

.nopadding
{
	margin: 0;
	padding: 0;
}

.breadcrumb
{
	background: none;
	font-size: 1em;
	border-bottom: 1px solid #efefef;
}

.content
{
	/*background: #ffffff url(../images/contentbg.jpg) repeat;*/
	padding: 10px;
	background-color: #f5f5f5;
	font-weight: 600;
	padding-bottom: 30px;
	font-size: 1.1em;
}

.content h2
{
	font-weight: 500;
	font-size: 2em;
	color: #024786;
	text-transform: uppercase;
	
}

.content h3
{
	font-size: 2.5em;
	font-weight: 800;
	color: #00083b;
	text-transform: uppercase;
	text-align: center;
}

.content li
{
	line-height: 35px;
}

.contentdivider
{
	height: 5px;
	background-color: #e5e5e5;
}

.vmheading
{
	text-transform: uppercase;
	font-size: 2.5em;
	font-weight: 800;
	background: #c0d3fd;
	padding: 10px;
	text-align: center;
	color: #021848;
}

.vmcontent
{
	font-size: 1.5em;
	padding-top: 5px;
	background: #e6eaf5;
	height: auto;
	box-shadow: 0px 0px 5px #436ac0;
}

.vmcontent ul
{
	display: block;
	margin-left: -50px;
}

.vmcontent ul li
{
	display: inline;
	margin: 10px;
}

/************** History Time line CSS ****************/
ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: "";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: 'Font Awesome 5 Free';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 33px;
    width: 2px;
    height: 100%;
    z-index: 400;
	font-size: 1.2em;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: "\f073";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: 'Font Awesome 5 Free';
    background: white;
    display: inline-block;
    position: absolute;
    /* border-radius: 50%;
    border: 3px solid #d7ddec; */
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
	font-size: 2em;
	color: #024786;
}
/************** History Time line CSS ****************/

.nav-tabs
{
	border-bottom: 2px dashed #efefef;
	text-align: center;
}

.nav-tabs li>a
{	
	font-size: 1.3em;
	border: none;
}

.nav-tabs li>a:hover
{
	border: none;
	background: #b0c5f5;
	border-radius: 0;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover
{
	background: #0854ff;
	color: #ffffff;
	border-radius: 0;
	border: 0;
}

.achievements .fa
{
	background-color: #dfe4ee;
	padding: 5px;
	border-radius: 50px;
	margin-right: 10px;
}

.personalexcellence
{
	height: 300px; 
	padding: 0; 
	margin: 0;
}

.personalexcellence a
{
	text-decoration: none;
}

.personalexcellencebox
{
	padding: 20px;
	height: 300px;
	background: rgb(0,0,0,0.7);
	
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}

.personalexcellencebox:hover
{
	background: rgb(0,0,0,0.9);
}

.personalexcellencebox h2
{
	color: #ffffff;
	padding: 20px;
	margin-top: 80px;
	text-align: center;
	text-transform: uppercase;
}

.borderless td, .borderless th 
{
    border: none;
}

.facilities
{
	text-transform: uppercase;
	font-size: 1.5em;
	font-weight: 700;
	cursor: pointer;
}

.facilities img
{
	margin-bottom: 10px;
	box-shadow: 0px 0px 15px #bfbfbf;
}

.facilities  [class*=col]
{
	height: 275px;
}

.table th
{
	background-color: #b3c1cf;
}
.schoolorgbox
{
	text-align: left;
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	padding: 10px;
	border: 1px solid #efefef;
	background-color: #dee1e6;
	border-radius: 50px;
}

.schoolorgbox i
{
	background: #f5f5f5;
	padding: 10px;
	border-radius: 50px;
}

.lphsbox  .whylphsbox
{
	padding: 10px;
}

.whylphsbox
{
	color: #1d1701;
	padding: 20px;
	height: 300px;
	text-align: center;
	font-weight: 700;
	border: 1px solid #ededed;
}

.whylphsbox .fa
{
	color: #3c6185;
	font-size: 6em;
	margin-bottom: 10px;
	background: #ffc600;
	padding: 30px;
}

.achievements
{
	list-style: none;
	line-height: 40px;
	font-size: 1.2em;
}

.achievements a
{
	text-decoration: none;
	font-size: 0.8em;
	cursor: pointer;
}

ul.achievements li
{
	margin-left: -35px;
	font-size: 1em;
	line-height: 40px;
}

.contactus h4
{
	font-weight: bold;
	text-transform: uppercase;
}

.newsletterbox
{
	text-align: center;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: 700;
	/* background-color: #f1f1f1; */
	padding: 10px;
	/* line-height: 30px; */
	cursor: pointer;
}

.newsletterbox img
{
	margin-bottom: 5px;
}

.newsletterbox a
{
	text-decoration: none;
	color: #000000;
}

/* .eventbox
{
	text-align: center;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: 700;
	padding: 10px;
	cursor: pointer;
	height: 440px;
}

.eventbox img
{
	margin-bottom: 5px;
}

.eventbox a
{
	text-decoration: none;
	color: #000000;
}

.eventbox .fa
{
	font-size: 15em;
	padding: 10px;
	margin-bottom: 20px;
	color: #d2dbef;
} */


.event_box
{
	border: 1px solid #efefef;
	padding: 10px;
	box-shadow: 0px 0px 5px 1px #dfdfdf;
	margin-bottom: 10px;
	cursor: pointer;
}

.event_box .event_heading
{
	font-size: 1.3rem;
	padding: 10px;
	text-align: center;
	background-color: #e3e4eb;
	height: 70px;
	text-transform: uppercase;
	line-height: 20px;
}

.feedbackcolumn
{
	padding: 10px;
	height: 275px;
	text-align: center;
	font-size: 0.9em;
	line-height: 25px;
	margin-bottom: 20px;
	
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}

.feedbackcolumn:hover
{
	box-shadow: 0px 0px 10px #dfdfdf;
}

.feedbackcolumn i
{
	font-size: 5em;
	margin-bottom: 10px;
	color: #dfdfdf;
}

.feedbackcolumn a
{
	cursor: pointer;
	font-weight: 700;
}

.feedbackcolumn .btn
{
	border-radius: 0;
}

.footer
{
	background-color: #101010;
	padding: 10px;
	overflow: auto;
	color: #ffffff;
	font-size: 0.8em;
}

.footer a
{
	color: #ffdd00;
}

.footer a:hover
{
	color: #998502;
	text-decoration: none;
}

.footer .fab
{
	margin: 5px;
}

.space-50
{
	height: 50px;
}
.space-100
{
	height: 100px;
}
.space-150
{
	height: 150px;
}
.space-200
{
	height: 200px;
}

/* Media Queries */
@media (max-width: 800px)
{
	.ticker
	{
		background-color: #002473;
		padding: 10px;
		height: 150px;
		color: #ffffff;
	}	
	
	.breadcrumb
	{
		font-size: 0.6em;
		text-align: center;
	}
	
	.awardbox
	{
		width: 100%;
	}
	
	.awardbox h2
	{
		margin: 0;
		font-size: 1em;
		color: #232323;
		text-align: center;
	}
	
	.vmcontent
	{
		font-size: 1.5em;
		padding-top: 5px;
		background: #e6eaf5;
		height: auto;
		box-shadow: 0px 0px 5px #436ac0;
	}
	
	.eventbox
	{
		text-align: center;
		text-transform: uppercase;
		font-size: 0.8em;
		background-color: #f1f1f1;
		border: 1px solid #ededed;
		padding: 10px;
		line-height: 40px;
		cursor: pointer;
		margin-bottom: 10px;
	}
	
	.footer
	{
		line-height: 20px;
	}
	
	
	
}


/* ScrollToTop */
a.back-to-top {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 15px;
  text-decoration: none;
}

a.back-to-top i {
  display: block;
  font-size: 22px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #f1f1f1;
  background: #0854ff;
  /* border-radius: 50px; */
  text-align: center;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

a.back-to-top:hover, a.back-to-top:focus {
  text-decoration: none;
}


/*
 * schoolpolicies-custom.css
 * Scoped exclusively to the School Policies page.
 * All rules are prefixed with .sp- to avoid any conflict with global style.css.
 * Link this AFTER style.css on the schoolpolicies.html page only.
 */

/* =============================================
   WRAPPER
   ============================================= */
.sp-policies-wrapper {
	/* max-width: 960px; */
	margin: 30px auto 50px;
	padding: 0 10px;
}

/* =============================================
   POLICY CARD
   ============================================= */
.sp-policy-card {
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(2, 71, 134, 0.08);
	margin-bottom: 28px;
	overflow: hidden;
	border-left: 5px solid #024786;
	transition: box-shadow 0.3s ease;
}

.sp-policy-card:hover {
	box-shadow: 0 6px 24px rgba(2, 71, 134, 0.14);
}

/* Accent variant — Discipline */
.sp-policy-card.sp-card-accent {
	border-left-color: #0854ff;
	background: #f4f7ff;
}

/* Warning variant — Zero Tolerance */
.sp-policy-card.sp-card-warning {
	border-left-color: #c0392b;
	background: #fff8f7;
}

/* Consequences variant */
.sp-policy-card.sp-card-consequences {
	border-left-color: #7f4f00;
	background: #fffbf4;
}

/* =============================================
   CARD HEADER
   ============================================= */
.sp-policy-header {
	display: flex;
	align-items: center;
	padding: 18px 24px 14px;
	border-bottom: 1px solid #eef1f7;
	background: linear-gradient(to right, #f0f4fb, #ffffff);
}

.sp-card-accent .sp-policy-header {
	background: linear-gradient(to right, #e8eeff, #f4f7ff);
}

.sp-card-warning .sp-policy-header {
	background: linear-gradient(to right, #fde8e8, #fff8f7);
}

.sp-card-consequences .sp-policy-header {
	background: linear-gradient(to right, #fdf0dc, #fffbf4);
}

.sp-policy-icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #024786;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16px;
	flex-shrink: 0;
}

.sp-card-accent .sp-policy-icon {
	background: #0854ff;
}

.sp-card-warning .sp-policy-icon {
	background: #c0392b;
}

.sp-card-consequences .sp-policy-icon {
	background: #7f4f00;
}

.sp-policy-icon .fas {
	color: #ffffff !important;
	font-size: 1.1em;
}

.sp-policy-title {
	font-family: 'Playfair Display', 'Raleway', serif !important;
	font-size: 1.35em !important;
	font-weight: 700 !important;
	color: #012753 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

.sp-card-warning .sp-policy-title {
	color: #7a1a1a !important;
}

.sp-card-consequences .sp-policy-title {
	color: #5c3700 !important;
}

/* =============================================
   CARD BODY
   ============================================= */
.sp-policy-body {
	padding: 20px 24px 24px;
}

.sp-policy-body p {
	color: #333;
	line-height: 1.75;
	margin-bottom: 12px;
	font-size: 0.97em;
}

/* =============================================
   ORDERED LIST
   ============================================= */
ol.sp-list {
	padding-left: 20px;
	margin: 0;
	color: #333;
}

ol.sp-list li {
	line-height: 1.75 !important;
	padding: 6px 0 6px 6px;
	font-size: 0.97em;
	border-bottom: 1px dashed #e8ecf5;
}

ol.sp-list li:last-child {
	border-bottom: none;
}

/* =============================================
   BULLET LIST
   ============================================= */
ul.sp-list-bullet {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

ul.sp-list-bullet li {
	padding: 7px 0 7px 26px;
	position: relative;
	line-height: 1.75 !important;
	font-size: 0.97em;
	color: #333;
	border-bottom: 1px dashed #e8ecf5;
}

ul.sp-list-bullet li:last-child {
	border-bottom: none;
}

ul.sp-list-bullet li::before {
	content: "\f058";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #024786;
	position: absolute;
	left: 2px;
	top: 9px;
	font-size: 0.85em;
}

/* =============================================
   ZERO TOLERANCE LIST
   ============================================= */
ul.sp-zero-tolerance-list {
	list-style: none;
	padding-left: 0;
	margin: 10px 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
}

ul.sp-zero-tolerance-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.6 !important;
	font-size: 0.95em;
	color: #3d0a0a;
	padding: 5px 0;
}

ul.sp-zero-tolerance-list li .fas {
	color: #c0392b;
	margin-top: 3px;
	flex-shrink: 0;
}

/* Fallback: single column on narrow screens */
@media (max-width: 600px) {
	ul.sp-zero-tolerance-list {
		grid-template-columns: 1fr;
	}
}

/* =============================================
   SECTION LABEL (small caps heading inside body)
   ============================================= */
.sp-section-label {
	text-transform: uppercase;
	font-size: 0.8em !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #7a1a1a;
	margin-bottom: 10px !important;
}

/* =============================================
   HIGHLIGHT TEXT (Discipline card)
   ============================================= */
.sp-highlight-text {
	font-size: 1em !important;
	font-style: italic;
	color: #012753;
	border-left: 4px solid #0854ff;
	padding-left: 16px;
	margin: 0;
	line-height: 1.85 !important;
}

/* =============================================
   NOTE
   ============================================= */
.sp-note {
	margin-top: 16px !important;
	padding: 12px 16px;
	background: #f0f4fb;
	border-radius: 4px;
	font-size: 0.9em !important;
	color: #555;
	line-height: 1.65 !important;
}

.sp-card-warning .sp-note {
	background: #fde8e8;
	color: #7a1a1a;
}

.sp-note-italic {
	font-style: italic;
}

.sp-note .fas {
	margin-right: 6px;
	color: #7f4f00;
}

/* =============================================
   UNIFORM GRID
   ============================================= */
.sp-uniform-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 16px;
}

@media (max-width: 600px) {
	.sp-uniform-grid {
		grid-template-columns: 1fr;
	}
}

.sp-uniform-item {
	background: #f5f8ff;
	border: 1px solid #dce6f7;
	border-radius: 5px;
	padding: 14px 16px;
}

.sp-uniform-label {
	font-size: 0.82em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #024786;
	margin-bottom: 6px;
}

.sp-uniform-label .fas {
	margin-right: 6px;
}

.sp-uniform-item p {
	margin: 0 !important;
	font-size: 0.95em;
	color: #333;
}

/* =============================================
   CONSEQUENCES GRID
   ============================================= */
.sp-consequences-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 16px 0;
}

@media (max-width: 600px) {
	.sp-consequences-grid {
		grid-template-columns: 1fr;
	}
}

.sp-consequence-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fffdf6;
	border: 1px solid #f0d8a0;
	border-radius: 5px;
	padding: 14px;
}

.sp-consequence-item .fas {
	color: #7f4f00;
	font-size: 1.2em;
	flex-shrink: 0;
	margin-top: 2px;
}

.sp-consequence-item span {
	font-size: 0.93em;
	color: #3a2a00;
	line-height: 1.5;
}

/* =============================================
   Programme Thumbnail Scroller
   ============================================= */
.sc-wrap {
    position: relative;
    overflow: hidden;
    padding: 10px 40px;
    box-sizing: border-box;
}

.sc-track {
    display: flex;
    transition: transform 0.35s ease;
}

.sc-item {
    flex: 0 0 12.5%;
    box-sizing: border-box;
    padding: 4px 6px;
}

.sc-item img {
    width: 100%;
    height: auto;
    display: block;
}

.sc-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #024786;
    color: #ffffff;
    font-size: 1.4em;
    cursor: pointer;
    z-index: 5;
    line-height: 1;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
}

.sc-btn:hover {
    background: #ffdd00;
    color: #00083b;
}

.sc-btn.l { left: 4px; }
.sc-btn.r { right: 4px; }

@media (max-width: 768px) {
    .sc-item { flex: 0 0 25%; }
	.content h3{font-size: 2em;}
	.copyright-line{line-height: 16px; margin-bottom: 20px;}
	.podar-edcation-network{margin-bottom: 10px; margin-top: 10px;}
}

@media (max-width: 480px) {
    .sc-item { flex: 0 0 33.33%; }
}

/*
 * schoolpolicies-buttons.css
 * Exclusive CSS for the Policy Document Download Buttons section.
 * Scoped with .sp-docbtn- prefix to avoid conflicts with global styles.
 * Link this AFTER schoolpolicies-custom.css on schoolpolicies.html.
 */

/* =============================================
   SECTION WRAPPER
   ============================================= */
.sp-docbtn-section {
	margin: 36px 0 10px;
	padding: 28px 28px 32px;
	background: linear-gradient(135deg, #f0f4fb 0%, #ffffff 60%, #eef3fc 100%);
	border-radius: 8px;
	border: 1px solid #dce6f7;
	box-shadow: 0 2px 14px rgba(2, 71, 134, 0.07);
}

/* =============================================
   SECTION HEADING
   ============================================= */
.sp-docbtn-heading {
	font-family: 'Playfair Display', 'Raleway', serif !important;
	font-size: 1.15em !important;
	font-weight: 700 !important;
	color: #012753 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em;
	margin: 0 0 6px 0 !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}

.sp-docbtn-subtext {
	font-size: 0.88em !important;
	color: #6b7a99 !important;
	margin: 0 0 22px 0 !important;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sp-docbtn-divider {
	height: 3px;
	width: 48px;
	background: linear-gradient(to right, #024786, #0854ff);
	border-radius: 2px;
	margin-bottom: 22px;
}

/* =============================================
   BUTTON GROUP LAYOUT — 3 columns in one row
   ============================================= */
.sp-docbtn-group {
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: stretch;
}

/* =============================================
   INDIVIDUAL BUTTON — vertical card style
   ============================================= */
.sp-docbtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	padding: 22px 18px 18px;
	background: #ffffff;
	border: 1px solid #cdd9ef;
	border-top: 5px solid #024786;
	border-radius: 6px;
	text-decoration: none !important;
	color: #012753 !important;
	font-family: 'Raleway', sans-serif;
	font-size: 0.97em;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(2, 71, 134, 0.06);
	transition: all 0.28s ease;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.sp-docbtn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(2, 71, 134, 0.04), transparent);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.sp-docbtn:hover {
	border-top-color: #0854ff;
	background: #f4f7ff;
	box-shadow: 0 6px 20px rgba(2, 71, 134, 0.13);
	transform: translateY(-3px);
	color: #0854ff !important;
	text-decoration: none !important;
}

.sp-docbtn:hover::before {
	opacity: 1;
}

.sp-docbtn:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(2, 71, 134, 0.08);
}

/* =============================================
   BUTTON TOP (icon + label) — stacked centrally
   ============================================= */
.sp-docbtn-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex: 1;
	width: 100%;
}

.sp-docbtn-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #024786, #0854ff);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.28s ease;
}

.sp-docbtn:hover .sp-docbtn-icon {
	background: linear-gradient(135deg, #0854ff, #024786);
}

.sp-docbtn-icon .fas {
	color: #ffffff !important;
	font-size: 1.1em;
}

.sp-docbtn-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
}

.sp-docbtn-title {
	font-size: 0.9em;
	font-weight: 700;
	color: #012753;
	line-height: 1.35;
	transition: color 0.28s ease;
}

.sp-docbtn:hover .sp-docbtn-title {
	color: #0854ff;
}

.sp-docbtn-meta {
	font-size: 0.72em;
	font-weight: 600;
	color: #8a97b5;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

/* =============================================
   BUTTON BOTTOM (download pill + arrow) — centred
   ============================================= */
.sp-docbtn-right {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	width: 100%;
}

.sp-docbtn-pill {
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #024786;
	background: #e4edf9;
	padding: 5px 14px;
	border-radius: 50px;
	transition: background 0.28s ease, color 0.28s ease;
}

.sp-docbtn:hover .sp-docbtn-pill {
	background: #0854ff;
	color: #ffffff;
}

.sp-docbtn-arrow {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #cdd9ef;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.28s ease, background 0.28s ease;
}

.sp-docbtn-arrow .fas {
	color: #024786 !important;
	font-size: 0.8em;
	transition: color 0.28s ease, transform 0.28s ease;
}

.sp-docbtn:hover .sp-docbtn-arrow {
	border-color: #0854ff;
	background: #0854ff;
}

.sp-docbtn:hover .sp-docbtn-arrow .fas {
	color: #ffffff !important;
	transform: translateY(2px);
}

/* =============================================
   COLOUR ACCENTS PER BUTTON
   ============================================= */
/* Button 2 — amber accent */
.sp-docbtn.sp-docbtn--amber {
	border-top-color: #b36b00;
}
.sp-docbtn.sp-docbtn--amber:hover {
	border-top-color: #d4820a;
	background: #fffbf2;
	color: #7f4f00 !important;
}
.sp-docbtn.sp-docbtn--amber .sp-docbtn-icon {
	background: linear-gradient(135deg, #b36b00, #d4820a);
}
.sp-docbtn.sp-docbtn--amber:hover .sp-docbtn-title { color: #7f4f00; }
.sp-docbtn.sp-docbtn--amber:hover .sp-docbtn-pill {
	background: #b36b00;
	color: #ffffff;
}
.sp-docbtn.sp-docbtn--amber:hover .sp-docbtn-arrow {
	border-color: #b36b00;
	background: #b36b00;
}

/* Button 3 — teal accent */
.sp-docbtn.sp-docbtn--teal {
	border-top-color: #005f73;
}
.sp-docbtn.sp-docbtn--teal:hover {
	border-top-color: #0a7c8c;
	background: #f0fafb;
	color: #004d5e !important;
}
.sp-docbtn.sp-docbtn--teal .sp-docbtn-icon {
	background: linear-gradient(135deg, #005f73, #0a7c8c);
}
.sp-docbtn.sp-docbtn--teal:hover .sp-docbtn-title { color: #004d5e; }
.sp-docbtn.sp-docbtn--teal:hover .sp-docbtn-pill {
	background: #005f73;
	color: #ffffff;
}
.sp-docbtn.sp-docbtn--teal:hover .sp-docbtn-arrow {
	border-color: #005f73;
	background: #005f73;
}

/* =============================================
   RESPONSIVE — stack vertically on mobile
   ============================================= */
@media (max-width: 768px) {
	.sp-docbtn-group {
		flex-direction: column;
	}

	.sp-docbtn {
		flex-direction: row;
		align-items: center;
		text-align: left;
		padding: 14px 16px;
	}

	.sp-docbtn-left {
		flex-direction: row;
		gap: 12px;
	}

	.sp-docbtn-label {
		text-align: left;
	}

	.sp-docbtn-right {
		margin-top: 0;
		margin-left: auto;
		width: auto;
		justify-content: flex-end;
	}

	.sp-docbtn-pill {
		display: none;
	}

	.sp-docbtn-section {
		padding: 20px 16px 24px;
	}
}