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

    Title :  The Academy of Public Administration
    Usage :  homepage
    Edited:  2025-10-24

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

    1. headlines
    2. news
    3. announcements
    4. overview
    5. cta
    6. recognition
    7. responsive ( 991px)
    8. responsive ( 480px)

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




/*  1. headlines
-------------------------------------------------------*/

#headlines {
	--width-image: 61.167%;
	margin-block: 86px 46px;
	height: 360px;
	overflow: hidden;
	background-color: #F5F7FA;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	}

#headlines .splide__list {
	margin-bottom: 0;
	padding-left: 0;
	}

#headlines li::marker {
	color: transparent;
	font-size: 0;
	}

#headlines .splide__slide {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	}

#headlines .splide__slide picture {
	position: relative;
	z-index: -1;
	flex-shrink: 0;
	display: flex;
	width: var(--width-image);
	}

#headlines .splide__slide picture img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	}

#headlines .splide__slide .w {
	padding: 32px 36px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	}

#headlines .splide__slide .w a {
	--color-link-static: #090C02;
	--color-link-hover: gray;
	display: block;
	font-size: 20px;
	line-height: 1.4;
	}

#headlines .splide__slide .w a::before {
	content: "";
	position: absolute;
	inset: 0;
	}

#headlines .splide__slide .w time {
	display: block;
	margin-top: 10px;
	color: #737A87;
	font-size: 14px;
	}

#headlines .splide__pagination {
	position: absolute;
	bottom: 30px;
	left: 0;
	gap: 8px;
	margin-bottom: 0;
	padding-left: 0;
	width: calc(100% - var(--width-image));
	}

#headlines .splide__pagination button {
	display: block;
	padding: 0;
	width: 8px;
	height: 8px;
	background-color: #E1E4E8;
	border-width: 0;
	border-radius: 50%;
	transition-property: background-color;
	transition-duration: var(--trans-dur);
	}

#headlines .splide__pagination button:is(:hover, :focus, .is-active) {
	background-color: #091F43;
	}



/*  2. news
-------------------------------------------------------*/

#news {
	--gap: 7px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	}

#news h2 {
	margin-bottom: 33px;
	width: 100%;
	font-size: 35.44px;
	}

#news article {
	position: relative;
	z-index: 1;
	width: calc((100% - var(--gap)) / 2);
	height: 352px;
	}

#news article picture {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: flex;
	background-color: #000;
	}

#news article img {
	width: 100%;
	object-fit: cover;
	opacity: 0.55;
	}

#news article a {
	--color-link-static: #fff;
	--color-link-hover: silver;
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	padding: 19px 20px;
	font-size: 20px;
	line-height: 1.5;
	text-shadow: 0 1px 0 #000;
	}

#news article time {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 2px;
	width: 158px;
	height: 33px;
	color: #fff;
	font-size: 13px;
	background-color: #1C3467;
	}

#news > a {
	--color-link-static: #3B5491;
	--color-link-hover: gray;
	display: inline-flex;
	align-items: center;
	column-gap: 10px;
	margin-top: 38px;
	font-size: 14px;
	}

#news > a .arrow-right-wide {
	position: relative;
	top: 2px;
	}



/*  3. announcements
-------------------------------------------------------*/

#anncmnt {
	--color-link-static: #3B5491;
	--color-link-hover: gray;
	text-align: right;
	}

#anncmnt h2 {
	margin-bottom: 40px;
	width: 100%;
	font-size: 35.44px;
	text-align: left;
	}

#anncmnt .w {
	display: flex;
	flex-direction: column;
	row-gap: 51px;
	padding: 23px 20px;
	color: #3B5491;
	text-align: left;
	background-color: #fff;
	}

#anncmnt article {
	position: relative;
	padding-left: 143px;
	min-height: 128px;
	}

#anncmnt article + article::before {
	content: "";
	position: absolute;
	top: -26px;
	left: 0;
	width: 100%;
	border-top: 1px solid #ECEFF8;
	}

#anncmnt article a[tabindex="-1"],
#anncmnt article picture {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	}
	
#anncmnt article picture img {
    width: 128px;
    height: 128px;
    object-fit: cover;
    object-position: center;
}

#anncmnt article p {
	display: flex;
	align-items: center;
	column-gap: 6px;
	margin-bottom: 0;
	padding-top: 2px;
	font-size: 16px;
	line-height: 1.25;
	text-align: center;
	}

#anncmnt article p time {
	font-size: 14px;
	line-height: 1.2;
	}

#anncmnt article p time b {
	display: block;
	margin-bottom: 2px;
	font-size: 22.31px;
	}

#anncmnt article h3 {
	--color-link-static: #3B5491;
	display: flex;
	flex-direction: column;
	margin-top: 12px;
	margin-bottom: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	}

#anncmnt > a {
	display: inline-flex;
	align-items: center;
	column-gap: 14px;
	margin-top: 38px;
	font-size: 14px;
	}

#anncmnt > a .arrow-right-wide {
	position: relative;
	top: 2px;
	}



