.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #141414;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 9999;
	display: flex;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out, visibility 0.5s ease-in-out;
}

.loading-screen.active {
	opacity: 1;
	visibility: visible;
}

.spinner-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spinner {
	width: 100px;
	height: 100px;
	border: 8px solid rgba(255, 0, 0, 0.3);
	border-top: 8px solid red;
	border-radius: 50%;
	position: absolute;
	animation: spin 1s linear infinite;
}

.loading-image {
	width: 80px;
	height: 80px;
	border-radius: 10px;
	z-index: 1;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.content h1 {
  font-size: 3em; /* Adjust the heading size */
  margin-bottom: 20px; /* Space below the heading */
  font-weight: bold;
}

.content p {
  font-size: 1.2em; /* Adjust the paragraph size */
  line-height: 1.6; /* Improve readability */
  max-width: 800px; /* Limit the width for comfortable reading */
  margin: 0 auto; /* Center the paragraph */
}

.coming-soon {
	align: center;
	color: #ffffff;
	font-family: var(--netflix-sans-regular-26px-font-family);
	font-weight: var(--netflix-sans-regular-26px-font-weight);
	font-size: var(--netflix-sans-regular-26px-font-size);
	text-align: center;
	letter-spacing: var(--netflix-sans-regular-26px-letter-spacing);
	line-height: var(--netflix-sans-regular-26px-line-height);
	font-style: var(--netflix-sans-regular-26px-font-style);
}

.profiles-page {
  background-color: #141414;
  display: flex;
  flex-direction: column; /* Changed to column */
  justify-content: center;
  width: 100%;
  height: 100vh; /* Make page fill viewport height */
  overflow-y: hidden; /* Prevent vertical scrolling */
}

.profiles-page.overlap-group-wrapper {
  background-color: var(--black);
  width: 100%;
  height: 100%; /* Fill available space within profiles-page */
}

.profiles-page .overlap-group {
  position: relative;
  height: auto;  /* Let height be determined by content */
  min-height: 100%; /* Ensure it fills at least the screen height */
}

.profiles-page .content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto; 
  align-items: center; 
  justify-content: center; /* This line vertically centers the content */
  gap: 50px;
  padding: 20px;
  padding-top: 100px; /* Add top padding to account for header height */
}

.profiles-page .text-wrapper {
  position: relative;
  align-self: stretch;
  font-family: var(--netflix-sans-regular-64px-font-family);
  font-weight: var(--netflix-sans-regular-64px-font-weight);
  color: var(--white);
  font-size: var(--netflix-sans-regular-64px-font-size);
  text-align: center;
  letter-spacing: var(--netflix-sans-regular-64px-letter-spacing);
  line-height: var(--netflix-sans-regular-64px-line-height);
  font-style: var(--netflix-sans-regular-64px-font-style);
  font-size: 3rem;
}

.profiles-page .profile-cards {
  display: flex;
  flex-wrap: wrap; /* Allow cards to wrap */
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1200px; /* Limit container width */
  margin: 0 auto; /* Center the container */
}

.profiles-page .profile-card {
  position: relative;
  width: 200px;
  height: 253px;
  border: none; /* Remove default button border */
  background-color: transparent; /* Remove default button background */
  padding: 0; /* Remove default button padding */
  cursor: pointer; /* Make it look like a button */
}

.profiles-page .profile-picture {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  background-image: url(./img/blue.jpg);
  background-size: cover;
  background-position: 50% 50%;
  transition: box-shadow 0.3s ease;
}

.profiles-page .profile-card:hover .profile-picture {
  box-shadow: inset 0 0 0 4px #ffffff; /* Border inside effect */
}


.profiles-page .murat {
  left: 65px;
  position: absolute;
  height: 33px;
  top: 210px;
  font-family: var(--netflix-sans-regular-26px-font-family);
  font-weight: var(--netflix-sans-regular-26px-font-weight);
  color: var(--midgray);
  font-size: var(--netflix-sans-regular-26px-font-size);
  text-align: center;
  letter-spacing: var(--netflix-sans-regular-26px-letter-spacing);
  line-height: var(--netflix-sans-regular-26px-line-height);
  font-style: var(--netflix-sans-regular-26px-font-style);
  transition: color 0.3s ease-in-out; /* Smooth transition */
}

.profiles-page .profile-card:hover .murat { /* Change color on parent hover */
  color: white;
}

.profiles-page .profile-picture-1 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  background-image: url(./img/green.jpg);
  background-size: cover;
  background-position: 50% 50%;
  transition: box-shadow 0.3s ease;
}

.profiles-page .profile-card:hover .profile-picture-1 {
  box-shadow: inset 0 0 0 4px #ffffff; /* Border inside effect */
}

