/*
=====================================================================
*   Ceevee v1.0 Layout Stylesheet
*   url: styleshout.com
*   03-18-2014
=====================================================================

   TOC:
   a. General Styles
   b. Header Styles
   c. About Section
   d. Resume Section
   e. Portfolio Section
   f. Call To Action Section
   g. Testimonials Section
   h. Contact Section
   i. Footer

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. General Styles
/* ------------------------------------------------------------------ */

html {
   scroll-behavior: smooth;
}

body { 
   background: #0f0f0f; 
   transition: background-color 0.5s ease;
}

section {
   transition: all 0.5s ease-in-out;
   opacity: 1;
   transform: translateY(0);
}

section:not(:first-child) {
   opacity: 0;
   transform: translateY(20px);
}

section.visible {
   opacity: 1;
   transform: translateY(0);
}

/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   position: relative;
   height: 800px;
   min-height: 500px;
   width: 100%;
   background: #161415 url(../images/header-background.jpg) no-repeat top center;
   background-size: cover !important;
	-webkit-background-size: cover !important;
   text-align: center;
   overflow: hidden;
}

/* vertically center banner section */
header:before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   height: 100%;
}
header .banner {
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
   width: 85%;
   padding-bottom: 30px;
   text-align: center;
}

header .banner-text {
   width: 100%;
   position: relative;
}

header .banner-text::after {
   content: '';
   position: absolute;
   top: 120px;
   left: -100%;
   width: 100%;
   height: 1px;
   background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent
   );
   animation: scanBetween 3s linear infinite;
   box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

header .banner-text h1 {
   font: 90px/1.3em 'opensans-bold', sans-serif;
   background: linear-gradient(
      90deg,
      #FFFFFF 0%,
      #11ABB0 50%,
      #FFFFFF 100%
   );
   background-size: 200% auto;
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   animation: gradientText 3s linear infinite;
   letter-spacing: -2px;
   margin: 0 auto 18px auto;
   position: relative;
   overflow: visible;
   padding: 10px 0;
   text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Remove the thick light effect */
header .banner-text h1::before {
   display: none;
}

header .banner-text h1::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 100%;
   height: 15px;
   background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2),
      transparent
   );
   filter: blur(4px);
   opacity: 0;
   animation: shadowEffect 3s linear infinite;
}

header .banner-text h3 {
   font: 22px/1.9em 'Courier New', monospace;
   color: #00FF00;
   margin: 0 auto;
   width: 90%;
   opacity: 1;
   position: relative;
   overflow: hidden;
}

.word-wrapper {
   display: inline-block;
   white-space: nowrap;
   margin-right: 0.2em;
}

.matrix-text {
   display: inline-block;
   opacity: 0;
   color: #00FF00;
   font-family: 'Courier New', monospace;
   text-transform: none;
   animation: matrixReveal 0.5s forwards;
   text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
   white-space: nowrap;
   margin-right: 0.1em;
}

.matrix-text.space {
   margin-right: 0.3em;
   opacity: 0 !important;
}

header .banner-text h3 .matrix-text.glitch {
   position: relative;
   animation: matrixReveal 0.5s forwards, glitch 0.3s infinite;
}

header .banner-text h3 .matrix-text.glitch::before,
header .banner-text h3 .matrix-text.glitch::after {
   content: attr(data-text);
   position: absolute;
   left: 0;
   opacity: 0.8;
}

header .banner-text h3 .matrix-text.glitch::before {
   animation: glitch-1 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
   color: #00FFFF;
   z-index: 1;
}

header .banner-text h3 .matrix-text.glitch::after {
   animation: glitch-2 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
   color: #FF00FF;
   z-index: 2;
}

header .banner-text h3 span {
   color: #11ABB0;
   font-family: 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 2px;
   text-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
}

header .banner-text hr {
   width: 60%;
   margin: 18px auto 24px auto;
   border-color: #2F2D2E;
   border-color: rgba(150, 150, 150, .1);
   opacity: 0;
   animation: fadeIn 1s ease 1s forwards;
}

/* header social links */
header .social {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin: 24px 0;
   padding: 0;
   font-size: 30px;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .8);
   opacity: 0;
   animation: fadeInUp 1s ease 1.5s forwards;
}

header .social li {
   display: inline-block;
   margin: 0;
   padding: 0;
   transition: all 0.3s ease;
}

header .social li a {
   color: #fff;
   transition: all 0.3s ease;
}

header .social li:hover {
   transform: translateY(-3px);
}

header .social li a:hover {
   color: #11ABB0;
   text-shadow: 0 0 15px rgba(17, 171, 176, 0.5);
}

/* Pac-Man decoration */
header .banner::before {
   content: '';
   position: absolute;
   width: 30px;
   height: 30px;
   background: #FFD700;
   border-radius: 50%;
   top: -45px;
   left: 50%;
   transform: translateX(-50%);
   animation: pacmanMove 4s linear infinite;
}

header .banner::after {
   content: '•';
   position: absolute;
   top: -45px;
   left: 50%;
   color: #FFD700;
   font-size: 20px;
   animation: dotsMove 4s linear infinite;
}

@keyframes fadeInDown {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

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

@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

@keyframes pacmanMove {
   0%, 100% {
      box-shadow: 
         0 0 0 0 #FFD700,
         0 0 0 0 #FFD700;
      clip-path: polygon(100% 0, 100% 100%, 50% 50%);
   }
   25% {
      box-shadow: 
         0 0 0 0 #FFD700,
         0 0 0 0 #FFD700;
      clip-path: polygon(100% 0, 50% 50%, 100% 100%);
   }
   50% {
      box-shadow: 
         0 0 0 0 #FFD700,
         0 0 0 0 #FFD700;
      clip-path: polygon(100% 100%, 0 100%, 50% 50%);
   }
   75% {
      box-shadow: 
         0 0 0 0 #FFD700,
         0 0 0 0 #FFD700;
      clip-path: polygon(0 100%, 0 0, 50% 50%);
   }
}

@keyframes dotsMove {
   0% {
      transform: translateX(-100px);
      text-shadow: 
         60px 0 0 #FFD700,
         120px 0 0 #FFD700,
         180px 0 0 #FFD700;
      opacity: 1;
   }
   100% {
      transform: translateX(100px);
      text-shadow: 
         -180px 0 0 #FFD700,
         -120px 0 0 #FFD700,
         -60px 0 0 #FFD700;
      opacity: 1;
   }
}

@keyframes gradient {
   0% {
      background-position: 0% 50%;
   }
   50% {
      background-position: 100% 50%;
   }
   100% {
      background-position: 0% 50%;
   }
}

@keyframes subtitleGlow {
   0%, 100% {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
                   0 0 10px rgba(17, 171, 176, 0.3);
   }
   50% {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
                   0 0 20px rgba(17, 171, 176, 0.6);
   }
}

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

@keyframes glitch-1 {
   0% {
      transform: translate(0);
   }
   20% {
      transform: translate(-2px, 2px);
   }
   40% {
      transform: translate(-2px, -2px);
   }
   60% {
      transform: translate(2px, 2px);
   }
   80% {
      transform: translate(2px, -2px);
   }
   100% {
      transform: translate(0);
   }
}

@keyframes glitch-2 {
   0% {
      transform: translate(0);
   }
   20% {
      transform: translate(2px, -2px);
   }
   40% {
      transform: translate(2px, 2px);
   }
   60% {
      transform: translate(-2px, -2px);
   }
   80% {
      transform: translate(-2px, 2px);
   }
   100% {
      transform: translate(0);
   }
}

@keyframes glitch {
   0% {
      transform: translate(0);
   }
   20% {
      transform: translate(-2px, 2px);
   }
   40% {
      transform: translate(-2px, -2px);
   }
   60% {
      transform: translate(2px, 2px);
   }
   80% {
      transform: translate(2px, -2px);
   }
   100% {
      transform: translate(0);
   }
}

@keyframes shadowEffect {
   0% {
      opacity: 0;
   }
   45% {
      opacity: 0;
   }
   50% {
      opacity: 0.5;
   }
   55% {
      opacity: 0;
   }
   100% {
      opacity: 0;
   }
}

@keyframes scanLight {
   0% {
      left: -100%;
      opacity: 0;
   }
   20% {
      opacity: 1;
   }
   80% {
      opacity: 1;
   }
   100% {
      left: 200%;
      opacity: 0;
   }
}

@keyframes scanBetween {
   0% {
      left: -100%;
      opacity: 0;
   }
   20% {
      opacity: 1;
   }
   80% {
      opacity: 1;
   }
   100% {
      left: 200%;
      opacity: 0;
   }
}

/* scrolldown link */
header .scrolldown a {
   position: absolute;
   bottom: 30px;
   left: 50%;
   margin-left: -29px;
   color: #fff;
   display: block;
   height: 42px;
   width: 42px;
   font-size: 42px;
   line-height: 42px;
   color: #fff;
   border-radius: 100%;

   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}
header .scrolldown a:hover { color: #11ABB0; }

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 12px 'opensans-bold', sans-serif;
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin: 0 auto;
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
   background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(17, 171, 176, 0.1);
}
.opaque { background-color: #333; }

/* hide toggle button */
#nav-wrap > a.mobile-btn { display: none; }

ul#nav {
   min-height: 60px;
   width: auto;
   text-align: center;
   display: flex;
   justify-content: center;
   gap: 20px;
}

ul#nav li {
   position: relative;
   list-style: none;
   height: 60px;
   display: inline-block;
}

