body{margin:0;font-family:Arial,sans-serif;background:#0b0b0b;color:#fff;}
.wrapper{display:flex;height:100vh;}
.sidebar{width:220px;background:#0f0f0f;border-right:2px solid #d4af37;}
.sidebar a{display:block;padding:12px 15px;color:#ccc;text-decoration:none;cursor:pointer;}
.sidebar a:hover{background:#1a1a1a;color:#f5c86b;}
.main{flex:1;padding:20px;display:flex;gap:20px;}
.grid{width:55%;display:grid;grid-template-columns:repeat(2,1fr);gap:15px;}
.service-card{background:#121212;border-left:4px solid #f5c86b;border-radius:8px;padding:15px;cursor:pointer;}
.service-card h4{margin:0 0 6px;color:#f5c86b;}
.service-card p{margin:0;font-size:13px;color:#bbb;}
.slider{width:45%;background:#111;border-left:2px solid #333;border-radius:10px;padding:15px;display:none;flex-direction:column;}
.slider-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333;padding-bottom:8px;}
.slider-header h3{margin:0;color:#f5c86b;}
.close{cursor:pointer;font-size:18px;}
.section{border:1px dashed #444;padding:12px;border-radius:6px;margin-bottom:12px;}
.section-title{color:#f5c86b;margin-bottom:6px;font-size:13px;}

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Wrapper Layout */
.wrapper {
  display: flex;
  min-height: 100vh;
  background: #1e1e2f;
}

/* Sidebar */
.sidebar {
  width: 250px;
  background: #2a2a3d;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}

.sidebar a {
  padding: 12px 20px;
  text-decoration: none;
  color: #ddd;
  display: block;
  transition: background 0.3s, color 0.3s;
  cursor: pointer;
}

.sidebar a:hover {
  background: #f5c86b;
  color: #000;
  font-weight: bold;
  border-radius: 4px;
}

/* Main Area */
.main {
  flex: 1;
  padding: 20px;
  background: #f4f4f9;
  overflow-y: auto;
}

/* Grid Cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.service-card {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.service-card h4 {
  margin-bottom: 8px;
  color: #333;
}

.service-card p {
  color: #666;
  font-size: 14px;
}

/* Slider */
.slider {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 12px rgba(0,0,0,0.25);
  padding: 20px;
  overflow-y: auto;
  z-index: 1000;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { right: -400px; opacity: 0; }
  to { right: 0; opacity: 1; }
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.slider-header h3 {
  color: #222;
}

.slider-header .close {
  cursor: pointer;
  font-size: 20px;
  color: #888;
}

.slider-header .close:hover {
  color: #000;
}

.slider-body .section {
  margin-bottom: 20px;
}
.slider-body .section {
  background: #f9f9f9;
  padding: 10px;
  border-radius: 6px;
  color: #222;
}


.section-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #444;
}

/* Buttons */
button {
  background: #f5c86b;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
}

button:hover {
  background: #e0b85f;
  transform: scale(1.05);
}

/* QR Image */
.slider img {
  display: block;
  margin-top: 15px;
  max-width: 220px;
  border: 2px solid #ccc;
  border-radius: 6px;
}


/* Mobile Friendly Upgrade */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
    line-height: 1.4;
    padding: 10px;
  }
  .profile-card {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .profile-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }
  .profile-card h1, 
  .profile-card h2, 
  .profile-card p {
    font-size: 14px;
    margin: 6px 0;
  }
  .services {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }
  .services div {
    font-size: 14px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
  }
  button {
    width: 100%;
    font-size: 16px;
    padding: 10px;
    margin-top: 8px;
  }
}