body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#f7f7f7;color:#222}
#topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#111;color:#fff}
.name{font-size:22px;font-weight:bold;margin:0} /* margin:0 added for h1 */
main{max-width:900px;margin:auto;padding:30px}
section{margin-bottom:30px}
h2{border-bottom:2px solid #ddd;padding-bottom:6px; color: #444;}

/* New Styles for H3 and Content */
h3 { margin: 15px 0 5px 0; font-size: 1.1em; color: #222; }
.meta { color: #666; font-size: 0.9em; margin-bottom: 8px; font-style: italic; }
ul { margin-top: 5px; padding-inline-start: 20px; line-height: 1.6; }
.job-item { margin-bottom: 20px; }

/* Tags Style */
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tags span { background: #e0e0e0; padding: 5px 10px; border-radius: 4px; font-size: 0.9em; }

#langBtnTop,#langBtnFloat{
background:#444;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer
}

#langBtnFloat{
position:fixed;bottom:20px;right:20px;display:none
}

@media(max-width:768px){
#langBtnTop{display:none}
#langBtnFloat{display:block}
}

/* --- Language Toggle Logic --- */
/* If lang is EN, hide AR content */
html[lang="en"] .ar { display: none !important; }
/* If lang is AR, hide EN content */
html[lang="ar"] .en { display: none !important; }


/* From Uiverse.io by andrew-demchenk0 */ 
.button {
  --main-focus: #2d8cf0;
  --font-color: #323232;
  --bg-color-sub: #dedede;
  --bg-color: #eee;
  --main-color: #323232;
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  background-color: var(--bg-color);
  border-radius: 10px;
  overflow: hidden;
}

.button, .button__icon, .button__text {
  transition: all 0.3s;
}

.button .button__text {
  transform: translateX(22px);
  color: var(--font-color);
  font-weight: 600;
}

.button .button__icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 39px;
  background-color: var(--bg-color-sub);
  display: flex;
  align-items: center;
  justify-content: center;
}

.button .svg {
  width: 20px;
  fill: var(--main-color);
}

.button:hover {
  background: var(--bg-color);
}

.button:hover .button__text {
  color: transparent;
}

.button:hover .button__icon {
  width: 148px;
  transform: translateX(0);
}

.button:active {
  transform: translate(3px, 3px);
  box-shadow: 0px 0px var(--main-color);
}