/* General body */
body {
  font-size: 18px;
}

/* Headings */
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}

/* Buttons */
button, .btn {
  font-size: 1.1rem;
  padding: 0.75rem 1.5rem;
}

/* Cards & sections */
.card {
  padding: 2rem;
}
.card-section {
  margin-bottom: 2rem;
}


.logo-circle {
  width: 140px;
  height: 140px;
}

.logo {
  font-size: 2.5rem;
}

.motto {
  font-size: 1.2rem;
}



:root{
  --bg:#f7f9fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#6fb3d2;
  --text:#0f172a;
  --radius:14px;
  --shadow: 0 8px 30px rgba(35,50,70,0.06);
}

body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0; background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:background .35s ease, color .35s ease;
}

.center-brand {
  text-align: center;
  flex: 1;
}

.logo-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}

.logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.container{max-width:980px; margin:30px auto; padding:0 20px;}

.site-header{padding:22px 0;}
.header-grid{display:flex;align-items:center;justify-content:space-between;}
.brand .logo{font-size:26px;margin:0;color:var(--text);letter-spacing:1px;}
.brand .motto{margin:4px 0 0;color:var(--muted);font-size:14px;}

.controls{display:flex;gap:12px;align-items:center;}
.lang-switch .lang{background:transparent;border:1px solid rgba(15,23,42,0.06);padding:8px 12px;border-radius:10px;cursor:pointer;transition:all .25s;}
.lang-switch .lang.active{background:var(--accent);color:white;border-color:transparent;box-shadow:0 6px 18px rgba(111,179,210,0.18);}
.theme-switch select{padding:8px;border-radius:10px;border:1px solid rgba(15,23,42,0.06);}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:28px;transition:transform .35s ease, box-shadow .35s ease, background .35s ease;}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(35,50,70,0.08);}

