@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');
:root { /*** COLOR ***/	
--clr-m:#0057A6;							/*clr - color; m - main*/ --main-color:#0057A6;
--clr-s:#E40014;							/*s - second*/ 
--clr-t:#3DA3FF;							/*s - second*/ 
--clr-f:#F4FAFF;							/*t - third*/ 
--clr-w:#ffffff;							/*w - third*/
--clr-g:#E1F1FF;							/*g - grey*/
--clr-d:#8A97A5;							/*d - dark grey*/
--clr-b:#00294E;							/*b - black*/
--clr-i:#ffffff;							/*i - color in main color*/
--clr-o:0.4;								/*o - opacity*/
--clr-m-o:rgba(0,87,166, var(--clr-o));		/*m - main opacity*/
--clr-s-o:rgba(228,0,20, var(--clr-o));		/*s - second*/
--clr-t-o:rgba(255,145,0, var(--clr-o));	/*t - third*/
--clr-w-o:rgba(255,255,0, var(--clr-o));	/*w - third*/ 
--clr-g-o:rgba(255,241,255, var(--clr-o));	/*g - grey*/ 
--clr-d-o:rgba(113,112,109, var(--clr-o));	/*d - dark grey*/
--clr-b-o:rgba(0,41,78, var(--clr-o));		/*t - black*/ 
--clr-bg-gr:rgba(255, 200, 4, 0) 0%, rgba(255, 200, 4, var(--clr-o)) 100%; /* bg gradient */
--bg-gradient-s:rgba(255, 200, 4, 0) 0%; --bg-gradient-e:rgba(255, 200, 4, var(--clr-o)) 100%; /*** COLOR change ***/
/*** COLOR END ***/	

--wrap:90;
--margin-c:1em;
--margin-top:1em;
	
--head-logo-w:150px;
--head-margin-l:3em;
/* 427 - 3.2 Article.header + Structure */
--side-left-w:250px; /* for aside */
--side-right-w:250px;

/*** GAP ***/	
--min-div-w:120px;
--col-gap-px:40; /* 1 = 1px*/
--col-gap-vw:0; /* 1 = 1vw*/
--col-gap:calc(1vw*var(--col-gap-vw) + 1px*var(--col-gap-px));
	
	
--border-radius-full:250px;
--border-radius-block:20px;
--sq-rad:0px; /*block-border-radius*/
--sq-33:0 0 33%;
--sq-10:0 0 10%;
--sq-bor:0px; /*block-border*/
--sq-pad:0%; /*block-pading*/
	

/*radio-btn*/	
--lbl-radio:16px;
--lbl-radio-in:1.5;
--radius-lbl-radio:1px;
--half-lbl-radio:calc(var(--lbl-radio) / 2);
--quat-lbl-radio:calc(var(--lbl-radio) / 4);
/*------------------------------*/
	
}

:root {

--xformin-font-s:1em;
--xformin-w:calc(var(--xformin-font-s) + var(--xformin-brd-s) + 0.1em);
--xformin-h:calc(var(--xformin-font-s) + var(--xformin-brd-s) + 0.1em);
--xformin-clr:var(--clr-m);
--xformin-bg:var(--clr-w);
--xformin-dis:var(--clr-d);
--xformin-brd-c:var(--clr-m-o);
--xformin-brd-s:0.05em;
--xformin-brd-r:0.15em;
--xformin-brd-r:var(--sq-rad);
}

textarea, input[type="button"], input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="hidden"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
background:var(--clr-w); font-weight:600; border:var(--xformin-brd-s) solid var(--xformin-brd-c); border-bottom:2px solid var(--xformin-brd-c); border-radius:var(--xformin-brd-r);}
input:focus, textarea:focus {box-shadow:2px solid var(--xformin-brd-c); background:var(--xformin-bg)}
input[type="checkbox"], input[type="radio"] {font-size:1.5em}

