/*TOP LEVEL STYLES ========================================================== */
/*the "html *" below is appied to all of the CSS code*/
/*the !important code overrides all other CSS code*/ 
html 
{
	font-family: 'Noto Serif', serif; /*google font*/
	/*font-family: "Microsoft JhengHei UI", "arial", Sans-serif !important; /**/
	scroll-behavior: smooth; /*for jump to top: scroll vs snap*/	
}
body 
{ 
	margin:0; /*removes white border around the whole website*/
	padding:0; /*removes white border around the whole website*/	
	/*min-width: 300px; /*restricts webpage from getting any smaller than defined amount*/
}  
a[href^=tel] /*this will prevent phone numbers from looking blue on safari*/ 
{
   text-decoration:inherit;
   color: inherit;
}
b { font-weight: bold; }
button { cursor: pointer; }

/*layout framework styles ====================================================*/
.pgHeader {}
.pgMain {}
.pgSection {} 
.pgFooter 
{
	background-color: #080F2C; /**/
	padding: 15px;	
}

/*multi-purpose classes ====================================================== */
.bold { font-weight: bold; }
.italic { font-style: italic; } 
.underline { text-decoration: underline; }
.noUnderline { text-decoration: none; }
.align_right { text-align: right; }
.center { text-align: center; }
.center_flex
{
	display:flex; /**/
	justify-content:center; /**/
	align-items:center; /**/
}
.center_div
{
	display: block; 
	margin-left: auto; 
	margin-right: auto;
}
.font-10 { font-size: 10px; }
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-22 { font-size: 22px; }  
.font-23 { font-size: 23px; }
.font-24 { font-size: 24px; } 
.font-25 { font-size: 25px; }
.font-31 { font-size: 31px; }
.lh-6 { line-height: 1.6; } 
.hr_gray_75 { border-top: 2px solid #e8e8e8; border-bottom: 2px solid #f8f8f8; width:75%; }
.hr_gray_80 { border-top: 2px solid #e8e8e8; border-bottom: 2px solid #f8f8f8; width:80%; }
.hr_gray_95 { border-top: 2px solid #e8e8e8; border-bottom: 2px solid #f8f8f8; width:95%; }
.hr_gray_100 { border-top: 2px solid #e8e8e8; border-bottom: 2px solid #f8f8f8; width:100%; }
.black { color:#000000; }
.white { color:#ffffff; }
.theme_blue { color: #080F2C; } 
.theme_gold { color: #E7DDA2; }  
.hide { display: none; }

/*header + navbar styles ==================================================== */
.logo_box
{
	max-width: 75px;	
	float: left; /**/
	position: absolute; /*so it doesn't take up space*/	
	/*border:1px solid red; /*hide - for layout only*/
}
.logo
{
	width: 100%;
	height: auto; 
}
.nav_flexbox 
{
	display: flex; /*flexbox for navigation bar*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: flex-end; /*flex - how items are positions in flexbox*/
	
	margin: auto; /*centers the nav container*/ 
	list-style: none; /*remove bullet points*/
	align-items: center; /*centers each individual box vertically*/
	background-color: #080F2C;
	padding: 15px 0px; 
	/*border:1px solid yellow; /*hide - for layout only*/	
}
.nav_flexbox > a, button 
{
	/*width: 160px; /*box width*/ 
	margin: 0px 33px; 
	height: 50px; /*box height*/
	text-align: center; /*center text horizontally*/ 
	font-size: 20px;  
	text-decoration: none; /*remove underline*/ 
	line-height: 50px; /*text height - work on this*/
	color: white; /**/	
	/*border:1px solid green; /*hide - for layout only*/
}
.nav_flexbox > a:hover  
{	
	color: #E7DDA2; /*gold*/
}

/*navbar dropdown styles ============================================================= */
.dropdown 
{
	float: left;
	overflow: hidden;
}
.dropdown .dropbtn /* copy properties from ".nav_flexbox > a, button" */
{
	font-size: 20px;  	
	border: none;
	outline: none;
	color: white;
	background-color: inherit;
	font-family: inherit;
	margin: 0px 33px;
	/*border:1px solid green; /*hide - for layout only*/
}
.dropdown:hover .dropbtn /*top dropdown hover*/
{
	color: #E7DDA2;  /*gold*/
}
.dropdown-content 
{
	display: none;
	position: absolute;
	background-color: #f9f9f9; /*off-white*/ 
	/*min-width: 160px; /**/
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a 
{
	float: none;
	color: black;
	padding: 12px 16px; /**/
	text-decoration: none;
	display: block;
	text-align: left; /**/
}

.dropdown-content a:hover /*dropdown item*/
{
	background-color: #E7DDA2; /*gold*/
}

.dropdown:hover .dropdown-content 
{
	display: block;
}

/*home page (Anasayfa) styles ============================================================= */
.img_cont 
{
	position: relative; /**/
	margin-bottom:-6px; 
	background-color:#080F2C;  
	padding-bottom: 5px; 
	/*border:1px solid red; /*hide - for layout only*/	
}
.home_img
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 65%;
	height:auto;	
	/*
	image-rendering: -webkit-optimize-contrast; blurry img in chrome fix
	image-rendering: auto; 
	image-rendering: crisp-edges; 
	image-rendering: pixelated; 
	*/
}
.img_pos
{
	position: absolute; /**/
	top: 16%; /*65px || 16% */
	right: 19%;  /* 370px || 19% */	
	width: 24%;  /* 440px || 24% */
	color: white; 
	line-height: 1.1vw;
	/*border:1px solid red; /*hide - for layout only*/		
}
@media all and (max-width: 600px) { .img_pos { line-height: 0.2vh; } }
.welcome
{
	font-size: 0.85vw; /* 16px || 0.85vw */
	margin-bottom: 7px; 	 
}
.welcome2
{
	font-size: 0.80vw;  /* 15px || 0.80vw */
}
@media all and (max-width: 1250px) { .welcome { display:none; } .welcome2 { display:none; } }
.quote_flexbox
{	
	display: flex; /*flexbox*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: center; /*flex - how items are positions in flexbox*/
	margin: auto; /*centers the container*/ 
	padding: 65px 15px; /**/
	background-color: #e6e6e6;  
	/*border:1px solid red; /*hide - for layout only*/	
}
.quote_img_cont
{
	max-width: 500px; 
	height: auto;	
	margin: 0px 40px; /**/
	/*border:1px solid red; /*hide - for layout only*/	
}
.quote_img
{
	width: 100%; 
	height: auto;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4); /*x,y,blur,spread,color*/
}
.quote
{
	font-size: 18px;
	color: black;
	width: 500px; 
	padding: 15px;  /*t,r,b,l*/
	margin: 0px 40px; /**/		
	/*border:1px solid red; /*hide - for layout only*/
}
.news_cont
{
	padding: 40px 0px; /**/
	background-color: #f0f0f0;  
	/*border:1px solid red; /*hide - for layout only*/	
}
.news_flexbox 
{
	display: flex; /*flexbox*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: center; /*flex - how items are positions in flexbox*/
	margin: auto; /*centers the container*/ 
	/*border:1px solid blue; /*hide - for layout only*/	
}
.news
{
	line-height:1.6; 
	width: 400px; 
	background-color: #E7DDA2;
	padding: 15px 15px; 
	margin: 15px 15px; 
	/*border:1px solid green; /*hide - for layout only*/
}
.news_title
{
	font-size: 20px;
	text-decoration: underline; 
}


/*about page (Hakkımızda) styles ============================================================= */
.about_cont
{
	padding: 20px 0px 45px 0px; /**/
	background-color: #080F2C;  
	/*border:1px solid red; /*hide - for layout only*/	
}
.img_cont_about 
{
	position: relative; /**/
	margin-bottom:-6px; 
	/*border:1px solid red; /*hide - for layout only*/	
}
.img_pos_about
{
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.about
{
	font-size: 25px; 
	font-weight: bold; 
	color: white; 
}
.about_txt
{
	line-height:1.6; 
	max-width: 800px; 
	color: white; 
	padding: 15px 15px; 
	margin: 15px auto; 
	/*border:1px solid green; /*hide - for layout only*/
}
.quote2_flexbox
{	
	display: flex; /*flexbox*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: center; /*flex - how items are positions in flexbox*/
	margin: auto; /*centers the container*/ 
	padding: 35px 15px; /**/
	background-color: #e6e6e6;  
	/*border:1px solid red; /*hide - for layout only*/	
}
.quote2_img_cont
{
	max-width: 600px; 
	height: auto;	
	margin: 30px 40px;/**/
	/*border:1px solid red; /*hide - for layout only*/	
}
.quote2_img
{
	width: 100%; 
	height: auto;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4); /*x,y,blur,spread,color*/
}
.quote2
{
	font-size: 18px;
	color: black;
	width: 600px; 
	padding: 15px;  /*t,r,b,l*/
	margin: 30px 40px; /**/		
	/*border:1px solid red; /*hide - for layout only*/
}


/* board of directors page (Yönetim Kurulu) styles ============================================================= */
.director_cont
{
	padding: 15px; /**/
	/*border:1px solid red; /*hide - for layout only*/	
}
.director_flexbox 
{
	display: flex; /*flexbox for navigation bar*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: center; /*flex - how items are positions in flexbox*/
	
	margin: auto; /*centers the nav container*/ 	
	align-items: center; /*centers each individual box vertically*/	
	padding: 15px 0px; 
	/*border:1px solid blue; /*hide - for layout only*/	
}
.director
{
	margin: 15px 65px; 
	/*border:1px solid green; /*hide - for layout only*/	
}
.director img 
{
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4); /*x,y,blur,spread,color*/
	margin-bottom: 7px; 
}


/* audit (Denetim) styles ============================================================= */
.img_cont_audit
{
	position: relative; /**/
	margin-bottom:-6px; 
	/*border:1px solid red; /*hide - for layout only*/	
}
.img_pos_audit
{
	position: absolute;
	top: 41%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.audit
{
	font-size: 35px; 
	font-weight: bold; 
	color: white; 
}

.audit_text
{
	width: 75%; 
	margin: auto; 
	padding: 35px 15px; 
}
.audit_img
{
	float: right; 
	width: 170px; 
	height: 170px; 
	margin: 15px;
}


/*donations (Bağış) styles ============================================================= */
.donation_cont
{
	padding: 40px 0px; /**/ 	
	/*border:1px solid red; /*hide - for layout only*/	
}
.donation_title
{
	text-align: center; 
	color: black;
}
.donation
{
	line-height: 1.6; 
	max-width: 900px; 
	/*background-color: #f0f0f0; /**/
	padding: 15px; 
	margin: 15px auto; 
	/*border:1px solid green; /*hide - for layout only*/
}
.type_box
{
	padding: 15px 25px;  	 
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
}

.how_out_box
{
	padding: 40px 0px; /**/ 	
	/*border:1px solid red; /*hide - for layout only*/	
}
.how_in_box 
{
	line-height:1.6; 
	max-width: 1200px; 
	/*background-color: #f0f0f0;/**/
	padding: 15px 15px; 
	margin: 15px auto; 
	/*border:1px solid green; /*hide - for layout only*/
}
.how_item_boxA 
{
	background-color: #f0f0f0;
	padding: 15px; 
	/*border:1px solid red; /*hide - for layout only*/
}
.how_item_boxB 
{
	padding: 15px; 
	/*border:1px solid red; /*hide - for layout only*/
}

.bkm_express
{
	display: block;
	margin: 10px auto; 
	width: 189px;
	height: auto; 
	border: 2px solid gray;
	box-shadow: 5px 5px 3px gray;
}
.donate_but 
{
	display: inline-block;
	padding: 10px 20px;
	font-size: 18px;
	cursor: pointer;
	text-decoration: none;  
	color: white;
	background-color: #080F2C;
	border-radius: 35px;  
	margin: 25px 0px; 
}
.left_but
{
	text-align: center;
}

.transfer_flexbox 
{
	display: flex; /*flexbox for navigation bar*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: center; /*flex - how items are positions in flexbox*/
	
	margin: auto; /*centers the nav container*/ 	
	align-items: center; /*centers each individual box vertically*/	
	padding: 0px; 
	/*border:1px solid blue; /*hide - for layout only*/	
}
.transfer
{
	line-height:1.6; 
	width: 350px; 
	/*background-color: #E7DDA2;/**/
	padding: 15px 15px; 
	margin: 15px 15px; 
	border: 3px solid #080F2C; /**/
}

#scrollBtn 
{
  /*position: fixed; /* fixed position approach */
  /*bottom: 10px; /*fixed*/
  /*right: 45px; /*fixed*/
  position: sticky; /* sticky position approach */
  position: -webkit-sticky;  /*sticky*/
  bottom: 0; /*sticky*/
  /*float: right;  /*sticky*/
  margin-left: auto; 
  margin-right: 55px; /*sticky*/
  
  display: none;
  z-index: 99;
  font-size: 33px;
  border: none;
  outline: none;
  background-color: lightgray; 
  color: #000000; /* #454545; */ 
  cursor: pointer;
  padding: 0px 18px 8px 18px; /*t,r,b,l*/
  border-radius: 5px;
}


/* projects (Projelerimiz) styles ============================================================= */
.img_cont_proj
{
	position: relative; /**/
	margin-bottom:-6px; 
	/*border:1px solid red; /*hide - for layout only*/	
}
.img_pos_proj
{
	position: absolute;
	top: 50%;
	left: 48%;
	transform: translate(-50%, -50%);
}
.proj
{
	font-size: 35px; 
	font-weight: bold; 
	color: white; 
}
.proj_grad
{
	background: rgb(143,143,143);
	background: linear-gradient(0deg, rgba(143,143,143,1) 0%, rgba(230,230,230,1) 10%);
}
.proj_flexbox 
{
	display: flex; /*flexbox for navigation bar*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-around; /*flex - how items are positions in flexbox*/
	
	max-width: 1200px; 
	margin: auto; /*centers the nav container*/ 	
	align-items: center; /*centers each individual box vertically*/	
	padding: 65px 0px 45px;
	/*border:1px solid red; /*hide - for layout only*/	
}
.proj_img
{
	width: 338px; 
	max-width: 100%; 
	height: auto;
	border:1px solid #12009e;
	margin:15px; 
}
.proj_text
{
	max-width: 625px; 
	margin: 0px 15px; 
	padding: 0px 15px;
	/*border:1px solid green; /*hide - for layout only*/
}
.proj_img2
{
	display: block;
	width: 100%; 
	max-width: 338px; 
	height: auto; 	
	margin: 0px auto; 
	padding-bottom: 55px; 
}
.proj_img2:active
{
  transform: scale(1.5); 
}



/*footer styles ============================================================= */
.copyright
{
	font-size: 10px; 
	color: white; 
	line-height: 20px;
	text-align: center;
}
.social_media
{
	text-align: center;	
}
.social_media > a 
{
	text-decoration: none;
}
.social_media > a > img 
{
	width: 45px; 
	height: auto;
	padding: 0px 0px 7px 0px; 
}


/* media queries - to change layout on small devices/viewports ============== */
/* put media queries at the end of your "cascading" stylesheet ============== */

@media all and (max-width: 400px) /*audit*/
{
	.audit_img
	{
		display: none; 
	}
}
@media all and (max-width: 1530px) /*header*/
{
	.logo_box
	{		
		float: none; /**/
		position: static; /**/			
		display: block; 
		margin: 10px auto 10px auto; /**/
		/*box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); /**/
	}
	.nav_flexbox 
	{
		justify-content: center; /**/		
	}
}