/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #00008b;
}

/* Mobile Body Fixes */
@media (max-width: 768px) {
  body {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 13px !important;
  }
}

h1 {
  font-weight: 400;
  color: #fff;
}

h2 {
  font-size: 36px;
  font-weight: 400;
  color: #2b2b2b;
}

p {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}

a {
  font-size: 24px;
}

footer h1 {
  color: #00008b;
}

button {
  font-size: 36px;
  font-weight: 400;
  background-color: #36f;
  color: #fff;
  border: 2px solid #33ff36;
  padding: 10px 20px;
}

button:hover {
  text-decoration: none;
  background-color: #b100cd;
}

button:active {
  background-color: #0c9;
}

button:focus {
  border: 2px solid #ff00bf;
}

header {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  background-color: #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 5px solid #000;
  text-align: center;
  margin: 20px auto 10px;
  padding: 20px;
  width: 100%;
}

.page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 20px;
}

.page-header__item {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 200px;
  flex: 0 1 200px;
}

img.page-header__item {
  max-width: 200px;
}

.page-header__item:last-child {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: right;
}

.navigation-list {
  list-style-type: none;
}

.navigation-list li {
  display: inline-block;
  margin-left: 15px;
}

main {
  max-width: 1000px;
  margin: auto;
}

/* Mobile Main Container Fixes */
@media (max-width: 768px) {
  main {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  main {
    padding: 5px !important;
  }
}

#index-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Mobile Fix for Index Main - Override flex to prevent layout issues */
@media (max-width: 768px) {
  #index-main {
    display: block !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 15px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  #index-main {
    padding: 15px 10px !important;
  }
}

.profile__portrait {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 250px;
  flex: 0 1 250px;
  width: 250px;
  height: 250px;
  margin-right: 40px;
  border-radius: 50%;
}

/* Mobile Profile Portrait Fixes */
@media (max-width: 768px) {
  .profile__portrait {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
    flex: none !important;
  }
}

@media (max-width: 480px) {
  .profile__portrait {
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto 15px auto !important;
  }
}

#index-contact-form {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
  margin-bottom: 15px;
}

/* Mobile Contact Form Fixes */
@media (max-width: 768px) {
  #index-contact-form {
    flex: none !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 20px auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(10px) !important;
  }

  #index-contact-form label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #fff !important;
    font-weight: 500 !important;
    text-align: left !important;
  }

  #index-contact-form input {
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 15px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  #index-contact-form button {
    width: 100% !important;
    padding: 15px !important;
    background: linear-gradient(145deg, #357b70, #2b6259) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }

  #index-contact-form button:hover {
    background: linear-gradient(145deg, #2b6259, #1f4a42) !important;
    transform: translateY(-2px) !important;
  }
}

@media (max-width: 480px) {
  #index-contact-form {
    padding: 15px !important;
    margin: 15px auto !important;
  }

  #index-contact-form input {
    padding: 10px !important;
    font-size: 14px !important;
  }

  #index-contact-form button {
    padding: 12px !important;
    font-size: 14px !important;
  }
}

#index-contact-form > h1 {
  color: #ffffff;
}

#contact-main > div {
  font-size: 24px;
  padding: 10px;
  text-align: center;
  align-items: center;
}

#about-main {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 10px;
  margin: auto;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  max-width: 900px;
  margin: auto;
}

form > * {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

/* Grid Container - Simple CSS Grid Implementation */
#grid__container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  padding: 20px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  background-color: #fff !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Grid Items - Individual Project Cards */
.grid__item {
  background-color: #bff4be !important;
  padding: 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.3s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.grid__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive Grid */
@media (max-width: 768px) {
  #grid__container {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 15px;
  }
}

@media (max-width: 500px) {
  #grid__container {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }
}

.grid__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.animated-button {
  display: inline-block;
  font-family: "Inter", "Segoe UI", sans-serif !important;
  font-size: 1.2em !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #3366ff, #0052cc) !important;
  color: #ffffff !important;
  border: 2px solid rgba(51, 102, 255, 0.6) !important;
  padding: 15px 30px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  margin: 10px 15px !important;
  box-shadow: 0 4px 12px rgba(51, 102, 255, 0.3) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.animated-button::before {
  content: "";
  margin-right: 10px;
  font-size: 1.2em;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

.animated-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: all 0.3s ease;
}

.animated-button:hover::after {
  left: 100%;
}

.animated-button:hover {
  background: linear-gradient(135deg, #0052cc, #003d99) !important;
  border-color: rgba(0, 82, 204, 0.8) !important;
  color: #ffffff !important;
}

.animated-button#button1:hover {
  background: linear-gradient(135deg, #0052cc, #003d99) !important;
  transform: translateX(15px) !important;
  transition: all 0.5s ease !important;
  box-shadow: 0 6px 20px rgba(51, 102, 255, 0.5) !important;
  border-color: rgba(0, 82, 204, 0.8) !important;
}

.animated-button#button2:hover {
  background: linear-gradient(135deg, #0052cc, #003d99) !important;
  transform: rotate(90deg) !important;
  transition: all 0.5s ease !important;
  box-shadow: 0 6px 20px rgba(51, 102, 255, 0.5) !important;
  border-color: rgba(0, 82, 204, 0.8) !important;
}

.animated-button#button3:hover {
  background: linear-gradient(135deg, #0052cc, #003d99) !important;
  transform: rotateY(180deg) !important;
  transition: all 0.5s ease !important;
  box-shadow: 0 6px 20px rgba(51, 102, 255, 0.5) !important;
  border-color: rgba(0, 82, 204, 0.8) !important;
}

@-webkit-keyframes color-change {
  0% {
    fill: #edc655;
  }

  50% {
    fill: #fcffad;
  }

  100% {
    fill: #f76414;
  }
}

@keyframes color-change {
  0% {
    fill: #edc655;
  }

  50% {
    fill: #fcffad;
  }

  100% {
    fill: #f76414;
  }
}

.sun {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-name: color-change;
  animation-name: color-change;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes cloud-move {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
  }
}

@keyframes cloud-move {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
  }
}

.cloud-front {
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -webkit-animation-name: cloud-move;
  animation-name: cloud-move;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.cloud-front {
  -webkit-animation: 20s cloud-move infinite alternate ease-in-out;
  animation: 20s cloud-move infinite alternate ease-in-out;
}

@-webkit-keyframes cloud-move-reverse {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }
}

@keyframes cloud-move-reverse {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }
}

.cloud-back {
  -webkit-animation: 25s cloud-move-reverse infinite alternate ease-in-out;
  animation: 25s cloud-move-reverse infinite alternate ease-in-out;
}

h2 {
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 20px;
  font-size: 28px;
  color: #357b70;
}

p {
  line-height: 1.6;
  text-align: justify;
  margin-bottom: 20px;
}

#about-main ul {
  list-style-type: disc;
  margin: 20px;
  padding: 0;
}

ul li {
  margin-bottom: 10px;
  font-size: 16px;
  color: #2b2b2b;
}

ul li a {
  text-decoration: none;
  color: #357b70;
}

ul li a:hover {
  text-decoration: underline;
  color: #e0b354;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
}

table th,
table td {
  border: 1px solid rgba(39, 174, 96, 0.3);
  padding: 8px;
  color: #27ae60 !important;
}

table th {
  background-color: rgba(39, 174, 96, 0.2);
  color: #2ecc71 !important;
  font-weight: bold;
}

table tr:nth-child(even) {
  background-color: rgba(248, 255, 248, 0.5);
}

table tr:hover {
  background-color: #f1f1f1;
}

footer {
  display: block;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  text-align: center;
  padding: 20px;
}

.footer__item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}

.footer__item:first-child {
  text-align: left;
}

.footer__item:last-child {
  text-align: right;
}

/* API Documentation Styles */
.api-documentation {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 25px;
  margin-top: 20px;
  border: 2px solid #333;
}

.api-documentation h4 {
  color: #4caf50;
  font-size: 1.4em;
  margin-bottom: 20px;
  text-align: center;
}

.api-section {
  margin-bottom: 25px;
  padding: 20px;
  background: #2d2d2d;
  border-radius: 8px;
  border-left: 4px solid #4caf50;
}

.api-section h5 {
  color: #61dafb;
  font-size: 1.2em;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.endpoint {
  margin-bottom: 15px;
  padding: 12px;
  background: #333;
  border-radius: 6px;
  border-left: 3px solid #ff6b6b;
}

.endpoint code {
  background: #1a1a1a;
  color: #61dafb;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 5px;
}

.endpoint p {
  color: #cccccc;
  margin: 5px 0 0 0;
  font-size: 0.9em;
}

.api-features,
.api-tech-details {
  background: #2d2d2d;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid #ff6b6b;
}

.api-features h5,
.api-tech-details h5 {
  color: #ff6b6b;
  margin-bottom: 15px;
  font-size: 1.2em;
}

.api-features ul,
.api-tech-details ul {
  list-style: none;
  padding: 0;
}

.api-features li,
.api-tech-details li {
  color: #cccccc;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.api-features li:before,
.api-tech-details li:before {
  content: ">";
  color: #4caf50;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.api-features li strong,
.api-tech-details li strong {
  color: #61dafb;
}

/* Mobile responsiveness for API documentation */
@media screen and (max-width: 768px) {
  .api-documentation {
    padding: 15px;
    margin-top: 15px;
  }

  .api-section {
    padding: 15px;
    margin-bottom: 20px;
  }

  .api-section h5 {
    font-size: 1.1em;
  }

  .endpoint {
    padding: 10px;
  }

  .endpoint code {
    font-size: 0.85em;
    word-break: break-all;
  }

  .api-features,
  .api-tech-details {
    padding: 15px;
  }
}

@media screen and (max-width: 480px) {
  .api-documentation h4 {
    font-size: 1.2em;
  }

  .api-section h5 {
    font-size: 1em;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .endpoint code {
    font-size: 0.8em;
    padding: 3px 6px;
  }

  .api-features li,
  .api-tech-details li {
    font-size: 0.9em;
    padding-left: 15px;
  }
}

/* Enhanced project materials styles */
.project-image img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

.project-goal {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
  border-left: 4px solid #007bff;
}

.tech-stack {
  margin: 20px 0;
}

.tech-stack h4 {
  color: #333;
  margin-bottom: 10px;
  font-size: 16px;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.tech-tag {
  background: #007bff;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.project-materials {
  margin: 20px 0;
}

.project-materials h4 {
  color: #333;
  margin-bottom: 10px;
  font-size: 16px;
}

.project-materials ul {
  margin-left: 20px;
}

.project-materials li {
  margin-bottom: 5px;
  color: #666;
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.project-links a {
  background: #007bff;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.3s;
}

.project-links a:hover {
  background: #0056b3;
}

/* Mobile Responsive Enhancements */
@media all and (max-width: 750px) {
  .tech-tags {
    justify-content: center;
  }

  .project-links {
    flex-direction: column;
    align-items: center;
  }

  .project-links a {
    width: 100%;
    text-align: center;
    max-width: 200px;
  }

  .project-goal {
    padding: 10px;
  }
}

@media all and (max-width: 500px) {
  .tech-tag {
    font-size: 11px;
    padding: 3px 6px;
  }

  .project-image img {
    max-width: 100%;
  }
}

/* ========================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   ======================================== */

/* Hamburger Menu Styles */
.hamburger-menu {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  background: transparent;
  border: none;
  z-index: 1000;
}

.hamburger-menu span {
  width: 25px;
  height: 3px;
  background-color: #357b70;
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 2px;
}

.hamburger-menu.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile Header & Navigation */
@media (max-width: 768px) {
  .hamburger-menu {
    display: flex;
  }
  .page-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    position: relative;
  }

  #header-img {
    max-width: 120px;
    height: auto;
  }

  .main-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
  }

  .main-navigation.nav-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .navigation-list {
    flex-direction: column;
    gap: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 10px 0;
  }

  .navigation-list__item {
    padding: 12px 20px;
    display: block;
    border-radius: 6px;
    background: rgba(53, 123, 112, 0.1);
    margin: 5px 0;
  }

  .navigation-list__item--active {
    background: #357b70;
    color: white;
  }
}

/* Mobile Typography */
@media (max-width: 768px) {
  h1 {
    font-size: 28px;
    text-align: center;
    padding: 0 15px;
  }

  h2 {
    font-size: 24px;
    text-align: center;
    padding: 0 10px;
  }

  p {
    font-size: 16px;
    line-height: 1.6;
    padding: 0 15px;
    text-align: left;
  }

  body {
    padding: 0 10px;
    font-size: 16px;
  }
}

/* Mobile Home Page (index.html) */
@media (max-width: 768px) {
  .profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 15px;
  }

  .profile__portrait {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
  }

  .profile__text {
    max-width: 100%;
    padding: 0;
  }

  /* Center buttons on mobile */
  .profile a {
    display: block;
    margin: 10px auto;
    text-align: center;
    max-width: 250px;
  }
}

/* Mobile About Page (about.html) */
@media (max-width: 768px) {
  #about-main {
    padding: 20px 15px;
    flex-direction: column;
  }

  .about-content {
    max-width: 100%;
    text-align: center;
  }

  .about-list {
    padding-left: 20px;
    text-align: left;
  }

  .about-list li {
    margin-bottom: 10px;
    font-size: 16px;
  }

  /* Mobile table for about page */
  table {
    width: 100%;
    font-size: 14px;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
  }

  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
  }

  tr {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 6px;
  }

  td {
    border: none;
    padding: 5px 0;
    text-align: left;
  }

  td:before {
    content: attr(data-label) ": ";
    font-weight: bold;
    color: #357b70;
  }
}

