html {
	scroll-behavior: scroll;
}

body {
	font-family: Poppins, system-ui, sans-serif;
	height: auto;
	border-radius: 6px;
	angle: 0 deg;
	opacity: 1;
	/* background-image: linear-gradient(to right, #223486, #0C122C);  */
	overflow-x: hidden;
	scroll-behavior: smooth;
}
.fs-18{
	font-size: 18px !important;
}
.left-4{
	left:-4rem !important;
}
<!--
/* Header Start-->.sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
	z-index: 1050;
	display: flex;
	align-items: center;
	transition: background-color 260ms ease, box-shadow 260ms ease,
		backdrop-filter 260ms ease;
	background-color: rgba(255, 255, 255, 0); transparent initially
	padding: 0 1rem;
}

header contents
.sticky-header .brand {
	font-weight: 700;
	font-size: 1.15rem;
	color: #2b2f3a;
	margin-right: auto;
}

.sticky-header .nav {
	gap: .75rem;
}

The glassy state
.sticky-header.scrolled {
	background-color: rgba(255, 255, 255, 0.60);
	-webkit-backdrop-filter: blur(8px) saturate(120%);
	backdrop-filter: blur(8px) saturate(120%);
	box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
}

#mainNav {
	background: transparent;
	transition: all 0.3s ease;
	backdrop-filter: none;
}

#mainNav.scrolled {
	background: rgba(255, 255, 255, 0.7); white translucent
	backdrop-filter: blur(10px); glassy blur effect
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

 *//* Fallback for non-supporting browsers: slightly more opaque */
@
supports not ((-webkit-backdrop-filter: blur (0)) or (backdrop-filter: blur
	 (0))) { .sticky-header .scrolled {
	background-color: rgba(255, 255, 255, 0.92);
}

}

/* space for fixed header so content isn't hidden */
main {
	padding-top: 80px;
}

/* Reduced motion preference */
@media ( prefers-reduced-motion : reduce) {
	.sticky-header {
		transition: none !important;
	}
}
.w5 {
width:5rem;
}
.floatingNew {
left:-0.5rem;
}
.floatingCloseBtn {
    top: -0.5rem;
    right: -0.5rem;
    font-size: 0.8rem;
    }
.w-7 {
    width: 7.25rem;
    }
.floatingIcon {
	z-index:1050;
	top:4rem;
	right:1rem;
}
.start-90 {
 left: 90%;
}
@keyframes pulseBlink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse-badge {
  animation: pulseBlink 1.8s ease-in infinite;
}
@keyframes floatSlow {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

.animate-float {
  animation: floatSlow 6s ease-in-out infinite;
}


.studImg {
	height: 35.5rem
}
/* WRAPPER */
.logo-scroll-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.zone-card {
	cursor: pointer;
}

.zone-card.active {
	background-color: hsl(226 48% 24%) !important;
	color: white !important;
	border-color: transparent !important;
}

.zone-card.active h6, .zone-card.active p, .zone-card.active i {
	color: white ;  /* imp remove 'coz P. zone is affected. */
}

#practiceZone .zone-card {
	cursor: pointer;
}

#practiceZone .zone-card.active {
	--bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
	border: 2px solid hsl(226 48% 24%) !important;
}

#practiceZone .zone-card.active h6, .zone-card.active p, .zone-card.active i {
	color: black ;
	border-color: transparent !important;
	
}
.zone-card.active .white {
	color: white !important; 
}
.pzBgGradient {
		background: url('images/PracticeZoneGrad.png') no-repeat center / cover !important;
}
.feature-card {
  background: #ffffff !important;
  border: 1px solid #e9ecef !important ;
  border-radius: 14px !important;
  padding: 13px 7px !important;
  transition: all 0.2s ease-in-out !important;
}

.feature-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}
.feature-card h6 {
	margin-top:0.5rem;
	font-size:0.85rem;
}

.feature-card small {
	font-size:0.75rem;
}



.feature-pill {
    background: #f2f4f780;
    color: #202e5b;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  }

  /* Cards */
  .pricing-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e6eaf2;
    padding: 28px;
    height: 100%;
    transition: border 0.25s ease;
  }

  .pricing-card:hover {
    border-color: #c9d2ff;
  }

  .pricing-card.active {
    border: 1.5px solid hsl(226 48% 24%);
    box-shadow: 0 12px 32px rgba(16,24,40,0.08);
  }

  .practice-card {
    border: 1.5px solid #edf0f7;
    transition: all 0.3s ease;
    background: #fff;
  }

  .practice-card:hover {
    border-color: #e5e7eb;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
  }

  .practice-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #1f2a56;
  }

  .practice-subtitle {
    font-size: 13px;
    line-height: 18px;
    color: #7a83b6;
  }

  .practice-muted {
    font-size: 14px;
    line-height: 20px;
    color: #7b83a6;
  }
   .pack-option {
    border: 1.5px solid #d7dbef;
    border-radius: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .pack-option:hover {
    background: #f6f7fc;
  }

  .pack-option input:checked + .pack-content {
    border-color: #1f2a56;
  }
  .pack-content {
    border-radius: 10px;
    padding: 12px 14px;
  }

  .price {
    font-size: 16px;
    font-weight: 700;
    color: #1f2a56;
  }
  .coming-soon {
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: #8b93c4;
  }

  .feature-item {
    font-size: 14px;
    line-height: 22px;
    color: #4a517a;
  }

  .disabled-btn {
    height: 44px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 999px;
    background: #f4f6fb;
    border: 1px solid #e3e7f0;
    color: #9aa3b2;
  }
  .testimonial-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
  .tab-btn {
    border-radius: 999px;
    padding: 10px 20px;
    background: #f1f3f7;
    color: #2c3e8f;
    font-size: 14px;
    transition: all 0.3s ease;
  }

  .tab-btn.active {
    background: #1f2a56;
    color: #fff;
  }

  .tab-btn:hover {
    background: #e6e9f5;
  }

  .nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #d0d6ef;
    background: #fff;
    transition: 0.3s;
  }

  .nav-btn:hover {
    background: #1f2a56;
    color: #fff;
  }
  	
  /* Icon box */
  .icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f1f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(226 48% 24%);
  }

  /* Price selector */
  .price-option {
    border: 1px solid #d9deec;
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .price-option.active {
    border-color: hsl(226 48% 24%);
    background: #f6f8ff;
  }

  /* CTA */
  .btn-gradient {
    background: linear-gradient(90deg, #ff7a18, #ff9f4a);
    border: none;
    border-radius: 999px;
    padding: 10px;
    font-weight: 600;
    color: #fff;
  }

  /* Badge */
  .popular-badge {
    background: hsl(226 48% 24%);
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
  }
#practiceZone .gradient-text {
  background: linear-gradient(135deg, hsl(258 65% 55%) 0%, hsl(280 60% 60%) 50%, hsl(320 55% 65%) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
}
.accordion-button {
  border-radius: 1rem !important;
}

.accordion-button:not(.collapsed) {
  background-color: #fff;
  color: #0d1b4c;
}

.accordion-button::after {
  background-size: 1rem;
}

#faqTabs .btn.active {
  background-color: #0d1b4c;
  color: #fff;
  border-color: #0d1b4c;
  border-radius: 3rem;
}
/* INNER SCROLLING CONTAINER */
/* .logo-scroll-inner {
	display: flex;
	animation: scrollLeft 40s linear infinite;
	white-space: nowrap;
} */

/* LOGO STYLE */
.logo-item img {
	height: 70px;
	width: 165px;
	object-fit: contain;
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* HOVER EFFECT */
.logo-item img:hover {
	/* transform: scale(1.15);
  filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.2)); */
	
}

/* SMOOTH INFINITE LOOP */
@
keyframes scrollLeft {from { transform:translateX(0);
	
}

to {
	transform: translateX(-50%);
}

}
#home .filter-btn {
	position: relative;
	padding: 8px 18px;
	border-radius: 12px;
	background: none;
	border: none;
	cursor: pointer;
}
 
#home .filter-btn.active {
	background: white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
 
/* Progress bar INSIDE */
#home .progress-line {
	position: absolute;
	left: 0px;
	bottom: 0px; 
	height: 4px;
	width: 0%;
	background: #ee652b;
	border-radius: 10px;
	transition: none;
}
#home .logo-scroll-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}

/* INNER SCROLLING CONTAINER */
#home .logo-scroll-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}

#home .logo-scroll-inner {
	display: inline-flex;
	white-space: nowrap;
	gap: 40px;
	align-items: center;
	will-change: transform;
}

#home .logo-item img {
	height: 80px;
	object-fit: contain;
}
#home #logoContainer {
    display: flex;
    flex-wrap: nowrap; /* or wrap if needed */
}
@media ( min-width : 768px) {
	.feature-border-md-end {
		position: relative; /* applied only on desktop */
	}
	.feature-border-md-end::after {
		content: "";
		position: absolute;
		right: 0;
		top: 20%; /* center vertically */
		height: 60%; /* line height */
		width: 1px;
		background-color: #d1d1d1; /* light grey line */
	}
}