.profile{display:flex;gap:22px;align-items:center;}
.profile-left{flex:0 0 140px;}
.avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;border:6px solid rgba(255,255,255,0.8);box-shadow:0 8px 24px rgba(35,50,70,0.06);background:linear-gradient(180deg,#fff,#f2f7fb);}
.profile-right{flex:1;}
.profile-right h2{margin:0;font-size:22px;}
.profile-right .title{margin:6px 0;color:var(--muted);font-size:14px;}
.profile-right p{margin:8px 0;color:var(--muted);font-size:14px;}

.contact-buttons{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.btn{display:inline-block;padding:8px 14px;border-radius:14px;background:linear-gradient(90deg, rgba(111,179,210,0.15), rgba(111,179,210,0.06));border:1px solid rgba(111,179,210,0.25);text-decoration:none;color:var(--text);font-weight:600;transition:all .25s;}
.btn:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(111,179,210,0.15);}

.card-section{margin-top:18px;padding:16px;border-radius:10px;background:rgba(255,255,255,0.9);border:1px solid rgba(0,0,0,0.08);transition:background .35s ease, color .35s ease;}
.card-section h3{margin:0 0 8px 0;color:var(--text);}
.card-section ul{margin:0;padding-left:18px;color:var(--muted);}

.motto-section blockquote{margin:0;padding:18px;border-left:4px solid var(--accent);color:var(--muted);font-style:italic;background:rgba(111,179,210,0.05);border-radius:8px;}

.site-footer{padding:18px 0;text-align:center;color:var(--muted);font-size:14px;}

.theme-dark{
  --bg:#0b1220; 
  --card:#101828; 
  --muted:#cbd5e1; 
  --accent:#4fb3d1; 
  --text:#f8fafc;
}
.theme-dark .card-section{background:rgba(16,24,40,0.95);border:1px solid rgba(255,255,255,0.12);}
.theme-dark .btn{background:rgba(79,179,209,0.1);border:1px solid rgba(79,179,209,0.4);color:#e6eef6;}
.theme-dark .motto-section blockquote{background:rgba(79,179,209,0.08);color:#cbd5e1;}

.theme-dark .lang-switch .lang {
  color: #f8fafc; /* make text visible in dark mode */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-dark .lang-switch .lang.active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}


/* Light Mode - Pastel E-commerce Theme */

.theme-light {
  --bg: #fafbfd; /* soft pastel background */
  --card: #ffffff;
  --muted: #7a7f91;
  --accent: #a3d2ca; /* pastel teal */
  --accent-alt: #f7c8c2; /* pastel peach */
  --text: #1a1a1a;
}

.theme-light .card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  z-index: 1;
}

.theme-light .card::before {
  content: "";
  position: absolute;
  inset: -3px; /* controls thickness of glow */
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
  z-index: -1;
}

.dark body {
  background: linear-gradient(180deg, #0D1117, #161B22); /* subtle dark gradient */
}


.theme-light .btn {
  background: linear-gradient(90deg, var(--accent), var(--accent-alt));
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

.theme-light .btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(247, 200, 194, 0.25); /* pastel peach hover glow */
}

.theme-light .motto-section blockquote {
  background: rgba(163, 210, 202, 0.1);
  border-left: 4px solid var(--accent);
  color: #4a4a4a;
}

.theme-light .card-section{background:rgba(255,255,255,0.95);border:1px solid rgba(0,0,0,0.06);}

/* .theme-light{
  --bg:#ffffff; --card:#ffffff; --muted:#6b7280; --accent:#6fb3d2; --text:#0f172a;
}
.theme-light .card-section{background:rgba(255,255,255,0.95);border:1px solid rgba(0,0,0,0.06);}

/* subtle theme variation uses slight bluish background */
.theme-subtle{
  --bg:linear-gradient(180deg,#f6fbff,#f7f9fb);
  --card:#ffffff;
}
.theme-subtle .card-section{background:rgba(255,255,255,0.95);border:1px solid rgba(0,0,0,0.05);}

@media (max-width:720px){
  .profile{flex-direction:column;align-items:center;text-align:center;}
  .profile-left{flex-basis:auto;}
  .contact-buttons{justify-content:center;}
  .header-grid{flex-direction:column;gap:12px;align-items:flex-start;}
}
.sr{position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
/* Position controls to left side */
.header-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.left-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  order: -1; /* puts on left side */
}

.center-brand {
  text-align: center;
  flex: 1;
}

.contact-info {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--muted);
}

.contact-info a {
  color: var(--accent);
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* Add icons with spacing */
.btn i {
  margin-right: 8px;
}

/* Remove profile-left since image removed */
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Adjust card and spacing slightly */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
  transition: all .35s ease;
}

/* Keep only subtle and dark themes */
.theme-subtle {
  --bg: linear-gradient(180deg, #f6fbff, #f7f9fb);
  --card: #ffffff;
}

.theme-dark {
  --bg: linear-gradient(180deg, #0D1117, #161B22);
  --card: #101828;
  --muted: #cbd5e1;
  --accent: #4fb3d1;
  --text: #f8fafc;
}
/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Backgrounds */
body.theme-subtle {
  background: linear-gradient(180deg, #eaf6fa 0%, #ffffff 100%);
  font-family: 'Poppins', sans-serif;
  color: #222;
  transition: background 0.4s ease;
}

body.theme-dark {
  background: linear-gradient(180deg, #0d1117, #161b22);
  color: #e6edf3;
}

body.theme-light {
  background: #fdfdfd;
  color: #111;
}

/* Header Section */
.site-header {
  padding: 2rem 0;
  text-align: center;
  position: relative;
}

.header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4rem;
}

.lang-switch, .theme-switch {
  display: flex;
  gap: 0.5rem;
}

.lang-switch button,
.theme-switch select {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 8px;
  background-color: #d4edf8;
  color: #333;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lang-switch button.active,
.lang-switch button:hover,
.theme-switch select:hover {
  background-color: #a8e1ef;
}

/* Center Logo & Text */
.brand {
  text-align: center;
}

.logo-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 0.8rem;
  border: 4px solid #a8e1ef;
  background: #fff;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-name {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #0a3d62;
  margin-bottom: 0.4rem;
}

.motto {
  font-size: 1.1rem;
  color: #555;
  font-style: italic;
}

/* Profile Section */
.container.card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  max-width: 900px;
  margin: 2rem auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.profile {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-right h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.title {
  color: #0077b6;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.contact-buttons {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
}

.btn {
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  background: #a8e1ef;
  color: #222;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn:hover {
  background: #74d4e6;
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 2rem;
  font-size: 1rem;
  color: #555;
  background-color: rgba(255, 255, 255, 0.6);
  margin-top: 2rem;
}
/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  transition: all 0.4s ease;
}

/* Backgrounds */
body.theme-subtle {
  background: linear-gradient(180deg, #eaf6fa 0%, #ffffff 100%);
  color: #222;
}

body.theme-light {
  background: #fdfdfd;
  color: #111;
}

body.theme-dark {
  background: linear-gradient(180deg, #0d1117, #161b22);
  color: #e6edf3;
}

/* Header */
.site-header {
  padding: 2rem 0 1.5rem;
  text-align: center;
}

.header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3rem;
  flex-wrap: wrap;
}

/* Theme & Language Switch */
.lang-switch, .theme-switch {
  display: flex;
  gap: 0.6rem;
}

.lang-switch button,
.theme-switch select {
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: 8px;
  background-color: #d4edf8;
  color: #333;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
}

.lang-switch button:hover,
.theme-switch select:hover,
.lang-switch button.active {
  background-color: #a8e1ef;
}

body.theme-dark .lang-switch button,
body.theme-dark .theme-switch select {
  background-color: #1f2a38;
  color: #e6edf3;
}

body.theme-dark .lang-switch button:hover,
body.theme-dark .lang-switch button.active,
body.theme-dark .theme-switch select:hover {
  background-color: #263445;
}

/* Brand Section */
.brand {
  text-align: center;
  flex-grow: 1;
}

.logo-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 0.6rem;
  border: 4px solid #a8e1ef;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-name {
  font-size: 2rem;
  font-weight: 700;
  color: #0a3d62;
  margin-bottom: 0.3rem;
}

body.theme-dark .company-name {
  color: #58a6ff;
}

.motto {
  font-size: 1.1rem;
  color: #555;
  font-style: italic;
}

body.theme-dark .motto {
  color: #adb6c4;
}

/* Card */
.container.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  max-width: 900px;
  margin: 2rem auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  transition: 0.3s;
}

body.theme-dark .container.card {
  background: #1f2937;
  box-shadow: 0 0 20px rgba(255,255,255,0.05);
}

/* Profile Info */
.profile-right h2 {
  font-size: 1.9rem;
  margin-bottom: 0.6rem;
}

.title {
  color: #0077b6;
  font-weight: 600;
  margin-bottom: 1rem;
}

body.theme-dark .title {
  color: #4db5ff;
}

.contact-buttons {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.btn {
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  background: #a8e1ef;
  color: #222;
  font-weight: 500;
  transition: all 0.3s;
}

.btn:hover {
  background: #74d4e6;
}

body.theme-dark .btn {
  background: #263445;
  color: #e6edf3;
}

body.theme-dark .btn:hover {
  background: #2d3f54;
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 2rem;
  font-size: 1rem;
  color: #555;
  background: rgba(255,255,255,0.6);
}

body.theme-dark .site-footer {
  background: #0d1117;
  color: #aab4c0;
}