/* Mobile Contact Page (contact.html) */
@media (max-width: 768px) {
  #contact-main {
    padding: 20px 15px;
  }

  #contact-main > div {
    font-size: 16px;
    padding: 15px;
    text-align: center;
    line-height: 1.6;
  }

  #contact-main a {
    word-break: break-all;
    display: block;
    margin: 5px 0;
  }

  /* Contact details grid mobile */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    margin: 20px 0 !important;
  }

  .contact-card {
    padding: 20px !important;
  }

  .contact-card h3 {
    font-size: 18px;
  }

  .contact-card p {
    font-size: 14px;
    padding: 0;
  }

  /* Contact form mobile */
  #contact-form-section {
    padding: 25px 15px !important;
    margin: 25px 0 !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 14px 16px;
  }

  .submit-btn {
    padding: 16px 20px;
    font-size: 18px;
  }
}

/* Mobile Footer */
@media (max-width: 768px) {
  .page-footer {
    padding: 30px 15px;
    text-align: center;
  }

  .social-media {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .social-media img {
    width: 40px;
    height: 40px;
  }

  footer {
    padding: 20px 15px;
    text-align: center;
  }

  footer h1 {
    font-size: 18px;
    margin-bottom: 15px;
  }

  footer a {
    margin: 0 10px;
  }

  footer div {
    margin-top: 20px;
  }

  footer div a {
    display: block;
    margin: 10px 0;
    padding: 10px;
    background: rgba(53, 123, 112, 0.1);
    border-radius: 6px;
  }
}

/* =============================================
   Global Font Override: Calibri with fallbacks
   Applies across the site; uses !important to
   ensure it takes precedence over prior rules.
   ============================================= */
html,
body,
button,
input,
select,
textarea {
  font-family: Calibri, "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Calibri, "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif !important;
}

/* Extra Small Mobile (480px and below) */
@media (max-width: 480px) {
  .page-header {
    padding: 10px 5px;
  }

  #header-img {
    max-width: 120px;
  }

  h1 {
    font-size: 24px;
    padding: 0 10px;
  }

  h2 {
    font-size: 20px;
    padding: 0 10px;
  }

  p {
    font-size: 15px;
    padding: 0 10px;
  }

  body {
    padding: 0 5px;
  }

  .profile__portrait {
    width: 150px;
    height: 150px;
  }

  .contact-card {
    padding: 15px !important;
  }

  #contact-form-section {
    padding: 20px 10px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px 14px;
  }
}

/* Landscape Mobile Orientation */
@media (max-width: 768px) and (orientation: landscape) {
  .page-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
  }

  .navigation-list {
    flex-direction: row;
    gap: 15px;
  }

  .navigation-list__item {
    padding: 8px 16px;
    margin: 0;
  }

  #header-img {
    max-width: 100px;
  }
}

/* Touch Device Optimizations */
@media (pointer: coarse) {
  button,
  .navigation-list__item,
  .contact-link,
  .submit-btn {
    min-height: 44px; /* Apple's recommended touch target size */
    padding: 12px 20px;
  }

  /* Larger tap targets for mobile */
  a {
    padding: 8px 4px;
  }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ========================================== */
/* ENHANCED MODERN DESIGN OVERRIDES */
/* ========================================== */

/* ========================================== */
/* PORTFOLIO-WIDE VISIBILITY ENHANCEMENTS */
/* ========================================== */

/* Global text visibility improvements */
body {
  background: linear-gradient(
    135deg,
    #0c0c0c 0%,
    #1a1a1a 50%,
    #0f0f23 100%
  ) !important;
  color: #ffffff !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Universal text color fixes */
* {
  color: inherit;
}

/* All paragraphs - maximum visibility */
p {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin-bottom: 15px !important;
}

/* All headings - gradient text with fallback */
h1,
h2,
h3,
h4,
h5,
h6 {
  background: linear-gradient(135deg, #61dafb, #4caf50) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  /* Fallback for browsers that don't support background-clip */
  color: #61dafb !important;
}

/* Specific heading overrides for better visibility */
h1 {
  font-size: 2.5em !important;
}

h2 {
  font-size: 2em !important;
  color: #61dafb !important;
}

h3 {
  font-size: 1.5em !important;
  color: #4caf50 !important;
}

/* All labels and form elements */
label,
.standard-label {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 1.1em !important;
}

/* All links */
a {
  color: #61dafb !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: #4caf50 !important;
  text-decoration: underline !important;
}

/* List items */
li {
  color: #f0f0f0 !important;
  margin-bottom: 8px !important;
}

/* Button text */
button {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Form inputs */
input,
textarea,
select {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-size: 1em !important;
  margin: 8px 0 !important;
  width: 100% !important;
  max-width: 400px !important;
  box-sizing: border-box !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #4caf50 !important;
  outline: none !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  font-style: italic !important;
}

/* Enhanced button styling */
button,
input[type="submit"] {
  background: linear-gradient(135deg, #4caf50, #45a049) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 25px !important;
  border-radius: 8px !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3) !important;
}

button:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, #45a049, #4caf50) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4) !important;
}

/* About page specific fixes */
#about-main p {
  color: #ffffff !important;
  font-size: 1.1em !important;
}

/* Index page specific fixes */
#index-main h1 {
  color: #61dafb !important;
  text-align: center !important;
  font-size: 3em !important;
}

/* Mobile heading fixes for index page */
@media (max-width: 768px) {
  #index-main h1 {
    font-size: 2.2em !important;
    margin-bottom: 20px !important;
    padding: 0 10px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }
}

@media (max-width: 480px) {
  #index-main h1 {
    font-size: 1.8em !important;
    margin-bottom: 15px !important;
  }
}

@media (max-width: 320px) {
  #index-main h1 {
    font-size: 1.5em !important;
  }
}

#index-contact-form > h1 {
  color: #ffffff !important;
}

/* Contact page specific fixes */
#contact-main p,
#contact-main div {
  color: #ffffff !important;
  font-size: 1.1em !important;
}

/* Footer text */
footer,
.page-footer {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding: 3rem 2rem !important;
  margin-top: 4rem !important;
  text-align: center !important;
  border-radius: 20px 20px 0 0 !important;
}

footer h1,
.page-footer h1 {
  color: #2c3e50 !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
  font-size: 1.5rem !important;
}

.social-links {
  display: flex !important;
  justify-content: center !important;
  gap: 1rem !important;
  margin-bottom: 2rem !important;
}

.social-links a {
  background: rgba(52, 152, 219, 0.1) !important;
  border-radius: 50% !important;
  padding: 1rem !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.social-links a:hover {
  background: rgba(52, 152, 219, 0.2) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3) !important;
}

/* Social media icon styling for better visibility */
.social-links img {
  width: 30px !important;
  height: 30px !important;
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%)
    hue-rotate(346deg) brightness(104%) contrast(97%) !important;
  transition: all 0.3s ease !important;
}

/* 360 degree rotation animation for footer icons */
@keyframes rotateFooterIcon {
  from {
    transform: scale(1.1) rotate(0deg);
  }
  to {
    transform: scale(1.1) rotate(360deg);
  }
}

.social-links a:hover img {
  filter: brightness(0) saturate(100%) invert(100%) !important;
  animation: rotateFooterIcon 0.6s ease-in-out !important;
}

