/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --dark-blue: #070720;
  --medium-blue: #0d0d2d;
  --text-color: #ffffff;
  --accent-color: #b396e3; /* Light purple accent color */
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-color);
  background-color: var(--dark-blue);
  background-image: 
    linear-gradient(to bottom, var(--dark-blue), var(--medium-blue)),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 30px 30px, 30px 30px;
  min-height: 100vh;
  line-height: 1.6;
}

/* Navigation Bar */
.navbar {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
  width: 100%;
}

.nav-container {
  background-color: rgba(8, 8, 30, 0.7);
  border-radius: 50px;
  padding: 1rem 3rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 90%;
  max-width: 700px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

/* Add a subtle gradient overlay for the glass effect */
.nav-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(115deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    rgba(255, 255, 255, 0.02) 40%, 
    rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
  z-index: -1;
  border-radius: 50px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  width: 100%;
  position: relative;
}

.nav-links li {
  margin: 0 10px;
}

.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent-color);
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: var(--accent-color);
  border-radius: 2px;
  opacity: 0.8;
}

.nav-links a.email-button {
  background-color: var(--accent-color);
  color: var(--medium-blue);
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.nav-links a.email-button:hover {
  background-color: #c7aef0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(179, 150, 227, 0.3);
}

/* Hero Heading Styles */
.subtitle {
  text-align: center;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.hero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
  margin: 2rem 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
}

.accent {
  color: var(--accent-color);
  display: inline-block;
}

.intro-text {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  text-align: center;
  margin-bottom: 4.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}

/* Main content and footer */
main {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
}

/* CTA Button Styles */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(13, 13, 45, 0.6);
  color: var(--text-color);
  font-size: 1.2rem;
  font-weight: 500;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  min-width: 200px;
}