/* Links */
ul#nav li a {
   display: inline-block;
   padding: 20px 15px;
   line-height: 20px;
	text-decoration: none;
   text-align: left;
   color: #fff;
   font-size: 14px;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

ul#nav li a::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   width: 0;
   height: 2px;
   background: linear-gradient(90deg, 
      transparent,
      #11ABB0,
      transparent
   );
   transform: translateX(-50%);
   transition: width 0.3s ease;
}

ul#nav li a::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(
      45deg,
      transparent 40%,
      rgba(17, 171, 176, 0.1) 45%,
      rgba(17, 171, 176, 0.2) 50%,
      rgba(17, 171, 176, 0.1) 55%,
      transparent 60%
   );
   transform: translateX(-100%);
   transition: transform 0.6s ease;
}

ul#nav li a:hover {
   color: #11ABB0;
   text-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
}

ul#nav li a:hover::before {
   width: 80%;
}

ul#nav li a:hover::after {
   transform: translateX(100%);
}

ul#nav li.current a {
   color: #11ABB0;
}

ul#nav li.current a::before {
   width: 80%;
   background: linear-gradient(90deg, 
      transparent,
      #11ABB0,
      #13c8cd,
      #11ABB0,
      transparent
   );
   animation: navGlow 2s linear infinite;
}

@keyframes navGlow {
   0%, 100% {
      opacity: 0.8;
      box-shadow: 0 0 10px rgba(17, 171, 176, 0.3);
   }
   50% {
      opacity: 1;
      box-shadow: 0 0 20px rgba(17, 171, 176, 0.5);
   }
}

/* ------------------------------------------------------------------ */
/* c. About Section
/* ------------------------------------------------------------------ */

#about {
   background: #1a1a1a;
   padding-top: 96px;
   padding-bottom: 76px;
   overflow: hidden;
   position: relative;
}

#about::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(45deg, #1a1a1a 25%, #2a2a2a 25%, #2a2a2a 50%, #1a1a1a 50%, #1a1a1a 75%, #2a2a2a 75%, #2a2a2a);
   background-size: 20px 20px;
   opacity: 0.05;
}

#about .profile-pic-container {
   position: relative;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   perspective: 1000px;
}

#about .profile-pic {
   position: relative;
   width: 180px;
   height: 180px;
   border-radius: 15px;
   border: 3px solid #11ABB0;
   box-shadow: 0 0 20px rgba(17, 171, 176, 0.5);
   transition: all 0.3s ease;
   transform-style: preserve-3d;
   z-index: 1;
}

#about .profile-pic::before,
#about .profile-pic::after {
   content: '';
   position: absolute;
   top: -3px;
   left: -3px;
   right: -3px;
   bottom: -3px;
   border: 3px solid #11ABB0;
   border-radius: 15px;
   animation: borderPulse 2s linear infinite;
}

#about .profile-pic::after {
   animation-delay: -1s;
}

#about .profile-pic-container::before {
   content: '';
   position: absolute;
   top: -10px;
   left: -10px;
   right: -10px;
   bottom: -10px;
   border: 2px solid #11ABB0;
   border-radius: 20px;
   animation: rotate 10s linear infinite;
}

#about .profile-pic-container::after {
   content: '';
   position: absolute;
   top: 50%;
   left: -20px;
   width: calc(100% + 40px);
   height: 2px;
   background: linear-gradient(90deg, transparent, #11ABB0, transparent);
   animation: scanline 2s linear infinite;
}

@keyframes borderPulse {
   0%, 100% {
      transform: scale(1);
      opacity: 1;
   }
   50% {
      transform: scale(1.1);
      opacity: 0.5;
   }
}

@keyframes rotate {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

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

#about h2 {
   font: 22px/30px 'opensans-bold', sans-serif;
   color: #11ABB0;
   margin-bottom: 12px;
   text-transform: uppercase;
   letter-spacing: 2px;
   text-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
}

#about p {
   line-height: 30px;
   color: #9a9a9a;
   font-family: 'opensans-regular', sans-serif;
   text-shadow: 0 0 5px rgba(154, 154, 154, 0.3);
}

.download {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   margin-top: 30px;
}

.download-button {
   position: relative;
   display: inline-block;
   padding: 15px 30px;
   color: #11ABB0;
   border: 2px solid #11ABB0;
   border-radius: 5px;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.3s ease;
   background: linear-gradient(to right, rgba(17, 171, 176, 0.2) 50%, transparent 50%);
   background-size: 200% 100%;
   background-position: right bottom;
   z-index: 1;
}

.download-button:hover {
   background-position: left bottom;
   color: #FFFFFF;
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(17, 171, 176, 0.3);
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
   font-weight: bold;
}

.download-button i {
   margin-right: 10px;
   transition: all 0.3s ease;
   color: inherit;
}

.download-button:hover i {
   color: #FFFFFF;
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.download-button::after {
   content: "H1B Visa Currently";
   position: absolute;
   top: 50%;
   right: -180px;
   transform: translateY(-50%);
   background: rgba(17, 171, 176, 0.15);
   color: rgba(255, 255, 255, 0.8);
   padding: 10px 20px;
   border-radius: 8px;
   font-size: 14px;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   box-shadow: 
      0 2px 15px rgba(17, 171, 176, 0.1),
      inset 0 0 20px rgba(255, 255, 255, 0.1);
   white-space: nowrap;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.download-button::before {
   content: "";
   position: absolute;
   top: 50%;
   right: -20px;
   transform: translateY(-50%);
   border-width: 8px;
   border-style: solid;
   border-color: transparent rgba(17, 171, 176, 0.15) transparent transparent;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.download-button:hover::after {
   opacity: 1;
   visibility: visible;
   transform: translateY(-50%) translateX(-5px);
   box-shadow: 
      0 4px 20px rgba(17, 171, 176, 0.15),
      inset 0 0 25px rgba(255, 255, 255, 0.15);
}

.download-button:hover::before {
   opacity: 1;
   visibility: visible;
   transform: translateY(-50%) translateX(-5px);
}

#about .download .button {
   position: relative;
   background: rgba(17, 171, 176, 0.1);
   color: #11ABB0;
   border: 1px solid #11ABB0;
   padding: 15px 25px;
   font-size: 16px;
   line-height: 1;
   text-transform: uppercase;
   letter-spacing: 2px;
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.3s ease;
   z-index: 1;
}

#about .download .button::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0%;
   height: 100%;
   background: linear-gradient(90deg, 
     rgba(17, 171, 176, 0.8),
     rgba(17, 171, 176, 0.6)
   );
   transition: width 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
   z-index: -1;
}

#about .download .button:hover {
   color: #fff;
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
   border-color: transparent;
   box-shadow: 0 0 20px rgba(17, 171, 176, 0.4);
}

#about .download .button:hover::before {
   width: 100%;
}

#about .download .button i {
   margin-right: 10px;
   font-size: 18px;
   transition: transform 0.3s ease;
}

#about .download .button:hover i {
   transform: translateX(-3px);
}

#about a, #about a:visited  { color: #fff; }
#about a:hover, #about a:focus { color: #11ABB0; }

#about .profile-name {
  font: 24px/30px 'opensans-bold', sans-serif;
  color: #11ABB0;
  text-align: center;
  margin: 20px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
}