footer a,
.page-footer a {
  color: #2c3e50 !important;
  padding: 0.5rem 1rem !important;
  margin: 0.25rem !important;
  background: transparent !important;
  border-radius: 8px !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

footer a:hover,
.page-footer a:hover {
  background: rgba(52, 152, 219, 0.1) !important;
  color: #3498db !important;
}

.copyright {
  margin-top: 2rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.copyright p {
  color: #7f8c8d !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

/* AGGRESSIVE TEXT COLOR OVERRIDE FOR SKILL CATEGORIES */
.skills-section .skill-category ul li {
  color: #2c3e50 !important;
  list-style: none !important;
  list-style-type: none !important;
}

.skills-section .skill-category ul li:before {
  display: none !important;
}

.skills-section .skill-category li,
.skills-section .skill-category li *:not(strong) {
  color: #2c3e50 !important;
}

/* Skills section visibility */
.skills-section {
  color: #2c3e50 !important;
}

.skill-category {
  color: #2c3e50 !important;
}

.skill-category *,
.skill-category ul,
.skill-category li,
.skill-category li *:not(strong) {
  color: #2c3e50 !important;
}

.skill-category ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.skill-category li {
  list-style: none !important;
  list-style-type: none !important;
}

.skill-category h4 {
  color: white !important;
  border-bottom: 2px solid #4caf50 !important;
  padding-bottom: 8px !important;
  margin-bottom: 20px !important;
  font-weight: 700 !important;
  font-size: 1.3em !important;
  background: linear-gradient(135deg, #4caf50, #45a049) !important;
  padding: 12px 15px 12px 15px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important;
}

.skill-list li {
  color: #f0f0f0 !important;
  padding: 5px 0 !important;
}

/* Table text visibility */
table,
td,
th {
  color: #27ae60 !important;
  border: 1px solid rgba(39, 174, 96, 0.3) !important;
}

th {
  background: rgba(39, 174, 96, 0.2) !important;
  font-weight: bold !important;
  color: #2ecc71 !important;
}

td {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #27ae60 !important;
}

/* Portfolio-wide visibility END */

/* Enhanced Global Styles & Modern Design */
* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(
    135deg,
    #0c0c0c 0%,
    #1a1a1a 50%,
    #0f0f23 100%
  ) !important;
  color: #ffffff !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Enhanced Navigation */
.navigation-list {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 15px !important;
  padding: 15px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.navigation-list__item {
  margin: 0 15px !important;
}

.navigation-list__item a {
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.navigation-list__item a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(76, 175, 80, 0.4),
    transparent
  );
  transition: left 0.5s;
}

.navigation-list__item a:hover::before {
  left: 100%;
}

.navigation-list__item a:hover,
.navigation-list__item--active a {
  background: linear-gradient(135deg, #4caf50, #45a049) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4) !important;
}

/* Enhanced Headers */
h1,
h2,
h3,
h4,
h5,
h6 {
  background: linear-gradient(135deg, #61dafb, #4caf50) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

.page-header {
  text-align: center !important;
  padding: 60px 0 !important;
  background: linear-gradient(
    135deg,
    rgba(97, 218, 251, 0.1),
    rgba(76, 175, 80, 0.1)
  ) !important;
  border-radius: 20px !important;
  margin-bottom: 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.page-header h1 {
  font-size: 3.5em !important;
  margin-bottom: 15px !important;
}

/* Enhanced Grid Layout */
.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
  grid-gap: 30px !important;
  padding: 20px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

.grid__item {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  ) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 30px !important;
  transition: all 0.4s ease !important;
  position: relative;
  overflow: hidden;
}

.grid__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4caf50, #61dafb, #ff6b6b);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.grid__item:hover::before {
  opacity: 1;
}

.grid__item:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(76, 175, 80, 0.5) !important;
}

.grid__item h2 {
  font-size: 1.8em !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.4) !important;
  padding: 12px !important;
  border-radius: 8px !important;
}

/* Enhanced Project Goal */
.project-goal {
  background: rgba(255, 255, 255, 0.7) !important;
  border-left: 4px solid #4caf50 !important;
  padding: 20px !important;
  border-radius: 12px !important;
  margin-bottom: 20px !important;
  font-style: italic;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.project-goal strong {
  color: #2d5016 !important;
  font-size: 1.1em !important;
  font-weight: 700 !important;
}

/* Enhanced Tech Stack */
.tech-stack {
  margin: 25px 0 !important;
}

.tech-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 15px !important;
}

.tech-tag {
  background: linear-gradient(135deg, #4caf50, #45a049) !important;
  color: white !important;
  padding: 8px 16px !important;
  border-radius: 25px !important;
  font-size: 0.85em !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3) !important;
  transition: all 0.3s ease !important;
}

.tech-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(76, 175, 80, 0.5) !important;
}

/* Enhanced Project Links */
.project-links {
  display: flex !important;
  gap: 15px !important;
  margin-top: 25px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.project-links a {
  text-decoration: none !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  flex: 1 !important;
  min-width: 120px !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.github-link {
  background: linear-gradient(135deg, #333, #555) !important;
  color: white !important;
  border: 2px solid #666 !important;
}

.demo-link {
  background: linear-gradient(135deg, #4caf50, #45a049) !important;
  color: white !important;
  border: 2px solid #4caf50 !important;
}

.docs-link {
  background: linear-gradient(135deg, #61dafb, #4db8d4) !important;
  color: white !important;
  border: 2px solid #61dafb !important;
}

.project-links a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.github-link:hover {
  background: linear-gradient(135deg, #555, #777) !important;
  box-shadow: 0 8px 20px rgba(85, 85, 85, 0.4) !important;
}

.demo-link:hover {
  background: linear-gradient(135deg, #45a049, #4caf50) !important;
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.5) !important;
}

.docs-link:hover {
  background: linear-gradient(135deg, #4db8d4, #61dafb) !important;
  box-shadow: 0 8px 20px rgba(97, 218, 251, 0.5) !important;
}

/* Enhanced Project Materials */
.project-materials {
  margin: 25px 0 !important;
  background: linear-gradient(
    135deg,
    rgba(97, 218, 251, 0.1),
    rgba(76, 175, 80, 0.1)
  ) !important;
  padding: 20px !important;
  border-radius: 12px !important;
  border-left: 4px solid #61dafb !important;
  backdrop-filter: blur(10px) !important;
}

.project-materials h4 {
  color: #0f172a !important;
  margin-bottom: 15px !important;
  font-size: 1.3em !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.4) !important;
  padding: 10px 15px !important;
  border-radius: 8px !important;
}

/* Tech stack headings */
.tech-stack h4 {
  color: #0f172a !important;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
}

/* All h4 elements in grid items */
.grid__item h4 {
  color: #0f172a !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.3) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  margin-bottom: 12px !important;
}

.project-materials ul {
  list-style: none !important;
  padding: 0 !important;
}

.project-materials li {
  color: #1a202c !important;
  margin-bottom: 10px !important;
  padding: 8px 12px 8px 25px !important;
  position: relative;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
}

.project-materials li:before {
  content: "" !important;
  color: #4caf50 !important;
  position: absolute;
  left: 0 !important;
  font-weight: bold !important;
}

/* Enhanced Paragraph Styles - Work Page Override */
[data-page="work"] p {
  color: #1a202c !important;
  line-height: 1.6 !important;
  margin-bottom: 15px !important;
  font-weight: 500 !important;
  font-size: 1.05em !important;
  background: rgba(255, 255, 255, 0.2) !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
}

/* Enhanced Text Contrast - Ultra Readable */
.grid__item p {
  color: #1a202c !important;
  font-size: 1.1em !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 18px !important;
  padding: 0 5px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px !important;
  padding: 12px !important;
}

.project-goal p {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* WORK PAGE ULTRA-READABLE TEXT OVERRIDES */
[data-page="work"] .grid__item,
[data-page="work"] .grid__item *:not(.tech-tag):not(.project-links a) {
  color: #0f172a !important;
}

[data-page="work"] .grid__item .tech-tag {
  background: linear-gradient(135deg, #2d5016, #4caf50) !important;
  color: white !important;
  font-weight: 600 !important;
}

[data-page="work"] .project-materials {
  background: rgba(255, 255, 255, 0.6) !important;
  border-left: 4px solid #4caf50 !important;
}

/* WORK PAGE HOVER EFFECTS - Clear Visual Distinction */
[data-page="work"] .grid__item:hover {
  background-color: #4caf50 !important;
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 40px rgba(76, 175, 80, 0.4) !important;
  border-color: rgba(76, 175, 80, 0.8) !important;
}

[data-page="work"] .grid__item:hover,
[data-page="work"] .grid__item:hover *:not(.tech-tag):not(.project-links a) {
  color: white !important;
}

[data-page="work"] .grid__item:hover h2 {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

[data-page="work"] .grid__item:hover h4 {
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

[data-page="work"] .grid__item:hover p {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

[data-page="work"] .grid__item:hover .project-goal {
  background: rgba(255, 255, 255, 0.2) !important;
  border-left: 4px solid white !important;
}

[data-page="work"] .grid__item:hover .project-goal strong {
  color: white !important;
}

[data-page="work"] .grid__item:hover .project-materials {
  background: rgba(255, 255, 255, 0.15) !important;
  border-left: 4px solid white !important;
}

[data-page="work"] .grid__item:hover .project-materials li {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

/* WORK PAGE BUTTON COLORS - Visible in both normal and hover states */
[data-page="work"] .github-link {
  background: linear-gradient(135deg, #2c3e50, #34495e) !important;
  color: white !important;
  border: 2px solid #34495e !important;
  font-weight: 600 !important;
}

[data-page="work"] .demo-link {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  color: white !important;
  border: 2px solid #e74c3c !important;
  font-weight: 600 !important;
}

[data-page="work"] .docs-link {
  background: linear-gradient(135deg, #3498db, #2980b9) !important;
  color: white !important;
  border: 2px solid #3498db !important;
  font-weight: 600 !important;
}

/* Work page button hover effects */
[data-page="work"] .github-link:hover {
  background: linear-gradient(135deg, #34495e, #2c3e50) !important;
  box-shadow: 0 8px 20px rgba(52, 73, 94, 0.4) !important;
  transform: translateY(-3px) !important;
}

[data-page="work"] .demo-link:hover {
  background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
  box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4) !important;
  transform: translateY(-3px) !important;
}

[data-page="work"] .docs-link:hover {
  background: linear-gradient(135deg, #2980b9, #3498db) !important;
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4) !important;
  transform: translateY(-3px) !important;
}

/* Ensure buttons remain prominent during grid item hover */
[data-page="work"] .grid__item:hover .github-link {
  background: linear-gradient(135deg, #2c3e50, #34495e) !important;
  border: 2px solid #ecf0f1 !important;
}

[data-page="work"] .grid__item:hover .demo-link {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  border: 2px solid #ecf0f1 !important;
}

[data-page="work"] .grid__item:hover .docs-link {
  background: linear-gradient(135deg, #3498db, #2980b9) !important;
  border: 2px solid #ecf0f1 !important;
}

/* COMPREHENSIVE WORK PAGE BUTTON FIXES - All Button Types */

/* API Link (Live Demo) */
[data-page="work"] .api-link {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  color: white !important;
  border: 2px solid #e74c3c !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

[data-page="work"] .api-link:hover {
  background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
  box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4) !important;
  transform: translateY(-3px) !important;
}

[data-page="work"] .grid__item:hover .api-link {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  border: 2px solid #ecf0f1 !important;
  color: white !important;
}

/* Generic project links (buttons without specific classes) */
[data-page="work"]
  .project-links
  a:not(.github-link):not(.demo-link):not(.docs-link):not(.api-link) {
  background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
  color: white !important;
  border: 2px solid #9b59b6 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

[data-page="work"]
  .project-links
  a:not(.github-link):not(.demo-link):not(.docs-link):not(.api-link):hover {
  background: linear-gradient(135deg, #8e44ad, #9b59b6) !important;
  box-shadow: 0 8px 20px rgba(155, 89, 182, 0.4) !important;
  transform: translateY(-3px) !important;
}

[data-page="work"]
  .grid__item:hover
  .project-links
  a:not(.github-link):not(.demo-link):not(.docs-link):not(.api-link) {
  background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
  border: 2px solid #ecf0f1 !important;
  color: white !important;
}

/* Ensure all project-links buttons have consistent base styling */
[data-page="work"] .project-links a {
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
  margin: 4px !important;
  text-align: center !important;
  min-width: 120px !important;
}

/* ULTIMATE BUTTON VISIBILITY FIX - Override any conflicting styles */
[data-page="work"] .grid__item .project-links a {
  background: linear-gradient(135deg, #2c3e50, #34495e) !important;
  color: white !important;
  border: 2px solid #34495e !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Ultimate hover state for all buttons */
[data-page="work"] .grid__item:hover .project-links a {
  color: white !important;
  border: 2px solid #ecf0f1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Enhanced list items visibility */
.project-materials li,
.api-features li,
.api-tech-details li {
  color: #1a202c !important;
  background: rgba(255, 255, 255, 0.2) !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}

.endpoint p {
  color: #4a5568 !important;
}

/* Enhanced Footer */
footer {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.9),
    rgba(26, 26, 26, 0.9)
  ) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 40px 0 !important;
  margin-top: 60px !important;
}

footer h1 {
  color: #61dafb !important;
}

/* Modern Glassmorphism Effects */
.page-header,
.grid__item,
.project-materials,
.api-documentation {
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Smooth Animations */
.grid__item,
.project-links a,
.tech-tag,
.navigation-list__item a {
  transition: all 0.3s ease !important;
}

/* Enhanced Work Page Intro */
.work-intro {
  text-align: center !important;
  padding: 80px 20px !important;
  background: linear-gradient(
    135deg,
    rgba(97, 218, 251, 0.1),
    rgba(76, 175, 80, 0.1)
  ) !important;
  border-radius: 25px !important;
  margin: 40px auto !important;
  max-width: 1200px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(15px) !important;
}

.work-intro h1 {
  font-size: 4em !important;
  margin-bottom: 20px !important;
  background: linear-gradient(135deg, #61dafb, #4caf50, #ff6b6b) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.work-subtitle {
  font-size: 1.4em !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 40px !important;
  font-style: italic !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.work-stats {
  display: flex !important;
  justify-content: center !important;
  gap: 60px !important;
  margin-top: 50px !important;
  flex-wrap: wrap !important;
}

.stat-item {
  text-align: center !important;
  padding: 20px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 15px !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  min-width: 120px !important;
  transition: transform 0.3s ease !important;
}

.stat-item:hover {
  transform: translateY(-5px) !important;
  background: rgba(76, 175, 80, 0.1) !important;
}

.stat-number {
  display: block !important;
  font-size: 3em !important;
  font-weight: bold !important;
  background: linear-gradient(135deg, #4caf50, #61dafb) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 5px !important;
}

.stat-label {
  display: block !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1.1em !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Mobile Responsive Enhancements */
@media screen and (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important;
    grid-gap: 20px !important;
    padding: 15px !important;
  }

  .grid__item {
    padding: 20px !important;
  }

  .page-header h1 {
    font-size: 2.5em !important;
  }

  .project-links {
    flex-direction: column !important;
  }

  .project-links a {
    margin-bottom: 10px !important;
  }

  /* Mobile text visibility enhancements */
  p {
    font-size: 1.1em !important;
    line-height: 1.8 !important;
  }

  h1 {
    font-size: 2.2em !important;
  }

  h2 {
    font-size: 1.8em !important;
  }

  /* Mobile navigation */
  .navigation-list {
    flex-direction: column !important;
    text-align: center !important;
  }

  .navigation-list__item {
    margin: 5px 0 !important;
  }

  /* Mobile main content */
  main,
  #about-main,
  #contact-main,
  #index-main {
    padding: 20px !important;
    margin: 10px !important;
  }
}

@media screen and (max-width: 480px) {
  .page-header {
    padding: 40px 0 !important;
  }

  .page-header h1 {
    font-size: 2em !important;
  }

  .grid__item {
    padding: 15px !important;
  }

  .grid__item h2 {
    font-size: 1.5em !important;
  }

  .navigation-list__item a {
    padding: 8px 15px !important;
    font-size: 0.9em !important;
  }

  /* Extra small screen text improvements */
  p {
    font-size: 1em !important;
  }

  input,
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  button {
    padding: 15px 20px !important;
    font-size: 1em !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #ffffff !important;
    font-weight: bold !important;
  }

  .grid__item {
    border: 2px solid #ffffff !important;
  }
}

/* Dark mode support (already implemented but ensuring consistency) */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(
      135deg,
      #0c0c0c 0%,
      #1a1a1a 50%,
      #0f0f23 100%
    ) !important;
  }
}

/* ========================================== */
/* MODERN PORTFOLIO DESIGN OVERHAUL */
/* ========================================== */

/* Global Modern Design Reset */
* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(
    135deg,
    #0a0a0a 0%,
    #1e1e1e 50%,
    #2d1b69 100%
  ) !important;
  color: #ffffff !important;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Enhanced Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  background: linear-gradient(135deg, #64ffda, #1de9b6, #00bcd4) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

/* Paragraphs - High Visibility */
p {
  color: #e8eaed !important;
  font-size: 1.05em !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin-bottom: 16px !important;
}

/* Modern Navigation */
.navigation-list {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.navigation-list__item a {
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 14px 28px !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 500 !important;
  font-size: 1.1em !important;
  position: relative;
  overflow: hidden;
}

.navigation-list__item a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(100, 255, 218, 0.3),
    transparent
  );
  transition: left 0.6s ease;
}

.navigation-list__item a:hover::before {
  left: 100%;
}

.navigation-list__item a:hover,
.navigation-list__item--active a {
  background: linear-gradient(135deg, #64ffda, #1de9b6) !important;
  color: #000 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4) !important;
}

/* Enhanced Grid Layout */
.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
  grid-gap: 35px !important;
  padding: 30px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

.grid__item {
  background: linear-gradient(
    135deg,
    rgba(15, 15, 45, 0.9),
    rgba(25, 25, 55, 0.8),
    rgba(35, 35, 65, 0.9)
  ) !important;
  backdrop-filter: blur(20px) !important;
  border: 2px solid rgba(100, 255, 218, 0.2) !important;
  border-radius: 25px !important;
  padding: 40px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.grid__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #64ffda, #a8edea, #fed6e3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.grid__item::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(100, 255, 218, 0.03),
    transparent
  );
  animation: shimmerGrid 8s ease-in-out infinite;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes shimmerGrid {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.grid__item:hover::before,
.grid__item:hover::after {
  opacity: 1;
}

.grid__item:hover {
  transform: translateY(-15px) scale(1.02) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4),
    0 15px 30px rgba(100, 255, 218, 0.2) !important;
  border-color: rgba(100, 255, 218, 0.5) !important;
  background: linear-gradient(
    135deg,
    rgba(20, 20, 55, 0.95),
    rgba(30, 30, 65, 0.9),
    rgba(40, 40, 75, 0.95)
  ) !important;
}

.grid__item h2 {
  font-size: 1.9em !important;
  margin-bottom: 25px !important;
  text-align: center !important;
}

/* Project Goal Styling */
.project-goal {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.15),
    rgba(29, 233, 182, 0.15)
  ) !important;
  border-left: 4px solid #64ffda !important;
  padding: 25px !important;
  border-radius: 15px !important;
  margin-bottom: 25px !important;
  font-style: italic;
}

.project-goal strong {
  color: #64ffda !important;
  font-size: 1.15em !important;
}

/* Tech Stack Enhancement */
.tech-stack {
  margin: 30px 0 !important;
}

.tech-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

.tech-tag {
  background: linear-gradient(135deg, #1de9b6, #00bcd4) !important;
  color: #000 !important;
  padding: 10px 20px !important;
  border-radius: 30px !important;
  font-size: 0.9em !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(29, 233, 182, 0.3) !important;
  transition: all 0.3s ease !important;
}

.tech-tag:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(29, 233, 182, 0.5) !important;
}

/* Enhanced Project Links */
.project-links {
  display: flex !important;
  gap: 18px !important;
  margin-top: 30px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.project-links a {
  text-decoration: none !important;
  padding: 15px 30px !important;
  border-radius: 15px !important;
  font-weight: 600 !important;
  text-align: center !important;
  flex: 1 !important;
  min-width: 140px !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
  font-size: 1em !important;
}

.github-link {
  background: linear-gradient(135deg, #333, #555) !important;
  color: white !important;
  border: 2px solid #666 !important;
}

.api-link {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
  color: white !important;
  border: 2px solid #ff6b6b !important;
}

.docs-link {
  background: linear-gradient(135deg, #64ffda, #1de9b6) !important;
  color: #000 !important;
  border: 2px solid #64ffda !important;
}

.project-links a:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3) !important;
}

/* API Documentation Styling */
.api-documentation {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6),
    rgba(45, 27, 105, 0.4)
  ) !important;
  border-radius: 20px !important;
  padding: 35px !important;
  margin-top: 30px !important;
  border: 1px solid rgba(100, 255, 218, 0.2) !important;
  backdrop-filter: blur(10px) !important;
}

.api-documentation h4 {
  color: #64ffda !important;
  font-size: 1.5em !important;
  margin-bottom: 25px !important;
  text-align: center !important;
}

.api-section {
  margin-bottom: 30px !important;
  padding: 25px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 15px !important;
  border-left: 4px solid #1de9b6 !important;
}

.api-section h5 {
  color: #1de9b6 !important;
  font-size: 1.3em !important;
  margin-bottom: 20px !important;
}

.endpoint {
  margin-bottom: 20px !important;
  padding: 15px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 10px !important;
  border-left: 3px solid #00bcd4 !important;
}

.endpoint strong {
  background: linear-gradient(135deg, #64ffda, #1de9b6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: "Courier New", monospace !important;
  font-size: 1.1em !important;
}

.endpoint p {
  color: #e8eaed !important;
  margin: 8px 0 !important;
  font-size: 0.95em !important;
}

.endpoint pre {
  background: rgba(0, 0, 0, 0.5) !important;
  padding: 10px !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  margin-top: 10px !important;
}

.endpoint code {
  color: #64ffda !important;
  font-family: "Courier New", monospace !important;
  font-size: 0.9em !important;
}

.api-features {
  background: rgba(100, 255, 218, 0.1) !important;
  padding: 25px !important;
  border-radius: 15px !important;
  border-left: 4px solid #64ffda !important;
}

.api-features h5 {
  color: #64ffda !important;
  margin-bottom: 20px !important;
  font-size: 1.3em !important;
}

.api-features ul {
  list-style: none !important;
  padding: 0 !important;
}

.api-features li {
  color: #e8eaed !important;
  margin-bottom: 12px !important;
  padding-left: 25px !important;
  position: relative;
}

.api-features li:before {
  content: ">" !important;
  color: #1de9b6 !important;
  position: absolute;
  left: 0 !important;
  font-weight: bold !important;
}

.api-features li strong {
  color: #64ffda !important;
}

/* Enhanced Project Materials */
.project-materials {
  margin: 30px 0 !important;
  background: linear-gradient(
    135deg,
    rgba(29, 233, 182, 0.1),
    rgba(0, 188, 212, 0.1)
  ) !important;
  padding: 25px !important;
  border-radius: 15px !important;
  border-left: 4px solid #1de9b6 !important;
  backdrop-filter: blur(10px) !important;
}

.project-materials h4 {
  color: #1de9b6 !important;
  margin-bottom: 18px !important;
  font-size: 1.3em !important;
}

.project-materials ul {
  list-style: none !important;
  padding: 0 !important;
}

.project-materials li {
  color: #e8eaed !important;
  margin-bottom: 10px !important;
  padding-left: 25px !important;
  position: relative;
}

.project-materials li:before {
  content: ">" !important;
  color: #64ffda !important;
  position: absolute;
  left: 0 !important;
  font-weight: bold !important;
}

/* Mobile Responsive Design */
@media screen and (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important;
    grid-gap: 25px !important;
    padding: 20px !important;
  }

  .grid__item {
    padding: 25px !important;
  }

  .project-links {
    flex-direction: column !important;
  }

  .project-links a {
    margin-bottom: 12px !important;
  }

  .api-documentation {
    padding: 25px !important;
  }

  .api-section {
    padding: 20px !important;
  }
}

@media screen and (max-width: 480px) {
  .grid__item {
    padding: 20px !important;
  }

  .grid__item h2 {
    font-size: 1.6em !important;
  }

  .navigation-list__item a {
    padding: 10px 20px !important;
    font-size: 1em !important;
  }

  .api-documentation {
    padding: 20px !important;
  }
}

/* ========================================== */
/* ULTRA-STYLISH PORTFOLIO ENHANCEMENT */
/* ========================================== */

/* Enhanced Font Visibility & Ultra-Modern Styling */

/* Global Typography Enhancements */
* {
  font-family: "Inter", "Segoe UI", "SF Pro Display", -apple-system,
    BlinkMacSystemFont, sans-serif !important;
}

body {
  background: radial-gradient(
      circle at 20% 50%,
      rgba(120, 119, 198, 0.3) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 118, 117, 0.3) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 80%,
      rgba(255, 177, 153, 0.2) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, #0a0a23 0%, #1a1a2e 50%, #16213e 100%) !important;
  color: #ffffff !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
}

/* Animated Background Particles */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      circle at 25% 25%,
      #64ffda 1px,
      transparent 1px
    ),
    radial-gradient(circle at 75% 75%, #ff6b6b 1px, transparent 1px);
  background-size: 100px 100px, 150px 150px;
  opacity: 0.1;
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Ultra-Enhanced Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff !important;
  font-weight: 800 !important;
  margin-bottom: 25px !important;
  position: relative;
  /* Remove background-clip to ensure solid colors */
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  letter-spacing: -0.02em !important;
  color: #64ffda !important;
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
  letter-spacing: -0.01em !important;
  color: #a8edea !important;
}

h3 {
  font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
  color: #fed6e3 !important;
}

h4 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important;
  color: #64ffda !important;
}

/* Ultra-Visible Paragraphs */
p {
  color: #f8fafc !important;
  font-size: clamp(1rem, 2vw, 1.1rem) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.01em !important;
}

/* Enhanced Links */
a {
  color: #64ffda !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
}

a:hover {
  color: #a8edea !important;
}

/* Ultra-Modern Navigation */
.page-header {
  background: rgba(10, 10, 35, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(100, 255, 218, 0.2) !important;
  padding: 25px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

.navigation-list {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.1),
    rgba(168, 237, 234, 0.1)
  ) !important;
  backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(100, 255, 218, 0.3) !important;
  border-radius: 25px !important;
  padding: 15px 25px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.navigation-list__item a {
  color: #f8fafc !important;
  text-decoration: none !important;
  padding: 16px 32px !important;
  border-radius: 18px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 600 !important;
  font-size: 1.05em !important;
  position: relative;
  overflow: hidden;
}

.navigation-list__item a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(100, 255, 218, 0.4),
    transparent
  );
  transition: left 0.6s ease;
}

.navigation-list__item a:hover::before {
  left: 100%;
}

.navigation-list__item a:hover,
.navigation-list__item--active a {
  background: linear-gradient(135deg, #64ffda 0%, #a8edea 100%) !important;
  color: #0a0a23 !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(100, 255, 218, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Ultra-Enhanced Grid System */
.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
  grid-gap: 40px !important;
  padding: 40px !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
}

.grid__item {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(100, 255, 218, 0.05) 100%
  ) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(100, 255, 218, 0.2) !important;
  border-radius: 30px !important;
  padding: 40px !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.grid__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #64ffda, #a8edea, #fed6e3);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.grid__item::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(100, 255, 218, 0.1),
    transparent
  );
  transform: rotate(-45deg);
  transition: transform 0.6s ease;
  opacity: 0;
}

.grid__item:hover::before {
  opacity: 1;
}

.grid__item:hover::after {
  opacity: 1;
  transform: rotate(-45deg) translateX(100%);
}

.grid__item:hover {
  transform: translateY(-15px) scale(1.02) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3),
    0 12px 24px rgba(100, 255, 218, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(100, 255, 218, 0.4) !important;
}

.grid__item h2 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  margin-bottom: 30px !important;
  text-align: center !important;
  position: relative;
}

/* Ultra-Stylish Project Elements */
.project-goal {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.15) 0%,
    rgba(168, 237, 234, 0.1) 50%,
    rgba(254, 214, 227, 0.1) 100%
  ) !important;
  border-left: 5px solid #64ffda !important;
  border-radius: 20px !important;
  padding: 30px !important;
  margin-bottom: 30px !important;
  position: relative;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 16px rgba(100, 255, 218, 0.1) !important;
}

.project-goal::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5em;
  opacity: 0.7;
}

.project-goal strong {
  color: #64ffda !important;
  font-size: 1.2em !important;
  font-weight: 700 !important;
}

.project-goal p {
  color: #f8fafc !important;
  margin-top: 10px !important;
}

/* Ultra-Modern Tech Stack */
.tech-stack h4 {
  color: #a8edea !important;
  font-size: 1.3em !important;
  margin-bottom: 20px !important;
  position: relative;
}

.tech-stack h4::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #64ffda, #a8edea);
  border-radius: 2px;
}

.tech-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  margin-top: 25px !important;
}

.tech-tag {
  background: linear-gradient(135deg, #64ffda 0%, #a8edea 100%) !important;
  color: #0a0a23 !important;
  padding: 12px 24px !important;
  border-radius: 25px !important;
  font-size: 0.9em !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.tech-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.tech-tag:hover::before {
  left: 100%;
}

.tech-tag:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(100, 255, 218, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Ultra-Enhanced Project Links */
.project-links {
  display: flex !important;
  gap: 20px !important;
  margin-top: 35px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.project-links a {
  text-decoration: none !important;
  padding: 18px 35px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
  flex: 1 !important;
  min-width: 160px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  font-size: 1em !important;
  border: 2px solid transparent !important;
}

.github-link {
  background: linear-gradient(135deg, #24292e 0%, #444d56 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(36, 41, 46, 0.3) !important;
}

.github-link:hover {
  background: linear-gradient(135deg, #444d56 0%, #586069 100%) !important;
  border-color: #64ffda !important;
  box-shadow: 0 8px 25px rgba(36, 41, 46, 0.4) !important;
}

.api-link {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3) !important;
}

.api-link:hover {
  background: linear-gradient(135deg, #ee5a24 0%, #e55039 100%) !important;
  border-color: #fed6e3 !important;
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4) !important;
}

.docs-link {
  background: linear-gradient(135deg, #64ffda 0%, #a8edea 100%) !important;
  color: #0a0a23 !important;
  box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3) !important;
}

.docs-link:hover {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
  border-color: #64ffda !important;
  box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4) !important;
}

.project-links a:hover {
  transform: translateY(-5px) scale(1.05) !important;
}

/* Ultra-Enhanced Labels and Form Elements */
label,
.standard-label {
  color: #f8fafc !important;
  font-weight: 600 !important;
  font-size: 1.1em !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Enhanced Form Inputs */
input,
textarea,
select {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(100, 255, 218, 0.05)
  ) !important;
  border: 2px solid rgba(100, 255, 218, 0.3) !important;
  color: #f8fafc !important;
  padding: 15px 20px !important;
  border-radius: 15px !important;
  font-size: 1em !important;
  margin: 10px 0 !important;
  width: 100% !important;
  max-width: 400px !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #64ffda !important;
  outline: none !important;
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(100, 255, 218, 0.1)
  ) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(248, 250, 252, 0.6) !important;
  font-style: italic !important;
}

/* Ultra-Enhanced Buttons */
button,
input[type="submit"] {
  background: linear-gradient(135deg, #64ffda 0%, #a8edea 100%) !important;
  color: #0a0a23 !important;
  border: none !important;
  padding: 16px 32px !important;
  border-radius: 15px !important;
  font-size: 1.1em !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  position: relative;
  overflow: hidden;
}

button::before,
input[type="submit"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

button:hover::before,
input[type="submit"]:hover::before {
  left: 100%;
}

button:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Enhanced List Items */
li {
  color: #f8fafc !important;
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
}

/* Enhanced Footer */
footer,
.page-footer {
  background: linear-gradient(
    135deg,
    rgba(10, 10, 35, 0.95),
    rgba(26, 26, 46, 0.95)
  ) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(100, 255, 218, 0.2) !important;
  padding: 60px 0 !important;
  margin-top: 80px !important;
}

footer h1,
.page-footer h1 {
  color: #64ffda !important;
  text-align: center !important;
  font-size: 2em !important;
  margin-bottom: 30px !important;
}

footer a,
.page-footer a {
  color: #f8fafc !important;
  padding: 12px 20px !important;
  margin: 8px !important;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.1),
    rgba(168, 237, 234, 0.1)
  ) !important;
  border-radius: 12px !important;
  display: inline-block !important;
  border: 1px solid rgba(100, 255, 218, 0.2) !important;
  transition: all 0.3s ease !important;
}

footer a:hover,
.page-footer a:hover {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.2),
    rgba(168, 237, 234, 0.2)
  ) !important;
  border-color: rgba(100, 255, 218, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Enhanced Table Elements */
table,
td,
th {
  color: #f8fafc !important;
  border: 1px solid rgba(100, 255, 218, 0.3) !important;
}

th {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.2),
    rgba(168, 237, 234, 0.2)
  ) !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
}

td {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Enhanced Profile Image */
.profile__portrait {
  border: 4px solid #64ffda !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  display: block !important;
  margin: 20px auto !important;
  max-width: 250px !important;
  transition: all 0.3s ease !important;
}

.profile__portrait:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 12px 35px rgba(100, 255, 218, 0.5),
    0 6px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Ultra-Enhanced API Documentation */
.api-documentation {
  background: linear-gradient(
    135deg,
    rgba(10, 10, 35, 0.8) 0%,
    rgba(26, 26, 46, 0.6) 50%,
    rgba(45, 27, 105, 0.4) 100%
  ) !important;
  border-radius: 25px !important;
  padding: 40px !important;
  margin-top: 40px !important;
  border: 2px solid rgba(100, 255, 218, 0.3) !important;
  backdrop-filter: blur(20px) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.api-documentation::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(100, 255, 218, 0.05),
    transparent
  );
  animation: shimmer 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.api-documentation h4 {
  color: #64ffda !important;
  font-size: 1.8em !important;
  margin-bottom: 35px !important;
  text-align: center !important;
  position: relative;
  font-weight: 800 !important;
}

.api-documentation h4::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #64ffda, #a8edea, #fed6e3);
  border-radius: 2px;
}

.api-section {
  margin-bottom: 35px !important;
  padding: 30px !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(100, 255, 218, 0.05)
  ) !important;
  border-radius: 20px !important;
  border-left: 5px solid #a8edea !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(100, 255, 218, 0.2) !important;
}

.api-section:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(100, 255, 218, 0.2) !important;
  border-color: rgba(100, 255, 218, 0.4) !important;
}

.api-section h5 {
  color: #a8edea !important;
  font-size: 1.4em !important;
  margin-bottom: 25px !important;
  font-weight: 700 !important;
  position: relative;
}

.api-section h5::before {
  content: attr(data-icon);
  margin-right: 10px;
  font-size: 1.2em;
}

.endpoint {
  margin-bottom: 25px !important;
  padding: 20px !important;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4),
    rgba(10, 10, 35, 0.6)
  ) !important;
  border-radius: 15px !important;
  border-left: 4px solid #fed6e3 !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(254, 214, 227, 0.2) !important;
}

.endpoint:hover {
  border-color: rgba(254, 214, 227, 0.4) !important;
  box-shadow: 0 4px 15px rgba(254, 214, 227, 0.2) !important;
}

.endpoint strong {
  background: linear-gradient(135deg, #fed6e3 0%, #64ffda 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: "JetBrains Mono", "Courier New", monospace !important;
  font-size: 1.15em !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.endpoint p {
  color: #f8fafc !important;
  margin: 10px 0 !important;
  font-size: 1em !important;
  line-height: 1.6 !important;
}

.endpoint pre {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6),
    rgba(10, 10, 35, 0.8)
  ) !important;
  padding: 15px 20px !important;
  border-radius: 12px !important;
  overflow-x: auto !important;
  margin-top: 15px !important;
  border: 1px solid rgba(100, 255, 218, 0.2) !important;
  backdrop-filter: blur(5px) !important;
}

.endpoint code {
  color: #64ffda !important;
  font-family: "JetBrains Mono", "Courier New", monospace !important;
  font-size: 0.95em !important;
}

.api-features {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.15),
    rgba(168, 237, 234, 0.1)
  ) !important;
  padding: 30px !important;
  border-radius: 20px !important;
  border-left: 5px solid #64ffda !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(100, 255, 218, 0.3) !important;
}

.api-features h5 {
  color: #64ffda !important;
  margin-bottom: 25px !important;
  font-size: 1.4em !important;
  font-weight: 700 !important;
}

.api-features ul {
  list-style: none !important;
  padding: 0 !important;
}

.api-features li {
  color: #f8fafc !important;
  margin-bottom: 15px !important;
  padding-left: 30px !important;
  position: relative;
  line-height: 1.6 !important;
}

.api-features li:before {
  content: ">" !important;
  color: #a8edea !important;
  position: absolute;
  left: 0 !important;
  font-weight: bold !important;
  font-size: 1.2em !important;
}

.api-features li strong {
  color: #64ffda !important;
  font-weight: 700 !important;
}

/* Enhanced Project Materials */
.project-materials {
  margin: 35px 0 !important;
  background: linear-gradient(
    135deg,
    rgba(168, 237, 234, 0.1),
    rgba(254, 214, 227, 0.1)
  ) !important;
  padding: 30px !important;
  border-radius: 20px !important;
  border-left: 5px solid #a8edea !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(168, 237, 234, 0.2) !important;
  transition: all 0.3s ease !important;
}

.project-materials:hover {
  border-color: rgba(168, 237, 234, 0.4) !important;
  box-shadow: 0 8px 25px rgba(168, 237, 234, 0.2) !important;
}

.project-materials h4 {
  color: #a8edea !important;
  margin-bottom: 25px !important;
  font-size: 1.4em !important;
  font-weight: 700 !important;
  position: relative;
}

.project-materials h4::before {
  content: "";
  margin-right: 10px;
  font-size: 1.2em;
}

.project-materials ul {
  list-style: none !important;
  padding: 0 !important;
}

.project-materials li {
  color: #f8fafc !important;
  margin-bottom: 12px !important;
  padding-left: 30px !important;
  position: relative;
  line-height: 1.6 !important;
  transition: all 0.2s ease !important;
}

.project-materials li:hover {
  color: #64ffda !important;
  transform: translateX(5px) !important;
}

.project-materials li:before {
  content: "" !important;
  color: #fed6e3 !important;
  position: absolute;
  left: 0 !important;
  font-weight: bold !important;
  transition: all 0.2s ease !important;
}

.project-materials li:hover:before {
  color: #64ffda !important;
  transform: translateX(3px) !important;
}

/* Mobile Responsive Enhancements */
@media screen and (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important;
    grid-gap: 30px !important;
    padding: 25px !important;
  }

  .grid__item {
    padding: 30px !important;
  }

  .project-links {
    flex-direction: column !important;
    gap: 15px !important;
  }

  .project-links a {
    margin-bottom: 0 !important;
  }

  .api-documentation {
    padding: 30px !important;
    margin-top: 30px !important;
  }

  .api-section {
    padding: 25px !important;
    margin-bottom: 25px !important;
  }

  .navigation-list {
    padding: 20px !important;
  }

  .navigation-list__item a {
    padding: 12px 24px !important;
    font-size: 1em !important;
  }

  h1 {
    font-size: 2.5rem !important;
  }

  h2 {
    font-size: 1.8rem !important;
  }
}

@media screen and (max-width: 480px) {
  .grid__item {
    padding: 25px !important;
  }

  .grid__item h2 {
    font-size: 1.5rem !important;
  }

  .api-documentation {
    padding: 25px !important;
  }

  .api-section {
    padding: 20px !important;
  }

  .endpoint {
    padding: 15px !important;
  }

  .project-goal {
    padding: 25px !important;
  }

  .project-materials {
    padding: 25px !important;
  }

  .tech-tags {
    gap: 10px !important;
  }

  .tech-tag {
    padding: 10px 18px !important;
    font-size: 0.85em !important;
  }

  input,
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  button {
    padding: 14px 28px !important;
    font-size: 1em !important;
  }

  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }
}

/* ========================================== */
/* GLOBAL FONT VISIBILITY FIXES */
/* ========================================== */

/* Override ALL text elements for maximum visibility */
* {
  color: inherit !important;
}

/* Ensure all body text is visible */
body,
body * {
  color: #f8fafc !important;
}

/* Headings with gradient effects */
h1,
h2,
h3,
h4,
h5,
h6 {
  background: linear-gradient(
    135deg,
    #64ffda 0%,
    #a8edea 50%,
    #fed6e3 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
}

/* Force paragraph visibility */
p,
div,
span,
li,
td,
th {
  color: #f8fafc !important;
}

/* Links with high visibility */
a {
  color: #64ffda !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

a:hover {
  color: #a8edea !important;
}

/* Form elements visibility */
input,
textarea,
select {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 2px solid rgba(100, 255, 218, 0.3) !important;
  color: #f8fafc !important;
  backdrop-filter: blur(10px) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(248, 250, 252, 0.7) !important;
}

/* Labels visibility */
label {
  color: #f8fafc !important;
  font-weight: 600 !important;
}

/* ========================================== */
/* ULTRA-MODERN FOOTER STYLING */
/* ========================================== */

footer,
.page-footer {
  background: linear-gradient(
    135deg,
    rgba(10, 10, 35, 0.9) 0%,
    rgba(26, 26, 46, 0.8) 50%,
    rgba(45, 27, 105, 0.7) 100%
  ) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 2px solid rgba(100, 255, 218, 0.3) !important;
  margin-top: 60px !important;
  padding: 50px 30px !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

footer::before,
.page-footer::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(100, 255, 218, 0.03),
    transparent
  );
  animation: footerShimmer 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes footerShimmer {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Footer heading */
footer h1,
.page-footer h1 {
  color: #ffffff !important;
  font-size: 2.2em !important;
  font-weight: 800 !important;
  margin-bottom: 35px !important;
  position: relative;
  z-index: 2;
  /* Remove background-clip to ensure solid color */
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}

footer h1::after,
.page-footer h1::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #64ffda, #a8edea, #fed6e3);
  border-radius: 2px;
}

/* Social media icons container */
footer .social-links,
.page-footer .social-links {
  display: flex !important;
  justify-content: center !important;
  gap: 25px !important;
  margin: 30px 0 !important;
  flex-wrap: wrap !important;
}

/* Social media icons */
footer img,
.page-footer img {
  width: 45px !important;
  height: 45px !important;
  transition: all 0.3s ease !important;
  /* Remove complex filter, make icons clearly visible */
  filter: brightness(0) invert(1) !important;
  padding: 12px !important;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.2),
    rgba(168, 237, 234, 0.2)
  ) !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
}

footer img:hover,
.page-footer img:hover {
  transform: scale(1.2) rotate(360deg) !important;
  /* Bright white icons on hover */
  filter: brightness(0) invert(1) brightness(1.5) !important;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.4),
    rgba(168, 237, 234, 0.4)
  ) !important;
}

/* Footer navigation links */
footer div,
.page-footer div {
  margin-top: 35px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 30px !important;
  flex-wrap: wrap !important;
}

footer div a,
.page-footer div a {
  color: #f8fafc !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 12px 25px !important;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.1),
    rgba(168, 237, 234, 0.1)
  ) !important;
  border-radius: 25px !important;
  border: 2px solid rgba(100, 255, 218, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

footer div a::before,
.page-footer div a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: all 0.5s ease;
}

footer div a:hover::before,
.page-footer div a:hover::before {
  left: 100%;
}

footer div a:hover,
.page-footer div a:hover {
  color: #64ffda !important;
  border-color: rgba(100, 255, 218, 0.6) !important;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.2),
    rgba(168, 237, 234, 0.2)
  ) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(100, 255, 218, 0.3) !important;
}

