/* Marka images */

/* Default: Full responsiveness for all screen sizes */
.brand-img {
	max-width: 100%; /* Ensures image does not exceed its container */
	height: auto; /* Maintains aspect ratio */
	display: block; /* Ensures proper centering */
	margin: 0 auto; /* Centers the image horizontally */
}

/* Larger screens (e.g., desktops) */
@media (min-width: 1140px) {
	.brand-img {
		max-width: 75%; /* Adjust the size for larger screens */
	}
}

/* Medium screens (e.g., tablets) */
@media (min-width: 768px) and (max-width: 1199px) {
	.brand-img {
		max-width: 60%; /* Slightly smaller on medium screens */
	}
}


/* Text justify*/

.justify-text {
    text-align: justify;
}

/* About Timeline */

.timeline-container {
    /* font-family: */
    text-align: center;
    margin: 20px auto;
    width: 100%;
}

/* Horizontal Timeline Styling */
#timeline {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 25px;
}

#timeline li {
    position: relative;
    flex: 1;
    text-align: center;
	transition: transform 0.3s ease, font-size 0.3s ease;
}


#timeline li a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: #ffffff;
    background-color: #136182;
    border-radius: 25px;
    font-weight: bold;
    font-size: 18px;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth color and scale transition */
}




#timeline li.active a {
    background-color: #017570;
    color: #ffffff;
    transform: scale(1.2); /* Make the active year larger */
    font-size: 20px; /* Slightly larger font size */
    z-index: 1; /* Bring the active year to the front */
}


/* Styling for non-active years */
#timeline li:not(.active) a {
    opacity: 0.7; /* Reduce opacity for non-active years */
    transform: scale(0.9); /* Make non-active years slightly smaller */
}

.hidden {
    display: none;
}

#timeline_content > div ul {
    margin-top: 20px; 
    font-size: 14px; 
    list-style-type: disc; 
    padding-left: 40px; 
}

/* Responsive Styles */

/* For screens smaller than 1043px */
@media (max-width: 1043px) {
    #timeline {
        flex-wrap: wrap; /* Allows items to wrap into multiple rows */
    }

    #timeline li {
        flex: 1 1 30%; /* Items take up 30% of the row width */
        margin: 5px; /* Add spacing between items */
    }

    #timeline li a {
        font-size: 18px; /* Reduce font size for smaller screens */
        padding: 8px 10px; /* Adjust padding for better fit */
    }
}

/* For screens smaller than 768px (mobile devices) */
@media (max-width: 768px) {
    #timeline {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center-align items */
    }

    #timeline li {
        flex: 1 1 auto; /* Items take full width */
        width: 100%; /* Ensure links span the container */
        margin: 10px 0; /* Add vertical spacing */
    }

    #timeline li a {
        font-size: 16x; /* Smaller font size for mobile */
        padding: 10px 12px; /* Adjust padding for better usability */
    }

    .timeline-container h2 {
        font-size: 20px; /* Slightly smaller heading */
    }
}

/* For screens smaller than 480px (very small phones) */
@media (max-width: 480px) {
    #timeline li a {
        font-size: 14px; /* Reduce font size further for very small screens */
        padding: 8px 10px;
    }

    .timeline-container h2 {
        font-size: 18px; /* Reduce heading size for small screens */
    }
}

.custom-text-size-1 {
	font-size: 13px;;
}

/* Custom Hero Row */
.custom-hero-row {
		min-height: calc(100vh - 100px);
}

/* Custom Elements */
.custom-element-wrapper {
		position: absolute;
}

.custom-element-wrapper.custom-element-1 {
		top: 25%;
		left: 45%;
		width: 300px;
		height: 300px;
}

.custom-element-wrapper.custom-element-1 .custom-element {
		background: transparent;
		border: 3px solid var(--primary);
		opacity: 0.05;
		width: 100%;
		height: 100%;
		border-radius: 25px;
}

.custom-element-wrapper.custom-element-2 {
		top: 45%;
		left: 62%;
		width: 150px;
		height: 150px;
}

.custom-element-wrapper.custom-element-2 .custom-element {
		background: var(--primary);
		opacity: 0.05;
		width: 100%;
		height: 100%;
		border-radius: 25px;
}

.custom-element-wrapper.custom-element-3 {
		top: 57%;
		left: 70%;
		width: 100px;
		height: 100px;
}

.custom-element-wrapper.custom-element-3 .custom-element {
		background: transparent;
		border: 3px solid var(--primary);
		opacity: 0.05;
		width: 100%;
		height: 100%;
		border-radius: 25px;
}

.custom-element-wrapper.custom-element-4 {
		top: 57%;
		left: 44%;
		width: 100px;
		height: 100px;
}

.custom-element-wrapper.custom-element-4 .custom-element {
		background: var(--primary);
		opacity: 0.03;
		width: 100%;
		height: 100%;
		border-radius: 25px;
}

.custom-element-wrapper.custom-element-5 {
		top: 18%;
		left: 7%;
		width: 450px;
		height: 450px;
}

