/* ==========================================================================
   rebuild.css — repair + redesign layer for the Ubharte Sitaare rebuild.

   The capture never saved the seven stylesheets style.css @imports
   (animate, flaticon, fontawesome-all, elegent-icon, owl, swiper, fancybox)
   and none of them is in the Wayback Machine. That cost the page its icon
   fonts, both carousels and its animation classes: the banner produced no
   hero at all, and the magazine strip and footer rendered blank.

   This file is loaded last and repairs each section without depending on
   anything that is gone. Palette is taken from the site's own CSS.
   ========================================================================== */

:root {
	--us-pink: #ec167f;
	--us-pink-dark: #c9105f;
	--us-teal: #40cbb4;
	--us-purple: #4c35a9;
	--us-blue: #1d95d2;
	--us-yellow: #ffc20b;
	--us-ink: #1c2331;
	--us-body: #5a6673;
	--us-line: rgba(28, 35, 49, 0.10);
	--us-card: #ffffff;
	--us-shadow: 0 1px 2px rgba(28, 35, 49, 0.05), 0 12px 30px rgba(28, 35, 49, 0.09);
	--us-shadow-lift: 0 2px 6px rgba(28, 35, 49, 0.08), 0 22px 44px rgba(28, 35, 49, 0.16);
}

/* --------------------------------------------------------------- globals */

html { scroll-behavior: smooth; }
body { color: var(--us-body); }

[id] { scroll-margin-top: 110px; }

img { max-width: 100%; height: auto; }

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--us-teal);
	outline-offset: 3px;
	border-radius: 3px;
}

/* wow.js sets these hidden and animate.css was meant to reveal them. */
.wow, [class*="fadeIn"], [class*="zoomIn"], [class*="slideIn"] {
	visibility: visible !important;
	opacity: 1 !important;
	animation: none !important;
}

/* Icon fonts are gone; empty glyph spans would leave dead boxes. */
.icon-box .icon[class*="flaticon-"],
.icon-box .icon[class*="fa-"] { display: none !important; }

/* Section heading: the template prints the same words as eyebrow and as
   heading. js/rebuild.js removes the duplicate; this styles what remains. */
.sec-title { margin-bottom: 42px; }
.sec-title .title {
	display: block;
	margin-bottom: 10px;
	color: var(--us-pink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.sec-title h2 {
	margin: 0;
	color: var(--us-ink);
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.2;
	font-weight: 700;
}
.sec-title.text-center h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 18px auto 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--us-pink), var(--us-teal));
}

/* ------------------------------------------------------------------ hero */

.us-hero {
	position: relative;
	overflow: hidden;
	background: #0f1626;
	line-height: 0;
}
.us-hero-track {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	aspect-ratio: 1920 / 650;
	min-height: 210px;
}
.us-hero-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 700ms ease;
}
.us-hero-slide.is-active { opacity: 1; }
.us-hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* scrims so the controls stay legible over any slide */
.us-hero::before,
.us-hero::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 14%;
	max-width: 190px;
	pointer-events: none;
	z-index: 1;
}
.us-hero::before { left: 0; background: linear-gradient(90deg, rgba(15, 22, 38, 0.34), transparent); }
.us-hero::after { right: 0; background: linear-gradient(270deg, rgba(15, 22, 38, 0.34), transparent); }

.us-hero-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.86);
	box-shadow: 0 6px 18px rgba(15, 22, 38, 0.28);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.us-hero-arrow.prev { left: 22px; }
.us-hero-arrow.next { right: 22px; }
.us-hero-arrow:hover { background: #fff; transform: scale(1.06); }
.us-hero-arrow span {
	display: block;
	width: 13px;
	height: 13px;
	border-right: 3px solid var(--us-ink);
	border-bottom: 3px solid var(--us-ink);
}
.us-hero-arrow.prev span { transform: rotate(135deg); margin-left: 4px; }
.us-hero-arrow.next span { transform: rotate(-45deg); margin-right: 4px; }

.us-hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 10px;
	line-height: 0;
}
.us-hero-dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 1px 4px rgba(15, 22, 38, 0.35);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
.us-hero-dot.is-active {
	width: 30px;
	border-radius: 999px;
	background: var(--us-pink);
}