/* Footer copyright text */
footer .copyright,
.page-footer .copyright {
  margin-top: 40px !important;
  padding-top: 30px !important;
  border-top: 1px solid rgba(100, 255, 218, 0.2) !important;
  color: rgba(248, 250, 252, 0.8) !important;
  font-size: 0.9em !important;
  position: relative;
  z-index: 2;
}

/* Mobile Footer Adjustments */
@media screen and (max-width: 768px) {
  footer,
  .page-footer {
    padding: 40px 20px !important;
    margin-top: 40px !important;
  }

  footer h1,
  .page-footer h1 {
    font-size: 1.8em !important;
    margin-bottom: 25px !important;
  }

  footer .social-links,
  .page-footer .social-links {
    gap: 20px !important;
    margin: 25px 0 !important;
  }

  footer img,
  .page-footer img {
    width: 40px !important;
    height: 40px !important;
    padding: 10px !important;
    /* Ensure mobile icons are visible */
    filter: brightness(0) invert(1) !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    background: rgba(100, 255, 218, 0.3) !important;
  }

  footer div,
  .page-footer div {
    gap: 15px !important;
    margin-top: 25px !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  footer div a,
  .page-footer div a {
    font-size: 1em !important;
    padding: 10px 20px !important;
    width: auto !important;
    min-width: 150px !important;
    text-align: center !important;
  }
}

@media screen and (max-width: 480px) {
  footer,
  .page-footer {
    padding: 30px 15px !important;
  }

  footer h1,
  .page-footer h1 {
    font-size: 1.5em !important;
  }

  footer img,
  .page-footer img {
    width: 35px !important;
    height: 35px !important;
    padding: 8px !important;
  }

  footer div a,
  .page-footer div a {
    font-size: 0.9em !important;
    padding: 8px 16px !important;
    min-width: 120px !important;
  }
}

/* ========================================== */
/* ABOUT PAGE SPECIFIC FIXES */
/* ========================================== */

/* About page main content */
#about-main,
#about-main * {
  color: #f8fafc !important;
}