#about .three.columns {
  width: 28%;
}

#about .nine.columns {
  width: 68%;
  margin-left: 4%;
}

#about .contact-details {
  width: 100%;
  margin-top: 20px;
  min-width: 300px;
}

#about .contact-details .address {
  position: relative;
  background: rgba(17, 171, 176, 0.05);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid rgba(17, 171, 176, 0.3);
  overflow: hidden;
  width: 100%;
}

#about .contact-details .address span {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  color: #E6E6E6;
  font-family: 'opensans-regular', sans-serif;
  font-size: 14px;
  text-shadow: 0 0 5px rgba(17, 171, 176, 0.3);
  transform: translateZ(0);
  transition: all 0.3s ease;
  position: relative;
  padding: 8px 12px;
  background: rgba(17, 171, 176, 0.05);
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}

#about .contact-details .address span .label-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

#about .contact-details .address span i {
  font-size: 18px;
  width: 24px;
  color: #11ABB0;
  text-align: center;
  text-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
  margin-right: 10px;
}

#about .contact-details .address span strong {
  color: #11ABB0;
  font-family: 'opensans-bold', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
}

#about .contact-details .address span .contact-text {
  padding-left: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#about .contact-details .address span::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(45deg, #11ABB0, transparent);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: -1;
}

#about .contact-details .address span:hover {
  background: rgba(17, 171, 176, 0.15);
  transform: translateX(5px);
  border: 1px solid rgba(17, 171, 176, 0.3);
  box-shadow: 
    0 0 15px rgba(17, 171, 176, 0.2),
    inset 0 0 10px rgba(17, 171, 176, 0.1);
}

#about .contact-details .address span:hover::after {
  opacity: 0.5;
  box-shadow: 0 0 20px rgba(17, 171, 176, 0.4);
}

#about .contact-details .address span:hover i {
  transform: scale(1.2);
  text-shadow: 0 0 20px rgba(17, 171, 176, 0.8);
}

#about .contact-details .address span:hover strong {
  color: #13c8cd;
  text-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
}

#about .contact-details .address span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 0%,
    rgba(17, 171, 176, 0.1) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

#about .contact-details .address span:hover::before {
  transform: translateX(100%);
}

@keyframes glowPulse {
  0% {
    text-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(17, 171, 176, 0.8);
  }
  100% {
    text-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
  }
}

@keyframes borderRotate {
  0% {
    clip-path: inset(0 0 98% 0);
  }
  25% {
    clip-path: inset(0 98% 0 0);
  }
  50% {
    clip-path: inset(98% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 98%);
  }
  100% {
    clip-path: inset(0 0 98% 0);
  }
}

#about::after, #experience::after, #resume::after, #sk::after, #portfolio::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: linear-gradient(
      90deg,
      transparent,
      rgba(17, 171, 176, 0.2),
      rgba(17, 171, 176, 0.5),
      rgba(17, 171, 176, 0.8),
      rgba(17, 171, 176, 1),
      rgba(17, 171, 176, 0.8),
      rgba(17, 171, 176, 0.5),
      rgba(17, 171, 176, 0.2),
      transparent
   );
   animation: transitionLineGlow 3s linear infinite;
}

#about::before, #experience::before, #resume::before, #sk::before, #portfolio::before {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 30px;
   height: 30px;
   background: #FFD700;
   border-radius: 50%;
   clip-path: polygon(100% 0, 100% 100%, 50% 50%);
   animation: transitionPacman 3s linear infinite;
   box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

@keyframes transitionLineGlow {
   0% {
      opacity: 0.5;
      background-position: -100% 0;
   }
   50% {
      opacity: 1;
   }
   100% {
      opacity: 0.5;
      background-position: 200% 0;
   }
}

@keyframes transitionPacman {
   0%, 100% {
      clip-path: polygon(100% 0, 100% 100%, 50% 50%);
      transform: translate(-50%, 0) rotate(0deg);
   }
   25% {
      clip-path: polygon(100% 0, 50% 50%, 100% 100%);
      transform: translate(-50%, 0) rotate(90deg);
   }
   50% {
      clip-path: polygon(100% 100%, 0 100%, 50% 50%);
      transform: translate(-50%, 0) rotate(180deg);
   }
   75% {
      clip-path: polygon(0 100%, 0 0, 50% 50%);
      transform: translate(-50%, 0) rotate(270deg);
   }
}

/* ------------------------------------------------------------------ */
/* d. Resume Section
/* ------------------------------------------------------------------ */

#resume {
   background: #fff;
   padding-top: 65px;
   padding-bottom: 15px;
   overflow: hidden;
}
#resume .company-pic {
   position: relative;
   width: 80px;
   height: 80px;
   vertical-align: middle;
   /* border-radius: 100%; */
}

#resume a, #resume a:visited  { color: #11ABB0; }
#resume a:hover, #resume a:focus { color: #313131; }

#resume h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
}
#resume h1 span {
   border-bottom: 3px solid #11ABB0;
   padding-bottom: 6px;
}
#resume h3 {
   font: 25px/30px 'opensans-bold', sans-serif;
}

#resume .header-col { padding-top: 9px; }
#resume .main-col { padding-right: 10%; }

.education, .work {
   margin-bottom: 10px;
   padding-bottom: 10px;
   /* Remove the gray border */
   border-bottom: none;
}
#resume .info {
   font: 16px/24px 'librebaskerville-italic', serif;
   color: #6E7881;
   margin-bottom: 18px;
   margin-top: 9px;
}
#resume .info span {
   margin-right: 5px;
   margin-left: 5px;
}
#resume .date {
   font: 15px/24px 'opensans-regular', sans-serif;
   margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* e. Resume Section
/* ------------------------------------------------------------------ */

#experience {
   background: #fff;
   padding-top: 60px;
   padding-bottom: 20px;
   overflow: hidden;
   position: relative;
}

.experience {
   position: relative;
   margin-bottom: 40px;
   padding-bottom: 40px;
   /* Remove the dashed border */
   border-bottom: none;
   transition: all 0.3s ease;
}

.experience::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 30px;
   height: 30px;
   background: #FFD700;
   border-radius: 50%;
   clip-path: polygon(100% 0, 100% 100%, 50% 50%);
   animation: expPacman 3s linear infinite;
}

.experience::before {
   content: '•';
   position: absolute;
   bottom: -12px;
   color: #FFD700;
   font-size: 20px;
   animation: expDots 3s linear infinite;
}

@keyframes expPacman {
   0%, 100% {
      clip-path: polygon(100% 0, 100% 100%, 50% 50%);
      transform: translateX(0);
   }
   25% {
      clip-path: polygon(100% 0, 50% 50%, 100% 100%);
      transform: translateX(calc(100% - 30px));
   }
   50% {
      clip-path: polygon(100% 100%, 0 100%, 50% 50%);
      transform: translateX(0);
   }
   75% {
      clip-path: polygon(0 100%, 0 0, 50% 50%);
      transform: translateX(calc(100% - 30px));
   }
}

@keyframes expDots {
   0% {
      left: 40px;
      box-shadow: 
         60px 0 0 #FFD700,
         120px 0 0 #FFD700,
         180px 0 0 #FFD700;
      opacity: 1;
   }
   100% {
      left: calc(100% - 40px);
      box-shadow: 
         -180px 0 0 #FFD700,
         -120px 0 0 #FFD700,
         -60px 0 0 #FFD700;
      opacity: 1;
   }
}

#experience .company-pic {
   width: 80px;
   height: 80px;
   align-items: center;
   padding: 10px;
   margin: 10px 0;
   border-radius: 10px;
   background: rgba(17, 171, 176, 0.1);
   box-shadow: 0 0 15px rgba(17, 171, 176, 0.2);
   transition: all 0.3s ease;
}

#experience .company-pic:hover {
   transform: scale(1.05);
   box-shadow: 0 0 20px rgba(17, 171, 176, 0.3);
}

#experience h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   position: relative;
   padding-left: 70px;
   display: inline-block;
}

#experience h1::before {
   content: '\f0b1';  /* briefcase icon */
   font-family: 'FontAwesome';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   font-size: 28px;
   color: #11ABB0;
   text-shadow: 0 0 10px rgba(17, 171, 176, 0.3);
   animation: expIconFloat 3s ease-in-out infinite;
}