.max65 {
	max-width: 65rem
}

.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s;
}

.bg-transparent {
	background-color: transparent;
}

.z-50 {
	z-index: 50;
}

.fixed {
	position: fixed;
}

<!--
Header End-->.ml-n-1 {
	margin-left: -2rem !important;
}

.mt-04 {
	margin-top: 4rem !important;
}

.mt-06 {
	margin-top: 6rem !important;
}

.mt-08 {
	margin-top: 8rem !important;
}

.mt-10 {
	margin-top: 10rem !important;
}

.mt-01 {
	margin-top: 0rem !important;
}

.pt-05 {
	padding-top: 5rem !important;
}

.p-005 {
	padding: 0;
}

.pb-05 {
	padding-bottom: 5rem !important;
}

.ps-05 {
	padding-left: 5rem !important;
}

.py-05 {
	padding-top: 5rem !important;
	padding-bottom: 5rem !important;
}

.px-05 {
	padding-right: 2.5rem !important;
	padding-left: 2.5rem !important;
}

.w-60 {
	width: 65% !important;
}

.w-80 {
	width: 80% !important;
}

.max87 {
	max-width: 87rem
}

.h-90 {
	height: 90% !important;
}

.stats-icon {
	font-size: 24px;
	color: #4a90e2;
}

.highlight-purple {
	color: #6a5acd;
}