.cta-button:hover {
  transform: translateY(-3px);
  background-color: rgba(20, 20, 60, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.arrow {
  margin-left: 8px;
  font-size: 1.4rem;
  transition: transform 0.3s ease;
}

.cta-button:hover .arrow {
  transform: translateX(4px);
}

footer {
  text-align: center;
  padding: 2rem;
  margin-top: auto;
  color: rgba(255, 255, 255, 0.7);
}

/* Feature Cards Section */
.feature-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 1400px;
  margin: 10rem auto;
  padding: 0 2rem;
  height: 350px;
}

@media (min-width: 768px) {
  .feature-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card-left, .card-right {
  background-color: rgba(15, 15, 40, 0.7);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  min-height: 300px;
}

.card-left:hover, .card-right:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* The first card spans full width on mobile and tablet */
.card-left {
  grid-column: 1 / -1;
  height: 450px;
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(to bottom, rgba(15, 15, 40, 0.3), rgba(15, 15, 40, 0.9)), 
                    url('https://images.unsplash.com/photo-1581089781785-603411fa81e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80');
  background-size: cover;
  background-position: center;
}

.card-right {
  height: 300px;
  display: flex;
  align-items: center;
}

.card-content {
  padding: 2rem;
  width: 100%;
}

.card-left .card-content h2 {
  color: white;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  max-width: 80%;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.card-right .card-content h2 {
  color: white;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.card-right .card-content h3 {
  color: white;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  margin: 1rem 0;
}

/* Globe graphic placeholder */
.globe-graphic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #4a40b0, #291e75);
  margin-top: 1.5rem;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.globe-graphic::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,60 A60,60 0 1,1 120,60 A60,60 0 1,1 0,60 Z' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3Cpath d='M30,60 A30,30 0 1,1 90,60 A30,30 0 1,1 30,60 Z' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3Cpath d='M0,60 L120,60' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3Cpath d='M60,0 L60,120' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.6;
}

/* Tech stack badges */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.tech-badge {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tech-badge:hover {
  background-color: var(--accent-color);
  transform: translateY(-2px);
}

/* Skills Grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  max-width: 90%;
}

.skill-row {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.skill-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background-color: #151531;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.skill-item p {
  font-size: 0.8rem;
  color: white;
  margin-top: 0.5rem;
  font-weight: 500;
}

.skill-icon:hover {
  transform: translateY(-5px) scale(1.15);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* Technology Icons */
.js-icon {
  background-color: #1e1e3b;
}

.js-icon::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f7df1e;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.js-icon::after {
  content: 'JS';
  position: relative;
  color: #1e1e3b;
  font-weight: bold;
  font-size: 20px;
  z-index: 1;
  text-align: center;
}

.nextjs-icon {
  background-color: #1e1e3b;
}

.nextjs-icon::before {
  content: 'N';
  font-size: 32px;
  font-weight: bold;
  color: white;
}

.react-icon {
  background-color: #1e1e3b;
}

.react-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11.5 -10.23174 23 20.46348'%3E%3Ccircle cx='0' cy='0' r='2.05' fill='%2361dafb'/%3E%3Cg stroke='%2361dafb' stroke-width='1' fill='none'%3E%3Cellipse rx='11' ry='4.2'/%3E%3Cellipse rx='11' ry='4.2' transform='rotate(60)'/%3E%3Cellipse rx='11' ry='4.2' transform='rotate(120)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.html-icon {
  background-color: #1e1e3b;
}

.html-icon::before {
  content: '';
  position: absolute;
  width: 32px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23E44D26' d='M107.6 470.9l-33-370.3h362.8l-33 370.2L255.7 512z'/%3E%3Cpath fill='%23F16529' d='M256 480.5l120.3-33.3 28.3-316.3H256z'/%3E%3Cpath fill='%23EBEBEB' d='M256 268.2h-60.1l-4.1-46.5H256v-45.4H142.1l1.1 12.2 11.2 125.1H256zM256 386.2h-.2l-50.6-13.6-3.2-36.3h-45.6l6.4 71.3 93 25.9.2-.1z'/%3E%3Cpath fill='%23FFF' d='M255.8 268.2v45.4h55.7l-5.2 59-50.5 13.6v47.2l93-25.8.7-7.6 10.7-119.6 1.1-12.2h-105.5zM255.8 176.3v45.4H365.5l1-10.2 2.1-23 1.1-12.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.css-icon {
  background-color: #1e1e3b;
}

.css-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%231572B6' d='M5.902 27.201L3.656 2h24.688l-2.249 25.197L15.985 30L5.902 27.201z'/%3E%3Cpath fill='%2333A9DC' d='M16 27.858l8.17-2.265l1.922-21.532H16v23.797z'/%3E%3Cpath fill='%23fff' d='M16 13.191h4.09l.282-3.165H16V6.935h7.75l-.074.829l-.759 8.518H16v-3.091z'/%3E%3Cpath fill='%23EBEBEB' d='M16.019 21.218l-.014.004l-3.442-.93l-.22-2.465H9.24l.433 4.853l6.331 1.758l.015-.004v-3.216z'/%3E%3Cpath fill='%23fff' d='M19.827 16.151l-.372 4.139l-3.447.93v3.216l6.336-1.756l.047-.522l.537-6.007h-3.101z'/%3E%3Cpath fill='%23EBEBEB' d='M16.011 6.935v3.091H8.545l-.062-.695l-.141-1.567l-.074-.829h7.743zM16 13.191v3.091H12.601l-.062-.695l-.14-1.567l-.074-.829H16z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.nodejs-icon {
  background-color: #1e1e3b;
}

.nodejs-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2368a063' d='M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.tailwind-icon {
  background-color: #1e1e3b;
}

.tailwind-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9,13.7q1.4-5.6,7-5.6c5.6,0,6.3,4.2,9.1,4.9q2.8.7,4.9-2.1-1.4,5.6-7,5.6c-5.6,0-6.3-4.2-9.1-4.9Q11.1,10.9,9,13.7ZM2,22.1q1.4-5.6,7-5.6c5.6,0,6.3,4.2,9.1,4.9q2.8.7,4.9-2.1-1.4,5.6-7,5.6c-5.6,0-6.3-4.2-9.1-4.9Q4.1,19.3,2,22.1Z' fill='%2338bdf8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.mongodb-icon {
  background-color: #1e1e3b;
}

.mongodb-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='8.738 -5.03622834 17.45992422 39.40619484' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15.9.087.854 1.604c.192.296.4.558.645.802a22.406 22.406 0 0 1 2.004 2.266c1.447 1.9 2.423 4.01 3.12 6.292.418 1.394.645 2.824.662 4.27.07 4.323-1.412 8.035-4.4 11.12a12.7 12.7 0 0 1 -1.57 1.342c-.296 0-.436-.227-.558-.436a3.589 3.589 0 0 1 -.436-1.255c-.105-.523-.174-1.046-.14-1.586v-.244c-.024-.052-.285-24.052-.181-24.175z' fill='%23599636'/%3E%3Cpath d='m15.9.034c-.035-.07-.07-.017-.105.017.017.35-.105.662-.296.96-.21.296-.488.523-.767.767-1.55 1.342-2.77 2.963-3.747 4.776-1.3 2.44-1.97 5.055-2.16 7.808-.087.993.314 4.497.627 5.508.854 2.684 2.388 4.933 4.375 6.885.488.47 1.01.906 1.55 1.325.157 0 .174-.14.21-.244a4.78 4.78 0 0 0 .157-.68l.35-2.614z' fill='%236cac48'/%3E%3Cpath d='m16.754 28.845c.035-.4.227-.732.436-1.063-.21-.087-.366-.26-.488-.453a3.235 3.235 0 0 1 -.26-.575c-.244-.732-.296-1.5-.366-2.248v-.453c-.087.07-.105.662-.105.75a17.37 17.37 0 0 1 -.314 2.353c-.052.314-.087.627-.28.906 0 .035 0 .07.017.122.314.924.4 1.865.453 2.824v.35c0 .418-.017.33.33.47.14.052.296.07.436.174.105 0 .122-.087.122-.157l-.052-.575v-1.604c-.017-.28.035-.558.07-.82z' fill='%23c2bfbf'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.express-icon {
  background-color: #1e1e3b;
}

.express-icon::before {
  content: 'ex';
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-transform: lowercase;
}

.shadcn-icon {
  background-color: #1e1e3b;
}

.shadcn-icon::before {
  content: '/';
  font-size: 32px;
  font-weight: 300;
  color: white;
}

.sass-icon {
  background-color: #1e1e3b;
}

.sass-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 384'%3E%3Cpath fill='%23CD6799' d='M440.6 220.6c-17.9.1-33.4 4.4-46.4 10.8-4.8-9.5-9.6-17.8-10.4-24-.9-7.2-2-11.6-.9-20.2s6.1-20.8 6.1-21.8c-.1-.9-1.1-5.3-11.4-5.4-10.3-.1-19.2 2-20.2 4.7s-3 8.9-4.3 15.3c-1.8 9.4-20.6 42.7-31.3 60.2-3.5-6.8-6.5-12.8-7.1-17.6-.9-7.2-2-11.6-.9-20.2s6.1-20.8 6.1-21.8c-.1-.9-1.1-5.3-11.4-5.4-10.3-.1-19.2 2-20.2 4.7s-2.1 8.9-4.3 15.3c-2.1 6.2-27.1 61.8-33.6 76.3-3.3 7.4-6.2 13.3-8.3 17.3s-.1.3-.3.7c-1.8 3.4-2.8 5.3-2.8 5.3v.1c-1.4 2.5-2.9 4.9-3.6 4.9-.5 0-1.5-6.7.2-15.9 3.7-19.3 12.7-49.4 12.6-50.5 0-.5 1.7-5.8-5.8-8.5-7.3-2.7-9.9 1.8-10.5 1.8-.6 0-1.1 1.6-1.1 1.6s8.1-33.9-15.5-33.9c-14.8 0-35.2 16.1-45.3 30.8-6.4 3.5-20 10.9-34.4 18.8-5.5 3-11.2 6.2-16.6 9.1l-1.1-1.2c-28.6-30.5-81.5-52.1-79.3-93.1.8-14.9 6-54.2 101.6-101.8 78.3-39 141-28.3 151.9-4.5 15.5 34-33.5 97.2-114.9 106.3-31 3.5-47.3-8.5-51.4-13-4.3-4.7-4.9-4.9-6.5-4-2.6 1.4-1 5.6 0 8.1 2.4 6.3 12.4 17.5 29.4 23.1 14.9 4.9 51.3 7.6 95.3-9.4 49.3-19.1 87.8-72.1 76.5-116.4-11.5-45.1-86.3-59.9-157-34.8-42.1 15-87.7 38.4-120.5 69.1-39 36.4-45.2 68.2-42.6 81.4 9.1 47.1 74 77.8 100 100.5-1.3.7-2.5 1.4-3.6 2-13 6.4-62.5 32.3-74.9 59.7-14 31 2.2 53.3 13 56.3 33.4 9.3 67.6-7.4 86.1-34.9 18.4-27.5 16.2-63.2 7.7-79.5l-.3-.6 10.2-6c6.6-3.9 13.1-7.5 18.8-10.6-3.2 8.7-5.5 19-6.7 34-1.4 17.6 5.8 40.4 15.3 49.4 4.2 3.9 9.2 4 12.3 4 11 0 16-9.1 21.5-20 6.8-13.3 12.8-28.7 12.8-28.7s-7.5 41.7 13 41.7c7.5 0 15-9.7 18.4-14.7v.1s.2-.3.6-1c.8-1.2 1.2-1.9 1.2-1.9v-.2c3-5.2 9.7-17.1 19.7-36.8 12.9-25.4 25.3-57.2 25.3-57.2s1.2 7.8 4.9 20.6c1.9 6.5 5.7 13.6 9.1 20.6-14.8 12.1-24.1 26.1-27.3 35.3-5.9 17-1.3 24.7 7.4 26.5 3.9.8 9.5-1 13.7-2.8 5.2-1.7 11.5-4.6 17.3-8.9 10-7.4 19.6-17.7 19.1-31.6-.3-6.4-2-12.7-4.3-18.7 12.6-5.2 28.9-8.2 49.6-5.7 44.5 5.2 53.3 33 51.6 44.6-1.7 11.6-11 18-14.1 20-3.1 1.9-4.1 2.6-3.8 4 .4 2.1 1.8 2 4.5 1.6 3.7-.6 23.4-9.5 24.2-30.9 1.2-27.5-24.9-57.5-71.2-57.2zm-343.2 115.7c-14.7 16.1-35.4 22.2-44.2 17-9.5-5.5-5.8-29.2 12.3-46.3 11-10.4 25.3-20 34.7-25.9 2.1-1.3 5.3-3.2 9.1-5.5 .6-.4 1-.6 1-.6 .7-.4 1.5-.9 2.3-1.4 6.7 24.4 .3 45.8-15.2 62.7zm107.5-73.1c-5.1 12.5-15.9 44.6-22.4 42.8-5.6-1.5-9-25.8-1.1-49.8 4-12.1 12.5-26.5 17.5-32.1 8.1-9 16.9-12 19.1-8.3 2.6 4.8-9.9 39.6-13.1 47.4zm88.7 42.4c-2.2 1.1-4.2 1.9-5.1 1.3-.7-.4 .9-1.9 .9-1.9s11.1-11.9 15.5-17.4c2.5-3.2 5.5-6.9 8.7-11.1v1.2c0 14.4-13.8 24-20 27.9zm68.4-15.6c-1.6-1.2-1.4-4.9 4-16.5 2.1-4.6 6.9-12.3 15.2-19.6 1 3 1.6 5.9 1.5 8.6-.1 18-12.9 24.7-20.7 27.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.postgres-icon {
  background-color: #1e1e3b;
}

.postgres-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0' fill='%231e1e3b'/%3E%3Cpath d='M22.9,19.52c-.24,1.88-.44,2.21-1.17,1.91l-2.69-.65-3-6.91V17.4c0,1.94.1,2.06,1.46,2.37v.49H13.39V19.8c1.28-.23,1.38-.43,1.38-2.37V10.76c0-1.91-.12-2.08-1.33-2.37V7.91h4.35l3.36,7.69V11.93c0-1.94-.1-2.06-1.46-2.37V9.07H23.4v.49c-1.28.23-1.38.43-1.38,2.37zM8.4,19.9H7.49V21.5Z' fill='%233e7fc1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.aws-icon {
  background-color: #1e1e3b;
}

.aws-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M15.63 31.388l-7.135-2.56V18.373l7.135 2.43zm1.3 0l7.135-2.56V18.373l-7.135 2.432zm-7.7-13.8l7.2-2.033 6.696 2.16-6.696 2.273zm-2.092-.8L0 14.22V3.75l7.135 2.43zm1.307 0l7.135-2.56V3.75L8.443 6.192zm-7.7-13.8l7.2-2.043 6.696 2.16-6.696 2.273z' fill='%23f90'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.Github-icon {
  background-color: #1e1e3b;
}

.Github-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 0a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.1-.4-.6-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4.7 18.3 5 18.3 5c.7 1.6.2 2.9.1 3.2.8.8 1.3 1.9 1.3 3.2 0 4.6-2.9 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.docker-icon {
  background-color: #1e1e3b;
}

.docker-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%232496ED' d='M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.flask-icon {
  background-color: #1e1e3b;
}

.flask-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 329' preserveAspectRatio='xMinYMin meet'%3E%3Cpath d='M76.501 203.351c-9.75-7.67-20.153-15.02-27.26-25.377-14.961-18.264-26.477-39.405-34.35-61.625-4.76-14.45-6.39-29.941-12.53-43.83-6.414-10.091 1.105-21.114 12.157-24.32 4.917-.948 13.568-5.59 3.125-2.268-9.364 6.866-10.266-6.24-.666-7.07 6.552-.869 8.964-6.23 6.721-11.056-7.036-4.59 17.055-9.626 4.932-16.473-12.62-13.62 17.66-16.242 10.188-.771-1.786 11.895 21.166-2.185 15.836 11.554 5.415 6.599 20.272 1.505 19.899 10.757 7.886.542 10.593 7.677 3.466 21.58 6.192 24.188 14.837-7.61 6.023-25.227-12.443-26.078 4.232 2.302 24.638 1.715 50.017 10.726 73.478 4.262 14.204 14.6 25.385 23.931 36.45 8.933 10.834 21.03 18.466 33.363 24.887 10.815 5.1 22.475 8.48 34.265 10.606 4.78-3.656 13.221-17.25 20.675-11.522.36 6.449-14.796 13.471-.711 12.758 8.278-2.498 14.013 6.394 20.826-1.629 6.278 7.436 26.09-4.747 21.625 10.45-6.042 3.898-14.85 1.543-20.898 6.906-9.972-4.983-17.912 4.453-28.956 3.263-12.26 2.196-24.738 3.08-37.167 3.098-20.396-1.609-41.222-2.288-60.624-9.39-10.933-3.176-21.598-9.402-31.205-15.628z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.firebase-icon {
  background-color: #1e1e3b;
}

.oracle-icon {
  background-color: #1e1e3b;
}

.oracle-icon::before {
  content: '';
  position: absolute;
  width: 44px;
  height: 47px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 67' preserveAspectRatio='xMidYMid'%3E%3Cpath d='M221.034 43.303h33.832l-17.889-28.781-32.833 52.037h-14.942l39.935-62.508c1.736-2.525 4.63-4.051 7.84-4.051 3.104 0 5.998 1.473 7.682 3.946l40.093 62.613H269.81l-7.05-11.628h-34.253l-7.472-11.628zM376.251 54.93V.631h-12.68v59.614c0 1.631.631 3.21 1.841 4.42s2.841 1.894 4.63 1.894h57.825l7.472-11.628H376.25zm-209.78-9.734c12.313 0 22.31-9.944 22.31-22.256 0-12.313-9.997-22.31-22.31-22.31h-55.473V66.56h12.676v-54.3h41.956c5.893 0 10.628 4.789 10.628 10.682 0 5.892-4.735 10.68-10.628 10.68l-35.747-.052 37.851 32.99h18.416l-25.466-21.362h5.788zM32.97 66.559C14.77 66.56 0 51.827 0 33.622 0 15.416 14.77.632 32.97.632h38.32c18.204 0 32.963 14.784 32.963 32.99 0 18.205-14.759 32.937-32.964 32.937H32.97zm37.468-11.628c11.791 0 21.341-9.524 21.341-21.31 0-11.785-9.55-21.361-21.341-21.361h-36.62c-11.787 0-21.342 9.576-21.342 21.362 0 11.785 9.555 21.309 21.341 21.309h36.62zm240.78 11.628c-18.204 0-32.99-14.732-32.99-32.937 0-18.206 14.786-32.99 32.99-32.99h45.514l-7.42 11.628H312.06c-11.786 0-21.362 9.576-21.362 21.362 0 11.785 9.576 21.309 21.362 21.309h45.723l-7.472 11.628h-39.093zm155.06-11.628c-9.734 0-17.995-6.524-20.52-15.522h54.194l7.471-11.628h-61.665c2.525-8.945 10.786-15.521 20.52-15.521h37.2L511 .63h-45.565c-18.205 0-32.99 14.785-32.99 32.99 0 18.206 14.785 32.938 32.99 32.938h39.094L512 54.931h-45.723z' fill='%23EA1B22'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.firebase-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5.8 24.6l.17-.237 8.02-15.214.017-.161-3.535-6.64a.656.656 0 00-1.227.207z' fill='%23ffc24a'/%3E%3Cpath d='M5.9 24.42l.128-.25 7.937-15.056-3.526-6.666a.6.6 0 00-1.133.206z' fill='%23ffa712'/%3E%3Cpath d='M16.584 14.01l2.632-2.7-2.633-5.021a.678.678 0 00-1.195 0l-1.407 2.682v.228z' fill='%23f4bd62'/%3E%3Cpath d='M16.537 13.9l2.559-2.62-2.559-4.88a.589.589 0 00-1.074-.047l-1.414 2.729-.042.139z' fill='%23ffa50e'/%3E%3Cpath d='M5.802 24.601l.077-.078.279-.306 10.26-10.26.13-.339-2.559-4.875z' fill='%23f6820c'/%3E%3Cpath d='M16.912 29.756l9.288-5.179-2.654-16.331a.635.635 0 00-1.075-.346L5.8 24.6l9.233 5.155a1.927 1.927 0 001.878 0' fill='%23fde068'/%3E%3Cpath d='M26.115 24.534L23.483 8.326a.557.557 0 00-.967-.353L5.9 24.42l9.131 5.1a1.912 1.912 0 001.863 0z' fill='%23fcca3f'/%3E%3Cpath d='M16.912 29.6a1.927 1.927 0 01-1.878 0L5.87 24.522l-.07.078 9.233 5.155a1.927 1.927 0 001.878 0l9.288-5.179-.015-.094z' fill='%23eeab37'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.python-icon {
  background-color: #1e1e3b;
}

.python-icon::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%233c78aa;%7D.cls-2%7Bfill:%23ffde57;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-2' d='M15.885 2.1c-7.1 0-6.651 3.07-6.651 3.07v3.19h6.752v.98H6.545S2 8.78 2 16.005s4.013 6.912 4.013 6.912h2.396v-3.328s-.13-4.013 3.9-4.013h6.715s3.762.083 3.762-3.68V5.8s.573-3.7-6.901-3.7zm-3.762 2.137a1.2 1.2 0 1 1-1.197 1.197z'/%3E%3Cpath class='cls-1' d='M16.005 29.9c7.1 0 6.651-3.08 6.651-3.08v-3.19h-6.751v-.98h9.47S30 23.214 30 15.99s-4.013-6.912-4.013-6.912h-2.4v3.344s.13 4.013-3.9 4.013h-6.75s-3.762-.084-3.762 3.667v6.155S8.609 29.9 16.005 29.9zm3.762-2.137a1.2 1.2 0 1 1 1.197-1.197 1.2 1.2 0 0 1-1.197 1.197z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Projects Section */
.projects-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  width: 80%;
  margin: 0 auto;
  padding: 2rem 0;
}

.project-card {
  width: 100%;
  background-color: rgba(15, 15, 40, 0.7);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 400px;
  position: relative;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.project-image {
  position: absolute;
  right: -10%;
  bottom: 15%;
  width: 42%;
  height: 70%;
  overflow: hidden;
  border-radius: 16px;
  background-color: rgba(15, 15, 40, 0.9);
  transition: all 0.3s ease;
  z-index: 1;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.project-image img {
  width: 60%;
  height: 90%;
  object-fit: contain;
  border-radius: 16px;
}

/* Glass overlay for hover effect */
.project-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 15, 40, 0.3);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: all 0.4s ease;
  pointer-events: none;
  border-radius: 16px;
  opacity: 0;
  z-index: 2;
}

.project-card:hover::after {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 1;
}

/* On hover: image expands and stays centered */
.project-card:hover .project-image {
  width: 70%;
  height: 100%;
  background-color: rgba(15, 15, 40, 0.6);
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 3;
}

.project-content {
  padding: 2rem;
  width: 65%;
  display: flex;
  flex-direction: column;
  z-index: 0;
  position: relative;
}

.project-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: white;
  letter-spacing: -0.5px;
}

.project-description {
  color: #c2c2d6;
  font-size: 1.1rem;
  margin-bottom: 2rem;
  flex: 1;
  line-height: 1.6;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.project-tech-item {
  background-color: #151531;
  color: #a5a5c8;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.project-tech-item:hover {
  background-color: #1e1e45;
  transform: translateY(-2px);
}

.project-links {
  display: flex;
  gap: 1.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.project-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--accent-color);
  font-size: 1.1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.5rem 0;
}

.project-link:hover {
  color: white;
  transform: translateX(5px);
}

.project-link svg {
  width: 20px;
  height: 20px;
}

/* Card Flip Animation */
.flip-card {
  perspective: 1000px;
  height: 400px;
  cursor: pointer;
  margin-bottom: 2rem;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 15px;
  overflow: hidden;
  background-color: #0d0d2d;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

.flip-card-front {
  background: linear-gradient(145deg, #12122e, #1a1a39);
}

.flip-card-back {
  background-color: rgba(15, 15, 40, 0.95);
  transform: rotateY(180deg);
  overflow-y: auto;
  padding: 1.5rem;
}

.flip-card h2 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: white;
}

.flip-card h3 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: white;
}

.flip-card-back .skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 0;
  width: 100%;
  overflow-y: auto;
  max-height: 100%;
  padding: 0.5rem;
}

.flip-card-back .skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flip-card-back .skill-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5rem;
}