#experience h1::after {
   content: '';
   position: absolute;
   left: 35px;
   top: 50%;
   transform: translateY(-50%);
   width: 30px;
   height: 30px;
   background: linear-gradient(90deg, #11ABB0, transparent);
   border-radius: 50%;
   opacity: 0.7;
   animation: expBallMove 3s linear infinite;
}

#experience h1 span {
   border-bottom: 3px solid #11ABB0;
   padding-bottom: 6px;
   position: relative;
   overflow: hidden;
}

#experience h1 span::before {
   content: '';
   position: absolute;
   left: -2px;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: expLineMove1 3s linear infinite;
}

#experience h1 span::after {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: expLineMove2 3s linear infinite;
}

#experience h1 .third-line {
   content: '';
   position: absolute;
   right: -2px;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: expLineMove3 3s linear infinite;
}

@keyframes expIconFloat {
   0%, 100% {
      transform: translateY(-50%) translateX(0);
      text-shadow: 0 0 10px rgba(17, 171, 176, 0.3);
   }
   50% {
      transform: translateY(-50%) translateX(5px);
      text-shadow: 0 0 20px rgba(17, 171, 176, 0.6);
   }
}

@keyframes expBallMove {
   0% {
      transform: translateY(-50%) translateX(-20px);
      opacity: 0;
   }
   50% {
      opacity: 0.7;
   }
   100% {
      transform: translateY(-50%) translateX(20px);
      opacity: 0;
   }
}

@keyframes expLineMove1 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   20%, 80% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

@keyframes expLineMove2 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   30%, 70% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

@keyframes expLineMove3 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   40%, 60% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

#experience h3 {
   font: 25px/30px 'opensans-bold', sans-serif;
   margin: 10px 0;
   color: #333;
   display: flex;
   align-items: center;
   gap: 15px;
   position: relative;
   padding-left: 20px;
}

#experience h3::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   width: 10px;
   height: 10px;
   background: #11ABB0;
   border-radius: 50%;
   transform: translateY(-50%);
   box-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
}

#experience .info {
   font: 16px/24px 'librebaskerville-italic', serif;
   color: #6E7881;
   margin: 9px 0 18px;
   padding-left: 20px;
   border-left: 3px solid rgba(17, 171, 176, 0.3);
   transition: all 0.3s ease;
}

#experience .info:hover {
   border-left-color: #11ABB0;
   background: rgba(17, 171, 176, 0.05);
   padding: 10px 20px;
   border-radius: 0 5px 5px 0;
}

/* ------------------------------------------------------------------ */
/* f. skills Section
/* ------------------------------------------------------------------ */

#sk {
   background: #fff;
   padding-top: 60px;
   padding-bottom: 100px;
   overflow: hidden;
   position: relative;
}

/* Add transition line between Skills and Projects */
#sk::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: linear-gradient(
      90deg,
      transparent,
      rgba(17, 171, 176, 0.2),
      rgba(17, 171, 176, 0.5),
      rgba(17, 171, 176, 0.8),
      rgba(17, 171, 176, 1),
      rgba(17, 171, 176, 0.8),
      rgba(17, 171, 176, 0.5),
      rgba(17, 171, 176, 0.2),
      transparent
   );
   animation: transitionLineGlow 3s linear infinite;
}

#sk::before {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 30px;
   height: 30px;
   background: #FFD700;
   border-radius: 50%;
   clip-path: polygon(100% 0, 100% 100%, 50% 50%);
   animation: transitionPacman 3s linear infinite;
   box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

@keyframes transitionLineGlow {
   0% {
      opacity: 0.5;
      background-position: -100% 0;
   }
   50% {
      opacity: 1;
   }
   100% {
      opacity: 0.5;
      background-position: 200% 0;
   }
}

@keyframes transitionPacman {
   0%, 100% {
      clip-path: polygon(100% 0, 100% 100%, 50% 50%);
      transform: translate(-50%, 0) rotate(0deg);
   }
   25% {
      clip-path: polygon(100% 0, 50% 50%, 100% 100%);
      transform: translate(-50%, 0) rotate(90deg);
   }
   50% {
      clip-path: polygon(100% 100%, 0 100%, 50% 50%);
      transform: translate(-50%, 0) rotate(180deg);
   }
   75% {
      clip-path: polygon(0 100%, 0 0, 50% 50%);
      transform: translate(-50%, 0) rotate(270deg);
   }
}

#sk .company-pic {
   position: relative;
   width: 80px;
   height: 80px;
   /* border-radius: 100%; */
}

#sk a, #experience a:visited  { color: #11ABB0; }
#sk a:hover, #sk a:focus { color: #313131; }

#sk h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   position: relative;
   padding-left: 70px;
   display: inline-block;
}

#sk h1::before {
   content: '\f013';  /* gear icon */
   font-family: 'FontAwesome';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   font-size: 28px;
   color: #11ABB0;
   text-shadow: 0 0 10px rgba(17, 171, 176, 0.3);
   animation: gearRotate 3s linear infinite;
}

#sk h1::after {
   content: '';
   position: absolute;
   left: 35px;
   top: 50%;
   transform: translateY(-50%);
   width: 30px;
   height: 30px;
   background: linear-gradient(90deg, #11ABB0, transparent);
   border-radius: 50%;
   opacity: 0.7;
   animation: skillBallMove 3s linear infinite;
}

#sk h1 span {
   border-bottom: 3px solid #11ABB0;
   padding-bottom: 6px;
   position: relative;
   overflow: hidden;
}

#sk h1 span::before {
   content: '';
   position: absolute;
   left: -2px;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: skillLineMove1 3s linear infinite;
}

#sk h1 span::after {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: skillLineMove2 3s linear infinite;
}

#sk h1 .third-line {
   content: '';
   position: absolute;
   right: -2px;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: skillLineMove3 3s linear infinite;
}

@keyframes gearRotate {
   0% {
      transform: translateY(-50%) rotate(0deg);
      text-shadow: 0 0 10px rgba(17, 171, 176, 0.3);
   }
   100% {
      transform: translateY(-50%) rotate(360deg);
      text-shadow: 0 0 20px rgba(17, 171, 176, 0.6);
   }
}

@keyframes skillBallMove {
   0% {
      transform: translateY(-50%) translateX(-20px);
      opacity: 0;
   }
   50% {
      opacity: 0.7;
   }
   100% {
      transform: translateY(-50%) translateX(20px);
      opacity: 0;
   }
}

@keyframes skillLineMove1 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   20%, 80% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

@keyframes skillLineMove2 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   30%, 70% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

@keyframes skillLineMove3 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   40%, 60% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

.sk {
   position: relative;
   margin-bottom: 40px;
   padding-bottom: 40px;
   /* Remove the gray border */
   border-bottom: none;
   transition: all 0.3s ease;
}

.sk::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 30px;
   height: 30px;
   background: #FFD700;
   border-radius: 50%;
   clip-path: polygon(100% 0, 100% 100%, 50% 50%);
   animation: skPacman 3s linear infinite;
}

.sk::before {
   content: '•';
   position: absolute;
   bottom: -12px;
   color: #FFD700;
   font-size: 20px;
   animation: skDots 3s linear infinite;
}

@keyframes skPacman {
   0%, 100% {
      clip-path: polygon(100% 0, 100% 100%, 50% 50%);
      transform: translateX(0);
   }
   25% {
      clip-path: polygon(100% 0, 50% 50%, 100% 100%);
      transform: translateX(calc(100% - 30px));
   }
   50% {
      clip-path: polygon(100% 100%, 0 100%, 50% 50%);
      transform: translateX(0);
   }
   75% {
      clip-path: polygon(0 100%, 0 0, 50% 50%);
      transform: translateX(calc(100% - 30px));
   }
}

@keyframes skDots {
   0% {
      left: 40px;
      box-shadow: 
         60px 0 0 #FFD700,
         120px 0 0 #FFD700,
         180px 0 0 #FFD700;
      opacity: 1;
   }
   100% {
      left: calc(100% - 40px);
      box-shadow: 
         -180px 0 0 #FFD700,
         -120px 0 0 #FFD700,
         -60px 0 0 #FFD700;
      opacity: 1;
   }
}

#sk h3 {
   font: 25px/30px 'opensans-bold', sans-serif;
}

#sk .header-col { padding-top: 9px; }
#sk .main-col { padding-right: 10%; }

