.gradient-bg {
      background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 25%, #3730a3 50%, #1e3a8a 75%, #0f172a 100%);
      background-size: 400% 400%;
      animation: gradientShift 20s ease infinite;
    }

    @keyframes gradientShift {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    .glass-effect {
      background: rgba(30, 35, 110, 0.9);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, .15);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
    }

    /* Mobile menu solid background */
    #mobile-menu {
      background: rgba(30, 35, 110, 0.98);
      backdrop-filter: blur(20px);
      border-top: 1px solid rgba(255, 255, 255, .2);
    }

    .glass-card {
      background: rgba(255, 255, 255, .05);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, .1);
      transition: all .3s ease;
    }

    .glass-card:hover {
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(59, 130, 246, .3);
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(59, 130, 246, .1);
    }

    .project-card {
      background: linear-gradient(135deg, rgba(59, 130, 246, .1) 0%, rgba(147, 197, 253, .05) 100%);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(59, 130, 246, .2);
      transition: all .4s cubic-bezier(.4, 0, .2, 1);
    }

    .project-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 25px 50px rgba(59, 130, 246, .15);
      border-color: rgba(59, 130, 246, .4);
    }

    .skill-bar {
      transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fade-in {
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp .8s ease-out forwards;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-20px)
      }
    }

    @keyframes glow {
      0% {
        box-shadow: 0 0 20px rgba(59, 130, 246, .3)
      }

      100% {
        box-shadow: 0 0 30px rgba(59, 130, 246, .6)
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(50px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes fadeInScale {
      from {
        opacity: 0;
        transform: scale(.9)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    .stagger-1 {
      animation-delay: .1s
    }

    .stagger-2 {
      animation-delay: .2s
    }

    .stagger-3 {
      animation-delay: .3s
    }

    .stagger-4 {
      animation-delay: .4s
    }

    .stagger-5 {
      animation-delay: .5s
    }

    .stagger-6 {
      animation-delay: .6s
    }

    .gradient-text {
      background: linear-gradient(135deg, #3b82f6, #60a5fa, #93c5fd);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .timeline-item {
      position: relative
    }

    .timeline-item::before {
      content: '';
      position: absolute;
      left: -20px;
      top: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(to bottom, #3b82f6, #1d4ed8)
    }

    .timeline-item::after {
      content: '';
      position: absolute;
      left: -28px;
      top: 20px;
      width: 16px;
      height: 16px;
      background: #3b82f6;
      border-radius: 50%;
      border: 3px solid #0f172a
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .5rem 1rem;
      border-radius: .75rem;
      transition: all .3s ease;
      position: relative;
      overflow: hidden;
    }

    .nav-item:hover {
      background: rgba(59, 130, 246, .1);
      transform: translateY(-2px);
    }

    .nav-item svg {
      transition: all .3s ease;
    }

    .nav-item:hover svg {
      transform: scale(1.1);
      filter: drop-shadow(0 0 8px rgba(59, 130, 246, .6));
    }

    .nav-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .2), transparent);
      transition: left .5s ease;
    }

    .nav-item:hover::before {
      left: 100%;
    }

    .mobile-nav-item {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .875rem 1rem;
      border-radius: .75rem;
      transition: all .3s ease;
      margin-bottom: .5rem;
    }

    .mobile-nav-item:hover {
      background: rgba(59, 130, 246, .15);
      transform: translateX(8px);
    }

    .mobile-nav-item svg {
      transition: transform .3s ease;
    }

    .mobile-nav-item:hover svg {
      transform: rotate(5deg) scale(1.1);
    }

    .thesis-link {
      background: linear-gradient(135deg, rgba(59, 130, 246, .12) 0%, rgba(16, 185, 129, .08) 100%);
      border: 1px solid rgba(59, 130, 246, .25);
      backdrop-filter: blur(10px);
      transition: all .4s cubic-bezier(.4, 0, .2, 1);
      position: relative;
      overflow: hidden;
    }

    .thesis-link::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .15), transparent);
      transition: left .6s ease;
    }

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

    .thesis-link:hover {
      transform: translateY(-2px) scale(1.02);
      background: linear-gradient(135deg, rgba(59, 130, 246, .2) 0%, rgba(16, 185, 129, .12) 100%);
      border-color: rgba(59, 130, 246, .4);
      box-shadow: 0 12px 25px rgba(59, 130, 246, .15), 0 0 20px rgba(59, 130, 246, .1);
    }

    .thesis-badge {
      background: linear-gradient(135deg, #10b981, #059669);
      box-shadow: 0 4px 12px rgba(16, 185, 129, .3);
    }

    .ad-container {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border: 1px solid rgba(59, 130, 246, .15);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
      transition: all .3s ease;
      position: relative;
      overflow: hidden;
    }

    .ad-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #3b82f6, #10b981, #8b5cf6);
    }

    .ad-container:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
      border-color: rgba(59, 130, 246, .25);
    }

    /* Mobile-only center alignment for contact section */
    @media (max-width: 767px) {
      #contact .grid.lg\\:grid-cols-2 {
        text-align: center;
      }
      
      #contact .flex.items-center.group {
        justify-content: center;
        text-align: center;
      }
      
      #contact .flex.space-x-4 {
        justify-content: center;
      }

      #contact p.text-white.font-semibold.text-lg.mb-1,
      #contact p.text-gray-300 {
        text-align: center;
      }

      #contact h3.text-3xl.font-bold.text-white.mb-10 {
        text-align: center;
      }

      /* Mobile-only center alignment for about section */
      #about .grid.lg\\:grid-cols-2 {
        text-align: center;
      }

      #about .space-y-8 {
        text-align: center;
      }

      #about h3.text-3xl.font-bold.text-white.mb-6,
      #about h3.text-3xl.font-bold.text-white.mb-8 {
        text-align: center;
      }

      #about p.text-gray-300.leading-relaxed.text-lg {
        text-align: center;
      }
    }

    /* Navigation transitions for smooth hide/show */
    nav {
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Ensure proper mobile menu positioning */
    #mobile-menu {
      position: relative;
      z-index: 100;
    }