@font-face {
		font-family: 'HelveticaLight';
		src: url('font/HelveticaNeueLight.otf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'HelveticaThin';
		src: url('font/HelveticaNeueThin.otf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

	body {
		color:#111;
		background:#fff;
	}

	.timeline-container {
		max-width:1200px;
		margin:auto;
		padding:0px 20px;
		position:relative;
	}

	.timeline-header {
		text-align:center;
		margin-bottom:60px;
	}

	.timeline-header h2 {
		font-family: 'HelveticaThin', sans-serif;
		font-size:50px;
		font-weight:300;
		letter-spacing:1px;
		margin-bottom:10px; 
		margin-top:55px;
	}

	.timeline-header p {
		font-family: 'HelveticaLight', sans-serif;
		font-size:20px;
		color:#666;
		line-height:1.4;
	}

	.timeline{
		position:relative;
	}

	.timeline::before {
		content:"";
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		top:-60px;
		bottom:0;
		width:2px;
		background:#999;
		z-index:3;
	}

	.timeline::after {
		content: "";
		position: absolute;
		left: calc(50% - 85px);
		top: -60px;
		bottom: 0;
		width: 170px;          
		pointer-events: none;
		z-index: 1;
		background:
		linear-gradient(#777676, #777676) top center / 100% 2px no-repeat,
		repeating-linear-gradient(
		to bottom,
		transparent 0 18px,
		#777676 18px 19px,
		transparent 19px 20px
		) center top / 20px 100% no-repeat;
	}


	.timeline-item {
		width:100%;
		display:flex;
		gap:60px;
		margin-bottom:90px;
		position:relative;
	}

	.timeline-item.right {
		flex-direction:row-reverse;
	}

	.image,
	.content {
		position:relative;
		flex:0 0 auto;
		max-width:570px;
	}

	.image img{
		width:100%;
		display:block;
		background:#000;
		object-fit:cover;
	}

	.title-box {
		font-family: 'HelveticaLight', sans-serif;
		background:#111;
		color:#fff;
		padding:6px 12px;
		font-size: 16px;
		font-weight:bold;
		display:inline-block;
		margin-bottom:10px;
	}

	.text-box {
		font-family: 'HelveticaLight', sans-serif;
		font-size:16px;
		color:#333;
		line-height:1.5
	}

	.timeline-item.left  .content::before {
		left:-41px;
	}

	.timeline-item.right .content::before {
		right:-58px;
	}

	.timeline-item.left .content {
		text-align: left;
	}

	.timeline-item.right .content {
		text-align: right;
	}

	.timeline-item {
		opacity: 0;
		transform: translateY(50px);
		transition: all 0.2s ease-out;
	}

	.timeline-item.visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Üst menü (ABOUT US, OUR VALUE, HERITAGE) */
	.sub-menu {
		font-family: 'HelveticaLight', sans-serif;
		display: flex;
		gap:10px;
		justify-content: center;
		background-color: #fff;
		margin-top: 115px;	
	}

	.sub-menu a {
		text-decoration: none;
		color: #000;
		padding: 10px 20px;
		display: inline-block;
		letter-spacing:2px;
		font-size:24px;
		transition: background 0.3s;
		border:1px solid black;
	}

	.sub-menu a:hover,
	.sub-menu a.active {
		background-color: #000;
		color: #fff;
	}

	@media(max-width:900px){
		.timeline::before,.timeline::after{
			display:none;
		}
		.timeline-item {
			flex-direction:column!important;
			align-items:center;
			text-align:center;
			margin-bottom:60px;
		}

		.timeline-container { 
			width: 100%;
			padding: 0px 0px;
		}

		.timeline-header {
			margin-bottom: 45px;
		}

		.timeline-item {
			gap: 30px;
		}

		.timeline-header h2 {
			font-size: 40px;
			margin-top: 40px;
		}

		.timeline-item.left .content {
			text-align: left;
		}

		.timeline-item.right .content {
			text-align: left;
		}

		.title-box {
			margin-bottom: 0px;
		}

		.text-box {
			font-size:14px;
		}

		.image,.content {
			width:90%;
		}
		.content::before {
			display:none;
		}

		.sub-menu {
			margin-top: 90px;
			gap:5px;
		}

		.sub-menu a {
			padding: 5px 8px;
			font-size:16px;
			font-weight:600;
		}
	}