.sk, .work {
   margin-bottom: 8px;
   padding-bottom: 54px;
   /* Remove the gray border */
   border-bottom: none;
}
#sk .info {
   font: 16px/24px 'librebaskerville-italic', serif;
   color: #6E7881;
   margin-bottom: 18px;
   margin-top: 9px;
}
#sk .info span {
   margin-right: 5px;
   margin-left: 5px;
}
#sk .date {
   font: 15px/24px 'opensans-regular', sans-serif;
   margin-top: 6px;
}


/*----------------------------------------------*/
/*	Skill Bars
/*----------------------------------------------*/

.skills-container {
  width: 100%;
  padding: 20px 0;
}

.skill-row {
  margin-bottom: 30px;
}

.skill-item {
  margin-bottom: 25px;
  padding: 0 15px;
}

.skill-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.skill-name {
	font: 15px 'opensans-bold', sans-serif;
  color: #313131;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.skill-level {
  font: 14px 'opensans-regular', sans-serif;
  color: #11ABB0;
}

.skill-bar {
  width: 100%;
  height: 20px;
  background: #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.skill-bar-fill {
  height: 100%;
  background: #11ABB0;
  border-radius: 10px;
  transition: width 1s ease-in-out;
  position: relative;
}

.pacman {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  z-index: 2;
  animation: move-pacman 1s linear infinite;
  transform: translateX(calc(100% - 20px));
}

.pacman-mouth {
  width: 20px;
  height: 20px;
  background: #FFD700;
  border-radius: 50%;
  position: relative;
  animation: eat 0.5s linear infinite;
}

.pacman-mouth::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #e8e8e8;
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
  animation: chomp 0.5s linear infinite;
}

.dots {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
}

.dots::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #FFF;
  border-radius: 50%;
  animation: dots 1s linear infinite;
}

@keyframes move-pacman {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100% - 20px));
  }
}

@keyframes eat {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(45deg);
  }
}

@keyframes chomp {
  0%, 100% {
    clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
  }
  50% {
    clip-path: polygon(50% 50%, 100% 50%, 100% 50%);
  }
}

@keyframes dots {
  0% {
    box-shadow: 30px 0 0 #FFF,
                60px 0 0 #FFF,
                90px 0 0 #FFF,
                120px 0 0 #FFF,
                150px 0 0 #FFF;
  }
  100% {
    box-shadow: -30px 0 0 #FFF,
                0px 0 0 #FFF,
                30px 0 0 #FFF,
                60px 0 0 #FFF,
                90px 0 0 #FFF;
  }
}

/* Remove old styles */
.bars, .bars .skills, .bars .skills li, .bar-expand {
  display: none;
}

/* ------------------------------------------------------------------ */
/* e. Portfolio Section
/* ------------------------------------------------------------------ */

#portfolio {
   background: #fff;
   padding-top: 60px;
   padding-bottom: 60px;
   overflow: hidden;
}

#portfolio h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   position: relative;
   padding-left: 70px;
   display: inline-block;
   color: #333;
   margin-bottom: 30px;
}

#portfolio h1::before {
   content: '\f121';  /* code icon */
   font-family: 'FontAwesome';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   font-size: 28px;
   color: #11ABB0;
   text-shadow: 0 0 10px rgba(17, 171, 176, 0.3);
   animation: projectIconFloat 3s ease-in-out infinite;
}

#portfolio h1::after {
   content: '';
   position: absolute;
   left: 35px;
   top: 50%;
   transform: translateY(-50%);
   width: 30px;
   height: 30px;
   background: linear-gradient(90deg, #11ABB0, transparent);
   border-radius: 50%;
   opacity: 0.7;
   animation: projectBallMove 3s linear infinite;
}

#portfolio h1 span {
   border-bottom: 3px solid #11ABB0;
   padding-bottom: 6px;
   position: relative;
   overflow: hidden;
}

#portfolio h1 span::before {
   content: '';
   position: absolute;
   left: -2px;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: projectLineMove1 3s linear infinite;
}

#portfolio h1 span::after {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: projectLineMove2 3s linear infinite;
}

#portfolio h1 .third-line {
   content: '';
   position: absolute;
   right: -2px;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: projectLineMove3 3s linear infinite;
}

@keyframes projectIconFloat {
   0%, 100% {
      transform: translateY(-50%) translateX(0);
      text-shadow: 0 0 10px rgba(17, 171, 176, 0.3);
   }
   50% {
      transform: translateY(-50%) translateX(5px);
      text-shadow: 0 0 20px rgba(17, 171, 176, 0.6);
   }
}

@keyframes projectBallMove {
   0% {
      transform: translateY(-50%) translateX(-20px);
      opacity: 0;
   }
   50% {
      opacity: 0.7;
   }
   100% {
      transform: translateY(-50%) translateX(20px);
      opacity: 0;
   }
}

@keyframes projectLineMove1 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   20%, 80% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

@keyframes projectLineMove2 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   30%, 70% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

@keyframes projectLineMove3 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   40%, 60% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

#portfolio img{
   max-height: 700px;
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 90%;
}
#portfolio .title{
   /* padding-left: 20%; */
   text-align: center;
   color: #0000EE;
}
#portfolio .title :visited{
   color: #551A8B; 
}

/* Portfolio Content */
#portfolio-wrapper .columns {
   margin-bottom: 36px; 
   width: 45%;
   /* padding-left :5%; */
   /* padding-right :10%; */
}
.portfolio-item .item-wrap {
   background: #fff;
   overflow: hidden;
   position: relative;
   
 
   -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.portfolio-item .item-wrap a {
   display: inline-block;
   cursor: pointer;
   

}

/* overlay */
.portfolio-item .item-wrap .overlay {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;

	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

   background: url(../images/overlay-bg.png) repeat;
}
.portfolio-item .item-wrap .link-icon {
   display: block;
   color: #fff;
   height: 30px;
   width: 30px;
   font-size: 18px;
   line-height: 30px;
   text-align: center;

   opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -15px;
   margin-top: -15px;
}
.portfolio-item .item-wrap img {
   padding: 3%;
   vertical-align: bottom;
}
.portfolio-item .portfolio-item-meta { padding: 18px }
.portfolio-item .portfolio-item-meta h5 {
   font: 14px/21px 'opensans-bold', sans-serif;
   color: #fff;
}
.portfolio-item .portfolio-item-meta p {
   font: 14px/20px 'opensans-light', sans-serif;
   color: black;
   margin-bottom: 0;
}

/* on hover */
.portfolio-item:hover .overlay {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}
.portfolio-item:hover .link-icon {
   opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

/* popup modal */
.popup-modal {
	max-width: 550px;
	background: #fff;
	position: relative;
	margin: 0 auto;
}
.popup-modal .description-box { padding: 12px 36px 18px 36px; }
.popup-modal .description-box h4 {
   font: 15px/24px 'opensans-bold', sans-serif;
	margin-bottom: 12px;
   color: #111;
}
.popup-modal .description-box p {
	font: 14px/24px 'opensans-regular', sans-serif;
   color: #A1A1A1;
   margin-bottom: 12px;
}
.popup-modal .description-box .categories {
   font: 11px/21px 'opensans-light', sans-serif;
   color: #A1A1A1;
   text-transform: uppercase;
   letter-spacing: 2px;
   display: block;
   text-align: left;
}
.popup-modal .description-box .categories i {
   margin-right: 8px;
}
.popup-modal .link-box {
   padding: 18px 36px;
   background: #111;
   text-align: left;
}
.popup-modal .link-box a {
   color: #fff;
	font: 11px/21px 'opensans-bold', sans-serif;
	text-transform: uppercase;
   letter-spacing: 3px;
   cursor: pointer;
}
.popup-modal a:hover {	color: #00CCCC; }
.popup-modal a.popup-modal-dismiss { margin-left: 24px; }


/* fadein/fadeout effect for modal popup
/* ------------------------------------------------------------------ */

/* content at start */
.mfp-fade.mfp-wrap .mfp-content .popup-modal {
   opacity: 0;
   -webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
   transition: all 200ms ease-in-out;
}
/* content fadein */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-modal {
   opacity: 1;
}
/* content fadeout */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-modal {
   opacity: 0;
}

/* ------------------------------------------------------------------ */
/* f. Call To Action Section
/* ------------------------------------------------------------------ */

#call-to-action {
   background: #212121;
   padding-top: 66px;
   padding-bottom: 48px;
}
#call-to-action h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: #fff;
}
#call-to-action h1 span { display: none; }
#call-to-action .header-col h1:before {
   font-family: 'FontAwesome';
   content: "\f0ac";
	padding-right: 10px;
	font-size: 72px;
   line-height: 72px;
   text-align: left;
   float: left;
   color: #fff;
}
#call-to-action .action {
   margin-top: 12px;
}
#call-to-action h2 {
   font: 28px/36px 'opensans-bold', sans-serif;
   color: #EBEEEE;
   margin-bottom: 6px;
}
#call-to-action h2 a {
   color: inherit;
}
#call-to-action p {
   color: #636363;
   font-size: 17px;
}
/*#
call-to-action .button {
	color:#fff;
   background: #0D0D0D;
}
*/
#call-to-action .button:hover,
#call-to-action .button:active {
   background: #FFFFFF;
   color: #0D0D0D;
}
#call-to-action p span {
	font-family: 'opensans-semibold', sans-serif;
	color: #D8D8D8;
}


