@charset "UTF-8";

/*-----------------------------------------------------

    Title :  Turkic Investment Fund
    Usage :  homepage
    Edited:  2025-06-29

-------------------------------------------------------

    1. hero
    2. about
    3. priority
    4. news
    5. events
    6. apply
    7. responsive (1024px)

-------------------------------------------------------*/




/*  1. hero
-------------------------------------------------------*/

#hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-inline: var(--padding-inline-center-content);
	min-height: 881px;
	background-position: 50% 40px;
	background-size: 1440px auto;
	background-repeat: no-repeat;
	background-image: -webkit-image-set(url(../img/bg_hero.jpg) 1x, url(../img/bg_hero@2x.jpg) 2x);
	background-image:         image-set(   "../img/bg_hero.jpg" 1x,    "../img/bg_hero@2x.jpg" 2x);
	}

#hero h1 {
	--gradient-heading: linear-gradient(138.67deg, #18181B 38.82%, rgba(24, 24, 27, 0.2) 105.46%);
	margin-top: 112px;
	max-width: 820px;
	font-weight: 800;
	font-size: 4.8rem;
	}

#hero p {
	margin-block: 25px 50px;
	max-width: 625px;
	color: var(--color-foreground);
	}

#hero .social-media-widget {
	display: none;
	}



/*  2. about
-------------------------------------------------------* /

#about {
	position: relative;
	z-index: 2;
	margin-top: 78px;
	margin-inline: auto;
	padding: 40px 40px 42px;
	width: var(--width-center-section);
	overflow: hidden;
	background-color: #F9F9F9;
	border-radius: 20px;
	}

#about .splide__arrows {
	position: absolute;
	top: calc(50% - 22px);
	right: 38px;
	left: 38px;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	}

#about .splide__arrow {
	--color-clickable-icon-static: 000;
	--width-icon: 44px;
	--height-icon: 44px;
	opacity: 0.3;
	pointer-events: auto;
	background-color: #fff;
	border-radius: 12px;
	transition-property: opacity;
	}

#about :is(:hover, :focus).splide__arrow {
	opacity: 1;
	}

#about .splide__track {
	border-radius: 14px;
	}

#about .splide__slide picture {
	display: flex;
	}

#about .splide__slide img {
	aspect-ratio: 1260 / 691;
	width: 100%;
	object-fit: cover;
	}

#about h2 {
	--gradient-heading: linear-gradient(140.44deg, #18181B 17.16%, rgba(24, 24, 27, 0.2) 112.62%);
	margin-top: 56px;
	max-width: 982px;
	font-size: 3.6rem;
	}

#about p {
	margin-block: 20px;
	max-width: 982px;
	}



/*  3. priority
-------------------------------------------------------*/

#priority {
	position: relative;
	z-index: 1;
	margin-top: 150px;
	margin-inline: auto;
	width: var(--width-center-section);
	}

#priority h2 {
	--gradient-heading: linear-gradient(140.44deg, #18181B 17.16%, rgba(24, 24, 27, 0.2) 112.62%);
	position: relative;
	font-size: 3.6rem;
	}

#priority p {
	position: relative;
	margin-top: 9px;
	}

#priority dl {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 29px;
	color: #18181B;
	}

#priority dl > div[aria-hidden="true"]:nth-child(1) {
	position: relative;
	order: 1;
	grid-column: 1 / span 3;
	display: block;
	}

#priority dl > :nth-child(1) + div { /* Physical and Digital Infrastructure */
	order: 2;
	}

#priority dl > :nth-child(2) + div { /* Intra-regional Trade Promotion */
	order: 3;
	}

#priority dl > :nth-child(3) + div { /* MSME Financing */
	order: 4;
	}

#priority dl > :nth-child(5) + div { /* Co-financing Partnerships / Co-financing Collaboration */
	order: 5;
	}

#priority dl > :nth-child(6) + div { /* Investing in Key Sectors */
	order: 6;
	}

