.card-container {
  width: 40%;
  margin: auto;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
}

@media (max-width: 750px) {
  .card-container {
    width: 100%;
  }
}

hr {
  border: none;
  border-top: 2px solid red;
  border-color: #cccccc;
  width: 100%;
  margin: 0 0;
}

h3 {
  font-size: 30px;
}

.box {
  background-color: #dddddd;
  border-radius: 30px;
  text-align: left;
  overflow: hidden;
}

.profile-link {
  display: block;
  text-decoration: none;
  color: black;
  transition: background-color 0.3s, color 0.3s;
}

.profile-link-inner {
  padding: 12px 30px; /* sadece içeriğe padding */
}

.profile-link:hover {
  background-color: #cccccc;
}

.profile-card {
  display: flex;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  color: black;
}

.profile-image {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 30px;
}

.select-course{
  width: 95%;
  height: 50px;
  margin-left: 30px;
  display: flex;
  justify-content: left;
  background-color: #cccccc;
  margin: auto;
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
}

.log-out {
  background-color: #cccccc;
  color: initial;
  transition: background-color 0.5s, color 0.5s;
  text-decoration: none;
}

.log-out .button_text {
  transition: color 0.5s;
}

.log-out .button_arrow_svg svg path {
  transition: stroke 0.5s;
}

.log-out:hover {
  background-color: rgb(206, 64, 64);
  color: white;
}

.log-out:hover .button_text {
  color: white;
}

.log-out:hover .button_arrow_svg svg path {
  stroke: white;
}

.box-title {
  margin-bottom: 13px;
  text-align: left;
}