html{
  height: 100%;
}
body {
  background: linear-gradient(to top,  #6ee7f9 10%, #ffffff 70%);
  background-attachment: fixed;
  display: block;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-fluid {
  max-width: 1200px;
}
.sidebar {
  background: #0b4b75;
  border-radius: 8px;
  padding: 90px 20px;
  color: #6ee7f9;
  text-align: center;
  height: 105%;
}
.sidebar img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 25px;
}
.sidebar h2 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 30px;
}
.logout-btn {
  background: #6ee7f9;
  border: none;
  color: #0b4b75;
  border-radius: 20px;
  padding: 5px 25px;
  font-weight: 500;

}
.header-title {
  font-size: 50px;
  font-weight: 700;
  color: #0b4b75;
  margin-bottom: 30px;
  transform: translateX(205px) translateY(15px);
}
.card-box {
  background: #0b4b75;
  border-radius: 8px;
  padding: 30px 25px;
  color: #6ee7f9;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-box h4 {
  font-style: italic;
  font-weight: 600;
  margin-top: 10px;
}
.card-box i {
  font-size: 32px;
}
.card-box button {
  background: #6ee7f9;
  border: none;
  padding: 4px 25px;
  border-radius: 20px;
  color: #0b4b75;
  font-weight: 500;
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .header-title {
        width: 100%;
        font-size: 29px;
        margin: 20px -160px;
        text-align: left;
    }

    body {
        display: block;
        overflow-y: auto;
    }

    .mobile-logout-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .mobile-logout-btn {
        background: #d9534f;
        color: white;
        padding: 8px 22px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
    }
}