@media (max-width: 700px) {
	.us-hero-arrow { width: 40px; height: 40px; margin-top: -20px; }
	.us-hero-arrow.prev { left: 10px; }
	.us-hero-arrow.next { right: 10px; }
	.us-hero-dots { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.us-hero-slide { transition: none; }
}

/* ------------------------------------------------------- about + section */

.about-section-two { padding: 74px 0 64px; }
.about-section-two .text,
.about-section-two p {
	max-width: 74ch;
	margin-inline: auto;
	font-size: 16.5px;
	line-height: 1.75;
}

/* ------------------------------------------------------------ fund panel */

.fluid-section-one { background: transparent; }
.fluid-section-one .outer-box {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: stretch;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: var(--us-shadow);
	max-width: 1180px;
	margin: 0 auto;
}
.fluid-section-one .content-column {
	position: relative;
	width: auto;
	padding: 0;
	background: linear-gradient(150deg, var(--us-teal), #23a894);
}
.fluid-section-one .inner-column { padding: 52px 48px; }
.fluid-section-one .shape-layers { display: none; }
.fluid-section-one h3 {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
}
.fluid-section-one .text {
	margin-bottom: 16px;
	color: rgba(255, 255, 255, 0.94);
	font-size: 15.5px;
	line-height: 1.75;
}
.fluid-section-one .image-column {
	position: relative;
	width: auto;
	padding: 0;
	background: #f2f6fa center/cover no-repeat;
}
.fluid-section-one .image-column .image-box,
.fluid-section-one .image-column figure { height: 100%; margin: 0; }
.fluid-section-one .image-column img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.fluid-section-one .outer-box { grid-template-columns: 1fr; border-radius: 14px; }
	.fluid-section-one .inner-column { padding: 36px 26px; }
	.fluid-section-one .image-column { min-height: 240px; order: -1; }
}

/* ------------------------------------------- key themes + participation */

.features-section-three,
.features-section-two { padding: 70px 0; }

.features-section-three .row,
.features-section-two .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
	margin: 0 auto;
	max-width: 1160px;
}

.feature-block-three,
.feature-block-two {
	width: auto;
	max-width: 100%;
	padding: 0;
	flex: 1 1 340px;
}
.feature-block-two { flex-basis: 300px; max-width: 360px; }

.feature-block-three .inner-box,
.feature-block-two .inner-box {
	position: relative;
	height: 100%;
	padding: 26px 26px 26px 76px;
	border: 1px solid var(--us-line);
	border-radius: 14px;
	background: var(--us-card);
	box-shadow: var(--us-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-block-two .inner-box { padding: 26px 26px 26px 26px; }

.feature-block-three .inner-box:hover,
.feature-block-two .inner-box:hover {
	transform: translateY(-5px);
	box-shadow: var(--us-shadow-lift);
}

/* The flaticon glyph is gone, so the icon box becomes a coloured marker. */
.feature-block-three .icon-box {
	position: absolute;
	left: 24px;
	top: 26px;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 9px;
	background: linear-gradient(140deg, var(--us-pink), var(--us-purple));
}
.feature-block-three:nth-child(4n+2) .icon-box { background: linear-gradient(140deg, var(--us-teal), var(--us-blue)); }
.feature-block-three:nth-child(4n+3) .icon-box { background: linear-gradient(140deg, var(--us-blue), var(--us-purple)); }
.feature-block-three:nth-child(4n+4) .icon-box { background: linear-gradient(140deg, var(--us-yellow), var(--us-pink)); }

.feature-block-two .icon-box { display: none; }

.feature-block-three h4,
.feature-block-two h4 {
	margin: 0;
	color: var(--us-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
}
.feature-block-two h4 { position: relative; padding-top: 14px; }
.feature-block-two h4::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--us-pink), var(--us-teal));
}
.feature-block-three h4 a,
.feature-block-two h4 a { color: inherit; }

