/*
Adem Kıyçak
Full Stack Web Developer
2025
*/


html, body { font-family: 'Roboto';  overflow-x: hidden; }


* {box-sizing: border-box; }
a { text-decoration: none; }
a:focus { outline-width: 0px; }
.clearfix { clear: both; }


:root {
	--color-white: #ffffff;
	--color-orange: #c01b2c;
	--color-dark-blue: #1E3E62;
	--color-black: #000;
	--color-gray-1: #838383;
	--color-gray-2: #5D5D5D;
	--color-gray-light: #f1f1f1;
	--color-gray-light-2: #f8f8f8;
}


/* Css Library */
.container-100{ width: 100%; height: auto; }
.container-90{ width: 90%; height: auto; }
.container-80{ width: 80%; height: auto; }
.container-70{ width: 70%; height: auto; }


.d-flex-column{ display: flex; flex-direction: column; } 
.d-flex-row{ display: flex; flex-direction: row; }

.d-flex-space-beetwen{ display: flex; justify-content: space-between; }
.d-flex-space-beetwen-center{ display: flex; justify-content: space-between; align-items: center; }
.d-flex-space-evenly-center{ display: flex; justify-content: space-evenly; align-items: center; }
.d-flex-space-around-center{ display: flex; justify-content: space-around; align-items: center; }
.d-flex-top-center{ display: flex; justify-content: space-around; align-items: flex-start; }
.d-flex-vertical-center{ display: flex; align-items: center; }
.d-flex-horizontal-center{ display: flex; justify-content: center; }
.d-flex-all-center{ display: flex; justify-content: center; align-items: center; }
.d-flex-all-top{ display: flex; justify-content: center; align-items: flex-start; }
.d-flex-wrap{ flex-wrap: wrap; }

.d-block{ display: block; }
.d-inline{ display: inline; }
.d-inline-block{ display: inline-block; }


.mt-5{ margin-top: 5px; }
.mt-10{ margin-top: 10px; }
.mt-15{ margin-top: 15px; }
.mt-20{ margin-top: 20px; }
.mt-25{ margin-top: 25px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.mt-50{ margin-top: 50px; }

.mb-5{ margin-bottom: 5px; }
.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; }
.mb-25{ margin-bottom: 25px; }
.mb-30{ margin-bottom: 30px; }
.mb-40{ margin-bottom: 40px; }
.mb-50{ margin-bottom: 50px; }

.clearfix{ clear: both; }




header{ width: 100%; max-width: 1280px; height: 120px; margin:0 auto; }
.logo > img{ width: auto; max-width: 180px; height: auto; height: 110px; object-fit: contain; }


/* Main menus */
.main-menus{ width: auto; height: auto; }
.main-menus li > a{
	margin: 20px;
	color: var(--color-gray-2);
	font-size:16px;
	font-weight: bold;
	padding: 20px 0px;

}

.main-menus li a > span{ font-size:11px; margin-left:3px }
.main-menus li a:hover{ color: var(--color-orange); }
.main-menus li:hover .sub-menus{ display: flex; flex-direction: column; }

/* Main sub menus */
.sub-menus{
	width: 300px;
	height: auto;
	background-color: var(--color-gray-light);
	display: none;
	position: absolute;
	margin-top: 10px;
	border:1px solid var(--color-orange);
	border-radius: 10px;
}

.sub-menus a{
	padding: 15px;
	margin: 0;
	font-weight: bold;
	font-size:14px;
	color: var(--color-gray-2);
}

.sub-menus a:hover{ background-color: var(--color-orange); color:var(--color-white) !important; }
.sub-menus a:first-child:hover{ background-color: var(--color-orange); border-radius: 10px 10px 0px 0px; color:var(--color-white) !important; }
.sub-menus a:last-child:hover{ background-color: var(--color-orange); border-radius: 0px 0px 10px 10px; color:var(--color-white) !important; }


/* Language Btn */
.languages-btn{ margin-right: 5px; padding: 10px; }
.languages-btn strong{ font-size:16px; font-weight: bold; color: var(--color-gray-2); }
.languages-btn span{ font-size:16px; color: var(--color-gray-2); margin-right:5px; }
.languages-btn i{ font-size:10px; color: var(--color-gray-2); margin-left: 5px; }
.languages-btn:hover * { color: var(--color-orange); }
.language-list span{ font-size:14px; font-weight: bold; color: var(--color-gray-2); }
.language-list span:last-child{ display: none; }