.profiles-page .murat-2 {
  left: 46px;
  position: absolute;
  height: 33px;
  top: 219px;
  font-family: var(--netflix-sans-regular-26px-font-family);
  font-weight: var(--netflix-sans-regular-26px-font-weight);
  color: var(--midgray);
  font-size: var(--netflix-sans-regular-26px-font-size);
  text-align: center;
  letter-spacing: var(--netflix-sans-regular-26px-letter-spacing);
  line-height: var(--netflix-sans-regular-26px-line-height);
  font-style: var(--netflix-sans-regular-26px-font-style);
  transition: color 0.3s ease-in-out; /* Smooth transition */
}

.profiles-page .profile-card:hover .murat-2 { /* Change color on parent hover */
  color: white;
}


.profiles-page .profile-picture-2 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  background-image: url(./img/red.jpg);
  background-size: cover;
  background-position: 50% 50%;
  transition: box-shadow 0.3s ease;
}

.profiles-page .profile-card:hover .profile-picture-2 {
  box-shadow: inset 0 0 0 4px #ffffff; /* Border inside effect */
}

.profiles-page .murat-3 {
  left: 36px;
  position: absolute;
  height: 33px;
  top: 219px;
  font-family: var(--netflix-sans-regular-26px-font-family);
  font-weight: var(--netflix-sans-regular-26px-font-weight);
  color: var(--midgray);
  font-size: var(--netflix-sans-regular-26px-font-size);
  text-align: center;
  letter-spacing: var(--netflix-sans-regular-26px-letter-spacing);
  line-height: var(--netflix-sans-regular-26px-line-height);
  font-style: var(--netflix-sans-regular-26px-font-style);
  transition: color 0.3s ease-in-out; /* Smooth transition */
}

.profiles-page .profile-card:hover .murat-3 { /* Change color on parent hover */
  color: white;
}

.profiles-page .profile-picture-3 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  background-image: url(./img/yellow.jpg);
  background-size: cover;
  background-position: 50% 50%;
  transition: box-shadow 0.3s ease;
}

.profiles-page .profile-card:hover .profile-picture-3 {
  box-shadow: inset 0 0 0 4px #ffffff; /* Border inside effect */
}

.profiles-page .murat-4 {
  left: 25px;
  position: absolute;
  height: 33px;
  top: 219px;
  font-family: var(--netflix-sans-regular-26px-font-family);
  font-weight: var(--netflix-sans-regular-26px-font-weight);
  color: var(--midgray);
  font-size: var(--netflix-sans-regular-26px-font-size);
  text-align: center;
  letter-spacing: var(--netflix-sans-regular-26px-letter-spacing);
  line-height: var(--netflix-sans-regular-26px-line-height);
  font-style: var(--netflix-sans-regular-26px-font-style);
  transition: color 0.3s ease-in-out; /* Smooth transition */
}

.profiles-page .profile-card:hover .murat-4 { /* Change color on parent hover */
  color: white;
}

.profiles-page .add-wrapper {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
}

.profiles-page .add {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 40px;
  left: 40px;
}

.profiles-page .murat-5 {
  left: 26px;
  position: absolute;
  height: 33px;
  top: 219px;
  font-family: var(--netflix-sans-regular-26px-font-family);
  font-weight: var(--netflix-sans-regular-26px-font-weight);
  color: var(--midgray);
  font-size: var(--netflix-sans-regular-26px-font-size);
  text-align: center;
  letter-spacing: var(--netflix-sans-regular-26px-letter-spacing);
  line-height: var(--netflix-sans-regular-26px-line-height);
  font-style: var(--netflix-sans-regular-26px-font-style);
}

.profiles-page .profilleri-ynet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 30px;
  position: relative;
  flex: 0 0 auto;
  border: 2px solid;
  border-color: var(--gray);
  background-color: transparent; /* Add this */
  cursor: pointer; /* Add this */
  transition: background-color 0.3s ease;
  color: var(--gray);
}

.profiles-page .PROF-LLER-y-NET {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--netflix-sans-regular-26px-font-family);
  font-weight: var(--netflix-sans-regular-26px-font-weight);
  font-size: var(--netflix-sans-regular-26px-font-size);
  text-align: center;
  letter-spacing: var(--netflix-sans-regular-26px-letter-spacing);
  line-height: var(--netflix-sans-regular-26px-line-height);
  font-style: var(--netflix-sans-regular-26px-font-style);
}

.profiles-page .profilleri-ynet:hover {
  background-color: rgba(0, 0, 0, 0.4); /* Add a subtle background color on hover */
  color: #ffffff;
  border-color: #ffffff;
}

.profiles-page .header {
  display: flex;
  width: 100%;
  height: auto; 
  align-items: center;
  justify-content: center;
  padding: 20px; 
  position: fixed; /* Keep the header at the top */
  top: 0;
  left: 0;
  background-color: #141414; /* Match the background color */
  z-index: 10; /* Ensure header is on top */
}

.profiles-page .logo {
  position: relative;
  width: 436px;
  height: 79px;
  max-width: 90%; /* Make logo responsive */
  height: auto;
}

.profiles-page .logo-img-wrapper {
  position: relative;
  height: 79px;
}

.profiles-page .logo-img {
  position: absolute;
  width: auto;
  height: 87px;
  top: 0;
  left: -4px;
  object-fit: cover;
}