/*  4. overview
-------------------------------------------------------*/

#overview {
	margin-top: 45px;
	color: #012659;
	font-family: Montserrat, sans-serif;
	}

#overview ul {
	margin-bottom: 0;
	padding-left: 0;
	}

#overview li::marker {
	color: transparent;
	font-size: 0;
	}
#overview .overview-link{
    display:block;
    color: inherit;          /* yazı rəngi toxunmasın */
    text-decoration:none;    /* alt xətt olmasın */
}

#overview .overview-link:hover .w{
    box-shadow:0 6px 10px rgba(0,0,0,.3);
    transform:translateY(-3px);
    transition:.2s ease;
    border-color:#012659;
}
#overview .w {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 26px;
	min-height: 222px;
	overflow: hidden;
	font-size: 16px;
	text-align: center;
	background-color: #fff;
	border: 2px solid #012659;
	border-radius: 23px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	}

#overview .w strong {
	margin-block: 10px 5px;
	font-size: 32px;
	}



/*  5. cta
-------------------------------------------------------*/

#cta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	margin-top: 80px;
	margin-inline: auto;
	padding: 49px 49px 49px 459px;
	max-width: min(972px, 100% - 2 * var(--dist-min-cont-edge));
	height: 440px;
	background: 100% 50% / auto auto no-repeat url(../img/bg_cta.svg) #012659;
	border-radius: 10px 8px 8px 10px;
	}

#cta picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 410px;
	overflow: hidden;
	border-radius: 8px 0 0 8px;
	}

#cta h2 {
	margin-top: 52px;
	margin-bottom: 0;
	color: #fff;
	font-size: 32px;
	line-height: 1.34375;
	font-family: Montserrat, sans-serif;
	}

#cta a {
	--color-link-static: #012659;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-top: 68px;
	padding-inline: 20px;
	min-width: 144px;
	height: 37px;
	font-size: 14px;
	font-weight: 500;
	font-family: "Plus Jakarta Sans", sans-serif;
	text-align: center;
	background-color: #7AFFCA;
	border-radius: 8px;
	}



/*  6. recognition
-------------------------------------------------------*/

#recog {
	margin-top: 119px;
	}

#recog ul {
	--gap: 25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--gap);
	margin-bottom: 0;
	padding-left: 0;
	}

#recog li::marker {
	color: transparent;
	font-size: 0;
	}



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

@media (max-width:  991px) {

/*  1. headlines  */

#headlines {
	margin-block: 16px 52px;
	height: auto;
	overflow: visible;
	}

#headlines .splide__slide {
	display: block;
	}

#headlines .splide__slide picture {
	width: 100%;
	}

#headlines .splide__slide picture img {
	height: 176px;
	}

#headlines .splide__slide .w {
	padding: 16px;
	width: 100%;
	box-shadow: none;
	}

#headlines .splide__slide .w a {
	color: rgb(9, 12, 2);
	font-size: 16px;
	}

#headlines .splide__pagination {
	bottom: -28px;
	gap: 7px;
	width: 100%;
	}

#headlines .splide__pagination button {
	width: 6px;
	height: 6px;
	}


/*  2. news  */

#news {
	display: block;
	}

#news h2 {
	margin-bottom: 10px;
	}

#news article {
	width: 100%;
	}

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

#news article h3 {
	margin-bottom: 0;
	}

#news > a {
	margin-top: 20px;
	}


/*  3. news  */

#anncmnt {
	margin-top: 50px;
	text-align: left;
	}

#anncmnt h2 {
	margin-bottom: 10px;
	}

#anncmnt > a {
	margin-top: 20px;
	}


/*  4. overview */

#overview {
	margin-top: 50px;
	}

#overview ul {
	row-gap: calc(var(--bs-gutter-x) / 2);
	}

#overview :nth-child(odd).col-6 {
	padding-right: calc(var(--bs-gutter-x) * 0.25);
	}

#overview :nth-child(even).col-6 {
	padding-left: calc(var(--bs-gutter-x) * 0.25);
	}

#overview .w {
	padding-bottom: 27px;
	min-height: 0;
	}


/*  5. cta  */

#cta {
	margin-top: 50px;
	padding: 0;
	width: calc(100% - 2 * var(--dist-min-cont-edge));
	height: auto;
	border-radius: 10px 10px 8px 8px;
	}

#cta picture {
	position: static;
	display: flex;
	width: 100%;
	border-radius: 8px 8px 0 0;
	}

#cta picture img {
	aspect-ratio: 410 / 440;
	width: 100%;
	}

#cta h2 {
	margin-top: 24px;
	margin-inline: 24px;
	font-size: 24px;
	}

#cta a {
	margin: 24px;
	}


/*  6. recognition  */

#recog {
	margin-top: 50px;
	}

}



/*  8. responsive ( 480px)
-------------------------------------------------------*/

@media (max-width:  480px) {

/*  6. recognition  */

#recog li {
	width: calc((100% - var(--gap)) / 2);
	}

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

}