/* Login */
.login-btn{ border:1px solid var(--color-orange); border-radius: 5px; padding: 10px; margin-left:10px; }
.login-btn strong{ font-size:14px; font-weight: bold; color: var(--color-orange); }
.login-btn span{ font-size:16px; color: var(--color-orange); margin-right:5px; }
.login-btn i{ font-size:10px; color: var(--color-orange); margin-left: 5px; }
.login-btn:hover * { color: var(--color-white) !important;  }
.login-btn:hover { background-color: var(--color-orange); }



.responsive-main-menu-btn{
	font-size:24px;
	color: var(--color-dark-blue);
	display: none;
}



/* Slider */
.slider-container{
	width: 100%;
	height: 760px;
	background-color: var(--color-dark-blue);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.slider-content{
	width: 100%;
	max-width: 1280px;
	height: auto;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.slider-content > span{ 
	font-size:100px;
	font-weight: 300;
	color: var(--color-gray-light);
	margin-bottom: 10px;
 }

 .slider-content > strong{ 
	font-size:120px;
	font-weight: bold;
	color: var(--color-orange);
 }

 .slider-content > p{
	font-size:18px;
	line-height: 28px;
	color: var(--color-white);
	font-weight: 300;
	margin-top: 20px;
 }

 .slider-buttons { margin-top:30px; }
 .slider-buttons > a{ margin-right: 10px; }



 

/* Referance logos */
.referance-container{ width: 100%; height: 100px; background-color: var(--color-gray-light); padding: 20px; }
.referance-container > img{ width: 90px; height: auto; max-height:50px; object-fit: contain; }


/* Main about */

.main-about-container{ margin: 100px 0px; }
.main-about-img-container{ margin-right: 30px; }

.main-about-img-container{
	width: 420px;
	height: 480px;
	position: relative;
}

.main-about-img-bg{
	width: 420px;
	height: 480px;
	background-color: var(--color-orange);
	border-radius: 10px;
	position: absolute;
	z-index: 1;
}


.main-about-img{
	width: 420px;
	height: 480px;
	border-radius: 10px;
	position: absolute;
	z-index: 2;
	margin-top: -15px;
	margin-left: -15px;
	object-fit: cover;
}

.main-about-border-line{
	width: 420px;
	height: 480px;
	border:1px solid var(--color-orange);
	position: absolute;
	z-index: 3;
	margin-top: -30px;
	margin-left: -30px;
	border-radius: 10px;
}

.main-about-content{
	width: 100%;
	max-width: 500px;
	height: auto;
	margin-left: 50px;
}

.main-about-content strong{
	font-size:30px;
	font-weight: bold;
	color: var(--color-dark-blue);
	line-height: 38px;
}

.main-about-content > strong span{ color: var(--color-orange); }

.main-about-content > p{
	font-size:16px;
	line-height: 24px;
	color: var(--color-dark-blue);
	margin: 20px 0px;
}


/* Process Advantages */
.process-advantages-container{
	width: 100%;
	height: auto;
	padding: 50px 0px;
	background-color: var(--color-gray-light);
}

.process-addvantag-content{
	width: 90%;
	max-width: 850px;
	height: auto;
}

.process-addvantag-item{
	width: 400px;
	height: auto;
	padding: 20px;
	background-color: var(--color-white);
	border-left: 10px solid var(--color-orange);
	margin: 10px;
	border-radius: 10px;
	font-weight: bold;
	color: var(--color-dark-blue);
}


/* Investment options */
.investment-options-container{
	width: 100%;
	max-width: 1280px;
	padding: 20px 0px;
	margin: 0 auto;
}

.investment-option-item{
	width: 350px;
	height: 360px;
	border-radius: 10px;
	border:1px solid var(--color-orange);
	border-top: 15px solid var(--color-orange);
	padding: 20px;
	margin: 15px;
}

.investment-option-item > img{
	margin-bottom: 20px;
}

.investment-option-item > strong{
	font-size:18px;
	font-weight: bold;
	margin: 20px 0px;
	color: var(--color-dark-blue);
}

.investment-option-item > span{
	font-size:14px;
	font-weight: normal;
	color: var(--color-dark-blue);
	text-align: center;
	line-height: 24px;
}





/* Comments */
.comment-container{
	width: 100%;
	height: auto;
	padding: 50px 0px;
	background-color: var(--color-gray-light);
}

.comment-content{
	width: 90%;
	max-width: 1100px;
	height: auto;
	margin-top: 30px;
}

.comment-item{
	width: 100%;
	max-width: 500px;
	height: auto;
	background-color: var(--color-white);
	border-radius: 10px;
	border-left:15px solid var(--color-dark-blue);
	padding: 20px;
	margin:15px;
}

.comment-info{ width: 100%; height: auto; margin-bottom:10px; }
.comment-user-icon{
	width: 35px;
	height: 35px;
	background-color: var(--color-white);
	border-radius: 50px;
	border: 1px solid var(--color-orange);
	margin-right: 10px;
	color: var(--color-orange);
}

.comment-info > strong{ font-size:16px; font-weight: bold; color: var(--color-dark-blue); }
.comment-item > span{ font-size:14px; font-weight: normal; color: var(--color-dark-blue); line-height: 22px; }

.comment-btns{ margin-top: 20px; }
.comment-btns a{ margin: 5px; }





/* Special Packages */
.special-packages-container{ margin: 50px 0; padding: 30px 0; background-color: var(--color-gray-light-2); }

.special-packages-content{ 
	width: 100%;
	max-width: 1280px;
	padding: 20px 0px;
	margin: 0 auto;
 }

.special-package-item{
	width: 90%;
	max-width: 350px;
	height: 360px;
	border-radius: 10px;
	border:1px solid var(--color-orange);
	border-top: 15px solid var(--color-orange);
	padding: 20px;
	margin: 15px;
	background-color: var(--color-white);
}

.special-package-title{
	font-size:16px;
	font-weight: bold;
	color: var(--color-dark-blue);
	margin-bottom: 10px;
}

.special-package-sub-title > strong{
	font-size:16px;
	font-weight: bold;
	color: var(--color-orange);
	margin-bottom: 10px;
}

.special-package-line{ 
	width: 100%; 
	height: 1px; 
	background-color: var(--color-gray-light); 
	margin: 10px 0px;
}


.special-package-sub-title > strong span{
	font-size:14px;
	font-weight: normal;
	color: var(--color-gray-1);
	margin-bottom: 10px;
}



.special-package-list ul li{
	font-size:16px;
	color: var(--color-dark-blue);
	margin: 15px 0;
	list-style-position: inside !important;
	list-style-image: url('../img/icons/check-ic.png') !important;
}


.special-package-list ul li i{
	font-size:12px;
	color: var(--color-orange);
	margin-right: 5px;
}








/* FAQ */
.faq-container{
    width: 100%;
    height: auto;
    background-color: #fff; 
    display:flex;
    justify-content: space-evenly;
	padding: 50px 0;
	margin-bottom: 30px;
}

.faq-img{
    width:auto;
    max-width:400px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.faq-img img{ width:100%; height: auto; }

.faq-contain{
    width: 60%;
    max-width: 900px;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
}

.faq-contain > strong{
    font-size: 24px;
    font-weight: bold;
    color: #C4000B;
    margin-bottom: 25px;
}

.faq-list li a{
    font-size: 18px;
    font-weight: bold;
    color: #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 28px;
}

.faq-list li a:hover{ color: #C4000B; }
.faq-list li{ margin-bottom: 25px; }
.faq-list li a div > span{ margin-right: 5px; font-size: 18px;; color: var(--color-orange); }
.faq-list li div{ font-size: 16px; color: #222; display: block; line-height: 30px; }
.faq_answer{ margin-top: 10px; margin-left: 37px; padding-right: 6%; }










/* Newsletter */
.newsletter-container{ background-color: var(--color-orange); padding: 50px; }

.newsletter-forms{  
	width: 90%;
	max-width: 450px;
	height: 50px;
	margin-top: 20px;
	margin-bottom: 50px;
	display: flex;
}

.newsletter-forms > input{
	width: 100%;
	height: auto;
	border: none;
	outline: none;
	font-size:14px;
	color: var(--color-dark-blue);
	padding: 10px;
	border-radius: 8px 0px 0px 8px;
	border:1px solid transparent;
}

.newsletter-forms > input:hover{
	border-top:1px solid var(--color-dark-blue);
	border-right:0;
	border-bottom:1px solid var(--color-dark-blue);
	border-left:1px solid var(--color-dark-blue);
}

.newsletter-forms > button{
	width: 150px;
	height: auto;
	background-color: var(--color-dark-blue);
	color: var(--color-white);
	border-radius: 0px 8px 8px 0px;
	border-top:1px solid var(--color-dark-blue);
	border-right:1px solid var(--color-dark-blue);
	border-bottom:1px solid var(--color-dark-blue);
	border-left:0;
}

.newsletter-forms > button:hover{ background-color: var(--color-gray-2); }






/* Footer */
footer{ width: 100%; height: auto; background-color: var(--color-gray-light); padding: 30px 10%; }

.footer-left-content{ width: 350px; height: auto; }
.footer-left-content > img{ width: 120px; height: auto; margin-bottom: 20px; }
.footer-left-content > span{ font-size:14px; line-height: 22px; color: var(--color-dark-blue); }

.footer-right-menu{ width: 100%; max-width: 350px; height: auto; display: flex; align-items: flex-start; }

.footer-menu-item > a{ font-size:14px; color: var(--color-dark-blue); margin-bottom: 15px; }
.footer-menu-item > a:hover{ color: var(--color-orange); }
.footer-menu-item > strong{ font-size: 18px; font-weight: bold; margin-bottom: 12px; color: var(--color-dark-blue); }



/* Copyright */

.copyright{
	width: 100%;
	height: auto;
	padding: 30px 10%;
	background-color: var(--color-white);
}

.copyright > span { font-size:12px; color: var(--color-gray-1); }

.footer-social-media > a,
.contact-social-media > a{ font-size:20px; margin: 0px 7px; color: var(--color-dark-blue); }

.footer-social-media > a:hover,
.contact-social-media > a:hover{ color: var(--color-orange); }






/* Detail navigation and breadcrumb */
.detail-navigation-container{ 
	width: 100%; 
	height: 165px; 
	background-image: url('../img/detail-navigation-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 center;
}

.navigation-content{ width: 100%; max-width: 1280px; height: auto; padding: 40px 5%; }
.navigation-content h1{ font-size:24px; font-weight: bold; color: var(--color-white); line-height: 34px; }

.breadcrumb a{ 
	font-size:12px; 
	font-weight: normal; 
	color: var(--color-white); 
	margin: 0 10px; 
	line-height: 18px;

}
.breadcrumb a:hover{ color: var(--color-orange); }

.breadcrumb span::before{ content: '/'; color: var(--color-white); font-weight: normal; font-size: 12px; }
.breadcrumb span:last-child{ display: none; }
#breadcrumb-active{ font-weight: bold; color: var(--color-orange); }








/* Contact */
.contact-container{
	width: 80%;
	max-width: 1280px;
	height: auto;
	margin: 60px auto;
}


.contact-left{
	width: 90%;
	max-width: 300px;
	height: auto;
}

.contact-right{
	width: 90%;
	max-width: 500px;
	height: auto;
}



.contact-info-item{ width: auto; height: auto; margin: 10px 0; }
.contact-info-item > strong{ 
	width: 300px; 
	height: auto; 
	font-size:14px; 
	font-weight: bold; 
	color: var(--color-dark-blue); 
	margin-left: 10px;
	line-height: 20px;
 }



.contact-icon i{ color: var(--color-orange); }


.contact-title{ margin-bottom: 30px; }

.contact-title strong{ 
	font-size: 28px;
	font-weight: bold;
	color: var(--color-orange);
	line-height: 34px;
}

.contact-title span{ 
	font-size: 28px;
	font-weight: bold;
	color: var(--color-dark-blue);
	line-height: 34px;
}


#detail-page-bg{
    background-image:url('../img/detail-page-bg.png');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}


/* Language list */
.language-list-container{
	width: 300px;
	height: 100%;
	background-color: var(--color-orange);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
}

.language-header{
	padding: 20px;
	font-size:16px;
	color: var(--color-white);
	border-bottom: 1px solid var(--color-white);
	margin-bottom: 10px;
}

.language-header i{
	font-size:16px;
	margin-right: 5px;
}

.language-item-container a{
	font-size:14px;
	color: var(--color-white);
	font-weight: normal;
	padding: 15px 20px;
	display: flex;
	align-items: center;
}

.language-item-container a:hover{
	background-color: var(--color-dark-blue);
}

.language-item-container a i{
	font-size: 10px;
	margin-right: 10px;
}





/* PC / Laptop */
@media only screen and (max-width: 1380px) {
		
	header{ padding: 0 3%; }

	.main-menus li > a{ margin: 15px; font-size:15px; }

	.slider-container{	padding: 0px 5%; }

}


/* Tablet */
@media only screen and (max-width: 980px) {

	.responsive-main-menu-btn{ display: block; }

	.menus{
		width: 100%;
		max-width: 300px;
		height: 100%;
		position: fixed;
		z-index: 1;
		background-color: var(--color-dark-blue);
		top:0;
		left: 0;
		bottom: 0;
		display: none;
		flex-direction: column;
		padding: 30px 10px;
	}

	.main-menus{ display: flex; flex-direction: column; }
	.main-menus li{ margin: 25px 0px; }
	.main-menus li > a{ font-size:20px !important; color: var(--color-gray-light); }

	.sub-menus{
		width: 100%;
		height: auto;
		position: relative;
		padding: 10px 20px;
	}

	.header-right{
		width: 100%;
		max-width: 300px;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 2;
		background-color: var(--color-orange);
		padding: 10px 0px 10px 10px;
		display: none;
	}

	.languages-btn * { color: var(--color-white) !important }
	.languages-btn:hover * { color: var(--color-dark-blue) !important }
	.language-list span{ color: var(--color-white); }

	.login-btn { margin-right:20px; }
	.login-btn * { margin-right:20px; color: var(--color-white) !important }
	.login-btn{ border:1px solid var(--color-white)}

	.login-btn:hover * { color: var(--color-white);  }
	.login-btn:hover { background-color: var(--color-dark-blue); }


	.slider-content{
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}


	.slider-container{ height: 600px; }
	.slider-content > span{ font-size:60px; }
	.slider-content > strong{ font-size:80px; }
	.slider-content > p{ font-size:16px; }


	.referance-container > img{ width: 30px; max-height:40px; }


	.main-about-img-container{ display: none; }
	.main-about-content{ width: 90%; max-width: none; margin: 0px; }


	footer{ 
		padding: 30px !important; 
		flex-direction: column; 
		align-items: flex-start !important;
	}

	.footer-left-content{ width: 100%; }
	.footer-right-menu{ margin: 30px 0; }

	.copyright{ padding: 30px; }

	.faq-img img{ display: none; }
	.faq-contain{
		width: 90%;
		max-width: none;
	}
	
	.faq-list li a{
		font-size: 14px;
		line-height: 18px;
	}

	.faq_answer{ font-size:14px;}

	.navigation-content{ flex-direction: column; align-items: flex-start; }
	.navigation-content h1{ font-size:18px; }

	.breadcrumb { margin-top: 20px; }
	.breadcrumb a:first-child{ margin-left: 0; }



	.contact-container{ width: 90%; max-width: none; flex-direction: column; }
	.contact-left { width: 100% !important; max-width: none; height: auto; margin-bottom: 50px; }
	.contact-right { width: 100%; max-width: none; height: auto; }




}


/* Mobile */
@media only screen and (max-width: 480px) {

	.investment-option-item{ width: 150px; height: 180px; padding: 10px; margin: 10px; }
	.investment-option-item > img{ width: 50px; height: auto; margin-bottom: 0px; }
	.investment-option-item > strong { font-size: 14px; text-align: center; line-height: 20px; }
	.investment-option-item > span { display: none;}

	.comment-info > strong{ font-size:14px; }
	.comment-item > span{ font-size:12px; }


	.special-package-title{ font-size:14px; }
	.special-package-sub-title > strong{ font-size:14px; }

	.special-package-sub-title > strong span{ font-size:14px; }
	.special-package-list ul li{ font-size:14px; line-height: 18px; }


	.area-title > strong,
	.area-title > span { line-height: 28px !important; }

		
	.copyright{ display: flex; flex-direction: column; }
	.footer-social-media{ margin: 30px 0px; }

	.newsletter-container {
		padding: 10px;
	}
	


}