/* Flex Slider
/* ------------------------------------------------------------------ */

/* Reset */
.flexslider a:active,
.flexslider a:focus  { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.slides li { margin: 0; padding: 0;}

/* Necessary Styles */
.flexslider {
   position: relative;
   zoom: 1;
   margin: 0;
   padding: 0;
}
.flexslider .slides { zoom: 1; }
.flexslider .slides > li { position: relative; }

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container { zoom: 1; position: relative; }

/* Clearfix for .slides */
.slides:before,
.slides:after {
   content: " ";
   display: table;
}
.slides:after {
   clear: both;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child { display: block; }

/* Slider Styles */
.slides { zoom: 1; }
.slides > li {
   /*margin-right: 5px; */
   overflow: hidden;
}

/* Control Nav */
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -20px;
    text-align: left;
}
.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}
.flex-control-paging li a {
    width: 12px;
    height: 12px;
    display: block;
    background: #ddd;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, .3);
}
.flex-control-paging li a:hover {
    background: #CCC;
    background: rgba(255, 255, 255, .7);
}
.flex-control-paging li a.flex-active {
    background: #fff;
    background: rgba(255, 255, 255, .9);
    cursor: default;
}

/* ------------------------------------------------------------------ */
/* h. Contact Section
/* ------------------------------------------------------------------ */

#contact {
   background: #191919;
   padding-top: 96px;
   padding-bottom: 102px;
   color: #636363;
}
#contact .section-head { margin-bottom: 42px; }

#contact a, #contact a:visited  { color: #11ABB0; }
#contact a:hover, #contact a:focus { color: #fff; }

#contact h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: #EBEEEE;
   margin-bottom: 6px;
}
#contact h1 span { display: none; }
#contact h1:before {
   font-family: 'FontAwesome';
   content: "\f0e0";
	padding-right: 10px;
	font-size: 72px;
   line-height: 72px;
   text-align: left;
   float: left;
   color: #ebeeee;
}

#contact h4 {
   font: 16px/24px 'opensans-bold', sans-serif;
   color: #EBEEEE;
   margin-bottom: 6px;
}
#contact p.lead {
   font: 18px/36px 'opensans-light', sans-serif;
   padding-right: 3%;
}
#contact .header-col { padding-top: 6px; }


/* contact form */
#contact form { margin-bottom: 30px; }
#contact label {
   font: 15px/24px 'opensans-bold', sans-serif;
   margin: 12px 0;
   color: #EBEEEE;
	display: inline-block;
	float: left;
   width: 26%;
}
#contact input,
#contact textarea,
#contact select {
   padding: 18px 20px;
	color: #eee;
	background: #373233;
	margin-bottom: 42px;
	border: 0;
	outline: none;
   font-size: 15px;
   line-height: 24px;
   width: 65%;
}
#contact input:focus,
#contact textarea:focus,
#contact select:focus {
	color: #fff;
	background-color: #11ABB0;
}
#contact button.submit {
	text-transform: uppercase;
	letter-spacing: 3px;
	color:#fff;
   background: #0D0D0D;
	border: none;
   cursor: pointer;
   height: auto;
   display: inline-block;
	border-radius: 3px;
   margin-left: 26%;
}
#contact button.submit:hover {
	color: #0D0D0D;
	background: #fff;
}
#contact span.required {
	color: #11ABB0;
	font-size: 13px;
}
#message-warning, #message-success {
   display: none;
	background: #0F0F0F;
	padding: 24px 24px;
	margin-bottom: 36px;
   width: 65%;
   margin-left: 26%;
}
#message-warning { color: #D72828; }
#message-success { color: #11ABB0; }

#message-warning i,
#message-success i {
   margin-right: 10px;
}
#image-loader {
   display: none;
   position: relative;
   left: 18px;
   top: 17px;
}


/* Twitter Feed */
#twitter {
   margin-top: 12px;
   padding: 0;
}
#twitter li {
   margin: 6px 0px 12px 0;
   line-height: 30px;
}
#twitter li span {
   display: block;
}
#twitter li b a {
   font: 13px/36px 'opensans-regular', Sans-serif;
   color: #474747 !important;
   border: none;
}


/* ------------------------------------------------------------------ */
/* i. Footer
/* ------------------------------------------------------------------ */

footer {
   text-align: center;
   background: #111;
   color: #888;
   padding: 20px 0;
}

footer .social-links {
   margin-bottom: 20px;
}

footer .social-links li {
    display: inline-block;
   margin: 0 10px;
}

footer .social-links li a {
   color: #fff;
   font-size: 20px;
   transition: all 0.3s ease;
}

footer .social-links li a:hover {
   color: #11ABB0;
   transform: translateY(-3px);
}

footer .copyright {
   font-size: 14px;
   line-height: 24px;
 }

footer .copyright li {
    display: inline-block;
   margin: 0 10px;
}

footer .copyright li a {
   color: #11ABB0;
   text-decoration: none;
   transition: all 0.3s ease;
}

footer .copyright li a:hover {
   color: #fff;
   text-decoration: underline;
}

go-top {
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 999;
}

go-top a {
   text-decoration: none;
   border: 0 none;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   background: rgba(17, 171, 176, 0.8);
   transition: all 0.3s ease;
   color: #fff;
   font-size: 21px;
   border-radius: 50%;
   box-shadow: 0 0 20px rgba(17, 171, 176, 0.3);
}

go-top a:hover {
   background: rgba(17, 171, 176, 1);
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 0 30px rgba(17, 171, 176, 0.5);
}

@keyframes titleGlow {
   0%, 100% {
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
   }
   50% {
      text-shadow: 0 0 30px rgba(255, 255, 255, 0.3),
                   0 0 50px rgba(255, 255, 255, 0.2);
   }
}

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

@keyframes scanLight {
   0% {
      left: -100%;
   }
   100% {
      left: 200%;
   }
}

@keyframes gradientText {
   0% {
      background-position: 0% 50%;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
   }
   50% {
      background-position: 100% 50%;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
   }
   100% {
      background-position: 0% 50%;
   }
}

#resume .education h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   position: relative;
   padding-left: 70px;
    display: inline-block;
}

#resume .education h1::before {
   content: '\f02d';  /* book icon */
   font-family: 'FontAwesome';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   font-size: 28px;
   color: #11ABB0;
   text-shadow: 0 0 10px rgba(17, 171, 176, 0.3);
   animation: eduIconFloat 3s ease-in-out infinite;
}

#resume .education h1::after {
   content: '';
	position: absolute;
   left: 35px;
   top: 50%;
   transform: translateY(-50%);
   width: 30px;
   height: 30px;
   background: linear-gradient(90deg, #11ABB0, transparent);
   border-radius: 50%;
   opacity: 0.7;
   animation: eduBallMove 3s linear infinite;
}

#resume .education h1 span {
   border-bottom: 3px solid #11ABB0;
   padding-bottom: 6px;
   position: relative;
   overflow: hidden;
}

#resume .education h1 span::before {
   content: '';
   position: absolute;
   left: -2px;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: eduLineMove1 3s linear infinite;
}

#resume .education h1 span::after {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: eduLineMove2 3s linear infinite;
}

#resume .education h1 .third-line {
   content: '';
   position: absolute;
   right: -2px;
   top: 0;
   width: 2px;
   height: 100%;
   background: #11ABB0;
   animation: eduLineMove3 3s linear infinite;
}