/* --------------------------------------------------------- magazine wall */

.clients-section-three {
	position: relative;
	padding: 76px 0;
	background-color: #101a2b;
	background-position: center;
	background-size: cover;
}
.clients-section-three::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 26, 43, 0.86), rgba(16, 26, 43, 0.93));
}
.clients-section-three .auto-container { position: relative; z-index: 1; }
.clients-section-three .sponsors-outer { padding: 0; }

.us-mags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.us-mags > li { flex: 0 0 178px; max-width: 178px; margin: 0; }
.us-mag-cover {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.us-mag-cover img { display: block; width: 100%; }
.us-mag:hover .us-mag-cover {
	transform: translateY(-7px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}

@media (max-width: 900px) {
	.us-mags > li { flex-basis: 136px; max-width: 136px; }
}
@media (max-width: 480px) {
	.us-mags > li { flex-basis: 118px; max-width: 118px; }
}

/* ---------------------------------------------------------------- footer */

.main-footer,
.main-footer.style-three {
	position: relative;
	padding: 52px 0 40px;
	background: var(--us-ink);
	color: rgba(255, 255, 255, 0.76);
}
.main-footer .footer-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}
.main-footer .footer-logo img {
	max-width: 210px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #fff;
}
.main-footer .footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-footer .footer-nav a {
	color: rgba(255, 255, 255, 0.86);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.main-footer .footer-nav a:hover { color: var(--us-teal); }
.main-footer .copyright-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
}
.main-footer .copyright-text a { color: rgba(255, 255, 255, 0.86); }

/* ------------------------------------------------- inline SVG icon set */
/* fontawesome-all.css is not archived; the glyph spans were empty boxes and
   are now inline SVG. These rules size and place them. */
.us-i {
	display: inline-block;
	vertical-align: -0.14em;
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.social-links { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.social-links li { margin: 0; }
.social-links a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 15px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
.social-links a:hover { background: var(--us-pink); transform: translateY(-2px); }
.header-top .social-links a { background: rgba(255, 255, 255, 0.22); }
.header-top .text .us-i { margin-right: 4px; }

/* footer social row sits on the dark panel */
.main-footer .social-links { justify-content: center; }
.main-footer .social-links a { background: rgba(255, 255, 255, 0.14); color: #fff; }
.main-footer .social-links a:hover { background: var(--us-pink); }
.main-footer .footer-nav a { text-transform: none; }

/* The template styles the footer for a white background (.main-footer.style-three
   sets background:#fff), so its type colours are dark. This panel is dark, so
   the type has to be re-lit at matching specificity. */
.main-footer.style-three .footer-nav li a,
.main-footer.style-three .footer-nav a {
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
	font-weight: 600;
}
.main-footer.style-three .footer-nav li a:hover { color: var(--us-teal); }
.main-footer.style-three .copyright-text,
.main-footer.style-three .copyright-text p {
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
}
.main-footer.style-three .copyright-text a { color: rgba(255, 255, 255, 0.88); }

/* footer social row (this list is .social-icon-one, not .social-links) */
.main-footer .social-icon-one {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}
.main-footer .social-icon-one li { margin: 0; }
.main-footer .social-icon-one a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 16px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
.main-footer .social-icon-one a:hover {
	background: var(--us-pink);
	transform: translateY(-2px);
}

/* the template skews .icon-box for its glyph; without a glyph it just looks bent */
.feature-block-three .icon-box,
.feature-block-two .icon-box { transform: none !important; }

/* The banner is a 1920x650 poster: at phone widths `cover` crops the wordmark
   off. Letterbox it on the dark backdrop instead so the whole banner reads. */
@media (max-width: 700px) {
	.us-hero-track { aspect-ratio: 16 / 9; min-height: 0; }
	.us-hero-slide img { object-fit: contain; }
	.us-hero::before, .us-hero::after { display: none; }
}