* {margin: 0; padding: 0; box-sizing: border-box;}
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: url('https://www.firstbankeg.com/UserFiles/NewsSizes/1920/2023/09/24/17792.jpg?230924102238') center/cover no-repeat;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding: 25px;
    }

    .card-container {
      width: 900px;
      background: rgba(255,255,255,0.25);
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.3);
      box-shadow: 0 8px 25px rgba(0,0,0,0.25);
      animation: fadeIn 1s ease;
    }

    @keyframes fadeIn {
      from {opacity: 0; transform: translateY(25px);}
      to {opacity: 1; transform: translateY(0);}
    }

    .fade {
      opacity: 1;
      transition: opacity 0.6s ease;
    }

    .fade.hidden {
      opacity: 0;
      pointer-events: none;
      position: absolute;
    }

    .header {
      padding: 18px 25px;
      background: rgba(255,255,255,0.6);
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,0.5);
    }

    .header img {height: 48px;}

    .nav a {
      text-decoration: none;
      margin-left: 18px;
      color: #064a31;
      font-weight: 700;
    }

    .body {display: flex;}

  .sidebar {
  width: 200px;
  background: rgba(247, 251, 249, 0.6);
  border-right: 2px solid rgba(213,233,219,0.7);
  padding: 20px 10px;
  display: flex;
  gap: 10px;
}


   .sidebar .item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
  color: #0b6b4a;
  text-decoration: none;   
  transition: 0.3s;
}
  .sidebar .item:hover {
  background: rgba(223,242,230,0.8);
  transform: translateX(5px);
}
    .sidebar .item.active {
  background: rgba(11,107,74,0.15);
  box-shadow: 0 0 10px rgba(11,107,74,0.25);
}
.sidebar .item img {
  width: 20px;
  height: 20px;
}

    .main {flex: 1; padding: 30px;}

    .credit-card {
      width: 100%;
      height: 220px;
      border-radius: 16px;
      background: linear-gradient(135deg, #0f6951, #0a3f2d);
      color: #fff;
      padding: 25px;
      margin-bottom: 25px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 5px 25px rgba(0,0,0,0.3);
      animation: floatCard 3s infinite ease-in-out;
    }

    @keyframes floatCard {
      0% {transform: translateY(0);}
      50% {transform: translateY(-8px);}
      100% {transform: translateY(0);}
    }

    .credit-card-number {
      font-size: 24px;
      letter-spacing: 3px;
      margin-top: 10px;
    }

    .cc-bottom {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }

    .payment-form {
      background: rgba(255,255,255,0.8);
      border-radius: 15px;
      padding: 20px;
      border: 1px solid #cfe7d6;
      position: relative;
      min-height: 260px;
    }

    .payment-form input {
      width: 100%;
      padding: 12px;
      margin-bottom: 12px;
      border-radius: 10px;
      border: 1.8px solid #b8dbcb;
      font-size: 15px;
      transition: 0.3s;
    }

    .payment-form input:focus {
      outline: none;
      border-color: #0b6b4a;
      box-shadow: 0 0 7px rgba(11,107,74,0.3);
    }

    .row {display: flex; gap: 15px;}

    .payment-form button {
      width: 100%;
      padding: 14px;
      border-radius: 10px;
      background: #0b6b4a;
      color: #fff;
      font-size: 17px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      transition: 0.3s;
    }

    .payment-form button:hover {
      background: #0d8560;
      transform: scale(1.03);
    }
    .payment-form button:hover {
  background: #0d8560;
  transform: scale(1.03);
}
.profile-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #d9e8df;
  font-size: 15px;
}

.profile-row:last-child {
  border-bottom: none;
}

.profile-row .label {
  font-weight: 600;
  color: #064a31;
}

.profile-row .value {
  color: #333;
}
.add-card-section {
  margin-top: 25px;
  text-align: center;
}

.add-card-full {
  display: block;
  width: 100%;
  padding: 16px;
  background: #0b6b4a;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 6px 15px rgba(11,107,74,0.25);
}

.add-card-full:hover {
  background: #0d8560;
  transform: translateY(-2px);
}

.no-card-text {
  margin-top: 10px;
  color: #064a31;
  font-weight: 600;
}
.form-message {
  display: none;
  margin-top: 15px;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}

.form-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.form-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.details-row .label {
  font-weight: bold;
  color: #0b5134; 
}

.details-row .value {
  color: #0b5134;
  font-weight: 600;
}
.show-btn {
  width: 130px;
  padding: 8px 15px;
  border-radius: 10px;
  background-color: #0b5134;
  color: white;
  border: none;
  cursor: pointer;
}

.show-btn:hover {
  background-color: #09432b;
}
#toggleCard {
  width: auto !important;
  padding: 8px 18px;
  display: inline-block;
}

@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .card-container {
    width: 100%;
  }

  .header {
    flex-direction: column;
    gap: 12px;
    padding: 15px;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .nav a {
    margin-left: 0;
    font-size: 14px;
  }

  .body {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    display: flex;
    overflow-x: auto;
    border-right: none;
    border-bottom: 2px solid rgba(213,233,219,0.7);
    padding: 10px;
    white-space: nowrap;
  }

  .sidebar .item {
    margin-bottom: 0;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .main-content {
    padding: 15px 10px;
    width: 100%;
  }

  .cc-box {
    width: 100%;
    height: auto;
    padding: 20px;
    aspect-ratio: 1.586; 
  }

  .payment-form {
    padding: 15px 10px;
  }

  .profile-row, .details-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}* {margin: 0; padding: 0; box-sizing: border-box;}
body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: url('https://www.firstbankeg.com/UserFiles/NewsSizes/1920/2023/09/24/17792.jpg?230924102238') center/cover no-repeat;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 25px;
}

.card-container {
  width: 900px;
  background: rgba(255,255,255,0.25);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  animation: fadeIn 1s ease;
}



.sidebar {
  width: 200px;
  background: rgba(247, 251, 249, 0.6);
  border-right: 2px solid rgba(213,233,219,0.7);
  padding: 20px 10px;
}

.side-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  text-decoration: none;
  color: #0b6b4a;
  font-weight: 600;
  border-radius: 8px;
  transition: 0.3s;
}

.side-item img { width: 24px; }

.side-item:hover, .side-item.active {
  background: rgba(11,107,74,0.1);
  transform: translateX(5px);
}

@media (max-width: 768px) {
  body { padding: 10px; }
  
  .card-container { width: 100%; }

  .header {
    flex-direction: column;
    gap: 12px;
    padding: 10px;
  }
  
  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  
  .nav a { margin-left: 0; font-size: 14px; }

  .body { flex-direction: column; }
  
  .sidebar { 
    width: 100%; 
    display: flex; 
    overflow-x: auto;
    border-right: none; 
    border-bottom: 2px solid rgba(213,233,219,0.7); 
    padding: 10px;
    white-space: nowrap;
  }
  
  .side-item {
    margin-bottom: 0;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .main { padding: 15px 10px; width: 100%; }

  .credit-card {
    width: 100%;
    padding: 20px;
  }
}