@keyframes eduIconFloat {
   0%, 100% {
      transform: translateY(-50%) translateX(0);
      text-shadow: 0 0 10px rgba(17, 171, 176, 0.3);
   }
   50% {
      transform: translateY(-50%) translateX(5px);
      text-shadow: 0 0 20px rgba(17, 171, 176, 0.6);
   }
}

@keyframes eduBallMove {
   0% {
      transform: translateY(-50%) translateX(-20px);
      opacity: 0;
   }
   50% {
      opacity: 0.7;
   }
   100% {
      transform: translateY(-50%) translateX(20px);
      opacity: 0;
   }
}

@keyframes eduLineMove1 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   20%, 80% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

@keyframes eduLineMove2 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   30%, 70% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

@keyframes eduLineMove3 {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }
   40%, 60% {
      opacity: 1;
   }
   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

#resume .education h3 {
   font: 25px/30px 'opensans-bold', sans-serif;
   margin: 10px 0;
   color: #333;
   display: flex;
   align-items: center;
   gap: 15px;
   position: relative;
   padding-left: 20px;
}

#resume .education h3::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   width: 10px;
   height: 10px;
   background: #11ABB0;
   border-radius: 50%;
   transform: translateY(-50%);
   box-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
}

#resume .education .info {
   font: 16px/24px 'librebaskerville-italic', serif;
   color: #6E7881;
   margin: 9px 0 18px;
   padding-left: 20px;
   border-left: 3px solid rgba(17, 171, 176, 0.3);
   transition: all 0.3s ease;
}

#resume .education .info:hover {
   border-left-color: #11ABB0;
   background: rgba(17, 171, 176, 0.05);
   padding: 10px 20px;
   border-radius: 0 5px 5px 0;
}

.portfolio-item {
   position: relative;
   margin-bottom: 40px;
   padding-bottom: 40px;
   /* Remove the dashed border */
   border-bottom: none;
   transition: all 0.3s ease;
}

.portfolio-item::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 30px;
   height: 30px;
   background: #FFD700;
   border-radius: 50%;
   clip-path: polygon(100% 0, 100% 100%, 50% 50%);
   animation: portfolioPacman 3s linear infinite;
}

.portfolio-item::before {
   content: '•';
   position: absolute;
   bottom: -12px;
   color: #FFD700;
   font-size: 20px;
   animation: portfolioDots 3s linear infinite;
}

@keyframes portfolioPacman {
   0%, 100% {
      clip-path: polygon(100% 0, 100% 100%, 50% 50%);
      transform: translateX(0);
   }
   25% {
      clip-path: polygon(100% 0, 50% 50%, 100% 100%);
      transform: translateX(calc(100% - 30px));
   }
   50% {
      clip-path: polygon(100% 100%, 0 100%, 50% 50%);
      transform: translateX(0);
   }
   75% {
      clip-path: polygon(0 100%, 0 0, 50% 50%);
      transform: translateX(calc(100% - 30px));
   }
}

@keyframes portfolioDots {
   0% {
      left: 40px;
      box-shadow: 
         60px 0 0 #FFD700,
         120px 0 0 #FFD700,
         180px 0 0 #FFD700;
      opacity: 1;
   }
   100% {
      left: calc(100% - 40px);
      box-shadow: 
         -180px 0 0 #FFD700,
         -120px 0 0 #FFD700,
         -60px 0 0 #FFD700;
      opacity: 1;
   }
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.portfolio-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  border: 1px solid rgba(17, 171, 176, 0.2);
  display: flex;
  flex-direction: column;
  height: 100%;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.portfolio-card:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 8px 25px rgba(17, 171, 176, 0.2),
    0 0 15px rgba(17, 171, 176, 0.1);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(17, 171, 176, 0.3);
}

.portfolio-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(17, 171, 176, 0.1),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.portfolio-card:hover::before {
  transform: translateX(100%);
}

.portfolio-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(17, 171, 176, 0.1) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.portfolio-card:hover::after {
  opacity: 1;
}

.portfolio-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.portfolio-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  background: rgba(245, 245, 245, 0.8);
  transition: all 0.3s ease;
}

.portfolio-card:hover .portfolio-image {
  background: rgba(245, 245, 245, 0.95);
  box-shadow: inset 0 0 20px rgba(17, 171, 176, 0.1);
}

.portfolio-title {
  color: #333;
  font-size: 1.4em;
  margin-bottom: 15px;
  font-family: 'opensans-bold', sans-serif;
  text-align: center;
}

.portfolio-category {
  color: #11ABB0;
  font-size: 1.1em;
  margin-bottom: 20px;
  font-style: italic;
  text-align: center;
}

.portfolio-description {
  margin-bottom: 25px;
  flex-grow: 1;
}

.description-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  line-height: 1.6;
  padding-left: 15px;
}

.bullet {
  color: #11ABB0;
  margin-right: 12px;
  font-size: 1.2em;
  flex-shrink: 0;
}

.portfolio-link {
   display: inline-flex;
   align-items: center;
   padding: 8px 15px;
   margin-top: 15px;
   color: #333333;  /* Changed to dark gray/black */
   background: rgba(17, 171, 176, 0.1);
   border: 1px solid rgba(17, 171, 176, 0.3);
   border-radius: 5px;
	text-decoration: none;
   font-size: 14px;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
   opacity: 1;
   transform: translateY(0);
}

.portfolio-link::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background: linear-gradient(90deg, rgba(17, 171, 176, 0.2), rgba(17, 171, 176, 0.1));
   transition: width 0.3s ease;
   z-index: 1;
}

.portfolio-link:hover {
   color: #333333;  /* Keep text dark on hover */
   border-color: rgba(17, 171, 176, 0.6);
   box-shadow: 0 0 15px rgba(17, 171, 176, 0.3);
   transform: translateY(-2px);
}

.portfolio-link:hover::before {
   width: 100%;
}

.portfolio-link i {
   margin-left: 8px;
   position: relative;
   z-index: 2;
   transition: transform 0.3s ease;
}

.portfolio-link:hover i {
   transform: translateX(3px);
}

/* About Section */
#about {
// ... existing code ...
}

#about .role-company {
  margin-bottom: 30px;
  font-size: 1.2em;
  color: #E8E8E8;
}

#about .role-company .role,
#about .role-company .company {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  background: rgba(17, 171, 176, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

#about .role-company .role:hover,
#about .role-company .company:hover {
  background: rgba(17, 171, 176, 0.2);
  transform: translateX(5px);
}

#about .role-company i {
  margin-right: 10px;
  color: #11ABB0;
  font-size: 1.1em;
}

#about .role-company .spacer {
  margin: 0 15px;
  display: inline-block;
}

#nav-wrap .dropdown {
   position: relative;
}

#nav-wrap .dropdown-content {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(10px);
   min-width: 160px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   z-index: 1000;
   padding: 8px 0;
}

#nav-wrap .dropdown:hover .dropdown-content {
	display: block;
   animation: fadeIn 0.3s ease;
}

#nav-wrap .dropdown-content li {
   float: none;
   display: block;
   margin: 0;
   padding: 0;
}

#nav-wrap .dropdown-content a {
   color: #fff;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   font-size: 14px;
   text-align: left;
   transition: all 0.3s ease;
}

#nav-wrap .dropdown-content a:hover {
   background: rgba(17, 171, 176, 0.2);
   color: #11ABB0;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(-10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.tech-stack-container {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 40px;
   margin: 20px 0;
}

.tech-stack {
   padding: 10px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
   position: relative;
   max-width: 480px;
}

.animations-container {
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
}

