/* Section */
.rr-test{background:#fff;padding:60px 0;border-bottom:1px solid #e9ecef;}
.rr-ti{max-width:1140px;margin:0 auto;padding:0 15px;}

/* Slider */
.rr-slider{
  overflow:hidden;
  position:relative;
  cursor:grab;
}

/* Track */
.rr-slider-track{
  display:flex;
  gap:18px;
  width:max-content;
  will-change:transform;
}

/* Card */
.rr-tc{
  flex:0 0 320px;
  max-width:320px;
  background:#f8f9fa;
  border:2px solid #001376;
  border-radius:12px;
  padding:20px;
  text-decoration:none;
  color:#111;
  transition:transform .2s, box-shadow .2s;
}

.rr-tc:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.rr-tc-proof{width:100%;height:56px;border-radius:8px;overflow:hidden;position:relative;background:linear-gradient(135deg,#e9ecef 0%,#dee2e6 100%);}
  .rr-tc-proof-blur{position:absolute;inset:0;backdrop-filter:blur(5px);background:rgba(255,255,255,0.25);z-index:1;}
  .rr-tc-proof-text{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:100%;font-size:11px;font-weight:700;color:#16a34a;background:rgba(255,255,255,0.8);margin:8px auto;padding:4px 14px;border-radius:4px;width:fit-content;}
  .rr-tc-proof-caption{font-size:9px;color:#adb5bd;text-align:center;margin-top:4px;}

/* Badge */
.rr-tc-badge{
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
  display:inline-block;
  margin-bottom:10px;
}

.q1{background:#dbeafe;color:#0d6efd;}
.q2{background:#dcfce7;color:#16a34a;}
.q3{background:#fef3c7;color:#d97706;}
.q4{background:#ede9fe;color:#7c3aed;}

/* Text */
.rr-tc-quote{font-size:14px;line-height:1.6;margin-bottom:10px;}
.rr-tc-timeline{font-size:12px;color:#0d6efd;font-weight:600;margin-bottom:10px;}
.rr-tc-attr{font-size:12px;color:#6c757d;margin-bottom:10px;}
.rr-tc-cs-link{font-size:12px;font-weight:600;color:#001376;margin-top:10px;}

/* Fade edges */
.rr-slider::before,
.rr-slider::after{
  content:'';
  position:absolute;
  top:0;
  width:80px;
  height:100%;
  z-index:2;
  pointer-events:none;
}

.rr-slider::before{
  left:0;
  background:linear-gradient(to right,#fff,transparent);
}

.rr-slider::after{
  right:0;
  background:linear-gradient(to left,#fff,transparent);
}

/* Mobile */
@media(max-width:600px){
  .rr-tc{flex:0 0 260px;}
}

	
	
	
/* =========================
Pills Container
========================= */
.rr-more {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin-top: 28px;
}

/* =========================
Pills
========================= */
.rr-mp {
font-size: 11px;
color: #6c757d;
background: #fff;
border: 1px solid #e9ecef;
padding: 5px 14px;
border-radius: 20px;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
}

.rr-mp:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.rr-mp.active {
background: #212529;
color: #fff;
border-color: #212529;
}

/* =========================
Floating Card
========================= */
.rr-hover-card {
position: absolute;
z-index: 999;
opacity: 0;
transform: translate(-50%, 10px) scale(0.96);
pointer-events: none;
transition: all 0.25s ease;
}

.rr-hover-card.show {
opacity: 1;
transform: translate(-50%, 0) scale(1);
pointer-events: auto;
}

.rr-card-inner {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 12px 14px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
min-width: 200px;
}

/* Title */
.rr-card-title {
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
color: #212529;
}

/* Content */
.rr-card-content {
font-size: 12px;
color: #6c757d;
line-height: 1.5;
}

.rr-sec{
padding:60px 0;
background:#f8f9fa;
border-top:1px solid #e9ecef;
border-bottom:1px solid #e9ecef;
}

.rr-wrap{
max-width:1140px;
margin:auto;
padding:0 15px;
}

/* Header */
.rr-head{
text-align:center;
margin-bottom:40px;
}
.rr-head p{
color:#6c757d;
max-width:640px;
margin:auto;
}

/* Stats */
.rr-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin:30px 0;
}
.rr-stat{
background:#001376;
border:1px solid #e9ecef;
border-radius:10px;
padding:18px;
text-align:center;
font-size:20px
}
.rr-stat span{color:#ffffff;}

.rr-statis{font-size:12px;color: #ffffff;}

.rr-slider {
overflow: hidden;
position: relative;
}


.rr-flex {
display: flex;
gap: 16px;
width: max-content;
}

/* Optional: pause cursor feel */
.rr-slider:hover {
cursor: pointer;
}

/* Hide scrollbar by default */
scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar (Chrome, Edge, Safari) */
.rr-flex::-webkit-scrollbar {
height: 0px;
}

/* Show scrollbar on hover */
.rr-flex:hover {
scrollbar-width: thin; /* Firefox */
}

.rr-flex:hover::-webkit-scrollbar {
height: 6px;
}

.rr-flex:hover::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}

/* Grid */
.rr-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

@media(max-width:768px){
.rr-grid{grid-template-columns:1fr;}
.rr-stats{grid-template-columns:repeat(2,1fr);}
}


/* Card */
.rr-card{
background:#fff;
border:2px solid #001376;
border-radius:12px;
overflow:hidden;
transition:0.3s;
cursor:pointer;
height:max-content;
flex:1;
max-width: 380px;
}

.rr-card:hover{
border-color:#001376;
box-shadow:0 8px 22px rgba(0,0,0,0.06);
}

/* Top */
.rr-top{
padding:18px;
}

.rr-title{
margin-bottom:10px;
}

.rr-meta{
display:flex;
gap:16px;
margin-bottom:8px;
}

.rr-meta div{
display:flex;
flex-direction:column;
}

.rr-proof{
color:#16a34a;
}

/* Expand Area */
.rr-expand{
max-height:0;
overflow:hidden;
transition:max-height 0.4s ease;
border-top:1px solid #f1f3f5;
background:#fff;
}

/* Hover expand (desktop preview) */
@media(min-width:769px){
.rr-card:hover .rr-expand{
max-height:500px;
}
}

/* Click expand */
.rr-card.open .rr-expand{
max-height:600px;
}

/* Content */
.rr-content{
padding:16px;
}

.rr-row{
display:flex;
justify-content:space-between;
padding:5px 0;
border-bottom:1px solid #f1f3f5;
}

.rr-row:last-child{
border:none;
}

.rr-tags{
margin-top:10px;
display:flex;
flex-wrap:wrap;
gap:6px;
}

.rr-tags span{
background:#e7f1ff;
color:#0d6efd;
padding:4px 8px;
border-radius:6px;
}

.rr-note{
margin-top:8px;
color:#adb5bd;
font-style:italic;

}



.testimonial-marquee {
overflow: hidden;
position: relative;
width: 100%;
}

.testimonial-marquee .row {
display: flex;
flex-wrap: nowrap;   /* IMPORTANT */
align-items: stretch;
will-change: transform;
}

.testimonial-block {
flex: 0 0 300px;     /* fixed width */
margin-right: 20px;
}






.quote-icon::before {
all: unset;
content: "\f10e";
font-family: "Font Awesome 5 Free";
font-weight: 900;

position: absolute;
top: 10px;
left: 15px;
font-size: 50px;
color: #555;
opacity: 0.1;
}


.quote-icon::after {
all: unset;
position: absolute;
left: 25px;
bottom: -15px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #ffffff;
z-index: 1;
content: "";
}

.quote-icon {
position: relative;
}





/* RESET */
.card body {
	margin: 0;
	font-family: inherit;
	background: #ffffff;
	font-size: 16px;
}

/* SLIDER */
.slider {
	overflow: hidden;
	width: 100%;
	padding: 40px 20px;
}

/* TRACK */
.slider-track {
	display: flex;
	gap: 24px; /* slightly more space helps */
	transition: transform 0.5s ease;
}

/* CARD */
.card {
	border-color: #ffffff;
	width: 200px;
	height: 240px;
	perspective: 1200px;
	flex-shrink: 0;
	position: relative;
	transform: translateZ(0); /* 🔥 creates its own layer */
}

/* ACTIVE CARD ON TOP */
.card:hover {
	z-index: 999; /* 🔥 strong priority */
}

/* INNER */
.card-inner {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
	border-radius: 16px;
}

/* FLIP */
.card:hover .card-inner {
	transform: rotateY(180deg);
}

/* FRONT & BACK */
.card-front,
.card-back {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 3px solid #001376;
}

/* FRONT */
.card-front {
	background: #001376;
	flex-direction: column;
	color: #ffffff;
}

/* IMAGE */
.card-front img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #ffffff;
	margin-bottom: 15px;
	background: #ffffff;
}

/* BACK */
.card-back {
	background: #ffffff;
	color: #001376;
	transform: rotateY(180deg);
	flex-direction: column;
	text-align: center;
	padding: 20px;
}

/* TEXT */
.card-back h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.card-back p {
	font-size: 15px;
	margin: 4px 0;
}



.statblk-wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	text-align: center;
}

.statblk-box {
	padding: 30px 20px;
}

/* Unique background colors */
.statblk-bg1 {
	background: #f1f2fc;
}

.statblk-bg2 {
	background: #f5f4ff;
}

.statblk-bg3 {
	background: #fff4e7;
}

.statblk-bg4 {
	background: #fff0de;
}

.statblk-box img {
	width: 50px;
	margin-bottom: 15px;
}

.statblk-highlight {
	color: #d23a3a;
	font-weight: bold;
}

.statblk-text {
	font-size: 18px;
	line-height: 1.4;
}

.button-cont {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	/* centers buttons horizontally */
	gap: 10px !important;
	/* space between buttons */
}

.three-phase-section {
	margin-top: 240px;
	/* Default for normal/desktop */
}

/* Responsive: reset margin on smaller screens */
@media (max-width: 768px) {
	.three-phase-section {
		margin-top: 0;
		/* Normal margin in responsive view */
	}
}

/* Research Section */
.research-section {
	padding: 0 50px 80px;
}

.sec-title {
	text-align: center;
	margin-bottom: 30px;
}

.sub-title {
	font-size: 16px;
	color: #666;
}

.sec-title h2 {
	font-size: 28px;
	font-weight: 700;
	margin: 10px 0;
}

.divider {
	display: inline-block;
	width: 60px;
	height: 3px;
	background: #222;
	margin-top: 10px;
}

/* Slider Wrapper */
.slider-wrapper {
	position: relative;
	overflow: visible;
	width: 100%;
	display: flex;
	/* NEW */
	justify-content: center;
}

/* SLIDER — horizontal scroll */
.slider-container {
	display: flex;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	gap: 12px;
	padding-bottom: 15px;

	position: relative;
	z-index: 1;

	scrollbar-width: none;
	-ms-overflow-style: none;
}

.slider-container::-webkit-scrollbar {
	display: none;
}

/* TAGS */
.domain-tag {
	flex-shrink: 0;
	scroll-snap-align: start;
	padding: 12px 18px;
	background: #f5f5f5;
	border-radius: 25px;
	cursor: pointer;
	font-size: 15px;
	border: 1px solid #ddd;
	position: relative;
	transition: 0.2s ease;
	white-space: nowrap;
	overflow: visible;
	z-index: 20;
}

.domain-tag:hover {
	background: #fff;
	border-color: #bbb;
}

/* TOOLTIP (body-level floating tooltip) */
.domain-tag::after {
	content: attr(data-info);

	/* detach from DOM layer issues */
	position: fixed;

	/* updated dynamically by JS */
	top: calc(var(--tooltip-top) - 45px);
	left: var(--tooltip-left);

	padding: 8px 12px;
	background: #222;
	color: #fff;
	font-size: 13px;
	border-radius: 6px;
	white-space: nowrap;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	z-index: 999999999;

	transition: opacity .15s ease;
}

.domain-tag:hover::after {
	opacity: 1;
	visibility: visible;
}

/* Arrow Buttons */
.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #000000aa;
	color: #fff;
	border: none;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;

	/* this normally breaks tooltips */
	backdrop-filter: blur(4px);

	z-index: 50;
}

.slider-arrow:hover {
	background: #000;
}

.arrow-left {
	left: -10px;
}

.arrow-right {
	right: -10px;
}

@media (max-width: 600px) {
	.research-section {
		padding: 0 20px 60px;
	}
}

/* ////////////////////// */
.research-cards-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.research-cards {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	overflow-x: auto;
	overflow-y: visible;
	padding-bottom: 20px;
	width: 100%;
	flex-wrap: nowrap;

	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.rc-card {
	padding: 10px 20px;
	border: 1px solid #e4e6f0;
	border-radius: 5px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
	background: white;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 8px;
	transition: all 0.3s ease-in-out;
	position: relative;
	min-height: 75px;
	min-width: 200px;
	max-width: 250px;
	z-index: 1;
}

.rc-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
	background: #071248;
	color: white;
	z-index: 10;
}

/* Badge strip - hidden by default */
.rc-badge-strip {
	display: flex;
	flex-direction: column;
	gap: 0px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}

/* Show badges on hover */
.rc-card:hover .rc-badge-strip {
	max-height: 200px;
	opacity: 1;
	gap: 6px;
	margin-top: 6px;
}

/* Badge styles */
.rc-card-badge-platinum {
	background: linear-gradient(135deg, #fdfdfd 0%, #e8e8ea 20%, #d9d9db 40%, #f2f2f4 60%, #cfcfd1 80%, #e6e6e8 100%);
}

.rc-card-badge-diamond {
	background: linear-gradient(135deg, #ffffff 0%, #e3f0ff 20%, #cce4f9 40%, #f7fbff 60%, #b8d6ef 80%, #eef7ff 100%);
}

.rc-card-badge-gold {
	background: linear-gradient(135deg, #f9e6a1 0%, #f7d774 30%, #eac45c 60%, #f8e08c 100%);
}

.rc-card-badge-silver {
	background: silver;
}

.rc-card-badge-bronze {
	background: #CD7F32;
}

.research-cards:hover,
.research-cards:active {
	scrollbar-color: #888 #f1f1f1;
	/* Firefox */
}

/* Webkit browsers (Chrome, Safari, Edge) */
.research-cards::-webkit-scrollbar {
	height: 8px;
}

.research-cards::-webkit-scrollbar-track {
	background: transparent;
}

.research-cards::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 10px;
	transition: background 0.3s ease;
}

.research-cards:hover::-webkit-scrollbar-thumb {
	background: #888;
}

.research-cards::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/* //////////////////////////////////// */

/* Quiz Floating Widget */
.quiz-widget {
	position: fixed;
	bottom: 165px;
	right: 24px;
	display: flex;
	align-items: center;
	cursor: pointer;
	z-index: 9999;
	font-family: Arial, sans-serif;
}

.quiz-icon {
	width: 40px;
	height: 40px;
	animation: bounce 2s infinite;
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-10px);
	}

	60% {
		transform: translateY(-5px);
	}
}

.quiz-panel {
	background: #fff;
	padding: 12px 18px;
	border-radius: 10px;
	margin-right: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: translateX(20px);
	transition: 0.3s;
}

.quiz-widget:hover .quiz-panel {
	opacity: 1;
	transform: translateX(0);
}