/* =========================================================
   IMPORTS & ROOT VARIABLES
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
:root {
  /* LIGHT (default) */
  --bg-main: #f5f5f5;
  --bg-elevated: #ffffff;
  --bg-soft: #e5e7eb;

  --text-main: #111827;
  --text-soft: #6b7280;

  --accent: #eb2588; /* light blue */
  /* --accent-soft: rgba(37, 99, 235, 0.3); */
  --accent-strong: #1d4ed8;
}

body.dark-mode {
  /* DARK mode */
  --bg-main: #020617;
  --bg-elevated: #020617;
  --bg-soft: #020617;

  --text-main: #f9fafb;
  --text-soft: #9ca3af;
}

/* =========================================================
   GLOBAL STYLES
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-main);
  padding: 20px;
}

/* =========================================================
   CARD CONTAINER
========================================================= */
.header {
  display: flex;
  justify-content: center;
  /* flex-direction: column; */
  align-items: center;
  background-color: var(--text-main);
  padding: 15px;
  overflow: hidden;
  text-align: center;
  gap: 8rm;
  border-radius: 10px;
}
.profile_card {
  position: relative;
}

.card-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--card-bg);
  color: var(--bg-elevated);
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
  transition: 0.3s;
  z-index: 20;
}

.card-toggle-btn i {
  font-size: 18px;
  /* color: var(--text-main); */
}

.card-toggle-btn:hover {
  transform: scale(1.1);
}

/* ---------------- THEME BUTTON ---------------- */
.theme-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--card-bg);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.theme-btn i {
  font-size: 18px;
  color: var(--text-main);
}