/* Work Experience Styles */
.work-experience {
  margin-top: 1.5rem;
  text-align: left;
  max-height: 100%;
  overflow-y: auto;
}

.experience-title {
  color: var(--accent-color);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.5rem;
}

.job {
  margin-bottom: 1.2rem;
}

.job h3 {
  font-size: 1.1rem;
  color: var(--text-color);
  margin-bottom: 0.3rem;
}

.job-duration {
  font-size: 0.85rem;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
  font-style: italic;
}

.job-details {
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.job-details li {
  margin-bottom: 0.4rem;
  line-height: 1.4;
}

.contact-info {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--accent-color);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 0.5rem;
}

@media (max-width: 768px) {
  .project-card {
    flex-direction: column;
    height: auto;
  }
  
  .project-image {
    width: 100%;
    height: 250px;
    position: relative;
    order: 1;
  }
  
  .project-content {
    width: 100%;
    order: 2;
  }
  
  .flip-card {
    height: 420px;
  }
  
  .flip-card-back .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .flip-card-back .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
  color: white;
  font-weight: 700;
}

.section {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 0;
}

/* Work Experience Timeline */
.timeline-section {
  padding: 4rem 0;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-color);
  left: 50px;
  margin-left: -2px;
  border-radius: 2px;
}

.timeline-item {
  padding: 2rem 0;
  position: relative;
  width: 100%;
  display: flex;
}