#priority dl > :nth-child(7) + div { /* Green Economy & Sustainability */
	order: 6;
	}

#priority dl > div[aria-hidden="true"]:nth-child(5) {
	position: relative;
	order: 10;
	grid-column: auto / span 3;
	display: block;
	}

@property --priority-graident-border-start {
	syntax: "<color>";
	initial-value: #F9F9F9;
	inherits: false;
}

@property --priority-graident-border-middle {
	syntax: "<color>";
	initial-value: #F9F9F9;
	inherits: false;
}

@property --priority-graident-border-end {
	syntax: "<color>";
	initial-value: #F9F9F9;
	inherits: false;
}

#priority dl > div:not([aria-hidden="true"]) {
	position: relative;
	padding: 18px 21px;
	min-height: 222px;
	background-image: linear-gradient(#F9F9F9, #F9F9F9), linear-gradient(-133deg, var(--priority-graident-border-start) 0%, var(--priority-graident-border-middle) 45%, var(--priority-graident-border-end) 80%);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	border: 2px solid transparent;
	border-radius: 20px;
	transition-property: --priority-graident-border-start, --priority-graident-border-middle, --priority-graident-border-end;
	}

#priority dl > div:not([aria-hidden="true"]):is(:hover, :focus-within) {
	--priority-graident-border-start: #85D3E3;
	--priority-graident-border-middle: #ED2397;
	--priority-graident-border-end: #1290C0;
	}

#priority dl > div[aria-hidden="true"] picture {
	position: absolute;
	inset: 0;
	}

#priority dl > div[aria-hidden="true"] picture img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	object-fit: cover;
	}

#priority div:not([aria-hidden="true"]) dt {
	--gradient-heading: linear-gradient(152.83deg, #18181B 12.86%, rgba(24, 24, 27, 0.2) 96.39%);
	position: relative;
	font-size: 1.4rem;
	line-height: 1.4;
	}

#priority div:not([aria-hidden="true"]) dt img {
	display: block;
	margin-bottom: 21px;
	transition-property: opacity;
	}

#priority div:not([aria-hidden="true"]):is(:hover, :focus-within) dt img {
	opacity: 0;
	}

#priority div:not([aria-hidden="true"]) dt img {
	display: block;
	margin-bottom: 21px;
	transition-property: opacity;
	}

#priority div:not([aria-hidden="true"]) dt img + img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	}

#priority div:not([aria-hidden="true"]):is(:hover, :focus-within) dt img + img {
	opacity: 1;
	}

#priority div:not([aria-hidden="true"]) dt .gradient-wrapper {
	position: relative;
	}

#priority div:not([aria-hidden="true"]) dt .gradient-wrapper .gradient {
	transition-property: opacity;
	}

#priority div:not([aria-hidden="true"]):is(:hover, :focus-within) dt .gradient-wrapper .gradient {
	opacity: 0;
	}

#priority div:not([aria-hidden="true"]) dt .gradient-wrapper .gradient + .gradient {
	--gradient-heading: linear-gradient(244.48deg, #85D3E3 1.34%, #ED2397 45.17%, #1290C0 79.25%);
	position: absolute;
	inset: 0;
	opacity: 0;
	}

#priority div:not([aria-hidden="true"]):is(:hover, :focus-within) dt .gradient-wrapper .gradient + .gradient {
	opacity: 1;
	}

#priority div:not([aria-hidden="true"]) dt .ico.arrow-up-right-lg {
	position: absolute;
	top: 8px;
	right: 1px;
	stroke: var(--color-foreground);
	}

#priority div:not([aria-hidden="true"]):is(:hover, :focus-within) dt .ico.arrow-up-right-lg {
	stroke: var(--color-link-hover);
	}

#priority div:not([aria-hidden="true"]) dt + dd {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	margin-top: 10px;
	overflow: hidden;
	font-size: 1.2rem;
	line-height: 1.67;
	}

#priority div:not([aria-hidden="true"]) dd + dd a {
	position: absolute;
	inset: 0;
	overflow: hidden;
	text-indent: -5000px;
	border-radius: 20px;
	}