#about-main h1,
#about-main h2,
#about-main h3 {
  background: linear-gradient(
    135deg,
    #64ffda 0%,
    #a8edea 50%,
    #fed6e3 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

#about-main p {
  color: #f8fafc !important;
  font-size: 1.1em !important;
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}

#about-main a {
  color: #64ffda !important;
  font-weight: 600 !important;
}

#about-main a:hover {
  color: #a8edea !important;
}

/* Table content visibility */
table,
table * {
  color: #f8fafc !important;
}

th {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.2),
    rgba(168, 237, 234, 0.2)
  ) !important;
  color: #64ffda !important;
  font-weight: 700 !important;
}

td {
  border-color: rgba(100, 255, 218, 0.2) !important;
}

/* Contact form visibility */
#contact-main,
#contact-main * {
  color: #f8fafc !important;
}

#contact-main h1,
#contact-main h2 {
  background: linear-gradient(
    135deg,
    #64ffda 0%,
    #a8edea 50%,
    #fed6e3 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Index page contact form */
#index-contact-form,
#index-contact-form * {
  color: #f8fafc !important;
}

#index-contact-form h1 {
  background: linear-gradient(
    135deg,
    #64ffda 0%,
    #a8edea 50%,
    #fed6e3 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Ensure button text is visible */
button,
.btn,
input[type="submit"] {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* SVG icon fixes - exclude Berlin illustration */
svg:not(.berlin-illustration),
svg:not(.berlin-illustration) * {
  fill: #64ffda !important;
}

/* Berlin illustration - preserve original colors */
.berlin-illustration .sun {
  fill: #edc655 !important;
}

.berlin-illustration .cloud-front path,
.berlin-illustration .cloud-back path {
  fill: #ffffff !important;
}

/* Berlin building colors - restore original */
.berlin-illustration polygon[fill="#67C2E2"],
.berlin-illustration path[fill="#67C2E2"] {
  fill: #67c2e2 !important;
}

.berlin-illustration polygon[fill="#296997"],
.berlin-illustration path[fill="#296997"] {
  fill: #296997 !important;
}

.berlin-illustration polygon[fill="#1A232C"],
.berlin-illustration path[fill="#1A232C"] {
  fill: #ffffff !important;
}

.berlin-illustration polygon[fill="#FBFDFC"],
.berlin-illustration path[fill="#FBFDFC"] {
  fill: #ffffff !important;
}

/* Force all cloud elements to be white, regardless of inline fill attributes */
.cloud-front path,
.cloud-back path {
  fill: #ffffff !important;
}

.berlin-illustration polygon[fill="#428DAE"],
.berlin-illustration path[fill="#428DAE"] {
  fill: #428dae !important;
}

/* Additional safety overrides for any missed elements */
.standard-label {
  color: #f8fafc !important;
  font-weight: 600 !important;
}

/* ========================================== */
/* ABOUT PAGE ANIMATIONS & STYLING */
/* ========================================== */

#about-main {
  animation: fadeInUp 1.2s ease-out;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#about-main h2 {
  animation: slideInLeft 1s ease-out 0.2s both;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

#about-main h2::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #64ffda, #a8edea, #fed6e3);
  border-radius: 2px;
  animation: expandWidth 1s ease-out 1.2s both;
}

@keyframes expandWidth {
  0% {
    width: 0;
  }
  100% {
    width: 100px;
  }
}

#about-main h3 {
  animation: slideInRight 1s ease-out 0.4s both;
  margin: 35px 0 20px 0;
  position: relative;
}