.custom-element-wrapper.custom-element-5 .custom-element {
		background: var(--secondary);
		width: 100%;
		height: 100%;
		border-radius: 25px;
}

@media (min-width: 768px) {
		.custom-element-wrapper.custom-element-5 {
				top: 18%;
				left: 15%;
		}
}

@media (min-width: 992px) {
		.custom-element-wrapper.custom-element-5 {
				top: 27%;
				left: 22%;
		}
}

@media (min-width: 1200px) {
		.custom-element-wrapper.custom-element-5 {
				top: 22%;
				left: 22%;
		}
}

@media (min-width: 1400px) {
		.custom-element-wrapper.custom-element-5 {
				top: 27%;
				/* left: 78%; */
				left: 67%;
		}
}

.custom-element-wrapper.custom-element-6 {
		width: 160px;
		height: 160px;
		/* top: 22.2%;
		right: -8%; */
		top: 11%;
		right: -3%;
}

.custom-element-wrapper.custom-element-7 {
		width: 160px;
		height: 160px;
		top: 58.2%;
		right: -38%;
}

/* .custom-element-wrapper.custom-element-8 {
		top: -5%;
		left: -6%;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 77.2% 100%, 0 54%);
}

@media (min-width: 768px) {
		.custom-element-wrapper.custom-element-8 {
				top: -5%;
				left: 5%;
		}
}

@media (min-width: 992px) {
		.custom-element-wrapper.custom-element-8 {
				top: 5%;
				left: 5%;
		}
}

@media (min-width: 1200px) {
		.custom-element-wrapper.custom-element-8 {
				top: 0%;
				left: 10%;
		}
} */

/* Konum referansı */
.col-12.col-lg-6.p-relative { position: relative; }

/* HERO – Rounded card görünümü + parlaklık + float */
.custom-element-wrapper.custom-element-8 {
  position: absolute;
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;

  /* Şekil: yuvarlatılmış dikdörtgen */
  border-radius: 30%;
  -webkit-clip-path: inset(0 round 30%);
          clip-path: inset(0 round 30%);

  /* Kenarlarda hafif feather */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 94%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse at center, #000 94%, rgba(0,0,0,0) 100%);

  /* Derinlik gölgesi */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.25));

  /* Yüzen hareket */
  animation: heroFloat 7s ease-in-out infinite;
  will-change: transform, filter;

  /* Hover mikro-tilt */
  transition: transform .5s ease, filter .3s ease;
}
@keyframes heroFloat {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-10px) }
}
@media (hover:hover) and (pointer:fine) {
  .custom-element-wrapper.custom-element-8:hover {
    transform: translateY(-4px) rotate3d(1,-1,0,6deg);
    filter: drop-shadow(0 24px 50px rgba(0,0,0,.28));
  }
}

/* Glow ring: ana şekille aynı formda */
.custom-element-wrapper.custom-element-8::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;

  /* Şekli eşleştir */
  border-radius: 30%;
  -webkit-clip-path: inset(0 round 30%);
          clip-path: inset(0 round 30%);

  /* Parıltı */
  background:
    radial-gradient(closest-side, rgba(0,0,0,0) 72%, rgba(16,214,189,.25) 80%, rgba(16,214,189,0) 92%),
    conic-gradient(from 210deg, rgba(0,0,0,0) 0 65%, rgba(16,214,189,.35) 75%, rgba(0,0,0,0) 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.9) 60%, rgba(0,0,0,0) 78%);
          mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.9) 60%, rgba(0,0,0,0) 78%);
  filter: blur(18px);
  opacity: .9;
}

/* Hareket hassasiyeti */
@media (prefers-reduced-motion: reduce) {
  .custom-element-wrapper.custom-element-8 { animation: none; transition: none; }
}

/* <768px: tamamen kaldır (senin tercihine göre) */
@media (max-width: 767.98px) {
  .custom-element-wrapper.custom-element-8 { display: none; }
}


.custom-element-wrapper.custom-element-9 {
		width: 160px;
		height: 160px;
		top: 5%;
		left: 7%;
}

.custom-element-wrapper.custom-element-10 {
		width: 160px;
		height: 160px;
		top: 65%;
		right: 10%;
}

.custom-element-wrapper.custom-element-11 {
		display: inline-block;
}

.custom-element-wrapper.custom-element-11 img {
		border-radius: 25px;
}

.custom-element-wrapper.custom-element-11:before {
		display: block;
		content: "";
		position: absolute;
		top: 30px;
		left: -30px;
		background: var(--primary);
		border-radius: 25px;
		width: 100%;
		height: 100%;
		z-index: -1;
}

/* Page Header */
.page-header {
		padding-top: 153px;
		padding-bottom: 0;
}

.page-header .container:before {
		content: "";
		left: 0;
		width: 100%;
		height: 1px;
		background: rgba(0, 0, 0, 0.06);
		position: absolute;
}

/* Breadcrumb */
.breadcrumb li {
		font-weight: 600;
		letter-spacing: 1px;
}

.breadcrumb > li + li:before {
		padding: 0 7px 0 7px;
}