header{
	position: relative;
	width: 100%;
	overflow: hidden;
}
header .back{
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-image: url("../img/pattern1.png"), url("../img/pattern2.png");
	background-position: left -110px, right -110px;
	background-repeat: repeat-y;
	background-size: 200px auto;
	background-attachment: fixed;
	z-index: -10;
}
html.blackTheme header .back{
	background-image: url("../img/patternBlack1.png"), url("../img/patternBlack2.png");
}
header::after{
	content: '';
	display: table;
	clear: both;
}
header>.container{
	position: relative;
}
header .video{
	display: block; position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%; min-height: 100%;
	z-index: -5;
}
header #particles{
	z-index: -3;
}
header .item{
	height: 520px;
}
header .owl-carousel{
	position: relative;
	width: 100%;
}

header .item img{
	display: block; position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -4;
}
header .owl-carousel .owl-dots{
	/*display: none;*/
	position: absolute;
	bottom: 20px; left: 30px;
	z-index: 2;
	text-align: center;
}
header .owl-carousel .owl-dot{
	transform: rotate(45deg);
}
header .owl-carousel .owl-dot span{
	display: inline-block;
	width: 12px;
	height: 12px;
	background: #fff;
	margin: 5px;
	transition: 0.3s;
}
header .owl-carousel .owl-dot:hover span{
	animation: jello 0.6s;
}
header .owl-carousel .owl-dot.active span{
	background: #01305a;
	text-shadow: 0 0 12px rgba(82,116,220,0.3);
}
header .owl-nav button{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: 0.3s;
	width: 60px;
	height: 60px;
	line-height: 60px;
	background: #01305a !important;
}
/* header .owl-nav button:hover{
} */
header .owl-nav button i{
	display: inline-block;
	font-size: 36px;
	color: #fff;
	text-shadow: 0 0 12px rgba(82,116,220,0.3);
}
header .owl-nav .owl-prev{
	left: 0px;
}
header .owl-nav .owl-prev:hover i{
	animation: prevAnim 1s infinite;
}
@keyframes prevAnim{
	0%{
		transform: translateX(6px);
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translateX(-6px);
	}
}
header .owl-nav .owl-next{
	right: 0px;
}
header .owl-nav .owl-next:hover i{
	animation: nextAnim 1s infinite;
}
@keyframes nextAnim{
	0%{
		transform: translateX(-6px);
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translateX(6px);
	}
}
header .social{
	position: absolute;
	bottom: 20px;
	right: 30px;
	z-index: 2;
}
header .social a{
	position: relative;
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	padding: 6px 0;
	z-index: 2;
}
header .social a:hover img{
	animation: swing 0.6s;
}
header .social a img{
	position: relative;
	height: 20px;
	z-index: 2;
}
header .social a::after{
	content: ''; display: block;
	position: absolute; top: 0; left: 0;
	border-radius: 20px;
	width: 100%;
	height: 100%;
	background-color: #01305a;
	transform: scale(0);
	transition: 0.3s cubic-bezier(.56,.09,.41,1.85);
}
header .social a:hover::after{
	transform: scale(1);
}
header .social a.instagram::after{
	background: #DC3278; background: linear-gradient(45deg,#FEC561,#C10060,#4B0082);
}
header .social a.facebook::after{
	background: #4267B2;
}
header .social a.telegram::after{
	background: #29A1DD;
}
header .social a.twitter::after{
	background: #2EC1E2;
}
/********** section **********/
.sections{
	overflow: hidden;
	background-image: url("../img/pattern1.png"), url("../img/pattern2.png");
	background-position: left -110px, right -110px;
	background-repeat: repeat-y;
	background-size: 200px auto;
	background-attachment: fixed;
}

html.blackTheme .sections{
	background-image: url("../img/patternBlack1.png"), url("../img/patternBlack2.png");
}
.sections .container{
	position: relative;
}
html.blackTheme .sections img.back{
	display: none;
}
.sections .container img.back{
	position: absolute;
	width: 100%;
	max-width: 700px;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
}
.sections .section{
	position: relative; width: 100%;
	box-shadow: 0 0 12px rgba(0,0,0,0.1);
	transition: 0.3s; z-index: 2;
	overflow: hidden;
}
.sections .section .size14{
	position: relative;
	width: 100%;
	z-index: 2;
}
.sections .section:hover{
	background: #01305a;
	box-shadow: 0 40px 20px -24px rgba(0, 0, 20, 0.1);
   transform: translateY(-5px);
   transform: scale(2);
	color: #fff;
}
.sections .section span{
	position: absolute; right: 0; bottom: -30px;
	color: #01305a; font-size: 120px; line-height: 100px;
	z-index: 0; opacity: 0.1;
	transition: 0.3s;
}
.sections .section:hover span{
	opacity: 0.5;
	/*animation: swing 0.5s;*/
}
.sections .section .icon{
	position: relative; width: 100%;
	text-align: center; font-size: 48px;
}
.sections .section .icon svg{
	position: absolute; top: -15px; left: 50%;
	margin-left: -40px;
	width: 80px; opacity: 0; transition: 0.6s cubic-bezier(.57,.18,.7,1.16);
}
.sections .section:hover .icon svg{ opacity: 1; transform: rotate(180deg); }
.sections .section .icon svg path{
	stroke-dasharray: 1600;
	stroke-dashoffset: 1600;
	stroke-width: 8;
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 4;
	transition: 2s;
}
.sections .section:hover .icon svg path{
	stroke-dashoffset: 0;
}
.sections .section .size16{
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/*#yangiliklar{
	position: relative; width: 100%;
	overflow: hidden;
}
#yangiliklar svg.back{
	position: absolute; width: 100%;
	left: 0; bottom: -5px;
	z-index: 1;
}
#yangiliklar svg.back path{
	fill: #fff;
}
#yangiliklar svg.back polygon{
	fill: #fff;
}*/
#yangiliklar{
	overflow: hidden;
}
#tadbirlar{
	position: relative; width: 100%;
	overflow: hidden;
}
#tadbirlar svg.back{
	position: absolute; width: 100%;
	left: 0; bottom: -5px;
	z-index: -2;
}
#tadbirlar svg.back path,
#tadbirlar svg.back polygon{
	fill: #EBEBFA;
}
html.blackTheme #tadbirlar svg.back path,
html.blackTheme #tadbirlar svg.back polygon{
	fill: #09090E;
}