#about-main p {
  animation: fadeInUp 1s ease-out 0.6s both;
  margin-bottom: 25px;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.05),
    rgba(168, 237, 234, 0.05)
  );
  padding: 20px;
  border-radius: 15px;
  border-left: 4px solid #64ffda;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

#about-main p:hover {
  transform: translateX(10px);
  border-left-color: #a8edea;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.1),
    rgba(168, 237, 234, 0.1)
  );
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Skills Section Animations */
.skills-section {
  animation: fadeInUp 1s ease-out 0.8s both;
  margin: 40px 0;
}

.skill-category {
  background: linear-gradient(
    135deg,
    rgba(52, 152, 219, 0.15),
    rgba(155, 89, 182, 0.15),
    rgba(46, 204, 113, 0.15)
  );
  padding: 35px;
  margin: 30px 0;
  border-radius: 25px;
  border: 2px solid rgba(52, 152, 219, 0.4);
  backdrop-filter: blur(20px);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.skill-category::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(100, 255, 218, 0.02),
    transparent
  );
  animation: shimmerSkill 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmerSkill {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.skill-category:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(52, 152, 219, 0.6);
  box-shadow: 0 15px 30px rgba(52, 152, 219, 0.3);
}

.skill-category h4 {
  margin-bottom: 25px;
  text-align: center;
  position: relative;
  font-size: 1.6em !important;
  font-weight: 800 !important;
  color: #2c3e50 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.skill-category h4::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #64ffda, #a8edea, #fed6e3);
  border-radius: 2px;
}

.skill-category ul {
  list-style: none;
  padding: 0;
}

.skill-category li {
  margin: 18px 0;
  padding: 18px 25px;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 15px;
  border-left: 4px solid #3498db;
  transition: all 0.3s ease;
  position: relative;
  font-size: 1.05em;
  line-height: 1.6;
  color: #1a202c !important;
  list-style: none !important;
  list-style-type: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.skill-category li::before {
  content: "▶";
  color: #3498db;
  margin-right: 12px;
  transition: all 0.3s ease;
  font-size: 1.2em;
}

.skill-category li:hover {
  transform: translateX(12px);
  background: linear-gradient(135deg, #4caf50, #45a049) !important;
  border-left-color: #2d7016;
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4) !important;
  color: white !important;
}

.skill-category li:hover::before {
  color: #9b59b6;
  transform: translateX(8px) scale(1.2);
}

/* Enhanced Technical Font Styling for Skills */
.skill-category li,
.skill-category li *:not(strong),
.skill-category ul li,
.skill-category ul li *:not(strong) {
  color: #1a202c !important;
  list-style: none !important;
  font-weight: 500 !important;
}

/* Hover state text color override */
.skill-category li:hover,
.skill-category li:hover *:not(strong) {
  color: white !important;
}

.skill-category li strong {
  color: #2d7016 !important;
  font-weight: 700 !important;
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace !important;
  font-size: 1.1em !important;
  letter-spacing: 0.5px;
}

/* Override strong text color specifically on hover */
.skill-category li:hover strong {
  color: white !important;
}

/* Strong text in hover state */
.skill-category li:hover strong {
  color: white !important;
  background: none !important;
}

.skill-category li::before {
  content: "▶";
  color: #3498db;
  margin-right: 12px;
  transition: all 0.3s ease;
  font-size: 1.2em;
  font-weight: bold;
}

.skill-category li:hover::before {
  color: white !important;
  transform: translateX(8px) scale(1.2);
}

/* ULTIMATE HOVER TEXT COLOR FIX - Override any conflicting styles */
.skill-category li:hover,
.skill-category li:hover *,
.skill-category li:hover span,
.skill-category li:hover strong,
.skill-category ul li:hover,
.skill-category ul li:hover *,
.skill-category ul li:hover span,
.skill-category ul li:hover strong {
  color: white !important;
}

/* Additional ultra-specific override for any remaining green text */
.skill-category:hover li,
.skill-category li:hover,
.skill-category li:hover *:not(.skill-category),
.skill-category li:hover strong:not(.skill-category) {
  color: white !important;
}

/* NUCLEAR OPTION - Force all text to be white on hover */
.skill-category li:hover,
.skill-category li:hover strong,
.skill-category li:hover span,
.skill-category li:hover div,
.skill-category li:hover p,
.skill-category li:hover *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  color: white !important;
}

/* ULTIMATE LAST RESORT - Maximum specificity for skill category hover */
html body .skill-category li:hover,
html body .skill-category li:hover *,
html body .skill-category li:hover strong,
html body div .skill-category li:hover,
html body div .skill-category li:hover *,
html body div .skill-category li:hover strong {
  color: #ffffff !important;
}

/* CV Download Buttons Container */
.cv-download-section {
  text-align: center;
  margin: 50px 0;
  padding: 50px;
  background: linear-gradient(
    135deg,
    rgba(15, 15, 45, 0.95),
    rgba(25, 25, 55, 0.9),
    rgba(35, 35, 65, 0.95)
  );
  border-radius: 30px;
  border: 2px solid rgba(51, 102, 255, 0.4);
  backdrop-filter: blur(20px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.cv-download-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(51, 102, 255, 0.08),
    transparent
  );
  animation: shimmerCVSection 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmerCVSection {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.cv-download-section h3 {
  margin-bottom: 35px;
  font-size: 2.2em;
  color: #3366ff !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  position: relative;
  z-index: 2;
}

.cv-download-section p {
  color: #f8fafc !important;
  font-size: 1.2em;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.cv-buttons-container {
  position: relative;
  z-index: 2;
}

/* Development Philosophy Styling */
.philosophy-list {
  background: linear-gradient(
    135deg,
    rgba(46, 204, 113, 0.1),
    rgba(52, 152, 219, 0.1)
  );
  padding: 30px;
  border-radius: 20px;
  border: 2px solid rgba(46, 204, 113, 0.3);
  margin: 30px 0;
  list-style: none;
}

.philosophy-list li {
  margin: 15px 0;
  padding: 15px 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(248, 255, 248, 0.85)
  );
  border-radius: 12px;
  border-left: 4px solid #27ae60;
  transition: all 0.3s ease;
  font-size: 1.05em;
  line-height: 1.6;
  color: #27ae60 !important;
}

.philosophy-list li:hover {
  transform: translateX(8px);
  background: linear-gradient(
    135deg,
    rgba(46, 204, 113, 0.15),
    rgba(39, 174, 96, 0.1)
  );
  border-left-color: #2ecc71;
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.2);
}

.philosophy-list li strong {
  color: #2ecc71 !important;
  font-weight: 700 !important;
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace !important;
  font-size: 1.1em !important;
  letter-spacing: 0.5px;
  background: linear-gradient(
    135deg,
    rgba(46, 204, 113, 0.1),
    rgba(39, 174, 96, 0.1)
  );
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(46, 204, 113, 0.3);
  transition: all 0.3s ease;
}

.philosophy-list li:hover strong {
  color: #27ae60 !important;
  background: linear-gradient(
    135deg,
    rgba(46, 204, 113, 0.2),
    rgba(39, 174, 96, 0.2)
  );
  border-color: rgba(46, 204, 113, 0.5);
  transform: scale(1.05);
}

/* Skills Summary Enhancement */
.skills-summary {
  background: linear-gradient(
    135deg,
    rgba(155, 89, 182, 0.15),
    rgba(142, 68, 173, 0.15)
  );
  padding: 40px;
  margin: 40px 0;
  border-radius: 25px;
  border: 2px solid rgba(155, 89, 182, 0.4);
  backdrop-filter: blur(20px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.skills-summary::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(100, 255, 218, 0.03),
    transparent
  );
  animation: shimmerSkillsSummary 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmerSkillsSummary {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.skills-summary h3 {
  font-size: 2em !important;
  margin-bottom: 25px;
  color: #8e44ad !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.skills-summary p {
  font-size: 1.2em !important;
  line-height: 1.8;
  margin-bottom: 30px;
  color: #2c3e50 !important;
}

.skills-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.stat-item {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(248, 252, 255, 0.9)
  );
  padding: 25px;
  border-radius: 15px;
  border: 2px solid #3498db;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
  border-color: #2980b9;
  box-shadow: 0 10px 25px rgba(52, 152, 219, 0.3);
}

.stat-number {
  font-size: 2.5em;
  font-weight: 800;
  color: #2c3e50 !important;
  display: block;
  margin-bottom: 10px;
  font-family: "JetBrains Mono", monospace;
}

.stat-label {
  color: #34495e !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Featured Project Highlights */
.project-highlights {
  margin: 50px 0;
}

.project-highlights h3 {
  text-align: center;
  font-size: 2em !important;
  margin-bottom: 40px;
  color: #64ffda !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
}

.project-highlights h3::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #64ffda, #a8edea, #fed6e3);
  border-radius: 2px;
}

.featured-project {
  background: linear-gradient(
    135deg,
    rgba(15, 15, 45, 0.9),
    rgba(25, 25, 55, 0.8),
    rgba(35, 35, 65, 0.9)
  );
  padding: 35px;
  margin: 30px 0;
  border-radius: 25px;
  border: 2px solid rgba(100, 255, 218, 0.3);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.featured-project::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #64ffda, #a8edea, #fed6e3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.featured-project:hover::before {
  opacity: 1;
}

.featured-project:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(100, 255, 218, 0.5);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4),
    0 15px 30px rgba(100, 255, 218, 0.2);
}