/* ---------------- CARD ---------------- */
.profile_card {
  flex-direction: column;
  align-items: center;
  max-width: 100vh;
  width: 100%;
  padding: 25px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 🌙 Dark Mode MAIN */
body.dark-mode {
  background-color: #020617 !important;
}

/* Card Dark Mode */
body.dark-mode .profile_card {
  background-color: #0f172a !important;
  box-shadow: 0 4px 25px rgba(255, 255, 255, 0.05);
}
body.dark-mode .profile_card .image {
  position: relative;
  width: 150px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--accent);
  padding: 3px;
  margin-bottom: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Texts drak mode */
body.dark-mode .name {
  color: var(--bg-elevated) !important;
}
body.dark-mode .job {
  color: var(--accent) !important;
}
body.dark-mode .sumery {
  color: var(--text-soft) !important;
}
body.dark-mode .info span,
body.dark-mode .footer span {
  color: #f3f4f6 !important;
}

/* Social icons Dark Mode */
body.dark-mode .social_media a {
  background-color: #1e293b !important;
  color: #fff !important;
}

/* Buttons Dark Mode */
body.dark-mode .buttons a {
  background-color: var(--accent) !important;
}
body.dark-mode .buttons a:hover {
  background-color: var(--accent-strong) !important;
}
body.dark-mode .contact_info .info i {
  font-size: 18px;
  color: var(--accent);
}
body.dark-mode .contact_info .info span:hover {
  color: var(--accent) !important; /* light blue style */
  transition: 0.3s;
}
.buttons a:active {
  background-color: var(--text-main);
  color: #ffffff;
}
/* DARK MODE — SOCIAL ICON BASE */
body.dark-mode .social_media a {
  background: #f4f4f4 !important; /* soft navy */
  transition: 0.3s;
}

/* Facebook Dark Mode */

body.dark-mode .social_media a:nth-child(1) {
  color: #1877f2 !important; /* soft navy */
  transition: 0.3s;
}
body.dark-mode .social_media a:nth-child(1):hover {
  transform: scale(1.12);
  background: #1877f2 !important; /* slightly lighter navy */
  color: #f4f4f4 !important; /* sky blue icon */
}

/* instagram Dark Mode */

body.dark-mode .social_media a:nth-child(2) {
  color: var(--accent) !important; /* soft navy */
  transition: 0.3s;
}
body.dark-mode .social_media a:nth-child(2):hover {
  transform: scale(1.12);
  background: var(--accent) !important; /* slightly lighter navy */
  color: #f4f4f4 !important; /* sky blue icon */
}

/* linkdin  Dark Mode */

body.dark-mode .social_media a:nth-child(3) {
  color: var(--accent-strong) !important; /* soft navy */
  transition: 0.3s;
}
body.dark-mode .social_media a:nth-child(3):hover {
  transform: scale(1.12);
  background: var(--accent-strong) !important; /* slightly lighter navy */
  color: #f4f4f4 !important; /* sky blue icon */
}

/* github Dark Mode */

body.dark-mode .social_media a:nth-child(4) {
  color: var(--card-bg) !important; /* soft navy */
  transition: 0.3s;
}
body.dark-mode .social_media a:nth-child(4):hover {
  transform: scale(1.12);
  background: black !important; /* slightly lighter navy */
  color: #f4f4f4 !important; /* sky blue icon */
}
/* ---------------- IMAGE ---------------- */
.image {
  position: relative;
  width: 150px;
  height: 120px;
  border-radius: 50%;
  background-color: #4070f4;
  padding: 3px;
  margin-bottom: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image .p_img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* ---------------- TEXT ---------------- */
.profile_card .name {
  font-size: 16px;
  font-weight: 400;
  color: var(--bg-main);
  margin-bottom: 15px;
  padding: 0 10px;
  text-transform: capitalize;
  transition: color 0.3s ease;
}

.profile_card .job {
  font-size: 16px;
  font-weight: 400;
  color: #4070f4;
  margin-bottom: 15px;
  padding: 0 10px;
  text-transform: capitalize;
  transition: color 0.3s ease;
}

.profile_card .sumery {
  font-size: 14px;
  color: var(--bg-elevated);
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 500px;
  padding: 0 10px;
}

/* ---------------- SOCIAL ICONS ---------------- */
.social_media {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}

.profile_card .social_media a {
  text-decoration: none;
  color: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #4070f4;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.profile_card .social_media i {
  font-size: 24px;
  transition: color 0.3s ease;
}
.profile_card .social_media {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.profile_card .social_media a:hover:nth-child(1),
.profile_card .social_media a:hover:nth-child(2),
.profile_card .social_media a:hover:nth-child(3),
.profile_card .social_media a:hover:nth-child(4) {
  transform: scale(1.1);
  transition: transform 0.5s ease;
}
.profile_card .social_media a:hover:nth-child(1) {
  background-color: #f7f8fa;
  color: #3b5998;
}
.profile_card .social_media a:nth-child(2) {
  background-color: hwb(313 3% 2%);
  color: #f4f4f4;
}
.profile_card .social_media a:hover:nth-child(2) {
  background-color: #f7f8fa;
  color: #fa08c5;
}
.profile_card .social_media a:nth-child(3) {
  background-color: #006eff;
  color: #f4f4f4;
}
.profile_card .social_media a:hover:nth-child(3) {
  background-color: #f7f8fa;
  color: #006eff;
}
.profile_card .social_media a:nth-child(4) {
  background-color: #030303;
}
.profile_card .social_media a:hover:nth-child(4) {
  background-color: #f9f9fa;
  color: #050505;
}

/* ---------------- CONTACT INFO ---------------- */
.contact_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.contact_info .info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.contact_info .info i {
  font-size: 18px;
  color: #4070f4;
}
.contact_info .info span {
  font-size: 14px;
  color: #685151a9;
}
.contact_info .info i {
  text-decoration: none;
  color: #4070f4;
  transition: color 0.3s ease;
}
.contact_info .info :hover {
  color: #365bbf;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* ---------------- BUTTONS ---------------- */
.buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

.buttons a {
  padding: 10px 15px;
  border: none;
  border-radius: 50px;
  background-color: #4070f4;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.buttons a:hover {
  background-color: var(--accent);
  color: #ffffff;
}
.buttons a:active {
  background-color: var(--text-main);
  color: #ffffff;
}

/* ---------------- FOOTER ---------------- */
.footer {
  text-align: center;
  font-size: 12px;
  color: var(#030303);
}
.footer span a {
  color: var(#fa08c5);
  text-decoration: #030303;
}