/* Responsive Design for App/Mobile View */
@media (max-width: 900px) {
  .nav-contents {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.2em;
  }
  .nav-items {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100vw;
    background: #fff;
    box-shadow: 0 4px 24px rgba(31,41,55,0.10);
    z-index: 100;
    padding: 1.5em 0;
    gap: 1.2em;
    text-align: center;
  }
  .nav-items.active {
    display: flex;
  }
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
  }
  .hamburger span {
    display: block;
    width: 28px;
    height: 4px;
    margin: 4px 0;
    background: #6a82fb;
    border-radius: 2px;
    transition: all 0.3s;
  }
  /* About Section */
  .about-contents {
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
    padding: 0 0.5em;
  }
  .about-photo-wrapper {
    margin: 0 auto 1em auto;
    width: 160px;
    height: 160px;
  }
  .about-photo {
    width: 140px;
    height: 140px;
  }
  .about-description h1 {
    font-size: 1.5em;
  }
  .about-title-gradient {
    font-size: 1.1em;
  }
  .about-highlight-text {
    font-size: 0.98em;
    padding: 0.7em 0.7em 0.7em 0.7em;
  }
  .about-skills-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    font-size: 0.98em;
    padding: 0.7em 0.7em 0.7em 0.7em;
  }
  .resume-section-footer {
    margin-top: 1.2em;
    padding: 0 0.5em;
  }
  .modern-resume-card {
    min-height: 180px;
    max-width: 98vw;
    padding: 1.2em 0.5em;
  }
  /* Experience, Projects, Awards */
  .exp-cards-wrapper, .project-grid-wrapper, .awards-grid-wrapper {
    flex-direction: column !important;
    gap: 1.2em !important;
    align-items: stretch !important;
  }
  .exp-card, .project-tile, .award-card {
    min-width: 0;
    width: 100%;
    max-width: 98vw;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .exp-section-header, .projects-header, .awards-header {
    flex-direction: row;
    align-items: center;
    gap: 0.7em;
    padding: 0 0.5em;
  }
  .exp-section-letter, .projects-section-letter, .awards-section-letter {
    font-size: 2.2em !important;
  }
  .contents-title {
    font-size: 1.2em !important;
  }
  /* Footer */
  #contact .contact-contents {
    flex-direction: column;
    gap: 1.2em;
    padding: 0 0.5em;
  }
  .contact-links, .contact-connect {
    align-items: flex-start;
    font-size: 1em;
  }
  footer {
    font-size: 13px;
    padding: 10px 0;
  }
  section {
    padding: 24px 6px;
  }
}
/* About Skills Block Styles */
.about-skills-block {
    background: rgba(106,130,251,0.07);
    border-radius: 1em;
    padding: 0.8em 1.2em 0.8em 1.1em;
    margin: 1.1em 0 1.2em 0;
    box-shadow: 0 2px 12px 0 rgba(67,233,123,0.07);
    font-size: 1.01rem;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7em 0.6em;
    border-left: 4px solid #6a82fb;
}
.about-skills-title {
    font-weight: 800;
    color: #6a82fb;
    margin-right: 0.7em;
    font-size: 1.08em;
    letter-spacing: 0.04em;
}
.about-skill {
    display: inline-block;
    padding: 0.18em 0.85em;
    border-radius: 1.2em;
    font-weight: 700;
    font-size: 0.98em;
    margin-right: 0.1em;
    margin-bottom: 0.1em;
    background: #fff;
    color: #232946;
    box-shadow: 0 1px 6px 0 rgba(106,130,251,0.08);
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    cursor: default;
    border: 1.5px solid #e0e7ff;
    position: relative;
    z-index: 1;
}
.about-skill-html { background: linear-gradient(90deg, #ffecd2 0%, #fcb69f 100%); color: #b3541a; border-color: #fcb69f; }
.about-skill-css { background: linear-gradient(90deg, #c2e9fb 0%, #81a4fd 100%); color: #1a4fb3; border-color: #81a4fd; }
.about-skill-js { background: linear-gradient(90deg, #fdfbfb 0%, #ebedee 100%); color: #eab308; border-color: #facc15; }
.about-skill-figma { background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%); color: #b3541a; border-color: #f7971e; }
.about-skill-uiux { background: linear-gradient(90deg, #fc5c7d 0%, #6a82fb 100%); color: #fff; border-color: #fc5c7d; }
.about-skill-responsive { background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%); color: #0f5132; border-color: #43e97b; }
.about-skill-frameworks { background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%); color: #fff; border-color: #6a82fb; }
.about-skill-collab { background: linear-gradient(90deg, #f7971e 0%, #43e97b 100%); color: #fff; border-color: #43e97b; }
.about-skill:hover {
    background: #6a82fb;
    color: #fff;
    box-shadow: 0 2px 12px 0 #6a82fb44;
    border-color: #fc5c7d;
    z-index: 2;
}
/* About Highlighted Description Styles */
.about-highlight-text {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.7;
    color: #232946;
    margin: 1.1rem 0 1.2rem 0;
    background: rgba(245,245,255,0.7);
    border-radius: 1.1em;
    padding: 1.1em 1.3em 1.1em 1.1em;
    box-shadow: 0 2px 16px 0 rgba(106,130,251,0.07);
    position: relative;
    overflow: hidden;
    z-index: 1;
    left: -0.7em;
    max-width: 95%;
}
.about-highlight-emoji {
    font-size: 1.3em;
    vertical-align: middle;
    margin-right: 0.18em;
    margin-left: 0.1em;
    filter: drop-shadow(0 2px 8px #fc5c7d33);
    animation: aboutEmojiPop 2.5s infinite alternate;
}
@keyframes aboutEmojiPop {
    0% { transform: scale(1); }
    100% { transform: scale(1.18) rotate(-8deg); }
}
.about-highlight-gradient {
    font-weight: 800;
    background: linear-gradient(90deg, #6a82fb, #fc5c7d, #43e97b 80%);
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
    /* removed invalid property */
    font-size: 1.18em;
    letter-spacing: 0.04em;
    animation: aboutGradientMove 4s linear infinite;
}
@keyframes aboutGradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.about-highlight-keyword {
    color: #fc5c7d;
    font-weight: 700;
    background: rgba(252,92,125,0.08);
    border-radius: 0.5em;
    padding: 0.08em 0.38em;
    margin: 0 0.08em;
    box-shadow: 0 1px 6px 0 rgba(252,92,125,0.08);
    transition: background 0.3s, color 0.3s;
}
.about-highlight-keyword:hover {
    background: #fc5c7d;
    color: #fff;
}
.about-highlight-rest {
    color: #232946;
    font-weight: 500;
}
/* Enhanced About Title Gradient with Flicker Effect */
/* About Title Gradient with Wave Effect */
/* About Title Gradient with Shimmer Effect */
.about-title-gradient {
    font-size: 1.7rem;
    font-weight: 900;
    background: linear-gradient(90deg, #6a82fb, #fc5c7d, #43e97b 80%);
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
    letter-spacing: 0.09em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    filter: drop-shadow(0 2px 8px #6a82fb33);
    position: relative;
    overflow: hidden;
}
.about-title-gradient::after {
    content: '';
    position: absolute;
    left: -60%;
    top: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: aboutTitleShimmer 2.5s infinite;
    pointer-events: none;
}
@keyframes aboutTitleShimmer {
    0% { left: -60%; }
    60% { left: 120%; }
    100% { left: 120%; }
}
@keyframes aboutTitleGradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
@keyframes aboutTitlePop {
    0% { transform: scale(1) rotate(-2deg); }
    100% { transform: scale(1.07) rotate(2deg); }
}
.about-title-gradient:hover {
    transform: scale(1.08) rotate(-2deg);
    filter: drop-shadow(0 4px 16px #fc5c7d66);
}
.about-title-sep {
    font-size: 1.3em;
    color: #fc5c7d;
    font-weight: 700;
    margin: 0 0.4em;
    opacity: 0.7;
    animation: aboutSepPulse 2s infinite alternate;
    transition: color 0.3s, opacity 0.3s;
}
@keyframes aboutSepPulse {
    0% { opacity: 0.7; color: #fc5c7d; }
    100% { opacity: 1; color: #6a82fb; }
}
.about-title-web {
    color: #43e97b;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 8px #43e97b33;
    animation: aboutWebGlow 2.5s infinite alternate, aboutWebBounce 3s infinite cubic-bezier(.5,1.8,.5,1);
    transition: color 0.3s, text-shadow 0.3s;
}
@keyframes aboutWebGlow {
    0% { text-shadow: 0 2px 8px #43e97b33; }
    100% { text-shadow: 0 6px 24px #43e97b99; }
}
@keyframes aboutWebBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px) scale(1.08); }
}
.about-title-uiux {
    color: #fc5c7d;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 8px #fc5c7d33;
    animation: aboutUiuxGlow 2.5s infinite alternate, aboutUiuxBounce 3s 1.5s infinite cubic-bezier(.5,1.8,.5,1);
    transition: color 0.3s, text-shadow 0.3s;
}
@keyframes aboutUiuxGlow {
    0% { text-shadow: 0 2px 8px #fc5c7d33; }
    100% { text-shadow: 0 6px 24px #fc5c7d99; }
}
@keyframes aboutUiuxBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px) scale(1.08); }
}
/* About Title Gradient Styles */
.about-title-gradient {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(90deg, #6a82fb, #fc5c7d, #43e97b 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* text-fill-color: transparent; */
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: aboutTitleGradientMove 4s linear infinite;
}
@keyframes aboutTitleGradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.about-title-sep {
    font-size: 1.3em;
    color: #fc5c7d;
    font-weight: 700;
    margin: 0 0.4em;
    opacity: 0.7;
    animation: aboutSepPulse 2s infinite alternate;
}
@keyframes aboutSepPulse {
    0% { opacity: 0.7; }
    100% { opacity: 1; color: #6a82fb; }
}
.about-title-web {
    color: #43e97b;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 8px #43e97b33;
    animation: aboutWebGlow 2.5s infinite alternate;
}
@keyframes aboutWebGlow {
    0% { text-shadow: 0 2px 8px #43e97b33; }
    100% { text-shadow: 0 6px 24px #43e97b99; }
}
.about-title-uiux {
    color: #fc5c7d;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 8px #fc5c7d33;
    animation: aboutUiuxGlow 2.5s infinite alternate;
}
@keyframes aboutUiuxGlow {
    0% { text-shadow: 0 2px 8px #fc5c7d33; }
    100% { text-shadow: 0 6px 24px #fc5c7d99; }
}
/* Modern Resume Section Footer */
.resume-section-footer {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
}
.modern-resume-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    min-height: 270px;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 6px 32px rgba(80, 80, 180, 0.13), 0 2px 8px rgba(0,0,0,0.10);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.resume-card-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(120deg, #6a82fb 0%, #fc5c7d 100%);
    opacity: 0.13;
    z-index: 0;
    pointer-events: none;
}
.resume-card-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 2.2rem 2rem 2rem 2rem;
    text-align: center;
}
.resume-icon-animated {
    font-size: 2.7rem;
    margin-bottom: 0.7rem;
    animation: bounceResume 1.5s infinite alternate cubic-bezier(.5,1.8,.5,1);
    display: inline-block;
}
@keyframes bounceResume {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px) scale(1.08); }
}
.resume-title-gradient {
    font-size: 2.1rem;
    font-weight: 800;
    background: linear-gradient(90deg, #6a82fb, #fc5c7d, #43e97b 80%);
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
    /* text-fill-color: transparent; */
    margin-bottom: 0.5rem;
    letter-spacing: 0.08em;
}
.resume-desc {
    color: #444;
    font-size: 1.08rem;
    margin-bottom: 1.3rem;
}
.resume-actions {
    display: flex;
    gap: 1.1rem;
    justify-content: center;
    margin-top: 0.5rem;
}
.resume-view-btn, .resume-download-btn {
    display: inline-block;
    padding: 0.7rem 1.7rem;
    border-radius: 2rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 8px rgba(106,130,251,0.08);
}
.resume-view-btn {
    background: linear-gradient(90deg, #6a82fb, #43e97b);
    color: #fff;
}
.resume-view-btn:hover {
    background: linear-gradient(90deg, #43e97b, #6a82fb);
    color: #fff;
}
.resume-download-btn {
    background: linear-gradient(90deg, #fc5c7d, #f7971e);
    color: #fff;
}
.resume-download-btn:hover {
    background: linear-gradient(90deg, #f7971e, #fc5c7d);
    color: #fff;
}
/* Resume Section Styles */
.resume-section {
  margin-top: 32px;
  display: flex;
  justify-content: flex-start;
}
.resume-card {
  width: 340px;
  height: 220px;
  perspective: 1200px;
  position: relative;
  overflow: hidden;
}
.resume-front, .resume-back {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: linear-gradient(120deg, var(--primary) 60%, var(--secondary) 100%);
  color: #fff;
  box-shadow: 0 8px 32px rgba(31,41,55,0.18);
  position: absolute;
  top: 0; left: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.7s cubic-bezier(.4,2,.3,1), box-shadow 0.4s, opacity 0.5s, left 0.7s cubic-bezier(.4,2,.3,1);
}
.resume-front {
  z-index: 2;
  transform: translateX(0);
  opacity: 1;
}
.resume-back {
  transform: translateX(100%);
  background: linear-gradient(120deg, var(--secondary) 60%, var(--primary) 100%);
  color: var(--black);
  padding: 0;
  opacity: 0;
}
.resume-card.flipped .resume-front {
  transform: translateX(-100%);
  opacity: 0;
}
.resume-card.flipped .resume-back {
  transform: translateX(0);
  z-index: 3;
  opacity: 1;
}
.resume-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.resume-flip-btn {
  margin-top: 18px;
  padding: 8px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  background: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31,41,55,0.10);
  transition: background 0.2s, color 0.2s;
}
.resume-flip-btn:hover {
  background: var(--accent);
  color: #fff;
}
.resume-preview {
  width: 95%;
  height: 90px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: none;
  box-shadow: 0 2px 8px rgba(31,41,55,0.10);
}
.resume-back .resume-button {
  margin-top: 0;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(31,41,55,0.10);
  transition: background 0.2s;
}
.resume-back .resume-button:hover {
  background: var(--secondary);
  color: var(--accent);
}
@media (max-width: 600px) {
  .resume-card {
    width: 98vw;
    height: 180px;
  }
  .resume-preview {
    height: 60px;
  }
}
/* Awards & Certifications Redesigned Section */
.awards-contents-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 0 48px 0;
}
.awards-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
}
.awards-section-letter {
  font-size: 3.8rem;
  font-weight: 900;
  color: #f59e42;
  letter-spacing: 2px;
  background: linear-gradient(120deg, #2563eb 10%, #f59e42 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 8px #f59e42, 0 1px 0 #2563eb, 0 0 0 #fff;
  filter: none;
  animation: awardsLetterGlow 2.5s infinite alternate;
  border-radius: 12px;
  padding: 0 18px 0 0;
}
@keyframes awardsLetterGlow {
  0% { text-shadow: 0 2px 8px #f59e42, 0 1px 0 #2563eb; }
  100% { text-shadow: 0 8px 32px #f59e42cc, 0 2px 0 #2563eb; }
}
.awards-title-effect {
  font-size: 2.2rem;
  font-weight: 900;
  background: linear-gradient(90deg, #f43f5e, #f59e42, #38bdf8, #22d3ee);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: #fff;
  -webkit-text-fill-color: #fff;
  letter-spacing: 3px;
  text-shadow: 0 2px 16px #f43f5e, 0 1px 0 #22d3ee, 0 0 0 #fff;
  animation: awardsTitleGradient 4s linear infinite;
  transition: letter-spacing 0.3s cubic-bezier(.23,1.02,.64,.98);
}
@keyframes awardsTitleGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.awards-title-effect:hover {
  letter-spacing: 8px;
}
.awards-grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: stretch;
  margin: 24px 0 0 0;
}
.award-card {
  background: linear-gradient(120deg, #f8fafc 80%, #bae6fd 100%);
  color: #0f172a;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(56,189,248,0.10);
  padding: 32px 28px 24px 28px;
  min-width: 270px;
  max-width: 340px;
  flex: 1 1 300px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  transition: transform 0.3s cubic-bezier(.23,1.02,.64,.98), box-shadow 0.3s cubic-bezier(.23,1.02,.64,.98);
  cursor: pointer;
  border: 2px solid #e2e8f0;
  overflow: hidden;
}
.award-card:hover {
  transform: translateY(-8px) scale(1.04) rotate(-1deg);
  box-shadow: 0 12px 40px 0 rgba(245,158,66,0.18);
  border-color: #f59e42;
}
.award-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e42 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  box-shadow: 0 2px 12px 0 rgba(56,189,248,0.12);
  margin-right: 8px;
  flex-shrink: 0;
  position: relative;
  animation: awardIconPulse 2.5s infinite alternate;
}
@keyframes awardIconPulse {
  0% { box-shadow: 0 2px 12px 0 rgba(56,189,248,0.12); }
  100% { box-shadow: 0 6px 24px 0 rgba(245,158,66,0.22); }
}
.award-card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.award-card-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 2px 0;
  color: #2563eb;
}
.award-meta {
  font-size: 1rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 6px;
}
.award-card-content p {
  font-size: 1.05rem;
  color: #334155;
  margin: 0;
}
.award-card-content a {
  color: #2563eb;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s;
}
.award-card-content a:hover {
  color: #f59e42;
}
@media (max-width: 900px) {
  .awards-grid-wrapper {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .award-card {
    min-width: 90vw;
    max-width: 98vw;
    padding: 22px 10px 18px 10px;
    flex-direction: row;
    gap: 12px;
  }
  .award-icon {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
}
/* Projects Section Heading Effects */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
}
/* Projects Section Letter - More Visible */
.projects-section-letter {
  font-size: 3.8rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  background: linear-gradient(120deg, #f59e42 10%, #38bdf8 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 8px #38bdf8, 0 1px 0 #f59e42, 0 0 0 #fff;
  filter: none;
  animation: projectsLetterGlow 2.5s infinite alternate;
  border-radius: 12px;
  padding: 0 18px 0 0;
}
@keyframes projectsLetterGlow {
  0% { text-shadow: 0 4px 24px #38bdf844, 0 1px 0 #f59e42; }
  100% { text-shadow: 0 8px 32px #38bdf8cc, 0 2px 0 #f59e42; }
}
.projects-title-effect {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(90deg, #38bdf8, #f59e42, #2563eb, #38bdf8);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: #fff;
  -webkit-text-fill-color: #fff;
  letter-spacing: 3px;
  text-shadow: 0 2px 16px #38bdf8, 0 1px 0 #2563eb, 0 0 0 #fff;
  animation: projectsTitleGradient 4s linear infinite;
  transition: letter-spacing 0.3s cubic-bezier(.23,1.02,.64,.98);
}
@keyframes projectsTitleGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.projects-title-effect:hover {
  letter-spacing: 8px;
}
/* Centered Experience Section Header */
.exp-section-header-center {
  justify-content: center;
  text-align: center;
  margin-bottom: 24px;
}
/* Experience Section Letter Design */
.exp-section-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  justify-content: flex-start;
}
.exp-section-letter {
  font-size: 3.8rem;
  font-weight: 900;
  color: #f59e42;
  letter-spacing: 2px;
  background: linear-gradient(120deg, #2563eb 10%, #f59e42 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* removed invalid property */
  text-shadow: 0 4px 24px #f59e4244, 0 1px 0 #2563eb;
  filter: drop-shadow(0 2px 12px #f59e42cc);
  animation: expLetterGlow 2.5s infinite alternate;
  border-radius: 12px;
  padding: 0 18px 0 0;
}
@keyframes expLetterGlow {
  0% { text-shadow: 0 4px 24px #f59e4244, 0 1px 0 #2563eb; }
  100% { text-shadow: 0 8px 32px #f59e42cc, 0 2px 0 #2563eb; }
}
/* Bolder Project Tiles with Hard Colors and Effects */
.project-tile {
  border: 3px solid transparent;
  box-shadow: 0 8px 32px 0 rgba(31,41,55,0.18), 0 0 0 4px rgba(245,158,66,0.10);
  background: transparent;
  transition: transform 0.35s cubic-bezier(.23,1.02,.64,.98), box-shadow 0.35s cubic-bezier(.23,1.02,.64,.98), border-color 0.3s, filter 0.3s;
  filter: brightness(1) saturate(1.1);
}
.project-tile:hover {
  transform: translateY(-16px) scale(1.06) rotate(-2deg);
  box-shadow: 0 24px 64px 0 rgba(245,158,66,0.22), 0 0 0 6px #f59e42;
  border-color: #f59e42;
  filter: brightness(1.08) saturate(1.3) drop-shadow(0 0 24px #f59e42cc);
}
.project-skill-bg {
  background: linear-gradient(135deg, #f59e42 0%, #2563eb 100%);
  opacity: 0.95;
}
.project-quiz-bg {
  background: linear-gradient(135deg, #38bdf8 0%, #f43f5e 100%);
  opacity: 0.95;
}
.project-portfolio-bg {
  background: linear-gradient(135deg, #2563eb 0%, #f59e42 100%);
  opacity: 0.95;
}
.project-tile-content {
  background: rgba(255,255,255,0.92);
  border-radius: 20px;
  margin: 18px;
  box-shadow: 0 2px 16px 0 rgba(245,158,66,0.10);
  transition: background 0.3s, box-shadow 0.3s;
}
.project-tile:hover .project-tile-content {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 4px 32px 0 #f59e42cc;
}
.project-tile-icon {
  font-size: 2.5rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 12px #f59e42cc);
  transition: filter 0.3s;
}
.project-tile:hover .project-tile-icon {
  filter: drop-shadow(0 0 24px #f59e42) brightness(1.2);
}
.project-tile-content h3 {
  font-size: 1.22rem;
  font-weight: 900;
  color: #f59e42;
  margin: 0 0 2px 0;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 8px #fff8, 0 1px 0 #2563eb;
}
.project-tile-content p {
  font-size: 1.08rem;
  color: #0f172a;
  margin: 0;
  font-weight: 600;
  text-shadow: 0 1px 8px #fff8;
}
/* Unique Project Grid/Tiles Design */
.project-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 36px;
  margin: 48px 0 0 0;
  padding: 0 12px;
}
.project-tile {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 260px;
  box-shadow: 0 8px 32px 0 rgba(56,189,248,0.13);
  transition: transform 0.35s cubic-bezier(.23,1.02,.64,.98), box-shadow 0.35s cubic-bezier(.23,1.02,.64,.98);
  background: transparent;
  cursor: pointer;
}
.project-tile:hover {
  transform: translateY(-10px) scale(1.03) rotate(-1deg);
  box-shadow: 0 16px 48px 0 rgba(56,189,248,0.22);
  z-index: 2;
}
.project-tile-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.project-skill-bg {
  background: radial-gradient(circle at 30% 30%, #38bdf8 0%, #f8fafc 100%);
}
.project-quiz-bg {
  background: radial-gradient(circle at 70% 20%, #f59e42 0%, #bae6fd 100%);
}
.project-portfolio-bg {
  background: radial-gradient(circle at 50% 80%, #2563eb 0%, #f8fafc 100%);
}
.project-tile-content {
  position: relative;
  z-index: 2;
  padding: 38px 28px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,0.82);
  border-radius: 20px;
  margin: 18px;
  box-shadow: 0 2px 12px 0 rgba(56,189,248,0.08);
  transition: background 0.3s;
}
.project-tile-icon {
  font-size: 2.2rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 8px #bae6fd);
}
.project-tile-content h3 {
  font-size: 1.18rem;
  font-weight: 800;
  color: #2563eb;
  margin: 0 0 2px 0;
  letter-spacing: 1px;
}
.project-tile-content p {
  font-size: 1.05rem;
  color: #334155;
  margin: 0;
  font-weight: 500;
}
@media (max-width: 900px) {
  .project-grid-wrapper {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .project-tile-content {
    padding: 22px 10px 18px 10px;
    margin: 10px;
  }
}
/* Redesigned Project Section Styles */
.project-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: stretch;
  margin: 40px 0 0 0;
}
.project-card {
  background: linear-gradient(120deg, #f8fafc 80%, #bae6fd 100%);
  color: #0f172a;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(56,189,248,0.10);
  padding: 32px 28px 24px 28px;
  min-width: 270px;
  max-width: 340px;
  flex: 1 1 300px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  transition: transform 0.3s cubic-bezier(.23,1.02,.64,.98), box-shadow 0.3s cubic-bezier(.23,1.02,.64,.98);
  cursor: pointer;
  border: 2px solid #e2e8f0;
  overflow: hidden;
}
.project-card:hover {
  transform: translateY(-8px) scale(1.04) rotate(-1deg);
  box-shadow: 0 12px 40px 0 rgba(56,189,248,0.18);
  border-color: #38bdf8;
  background: linear-gradient(120deg, #bae6fd 80%, #f8fafc 100%);
}
.project-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e42 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  box-shadow: 0 2px 12px 0 rgba(56,189,248,0.12);
  margin-right: 8px;
  flex-shrink: 0;
  position: relative;
  animation: projectIconPulse 2.5s infinite alternate;
}
.project-skill::before {
  content: "\1F4AA";
  font-size: 2.1rem;
}
.project-quiz::before {
  content: "\1F3B2";
  font-size: 2.1rem;
}
.project-portfolio::before {
  content: "\1F4C8";
  font-size: 2.1rem;
}
@keyframes projectIconPulse {
  0% { box-shadow: 0 2px 12px 0 rgba(56,189,248,0.12); }
  100% { box-shadow: 0 6px 24px 0 rgba(56,189,248,0.22); }
}
.project-card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-card-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 2px 0;
  color: #2563eb;
}
.project-card-content p {
  font-size: 1.05rem;
  color: #334155;
  margin: 0;
}
@media (max-width: 900px) {
  .project-cards-wrapper {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .project-card {
    min-width: 90vw;
    max-width: 98vw;
    padding: 22px 10px 18px 10px;
    flex-direction: row;
    gap: 12px;
  }
  .project-icon {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
}
/* Experience Highlighted Text with Light Effect */
.exp-highlight {
  font-weight: 800;
  background: linear-gradient(90deg, #38bdf8, #fff, #2563eb, #f59e42, #38bdf8);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 16px #fff, 0 1px 0 #2563eb;
  animation: expLightEffect 3.5s linear infinite;
  display: inline-block;
}
@keyframes expLightEffect {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
/* Redesigned Experience Section Styles */
.exp-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: stretch;
  margin: 40px 0 0 0;
}
.exp-card {
  background: linear-gradient(120deg, #f8fafc 80%, #bae6fd 100%);
  color: #0f172a;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(56,189,248,0.10);
  padding: 32px 28px 24px 28px;
  min-width: 270px;
  max-width: 340px;
  flex: 1 1 300px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  transition: transform 0.3s cubic-bezier(.23,1.02,.64,.98), box-shadow 0.3s cubic-bezier(.23,1.02,.64,.98);
  cursor: pointer;
  border: 2px solid #e2e8f0;
}
.exp-card:hover {
  transform: translateY(-8px) scale(1.04) rotate(-1deg);
  box-shadow: 0 12px 40px 0 rgba(56,189,248,0.18);
  border-color: #38bdf8;
}
.exp-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  box-shadow: 0 2px 12px 0 rgba(56,189,248,0.12);
  margin-right: 8px;
  flex-shrink: 0;
  position: relative;
  animation: expIconPulse 2.5s infinite alternate;
}
.exp-hackathon::before {
  content: "\1F3C6";
  font-size: 2.1rem;
}
.exp-graphics::before {
  content: "\1F3A8";
  font-size: 2.1rem;
}
.exp-sololearn::before {
  content: "\1F4DD";
  font-size: 2.1rem;
}
.exp-sports::before {
  content: "\1F3C0";
  font-size: 2.1rem;
}
@keyframes expIconPulse {
  0% { box-shadow: 0 2px 12px 0 rgba(56,189,248,0.12); }
  100% { box-shadow: 0 6px 24px 0 rgba(56,189,248,0.22); }
}
.exp-card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exp-card-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 2px 0;
  color: #2563eb;
}
.exp-role {
  font-size: 1rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 6px;
}
.exp-card-content p {
  font-size: 1.05rem;
  color: #334155;
  margin: 0;
}
.exp-card-content a {
  color: #2563eb;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s;
}
.exp-card-content a:hover {
  color: #f59e42;
}
@media (max-width: 900px) {
  .exp-cards-wrapper {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .exp-card {
    min-width: 90vw;
    max-width: 98vw;
    padding: 22px 10px 18px 10px;
    flex-direction: row;
    gap: 12px;
  }
  .exp-icon {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
}
/* IMPORTING GOOGLE FONT: INTER TIGHT. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

/* DEFINING VARIABLES. */
:root {
    /* TEXT SIZES. */
    --h1: 52px;
    --h2: 28px;
    --h3: 22px;
    --nm: 17px;
    ---h1-mob: 32px;
    ---h2-mob: 26px;
    ---h3-mob: 22px;
    --nm-mob: 15px;

    /* COLORS. */
    --primary: #2563eb;
    --secondary: #38bdf8;
    --accent: #f59e42;
    --white: #f8fafc;
    --white-2: #e2e8f0;
    --black: #0f172a;
    --black-2: #334155;
    --gray: #64748b;
    --gray-2: #cbd5e1;

    /* SPACING. */
    --p-y: 70px;
    --p-x: 140px;
    --p-y-mob: 28px;
    --p-x-mob: 48px;

    /* TRANSITION TIME. */
    --time: .4s;
}

/* DEFAULTS. */
*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Inter Tight", sans-serif;
    letter-spacing: 2px;
}

/* BODY SETUP. */
html, body {
    background: linear-gradient(135deg, #0f172a 0%, #2563eb 100%);
    color: var(--white);
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    font-size: 17px;
    scroll-behavior: smooth;
}

/* NAVBAR: START. */

/* NAV. */
.nav {
    height: 80px;
    background: rgba(15, 23, 42, 0.95);
    color: var(--white);
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    z-index: 999 !important;
    padding: 0 40px;
    text-transform: uppercase;
    overflow: visible;
    box-shadow: 0 6px 24px 0 rgba(31, 41, 55, 0.12);
    backdrop-filter: blur(8px);
}

/* NAV CONTENTS. */
.nav .nav-contents {
    height: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* NAV TITLE. */
.nav .nav-contents .nav-title {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--primary);
    cursor: pointer;
    transition: color var(--time);
}
.nav .nav-contents .nav-title:hover {
    color: var(--accent);
}

/* NAV ITEMS. */
.nav .nav-contents .nav-items a {
    font-size: 17px;
    margin-left: 28px;
    text-decoration: none;
    color: var(--white);
    font-weight: 600;
    letter-spacing: 2px;
    position: relative;
    transition: color var(--time);
}
.nav .nav-contents .nav-items a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -4px;
}
.nav .nav-contents .nav-items a:hover {
    color: var(--primary);
}
.nav .nav-contents .nav-items a:hover::after {
    width: 100%;
}

/* HAMBURGER. */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--white);
    display: block;
    border-radius: 3px;
}

/* NAVBAR: END. */

/* ABOUT: START. */

/* ABOUT. */
#about {
    height: auto;
    background: linear-gradient(120deg, var(--white) 80%, var(--secondary) 100%);
    color: var(--black);
    padding: var(--p-y) var(--p-x);
    margin-top: 80px;
    border-radius: 0 0 32px 32px;
    box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.10);
    position: relative;
    background: linear-gradient(120deg, #e0f2fe 60%, #bae6fd 100%);
    box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.18);
    border-radius: 0 0 40px 40px;
    overflow: hidden;
    z-index: 1;
}

/* ABOUT CONTENTS. */
#about .about-contents {
    height: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    /* DESCRIPTION. */
    & .about-description {
        padding-right: calc(var(--p-x)/2);
        width: 600px;
        max-width: 600px;
        min-width: 200px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        & h1 {
            font-size: var(--h1);
            margin-bottom: 10px;
            font-weight: 900;
            color: var(--primary);
            letter-spacing: 2px;
        }

        & h3 {
            font-size: var(--h3);
            margin-bottom: 20px;
            color: var(--gray);
            font-weight: 600;
        }

        & p,
        blockquote {
            line-height: 1.7;
            margin-bottom: 10px;
            font-size: var(--nm);
            margin: 20px 0;
        }

        & blockquote {
            color: var(--black-2);
            background: var(--white-2);
            border-left: 4px solid var(--primary);
            padding: 8px 16px;
            border-radius: 6px;
            font-style: italic;
        }
    }

    /* IMAGE. */
    & .about-image {
        width: 100%;
        max-width: 500px;
        min-width: 100px;
        /*  Will shrink on smaller screens */
        aspect-ratio: 1 / 1;
        /* Keeps it square, you can tweak */
        background-image: url("../assets/images/Image.png");
        background-size: cover;
        background-position: center;
        border-radius: 10px;

        &:hover {
            cursor: pointer;
            box-shadow: 0 0 20px 5px var(--black-2);
            transition: var(--time);
        }
    }
}

/* About photo wrapper for new structure */
.about-contents {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
.about-photo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  position: relative;
  z-index: 1;
}
.about-photo-frame {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
  border-radius: 18px;
  box-shadow: 0 0 32px 0 rgba(56,189,248,0.18), 0 0 0 8px rgba(37,99,235,0.08);
  padding: 10px;
  animation: frameGlow 3s infinite alternate;
}
@keyframes frameGlow {
  0% {
    box-shadow: 0 0 32px 0 rgba(56,189,248,0.18), 0 0 0 8px rgba(37,99,235,0.08);
  }
  100% {
    box-shadow: 0 0 48px 8px rgba(56,189,248,0.28), 0 0 0 12px rgba(37,99,235,0.12);
  }
}
.styled-photo {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(31,41,55,0.18);
  border: 4px solid #fff;
  background: linear-gradient(135deg, #fff 60%, var(--secondary) 100%);
  transition: transform 0.5s cubic-bezier(.23,1.02,.64,.98), box-shadow 0.5s cubic-bezier(.23,1.02,.64,.98);
  z-index: 2;
}
.about-photo {
    width: 260px;
    height: 260px;
    object-fit: cover;
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(31,41,55,0.18);
    border: 4px solid var(--primary);
    display: block;
    margin: 0 auto;
    transition: transform 0.3s;
}
.styled-photo:hover {
  transform: scale(1.08) rotate(-3deg) translateY(-8px);
  box-shadow: 0 24px 64px rgba(31,41,55,0.28);
  border-radius: 0;
  border-color: var(--accent);
}
.about-photo:hover {
    transform: scale(1.04) rotate(-2deg);
    box-shadow: 0 12px 40px rgba(31,41,55,0.22);
}

/* Eye-catching ABOUT section enhancements */
#about {
  position: relative;
  background: linear-gradient(120deg, #e0f2fe 60%, #bae6fd 100%);
  box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.18);
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  z-index: 1;
}
#about::before {
  content: '';
  position: absolute;
  top: -40px; left: -40px; right: -40px; bottom: -40px;
  background: radial-gradient(circle at 30% 20%, #38bdf8 0%, transparent 60%),
              radial-gradient(circle at 80% 80%, #2563eb 0%, transparent 70%);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  animation: aboutBgMove 8s linear infinite alternate;
}
@keyframes aboutBgMove {
  0% { background-position: 30% 20%, 80% 80%; }
  100% { background-position: 40% 30%, 70% 70%; }
}

.about-photo-frame {
  animation: floatPhoto 3.5s ease-in-out infinite alternate;
}
@keyframes floatPhoto {
  0% { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-16px) scale(1.03); }
}

.about-description h1 {
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #0a1a44;
  background: none;
  /* removed invalid property */
  /* removed invalid property */
  margin-bottom: 0.2em;
  text-align: left;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 16px #fff, 0 1px 0 #2563eb;
  transition: letter-spacing 0.3s cubic-bezier(.23,1.02,.64,.98);
}
.about-description h1::after {
  content: '';
  display: block;
  width: 90px;
  height: 4px;
  margin: 0.4em 0 0 0;
  background: #2563eb;
  border-radius: 2px;
  opacity: 0.9;
  box-shadow: 0 2px 12px #fff8;
  animation: underlineSlide 2.2s infinite alternate;
}
@keyframes underlineSlide {
  0% { width: 60px; opacity: 0.7; }
  100% { width: 90px; opacity: 1; }
}
.about-description h1:hover {
  letter-spacing: 4px;
}
@media (max-width: 900px) {
  .about-description h1 {
    font-size: 2.1rem;
    letter-spacing: 1px;
  }
  .about-description h1::after {
    width: 48px;
    height: 3px;
  }
}

.about-description {
  background: rgba(255,255,255,0.85);
  border-radius: 18px;
  box-shadow: 0 4px 32px 0 rgba(56,189,248,0.10);
  padding: 32px 32px 24px 32px;
  position: relative;
  z-index: 2;
  transition: box-shadow 0.4s;
}
.about-description:hover {
  box-shadow: 0 8px 48px 0 rgba(56,189,248,0.18);
}

/* Highlighted about description with fade-in effect */
.about-highlight {
  font-size: 1.18rem;
  font-weight: 700;
  font-style: italic;
  background: linear-gradient(90deg, #38bdf8, #2563eb, #f59e42, #38bdf8);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding: 0.5em 0 0.5em 0;
  margin-bottom: 0.5em;
  opacity: 0;
  transform: translateY(24px);
  animation: aboutHighlightFadeIn 1.2s 0.2s ease-out forwards, aboutHighlightGradient 4s linear infinite, aboutHighlightWave 2.5s ease-in-out infinite;
  text-shadow: 0 2px 12px rgba(56,189,248,0.18), 0 1px 0 #fff;
  display: inline-block;
}
@keyframes aboutHighlightFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes aboutHighlightGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes aboutHighlightWave {
  0% { transform: translateY(0); }
  20% { transform: translateY(-4px) skewX(-2deg); }
  40% { transform: translateY(2px) skewX(2deg); }
  60% { transform: translateY(-2px) skewX(-1deg); }
  80% { transform: translateY(2px) skewX(1deg); }
  100% { transform: translateY(0); }
}

@media (max-width: 900px) {
  #about {
    border-radius: 0 0 24px 24px;
    padding: 24px 0;
  }
  .about-description {
    padding: 18px 10px 14px 10px;
  }
}

/* EXPERIENCE & AWARDS: START. */

/* EXPERIENCE & AWARDS. */
#experience,
#awards {
    background-color: var(--white-2);
    color: var(--black-2);
}

.experience-contents,
.awards-contents {
    display: flex;
    justify-content: space-between;

    & #contents-left {
        padding: calc(var(--p-y)*1.5) var(--p-x);
    }

    /* TITLE. */
    & .contents-title {
        font-size: 28px;
        margin-bottom: 20px;
        text-align: center;
        color: #38bdf8;
    }

    /* LEFT ITEMS. */
    #contents-left .experience-items,
    #contents-left .awards-items {
        display: flex;
        flex-direction: column;
        max-height: 200px;
        width: 500px;
        max-width: 500px;
        overflow-y: scroll;

        div {
            padding: 20px 15px;
            cursor: pointer;

            &:nth-child(odd) {
                background-color: var(--gray);
                color: var(--white-2);
            }

            &:hover,
            &.active {
                background-color: var(--black);
                color: var(--white);
                transition: var(--time);
            }
        }

        /* TITLE */
        & h3 {
            font-size: var(--h3);
            margin-bottom: 5px;
        }
    }

    /* RIGHT ITEMS. */
    #exp-contents-right,
    #awards-contents-right {
        background-color: var(--black);
        color: var(--gray-2);
        padding: calc(var(--p-y)*1.5) var(--p-x);

        /* TO SELECT ALL CHILD. */
        & * {
            margin-bottom: 20px;
            line-height: 30px;
        }

        & hr {
            margin-top: 10px;
            border-color: var(--gray-2);
        }

        & a {
            color: var(--white-2);
        }
    }
}

/* EXPERIENCE & AWARDS: END. */

/* PROJECTS: START. */

/* PROJECTS. */
#projects {
    background-color: var(--primary);
    /* border: solid 5px var(--primary); */
}

/* PROJECT CONTENTS. */
#projects .projects-contents {
    display: flex;
    align-items: center;

    /* TITLE. */
    & .contents-title {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);
        background-color: var(--primary);
        font-size: var(--h2);
        padding: 1rem;
    }

    /* PROJECT ITEMS. */
    & .project-items {
        display: flex;
        height: auto;
        cursor: pointer;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        /* Optional: snap to each item */
        /* PROJECTS */
        & div {
            background-color: var(--white);
            color: var(--black);
            height: auto;
            flex: 0 0 calc(100% / 3);
            padding: var(--p-x) calc(var(--p-x)/2);
            scroll-snap-align: start;
            /* Optional: makes snapping clean */

            &:nth-of-type(even) {
                background-color: var(--primary);
                color: var(--white);

                & blockquote,
                a {
                    color: var(--gray-2);
                }
            }

            /* HEADING. */
            & h2 {
                font-size: var(--h2);
                text-transform: uppercase;
                margin-bottom: 15px;
            }

            /* BLOCKQUOTE, PARAGRAPHS & LINKS. */
            & blockquote,
            p {
                font-size: var(--nm);
                margin-bottom: 10px;
            }

            & blockquote {
                color: var(--gray);
                text-transform: uppercase;
            }

            & p {
                letter-spacing: 2px;
                line-height: 30px;
            }

            & p a {
                color: var(--gray);
            }
        }
    }
}

/* PROJECTS: END. */

/* FOOTER/CONTACT: START. */

/* FOOTER/CONTACT. */
#contact {
    height: auto;
    background: linear-gradient(90deg, var(--black) 80%, var(--primary) 100%);
    color: var(--white);
    padding: var(--p-y) var(--p-x);
    text-transform: capitalize;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -8px 32px 0 rgba(31, 41, 55, 0.10);
}

/* FOOTER/CONTACT CONTENTS. */
#contact .contact-contents {
    height: inherit;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    align-content: center;

    /* ALL DIVS WITHIN (LINKS/CONNECT/CONTACT). */
    & div {
        display: flex;
        flex-direction: column;
    }

    /* H3 (LINKS/CONNECT/CONTACT). */
    & div h3 {
        padding-bottom: 15px;
        font-size: var(--h3);
    }

    /* LINKS (LINKS/CONNECT/CONTACT). */
    & div a {
        color: var(--white);
        text-decoration: none;
        padding: 5px 0;
        font-weight: 400;
        transition: color var(--time);
        position: relative;
    }
    & div a::after {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background: var(--secondary);
        transition: width 0.3s;
        position: absolute;
        left: 0;
        bottom: -2px;
    }

    & div a:hover {
        color: var(--secondary);
        font-weight: 700;
    }
    & div a:hover::after {
        width: 100%;
    }
}

/* FOOTER/CONTACT: END. */


/* RESPONSIVE SEGMENT: TABLET, MOBILE. */
@media (max-width: 1024px) {

    body {
        /* width: 100%; */
        /* border: solid 5px yellow; */
        background-color: var(--white);
    }

    /* NAVBAR: START. */

    /* NAVBAR. */
    .nav{
        width: inherit;
        padding: 0 var(--p-x-mob);
    }

    /* HAMBURGER. */
    .hamburger {
        display: flex;
    }

    .nav-items {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100px;
        /* SHOULD MATCH NAVBAR'S HEIGHT NAVBAR. */
        right: 50px;
        background-color: var(--primary);
        padding: 2rem;
        /* border-radius: 8px; */
        z-index: 999;
        /* TO ENSURE THAT IT IS ALWAYS ON TOP. */
        gap: 1rem;
        opacity: .9;
    }

    .nav-items.active {
        display: flex;
    }

    /* NAVBAR: END. */


    /* ABOUT: START. */

    /* ABOUT CONTENTS. */

    #about {
        margin: 0;
        padding: 0;
        margin-top: 100px;
    }

    #about .about-contents {
        flex-direction: column-reverse;
        justify-content: center;
        gap: 2rem;
        margin: 0;
        padding: 0;
    }
    .about-description{
        /* padding: var(--p-y-mob) var(--p-x-mob); */
        /* background-color: red; */
        /* width: fit-content; */
        
        margin: 0;
        padding: var(--p-y-mob) var(--p-x-mob);
        width: 100% !important;
        text-align: center;

        & h1{
            font-size: var(---h1-mob) !important;
            margin: 0;
            padding: 0;
        }

        & h3{
            font-size: var(---h3-mob) !important;
            margin: 0;
            padding: 0;
        }

        & p, blockquote{
            font-size: var(--nm-mob) !important;
            margin: 0;
        }

    }

    .about-image{
        border-radius: 0 !important;
    }

    /* ABOUT: END. */

    /* EXPERIENCE & AWARDS: START. */

    /* EXPERIENCE & AWARDS. */
    #experience,
    #awards {
        background-color: var(--white-2);
        color: var(--black-2);
    }

    /* CONTENTS. */
    .experience-contents,
    .awards-contents {
        display: flex;
        flex-direction: column;
    }

    /* LEFT ITEMS. */

    .experience-contents #contents-left, .awards-contents #contents-left{
        padding: 1.5rem;
        & .contents-title{
            margin-top: 30px;
        }
    }
    .experience-contents #contents-left .experience-items,
    .awards-contents #contents-left .awards-items {
        display: flex;
        flex-direction: row;
        flex-basis: 3fr;
        width: 100% !important;
        padding: 0 !important;
        
        min-height: 60px;
        height: 100%;
        max-height: 120px;
    }

    #contents-left .experience-items div,
    #contents-left .awards-items div{
        min-width: 250px !important;
        width: 500px !important;
        & p{
            display: none;
        }
    }

    /* RIGHT ITEMS. */
    #exp-contents-right,
    #awards-contents-right {
        /* flex: 0 0 3fr; */
        height: auto;
        padding: 0;
        margin: 0;
        min-height: 300px;
        height: 100%;
        max-height: 600px;
        overflow-y: scroll;
        overflow-x: hidden;
        & div{
            padding: 25px 0;
            margin: -5em;
        }

        & h2 {
            margin-top: 30px;
        }
    }

    /* EXPERIENCE & AWARDS: END. */


    /* PROJECTS: START. */

    /* PROJECT CONTENTS. */

    #projects .projects-contents, #projects .projects-contents .project-items{
        min-height: 400px;
        height: 100%;
        max-height: 600px;
    }


    #projects .projects-contents .project-items div {
        /* 
        BETTER FOR TABLET:
        flex: 0 0 calc(100%/2); 
        */
        flex: 0 0 100%;
        /* padding: 0; */
        margin: 0;
        min-height: 400px;
        max-height: 600px;
        height: 100%;
        overflow-y: scroll;
    }

    /* PROJECTS: END. */


    /* FOOTER: START. */
    /* FOOTER/CONTACT CONTENTS. */
    #contact{
        padding: var(--p-y) var(--p-x-mob);
        background-color: var(--primary);
    }

    #contact .contact-contents {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    /* FOOTER: END. */

}

/* Add this to styles/style.css */
.about-photo {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(31,41,55,0.18);
    border: 4px solid var(--primary);
    display: block;
    margin: 0 auto;
    transition: transform 0.3s;
}
.about-photo:hover {
    transform: scale(1.04) rotate(-2deg);
    box-shadow: 0 12px 40px rgba(31,41,55,0.22);
}

/* Add padding to sections for better spacing */
section {
    padding: 40px 20px;
}

footer {
    background-color: #0f172a;
    color: #f8fafc;
    padding: 20px;
    text-align: center;
    font-size: 14px;
}
    
/* Style for the resume button */
.resume-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 32px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(31,41,55,0.10);
    transition: background 0.3s, transform 0.2s;
    letter-spacing: 1px;
    border: none;
}
.resume-button:hover {
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    transform: translateY(-2px) scale(1.04);
    color: var(--accent);
}

/* Remove 3D Animation for Main Sections, Navbar, and Footer */
section, .nav, footer {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  will-change: auto !important;
}

body {
  perspective: none !important;
}

/* Remove 3D Card Animation for Experience, Project, and Resume Cards */
.experience-items div, .project-items div, .resume-card, .resume-front, .resume-back {
  perspective: none !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Restore 3D Card Animation for Resume Card Only */
.resume-section {
  margin-top: 32px;
  display: flex;
  justify-content: flex-start;
}
.resume-card {
  width: 340px;
  height: 220px;
  perspective: 1200px;
  position: relative;
  overflow: hidden;
}
.resume-front, .resume-back {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: linear-gradient(120deg, var(--primary) 60%, var(--secondary) 100%);
  color: #fff;
  box-shadow: 0 8px 32px rgba(31,41,55,0.18);
  position: absolute;
  top: 0; left: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.7s cubic-bezier(.4,2,.3,1), box-shadow 0.4s, opacity 0.5s, left 0.7s cubic-bezier(.4,2,.3,1);
}
.resume-front {
  z-index: 2;
  transform: translateX(0);
  opacity: 1;
}
.resume-back {
  transform: translateX(100%);
  background: linear-gradient(120deg, var(--secondary) 60%, var(--primary) 100%);
  color: var(--black);
  padding: 0;
  opacity: 0;
}
.resume-card.flipped .resume-front {
  transform: translateX(-100%);
  opacity: 0;
}
.resume-card.flipped .resume-back {
  transform: translateX(0);
  z-index: 3;
  opacity: 1;
}
.resume-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.resume-flip-btn {
  margin-top: 18px;
  padding: 8px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  background: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31,41,55,0.10);
  transition: background 0.2s, color 0.2s;
}
.resume-flip-btn:hover {
  background: var(--accent);
  color: #fff;
}
.resume-preview {
  width: 95%;
  height: 90px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: none;
  box-shadow: 0 2px 8px rgba(31,41,55,0.10);
}
.resume-back .resume-button {
  margin-top: 0;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(31,41,55,0.10);
  transition: background 0.2s;
}
.resume-back .resume-button:hover {
  background: var(--secondary);
  color: var(--accent);
}
@media (max-width: 600px) {
  .resume-card {
    width: 98vw;
    height: 180px;
  }
  .resume-preview {
    height: 60px;
  }
}

/* Slide-in effect for skills blockquote in about section */
.about-description blockquote {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s cubic-bezier(.23,1.02,.64,.98), transform 0.7s cubic-bezier(.23,1.02,.64,.98);
}
.about-description.blockquote-visible blockquote {
  opacity: 1;
  transform: translateX(0);
}