/*  4. news
-------------------------------------------------------*/

#news {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 150px;
	margin-inline: auto;
	width: var(--width-center-section);
	}

#news::before {
	content: "";
	position: absolute;
	top: -249px;
	right: -249px;
	width: 850px;
	height: 929px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: -webkit-image-set(url(../img/bg_news..before.png) 1x, url(../img/bg_news..before@2x.png) 2x);
	background-image:         image-set(   "../img/bg_news..before.png" 1x,    "../img/bg_news..before@2x.png" 2x);
	}

#news h2 {
	--gradient-heading: linear-gradient(147.92deg, #18181B 29.09%, rgba(24, 24, 27, 0.2) 97.39%);
	order: 1;
	margin-bottom: 20px;
	width: 100%;
	font-size: 3.6rem;
	}

#news > p {
	position: relative;
	order: 2;
	max-width: 670px;
	}

#news .w {
	position: relative;
	order: 4;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	margin-top: 43px;
	width: 100%;
	}

#news article {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	}

#news article a[tabindex="-1"]:first-child {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 20px;
	}

#news article a[tabindex="-1"] picture img {
	display: block;
	aspect-ratio: 440 / 336;
	width: 100%;
	height: auto;
	object-fit: cover;
	}

#news article h3 {
	flex-grow: 1;
	display: flex;
	align-items: flex-start;
	margin-block: 21px 19px;
	width: 100%;
	font-size: 1.6rem;
	line-height: 1.4;
	}

#news > .btn {
	position: relative;
	order: 3;
	margin-top: 6px;
	}



/*  5. events
-------------------------------------------------------*/

#events {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 153px;
	margin-inline: auto;
	width: var(--width-center-section);
	}

#events::before {
	content: "";
	position: absolute;
	bottom: -552px;
	right: -250px;
	z-index: -1;
	width: 850px;
	height: 929px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: -webkit-image-set(url(../img/bg_news..before.png) 1x, url(../img/bg_news..before@2x.png) 2x);
	background-image:         image-set(   "../img/bg_news..before.png" 1x,    "../img/bg_news..before@2x.png" 2x);
	}

#events h2 {
	--gradient-heading: linear-gradient(147.92deg, #18181B 29.09%, rgba(24, 24, 27, 0.2) 97.39%);
	order: 1;
	font-size: 3.6rem;
	}

#events .events-widget {
	order: 4;
	margin-top: 30px;
	width: 100%;
	}

#events > .btn {
	position: relative;
	order: 3;
	margin-top: 2px;
	}



/*  6. apply
-------------------------------------------------------*/

#apply {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 74px 40px 40px;
	aspect-ratio: 1340 / 609;
	overflow: hidden;
	background-image: none;
	}

#apply::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.65);
	}

#apply video {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	}

#apply h2 {
	position: relative;
	}

#apply p {
	position: relative;
	margin-bottom: 43px;
	}

#apply .btn {
	position: relative;
	}



/*  7. responsive (1024px)
-------------------------------------------------------*/

@media (max-width: 1024px) {

/*  1. hero  */

#hero {
	padding-top: 80px;
	min-height: 820px;
	background-position-y: 0;
	background-size: auto auto, auto 802px;
	background-image: linear-gradient(213.44deg, rgba(255, 255, 255, 0) 54.41%, #FFFFFF 90.27%), url(../img/smartphone_bg_hero@3x.jpg?ver=2503091428);
	}

#hero h1 {
	margin-top: 0;
	font-size: 3rem;
	}

#hero p {
	margin-block: 16px 40px;
	margin-right: 38px;
	max-width: none;
	font-size: 1.6rem;
	line-height: 1.5;
	}

#hero .btn.default {
	min-width: 141px;
	}

#hero .social-media-widget {
	display: none;
	margin-top: auto;
	}