*{font-family: "Unbounded", sans-serif; font-weight:300; line-height:1.5em;}
html, body {min-height:100vh; font-size:18px;}
body {background:#F4FAFF; background-size:auto;}
header.wrap {margin-bottom:0; padding-bottom:0.5em; padding-top:0.5em;}
.temp-02 {background: none; padding-top:1em; padding-bottom:1em;}
#menudrop > nav > ul > li > a {text-transform:none;}


.button-blue p {background:var(--clr-m);}
.button-red p {background:var(--clr-s);}

.left-im, .right-im{max-width:50%;}
.left-im {float:left; margin: 0em var(--margin-c) var(--margin-c) 0;}
.right-im {float:right; margin:0em 0em var(--margin-c) var(--margin-c);}






div.main-content {--top-page-h: calc(100vh - 107px - 1em);}
.top-page-bg-img {height:calc(100vh - 107px - 1em);}
.top-page-2 {padding-bottom:4em;}
.top-page-2 > header {background:center; display:flex; justify-content:center; flex-wrap:wrap; align-content:flex-end; background-size:cover; position: relative; height:calc(100vh - 107px - 1em);}
.top-page-2 .top-page-title {height:auto; width: 50%; margin: 0 auto 4em; background-color: var(--clr-b-o); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 2.5em;}
.top-page-2 > header h1{color:var(--clr-g); text-align:center; margin-bottom:0.5em; text-transform:none; justify-content:center}
.top-page-2 > header h1:before {display:none}
.top-page-2 > header h1:before {content: ''; height: 1px; width:40px; background:#fff; display:block; margin-right:10px;}
.top-page-gr-b {background:none; color:var(--clr-g); width:90%; margin:0 auto 2em; align-content:center; position:relative; height:auto; justify-content:center; padding-top:1em; border-top:1px solid;}


/*.breadcrumbs {position: absolute; bottom: -4em;}
#article-body-main {padding-top:4em; width:100%} */





.box-teg p {-webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); margin:0 0 1em 1em; border-radius:1em; padding:0.75em 1.5em;}
.box-teg > p * {border:none; color:var(--clr-d); font-size:1.125em; padding:0; display:inline-block; margin:0; margin-top:0!important;}
.box-teg > *:hover {background:none; border:none}

	
.teg-block {display:flex; flex-wrap:wrap; justify-content:center; margin-top:1em}
.teg-block .box-teg p {background-color:var(--clr-w); border:1px solid var(--clr-d);}
.teg-block .box-teg > * {border:none; color:var(--clr-d);}
.teg-block .box-teg p:hover {border:1px solid var(--clr-t);}
.teg-block .box-teg p:hover > * {color:var(--clr-t)}
	
.sub-cat-link {margin:1em auto}
.sub-cat-link a div {background:var(--clr-f); border-radius:2em; color:var(--clr-b); border:2px solid var(--clr-t);	font-size:1.125em; text-transform:uppercase; font-weight:600; height:100%; padding:1em 2em; display:flex; justify-content:center; align-items:center;}
.sub-cat-link a:hover div {background:var(--clr-w); color:var(--clr-m); border:2px solid var(--clr-s);}



/* INDEX */
/* INDEX */

/* about */
/* about */




/* FOOTER */
/* FOOTER */






.main-content > section, .main-content {margin-top:0}
.temp-02 #menudrop ul {padding:0; justify-content:space-between;}




#menudrop ul ul li a {color:var(--clr-w); background:var(--clr-m);}




.chess .box-2:nth-child(2n) .box-block {flex-direction: row-reverse;}
.box-more {bottom:7px; margin-bottom: 0;}
.box-more:after {display: none}
.sin-cat-prod.sin-sub-cat-prod .box-img {background:#fff; display:flex; align-items:center; justify-content:center;}
.serv-cat .box-3:nth-child(2n)	{transform:translateY(50%);}













/* Page about us */

/* Service category */


/* Service single*/

/* Product category */

/* Product single */

/* Gallery single */



	
	



/* Blog category */

/* Contact single */







.top-page {height:calc(100vh - 107px - 1em); margin-bottom:0}


.index-page .about-uss {margin-top:0}
.about-uss-top {align-items:center; flex-direction:row-reverse;}
.about-history > div:nth-child(2n) {flex-direction: row-reverse;}
.cc-banner .cc-message {color: var(--clr-w);}
.cc-link {color:var(--clr-w);}


/* index */
.ind-products {}
.about-partner {}
@media screen and (max-width: 1366px) {
html, body {min-height:100vh; font-size:14px;}
}
@media screen and (max-width: 1199px) {
.header-menu-drop .head-sub{top:7px; position:absolute; right:50px;} 
}

@media screen and (max-width:960px) {
html, body {font-size:14px;}
}
@media screen and (max-width:720px) {
html, body {font-size:14px;}
}

@media screen and (max-width:680px) {
html, body {font-size:18px;}
}
@media screen and (max-width:980px) {
.top-page-2 .top-page-title {height:calc(60vh - 107px - 1em);}
.top-page-bg-gr {height:40vh;}
}
@media screen and (max-width: 820px) {
}
@media screen and (max-width: 790px) {
}
@media screen and (max-width: 820px) {
}
@media screen and (max-width:680px) {	
.top-page-2 {height: auto;}
.top-page-bg-img {height:100%;}	
.top-page-2 .top-page-title {height:calc(60vh - 107px - 1em);}
.top-page-bg-gr {height:auto; padding-top: 1em; padding-bottom: 1em;}
}
@media screen and (max-width:540px) {
}
@media screen and (max-width:520px) {
}
@media screen and (max-width:480px) {
}