* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html,
body {
   max-width: 100%;
   overflow-x: body;

}


body {
   font-family: 'Poppins', sans-serif;
   background: #0d121e;
   color: #ffffff;
   line-height: 1.6;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   width: 100%;
}

nav {
   background-color: #0f172a;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 80px;
   padding: 0 clamp(20px, 5vw, 200px);
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
   max-width: 100%;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

nav .left .logo {
   text-decoration: none;
   background: linear-gradient(to right, #ffffff, #e100ff);
   font-size: 2rem;
   font-weight: 600;
   transition: color 0.3s ease;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

nav .left .logo:hover {
   color: rgb(198, 198, 229);
}

nav .left {
   font-size: 1.8rem;
   font-weight: 600;
}

nav .right {
   display: flex;
   align-items: center;
}

.hamburger {
   display: none;
   flex-direction: column;
   cursor: pointer;
   background: none;
   border: none;
   padding: 10px;
   z-index: 1001;
}

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

.nav-menu {
   display: flex;
   list-style: none;
   padding: 0;
   gap: 10px;
}

.nav-menu li {
   margin: 0 15px;
}

.nav-menu li a {
   text-decoration: none;
   color: white;
   transition: color 0.3s ease;
   font-size: 1.2rem;
   font-weight: 300;
   padding: 8px 12px;
   border-radius: 5px;
}

.nav-menu li a:hover {
   color: rgb(198, 198, 229);
   background-color: rgba(255, 255, 255, 0.1);
}

main {
   flex-grow: 1;
}

.firstSection {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 60px;
   min-height: 85vh;
   padding: 140px 60px 40px 60px;
   background-color: #0d121e;
}

.leftSection {
   width: 45%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.introText {
   font-size: 2.4rem;
   max-width: 100%;
}

.txtcolor {
   background: linear-gradient(to right, #84ef4e, #12ffff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.passionate-text {
   display: block;
   margin: 5px 0;
}

#element {
   color: rgb(105 108 237);
}

.introText .button {
   display: flex;
   gap: 15px;
   margin-top: 20px;
   flex-wrap: wrap;
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 25px;
   border-radius: 30px;
   text-decoration: none;
   color: white;
   font-weight: 500;
   font-size: 1rem;
   transition: all 0.3s ease;
}

.resume-btn {
   background: linear-gradient(135deg, #4c00ff, #c21de7);
   box-shadow: 0 4px 15px rgba(86, 105, 189, 0.4);
}

.resume-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.github-btn {

   background: linear-gradient(135deg, #4a79d2, #a15ce6);
   box-shadow: 0 4px 15px rgba(0, 201, 255, 0.4);
}

.github-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 201, 255, 0.6);
}

.rightSection {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 45%;
}

.rightSection img {
   height: 450px;
   border-radius: 2000px;
   object-fit: cover;
}

main hr {
   background: #d89898;
   height: 2px;
   margin: 40px clamp(20px, 5%, 84px);
}

.skillsSection {
   padding: 60px 8%;
   min-height: calc(100vh - 160px);
   scroll-margin-top: 100px;
}

.skillsSection .section-title {
   font-size: 3rem;
   margin-bottom: 40px;
   background: linear-gradient(to right, #b8f7f8, #00ff08);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.skills-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 30px;
   max-width: 1200px;
   margin: 0 auto;
}

.skill-category {
   padding: 25px;
   border-radius: 15px;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   overflow: visible;
}

.skill-category:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(199, 125, 255, 0.3), 0 10px 20px rgba(199, 125, 255, 0.2), -15px 0 25px rgba(199, 125, 255, 0.25), 15px 0 25px rgba(199, 125, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   filter: drop-shadow(0 0 35px rgba(199, 125, 255, 0.7));
}

.skill-category h3 {
   font-size: 1.3rem;
   margin-bottom: 15px;
   color: #c77dff;
}

.skill-category:hover h3 {
   color: #ffd700;
   text-shadow: 0 0 10px rgba(199, 125, 255, 0.8);
}

.skill-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.skill-tag {
   padding: 8px 16px;
   border-radius: 20px;
   background: linear-gradient(135deg, rgba(199, 125, 255, 0.2), rgba(123, 44, 191, 0.3));
   border: 1px solid rgba(199, 125, 255, 0.3);
   font-size: 0.85rem;
   transition: all 0.3s ease;
}

.skill-tag:hover {
   background: linear-gradient(135deg, rgba(199, 125, 255, 0.4), rgba(123, 44, 191, 0.5));
   transform: scale(1.15);
   filter: drop-shadow(0 0 15px rgba(199, 125, 255, 0.8));
}

.projectsSection {
   padding: 60px 8%;
   min-height: calc(100vh - 160px);
   scroll-margin-top: 100px;
}

.projectsSection .section-title {
   font-size: 3rem;
   margin-bottom: 40px;
   background: linear-gradient(to right, #b8f7f8, #00ff08);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.projects-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 30px;
   max-width: 1200px;
   margin: 0 auto;
}

.project-card {
   padding: 25px;
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   overflow: visible;
}

.project-card .project-icon {
   font-size: 40px;
   margin-bottom: 15px;
   transition: none;
}

.project-card h3 {
   font-weight: 600;
   margin-bottom: 10px;
   color: #fff;
}

.project-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(199, 125, 255, 0.3), 0 10px 20px rgba(199, 125, 255, 0.2), -15px 0 25px rgba(199, 125, 255, 0.25), 15px 0 25px rgba(199, 125, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   filter: drop-shadow(0 0 35px rgba(199, 125, 255, 0.7));
}

/* No hover transform on project icons */

.project-card:hover h3 {
   color: #ffd700;
   text-shadow: 0 0 10px rgba(199, 125, 255, 0.8);
}

.project-card p {
   font-size: 0.9rem;
   color: #ddd;
   line-height: 1.6;
   margin-bottom: 15px;
}

.project-links {
   display: flex;
   gap: 15px;
}

.project-links a {
   color: #c77dff;
   text-decoration: none;
   font-size: 0.9rem;
   display: flex;
   align-items: center;
   gap: 5px;
   transition: color 0.3s ease;
}

.project-links a:hover {
   color: white;
}

.workSection {
   padding: 80px 8%;
   min-height: calc(100vh - 160px);
   scroll-margin-top: 100px;
   overflow: visible;
   width: 100%;
   max-width: 100%;
}

.workSection .work-title {
   font-size: 3rem;
   margin-bottom: 50px;
   background: linear-gradient(to right, #b8f7f8, #00ff08);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.workSection .container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 40px;
   max-width: 1200px;
   padding: 0 5%;
   margin: 50px auto 0;
   width: 100%;
   overflow: visible;
}

.workSection .card {
   padding: 25px;
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   overflow: visible;
}

.workSection .icon {
   transition: all 0.4s ease;
}

.workSection .card:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(199, 125, 255, 0.3), 0 10px 20px rgba(199, 125, 255, 0.2), -15px 0 25px rgba(199, 125, 255, 0.25), 15px 0 25px rgba(199, 125, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   filter: drop-shadow(0 0 35px rgba(199, 125, 255, 0.7));
}

.workSection .card:hover .icon {
   transform: scale(1.15);
   filter: drop-shadow(0 0 15px rgba(199, 125, 255, 0.8));
}

.workSection .card:hover h2 {
   color: #ffd700;
   text-shadow: 0 0 10px rgba(199, 125, 255, 0.8);
}

.workSection .icon {
   font-size: 40px;
   margin-bottom: 15px;
}

.workSection .card h2 {
   font-weight: 600;
   margin-bottom: 10px;
   color: #fff;
}

.workSection .card p {
   font-size: 14px;
   color: #ddd;
   line-height: 1.6;
   margin-bottom: 20px;
}

.btn-card {
   display: inline-block;
   padding: 10px 24px;
   border-radius: 30px;
   border: 1px solid #c77dff;
   text-decoration: none;
   color: white;
   font-size: 14px;
   position: relative;
   overflow: hidden;
   transition: 0.4s;
   z-index: 1;
}

.btn-card::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, #c77dff, #7b2cbf);
   top: 0;
   left: -100%;
   transition: 0.4s;
   z-index: -1;
}

.btn-card:hover::before {
   left: 0;
}

.btn-card:hover {
   box-shadow: 0 0 20px #c77dff;
}

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

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

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

@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

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

@keyframes fadeDown {
   from {
      opacity: 0;
      transform: translateY(-40px);
   }

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

.particle {
   position: fixed;
   width: 6px;
   height: 6px;
   background: #c77dff;
   border-radius: 50%;
   opacity: 0.6;
   animation: float 8s linear infinite;
   pointer-events: none;
   z-index: -1;
}

@keyframes float {
   0% {
      transform: translateY(0);
   }

   100% {
      transform: translateY(-100vh);
   }
}

html {
   scroll-behavior: smooth;
}

.contactSection {
   text-align: center;
   padding: 100px 20px;
   background-color: #0f172a;
   border-bottom: 1px solid #1f2d40;
}

.contactSection h1 {
   font-size: 42px;
   margin-bottom: 20px;
   color: #ffffff;
}

.contactSection p {
   max-width: 600px;
   margin: auto;
   color: #9ca3af;
   line-height: 1.6;
   font-size: 18px;
}

.contactSection .btn {
   display: inline-block;
   margin-top: 40px;
   background: #2563eb;
   color: white;
   padding: 16px 35px;
   border-radius: 10px;
   text-decoration: none;
   font-weight: bold;
   transition: 0.3s;
}

.contactSection .btn:hover {
   background: #1d4ed8;
}

.footer {
   background-color: #0f172a;
   padding: 60px 8%;
}

.footer-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.brand h2 {
   color: rgb(0 229 255);
   margin-bottom: 10px;
}

.brand p {
   color: #9ca3af;
   max-width: 300px;
}

.social a {
   margin-left: 15px;
   text-decoration: none;
   transition: all 0.3s ease;
}

.social a:hover {
   transform: translateY(-2px);
}

.social img {
   width: 24px !important;
   height: 24px !important;
   display: block;
   filter: brightness(0.7);
   transition: all 0.3s ease;
}

.social a:hover img {
   filter: brightness(1) drop-shadow(0 2px 8px rgba(59, 130, 246, 0.5));
   transform: scale(1.15);
}

.footer-bottom {
   margin-top: 40px;
   border-top: 1px solid #1f2d40;
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
   color: #9ca3af;
   font-size: 14px;
}

.top {
   color: #9ca3af;
   text-decoration: none;
   transition: color 0.3s ease;
}

.top:hover {
   color: #3b82f6;
}