@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,300;0,400;0,500;0,700;1,500&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,300&display=swap');
@font-face {font-family: 'Esbah'; src: url('fonts/Esbah-Regular2.ttf') format('truetype'); font-display: swap;}

/* #Reset & Basics k
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}


* {padding: 0; margin: 0; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;}
html {position: relative; height: 100%;	-webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;	
/* font-size:14px; */}
body {position: relative; height: 100%; margin:0; padding:0; font-family: 'Roboto', sans-serif; 
	/*
	  Montserrat
	  'Raleway', sans-serif
	  'Barlow', sans-serif
	  'Poppins', sans-serif
	  'Rubik', sans-serif
	  'Montserrat', sans-serif;
	*/
	font-size: 1rem; font-weight: 400; line-height: 1.7; color: #555; letter-spacing: 0; 
	background: rgba(23, 64, 118, 1); background: radial-gradient(circle, rgba(36, 89, 158, 1) 14%, rgba(23, 64, 118, 1) 100%);
}
	:root {	--doc-height: 100%;}
/* Typography
------------------------------------- */
  h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 1rem; font-family: 'Barlow', sans-serif; font-weight: 500; line-height: 1.5; color: inherit;}
  h1 {font-size: 3rem;}
  h2 {font-size: 2.4rem;}
  h3 {font-size: 2rem;}
  h4 {font-size: 1.6rem;}
  p {margin-top: 0; margin-bottom: 1rem; }
  b, strong {font-weight: 500;}
  small, .small  {font-size: 80%;}
  
  @media only screen and (min-width:993px) and (max-width:1200px) {
	h1 {font-size: 2.9rem;}
	h2 {font-size: 2.3rem;}
	h3 {font-size: 1.9rem;}
	h4 {font-size: 1.5rem;}
  }
  @media only screen and (min-width:769px) and (max-width:992px) {
	h1 {font-size: 2.8rem;}
	h2 {font-size: 2.2rem;}
	h3 {font-size: 1.8rem;}
	h4 {font-size: 1.4rem;}
  }
  @media only screen and (min-width:577px) and (max-width:768px) {
	h1 {font-size: 2.7rem;}
	h2 {font-size: 2.1rem;}
	h3 {font-size: 1.7rem;}
	h4 {font-size: 1.3rem;}
  }
  @media only screen and (min-width:0px) and (max-width:576px) {
	h1 {font-size: 2.6rem;}
	h2 {font-size: 2rem;}
	h3 {font-size: 1.6rem;}
	h4 {font-size: 1.2rem;}
  }

  /* List */
  ol, ul, dl {margin-top: 0; margin-bottom: 1rem;}
  ol ol, ul ul, ol ul, ul ol {margin-bottom: 0;}
  /* HR  */
  hr {box-sizing: content-box; height: 0;	overflow: visible; margin-top: .5rem; margin-bottom: .5rem; border: 0; border-top: 1px solid #ddd;}
  hr.dashed {box-sizing: content-box;	height: 0; overflow: visible; margin-top: 1rem;	margin-bottom: 1rem; border: 0;	border-top: 1px dashed #ccc;}
  img {border:none; padding:0; margin:0; display:block;}
  /* Links */
  a {color: #aaa; text-decoration: none;}
  a:hover {text-decoration: none;}
  /* placeholder */
  ::placeholder {color: #aaa;}
  /* sup */
  sup {	vertical-align: super; font-size: .5rem;}
  /* Form */
  input, button, select, optgroup, textarea {margin: 0; font-family: inherit;	font-size: inherit;	line-height: inherit; border:1px solid #aaa;}
  label {display: block; font-weight:400;}
  button {border-radius: 0;}
  button, input {overflow: visible;}
  button, select {text-transform: none;}
  button, html [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
  button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {padding: 0; border-style: none;}
  input[type="radio"], input[type="checkbox"] {box-sizing: border-box; padding: 0;}
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {-webkit-appearance: listbox;}
  textarea {overflow: auto; resize: vertical;	background-color:#fff;}
  fieldset {border: 1px solid #bbb;}
  legend {font-weight:500;}
  textarea:focus, input:focus{outline: none; }
  button {border:none; background: none; cursor: pointer;}
  button.btn, .btn {display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; padding: .5rem 1rem;
	font-size: 1rem; line-height: 1.5; border-radius: 1px; transition: all .5s;
	cursor:pointer;	margin: .5rem 0; background-color:#ddd; color:#333;}
	.btn:hover {color: #fff; background-color: #5a6268;	border-color: #545b62; text-decoration: none;}
	.btn:focus, .btn.focus {box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);}
	.btn.disabled, .btn:disabled {color: #fff; background-color: #6c757d; border-color: #6c757d;}
	.btn span{margin-right: 0;}

/* GRID
––––––––––––––– */
.container-full {position:relative;	width: 100%; max-width:1920px; margin:0 auto; padding:0;}
.container-genis {position:relative; width: 100%; max-width: 1440px; margin:0 auto; padding:0;}
.container-dar {position:relative; width: 100%; max-width: 960px; margin:0 auto; padding:0;}
.container {position:relative; width: 100%; max-width: 1284px; margin:0 auto; padding:0;}
.grid {position:relative; width:100%; padding:0; margin:0;}
.container-full::after, .container-genis::after, .container-dar::after, .container::after, .grid::after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}

@media only screen and (min-width:993px) and (max-width:1200px) {
	.container-full {max-width: 100%;}
	.container-genis {max-width: 96%;}
	.container-dar {max-width: 960px;}
	.container {width:92%; max-width: 1140px;}
}
@media only screen and (min-width:769px) and (max-width:992px) {
	.container-full {max-width: 100%;}
	.container-genis {max-width: 95%;}
	.container-dar {max-width: 720px;}
	.container {width:92%; max-width: 960px;}
}
@media only screen and (min-width:577px) and (max-width:768px) {
	.container-full {max-width: 100%;}
	.container-genis {max-width: 96%;}
	.container-dar {max-width: 720px;}
	.container {width:92%; max-width: 720px;}
}
@media only screen and (min-width:0px) and (max-width:576px) {
	.container-full {max-width: 100%;}
	.container-genis {max-width: 96%;}
	.container-dar {max-width: 540px;}
	.container {width:92%; max-width: 540px;}
}

.col-1-12, .col-2-12, .col-3-12, .col-4-12, .col-5-12, .col-6-12, .col-7-12, .col-8-12, .col-9-12, .col-10-12, .col-11-12, .col-12-12, .col-1-5, .col-2-5, .col-3-5, .col-4-5 {
	position:relative; float:left; /* border:1px solid rgba(221,221,221,1);	box-sizing:border-box;	-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;	background-color:#ddd; */}
.col-1-12 {width:8.33%;}
.col-2-12 {width:16.66%;}
.col-3-12 {width:25%;}
.col-4-12 {width:33.33%;}
.col-5-12 {width:41.66%;}
.col-6-12 {width:50%;}
.col-7-12 {width:58.33%;}
.col-8-12 {width:66.66%;}
.col-9-12 {width:75%;}
.col-10-12 {width:83.33%;}
.col-11-12 {width:91.66%;}
.col-12-12 {width:100%;}
/* --- */
.col-1-5 {width:20%;}
.col-2-5 {width:40%;}
.col-3-5 {width:60%;}
.col-4-5 {width:80%;}
/* .col-5-4 -> .col-12-12 */

.content {position:relative; /* background:#fff; */ margin:0px 16px; padding:0;}
	.content::after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}

@media only screen and (min-width:577px) and (max-width:1200px) {
	.content {margin:0px 16px;}
}
@media only screen and (min-width:0px) and (max-width:576px) {
	.col-1-12, .col-2-12, .col-3-12, .col-4-12, .col-5-12, .col-6-12, .col-7-12, .col-8-12, .col-9-12, .col-10-12, .col-11-12, .col-12-12, .col-1-5, .col-2-5, .col-3-5, .col-4-5 {width:100%;}
	.content {margin:0px 10px;}
}
/* FIX
--------------------------------*/
.clearfix::after {display:block; font-size:0; content:" "; clear:both; height:0;}
*html .clearfix {zoom:1;} /* IE6 */ 
*:first-child+html .clearfix {zoom:1;} /* IE7 */

.clear {clear:both; padding:0 !important; margin:0 !important;}

.fRight {float:right;}
.fLeft {float:left;}

.filterWhite {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(55deg) brightness(104%) contrast(103%);}
.filterNone {filter: none;}

.flexStart {display: flex; width:100%; justify-content: flex-start; align-items: center; flex-wrap:wrap;}
.flexCenter {display: flex; width:100%; justify-content: center; align-items: center; flex-wrap:wrap;}
.flexSpaceBetween {display: flex; justify-content: space-between; align-items: center;}

.esbahFont {font-family: 'Esbah', serif; letter-spacing: -0.05em; font-weight: normal;}
.lightFont {font-weight: 100;}

.syfBaslik {}

.syfIcerikKap {padding-top: 32px; padding-bottom:32px;}

/* img
------------------------------------- */  
img {border:none; padding:0; margin:0; display:block;}
/*img {image-rendering: pixelated;} */
/*"image-rendering" özelliğini "pixelated" olarak ayarlar, bu da görüntüyü piksel tabanlı olarak keskinleştirir. auto (Varsayılan Değer): Bu değer, tarayıcının otomatik olarak görüntü işleme yöntemini seçmesine izin verir.*/
.img {}
.img img {object-fit: contain; max-width:100%;} /* En/boy oranını korurken kutuya doldurmak için duruma göre resmin boyutunu artırır veya azaltır.*/
/* kare */
.img-k {position:relative; width:100%; padding-top:100%; overflow:hidden;}/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */
/* yatay */
.img-k-y {position:relative; width:100%; padding-top:75%; overflow:hidden;}/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */
/* dikey */
.img-k-d {position:relative; width:100%; padding-top:125%; overflow:hidden;}/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */
	
.img-k img, .img-k-y img, .img-k-d img  {max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform:  translate(-50%, -50%);}

.displayNone {display:none;}
.displayBlock {display:block;}
.opacity0 {opacity: 0;}
.opacity1 {opacity: 1;}

/* HEADER
================================================================================================== */	
#headerKutu {position:fixed; top: 0; left: 0; z-index: 20; width: 100%; 	
	display: flex; justify-content:center; align-items: center; transition:all .3s ease;}
.headerKutu1 {background: rgba(0, 0, 0, .2); height: 90px;}
.headerKutu2 {background: rgba(23, 64, 118, 1); height: 60px;}

#headerKutuIc {width: 100%; 	
	display: flex; justify-content:space-between; align-items: center; transition:all .3s ease;}

.logo {position:relative; height:40px; padding:0; margin:0px 16px;}
	.logo img {max-height:100%; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(55deg) brightness(104%) contrast(103%);}

.headerKutu2 .logo  {height:30px;}

ul.headerMenu {padding:0; list-style:none; margin:0;}
	ul.headerMenu li {position:relative; padding:0; margin:0 16px; color:#fff; 
		float:left; display:block; font-size:1.2rem; line-height:3rem; cursor:pointer;
		transition:all .3s ease; border-bottom:3px solid rgba(255, 255, 255, 0);
		letter-spacing: 0;
	}
	ul.headerMenu li span {letter-spacing: 0;}
	ul.headerMenu li i {padding-right:5px;}
	ul.headerMenu li:hover {color:#fff; border-color: rgba(255, 255, 255, 1);}
	ul.headerMenu li:first-child {}

#esbahWeb {position: relative; margin:0; padding:0;}
#esbahWeb a {border-radius: 5px;  color:#fff; padding:.5rem .8rem; display:block;
	background: rgba(23, 64, 118, 1); background: linear-gradient(180deg, rgba(45, 99, 169, 1) 14%, rgba(23, 64, 118, 1) 100%); transition:all .2s ease-out;}
#esbahWeb a:hover {background: rgba(214, 35, 35, 1);}
#esbahWeb span {font-size:1rem;}
#esbahWeb i {font-size:1rem;}

/*mobil açılır menü */
.mobilmenu {position: relative; display:none;}
.select-oge {position: relative; padding:10px; width:260px; cursor: pointer; color:#fff; background: rgba(0, 0, 0, .4); font-size:.9rem;}
.select-menuac {position: relative; padding:8px 20px;  cursor: pointer; color:#fff; background: rgb(17, 48, 88); font-size:1.5rem; line-height: 1.5rem;}
.mobilmenu-list {display: none; position: absolute; top: 100%; right: 0; width:260px; list-style: none; padding: 0; margin: 0;
    background: rgb(17, 48, 88); }
.mobilmenu-list li {padding: 10px; cursor: pointer; color:#fff; letter-spacing: -1px; font-size:1rem;}
.mobilmenu-list li span {letter-spacing: 0;}
.mobilmenu-list li:hover {background: rgba(23, 64, 118, 1); }
.select-oge::after {content: '\e912'; /* Ok karakteri */ font-family: 'icomoon'; position: absolute;
	top: 50%; right: 10px; transform: translateY(-50%); pointer-events: none; color:#fff;}

.dil-select {margin-right:30px;	position: relative;}
	.dil-select select {display: block;	padding: 2px 25px 2px 10px;	font-size: .9rem; border: 1px solid #ccc;
		border-radius: 3px; color:#333; appearance: none; /* Tarayıcı varsayılan oku gizle */ 
		cursor:pointer; background-color: #eee; }
	.dil-select select::-ms-expand {display: none; /* IE'deki varsayılan oku gizle */ }
	.dil-select::after {content: '\e912'; /* Ok karakteri */ font-family: 'icomoon'; position: absolute;
		top: 50%; right: 6px; transform: translateY(-50%); pointer-events: none; color:#333;}
	.dil-select select:focus {color:#333;	outline: none; border-color: #fff; /* Seçildiğinde renk değiştirme örneği */ }

@media only screen and (min-width:993px) and (max-width:1200px) {
	.select-oge {font-size:.9rem; letter-spacing: -1px; }
	ul.headerMenu {display:none;}
	.mobilmenu {display:block;  }
	#dil {margin-left: auto;}
	#esbahWeb {display:none;}
	.headerKutu1 .logo  {height:30px;}
}
@media only screen and (min-width:769px) and (max-width:992px) {
	.select-oge {font-size:.9rem; letter-spacing: -1px; }
	ul.headerMenu {display:none;}
	.mobilmenu {display:block;  }
	.dil-select {margin-left: auto;}
	#esbahWeb {display:none;}
	.headerKutu1 .logo  {height:30px;}
}
@media only screen and (min-width:577px) and (max-width:768px) {
	.select-oge {font-size:.9rem; letter-spacing: -1px; }
	ul.headerMenu {display:none;}
	.mobilmenu {display:block;  }
	.dil-select {margin-left: auto;}
	#esbahWeb {display:none;}
	.headerKutu1 .logo  {height:30px;}
}
@media only screen and (min-width:0px) and (max-width:576px) {
	.select-oge {font-size:.9rem; letter-spacing: -1px; }
	ul.headerMenu {display:none;}
	.mobilmenu {display:block;  }
	.dil-select {margin-left: auto;}
	#esbahWeb {display:none;}
	.headerKutu1 .logo  {height:30px;}
	.mobilmenu-list li {padding: 10px; cursor: pointer; color:#fff; letter-spacing: -1px; font-size:.9rem;}
}


/* -> cooke - çerez */
#cookie-notice2 { background:rgba(0,0,0,1); padding:1rem; position:fixed; display:flex; justify-content: center; align-items: center; border-radius:5px; bottom:0; left:0; max-width:100%;  margin:10px; visibility:hidden; z-index:100; box-sizing:border-box;}
#cookie-notice2 p {color:#eee; font-family:inherit; font-size:.9rem; margin:0; font-weight:300;}
#cookie-notice2 p a {text-decoration: underline; color:#eee;}
#cookie-notice2 button {margin:0 .5rem; cursor:pointer}
@media only screen and (max-width:992px){
	#cookie-notice2 {margin:0; border-radius:0; padding:.5rem;}
	#cookie-notice2 p {font-size:.7rem;}
}

/* TALEP FORMU
––––––––––––––– */
#talepFormButKap {position: fixed; right: 0px; bottom:50%; width:52px; height:200px; z-index: 5; overflow: hidden; }
#talepFormBut {position:absolute; right:0; top:10px; height:180px; width:40px; background: rgba(214, 35, 35, 1);	background: linear-gradient(180deg, rgba(214, 35, 35, 1) 14%, rgb(147, 13, 13) 100%); text-align:center; border-radius: 10px 0 0 10px; cursor: pointer;}
#talepFormBut::after {position:absolute; content: ''; right:0; top:0; width:40px; height:180px; border-radius: 10px 0 0 10px; z-index:-1; 
	background-color: rgb(255, 255, 255, .5); animation: pulseAniTalep 1.2s infinite ease-in;}
#talepFormBut img {height:100%; margin:auto; }

@keyframes pulseAniTalep {from {width:40px; height:180px; opacity: 1;} to {top:-10px; width:52px; height:200px; opacity: .4;}}


#talepFormFixed {position:fixed; padding:0; margin:0; right: -100%; bottom: 0; height:100%; width:360px; z-index:30;
	border-left:5px solid #d62323; background: rgba(40, 50, 59, .9); background: linear-gradient(180deg, rgba(40, 50, 59, .9) 14%, rgba(15, 18, 21, .9) 100%); }
#talepFormKutu {width:100%; height:100%; display:flex; align-items:center; overflow: hidden;}
#talepFormKutuIc {padding:1rem 1.5rem; margin:0; width:100%;}
#talepFormKutuIc h3 {color:#fff; margin-bottom:1rem;}
#talepFormKutuIc p {color:#ddd;}
#talepFormKapat {position:absolute; right:2rem; top:2rem; margin:0; padding:0; color:#fff; cursor:pointer; z-index:3; display: flex;}	
#talepFormKapat i {font-size:2rem; line-height:2rem; margin:0;}
#talepFormKapat span {font-size:1rem; line-height:2rem; margin:0 .5rem 0 0;}

/* -> TALEP FORMU OGE */

.talepFormKap {width:100%; display:flex; justify-content: flex-start; flex-wrap: wrap;}
.talepFormItem {width:100%; padding:0 1rem 1rem 0; display:flex; flex-wrap:wrap;}
.talepFormItem.form50 {width:50%;}

.talepForm {display:flex;}
.talepForm input, .talepForm textarea {float:left; border:none; border-bottom:1px solid rgba(255,255,255,.3); color: #eee; background: transparent;}
	.talepForm input[type="text"], .talepForm textarea {width:100%; }
	.talepForm input[type="checkbox"] {margin:.2rem 1rem 0 0; width:16px; height:16px;}
	
	.talepForm textarea {height:5rem;}
	.talepForm .error {border: 1px solid red;}

	.talepForm input::placeholder, .talepForm textarea::placeholder {color:#eee; font-size: .8rem;}
	.talepForm .btn {}
	.talepForm .fInfo {font-size:.7rem; margin: 0; padding:0 .1rem; color:#ddd;}
	.talepForm .fInfo a {text-decoration: underline; color:#ddd;}
	.talepForm .telKutu {width:100%; display:flex; justify-content: flex-start;}

	
@keyframes pulseMesaj { 0% {border-left-width: 2px; width:80px;} 70% {border-left-width: 2px; width:80px; } 71% {border-left-width: 10px; width:90px;} 100% {border-left-width: 10px; width:90px;}}
  

#rightKap {position:fixed; bottom: 120px; width:80px; right: 0; z-index: 19; background: rgba(0, 0, 0, .4);
	display:flex; align-items: flex-end; flex-wrap: wrap;}

ul.sosyal {position:relative; margin:0; list-style:none; padding:0; width:100%;}
	ul.sosyal li {position:relative; display:block; list-style:none; height:4rem; margin:0 .5rem; padding:0; 
		background:transparent;	text-align: center;	color:#fff;}
	ul.sosyal li a {color:#fff; }
	ul.sosyal li.phone {border-bottom:1px solid rgba(229, 229, 229, .2); /*border-top:1px solid rgba(229, 229, 229, .2); */
		margin-top:1rem; padding-top:1rem; height:6rem;}
	ul.sosyal li.phone span {font-size: 1rem;}
	ul.sosyal li.whatsapp {border-bottom:1px solid rgba(229, 229, 229, .2); border-top:1px solid rgba(229, 229, 229, .2); 
		margin-bottom:1rem;	padding-top:1rem; height:6rem;}
	ul.sosyal li a {display:block;}
	ul.sosyal li i {float:left; color:#ddd; font-size:2rem; line-height:4rem; width:4rem; height:4rem; width:100%; 
		transition:all .2s ease-out;}
	ul.sosyal li:hover i {font-size:3rem;}


/* -> ANASAYFA BANNER YÜKSEK (proje detay vb.)*/
.bannerKap {background-color: rgba(23, 64, 118, 1); overflow: hidden; }
.bannerDetay {position:relative; width:100%; height: 100vh; height: var(--doc-height);	/* mobil 100vh fix */}
.bannerimg img {width:100%; height: 100vh; object-fit: cover;}
.bannerimg picture::after {content: ''; position: absolute; width: 100%; height:100%; background: rgba(0, 0, 0, 0); 
	left: 0; bottom: 0; right: 0; z-index:1;}
/* home*/
.bannerIcerik {position:absolute; top: 0; left:0; width:100%; height:100%; display: flex; align-items: center;}
	.bannerIcerik .container {padding-top:100px;}
	
	.bannerIcerik h1 {z-index:21; color:#fff;  margin-bottom:1.5rem; font-size: 3rem;}
	.bannerIcerik p.bannerH1Alt {position: relative; font-size:1.6rem; z-index:18; color:#fff; margin-bottom:0; font-weight:300; letter-spacing: -1px; padding-left:80px;}
	.bannerIcerik p.bannerH1Alt::after {content: ''; position: absolute; width: 60px; height:1px; background-color: #ffff; left: 0; top:49%; z-index:1;}	
	.bannerIcerik p.bannerH1Alt2 {font-size:2.4rem; line-height:3rem; height:3rem; color:#fff; margin:0; font-weight:700; letter-spacing: 1px; }
	.bannerIcerik p.bannerH1Alt3 {position: relative; font-size:1.6rem; z-index:18; color:#fff; margin-bottom:0; font-weight:300; letter-spacing: -1px;}

	/*.bannerIcerik h1 i::after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}*/

/* Karakter animasyonu için CSS */
@keyframes typeIn {from { width: 0; } to { width: 100%; }}

#lojistikSpan {display: block;	overflow: hidden; white-space: nowrap;}
  .typing {animation: typeIn 3s steps(40, end);}

.bannerIcerik .projeIkonKap {position: absolute; right:0; width:60%; display:flex; flex-wrap: wrap; padding:0; margin-top: 100px;}
	.bannerIcerik .projeIkon {position:relative; width:50%; margin: 1rem 0 1.5rem 0; display:flex; align-content: flex-start;  flex-wrap: wrap; }
	.bannerIcerik .projeIkon i {position:absolute; font-size:2.4rem; color:#eee; }
	.bannerIcerik .projeIkon span {font-size:1rem; line-height:1.2; color:#eee; padding: 0 .5rem 0 3rem; text-align: left; font-weight: 400;}

/*ana sayfa banner proje listeleme */
.proItemKap {display: flex;	padding-bottom:30px; margin-top:50px;}
.proItem {position: relative; width:360px; padding:0; margin: 0 10px 0 0; padding:0; cursor:pointer; }
	.proItem .proItemImg { position: relative; width:100%; padding-top:60%; overflow: hidden; box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, .25);}
	.proItem .proItemImg::after {content: ''; position: absolute; width: 100%; height:100%;transition: all .3s ease-in;
		background: rgba(0, 0, 0, 0.2); left: 0; top:0; z-index:1;}
	.proItem .proItemImg img {height: 100%; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #0076bc;}
	.proItem .proItemCapt {position: relative; width: 90%; margin:-1rem 5% 0 5%; height:4rem;  cursor:pointer; box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, .25);
		display: flex; align-items: center; align-items: center; flex-wrap:wrap; padding-left:1rem; padding-right:1rem;  z-index:15; background: rgba(255, 255, 255, 0.9);  transition: all .2s ease-in;}	
	.proItem .titleCapt {font-family: 'Barlow', sans-serif; color:#333; font-size:1rem; line-height: 1.2rem; font-weight:500; letter-spacing: 1px; transition: all .3s ease-in;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; margin:0 auto;}

	.proItem:hover .proItemCapt {background-color:rgba(23, 64, 118, 1);} 
	.proItem:hover .proItemImg {box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, .35);}
	.proItem:hover .proItemImg::after {background: rgba(0, 0, 0, 0);}
	.proItem:hover .titleCaptKap {}
	.proItem:hover .titleCapt {color:#fff;}

	.labelKutu {position:absolute; top:-5px; right:5px; border-radius: 0 0 10px 10px; box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .3); padding:5px;
		display: flex; align-items: center;	justify-content: center; z-index:2; background: rgba(36, 89, 158, 1); background: linear-gradient(180deg, rgba(36, 89, 158, 1) 14%, rgba(23, 64, 118, 1) 100%);}
		.labelKutu::after {content: ''; position: absolute;   top:1.4px; left:-3.5px;
			transform: rotate(45deg); border-color: transparent transparent transparent rgba(0, 0, 0, .5);
			border-style: solid; border-width: 3.5px;}
			.labelKutu span {font-weight: 300; color: #fff; text-align: center; letter-spacing: 0; font-size:13px;}
			.labelKutu span b {font-weight: 700; font-size:18px;}

		.labelKutu.labelteslim2024 {background: rgba(36, 89, 158, 1); background: linear-gradient(180deg, rgba(36, 89, 158, 1) 14%, rgba(23, 64, 118, 1) 100%);} 
		.labelKutu.labelteslim2024 span {font-size:13px;}
		.labelKutu.labelteslim2024 span b {font-weight: 700;}

		.labelKutu.labelsatista {background: rgba(214, 35, 35, 1);	background: linear-gradient(180deg, rgba(214, 35, 35, 1) 14%, rgb(133, 18, 18) 100%);} 
		.labelKutu.labelsatista span {font-size:13px;}
		.labelKutu.labelsatista span b {font-weight: 700;}


@media only screen and (min-width:993px) and (max-width:1200px) {
	.bannerIcerik .col-6-12 {width:100%;}
	.bannerIcerik .projeIkonKap {display:none;}
}
@media only screen and (min-width:769px) and (max-width:992px) {
	.bannerIcerik .col-6-12 {width:100%;}
	.bannerIcerik .projeIkonKap {display:none;}
	
	.bannerIcerik h1 {margin-bottom:.5rem; font-size: 2.4rem; letter-spacing: -1px;}
}
@media only screen and (min-width:577px) and (max-width:768px) {
	.bannerIcerik .col-6-12 {width:100%;}
	.bannerIcerik .projeIkonKap {display:none;}

	.bannerIcerik h1 {margin-bottom:.5rem; font-size: 2.2rem; letter-spacing: -1px;}
}
@media only screen and (min-width:0px) and (max-width:576px) {
	.bannerIcerik .container {padding-top:200px;}
	.bannerIcerik .col-6-12 {width:100%;}
	.bannerIcerik .projeIkonKap {display:none;}
	
	.bannerIcerik h1 {margin-bottom:.5rem; font-size: 2.1rem; letter-spacing: -1px;}
	.bannerIcerik p.bannerH1Alt2 {letter-spacing: -1px; }

	.proItem .proItemCapt {margin:-.5rem 5% 0 5%; height:3rem; padding-left:.5rem; padding-right:.5rem;} 
	.proItem .titleCapt { font-size:.9rem; letter-spacing: 0;}

	.labelKutu.labelteslim2024 span {font-size:10px;}
	.labelKutu.labelteslim2024 span b {font-weight: 500; font-size:12px;}

	.labelKutu.labelsatista span {font-size:10px;}
	.labelKutu.labelsatista span b {font-weight: 500; font-size:12px;}
}


/* inovasyon kutuları (sanayide.., ticarette...) */
.inokutular {width:100%; display:flex; flex-wrap: wrap; padding:32px 0; background-image: url('../images/anaProjeKapBg2.png'); background-position: center center; background-repeat: no-repeat;}
.inokutuItem1, .inokutuItem2, .inokutuItem3, .inokutuItem4 {width:50%; padding:32px;}
.inokutuItem1 {text-align:right; border-right:1px solid rgba(255, 255, 255, .3); border-bottom:1px solid rgba(255, 255, 255, .3);}
.inokutuItem2 {text-align:left; border-bottom:1px solid rgba(255, 255, 255, .3);}
.inokutuItem3 {text-align:right; border-right:1px solid rgba(255, 255, 255, .3);}
.inokutuItem4 {text-align:left;}

.inokutular .capt {color:#fff;}
.inokutular h3 {color:#fff; font-style: italic; font-weight: 500;}
.inokutular h3 span {font-weight: 300; font-style: normal;}
.inokutular p {color:#fff; font-weight: 300; font-size:1.2rem;}

@media only screen and (min-width:993px) and (max-width:1200px) {

}
@media only screen and (min-width:769px) and (max-width:992px) {

}
@media only screen and (min-width:577px) and (max-width:768px) {
	.inokutular p {font-size:1.1rem;}
}
@media only screen and (min-width:0px) and (max-width:576px) {
	.inokutuItem1, .inokutuItem2, .inokutuItem3, .inokutuItem4 {width:100%;}
	.inokutuItem2 {border-left:1px solid rgba(255, 255, 255, .3);}
	.inokutuItem3 {border-bottom:1px solid rgba(255, 255, 255, .3);}
	.inokutuItem4 {border-left:1px solid rgba(255, 255, 255, .3);}
	.inokutular p {font-size:1.1rem;}
}


/* proje content */

.banner2Kap {background-color: rgba(23, 64, 118, 1); overflow: hidden; }
.banner2Detay {position:relative; width:100%; height: 100vh; height: var(--doc-height);	/* mobil 100vh fix */}
.banner2img img {width:100%; height: 100vh; object-fit: cover;}
.banner2img picture::after {content: ''; position: absolute; width: 100%; height:100%; background: rgba(0, 0, 0, .05); 
	left: 0; bottom: 0; right: 0; z-index:1;}
.projeBImgContent {position:absolute; bottom: 14%; left:50%; margin-left:-400px; width:800px; font-weight:300; 
	background-color: rgba(255, 255, 255, 0.9); padding:16px;
	text-align:center; box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, .25);}
.projeBImgContent h2 {font-size:2.4rem;  z-index:21; color:#222; margin-bottom:.5rem;}
	.projeBImgContent p.bannerH2Alt {font-size:1.6rem; z-index:18; color:#333; margin-bottom:0; font-weight:300;}
	.projeBImgContent p span{font-weight:500;}	


button.gitOk {position: absolute; left:50%; bottom:20px; margin-right:1.2rem; background:none; border:none; z-index:3; color:#000; font-size:1.2rem; cursor: pointer; width:2.4rem; height:2.4rem; line-height: 2.4rem;
	animation: bounce 2s infinite;  border-radius: 50%; /*border: 3px solid #000; box-shadow: 0 0 3px rgba(0, 0, 0, .3); */ background-color:  rgba(255, 255, 255, .8); }

@media only screen and (min-width:993px) and (max-width:1200px) {

}
@media only screen and (min-width:769px) and (max-width:992px) {
	.projeBImgContent {position:absolute; margin-left:-40%; width:80%; font-weight:100; 
		background-color: rgba(255, 255, 255, 0.9); padding:16px;}
	.projeBImgContent h2 {font-size:2rem;}
	.projeBImgContent p.bannerH2Alt {font-size:1.4rem; }
}
@media only screen and (min-width:577px) and (max-width:768px) {
	.projeBImgContent {position:absolute; margin-left:-40%; width:80%; font-weight:100; 
		background-color: rgba(255, 255, 255, 0.9); padding:16px;}
	.projeBImgContent h2 {font-size:1.8rem;}
	.projeBImgContent p.bannerH2Alt {font-size:1.3rem; }
}
@media only screen and (min-width:0px) and (max-width:576px) {
	.projeBImgContent {position:absolute; margin-left:-40%; width:80%; font-weight:100; 
		background-color: rgba(255, 255, 255, 0.9); padding:16px;}
	.projeBImgContent h2 {font-size:1.6rem;}
	.projeBImgContent p.bannerH2Alt {font-size:1.2rem; }
}

.labelKap {	position: absolute;	top: 100px;	right: 20%; display:flex;	flex-wrap: wrap; padding:10px; }
	.labelCircle {width: 120px;	height: 120px; border-radius: 100%;	box-shadow: 0px 0px 0px 3px white, 0px 0px 5px 5px rgba(0, 0, 0, .3); animation:pulseAnimation 5s infinite;
		display: flex; align-items: center;	justify-content: center; transition: all 800ms ease-in-out;
		background: rgba(36, 89, 158, 1); background: radial-gradient(circle, rgba(36, 89, 158, 1) 14%, rgba(23, 64, 118, 1) 100%);}

	.labelCircle span {font-weight: 300; color: #fff;	text-align: center; letter-spacing: 1px; }

		.labelCircle.labelteslim2024 {background: rgba(36, 89, 158, 1); background: radial-gradient(circle, rgba(36, 89, 158, 1) 14%, rgba(23, 64, 118, 1) 100%);} 
		.labelCircle.labelteslim2024 span {font-size:21px;}
		.labelCircle.labelteslim2024 span b {font-size:26px;}

		.labelCircle.labelsatista {background: rgba(214, 35, 35, 1); background: radial-gradient(circle, rgba(214, 35, 35, 1) 14%, rgb(133, 18, 18) 100%);} 	
		.labelCircle.labelsatista span {font-size:21px;}
		.labelCircle.labelsatista span b {font-size:26px;}


		@keyframes pulseAnimation {
			0% {
			  transform: scale(1); box-shadow: 0px 0px 0px 3px white, 0px 0px 5px 5px rgba(0, 0, 0, .3); 
			}
			90% {
			  transform: scale(1); box-shadow: 0px 0px 0px 3px white, 0px 0px 5px 5px rgba(0, 0, 0, .3); 
			}
			95% {
			  transform: scale(1.15); box-shadow: 0px 0px 0px 5px white, 0px 0px 15px 15px rgba(0, 0, 0, .3); 
			}
			100% {
			  transform: scale(1); box-shadow: 0px 0px 0px 3px white, 0px 0px 5px 5px rgba(0, 0, 0, .3); 
			}
		  }

@media only screen and (min-width:993px) and (max-width:1200px) {

}
@media only screen and (min-width:769px) and (max-width:992px) {

}
@media only screen and (min-width:577px) and (max-width:768px) {
	.labelKap {right: 0; left:10%;}
}
@media only screen and (min-width:0px) and (max-width:576px) {
	.labelKap {right: 0; left:10%;}
}		

.pageProKap {background-image: url('../images/anaProjeKapBg3.png'); background-position: top right; background-repeat: no-repeat; }

/* proje genel özellik listeleme */
.projeGenel {margin:0 auto; padding:98px 16px 16px 16px; width:600px; display:flex; justify-content: space-between; align-items: center; border-bottom:1px solid rgba(255, 255, 255, .3);}
.projeGenel div {padding:0; font-weight: 300; line-height:1.5; font-size:.9rem; color:#fff;}
.projeGenel div span {clear:both; width:20%; font-weight:500;  line-height:2; letter-spacing:1px; font-size:1rem; color:#fff;}

.pageProContent {color:#fff; display:flex; flex-wrap: wrap; margin-bottom:64px; border-bottom:1px solid rgba(255, 255, 255, .3); }
.pageProContentSol {width:50%; padding:64px 32px 32px 32px; border-right:1px solid rgba(255, 255, 255, .3);}
.pageProContentSag {width:50%; padding:64px 32px 32px 32px;}

.projeMetinKap {position:relative; text-align:right;}
.projeMetinKap h3 {}
.projeMetinKap p {font-size:1.1rem; font-weight:300;}

/* -> proje özellik ikonları */
.pageProContentSag .projeIkonKap {width:100%; display:flex; justify-content: flex-start; flex-wrap: wrap; margin:0; padding:0; }
.pageProContentSag .projeIkon {position:relative; width:33%; margin: 1rem 0 1.5rem 0; display:flex; justify-content:space-between; align-content: flex-start;  flex-wrap: wrap; }
.pageProContentSag .projeIkon i {position:absolute; font-size:2.4rem; color:#eee; }
.pageProContentSag .projeIkon span {font-size:1rem; line-height:1.2; color:#eee; padding: 0 .5rem 0 3rem; text-align: left;}
.pageProContentSag .projeIkon:hover i {animation:1s flash both;}


/* -> proje-tab */
.buttonGalMap {display:flex; justify-content: center; align-items: center;}
.buttonGalMap button {background-color: #fff; color:#333; margin: 10px; padding:10px; transition:all 1s ease; border-radius: 5px; box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, .1);}
.divGalMap1, .divGalMap2  {position:relative; width:100%; overflow: hidden; margin-bottom:98px; transition:all 1s ease; }
#divGal1, #divGal2 { width:100%; transition:all 1s ease; top:0;}
#divMap1, #divMap2 {width:100%; transition:all 1s ease; top:0;}


/* -> Galeri */
.pageProContentGaleri {position:relative; color:#fff; text-align: center; margin-bottom:32px; padding:0 32px; }

/* -> Galeri - flexPGaleri */
.flexPGaleri {display:flex; justify-content: center; flex-wrap: wrap; padding:5px;}
.flexPGaleriItem {padding: 10px; width:50%;}
.flexPGaleriImg {position:relative;  width:100%; } 
.flexPGaleriImg img  {width:100%; box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, .1);}

.flexPGaleriImg::after {content: ''; position: absolute; width: 100%; height:100%; transition: all .3s ease-in;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
	left: 0;  bottom: 0; right: 0; cursor: pointer;
	z-index:1; }

.flexPGaleriItem:hover .flexPGaleriImg::after  {height:0;}


.mapinoMapKap {position:relative; width:100%; display:flex; padding:10px;}
	.mapinoMap {position:relative;  width: 100%; height:400px; z-index:1; box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, .1); }

/* -> Galeri - owlPGaleri */
.owlPGaleri {margin:0;}
.owlPGaleriImg {position:relative;  width:100%; padding:0 10px; } 
.owlPGaleriImg img  {width:100%;}

.owlPGaleri .owl-dots {display:none;}
.owlPGaleri .owl-nav {}
.owlPGaleri .owl-nav button.owl-prev, .owlPGaleri .owl-nav button.owl-next {position:absolute; top:48%; transform:translateY(-50%);  -webkit-transform: translateY(-50%); 
	width:32px; height:32px; color:#fff;  font-size: 32px; line-height:32px; 
	-webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; cursor:pointer; /* border:2px solid #ddd; */ /* border-radius:50%; background:rgba(255,255,255,1);*/
	}
	.owlPGaleri .owl-nav button.owl-prev {left:-32px;}
	.owlPGaleri .owl-nav button.owl-next {right:-32px;}


@media only screen and (min-width:993px) and (max-width:1200px) {
	.projeIkon {width:50%;}
}
@media only screen and (min-width:769px) and (max-width:992px) {
	.projeGenel {width:100%; padding:98px 32px 32px 32px; display:flex; justify-content:flex-start; flex-wrap: wrap;}
	.projeGenel div {padding:0; font-weight: 300; line-height:1.5; font-size:.9rem; color:#fff; width:100%; margin-bottom:8px;}
	.projeGenel div span {clear:both; width:20%; font-weight:500;  line-height:2; letter-spacing:1px; font-size:1rem; color:#fff;}

	.pageProContentSol {width:100%; padding:32px;  border-right:none; border-bottom:1px solid rgba(255, 255, 255, .3);}
	.pageProContentSag {width:100%; padding:32px; }
	.projeMetinKap {text-align:left;}
	.projeIkon {width:50%;}

}
@media only screen and (min-width:577px) and (max-width:768px) {
	.projeGenel {width:100%; padding:98px 32px 32px 32px; display:flex; justify-content:flex-start; flex-wrap: wrap;}
	.projeGenel div {padding:0; font-weight: 300; line-height:1.5; font-size:.9rem; color:#fff; width:100%; margin-bottom:8px;}
	.projeGenel div span {clear:both; width:20%; font-weight:500;  line-height:2; letter-spacing:1px; font-size:1rem; color:#fff;}

	.pageProContentSol {width:100%; padding:32px;  border-right:none; border-bottom:1px solid rgba(255, 255, 255, .3);}
	.pageProContentSag {width:100%; padding:32px; }
	.projeMetinKap {text-align:left;}
	.projeIkon {width:50%;}

}
@media only screen and (min-width:0px) and (max-width:576px) {
	.projeGenel {width:100%; padding:98px 32px 32px 32px; display:flex; justify-content:flex-start; flex-wrap: wrap;}
	.projeGenel div {padding:0; font-weight: 300; line-height:1.5; font-size:.9rem; color:#fff; width:100%; margin-bottom:8px;}
	.projeGenel div span {clear:both; width:20%; font-weight:500;  line-height:2; letter-spacing:1px; font-size:1rem; color:#fff;}

	.pageProContentSol {width:100%; padding:32px;  border-right:none; border-bottom:1px solid rgba(255, 255, 255, .3);}
	.pageProContentSag {width:100%; padding:32px; }
	.projeMetinKap {text-align:left;}
	.projeIkon {width:50%;}

	.flexPGaleriItem {width:100%;}
	.pageProContentSag .projeIkon {width:50%;}

}



#footerKap {background: rgba(36, 89, 158, 1); background: url('../images/anaProjeKapBg3.png') top right no-repeat, linear-gradient(180deg, rgb(0, 23, 36) 8%, rgb(23, 64, 118) 100%); }

#footer {color:#fff; display:flex; padding-top:64px; padding-bottom:16px;}
#footerSol {width:50%; padding:64px 32px 32px 32px; border-right:1px solid rgba(255, 255, 255, .3); display:flex; flex-direction: row-reverse; flex-wrap: wrap;}
#footerSag {width:50%; padding:64px 32px 32px 32px; display:flex;}

#footer a {color:#fff;}
#footerSol .logo {position:relative; height:50px; padding:0; margin:0 0 20px 0; z-index:11;}
#footerSol .logo img {max-height:100%; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(55deg) brightness(104%) contrast(103%);}
#footerSol p.foot { width:100%; margin:0; color:#eee; font-size: 1.2rem; font-weight:300; text-align:right;}

ul.sosyal-link { list-style:none; margin:16px 0; padding:0;}
ul.sosyal-link li {position:relative; display:block; float:left; list-style:none; width:3rem; height:3rem;
	margin:0 20px 0 0; padding:0; background:transparent; text-align:center; transition:all 0.15s ease-out;  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5);
	font-weight:300; 
}
ul.sosyal-link li a {display:block;}
ul.sosyal-link li a i {color:#fff; font-size:1.5rem; line-height:3rem; width:3rem; height:3rem; text-align: center;}
ul.sosyal-link li a span {display:none;}
ul.sosyal-link li:hover {background:rgba(120, 120, 120, 0.5); border-radius: 50%;}

/* -> iletisim bilgi ikonları */
#footerSag .fContactIkonKap {width:100%; display:flex; flex-wrap: wrap; margin:0; padding:0;}
#footerSag .fContactIkon {position:relative; width:100%; margin: 0 0 .3rem 0; display:flex;}
#footerSag .fContactIkon i {position:relative; font-size:1.8rem; min-width:2.4rem; line-height:2.4rem; color:#fff; text-align: center; transition: all .3s;}
#footerSag .fContactIkon p {font-size:1rem; padding:.3rem 0 0 .5rem; font-weight:300; }
#footerSag .fContactIkon p.telefon {font-size:1.6rem; padding:0 0 0 .5rem;}
#footerSag .fContactIkon:hover i {/*background-color: #333; color:#fff;*/}	

/* -> iletisim-map */
.contactMapKap {width:100%; display:flex; border:1px solid #fff; margin:0 0 64px 0;}
.contactMap {width: 100%; height:400px; z-index:1; box-shadow: 0 0 4px rgba(0, 0, 0, .1);}

ul.mapAcUL {position: relative; float:right; margin:0 0 -40px 30px; padding:0; list-style: none; z-index:3;}
	ul.mapAcUL li {float:left; width:90px; text-align:center; font-size:.7rem; line-height:1.5; color: #333; padding:0; margin:0 8px 0 0; cursor: pointer; }
	ul.mapAcUL li a {color: #333;}
	ul.mapAcUL li span {background-color: #fff;}
	ul.mapAcUL li i {font-size:2rem; color:#333;}
	ul.mapAcUL li img {width:100%;}

#footerAlt {color:#eee; font-size:.8rem; border-top:1px solid rgba(255,255,255,.1); padding:20px 0;}
#footerAlt p.copyright { float:left; padding:10px 0; margin:0; font-weight:500; }

@media only screen and (min-width:993px) and (max-width:1200px) {

}
@media only screen and (min-width:769px) and (max-width:992px) {

}
@media only screen and (min-width:577px) and (max-width:768px) {

}
@media only screen and (min-width:0px) and (max-width:576px) {
	#footer {flex-wrap: wrap; }
	#footerSol {width:100%; padding:64px 32px 32px 32px; border-right:none; flex-direction: row;}
	#footerSol .logo {height:30px;}
	#footerSol p.foot {text-align:left;}
	#footerSag {width:100%; padding:32px; }
}

.bg-7 {background-color: #212529;}

.bg-8 {background-color: rgba(23, 64, 118, 1);} 
.bg-8-graident {background: rgba(23, 64, 118, 1);
	background: radial-gradient(circle, rgba(36, 89, 158, 1) 14%, rgba(23, 64, 118, 1) 100%);}

.bg-antrasit {background-color: rgba(40, 50, 59, 1);}
.bg-antrasit-graident {background: rgba(40, 50, 59, 1);
	background: radial-gradient(circle, rgba(40, 50, 59, 1) 14%, rgba(47, 94, 198, 1) 100%);}