.featured-project h4 {
  font-size: 1.5em !important;
  margin-bottom: 15px;
  color: #a8edea !important;
  font-weight: 700 !important;
}

.project-tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.tech-badge {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.2),
    rgba(168, 237, 234, 0.2)
  );
  color: #ffffff !important;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.85em;
  font-weight: 600;
  border: 1px solid rgba(100, 255, 218, 0.3);
  font-family: "JetBrains Mono", monospace;
}

.project-link-highlight {
  display: inline-block;
  background: linear-gradient(135deg, #64ffda, #a8edea);
  color: #ffffff !important;
  padding: 12px 25px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 700 !important;
  margin-top: 20px;
  transition: all 0.3s ease;
  border: 2px solid rgba(100, 255, 218, 0.5);
  box-shadow: 0 6px 20px rgba(100, 255, 218, 0.3);
  font-size: 1.05em !important;
}

.project-link-highlight:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 25px rgba(100, 255, 218, 0.4);
  background: linear-gradient(135deg, #a8edea, #fed6e3);
  color: #ffffff !important;
  border-color: rgba(168, 237, 234, 0.7);
}

/* Table Styling for About Page */
#about-main table {
  width: 100%;
  margin: 30px 0;
  border-collapse: collapse;
  background: linear-gradient(
    135deg,
    rgba(15, 15, 45, 0.8),
    rgba(25, 25, 55, 0.6)
  );
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 1s ease-out 1s both;
}

#about-main th {
  background: linear-gradient(135deg, #64ffda, #a8edea);
  color: #000000;
  padding: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#about-main td {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(100, 255, 218, 0.1);
  transition: all 0.3s ease;
}

#about-main tr:hover td {
  background: rgba(100, 255, 218, 0.1);
  transform: scale(1.01);
}

/* Tech Tags Enhanced Styling */
.tech-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 20px !important;
  justify-content: center !important;
}

.tech-tag {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.2),
    rgba(168, 237, 234, 0.2)
  ) !important;
  color: #ffffff !important;
  padding: 12px 20px !important;
  border-radius: 20px !important;
  font-size: 0.9em !important;
  font-weight: 600 !important;
  border: 1px solid rgba(100, 255, 218, 0.3) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  position: relative;
  overflow: hidden;
}

.tech-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: all 0.5s ease;
}

.tech-tag:hover::before {
  left: 100%;
}

.tech-tag:hover {
  transform: translateY(-3px) scale(1.05) !important;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.3),
    rgba(168, 237, 234, 0.3)
  ) !important;
  border-color: rgba(100, 255, 218, 0.5) !important;
  box-shadow: 0 8px 20px rgba(100, 255, 218, 0.3) !important;
  color: #64ffda !important;
}

/* Project Links Enhanced */
.project-links {
  display: flex !important;
  gap: 15px !important;
  margin-top: 30px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

.project-links a {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.2),
    rgba(168, 237, 234, 0.2)
  ) !important;
  color: #ffffff !important;
  padding: 14px 28px !important;
  border-radius: 25px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border: 2px solid rgba(100, 255, 218, 0.3) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  position: relative;
  overflow: hidden;
}

.project-links a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: all 0.5s ease;
}

.project-links a:hover::before {
  left: 100%;
}

.project-links a:hover {
  transform: translateY(-3px) scale(1.05) !important;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.4),
    rgba(168, 237, 234, 0.4)
  ) !important;
  border-color: rgba(100, 255, 218, 0.6) !important;
  box-shadow: 0 10px 25px rgba(100, 255, 218, 0.4) !important;
  color: #64ffda !important;
}

/* Project Materials Enhanced */
.project-materials {
  background: linear-gradient(
    135deg,
    rgba(168, 237, 234, 0.1),
    rgba(254, 214, 227, 0.1)
  ) !important;
  padding: 25px !important;
  border-radius: 20px !important;
  border-left: 4px solid #a8edea !important;
  margin: 25px 0 !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(168, 237, 234, 0.2) !important;
  transition: all 0.3s ease !important;
}

.project-materials:hover {
  transform: translateX(5px) !important;
  border-left-color: #64ffda !important;
  box-shadow: 0 8px 25px rgba(168, 237, 234, 0.2) !important;
}

.project-materials h4 {
  color: #a8edea !important;
  margin-bottom: 20px !important;
  font-size: 1.3em !important;
  text-align: center !important;
}

.project-materials ul {
  list-style: none !important;
  padding: 0 !important;
}

.project-materials li {
  color: #f8fafc !important;
  margin-bottom: 12px !important;
  padding: 12px 20px !important;
  padding-left: 40px !important;
  position: relative;
  background: rgba(100, 255, 218, 0.05) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}

.project-materials li::before {
  content: "" !important;
  color: #fed6e3 !important;
  position: absolute;
  left: 15px !important;
  font-weight: bold !important;
  transition: all 0.3s ease !important;
}

.project-materials li:hover {
  background: rgba(100, 255, 218, 0.1) !important;
  transform: translateX(8px) !important;
  color: #64ffda !important;
}

.project-materials li:hover::before {
  color: #64ffda !important;
  transform: scale(1.2) rotate(360deg) !important;
}

/* ========================================== */
/* CONTACT PAGE ULTRA-STYLISH DESIGN */
/* ========================================== */

#contact-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
  animation: fadeInUp 1.2s ease-out;
}

#contact-main > div:first-child {
  background: linear-gradient(
    135deg,
    rgba(15, 15, 45, 0.9),
    rgba(25, 25, 55, 0.8)
  );
  padding: 40px;
  border-radius: 25px;
  border: 2px solid rgba(100, 255, 218, 0.3);
  backdrop-filter: blur(20px);
  margin-bottom: 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#contact-main > div:first-child::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(100, 255, 218, 0.05),
    transparent
  );
  animation: shimmerContact 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmerContact {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

#contact-details h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5em;
  position: relative;
}

#contact-details h2::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #64ffda, #a8edea, #fed6e3);
  border-radius: 2px;
}

.contact-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  gap: 30px !important;
  margin: 40px 0 !important;
}

.contact-card {
  background: linear-gradient(
    135deg,
    rgba(15, 15, 45, 0.9),
    rgba(25, 25, 55, 0.8),
    rgba(35, 35, 65, 0.9)
  ) !important;
  padding: 35px !important;
  border-radius: 25px !important;
  border: 2px solid rgba(100, 255, 218, 0.2) !important;
  backdrop-filter: blur(20px) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #64ffda, #a8edea, #fed6e3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-card:hover::before {
  opacity: 1;
}

.contact-card:hover {
  transform: translateY(-15px) scale(1.03) !important;
  border-color: rgba(100, 255, 218, 0.5) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4),
    0 15px 30px rgba(100, 255, 218, 0.2) !important;
  background: linear-gradient(
    135deg,
    rgba(20, 20, 55, 0.95),
    rgba(30, 30, 65, 0.9),
    rgba(40, 40, 75, 0.95)
  ) !important;
}

.contact-card h3 {
  color: #64ffda !important;
  font-size: 1.4em !important;
  margin-bottom: 15px !important;
  font-weight: 700 !important;
}

.contact-card p {
  color: #f8fafc !important;
  margin-bottom: 20px !important;
  font-size: 1.1em !important;
  line-height: 1.6 !important;
}

.contact-link {
  display: inline-block !important;
  color: #64ffda !important;
  text-decoration: none !important;
  padding: 12px 25px !important;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.1),
    rgba(168, 237, 234, 0.1)
  ) !important;
  border: 2px solid rgba(100, 255, 218, 0.3) !important;
  border-radius: 25px !important;
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
  position: relative;
  overflow: hidden;
}

.contact-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: all 0.5s ease;
}

.contact-link:hover::before {
  left: 100%;
}

.contact-link:hover {
  color: #ffffff !important;
  border-color: rgba(100, 255, 218, 0.6) !important;
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.3),
    rgba(168, 237, 234, 0.3)
  ) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(100, 255, 218, 0.3) !important;
}

.location-text {
  color: #f8fafc !important;
  font-size: 1.1em !important;
  line-height: 1.6 !important;
}

.availability-note {
  background: linear-gradient(
    135deg,
    rgba(100, 255, 218, 0.1),
    rgba(168, 237, 234, 0.1)
  ) !important;
  padding: 40px !important;
  border-radius: 25px !important;
  border: 2px solid rgba(100, 255, 218, 0.3) !important;
  backdrop-filter: blur(20px) !important;
  margin-top: 50px !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
}

.availability-note::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(100, 255, 218, 0.03),
    transparent
  );
  animation: shimmerAvailability 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmerAvailability {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.availability-note h3 {
  color: #64ffda !important;
  margin-bottom: 20px !important;
  font-size: 1.6em !important;
}

.availability-note p {
  color: #f8fafc !important;
  font-size: 1.2em !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

.availability-note strong {
  color: #a8edea !important;
  font-weight: 700 !important;
}

/* Mobile Responsive for Contact Page */
@media screen and (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }

  .contact-card {
    padding: 30px !important;
  }

  #contact-main {
    padding: 30px 20px !important;
  }

  #contact-main > div:first-child {
    padding: 30px !important;
  }

  .availability-note {
    padding: 30px !important;
  }
}

@media screen and (max-width: 480px) {
  .contact-grid {
    gap: 20px !important;
  }

  .contact-card {
    padding: 25px !important;
  }

  #contact-details h2 {
    font-size: 2em !important;
  }

  .contact-link {
    padding: 10px 20px !important;
    font-size: 0.95em !important;
  }
}

/* ========================================== */
/* CRITICAL FONT CONTRAST FIXES */
/* ========================================== */

/* Override ALL gradient text effects that make text invisible */
* {
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}

/* Force solid colors for all headings */
h1,
h2,
h3,
h4,
h5,
h6,
.page-header h1,
.page-header h2,
.page-header h3,
#about-main h1,
#about-main h2,
#about-main h3,
#contact-main h1,
#contact-main h2,
#contact-main h3,
#index-main h1,
#index-main h2,
#index-main h3,
footer h1,
.page-footer h1 {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: #ffffff !important;
}

/* Specific heading colors for hierarchy */
h1 {
  color: #64ffda !important;
}

h2 {
  color: #a8edea !important;
}

h3 {
  color: #fed6e3 !important;
}

h4,
h5,
h6 {
  color: #ffffff !important;
}

