body.egypt-mode .coin-front {
opacity: 0;
animation: none;
}

body.egypt-mode .coin-back {
opacity: 1;
transform: scale(1);
animation: none;
}

body.egypt-mode .tool-tags span {
background: rgba(214, 162, 58, 0.12);
border-color: rgba(214, 162, 58, 0.28);
color: #ffe6a7;
}

body.egypt-mode {
--bg: #140f0a;
--card: rgba(92, 58, 24, 0.28);
--blue: #d6a23a;
--cyan: #1fc7b6;
--text: #fff5dc;
--muted: #d6c19a;
--border: rgba(214, 162, 58, 0.28);
--particle: rgba(214, 162, 58, 0.9);
--particle-line: 214, 162, 58;
--particle-mouse: rgba(31, 199, 182, 0.32);
--profile-photo: url("/assets/img/foto-rahman-egypt-display.webp");
background:
radial-gradient(circle at top right, rgba(214, 162, 58, 0.20), transparent 34%),
radial-gradient(circle at bottom left, rgba(31, 199, 182, 0.10), transparent 30%),
linear-gradient(135deg, #120b07, #2a190a 55%, #513111);
}

body.egypt-mode header {
background: rgba(20, 15, 10, 0.72);
border-bottom-color: rgba(214, 162, 58, 0.22);
}

body.egypt-mode .logo {
color: #fff5dc;
}

body.egypt-mode .logo::before {
content: "\13080\00a0";
color: #d6a23a;
}

body.egypt-mode nav a {
color: #d6c19a;
}

body.egypt-mode nav a:hover,
body.egypt-mode .title span,
body.egypt-mode .card i,
body.egypt-mode .project-img i {
color: #f0bd4f;
}

body.egypt-mode .hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(20, 15, 10, 0.92), rgba(20, 15, 10, 0.55) 42%, rgba(20, 15, 10, 0.18)),
linear-gradient(180deg, rgba(20, 15, 10, 0.18), rgba(20, 15, 10, 0.90)),
var(--egypt-hero-image);
background-size: cover;
background-position: center;
z-index: 0;
}

body.egypt-mode .hero {
direction: ltr;
}

body.egypt-mode .hero-text,
body.egypt-mode .egypt-panel,
body.egypt-mode .about-text,
body.egypt-mode .card,
body.egypt-mode .contact-box {
direction: rtl;
text-align: right;
}

body.egypt-mode .buttons,
body.egypt-mode .egypt-symbols {
justify-content: flex-start;
}

body.egypt-mode .hero h1,
body.egypt-mode .title h2,
body.egypt-mode .card h3 {
color: #fff5dc;
}

body.egypt-mode .hero h1 span {
background: linear-gradient(90deg, #f0bd4f, #1fc7b6);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

body.egypt-mode .hero h2,
body.egypt-mode .hero p,
body.egypt-mode .card p,
body.egypt-mode .about-text p,
body.egypt-mode .contact-box p {
color: #d6c19a;
}

body.egypt-mode .badge {
background: rgba(214, 162, 58, 0.12);
color: #f0bd4f;
border-color: rgba(214, 162, 58, 0.32);
}

body.egypt-mode .badge i {
color: #1fc7b6;
}

body.egypt-mode .btn {
color: #fff5dc;
background: rgba(214, 162, 58, 0.08);
border-color: rgba(214, 162, 58, 0.28);
}

body.egypt-mode .btn.primary {
color: #1b1006;
background: linear-gradient(135deg, #f0bd4f, #1fc7b6);
box-shadow: 0 0 26px rgba(214, 162, 58, 0.28);
}

body.egypt-mode .hero-card,
body.egypt-mode .card,
body.egypt-mode .contact-box {
background: linear-gradient(145deg, rgba(82, 49, 17, 0.58), rgba(28, 18, 10, 0.64));
border-color: rgba(214, 162, 58, 0.28);
box-shadow:
inset 0 0 30px rgba(240, 189, 79, 0.05),
0 18px 42px rgba(0, 0, 0, 0.20);
}

body.egypt-mode .hero-card::before {
border-color: rgba(214, 162, 58, 0.20);
}

body.egypt-mode .hero-card::after {
background: linear-gradient(
90deg,
transparent,
rgba(240, 189, 79, 0.14),
transparent
);
}

body.egypt-mode .profile-frame {
background: linear-gradient(135deg, #f0bd4f, #1fc7b6);
box-shadow:
0 0 22px rgba(240, 189, 79, 0.48),
0 0 56px rgba(31, 199, 182, 0.18);
}

body.egypt-mode .profile-frame::before {
border-color: rgba(240, 189, 79, 0.34);
box-shadow: 0 0 34px rgba(240, 189, 79, 0.18);
}

body.egypt-mode .coin-front {
color: #f0bd4f;
background: radial-gradient(circle, #4b2d10, #140f0a 72%);
}

body.egypt-mode .project-img,
body.egypt-mode .about-photo {
background:
linear-gradient(135deg, rgba(240, 189, 79, 0.26), rgba(31, 199, 182, 0.09)),
linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.04) 75%, transparent 75%);
background-size: auto, 24px 24px;
border-color: rgba(214, 162, 58, 0.24);
}

body.egypt-mode .blob.one {
background: radial-gradient(circle, rgba(240, 189, 79, 0.32), rgba(214, 162, 58, 0.16), transparent 70%);
filter: blur(78px);
}

body.egypt-mode .blob.two {
background: radial-gradient(circle, rgba(31, 199, 182, 0.18), rgba(214, 162, 58, 0.12), transparent 70%);
filter: blur(86px);
}

body.egypt-mode .skill {
background: rgba(214, 162, 58, 0.12);
border-color: rgba(214, 162, 58, 0.28);
color: #ffe6a7;
}

body.egypt-mode .socials a,
body.egypt-mode .theme-toggle {
color: #f0bd4f;
background: rgba(214, 162, 58, 0.08);
border-color: rgba(214, 162, 58, 0.26);
}

body.egypt-mode .egypt-showcase {
display: block;
padding-top: 80px;
padding-bottom: 80px;
background:
linear-gradient(180deg, rgba(20, 15, 10, 0.95), rgba(49, 29, 10, 0.92)),
repeating-linear-gradient(90deg, rgba(240, 189, 79, 0.09) 0 1px, transparent 1px 28px);
}

body.egypt-mode footer {
background: rgba(20, 15, 10, 0.58);
border-top-color: rgba(214, 162, 58, 0.22);
}

@media (max-width: 900px) {
body.egypt-mode .hero::before {
background:
linear-gradient(180deg, rgba(20, 15, 10, 0.78), rgba(20, 15, 10, 0.88)),
var(--egypt-hero-image);
background-size: cover;
background-position: 62% center;
}

}

@media (max-width: 900px) {
body.egypt-mode .egypt-showcase {
padding-top: 56px;
padding-bottom: 56px;
}

}

@media (max-width: 900px) {
body.egypt-mode .buttons,
body.egypt-mode .egypt-symbols {
justify-content: flex-start;
}

}

body.egypt-mode {
  --theme-menu-bg: rgba(20, 15, 10, 0.94);
  --theme-menu-hover: rgba(240, 189, 79, 0.10);
  --theme-menu-active: rgba(240, 189, 79, 0.16);
}

body.egypt-mode .coin-back {
background: var(--profile-photo) var(--profile-photo-position) / cover no-repeat;
}