/*  2. about  * /

#about {
	position: relative;
	z-index: 1;
	margin-top: 80px;
	padding: 10px 10px 20px;
	}

#about .splide__track {
	border-radius: 10px;
	}

#about .splide__arrows {
	display: none;
	}

#about .splide__slide img {
	aspect-ratio: 333 / 294;
	}

#about h2 {
	margin-top: 20px;
	font-size: 1.6rem;
	}

#about p {
	margin-block: 10px 20px;
	font-size: 1.2rem;
	line-height: 1.67;
	}

#about .btn {
	min-width: 141px;
	}


/*  3. priority  */

#priority {
	position: static;
	margin-top: 80px;
	}

#priority h2 {
	font-size: 2rem;
	}

#priority p {
	margin-top: 11px;
	}

#priority p br {
	display: none;
	}

#priority dl {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 33px;
	}

#priority dl > div + div {
	margin-top: 10px;
	}

#priority dl > div[aria-hidden="true"] {
	aspect-ratio: 353 / 138;
	}

#priority dl > div[aria-hidden="true"]::after {
	content: none;
	}

#priority dl > div:not([aria-hidden="true"]) {
	padding-inline: 20px;
	min-height: 198px;
	}


/*  4. news  */

#news {
	position: static;
	align-items: baseline;
	margin-top: 80px;
	}

#news::before {
	top: auto;
	right: auto;
	left: 0;
	margin-top: -252px;
	width: 100%;
	height: 499px;
	background-position: 50% 0;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-image: url(../img/smartphone_bg_contentinfo..before@3x.png);
	}

#news h2 {
	position: relative;
	margin-bottom: 11px;
	width: auto;
	font-size: 2rem;
	}

#news > p {
	order: 3;
	}

#news > p br {
	display: none;
	}

#news .w {
	display: flex;
	gap: 0;
	margin-block: 19px -3px;
	margin-inline: calc(-1 * var(--dist-min-cont-edge));
	padding-bottom: 3px;
	width: auto;
	overflow: auto;
	}

#news .w::before,
#news .w::after {
	content: "";
	flex-shrink: 0;
	width: var(--dist-min-cont-edge);
	}

#news article {
	flex-shrink: 0;
	width: 315px;
	}

#news article + article {
	margin-left: 10px;
	}

:is(#news, #events) > .btn {
	order: 2;
	display: revert;
	padding-inline: revert;
	height: revert;
	margin-top: revert;
	color: var(--color-foreground);
	background-color: revert;
	border-radius: revert;
	box-shadow: revert;
	}

:is(#news, #events) > :is(:hover, :focus).btn {
	color: var(--color-link-hover);
	}


/*  5. events  */

#events {
	align-items: baseline;
	margin-top: 80px;
	}

#events::before {
	content: none;
	}

#events h2 {
	font-size: 2rem;
	}

#events .events-widget {
	display: block !important;
	margin-top: 14px;
	}

#events .events-widget .w {
	display: flex;
	margin-block: 16px -3px;
	margin-inline: calc(-1* var(--dist-min-cont-edge));
	padding-bottom: 3px;
	overflow: auto;
	}

#events .events-widget .w::before,
#events .events-widget .w::after {
	content: "";
	flex-shrink: 0;
	width: var(--dist-min-cont-edge);
	}

#events .events-widget .w article {
	flex-shrink: 0;
	width: 315px;
	}

#events .events-widget .w article + article {
	margin-left: 10px
	}

#events .events-widget article a[tabindex="-1"]:first-child {
	border-radius: 20px;
	}

#events .events-widget article picture img {
	aspect-ratio: 440 / 336;
	}

#events .events-widget article h4 {
	margin-top: 20px;
	font-size: 1.6rem;
	line-height: 1.4;
	}

#events .events-widget article h4 a {
	-webkit-line-clamp: 3;
	}

#events .events-widget article p {
	margin-top: 9px;
	font-size: 1.4rem;
	line-height: 1.429;
	}


/*  6. apply  */

#apply {
	padding: 16px 13px 13px;
	aspect-ratio: 353 / 450;
	}

}