.btn-purple {
	background: linear-gradient(90deg, #3480ED, #9134EA);
	color: #fff;
	border: none; /* optional: removes default border */
}

.btn-purple:hover {
	background: linear-gradient(90deg, #9134EA, #3480ED);
	/* reverse gradient on hover */
}

.gradient-text {
	background: linear-gradient(90deg, #000, #b56a00, #EE652B, #EE652B);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

.form-card {
	background-color: #005B72; /* dark teal */
	border-radius: 12px;
	padding: 2rem;
}

.homeHero {
	background-size: 101% auto !important;
	margin-left: calc(50% - 50vw) !important;
}

.logoBg {
	background-image: url(../images/logoBg.png);
	display: flex;
	align-items: center;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.logo-hover {
	transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-hover:hover {
	transform: scale(1.12);
	filter: brightness(1.15);
}

.btn-custom {
	background-color: #ffb400;
	color: #000;
	font-weight: 600;
	border-radius: 25px;
	padding: 0.75rem;
}

.btn-custom:hover {
	background-color: #e6a300;
	color: #000;
}

.more-text {
	display: none;
}

.dots {
	display: inline;
}

.read-more-btn {
	display: contents; /* makes button appear on new line */
	margin-top: 8px; /* small spacing */
}

.closeBtn, h3.closeBtn a, h3.closeBtn a:hover {
	font-size: 15px;
	color: #969696;
	margin: 0px;
	font-family: 'Roboto Medium';
	text-transform: capitalize;
	text-align: right;
	outline: none !important;
}

.error {
	color: red;
}

.error-massage-text {
	color: #F00;
	border: #999 0px solid;
	padding: 3px;
	font-family: 'Roboto';
	font-size: 13px;
}

.error-massage-text ul {
	margin: 0;
	margin-left: 20px;
	padding: 0;
}

.error-massage2 {
	padding: 0px 0px 0px 0px !important;
}

.error-massage2-text {
	color: #ff0000;
	border: #999 0px solid;
	padding: 3px;
	font-family: 'Roboto';
	font-size: 13px;
}

.error-massage2-text ul {
	margin: 0;
	margin-left: 0px;
	padding: 0;
	list-style: none !important
}

.msgg {
	padding: 0px 0px 5px 15px;
	color: #F00;
}

.receipt-card {
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	text-align: center;
	padding: 2rem;
	position: relative;
	max-width: 380px;
}
/* Top icon circle */
.icon-circle {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.icon-circle i {
	color: #1BC47D;
	font-size: 28px;
}
/* Bottom receipt cut */
.receipt-card::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 100%;
	height: 20px;
	background: radial-gradient(circle at 10px -5px, transparent 12px, #0083A4 13px);
	background-size: 20px 20px;
}

.bg-logo {
	background-color: #FFFEFE;
	border: 1.5px solid #E8E8E8;
	background-color: transparent;
}

#ecoLogo .active {
	background-color: white;
	border: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.orange-color {
	color: #EE652B !important;
}
.bg-orange-color {
	background-color: #EE652B;
}

.btn-custom {
	background: #f5c542;
	border: none;
	border-radius: 25px;
	padding: 10px;
	font-weight: 600;
}

.btn-custom:hover {
	opacity: 0.9;
}

.small-link {
	text-decoration: none;
	color: #333;
	font-size: 0.9rem;
}

.small-link:hover {
	text-decoration: underline;
}

.custom-tooltip .tooltip-inner {
	background: linear-gradient(90deg, #1737C4, #026097);
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 8px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
	white-space: nowrap; /* keep text in single line */
	max-width: none; /* override Bootstrap default width */
}

/* Tooltip arrow styling */
.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: #1737C4;
}

.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
	border-bottom-color: #1737C4;
}

.custom-tooltip.bs-tooltip-start .tooltip-arrow::before {
	border-left-color: #1737C4;
}

.custom-tooltip.bs-tooltip-end .tooltip-arrow::before {
	border-right-color: #1737C4;
}

.mainBg {
	background-color: #FEFEFF;
	font-size: 13px;
	border-bottom: 1.5px solid transparent;
	opacity: 1;
}

.button-outline {
	font-size: 14px;
	border: 1px solid #949BA6;
	padding: 9px 10px;
	border-radius: 10px;
	width: -webkit-fill-available;
}

.btn-solid {
	color: #1C337C;
	background-color: #F7C352;
	border: 1px solid white;
	font-size: 12px;
}

.nav-link.active {
	font-weight: bold;
	color: #FF8C4B !important; /* Bootstrap primary color */
}

.map-wrapper {
	overflow: hidden;
	position: relative;
}

/* Image is shifted left but clipped */
.india-map {
	width: 85%;
	margin-left: 10%;
	max-width: none;
	display: block;
	margin-bottom: 0rem;
	margin-top: 9rem;
}

.hero-section {
	background-image: url(../images/hero_img.png) !important;
	/*color: white;
	 min-height: 100vh; */
	/* display: flex; */
	align-items: center;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
	width: 100%;
	/* height: 80vh; */
	margin: 0 auto;
	padding: 0;
}

.hero-section h1 {
	 font-size: 3rem !important; 
}
h2{
	font-size: 2.25rem !important;
	color: #142152 !important;
}
.section-gredient{
	background: linear-gradient(180deg, hsl(258 30% 98%) 0%, hsl(0 0% 100%) 100%);
	
}
.gradient-muted {
  background: linear-gradient(
    90deg,
    hsla(220, 20%, 95%, 0.6),
    hsla(220, 20%, 95%, 0.3)
  );
}
.institutions-section {
	/* background: linear-gradient(to bottom, #f9d6d0, #c9d5f0); */
	background-color: #F3F9FF;
	text-align: center;
	padding: 25px 0;
	height: auto;
}

.skill-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 50px;
	color: #000;
	background: #fff;
	border: 1px solid transparent;
	background-image: linear-gradient(#fff, #fff),
		linear-gradient(90deg, #FF0000, #0514E3, #C3358F);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	transition: all 0.3s ease;
	width: 11rem;
}

.comparison {
	background: #1B2C7A;
	background: linear-gradient(139deg, rgba(27, 44, 122, 1) 0%,
		rgba(4, 16, 66, 1) 70%);
	height: auto; <!--
	display: flex;
	align-items: center;
	justify-content: center;
	-->
}

.comparison h1, h4 {
	color: white;
	text-align: center;
	font-weight: normal;
}

.card-custom {
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.card-old {
	position: absolute;
	left: 275px;
	top: 120px;
	z-index: 1;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	height: 22rem;
	width: 20rem;
}

.card-new {
	position: relative;
	z-index: 2;
	border: 3px solid transparent;
	border-radius: 14px;
	background-clip: padding-box;
	box-shadow: 0 8px 20px rgba(255, 218, 185, 0.8);
}
/* gradient border for new card */
.card-new::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	padding: 3px;
	background: linear-gradient(-180deg, #fa020b, #02e5fa, #1ffa02);
	-webkit-mask: linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.label-text {
	font-size: 100px;
	font-weight: bold;
	position: absolute;
	top: 40%;
	transform: rotate(90deg);
	color: transparent;
	-webkit-text-stroke: 1px #ff4b2b;
}

.label-text-old {
	font-size: 100px;
	font-weight: bold;
	position: absolute;
	top: 40%;
	transform: rotate(-90deg);
	color: transparent;
	-webkit-text-stroke: 1px #ff4b2b;
}

.label-old {
	left: 170px;
	color: transparent;
	-webkit-text-stroke: 4px red;
}

.label-new {
	right: 170px;
	-webkit-text-stroke: 4px violet;
}

.partnership {
	background: #0083A4;
	height: 88.2vh;
}

.benefit {
	background-color: #0046b8; /* Blue background */
}

.key-benefits {
	font-size: 100px;
	font-weight: 700;
	text-align: center;
	margin-bottom: -1rem;
	letter-spacing: 8px;
	background: linear-gradient(180deg, #60AFFF, #ACC3EB00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.benefits p {
	color: #ABD3FD;
	text-align: center;
	font-size: 18px;
}

.key-benefits h2 {
	font-weight: 700;
	font-size: 3rem;
	text-align: center;
	margin-bottom: 2rem;
	background: linear-gradient(to right, #5fa8ff, #0046b8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.benefit-card {
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 8px 20px rgba(255, 218, 185, 0.6); /* Peach shadow */
}

.benefit-img {
	height: 180px;
	object-fit: cover;
}

.benefit-body {
	background: #f6c54f; /* Yellow section */
	padding: 0.7rem;
	height: 7rem;
}

.sathi {
	background: #E5F3FF;
	height: auto;
}

.section {
	/* background-color: #1a2b3c;
	color: #fff; */
	padding: 30px;
	border-radius: 8px;
/* 	height: -webkit-fill-available;
 */	border: 3px solid #dee2e6;
}

.promo .section:hover {
	border-color: #ff7a00; /* your orange */
}

.section img {
	width: 40px;
	margin-bottom: 15px;
}


.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.25rem;
    font-weight: 700;
    color: #1e2b56;
    line-height: 2.5rem;
}

.section {
    padding: 60px 20px;
    max-width: 1000px;
    margin: auto;
}
.four-cs-section {
    background: linear-gradient(180deg, #f5f8ff 0%, /* very light blue top */ #f9fbff 40%, /* softer blend */ #fff5ed 130% /* light peach/orange bottom */);
    padding: 60px 20px;
    margin: auto;
}
.four-cs-main {
      max-width: 1100px;
      margin: auto;
  }
  .fourcs-subtitle {
    max-width: 750px;
    margin: 15px auto 50px;
    color: #4f5a6b;
    line-height: 1.75rem;
    font-size: 1.125rem;
    text-align: center;
}
.fourcs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.fourcs-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.05);
    transition: 0.3s ease;
}
.fourcs-header {
    display: flex;
    align-items: flex-start;
    /* align-items: center; */
    gap: 15px;
    margin-bottom: 15px;
}
.fourcs-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #ffe9d6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #e76629;
    margin-bottom: 15px;
}
.fourcs-card ul li::marker {
    color: #e76629;
}
.fourcs-card ul li {
    margin-bottom: 8px;
    color: #505e95;
    list-style: disc;
}
.fourcs-card ul {
    padding-left: 20px;
}
.fourcs-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
  }
  
   .org-section {
      padding: 70px 20px;
      text-align: center;
      background: linear-gradient(180deg,
              #fff3e6 0%,
              /* very light pastel orange */
              #fff8f1 25%,
              /* softer creamy fade */
              #f7faff 70%,
              /* ultra-light blue transition */
              #eef5ff 100%
              /* soft blue bottom */
          );

  }

  .org-section h2 {
      font-size: 36px;
      font-weight: 700;
      color: #1b2d53;
      margin-bottom: 40px;
  }

  .org-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
      gap: 35px;
      max-width: 1100px;
      margin: 0 auto;
  }

  .org-card {
      /* display: flex; */
      gap: 18px;
      background: #ffffff;
      padding: 30px 28px;
      border-radius: 18px;
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
      align-items: flex-start;
      text-align: left;
  }

  .org-icon {
      width: 45px;
      height: 44px;
      background: #fdece6;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #e76629;
  }

  .org-icon img {
      width: 28px;
      height: auto;
  }

  .org-content h3 {
      font-size: 20px;
      text-align: left;
      font-weight: 700;
      color: #1b2d53;
      margin: 0 0 8px 0;
  }

  .org-content p {
      font-size: 16px;
      color: #3b3b3b;
      margin: 0;
      line-height: 1.6;
  }

  .competency-section {
      padding: 80px 20px;
      text-align: center;
  }

  .competency-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 40px;
  }

  .competency-icon {
      height: auto;
      margin-bottom: 7%;
      width: 100%;
      /* max-width: 1000px;  */
      border-radius: 8px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);


  }

  .competency-section h2 {
      font-size: 2.25rem;
      font-weight: 700;
      color: #1b2d53;
      line-height: 2.5rem;
      margin: 0;
  }

  .competency-card {
      max-width: 900px;
      margin: 0 auto;
      background: #ffffff;
      padding: 35px 40px;
      border-radius: 18px;
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
      text-align: left;
  }

  .competency-card p {
      font-size: 17px;
      line-height: 1.7;
      color: #333;
      margin-bottom: 18px;
  }

  .competency-card strong {
      color: #1e2b56;
  }

  .icon-wraping {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      /* background: #ffe8db; */
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .icon-wraping i {
      font-size: 1.6rem;
      color: #ff7647;

  }

  /* Section Background */
  .why-section {
      background: linear-gradient(180deg,
              #f5f8ff 0%,
              /* very light blue top */
              #f9fbff 40%,
              /* softer blend */
              #fff5ed 130%
              /* light peach/orange bottom */
          );

      /* background-color: #f8f9ff; /* very light grey */
      padding: 80px 20px;
      text-align: center;
  }

  /* Container */
  .why-container {
      max-width: 900px;
      margin: 0 auto;
  }

  /* Heading */
  .why-container h2 {
      font-size: 36px;
      font-weight: 700;
      color: #122a63;
      margin-bottom: 25px;
  }

  /* Paragraphs */
  .why-container p {
      font-size: 18px;
      color: #4c5870;
      line-height: 1.7;
      margin-bottom: 20px;
  }

  /* Button */
  .why-btn {
      background-color: #ff7647;
      color: white;
      border: none;
      padding: 14px 38px;
      font-size: 17px;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 20px;
      transition: 0.3s;
  }

  .why-btn:hover {
      background-color: #ff571f;
  }

  li.tech-li {
      display: flex;
      flex-direction: row;
      /* align-content: center; */
      align-items: center;
      color: #505e95;

  }
  .section-compre {
    background: linear-gradient(180deg, #fff7ef 0%, #fff9f4 18%, #fffbf8 30%, #ffffff 50%, #ffffff 100%);
}
p.member-p {
    text-align: center;
}
.center-img {
    text-align: center;
}
.center-img img {
    width: 100%;
    padding:60px 90px;
    border-radius: 8px;
}
.why-four-sec {
    background: linear-gradient(180deg, #f5f8ff 0%, /* very light blue top */ #f9fbff 40%, /* softer blend */ #fff5ed 130% /* light peach/orange bottom */);
    padding: 60px 20px;
    /* max-width: 1100px; */
    margin: auto;
}
.card {
    background: #fff;
    padding: 25px;
    border-radius: 18px;
    /* text-align: center; */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.section h2 {
	font-size: 1.5rem;
	margin-bottom: 10px;
}

.section h5 {
	color: #202E5B;
}

.section p {
	font-size: 0.95rem;
	margin-bottom: 20px;
}
/* .section button {
      background-color: #fff;
      color: #1a2b3c;
      border: none;
      padding: 10px 20px;
      font-weight: bold;
      border-radius: 4px;
    } */
.sathi-for {
	font-size: 85px;
	font-weight: 700;
	text-align: center;
	margin-bottom: -2rem !important;
	letter-spacing: 8px;
	background: linear-gradient(360deg, #DDE6E8, #3D556E);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.students-section {
	border: 1px dashed #7ba6c9; /* dotted border */
	padding: 2rem;
	background-color: #f5faff;
}

.sathi h2 {
	font-weight: 700;
}

.sathi p {
	margin-bottom: 1rem;
	font-size: 16px;
}

.sathi .icon {
	font-size: 1.2rem;
	margin-right: 0.5rem;
}

.sathi .highlight {
	font-weight: 600;
	color: #000;
}

.promo {
	background: #ffffff;
}


.promo-section .section:hover {
	color: darkorange !important;
	cursor: pointer;
}

.promo-section h1 {
	font-size: 2.5rem;
	margin-bottom: 20px;
	font-weight: 600;
	color: #202E5B;
}

.promo-section p {
	font-size: 21px;
	margin-bottom: 30px;
	font-weight: 600;
	text-align: center;
}

.promo-section span {
	font-size: 14px;
	margin-bottom: 30px;
}

.bg-blue {
	background-color: #202E5B;
}

.btn-custom {
	/* padding: 10px 20px; */
	font-weight: 500;
}

.designed-section {
	background: linear-gradient(to bottom, #23368A, #090E24);
	padding: 2rem 2rem;
	text-align: center;
}

#perassessment .gradient {
	background-image: linear-gradient(to bottom right, #F8F9FF 0%, #ffffff 50%, #FFF8FB 100%);
}

#perassessment .dpP {
	color: hsl(226 48% 24%);
	font-size: 1.125rem;
}

#perassessment .dpBg {
	background-color: #f5f4f6;
}

#perassessment .decisionProp {
	color: rgb(15, 23, 42);
	font-size: 1.125rem;
}

#perassessment .howSuite2 {
	color: rgb(51, 65, 85);
	font-size: 1.125rem;
}

#perassessment .max64 {
	max-width: 64rem;
}

#perassessment .instruP1 {
	color: hsl(228 30% 45%);
	font-size: 0.875rem;
}

#perassessment .instruP {
	color: hsl(226 48% 24%);
	font-size: 0.875rem;
	font-weight: 600;
}

 .heroP {
	font-size: 1.5rem;
	line-height: 2rem;
	color: rgb(51, 65, 85);
}

#perassessment .instrumentP {
	font-size: 1.125rem;
}

#perassessment .suite2bg {
	background: url("../images/suite2Bg.png") center center / cover no-repeat;
}

#perassessment .studentBg {
	background-image: linear-gradient(to bottom right, hsl(220 25% 96%/ 0.90),
		hsl(0 0% 100%/ 0.95), hsl(18 85% 55%/ 0.90)),
		url(../images/AssesmentSuite2-students-learning.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Card styling */
#perassessment .suite-card {
	background: #ffffff;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border: none;
}

#perassessment .suite-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); /* deeper hover shadow */
}