#announcements .row{
	margin-right: -6px;
	margin-left: -6px;
}
#announcements div[class*="col-"]{
	padding: 6px;
}
#announcements svg.back{
	position: absolute; width: 100%;
	left: 0; bottom: -5px;
	z-index: -2;
}
#announcements svg.back path,
#announcements svg.back polygon{
	fill: #EBEBFA;
}
html.blackTheme #announcements svg.back path,
html.blackTheme #announcements svg.back polygon{
	fill: #09090E;
}
#announcements .announcement{
	background-size: cover;
	background-position: center;
	height: 360px;
	color: #fff;
	cursor: pointer;
	border-radius: 20px;
}
#announcements .announcement.first::after{
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
	content: ''; display: block;
	position: absolute; top: 0; left: -2px;
	width: 80px; height: 100%;
	background-image: url('../img/mask-left.svg');
	background-size: auto 100%;
	background-position: top left;
	background-repeat: no-repeat;
	z-index: 6;
}
html.blackTheme #announcements .announcement.first::after{
	background-image: url('../img/mask-left-dark.svg');
}
#announcements .announcement.first .info{
	padding-left: 60px;
}
#announcements .announcement.last::after{
	clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0 100%);
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
	content: ''; display: block;
	position: absolute; top: 0; right: -2px;
	width: 80px; height: 100%;
	background-image: url('../img/mask-right.svg');
	background-size: auto 100%;
	background-position: top right;
	background-repeat: no-repeat;
	z-index: 6;
}
html.blackTheme #announcements .announcement.last::after{
	background-image: url('../img/mask-right-dark.svg');
}
#announcements .announcement.last .info{
	padding-right: 60px;
}
#announcements .announcement .darken{
	position: absolute; width: 100%; height: 100%;
	top: 0; left: 0; z-index: 2;
	/* background: rgba(0,0,0,0.5); */
	transition: 0.6s;
	border-radius: 10px;
}
#announcements .announcement .info{
	padding: 5px 10px;
	position: absolute; left: 0; top: calc(100% - 52px);
	width: 100%; height: 100%;
	z-index: 3; transition: 0.6s;
	background: rgba(0,0,0,0.5);
}
#announcements .announcement .info .lnk{
	color: yellow;
}
#announcements .announcement .fade{
	opacity: 0;
	transition: 0.5s;
	transition-delay: 0.5s;
}
#announcements .announcement:hover .darken{
	background: #01305a;
	background: rgba(0,0,30,0.7);
	border-radius: 10px;
}
#announcements .announcement:hover .info{
	top: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}
#announcements .announcement:hover .fade{
	opacity: 1;
	display: block;
	animation: fadeInUp 0.5s;
	animation-delay: 0.3s;
}
#announcements .announcement .icon{
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	background: rgba(0,0,30,0.3);
	z-index: 5;
}
#announcements .announcement:hover .icon i{
	display: inline-block;
	animation: tada 0.6s;
}
/********** STATISTICS  **********/
.statistic{
	position: relative;
	width: 100%;
	background: #01305a;
	color: #fff;
}
/********** FOYDALI MANBALAR  **********/
.manbalar .row{
	margin-right: -10px;
	margin-left: -10px;
}
.manbalar div[class*="col-"]{
	padding: 10px;
}
.manbalar .useful{
	height: 120px;
	display: flex;
	align-items: center;
	text-align: center;
	box-shadow: 0 15px 20px -12px rgba(0, 0, 20, 0.2);
   	transition: 0.2s;
	border-radius: 20px;
}
.manbalar .useful:hover{
	box-shadow: 0 32px 20px -20px rgba(0, 0, 20, 0.1);
	transform: translateY(-5px);
}
.manbalar .useful img{
	max-width: 100%;
	max-height: 100px;
}
/*  */
.services .back{
	background-size: cover;
	background-attachment: fixed;
	background-position: center bottom;
	z-index: -5;
}
.services .back + .bg-light{
	opacity: 0.8;
}
.services .service{
	position: relative;
	width: 200px;
	padding: 10px;
	float: left;
}
.services .hexagon{
	width: 180px; height: 180px;
	-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	box-shadow: 0 0 12px rgba(82,116,220,0.5);
	-webkit-box-shadow: 0 0 12px rgba(82,116,220,0.5);
	-moz-box-shadow: 0 0 12px rgba(82,116,220,0.5);
	padding: 15px 0;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	justify-content: center;
}
.services .service .title{
	text-align: center;
	font-size: 16px;
	text-transform: uppercase;
}

.services .service:hover .hexagon{
	background: #01305a;
	color: #fff;
	transform: scale(1.1);
}
.services .service:hover .hexagon .title{
	animation: pulse 0.5s;
}
.services .topServices{
	width: 1000px;
	margin: 0 auto;
}

.services .bottomServices{
	width: 1200px;
	margin: 0 auto;
	transform: translateY(-40px);
}