.loader-wrapper {
   position: relative;
   width: 100px;
   height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.loader-wrapper .packman::before {
   content: '';
   position: absolute;
   width: 50px;
   height: 25px;
   background-color: #EFF107;
   border-radius: 100px 100px 0 0;
   transform: translate(-50%, -50%);
   animation: pac-top 0.5s linear infinite;
   transform-origin: center bottom;
}

.loader-wrapper .packman::after {
   content: '';
   position: absolute;
   width: 50px;
   height: 25px;
   background-color: #EFF107;
   border-radius: 0 0 100px 100px;
   transform: translate(-50%, 50%);
   animation: pac-bot 0.5s linear infinite;
   transform-origin: center top;
}

@keyframes pac-top {
   0% {
      transform: translate(-50%, -50%) rotate(0)
   }
   50% {
      transform: translate(-50%, -50%) rotate(-30deg)
   }
   100% {
      transform: translate(-50%, -50%) rotate(0)
   }
}

@keyframes pac-bot {
   0% {
      transform: translate(-50%, 50%) rotate(0)
   }
   50% {
      transform: translate(-50%, 50%) rotate(30deg)
   }
   100% {
      transform: translate(-50%, 50%) rotate(0)
   }
}

.dots .dot {
   position: absolute;
   z-index: -1;
   top: 8px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #11ABB0;
}

.dots .dot:nth-child(1) {
   left: 90px;
   animation: dot-stage1 0.5s infinite;
}

.dots .dot:nth-child(2) {
   left: 60px;
   animation: dot-stage1 0.5s infinite;
}

.dots .dot:nth-child(3) {
   left: 30px;
   animation: dot-stage1 0.5s infinite;
}

.dots .dot:nth-child(4) {
   left: 10px;
   animation: dot-stage2 0.5s infinite;
}

@keyframes dot-stage1 {
   0% {
      transform: translate(0, 0);
   }
   100% {
      transform: translate(-24px, 0);
   }
}

@keyframes dot-stage2 {
   0% {
      transform: scale(1);
   }
   5%, 100% {
      transform: scale(0);
   }
}

#ghost {
   position: relative;
   scale: 0.25;
}

.ghost-left {
   transform: scaleX(-1);
}

#red {
   animation: upNDown infinite 0.5s;
   position: relative;
   width: 140px;
   height: 140px;
   display: grid;
   grid-template-columns: repeat(14, 1fr);
   grid-template-rows: repeat(14, 1fr);
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   grid-template-areas:
      "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
      "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
      "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
      "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
      "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
      "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
      "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
      "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
      "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
      "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
      "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
      "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
      "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
      "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes upNDown {
   0%, 49% {
      transform: translateY(0px);
   }
   50%, 100% {
      transform: translateY(-10px);
   }
}

#top0, #top1, #top2, #top3, #top4, #st0, #st1, #st2, #st3, #st4, #st5 {
   background-color: red;
}

#top0 { grid-area: top0; }
#top1 { grid-area: top1; }
#top2 { grid-area: top2; }
#top3 { grid-area: top3; }
#top4 { grid-area: top4; }
#st0 { grid-area: st0; }
#st1 { grid-area: st1; }
#st2 { grid-area: st2; }
#st3 { grid-area: st3; }
#st4 { grid-area: st4; }
#st5 { grid-area: st5; }

#an1 { grid-area: an1; animation: flicker0 infinite 0.5s; }
#an18 { grid-area: an18; animation: flicker0 infinite 0.5s; }
#an2 { grid-area: an2; animation: flicker1 infinite 0.5s; }
#an17 { grid-area: an17; animation: flicker1 infinite 0.5s; }
#an3 { grid-area: an3; animation: flicker1 infinite 0.5s; }
#an16 { grid-area: an16; animation: flicker1 infinite 0.5s; }
#an4 { grid-area: an4; animation: flicker1 infinite 0.5s; }
#an15 { grid-area: an15; animation: flicker1 infinite 0.5s; }
#an6 { grid-area: an6; animation: flicker0 infinite 0.5s; }
#an12 { grid-area: an12; animation: flicker0 infinite 0.5s; }
#an7 { grid-area: an7; animation: flicker0 infinite 0.5s; }
#an13 { grid-area: an13; animation: flicker0 infinite 0.5s; }
#an9 { grid-area: an9; animation: flicker1 infinite 0.5s; }
#an10 { grid-area: an10; animation: flicker1 infinite 0.5s; }
#an8 { grid-area: an8; animation: flicker0 infinite 0.5s; }
#an11 { grid-area: an11; animation: flicker0 infinite 0.5s; }

@keyframes flicker0 {
   0%, 49% {
      background-color: red;
   }
   50%, 100% {
      background-color: transparent;
   }
}

@keyframes flicker1 {
   0%, 49% {
      background-color: transparent;
   }
   50%, 100% {
      background-color: red;
   }
}

#eye {
   width: 40px;
   height: 50px;
   position: absolute;
   top: 30px;
   left: 10px;
}

#eye::before {
   content: "";
   background-color: white;
   width: 20px;
   height: 50px;
   transform: translateX(10px);
   display: block;
   position: absolute;
}

#eye::after {
   content: "";
   background-color: white;
   width: 40px;
   height: 30px;
   transform: translateY(10px);
   display: block;
   position: absolute;
}

#eye1 {
   width: 40px;
   height: 50px;
   position: absolute;
   top: 30px;
   right: 30px;
}

#eye1::before {
   content: "";
   background-color: white;
   width: 20px;
   height: 50px;
   transform: translateX(10px);
   display: block;
   position: absolute;
}

#eye1::after {
   content: "";
   background-color: white;
   width: 40px;
   height: 30px;
   transform: translateY(10px);
   display: block;
   position: absolute;
}

#pupil {
   width: 20px;
   height: 20px;
   background-color: blue;
   position: absolute;
   top: 50px;
   left: 10px;
   z-index: 1;
   animation: eyesMovement infinite 3s;
}

#pupil1 {
   width: 20px;
   height: 20px;
   background-color: blue;
   position: absolute;
   top: 50px;
   right: 50px;
   z-index: 1;
   animation: eyesMovement infinite 3s;
}

@keyframes eyesMovement {
   0%, 49% {
      transform: translateX(0px);
   }
   50%, 99% {
      transform: translateX(10px);
   }
   100% {
      transform: translateX(0px);
   }
}

#shadow {
   background-color: black;
   width: 140px;
   height: 140px;
   position: absolute;
   border-radius: 50%;
   transform: rotateX(80deg);
   filter: blur(20px);
   top: 80%;
   animation: shadowMovement infinite 0.5s;
}

@keyframes shadowMovement {
   0%, 49% {
      opacity: 0.5;
   }
   50%, 100% {
      opacity: 0.2;
   }
}

.tech-item {
   aspect-ratio: 1;
   background: rgba(255, 255, 255, 0.2);
   border: none;
   border-radius: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 3px;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
   box-shadow: none;
   animation: tileFloat 3s ease-in-out infinite;
   animation-delay: calc(var(--animation-order) * 0.1s);
}

.tech-item:hover {
   transform: translateY(-2px) scale(1.05);
   background: rgba(255, 255, 255, 0.3);
   box-shadow: 0 4px 12px rgba(17, 171, 176, 0.15);
   z-index: 1;
}

.tech-item img {
   width: 85px;
   height: 85px;
   object-fit: contain;
   transition: all 0.3s ease;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.tech-item:hover img {
   transform: scale(1.1);
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

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

@media only screen and (max-width: 767px) {
   .tech-stack {
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      max-width: 320px;
   }
   
   .tech-item {
      padding: 2px;
   }
   
   .tech-item img {
	width: 60px;
	height: 60px;
   }
}

/* Remove the tech-name class entirely */
.tech-name {
   display: none;
}

.stack-header {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
   margin-bottom: 20px;
   width: 100%;
}

.stack-header h2 {
   font: 24px/30px 'opensans-bold', sans-serif;
   color: #11ABB0;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 2px;
   text-shadow: 0 0 10px rgba(17, 171, 176, 0.5);
}

.bio-text {
  font-family: 'opensans-regular', sans-serif;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  white-space: pre-wrap;
  margin-bottom: 30px;
  color: #7A7A7A;
  animation: decrypt 2s steps(30, end) forwards;
}

@keyframes decrypt {
  0% {
    color: transparent;
    text-shadow: 0 0 8px rgba(17, 171, 176, 0.8);
    filter: blur(8px);
  }
  
  30% {
    color: #666;
    text-shadow: 0 0 8px rgba(17, 171, 176, 0.5);
    filter: blur(4px);
  }
  
  60% {
    text-shadow: 0 0 4px rgba(17, 171, 176, 0.3);
    filter: blur(2px);
  }
  
  100% {
    color: #7A7A7A;
    text-shadow: none;
    filter: blur(0);
    font-weight: 600;
  }
}

.bio-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(17, 171, 176, 0.1) 45%, 
    rgba(17, 171, 176, 0.2) 50%, 
    rgba(17, 171, 176, 0.1) 55%, 
    transparent 100%
  );
  animation: decrypt-scan 3s linear forwards;
  transform: translateX(-100%);
  pointer-events: none;
}

@keyframes decrypt-scan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}