#perassessment .suite-card {
	background: #ffffff;
	border: 1px solid #f0f0f0;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

#perassessment .card {
	border: 1px solid #f0f0f0;
	border-radius: 20px;
	padding: 40px;
	/* box-shadow: 0 8px 20px rgba(0,0,0,0.08); */
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#perassessment .card:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Icon circle */
#perassessment .instrument-icon {
	width: 65px;
	height: 65px;
	background-color: #f1f5f9;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: hsl(226 48% 24%);
}

#perassessment .sampleIcon {
	color: hsl(226 48% 24%);
}

/* Orange subheading */
#perassessment .text-orange {
	color: #f97316;
}

#perassessment .instrumentHead {
	color: hsl(226 48% 24%);
	font-size: 1.5rem;
}

#perassessment .heading {
	color: hsl(226 48% 24%);
	font-size: 2.2rem;
	text-align: center;
}

#perassessment .subheading {
	color: hsl(226 48% 24%);
	font-size: 1.25rem
}

#perassessment .content {
	color: hsl(228 30% 45%);
}

.designed-section h2 {
	font-weight: 600;
	color: #FEFEFF;
}

.designed-section p {
	font-size: 1.1rem;
	color: #FEFEFF;
}
/* HERO BACKGROUND */
#practiceZone .hero-section {
  background: radial-gradient(circle at top left, #f8f5ff, #ffffff) !important;
}

/* BRAND GRADIENT */
.brand-gradient {
  background: linear-gradient(90deg, #4f46e5, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* IMAGE */
.hero-image {
  max-height: 520px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* FLOATING ICON BASE */
.floating-icon {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  animation: float 3.5s ease-in-out infinite;
}

/* INDIVIDUAL ICON STYLES */
.icon-brain {
  top: 5%;
  right: 8%;
  background: #e0e7ff;
  color: #4338ca;
}

.icon-user {
  bottom: 20%;
  right: 3%;
  background: #dcfce7;
  color: #15803d;
  animation-delay: 0.6s;
}

.icon-chat {
  bottom: 10%;
  left: 8%;
  background: #fee2e2;
  color: #be123c;
  animation-delay: 1s;
}

.icon-star {
  top: 35%;
  left: 0%;
  background: #fef3c7;
  color: #b45309;
  animation-delay: 1.4s;
}

/* FLOAT ANIMATION */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
/* PRIMARY ORANGE BUTTON */
.btn-primary-sathi {
  background: linear-gradient(135deg, #ff7a18, #ff9f1c);
  color: #fff;
  border: none;
  border-radius: 15px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 20px rgba(255, 122, 24, 0.25);
  transition: all 0.25s ease;
}

.btn-primary-sathi:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(255, 122, 24, 0.35);
  color: #fff;
}

/* SECONDARY WHITE BUTTON */
.btn-secondary-sathi {
  background: #fff;
  color: #1f2937;
  border: 1.5px solid #d1d5db;
  border-radius: 15px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.25s ease;
}

.btn-secondary-sathi:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #111827;
}
.max-w-3xl {
    max-width: 52rem;
}

/* MOBILE TUNING */
@media (max-width: 768px) {
  .floating-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .btn-primary-sathi,
  .btn-secondary-sathi {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
/* .gradient-heading {
      font-weight: 700;
      font-size: 2rem;
      background: linear-gradient(90deg, #070055, #026097);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }
    Gradient text style
    .gradient-text {
      background: linear-gradient(90deg, #1737C4, #790406, #001AFF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
      font-weight: 600;
    } */
.btn-outline-light-custom {
	border: 1px solid #ccc;
	color: white;
	width: 100%;
	border-radius: 50px;
	padding: 0.35rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 500;
}

.btn-outline-light-custom i {
	margin-left: 0.5rem;
}

.btn-outline-light-custom:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.registration-bg {
	background-color: #0094ad; /* teal background */
	color: white;
	font-family: Arial, sans-serif;
}

.registration-bg .highlight {
	color: #ffb400; /* yellow-orange for "Global" */
}

.note {
	font-size: 0.9rem;
	color: #ccc;
	text-align: center;
	margin-top: 10px;
}

.receipt-card {
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	text-align: center;
	padding: 2rem;
	position: relative;
	max-width: 380px;
}
/* Top icon circle */
.icon-circle {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.icon-circle i {
	color: #1BC47D;
	font-size: 28px;
}
/* Bottom receipt cut */
.receipt-card::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 100%;
	height: 20px;
	background: radial-gradient(circle at 10px -5px, transparent 12px, #0083A4 13px);
	background-size: 20px 20px;
}

.btn-custom-pay {
	background: #f5c542;
	border: none;
	border-radius: 25px;
	padding: 10px;
	font-weight: 600;
}

.btn-custom-pay:hover {
	opacity: 0.9;
}

.small-link {
	text-decoration: none;
	color: #333;
	font-size: 0.9rem;
}

.small-link:hover {
	text-decoration: underline;
}

.info-card {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sathi-section {
	padding: 3rem 1rem;
}

.sathi-left h5 {
	color: #ffcc00; /* yellow heading */
	font-weight: 700;
}

.sathi-left p {
	font-size: 0.95rem;
	line-height: 1.6;
}

/* .circle-img {
	display: block;
	max-width: 200px;
	width: 100%;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
} */
.circle-img {
	width: 100%;
	max-width: 200px;
	height: auto;
	object-fit: cover;
	border-radius: 50%;
	background: transparent;
}

.sathi-right {
	background: #fff;
	border-radius: 10px;
	padding: 2rem;
}

.head {
	color: #ffcc00; /* yellow heading */
	font-weight: 700;
	margin-bottom: 1rem;
}

.head-text {
	color: #FD8A66;
}

.feature {
	margin-bottom: 1.2rem;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.feature i {
	color: #e63946; /* red highlight */
	font-size: 1.2rem;
	margin-top: 3px;
}

.feature span {
	color: darkslategrey;
}

.profile-card {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	height: 17rem;
}

.profile-header {
	/* background: #e9f2fb; light blue */
	background: #f9fafb;
	padding: 1rem;
}

.profile-footer {
	background: #fcd770; /* yellow shade */
	padding: 1rem;
}

.profile-img {
	max-width: 120px;
	border-radius: 50%;
}

.info-card {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-card ul li {
	margin-bottom: 18px;
}

.info-card ul li i {
	color: #f15a29; /* icon color */
	margin-right: 8px;
}

.highlight {
	font-weight: bold;
}

#about .card {
	background: #fff;
	color: #fff;
	border-radius: 10px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
	padding: 1.5rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.2s ease-in-out;
}

#about .card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#about.card h6 {
	font-weight: 600;
}

#about .card p {
	margin: 0;
	font-size: 0.9rem;
}

#about .card-arrow {
	margin-top: auto;
	text-align: right;
	font-size: 1.2rem;
}

* /
.modal-content {
	/* background-color: #0a2239; dark navy
	color: #fff; */
	border-radius: 10px;
	border: 1px solid white;
	top: 4rem;
}

.modal-header {
	border-bottom: none;
}

.btn-close {
	filter: invert(1);
	background-color: azure;
}

#press {
	height: auto;
	border-radius: 6px;
	angle: 0 deg;
	opacity: 1;
	background-image: url(../images/press_release.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

#press h1 {
	font-size: 4rem;
	line-height: 1;
	font-weight: 700;
}

#press span {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.logoImg {
	height: 60px;
	width: 105px;
}

.section-title {
	font-weight: bold;
	font-size: 3rem;
	padding-bottom: 0.5rem;
}

#icards p {
	text-align: justify;
}

#icards .card {
	background: #fff;
	color: #fff;
	border-radius: 10px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
	padding: 1rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.2s ease-in-out;
}

.nav-item.dropdown:hover .dropdown-menu {
	display: block;
	margin-top: 0; /* align neatly */
}

footer p {
	/* text-align: center !important; */
	font-size: 0.875rem
}

.accordion-button {
	color: #052c65;
	font-weight: 500;
	/* border: 1.5px solid lightgrey; */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.accordion-body {
	background-color: #fff;
	text-align: start;
}

.accordion-item {
	border: none;
}

.accordion-button
:not
 
(
.collapsed
 
)
{
color
:
 
orange
;

	
background-color
:
 
white
 
!
important
;

	
box-shadow
:
 
inset
 
0
calc
(-1
 
*
 
var
(-
 
-bs-accordion-border-width
))
 
0
var
(-
 
-bs-accordion-border-color
);


}
.accordion-button::after {
	font-family: 'bootstrap-icons';
	content: '\f078'; /* Chevron down icon */
	transform: rotate(0deg);
	transition: transform 0.2s ease-in-out;
}

.accordion-button:not (.collapsed )::after {
	transform: rotate(180deg);
}

.highlight-box {
	background-color: #203272;
	color: #f4a940;
	border-radius: 0.5rem;
	padding: 1rem;
	margin-top: 1rem;
}

.highlight-box button {
	background-color: gold;
	color: #203272;
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 1.25rem;
}

.highlight-box p {
	color: white;
}

.section-title-assess {
	font-weight: bold;
	font-size: 2rem;
	margin-bottom: 1rem;
}

.section-subtitle {
	font-weight: 600;
	margin-bottom: 2rem;
	color: #334155;
}

.sub-section {
	font-weight: bold;
	margin: 3.5rem auto;
}

#icards h2>span {
	font-size: 13px;
	color: #c7c7c7;
	font-style: italic;
}

.exeSummary {
	background-image: url(../images/suite2.png);
	display: flex;
	align-items: center;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

#assessment .container-fluid ol {
	list-style: none; /* Remove default numbering */
	counter-reset: my-counter; /* Initialize a counter */
	text-indent: -1.5em;
	padding-left: 1.5em;
}

#assessment .container-fluid li::before {
	counter-increment: my-counter;
	/* Increment the counter for each list item */
	content: counter(my-counter) ")";
	/* Display the counter and a closing parenthesis */
	margin-right: 0.5em; /* Add some space after the marker */
}

