:root {
   --color1: hsl(30, 76%, 66%);
   --color2: hsl(30, 37%, 46%);
   --color3: hsl(30, 57%, 46%);
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
 }

 * {

   &::-webkit-scrollbar {
     width: 10px;
   }

   &::-webkit-scrollbar-track {
     background: #0d0d0d;
   }

   &::-webkit-scrollbar-thumb {
     background: #212121;
   }

   &::-webkit-scrollbar-thumb:hover {
     background: #2b2b2b;
   }
 }

 a {
   text-decoration: none;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   background: #050505;
   color: #e8e8e8;
   line-height: 1.6;
   overflow-x: hidden;
 }

 .line-clamp-3 {
   line-clamp: 3 !important;
   -webkit-line-clamp: 3 !important;
   display: -webkit-box !important;
   -webkit-box-orient: vertical !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
 }

 .container {
   max-width: 1600px;
   margin: 0 auto;
   padding: 0 20px;
 }

 nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background: rgba(5, 5, 5, 0.8);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   z-index: 1000;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 nav .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 25px 40px;
 }

 .nav-left {
   display: flex;
   align-items: center;
   gap: 20px;
 }

 .hamburger {
   display: none;
   background: none;
   border: none;
   color: #fff;
   font-size: 1.5rem;
   cursor: pointer;
   padding: 5px;
   transition: color 0.3s;
   z-index: 10;
 }

 .hamburger:hover {
   color: var(--color1);
 }

 .logo {
   font-size: 1.4rem;
   font-weight: 700;
   color: #fff;
   letter-spacing: -0.5px;
 }

 .nav-links {
   display: flex;
   gap: 50px;
   list-style: none;
   align-items: center;
 }

 .nav-links a {
   color: #888;
   text-decoration: none;
   transition: all 0.3s;
   font-size: 0.95rem;
   font-weight: 500;
 }

 .nav-links a:hover {
   color: color-mix(in srgb, var(--color1), #ffffff 10%);
 }

 .cta-button {
   background: linear-gradient(135deg, var(--color1) 0%, var(--color2) 100%);
   color: #fff !important;
   padding: 12px 28px;
   border-radius: 8px;
   transition: all 0.3s;
 }

 .cta-button:hover {
   opacity: 0.9;
 }

 .mobile-cta {
   display: none;
 }

 .sidebar {
   position: fixed;
   top: 0;
   left: -50rem;
   width: 300px;
   height: 100vh;
   background: rgba(10, 10, 10, 0.98);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-right: 1px solid rgba(255, 255, 255, 0.05);
   padding: 80px 30px 30px;
   z-index: 2000;
   transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow-y: auto;
 }

 .sidebar.open {
   left: 0;
 }

 .sidebar-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: rgba(0, 0, 0, 0.7);
   z-index: 1999;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.4s;
 }

 .sidebar-overlay.active {
   opacity: 1;
   pointer-events: all;
 }

 .sidebar-links {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .sidebar-links a {
   color: #888;
   text-decoration: none;
   font-size: 0.9rem;
   font-weight: 500;
   transition: all 0.3s;
   display: block;
   padding: 10px 0;
 }

 .sidebar-links a:hover {
   color: color-mix(in srgb, var(--color1), #ffffff 10%);
 }

 .sidebar-links .mobile-cta {
   display: block;
   background: linear-gradient(135deg, var(--color1) 0%, var(--color2) 100%);
   color: #fff !important;
   padding: 12px 28px;
   border-radius: 8px;
   transition: all 0.3s;
   text-align: center;
   margin-top: 20px;
 }

 .sidebar-links .mobile-cta:hover {
   color: #fff !important;
   opacity: 0.9;
 }

 .close-sidebar {
   position: absolute;
   top: 25px;
   right: 25px;
   background: none;
   border: none;
   color: #fff;
   font-size: 1.5rem;
   cursor: pointer;
   transition: color 0.3s;
 }

 .close-sidebar:hover {
   color: var(--color1);
 }

 .hero {
   padding: 160px 0 120px;
   position: relative;
   background: radial-gradient(ellipse at top, hsla(29, 76%, 66%, 0.05) 0%, transparent 60%);
 }

 .hero-content {
   max-width: 1000px;
   margin: 0 auto;
   text-align: center;
 }

 .badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: hsla(29, 76%, 66%, 0.1);
   border: 1px solid hsla(29, 76%, 66%, 0.2);
   color: var(--color1);
   padding: 10px 20px;
   border-radius: 25px;
   font-size: 0.85rem;
   margin-bottom: 30px;
   font-weight: 600;
 }

 .badge i {
   font-size: 0.5rem;
 }

 h1 {
   font-size: 5.5rem;
   font-weight: 800;
   line-height: 1.1;
   margin-bottom: 30px;
   background: linear-gradient(135deg, var(--color3) 0%, var(--color1) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   letter-spacing: -2px;
 }

 .hero p {
   font-size: 1.4rem;
   color: #aaa;
   line-height: 1.8;
   margin-bottom: 50px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
 }

 .hero-stats {
   display: flex;
   flex-wrap: wrap;
   gap: 80px;
   justify-content: center;
   margin-top: 80px;
 }

 .hero-stat {
   text-align: center;
 }

 .hero-stat h3 {
   font-size: 3rem;
   background: linear-gradient(135deg, var(--color3) 0%, var(--color1) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-weight: 800;
   margin-bottom: 8px;
 }

 .hero-stat p {
   color: #666;
   font-size: 0.925rem;
   margin: 0;
 }

 section {
   padding: 60px 0;
   position: relative;
 }

 .section-title {
   text-align: center;
   margin-bottom: 80px;
 }

 .section-title h2 {
   font-size: 3.5rem;
   font-weight: 800;
   color: #fff;
   margin-bottom: 15px;
   letter-spacing: -1px;
 }

 .section-title p {
   color: #666;
   font-size: 1.1rem;
 }

 .skills-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 25px;
   margin-bottom: 60px;
 }

 .skill-card {
   background: linear-gradient(145deg, #0a0a0a 0%, #0f0f0f 100%);
   padding: 35px 20px;
   border-radius: 16px;
   border: 1px solid hsla(29, 80%, 60%, 0.05);
   text-align: center;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   position: relative;
   overflow: hidden;
 }

 .skill-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, hsla(29, 76%, 66%, 0.1) 0%, hsla(20, 37%, 46%, 0.1) 100%);
   opacity: 0;
   transition: opacity 0.4s;
 }

 .skill-card:hover {
   transform: translateY(-5px);
   border-color: rgba(255, 255, 255, 0.1);
 }

 .skill-card:hover::before {
   opacity: 1;
 }

 .skill-icon {
   font-size: 2.5rem;
   margin-bottom: 20px;
   position: relative;
   z-index: 1;
 }

 .skill-card h3 {
   font-size: 1rem;
   color: #fff;
   font-weight: 600;
   position: relative;
   z-index: 1;
 }

 .skill-card[data-skill="react"] .skill-icon {
   color: #61DAFB;
 }

 .skill-card[data-skill="javascript"] .skill-icon {
   color: #facc15;
 }

 .skill-card[data-skill="nodejs"] .skill-icon {
   color: #339933;
 }

 .skill-card[data-skill="python"] .skill-icon {
   color: #3776AB;
 }

 .skill-card[data-skill="typescript"] .skill-icon {
   color: #3178C6;
 }

 .skill-card[data-skill="java"] .skill-icon {
   color: #f87171;
 }

 .skill-card[data-skill="php"] .skill-icon {
   color: #c084fc;
 }

 .skill-card[data-skill="laravel"] .skill-icon {
   color: #ef4444;
 }

 .skill-card[data-skill="sass"] .skill-icon {
   color: #f472b6;
 }

 .skill-card[data-skill="bootstrap"] .skill-icon {
   color: #9a71f4;
 }

 .skill-card[data-skill="aws"] .skill-icon {
   color: #ed7c26;
 }

 .skill-card[data-skill="docker"] .skill-icon {
   color: #2496ED;
 }

 .skill-card[data-skill="postgresql"] .skill-icon {
   color: #4169E1;
 }

 .skill-card[data-skill="mongodb"] .skill-icon {
   color: #47A248;
 }

 .skill-card[data-skill="redis"] .skill-icon {
   color: #DC382D;
 }

 .skill-card[data-skill="git"] .skill-icon {
   color: #F05032;
 }

 .skill-card[data-skill="kubernetes"] .skill-icon {
   color: #326CE5;
 }

 @media (max-width: 1400px) {
   .skills-grid {
     grid-template-columns: repeat(4, 1fr);
   }
 }

 @media (max-width: 1024px) {
   .skills-grid {
     display: flex;
     overflow-x: auto;
     scroll-behavior: smooth;
     padding: 10px 0;

     margin-bottom: 40px;

     scrollbar-width: none;

     -ms-overflow-style: none;

   }

   .skills-grid::-webkit-scrollbar {
     display: none;

   }

   .skills-grid>.skill-card {
     flex: 0 0 180px;
   }
 }

 @media (max-width: 768px) {
   .skills-grid>.skill-card {
     flex: 0 0 150px;

   }
 }

 .arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(10, 10, 10, 0.85);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: #fff;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10;
   transition: all 0.3s;
 }

 .arrow:hover {
   background: var(--color1);
   color: #fff;
 }

 .arrow.left {
   left: 0;
 }

 .arrow.right {
   right: 0;
 }

 .arrow.hidden {
   opacity: 0;
   pointer-events: none;
 }

 @media (max-width: 1200px) {
   .skills-track>.skill-card {
     flex: 0 0 calc((100% / 3) - ((25px * 2) / 3));
   }
 }

 @media (max-width: 992px) {
   .skills-track>.skill-card {
     flex: 0 0 calc((100% / 2) - ((25px * 1) / 2));
   }

   .skills-wrapper .arrow {
     display: none;
   }
 }

 @media (max-width: 600px) {
   .skills-track>.skill-card {
     flex: 0 0 90%;

   }
 }

 .projects-wrapper {
   position: relative;
   overflow: hidden;
 }

 .projects-track {
   display: flex;
   gap: 35px;

   scroll-behavior: smooth;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding: 10px;

 }

 .projects-track::-webkit-scrollbar {
   display: none;
 }

 .project-card {
   background: linear-gradient(145deg, #0a0a0a 0%, #0f0f0f 100%);
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.05);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   position: relative;
   display: flex;
   flex-direction: column;
 }

 .projects-track>.project-card {
   flex: 0 0 calc((100% / 3) - ((35px * 2) / 3));
 }

 @media (max-width: 1200px) {
   .projects-track>.project-card {
     flex: 0 0 calc((100% / 2) - ((35px * 1) / 2));
   }
 }

 @media (max-width: 768px) {
   .projects-track>.project-card {
     flex: 0 0 100%;

   }
 }

 @media (max-width: 992px) {
   .projects-wrapper .arrow {
     display: none;
   }
 }

 .project-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, hsla(29, 76%, 66%, 0.05) 0%, hsla(29, 37%, 46%, 0.05) 100%);
   opacity: 0;
   transition: opacity 0.4s;
   z-index: 1;
   pointer-events: none;
 }

 .project-card:hover {
   transform: translateY(-10px);
   border-color: hsla(29, 76%, 66%, 0.3);
 }

 .project-card:hover::before {
   opacity: 1;
 }

 .project-image {
   width: 100%;
   height: 280px;
   background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 4rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   position: relative;
   overflow: hidden;
 }

 .project-image i {
   background: linear-gradient(135deg, var(--color1) 0%, var(--color2) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   position: relative;
   z-index: 2;
 }

 .project-image::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 300px;
   height: 300px;
   background: radial-gradient(circle, hsla(29, 76%, 66%, 0.1) 0%, transparent 70%);
   transform: translate(-50%, -50%);
 }

 .project-content {
   padding: 30px;
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   flex-grow: 1;

 }

 .project-header {
   display: flex;
   justify-content: space-between;
   align-items: start;
   margin-bottom: 15px;
   gap: 15px;
 }

 .project-type {
   background: hsla(29, 76%, 66%, 0.1);
   border: 1px solid hsla(29, 76%, 66%, 0.2);
   color: var(--color1);
   padding: 6px 14px;
   border-radius: 6px;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   flex-shrink: 0;
 }

 .project-card h3 {
   font-size: 1.5rem;
   color: #fff;
   margin-bottom: 12px;
   font-weight: 700;
 }

 .project-card>.project-content>p {
   color: #888;
   margin-bottom: 20px;
   font-size: 0.95rem;
   flex-grow: 1;

 }

 .project-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 20px;
 }

 .tag {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: #aaa;
   padding: 6px 12px;
   border-radius: 6px;
   font-size: 0.8rem;
   font-weight: 500;
 }

 .project-metrics {
   display: flex;
   align-items: center;
   justify-content: center;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
   padding-top: 20px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   margin-top: auto;

 }

 .metric {
   text-align: center;
 }

 .metric span:first-child {
   color: #fff;
   font-size: 1rem;
   font-weight: 700;
   display: block;
   margin-bottom: 0;
 }

 .metric span:last-child {
   color: #666;
   font-size: 0.755rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .testimonials-wrapper {
   position: relative;
   overflow: hidden;
 }

 .testimonials-track {
   display: flex;
   gap: 30px;
   scroll-behavior: smooth;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding: 10px 0;
 }

 .testimonials-track::-webkit-scrollbar {
   display: none;
 }

 .testimonial-card {
   flex: 0 0 450px;
   background: linear-gradient(145deg, #0a0a0a 0%, #0f0f0f 100%);
   padding: 40px;
   min-height: 290px;
   max-height: 290px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.05);
   transition: all 0.4s;
 }

 .testimonial-card:hover {
   transform: translateY(-5px);
   border-color: hsla(29, 76%, 66%, 0.2);
 }

 .rating {
   color: #ffa500;
   font-size: 1.2rem;
   margin-bottom: 20px;
 }

 .testimonial-text {
   color: #aaa;
   line-height: 1.8;
   margin-bottom: 30px;
   font-size: 1rem;
 }

 .testimonial-author {
   display: flex;
   align-items: center;
   gap: 15px;
 }

 .author-avatar {
   width: 55px;
   height: 55px;
   background: linear-gradient(135deg, var(--color1) 0%, var(--color2) 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 700;
   font-size: 1.2rem;
 }

 .author-info h4 {
   color: #fff;
   font-size: 1.05rem;
   margin-bottom: 4px;
   font-weight: 600;
 }

 .author-info p {
   color: #666;
   font-size: 0.9rem;
 }

 .arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(10, 10, 10, 0.85);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: #fff;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10;
   transition: all 0.3s;
 }

 .arrow:hover {
   background: var(--color1);
   color: #fff;
 }

 .arrow.left {
   left: 0;
 }

 .arrow.right {
   right: 0;
 }

 .arrow.hidden {
   opacity: 0;
   pointer-events: none;
 }

 footer {
   padding: 80px 0 40px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
 }

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

 .footer-content>div {
   flex: 1;
   min-width: 300px;
 }

 .footer-content>div:first-child {
   text-align: left;
 }

 .social-links {
   display: flex;
   gap: 15px;
   justify-content: flex-end;
 }

 .social-links a {
   width: 50px;
   height: 50px;
   background: linear-gradient(145deg, #0a0a0a 0%, #0f0f0f 100%);
   border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #666;
   text-decoration: none;
   transition: all 0.3s;
   font-size: 1.1rem;
 }

 .social-links a:hover {
   border-color: hsla(29, 76%, 66%, 0.5);
   color: var(--color1);
   transform: translateY(-3px);
 }

 footer>div>p {
   color: #333;
   margin-top: 40px;
   text-align: center;
 }

 @media (max-width: 1400px) {
   .skills-grid {
     grid-template-columns: repeat(4, 1fr);
   }
 }

 @media (max-width: 1200px) {
   .projects-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 992px) {
   .skills-grid {
     grid-template-columns: repeat(3, 1fr);
   }

   .arrow {
     display: none;

   }
 }

 @media (max-width: 1024px) {
   .hamburger {
     display: block;
   }

   .nav-links {
     display: none !important;
   }

   nav .container .cta-button {
     display: none;
   }
 }

 @media (max-width: 768px) {
   .container {
     padding: 0 20px;
   }

   nav .container {
     padding: 20px 30px;
   }

   .hero {
     padding-top: 160px;
   }

   h1 {
     font-size: 3rem;
   }

   .hero p {
     font-size: 1.15rem;
     max-width: 90%;
   }

   .hero-stats {
     gap: 30px;
     justify-content: space-around;
   }

   .hero-stat {
     flex: 0 0 40%;
   }

   .hero-stat h3 {
     font-size: 2.5rem;
   }

   section {
     padding: 80px 0;
   }

   .section-title h2 {
     font-size: 2.5rem;
   }

   .section-title p {
     font-size: 1rem;
   }

   .skills-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .projects-grid {
     grid-template-columns: 1fr;
   }

   .footer-content {
     flex-direction: column;
     gap: 40px;
     text-align: center;
   }

   .footer-content>div:first-child {
     text-align: center;
   }

   .social-links {
     justify-content: center;
   }
 }

 @media (max-width: 480px) {
   h1 {
     font-size: 2.5rem;
   }

   .hero p {
     font-size: 1rem;
   }

   .section-title h2 {
     font-size: 2rem;
   }

   .skills-grid {
     grid-template-columns: 1fr;
   }
 }