.timeline-dot {
  position: absolute;
  left: 50px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-color);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(179, 150, 227, 0.2);
  z-index: 1;
}

.timeline-content {
  margin-left: 80px;
  background: rgba(15, 15, 40, 0.7);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: calc(100% - 80px);
}

.timeline-date {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.8rem;
  background: rgba(179, 150, 227, 0.1);
  border-radius: 20px;
}

.timeline-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--text-color);
}

.timeline-subtitle, .timeline-company {
  font-size: 1rem;
  color: #a5a5c8;
  margin-bottom: 1rem;
  font-style: italic;
}

.timeline-achievements {
  padding-left: 1.5rem;
  margin-top: 1rem;
}

.timeline-achievements li {
  color: #d5d5f0;
  margin-bottom: 0.6rem;
  line-height: 1.5;
  font-size: 0.95rem;
}

.timeline-project {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(179, 150, 227, 0.05);
  border-radius: 10px;
  border-left: 3px solid var(--accent-color);
}

.timeline-project h4 {
  color: var(--accent-color);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.timeline-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.timeline-link:hover {
  text-decoration: underline;
  color: white;
  opacity: 1;
}

.timeline-contact {
  text-align: center;
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(15, 15, 40, 0.7);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.timeline-contact p {
  color: var(--accent-color);
  font-weight: 500;
}

.timeline-contact a {
  color: var(--accent-color);
  text-decoration: underline;
  font-weight: 600;
  transition: all 0.4s ease;
}

.timeline-contact a:hover {
  text-decoration: underline;
  color: white;
  opacity: 1;
}

@media (max-width: 768px) {
  .timeline::before {
    left: 30px;
  }
  
  .timeline-dot {
    left: 30px;
  }
  
  .timeline-content {
    margin-left: 55px;
    width: calc(100% - 55px);
  }
}

/* Upcoming Project Styles */
.upcoming-project {
  position: relative;
  overflow: hidden;
}

.lock-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background: radial-gradient(circle at center, rgba(13, 13, 45, 0.8) 0%, rgba(13, 13, 45, 0.9) 70%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.lock-icon {
  width: 120px;
  height: 120px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b396e3;
  animation: pulse 2s infinite ease-in-out;
}

.lock-icon svg {
  width: 100%;
  height: 100%;
}

.upcoming-text {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: #b396e3;
  text-shadow: 0 0 10px rgba(179, 150, 227, 0.5);
  animation: glow 2s infinite alternate;
}

.coming-soon {
  color: var(--accent-color);
  font-size: 1.1rem;
  font-weight: 600;
  font-style: italic;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px rgba(179, 150, 227, 0.5);
  }
  to {
    text-shadow: 0 0 20px rgba(179, 150, 227, 0.8);
  }
}

@media (max-width: 768px) {
  .lock-overlay {
    width: 100%;
    height: 50%;
    top: auto;
    bottom: 0;
  }
  
  .lock-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
  }
  
  .upcoming-text {
    font-size: 1.4rem;
  }
}

/* Skills Marquee */
.skills-marquee-container {
  width: 100%;
  max-width: 1400px;
  margin: 3rem auto;
  overflow: hidden;
  position: relative;
  background: rgba(15, 15, 40, 0.3);
  padding: 1.5rem 0;
  border-radius: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.skills-marquee {
  display: flex;
  width: fit-content;
  animation: marquee 40s linear infinite;
}

.skills-marquee:hover {
  animation-play-state: paused;
}

.skills-marquee-content {
  display: flex;
  align-items: center;
}

.marquee-skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem;
  color: var(--text-color);
}

.marquee-icon {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background-color: #151531;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.marquee-icon::before {
  transform: scale(0.7);
}

.marquee-skill span {
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.marquee-skill:hover .marquee-icon {
  transform: translateY(-5px) scale(1.15);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.marquee-skill:hover span {
  color: var(--accent-color);
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .skills-marquee-container {
    padding: 1rem 0;
  }
  
  .marquee-skill {
    padding: 0 1rem;
  }
  
  .marquee-icon {
    width: 30px;
    height: 30px;
  }
  
  .marquee-skill span {
    font-size: 0.65rem;
  }
}

/* Scroll reveal styles */
#work-experience,
#projects,
.project-card,
.timeline-item {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#work-experience.visible,
#projects.visible,
.project-card.visible,
.timeline-item.visible {
  opacity: 1;
}

/* Ensure the parent container doesn't clip the animations */
.projects-container,
.timeline {
  overflow: visible;
}

/* Animated Text */
.animated-text {
  display: inline-block;
}

.animated-text {
  position: relative;
  white-space: pre; /* Preserve spaces */
}

.animated-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* Character animation setup in JS */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: jumpIn 0.5s forwards;
  animation-delay: calc(var(--char-index) * 0.05s);
}

@keyframes jumpIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Projects Horizontal Slider */
.projects-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 4rem auto;
  display: flex;
  align-items: center;
}

.projects-slider {
  display: flex;
  gap: 2.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 2rem 0 2rem 0;
  width: 100%;
  scrollbar-width: none;
}
.projects-slider::-webkit-scrollbar {
  display: none;
}

.project-card {
  min-width: 340px;
  max-width: 400px;
  flex: 0 0 auto;
  background: rgba(15, 15, 40, 0.95);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  margin: 0;
  transition: transform 0.3s cubic-bezier(.4,2,.6,1), box-shadow 0.3s;
}

.project-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}

.slider-arrow {
  background: rgba(179,150,227,0.15);
  border: none;
  color: #b396e3;
  font-size: 2.2rem;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  margin: 0 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.2s, color 0.2s, transform 0.2s;
  z-index: 2;
}
.slider-arrow:hover {
  background: #b396e3;
  color: #0d0d2d;
  transform: scale(1.1);
}

@media (max-width: 900px) {
  .projects-slider {
    gap: 1.2rem;
    padding: 1rem 0;
  }
  .project-card {
    min-width: 260px;
    max-width: 320px;
  }
  .slider-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
  }
}

@media (max-width: 600px) {
  .projects-slider-wrapper {
    flex-direction: column;
  }
  .slider-arrow {
    display: none;
  }
  .projects-slider {
    gap: 0.7rem;
    padding: 0.5rem 0;
  }
  .project-card {
    min-width: 90vw;
    max-width: 95vw;
  }
}