hr {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

#Empanel .card {
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#Empanel .card-body {
	background: #fff;
	padding: 0.7rem;
	height: 7rem;
	color: black;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.dropdown-menu {
	min-width: 200px;
}

.dropdown-item {
	padding: 0.5rem 1rem;
}

.coming-card {
	text-align: center;
}

.coming-card img {
	max-width: 500px;
	margin-bottom: 1.5rem;
}

.bg-text-left, .bg-text-right {
	position: absolute;
	font-size: 8rem;
	font-weight: 800;
	text-transform: sentence;
	pointer-events: none;
	z-index: 0;
	color: transparent;
	transform-origin: center;
	line-height: 1;
	user-select: none;
}

.bg-text-left {
	top: 52%;
	left: 10px;
	transform: translateY(-50%) rotate(-90deg);
	-webkit-text-stroke: 6px red;
}

.bg-text-right {
	top: 50%;
	right: -65px;
	transform: translateY(-50%) rotate(90deg);
	-webkit-text-stroke: 6px #f24ef2;
}

/* --- Card Styling --- */
.card {
	z-index: 2;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Depth effect */
.memory-card {
	transform: translateX(40px) translateY(20px) scale(0.9);
	opacity: 0.9;
	z-index: 1;
}

.skills-card {
	transform: translateX(-20px);
	z-index: 3;
}

#student .gradient-text {
	background: linear-gradient(90deg, #000, #b56a00, #d18d2e, #f7b733);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-img {
	border-radius: 20px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	width: 100%;
	height: auto;
	object-fit: cover;
}

.btn-dark-blue-outline {
	background-color: #fff;
	color: #2c3e78 !important;
	border: 1px solid #dcdfe580 !important;
}
#faqTabs .btn.active {
  background: #2c3e78;
  color: #fff !important;
  border-color: transparent;
}

.btn-dark-blue {
	background-color: #2c3e78;
	color: #fff;
	border: none;
}

.btn-dark-blue:hover {
	background-color: #1e2c5c;
	color: #fff;
}

.btn-orange {
	background: linear-gradient(90deg, #FF6B2B 0%, #FF8C4B 100%);
	color: #fff !important;
	border: none;
	justify-content: center;
    text-align: center;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 15px;
}

.btn-orange:hover {
	background-color: #FF8C4B !important;
	color: #fff;
	justify-content: center;
    text-align: center;padding: 14px 28px;
    font-weight: 600;
    font-size: 16px;
    
}

.btn-orange-outline {
	background-color: #fff;
	color: #f57c00 !important;
	border: 1.5px solid #f57c00;
}

.btn-orange-outline:hover {
	background-color: #f57c00;
	color: #fff !important;
	border: 1.5px solid #f57c00;
}

.feature-box {
	border: 1px solid #F7F7F8;
	border-radius: 16px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	padding: 2rem 1rem;
	background-color: #fff;
}

.feature-icon {
	font-size: 2rem;
	color: #f57c00;
	margin-bottom: 0.5rem;
}

.feature-title {
	font-weight: 600;
	color: #1f2d3d;
}

.feature-text {
	color: #667085;
	font-size: 0.95rem;
}

.section-title-student {
	font-weight: 700;
	text-align: center;
	margin-bottom: 2rem;
}

.measure-card {
	border-radius: 12px;
	background-color: #fff;
	padding: 1.25rem;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	transition: transform 0.2s ease-in-out;
}

.measure-card:hover {
	transform: translateY(-3px);
}

.icon-box {
	font-size: 1.3rem;
	flex-shrink: 0;
	border-radius: 8px;
	padding: 0.5rem 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.icon-box-critical {
	background-color: #FEE3D1;
	color: #F88542;
}

.icon-box-creative {
	background-color: #ECD9FD;
	color: #9B43EC;
}

.icon-box-collab {
	background-color: #CDF2DA;
	color: #1BA54E;
}

.icon-box-com {
	background-color: #D1D5E1;
	color: #000;
}

.bg-think {
	background-color: #FFFBF6;
	border: 1px solid #dee2e6;
	color: #e67e22;
}

.bg-create {
	background-color: #FCFAFF;
	border: 1px solid #dee2e6;
	color: #9b59b6;
}

.bg-collab {
	background-color: #F7FEF9;
	border: 1px solid #dee2e6;
	color: #16a085;
}
.fs08{
font-size:0.8rem;
}
.latest {
background-color: #202e5b;
}
.bg-comm {
	background-color: #F7FAFF;
	border: 1px solid #dee2e6;
	color: #34495e;
}

.measure-title {
	font-weight: 600;
	color: #1f2d3d;
}

.measure-text {
	color: #6c757d;
	font-size: 0.95rem;
}

.hov-card {
	transition: all 0.3s ease;
}

.hov-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.hero-img-stud {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#about  .skill-card {
	border-radius: 0.5rem;
	padding: 1rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: #000;
}

.skill1 {
	background: linear-gradient(135deg, #FFF7ED, #FFEDD5)
}

.skill2 {
	background: linear-gradient(135deg, #F5F3FF, #EDE9FE)
}

.skill3 {
	background: linear-gradient(135deg, #ECFDF5, #D1FAE5)
}

.skill4 {
	background: linear-gradient(135deg, #EFF6FF, #DBEAFE)
}

.skill1 div {
	background: linear-gradient(to bottom right, #F97316, #EA580C)
}

.skill2 div {
	background: linear-gradient(135deg, #8B5CF6, #7C3AED)
}

.skill3 div {
	background: linear-gradient(135deg, #22C55E, #16A34A)
}

.skill4 div {
	background: linear-gradient(135deg, #3B82F6, #2563EB)
}

.icon {
	width: 3rem;
	height: 3rem;
	border-radius: 0.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.2rem;
	flex-shrink: 0;
}

.whatIsSathi h1 {
	color: #0f172a;
	font-size: 2.25rem
}

.flag {
	height: 1.5rem
}

.whatIsSathi p {
	color: #3f4c5f;
	font-size: 1.25rem
}

.century21 {
	max-width: 58rem
}

h1 {
	color: #202e5b;
	line-height: 1 !important;
}

p {
	color: #505e95
}

.critical {
	background: linear-gradient(135deg, #F97316, #EA580C)
} /* Orange */
.creativity {
	background-color: #d9ccff;
} /* Purple */
.collaboration {
	background-color: #b3ffcc;
} /* Green */
.communication {
	background-color: #99ccff;
} /* Blue */
.circle {
	width: 56px;
	height: 56px;
	background-color: rgba(255, 122, 0, 0.1);
}

.circle i {
	font-size: 30px;
	color: #FF7A00;
}

.profile-card:hover {
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12)
}

.gabeImg {
	height: 400px
}

footer p {
	color: #d2cbbc;
}

footer {
	background-color: #202e5b !important;
	color: #fff;
	padding: 40px 0;
}

.footer hr {
	border-color: rgba(255, 255, 255, 0.2);
}

footer a {
	color: #d2cbbc;
	text-decoration: none !important;
	font-size: 14px;
}

footer a:hover {
	text-decoration: underline;
}

.footer small {
	color: rgba(255, 255, 255, 0.7);
}

.footer .logo {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.footer .logo img {
	width: 40px;
	margin-right: 10px;
}

.footer h5 {
	margin-bottom: 15px;
}

@media only screen and (width: 393px) and (height: 852px) and
	(-webkit-device-pixel-ratio: 3) {
	html {
		scroll-behavior: auto !important;
		/* Avoid smooth auto-scrolling glitches */
	}
	.whatIsSathi h1 {
		font-size: 3.5rem;
	}
	.whatIsSathi p {
		font-size: 1.5rem;
	}
	.gabeImg {
		height: 90%;
	}
	.india-map {
		width: 100%;
		margin-left: 0%;
		max-width: none;
		display: block;
		margin-bottom: 0rem;
		margin-top: 0rem;
	}
	#icards p {
		text-align: left;
	}
	.ps-05 {
		padding-left: 2rem !important;
	}
	.mt-50 {
		margin-top: 55rem !important;
	}
}

.sathi {
	background: #E5F3FF;
	height: 165vh;
}

.custom-tooltip .tooltip-inner {
	background: linear-gradient(90deg, #1737C4, #026097);
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 8px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Tooltip arrow styling */
.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: #1737C4;
}

.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
	border-bottom-color: #1737C4;
}

.custom-tooltip.bs-tooltip-start .tooltip-arrow::before {
	border-left-color: #1737C4;
}

.custom-tooltip.bs-tooltip-end .tooltip-arrow::before {
	border-right-color: #1737C4;
}

.coming-card {
	padding: 1.5rem;
}

.coming-img {
	max-width: 180px;
}

.comparison {
	background: #1B2C7A;
	background: linear-gradient(139deg, rgba(27, 44, 122, 1) 0%,
		rgba(4, 16, 66, 1) 70%);
	min-height: 146vh;
	padding-bottom: 4rem;
	align-items: center;
	justify-content: center;
}

.institutions-section {
	/* background: linear-gradient(to bottom, #f9d6d0, #c9d5f0); */
	background-color: #F3F9FF;
	text-align: center;
	padding: 25px 5px;
	height: 35vh;
}

}
/* @media (min-width: 768px) {
            .container {
                max-width: 800px;
            }
        } */
@media ( max-width : 768px) {
	html {
		scroll-behavior: auto !important;
		/* Avoid smooth auto-scrolling glitches */
	}
	.floating-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .btn-primary-sathi,
  .btn-secondary-sathi {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .dark-gradient-btn {
  border: none;
  border-radius: 999px;
  font-size: 1.1rem;
  background: radial-gradient(circle at center,
      #ff7a18 0%,
      #ff7a18 20%,
      #2b2f61 80%,
      #1e214a 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 
              0 0 12px rgba(255, 122, 24, 0.35);
  transition: all .2s ease;
}
.dark-gradient-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22),
              0 0 16px rgba(255, 122, 24, 0.45);
}
  
	.whatIsSathi h1 {
		font-size: 3.5rem;
	}
	.whatIsSathi p {
		font-size: 1.5rem;
	}
	.gabeImg {
		height: 90%;
	}
	.mt-50 {
		margin-top: 55rem !important;
	}
	.india-map {
		width: 100%;
		margin-left: 0%;
		max-width: none;
		display: block;
		margin-bottom: 0rem;
		margin-top: 0rem;
	}
	#icards p {
		text-align: left;
	}
	.ps-05 {
		padding-left: 2rem !important;
	}
	.mt-01 {
		margin-top: 1rem !important;
	}

	/* .mt-60 {
	margin-top: 60rem !important;
} */
	.circle-img {
		position: static;
		display: block;
		margin: 20px auto;
		width: 100%;
	}
	.coming-card {
		padding: 1.5rem;
	}
	.coming-img {
		max-width: 180px;
	}
	.left-panel {
		padding: 20px;
	}
	.profile-img {
		max-width: 90px;
	}
	.benefit-body {
		background: white;
		padding: 0.7rem;
		height: 7rem;
	}
	.comparison {
		background: #1B2C7A;
		background: linear-gradient(139deg, rgba(27, 44, 122, 1) 0%,
			rgba(4, 16, 66, 1) 70%);
		min-height: 165vh;
		padding-bottom: 4rem;
		align-items: center;
		justify-content: center;
	}
	.card-old {
		position: absolute;
		left: 9rem !important;
		top: 1rem !important;
		z-index: 1;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
		height: 22rem;
		width: 13rem;
	}
	.card-new {
		position: relative;
		z-index: 2;
		border: 3px solid transparent;
		border-radius: 14px;
		background-clip: padding-box;
		box-shadow: 0 8px 20px rgba(255, 218, 185, 0.8);
	}
	.label-old {
		left: 12px;
		color: transparent;
		-webkit-text-stroke: 4px red;
	}
	.label-text-old {
		font-size: 100px;
		font-weight: bold;
		position: absolute;
		top: 25%;
		left: 2rem;
		transform: rotate(-90deg);
		color: transparent;
		-webkit-text-stroke: 1px #ff4b2b;
	}
	.label-new {
		right: -30px;
		-webkit-text-stroke: 4px violet;
	}
	.label-text {
		font-size: 100px;
		font-weight: bold;
		position: absolute;
		top: 108%;
		transform: rotate(90deg);
		color: transparent;
		-webkit-text-stroke: 1px #ff4b2b;
	}
	.sathi {
		background: #E5F3FF;
		height: 185vh;
	}
	.institutions-section {
		/* background: linear-gradient(to bottom, #f9d6d0, #c9d5f0); */
		background-color: #F3F9FF;
		text-align: center;
		padding: 25px 5px;
		height: auto;
	}
	.sathi-for {
		font-size: 60px;
		font-weight: 700;
		text-align: center;
		margin-bottom: -2rem !important;
		letter-spacing: 8px;
		background: linear-gradient(360deg, #DDE6E8, #3D556E);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.button-outline {
		font-size: 14px;
		border: 1px solid #949BA6;
		padding: 8px 25px;
		border-radius: 50px;
	}
	.mt-01 {
		margin-top: 1rem !important;
	}
}

@media ( max-width : 360px) {
	html {
		scroll-behavior: auto !important;
		/* Avoid smooth auto-scrolling glitches */
	}
	.whatIsSathi h1 {
		font-size: 3.5rem;
	}
	.whatIsSathi p {
		font-size: 1.5rem;
	}
	.gabeImg {
		height: 90%;
	}
	.mt-50 {
		margin-top: 55rem !important;
	}
	.india-map {
		/* width: 100%;
	margin-left: 0%;
	max-width: none;
	display: block;
	margin-bottom: 0rem;
	margin-top: 0rem; */
		width: 80%;
		margin-left: 14%;
		max-width: none;
		display: block;
		margin-bottom: 0rem;
		margin-top: 12rem;
	}
	.coming-card {
		padding: 1.5rem;
	}
	.coming-card img {
		max-width: 180px;
	}
}

@media ( max-width : 1200px) {
	.container {
		flex-direction: column;
		align-items: center;
	}
	.card-old, .card-new {
		max-width: 90%;
	}
}

/* --- Responsive adjustments --- */
@media ( max-width : 992px) {
	.whatIsSathi h1 {
		font-size: 3.5rem;
	}
	.whatIsSathi p {
		font-size: 1.5rem;
	}
	.gabeImg {
		height: 90%;
	}
	.mt-50 {
		margin-top: 55rem !important;
	}
}

.bg-text-left, .bg-text-right {
	font-size: 7rem;
}

.memory-card, .skills-card {
	transform: none;
	opacity: 1;
	margin-bottom: 1rem;
}

/* .mt-60 {
	margin-top: 60rem !important;
} */
}
.feature-border-md-end {
	position: relative;
}

@media ( min-width : 768px) {
	.feature-border-md-end::after {
		content: "";
		position: absolute;
		right: 0;
		top: 20%; /* position the line vertically */
		height: 60%; /* line height */
		width: 1px;
		background-color: #d1d1d1; /* light grey border */
	}
}

@media ( max-width : 640px) {
	#perassessment .heroP {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}
	#perassessment .heading {
		font-size: 1.875rem;
	}
}

@media ( max-width : 576px) {
	.india-map {
		margin-top: 3rem;
	}
	.hero-btn {
		padding: 4px 14px !important; /* smaller padding */
		font-size: 0.9rem !important; /* reduce text size */
		border-radius: 10px !important; /* optional */
	}
	.hero-btn i {
		font-size: 0.9rem !important; /* icon scales too */
	}
	.bg-text-left, .bg-text-right {
		display: none;
	}
	.mt-50 {
		margin-top: 55rem !important;
	}
	.hero-section h1 {
		font-size: 1.8rem !important;
	}
}

 .skill-card {
      border-radius: 0.5rem;
      padding: 1rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: #000;
    }
    .skill1 {background: linear-gradient(135deg, #FFF7ED, #FFEDD5)}
	.skill2 {background: linear-gradient(135deg, #F5F3FF, #EDE9FE)}
	.skill3 {background: linear-gradient(135deg, #ECFDF5, #D1FAE5)}
	.skill4 {background: linear-gradient(135deg, #EFF6FF, #DBEAFE)}
	.skill1 div {background: linear-gradient(to bottom right, #F97316, #EA580C)}
	.skill2 div {background: linear-gradient(135deg, #8B5CF6, #7C3AED)}
	.skill3 div {background: linear-gradient(135deg, #22C55E, #16A34A)}
	.skill4 div {background: linear-gradient(135deg, #3B82F6, #2563EB)}
 .whatIsSathi h1 {color: #0f172a; font-size: 2.25rem}
	.flag {height:1.5rem}
	.whatIsSathi p {color:#3f4c5f; font-size: 1.25rem}
	.century21 {max-width:58rem}
	 .critical { background: linear-gradient(135deg, #F97316, #EA580C) } /* Orange */
    .creativity { background-color: #d9ccff; } /* Purple */
    .collaboration { background-color: #b3ffcc; } /* Green */
    .communication { background-color: #99ccff; } /* Blue */
    .circle {
    	width: 56px;
    	height:56px;
    	background-color:rgba(255,122,0,0.1);
    }
    .circle i {
        font-size: 30px;
    	color: #FF7A00;
    }
    .profile-card:hover {box-shadow: 0 10px 25px rgba(0,0,0,0.12)}
    .gabeImg {height: 400px}
    @media (min-width: 992px) {
  .whatIsSathi h1 {
    font-size: 3.5rem;
  }
  .whatIsSathi p {
    font-size: 1.5rem ;
  }
  .gabeImg {
  height: 90%;}
  
}
.text-muted-foreground {
    color:#505e95;
}
.text-accent{
	color:#ee652b;
}

  


/* Banner */
.hero-banner {
	    background: url(../images/suite1.png) center / cover no-repeat;
	    min-height: 60vh;
}

.hero-banner3 {
    background: url("../images/suite3.png") center/cover no-repeat;
    min-height: 60vh;
}
.resources-banner {
	    background: url(../images/resourcesBg.png) center / cover no-repeat;
	    min-height: auto;
	    position:relative;
	    left:0.2rem;
}
/* Text Colors */
.text-default,
.text-blue {
    color: #202e5b;
}

.text-org {
    color: #ee652b;
}

.text-accent-secondary {
    color: #505e95;
}

/* Titles */
.why-title {
    color: #1c2b62;
    font-size: 2.3rem;
}

.text-xl {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

/* Sections */
.org-section {
    background:
        radial-gradient(circle at bottom left, #fff3e6 0%, transparent 60%),
        radial-gradient(circle at top right, #eef5ff 0%, transparent 60%),
        #ffffff;
}

.why-section {
    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 65%,
            rgba(255,245,237,0.15) 90%,
            rgba(255,245,237,0) 100%
        );
}

.soft-gradient-bg {
    background:
        radial-gradient(circle at top left, #eaf2ff  0%, transparent 60%),
        radial-gradient(circle at bottom right, #fff1e8 0%, transparent 65%),
        #ffffff;
}

.four-sec-bg,
.note-bg {
    background:
        linear-gradient(180deg, #f5f8ff 0%, #f9fbff 40%, #fff5ed 100%);
}

.science-bg {
    background:
        linear-gradient(180deg, #f7faff 0%, #f9fbff 45%, #fff4ea 100%);
}

.sec-info,
.info-section {
    background: linear-gradient(135deg, #0d1b46, #142a6d);
}

/* Cards */
.why-card,
.resource-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.why-card {
    border-radius: 22px !important;
}

.hover-lift {
    transition: transform .3s ease, box-shadow .3s ease;
}

.hover-lift:hover,
.resource-card:hover,
.why-card:hover {
    transform: translateY(-5px);
}

.hover-lift:hover {
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.why-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12) !important;
}

/* Icons */
.icon-accent {
    color: #ff7647;
}

.org-icon,
.fourc-icon,
.icon-box,
.team-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-icon {
    width: 44px;
    height: 44px;
    background: #fdece6;
    color: #e76629;
}

.fourc-icon {
    width: 65px;
    height: 65px;
    background: #ffe9d6;
    color: #e76629;
    font-size: 32px;
}

.icon-box {
    width: 55px;
    height: 55px;
}

.team-icon {
    width: 60px;
    height: 60px;
}

.icon-university {
    background: #202e5b;
}

.icon-student {
    background: #ee652b;
}

.icon-note {
    background: #202e5b1a;
    color: #202e5b;
}

/* Buttons */
.btn-default {
    background: #ee652b;
    color: #fff;
}

.btn-light:hover {
    transform: translateY(-2px);
    transition: .2s ease;
}

/* Images */
.compe-img{
	    object-fit: cover;
	
}
.ben-img,
.resource-img-box img {
    width: 100%;
    object-fit: cover;
}

.compe-img {
    max-height: 500px;
}

.ben-img {
    max-height: 250px;
}

.resource-img-box {
    height: 200px;
    overflow: hidden;
    position: relative;
    border-radius: 16px 16px 0 0;
}

.resource-img-box img {
    height: 100%;
    object-position: center;
    transform: scale(1);
    transition: transform .4s ease, opacity .3s ease-in;
}

.resource-card:hover .resource-img-box img {
    transform: scale(1.08);
    opacity: .95;
}

/* Accordion */
.faq-accordion {
    max-width: 900px;
}

.accordion-item {
    border: 1px solid #dcdfe5;
}

.accordion-button {
    background: #fff;
    color: #202a5b;
    border-radius: 1rem !important;
    border-bottom: none;
        box-shadow: none !important;
    
}

.accordion-button::after {
    background-image: none;
    content: "\f282";
    font-family: "bootstrap-icons";
    font-size: 18px;
    transition: transform .3s ease;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.accordion-button:not(.collapsed) {
    box-shadow: none !important;
    border-bottom: 0 !important;
    color: #202a5b !important;
}

.accordion-button:hover {
    color: #FF7A00;
}

.accordion-button:hover .faq-text {
    text-decoration: underline;
}

/* Utility */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bg-org {
    --bs-bg-opacity: 1;
    background-color: #ee652b !important;
    color: #fff;
}

.bg-soft-org {
    background: #fff6ef;
}

.bg-blue {
    background: #12224F;
}

/* Layout */

 /* MAIN WRAPPER */
  .resource-wrapper {
      padding: 1rem;
  }

  /* TITLE */
  .resource-title {
      display: flex;
      align-items: center;
      gap: 0.75rem;
  }

  .resource-title h2 {
      color: #142152;
      line-height: 2.25rem;
      font-size: 1.875rem;
      font-weight: 700;
  }

  /* LAYOUT: LEFT + RIGHT */
  .resource-content-area {
      display: flex;
      gap: 0;
  }

  /* LEFT CARDS GRID */
  .resource-container {
      width: 70%;

  }

  .resource-grid {
      /* width: 70%; */
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
      height: fit-content;

  }

  /* CARD */
  .resource-card {
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
      transition: 0.3s ease;
  }

  /* Parent layout: left + right */
  .resources-layout {
      /* display: flex; */
      gap: 25px;
      margin-top: 40px;
  }

  /* LEFT SIDE (70%) */
  .left-scroll-area {
      width: 70%;
      flex: 0 0 70%;
      /* Lock width to 70% */
  }

  /* RIGHT SIDE (30%) */
  .right-sidebar {
      width: 30%;
      flex: 0 0 30%;
  }

  /* Make resource cards flush inside left area */
  .left-scroll-area .resource-grid {
      display: grid;
      /* grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); */
      gap: 25px;
  }


  .resource-card:hover {
      transform: translateY(-5px);
  }

  /* IMAGE BOX */
  .resource-img-box {
      width: 100%;
      height: 200px;
      overflow: hidden;
      border-radius: 16px 16px 0 0;
      position: relative;
  }

  /* IMAGE DEFAULT STATE — stable, centered, no white gaps */
  .resource-img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* ensures full cover, no white space */
      object-position: center;
      transform: scale(1);
      /* FULL size, no zoom-out at start */
      transition:
          transform 400ms ease,
          opacity 300ms ease-in;
  }

  .resource-card:hover .resource-img-box img {
      transform: scale(1.08);
      /* zoom IN inside container */
      opacity: 0.95;
  }

  /* Card hover lift */
  .resource-card:hover {
      transform: translateY(-5px);
  }

  /* Title color change on hover */
  .resource-card:hover h3 {
      color: #e76629;
      transition: color 250ms ease;
  }



  /* H3 turns orange on hover */
  .resource-card:hover h3 {
      color: #ee652b;
  }

  .resource-grid.res-tab {
      width: 100%;

  }


  /* FEATURED BADGE */
  .featured-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      background: #ff6b2c;
      color: #fff;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 50px;
      display: flex;
      align-items: center;
      gap: 5px;
      z-index: 10;
  }

  /* CARD TEXT */
  .resource-info {
      padding: 1.25rem;
  }

  .resource-info h3 {
      font-size: 1.125rem;
      font-weight: 600;
      margin-bottom: 8px;
      color: #142152;
      text-align: left;
      margin-top: 0;

  }

  .resource-info p {
      font-size: 0.875rem;
      color: #505e95;
      margin-bottom: 14px;
  }

  /* READ MORE LINK */
  .readmore-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 500;
      font-size: 0.875rem;
      color: #ee652b;
      text-decoration: none;
      line-height: 1.25rem;
  }

  /* ANNOUNCEMENT BOX */
  .announcement-box {
      width: 100%;
      background: #fff6ef;
      padding: 1.5rem;
      border-radius: 16px;
      height: fit-content;
      margin-bottom: 25px;

  }

 
  /* RESPONSIVE */
  @media (max-width: 992px) {
      .resource-content-area {
          flex-direction: column;
      }

      .resource-grid {
          width: 100%;
          grid-template-columns: repeat(2, 1fr);
      }

      .announcement-box,
      .latest-articles,
      .need-help-box {
          width: auto !important;
      }
  }

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

  
  /* Subtitle Paragraph */
  .ass-suite.suite1 .hero {
      max-width: 780px;
      margin: 20px auto 0 auto;
      font-size: 18px;
      line-height: 1.6;
      color: #52637b;
  }

  i.bi.bi-star.resource-star {
      font-size: 24px;
      color: #ee652b;
      height: 1.5rem;
      width: 1.5rem;

  }

  i.bi.bi-megaphone.spe-icon {
      color: #ee652b;

  }

  /* tab section */

  .tabs {
      display: flex;
      gap: .75rem;
      align-items: center;
      margin-top: 30px;
  }

  .tab {
      padding: .5rem .60rem;
      border-radius: 40px;
      /* padding: 15px; */
      color: #505e95;
      font-weight: 500;
      background: #fff;
      border: 1px solid #dcdfe5;
      background-origin: border-box;
      background-clip: padding-box, border-box;
      transition: all 0.3s ease;
      cursor: pointer;
      font-size: .875rem;

      &:hover {
          background-color: #f2f2f7;
          color: #fff;
      }

  }

  i.bi.bi-funnel.funel-icon {
      color: #505e95;
      font-size: 20px;
      margin-left: 10px;

  }


  .tab.active {
      background: #202e5b;
      color: #ffff;
      font-weight: 500;
  }

  .content-section {
      display: none;
      margin-top: 20px;
  }

  .content-section.active {
      display: block;
  }

  /* CONTENT AREA */
  .content-section {
      display: none;
  }

  .content-section.active {
      display: block;
  }


  .right-sidebar {
      width: 100%;
  }

  /* Latest Articles Box */
  .latest-articles {
      width: 100%;
      background: #ffffff;
      padding: 1.5rem;
      border-radius: 15px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
      margin-bottom: 25px;
  }



  /* LEFT SIDE - scrollable */
  .left-scroll-area {
      width: 100%;
      padding-right: 10px;
      /* height: calc(100vh - 150px); /* adjustable */
      /* overflow-y: auto; */
  }



  /* TABLET */
  @media (max-width: 992px) {
      .resources-layout {
          flex-direction: column;
      }

      .left-scroll-area,
      .right-sidebar {
          width: 100%;
      }

      .right-sidebar {
          position: relative;
          top: 0;
      }
  }

  /* MOBILE */
  @media (max-width: 576px) {
      .tabs {
          gap: .5rem;
      }

      .tab {
          padding: 10px 15px;
          font-size: 0.8rem;
      }

      .article-card img {
          width: 50px;
          height: 50px;
      }

      .latest-articles,
      .need-help-box {
          padding: 15px;
      }

      .help-mail {
          padding: 8px 15px;
          font-size: 13px;
      }
  }


  /* need section */

  

  /* Make resource container a positioning context */
  .resource-container {
      position: relative;
  }

  /* Right sidebar wrapper */
  .right-sidebar {
      position: relative;

      width: 320px;
      /* adjust as needed */
      flex-shrink: 0;
  }

  /* Wrapper becomes the scroll boundary */
  .sticky-wrapper {
      position: relative;
  }

  /* Sticky card – smooth, no glitch */
  .sticky-box {
      position: sticky;
      top: 90px;
      /* adjust for header */
      z-index: 5;
  }

  /* Default state */
  .right-sidebar .sticky-box {
      position: sticky;
      top: 90px;
      /* adjust for header */
      z-index: 5;
      width: 100%;
      /* transition: top 0.25s ease, transform 0.25s ease; */
  }

  /* When fixed (sidebar sticks while scrolling inside resource section) */
  .right-sidebar .sticky-box.is-fixed {
      position: fixed;
      top: 100px;
      /* distance from top */
      width: 320px;
      /* match sidebar width */
      z-index: 999;
  }

  /* When bottom of resource-container is reached (pin inside container) */
  .right-sidebar .sticky-box.is-bottom {
      position: absolute;
      bottom: 0;
      top: auto;
      width: 100%;
  }





  @media (max-width: 768px) {
      .sticky-box {
          position: static !important;
          left: auto !important;
          top: auto !important;
          width: auto !important;
      }

      .sticky-placeholder {
          display: none !important;
      }
  }


  /* Default (Desktop / Tablet) */
  .resource-card {
  	min-height: 25rem;
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      /* padding: 20px; */
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* Hover effect only on desktop */
  @media (min-width: 769px) {
      .resource-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      }
  }

  /* MOBILE OPTIMIZATION */
  @media (max-width: 768px) {
      .resource-card {
          border-radius: 12px;
          padding: 14px 16px;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);

          /* Ensures no overflow issues */
          /* width: 100%; */
          margin-bottom: 16px;
      }

      .resource-container {
          width: 100%;
      }
  }

  /* -------------------------- */
  /* TABS - DESKTOP */
  .tabs {
      display: flex;
      gap: .75rem;
      align-items: center;
      margin-top: 30px;
      flex-wrap: wrap;
  }

  .tab {
      padding: .5rem .60rem;
      border-radius: 40px;
      color: #505e95;
      font-weight: 500;
      background: #fff;
      border: 1px solid #dcdfe5;
      transition: all 0.3s ease;
      cursor: pointer;
      font-size: .875rem;
      white-space: nowrap;
  }

  i.bi.bi-funnel.funel-icon {
      color: #505e95;
      font-size: 20px;
      margin-left: 10px;
  }

  .tab.active {
      background: #202e5b;
      color: #fff;
  }

  /* CONTENT SECTION */
  .content-section {
      display: none;
      margin-top: 20px;
  }

  .content-section.active {
      display: block;
  }


    
  /* LEFT CONTENT AREA */
  .left-scroll-area {
      width: 100%;
      padding-right: 10px;
  }
.text-prime{
	color:#202e5b;
	
}

#all-resources {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

#all-resources .resource-card {
	display: block ;
}
.text-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* =========================
   Sticky Header
========================= */
.sticky-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    z-index: 1055;

    padding: 14px 0;

    transition: all .35s ease;

    background: transparent;
}

/* Logo */

.sticky-header .navbar-brand img {

    height: 48px;

    transition: .3s;
}

/* Nav links */

.sticky-header{

    font-weight: 600;

    color: #ffffff !important;

    padding: .5rem 1rem !important;

    transition: .3s;
}

/* Scroll Effect */

.sticky-header.scrolled {

    background: rgba(255,255,255,.92);

    -webkit-backdrop-filter: blur(14px);

    backdrop-filter: blur(14px);

    box-shadow: 0 4px 20px rgba(0,0,0,.06);

    padding: 10px 0;
}

/* Change nav text after scroll */

.sticky-header.scrolled {

    color: #1c2c5b !important;
}

/* Logo resize */

.sticky-header.scrolled .navbar-brand img {

    height: 42px;
}