/* Ensure all paragraph text is highly visible */
p,
div,
span,
li,
td,
th,
label,
.standard-label {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Strong contrast for form elements */
input,
textarea,
select {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* High contrast links */
a {
  color: #64ffda !important;
  font-weight: 600 !important;
}

a:hover {
  color: #a8edea !important;
}

/* Ensure buttons are visible */
button,
.btn,
input[type="submit"] {
  background: rgba(100, 255, 218, 0.8) !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
  font-weight: 700 !important;
}

button:hover {
  background: rgba(168, 237, 234, 0.9) !important;
  color: #000000 !important;
}

/* Table elements */
table {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

th {
  background: rgba(100, 255, 218, 0.3) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

td {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Navigation links */
.navigation-list__item a {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.navigation-list__item a:hover {
  color: #64ffda !important;
}

/* Project cards text */
.grid__item h2,
.grid__item h3,
.grid__item h4 {
  color: #64ffda !important;
}

.grid__item p {
  color: #ffffff !important;
}

/* API Documentation text */
.api-documentation h4,
.api-documentation h5 {
  color: #64ffda !important;
}

.api-documentation p,
.api-documentation li {
  color: #ffffff !important;
}

/* Ensure copyright text is visible */
.copyright,
.copyright p {
  color: #ffffff !important;
}

/* Force visibility for any remaining elements */
#about-main *,
#contact-main *,
#index-main *,
main * {
  color: inherit !important;
}

/* Remove any conflicting styles from older rules */
body * {
  color: #ffffff !important;
  /* =====================================================
   ULTRA-SLEEK & PROFESSIONAL THEME
   Enhanced version with advanced design elements
   (Applied to all pages EXCEPT index.html)
   ===================================================== */

  /* Professional Google Fonts import for enhanced typography */
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap");

  /* Advanced CSS Variables for consistent theming */
  :root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(45deg, #3498db, #2980b9);
    --accent-gradient: linear-gradient(45deg, #667eea, #9b59b6);
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-bg-light: rgba(255, 255, 255, 0.1);
    --shadow-light: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.15);
    --text-dark: #2c3e50;
    --text-medium: #34495e;
    --text-light: #7f8c8d;
    --border-radius: 20px;
    --border-radius-small: 12px;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* Ultra-modern body styling for non-home pages */
  body:not([data-page="index"]) {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      sans-serif !important;
    background: var(--primary-gradient) !important;
    background-attachment: fixed !important;
    line-height: 1.7 !important;
    color: var(--text-dark) !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* Animated background elements */
  body:not([data-page="index"])::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 20% 50%,
        rgba(120, 119, 198, 0.3) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 20%,
        rgba(255, 119, 198, 0.3) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 40% 80%,
        rgba(120, 219, 255, 0.3) 0%,
        transparent 50%
      );
    animation: backgroundShift 20s ease-in-out infinite;
    z-index: -1;
  }

  @keyframes backgroundShift {
    0%,
    100% {
      transform: translateX(0) translateY(0) scale(1);
    }
    25% {
      transform: translateX(-20px) translateY(-10px) scale(1.05);
    }
    50% {
      transform: translateX(20px) translateY(10px) scale(0.95);
    }
    75% {
      transform: translateX(-10px) translateY(20px) scale(1.02);
    }
  }

  /* Ultra-professional header with advanced glassmorphism */
  body:not([data-page="index"]) header {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-top: none !important;
    box-shadow: var(--shadow-light) !important;
    margin: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    color: var(--text-dark) !important;
    transition: var(--transition-smooth) !important;
  }

  body:not([data-page="index"]) header:hover {
    box-shadow: var(--shadow-heavy) !important;
    transform: translateY(-1px) !important;
  }

  /* Enhanced logo styling */
  body:not([data-page="index"]) .page-header__item img {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)) !important;
    transition: var(--transition-smooth) !important;
  }

  body:not([data-page="index"]) .page-header__item img:hover {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15)) !important;
  }

  /* Advanced navigation with micro-interactions */
  body:not([data-page="index"]) .navigation-list {
    display: flex !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
  }

  body:not([data-page="index"]) .navigation-list li {
    margin: 0 !important;
    position: relative !important;
  }

  body:not([data-page="index"]) .navigation-list__item {
    color: var(--text-dark) !important;
    font-weight: 500 !important;
    padding: 1rem 1.5rem !important;
    border-radius: var(--border-radius-small) !important;
    transition: var(--transition-smooth) !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Advanced hover effects with pseudo-elements */
  body:not([data-page="index"]) .navigation-list__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--secondary-gradient);
    transition: var(--transition-smooth);
    z-index: -1;
  }

  body:not([data-page="index"]) .navigation-list__item:hover::before {
    left: 0;
  }

  body:not([data-page="index"]) .navigation-list__item:hover {
    color: white !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4) !important;
  }

  body:not([data-page="index"]) .navigation-list__item--active {
    background: var(--secondary-gradient) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3) !important;
    transform: translateY(-2px) !important;
  }

  /* Ultra-modern main content with advanced container */
  body:not([data-page="index"]) main {
    max-width: 1300px !important;
    margin: 3rem auto !important;
    padding: 4rem !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-heavy) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    position: relative !important;
    animation: slideUp 0.8s ease-out !important;
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  body:not([data-page="index"]) main::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--accent-gradient);
    border-radius: var(--border-radius);
    z-index: -1;
    opacity: 0;
    transition: var(--transition-smooth);
  }

  body:not([data-page="index"]) main:hover::before {
    opacity: 0.1;
  }

  /* Premium typography with enhanced hierarchy */
  body:not([data-page="index"]) h1 {
    font-family: "Playfair Display", serif !important;
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 700 !important;
    color: transparent !important;
    background: var(--accent-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    margin-bottom: 3rem !important;
    text-align: center !important;
    position: relative !important;
    animation: titleGlow 3s ease-in-out infinite alternate !important;
  }

  @keyframes titleGlow {
    from {
      filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.3));
    }
    to {
      filter: drop-shadow(0 0 20px rgba(155, 89, 182, 0.5));
    }
  }

  body:not([data-page="index"]) h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin: 3rem 0 1.5rem 0 !important;
    position: relative !important;
    padding-left: 2rem !important;
  }

  body:not([data-page="index"]) h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 60%;
    background: var(--secondary-gradient);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
  }

  body:not([data-page="index"]) h3 {
    font-size: 1.6rem !important;
    font-weight: 500 !important;
    color: var(--text-medium) !important;
    margin: 2rem 0 1rem 0 !important;
    position: relative !important;
  }

  body:not([data-page="index"]) p {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    color: var(--text-medium) !important;
    margin-bottom: 1.5rem !important;
    text-align: justify !important;
  }

  /* Premium buttons with advanced effects */
  body:not([data-page="index"]) button,
  body:not([data-page="index"]) .btn,
  body:not([data-page="index"]) a[href]:not(.navigation-list__item) {
    background: var(--secondary-gradient) !important;
    color: white !important;
    border: none !important;
    padding: 1.2rem 2.5rem !important;
    border-radius: var(--border-radius-small) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--transition-smooth) !important;
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3) !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    display: inline-block !important;
  }

  body:not([data-page="index"]) button::before,
  body:not([data-page="index"]) .btn::before,
  body:not([data-page="index"]) a[href]:not(.navigation-list__item)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }

  body:not([data-page="index"]) button:hover::before,
  body:not([data-page="index"]) .btn:hover::before,
  body:not([data-page="index"])
    a[href]:not(.navigation-list__item):hover::before {
    width: 300px;
    height: 300px;
  }

  body:not([data-page="index"]) button:hover,
  body:not([data-page="index"]) .btn:hover,
  body:not([data-page="index"]) a[href]:not(.navigation-list__item):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 35px rgba(52, 152, 219, 0.5) !important;
    background: linear-gradient(45deg, #2980b9, #1f4e79) !important;
  }

  /* Ultra-modern forms with premium styling */
  body:not([data-page="index"]) form {
    background: var(--glass-bg-light) !important;
    padding: 3rem !important;
    border-radius: var(--border-radius) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(20px) !important;
    max-width: 800px !important;
    margin: 3rem auto !important;
    box-shadow: var(--shadow-light) !important;
    animation: formSlideIn 0.6s ease-out !important;
  }

  @keyframes formSlideIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  body:not([data-page="index"]) input,
  body:not([data-page="index"]) textarea {
    width: 100% !important;
    padding: 1.2rem !important;
    border: 2px solid rgba(52, 152, 219, 0.2) !important;
    border-radius: var(--border-radius-small) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    color: var(--text-dark) !important;
    transition: var(--transition-smooth) !important;
    margin-bottom: 2rem !important;
    font-family: inherit !important;
  }

  body:not([data-page="index"]) input:focus,
  body:not([data-page="index"]) textarea:focus {
    outline: none !important;
    border-color: #3498db !important;
    background: white !important;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1) !important;
    transform: translateY(-2px) !important;
  }

  body:not([data-page="index"]) label {
    display: block !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 0.8rem !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }

  /* Premium footer with enhanced design */
  body:not([data-page="index"]) footer,
  body:not([data-page="index"]) .page-footer {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 4rem 2rem !important;
    margin-top: 5rem !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    position: relative !important;
  }

  body:not([data-page="index"]) footer::before,
  body:not([data-page="index"]) .page-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: var(--secondary-gradient);
    border-radius: 2px;
  }

  body:not([data-page="index"]) footer h1,
  body:not([data-page="index"]) .page-footer h1 {
    color: var(--text-dark) !important;
    font-size: 2rem !important;
    margin-bottom: 3rem !important;
    text-align: center !important;
    font-weight: 700 !important;
  }

  body:not([data-page="index"]) .social-links {
    display: flex !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    margin-bottom: 3rem !important;
  }

  body:not([data-page="index"]) .social-links a {
    background: var(--glass-bg-light) !important;
    padding: 1.2rem !important;
    border-radius: 50% !important;
    transition: var(--transition-smooth) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
  }

  body:not([data-page="index"]) .social-links a:hover {
    background: var(--secondary-gradient) !important;
    transform: translateY(-5px) scale(1.1) !important;
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.4) !important;
  }

  body:not([data-page="index"]) .social-links a img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%)
      hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    transition: var(--transition-smooth) !important;
  }

  body:not([data-page="index"]) .social-links a:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
      hue-rotate(109deg) brightness(105%) contrast(105%) !important;
    animation: rotateFooterIcon 0.6s ease-in-out !important;
  }

  body:not([data-page="index"]) footer a,
  body:not([data-page="index"]) .page-footer a {
    color: var(--text-dark) !important;
    font-size: 1rem !important;
    padding: 1rem 2rem !important;
    border-radius: var(--border-radius-small) !important;
    transition: var(--transition-smooth) !important;
    margin: 0.5rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  body:not([data-page="index"]) footer a:hover,
  body:not([data-page="index"]) .page-footer a:hover {
    background: var(--secondary-gradient) !important;
    color: white !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3) !important;
  }

  /* Enhanced responsive design */
  @media (max-width: 768px) {
    body:not([data-page="index"]) main {
      margin: 1rem !important;
      padding: 2rem !important;
    }

    body:not([data-page="index"]) .navigation-list {
      flex-direction: column !important;
      gap: 0.5rem !important;
    }

    body:not([data-page="index"]) h1 {
      font-size: 2.5rem !important;
    }

    body:not([data-page="index"]) form {
      padding: 2rem !important;
      margin: 1rem !important;
    }
  }

  /* Advanced animations for page elements */
  body:not([data-page="index"]) * {
    animation-delay: calc(var(--i, 0) * 0.1s);
  }

  /* Smooth scrolling enhancement */
  html {
    scroll-behavior: smooth !important;
  }

  /* Enhanced focus accessibility */
  body:not([data-page="index"]) *:focus {
    outline: 2px solid #3498db !important;
    outline-offset: 2px !important;
  }
}

/* ULTIMATE OVERRIDE FOR SKILL CATEGORY TEXT COLORS - HIGHEST SPECIFICITY */
html body .skills-section .skill-category ul li,
html body .skills-section .skill-category ul li *,
html body .skills-section .skill-category li,
html body .skills-section .skill-category li * {
  color: #27ae60 !important;
}

html body .skills-section .skill-category ul li strong,
html body .skills-section .skill-category li strong {
  color: #2ecc71 !important;
}

/* Force override any inherited styles */
.skill-category ul li {
  color: #27ae60 !important;
}

.skill-category ul li * {
  color: inherit !important;
}

.skill-category ul li strong {
  color: #2ecc71 !important;
}

/* Ultimate fallback */
#about-main .skill-category ul li {
  color: #27ae60 !important;
}

#about-main .skill-category ul li strong {
  color: #2ecc71 !important;
}

/* PHILOSOPHY LIST GREEN TEXT OVERRIDE */
.philosophy-list li,
.philosophy-list li * {
  color: #27ae60 !important;
}

.philosophy-list li strong {
  color: #2ecc71 !important;
}

html body .philosophy-list li {
  color: #27ae60 !important;
}

html body .philosophy-list li strong {
  color: #2ecc71 !important;
}

/* SKILLS SUMMARY TABLE GREEN TEXT OVERRIDE */
table,
table td,
table th,
table tr,
table * {
  color: #27ae60 !important;
}

table th,
table th * {
  color: #2ecc71 !important;
}

html body table td {
  color: #27ae60 !important;
}

html body table th {
  color: #2ecc71 !important;
}

/* Skills summary section override */
.skills-summary table td,
.skills-summary table th {
  color: #27ae60 !important;
}

.skills-summary table th {
  color: #ffffff !important;
}

/* TABLE HEADER WHITE TEXT OVERRIDE */
table th,
table th *,
th,
th * {
  color: #ffffff !important;
}

html body table th,
html body table th * {
  color: #ffffff !important;
}

/* FEATURED PROJECTS BUTTONS WHITE TEXT OVERRIDE */
.project-link-highlight,
.project-link-highlight *,
.featured-project .project-link-highlight,
.featured-project .project-link-highlight * {
  color: #ffffff !important;
}

.project-link-highlight:hover,
.project-link-highlight:hover *,
.featured-project .project-link-highlight:hover,
.featured-project .project-link-highlight:hover * {
  color: #ffffff !important;
}

/* ULTIMATE NUCLEAR OPTION - FORCE ALL TEXT TO GREEN */
* {
  color: #27ae60 !important;
}

strong {
  color: #2ecc71 !important;
}

/* Override absolutely everything */
html,
body,
div,
span,
p,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #27ae60 !important;
}

html strong,
body strong,
div strong,
span strong,
p strong,
li strong,
td strong,
th strong {
  color: #2ecc71 !important;
}

/* CRYSTAL CLEAR TEXT - REMOVE ALL BLUR AND SHADOWS */
* {
  filter: none !important;
  -webkit-filter: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Remove backdrop filters that might affect text clarity */
.skill-category,
.philosophy-list,
.skills-summary,
table {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Force sharp, clear text for all content areas */
.skill-category li,
.skill-category li *,
.philosophy-list li,
.philosophy-list li *,
table td,
table th,
table * {
  filter: none !important;
  -webkit-filter: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
}