/* fonts */
@font-face {
       font-family: Quantum;
       src: url('../assets/fonts/Quantum.otf');
}
@font-face {
       font-family: Montserrat-Regular;
       src: url('../assets/fonts/Montserrat-Regular.ttf');
}

@font-face {
       font-family:TTNorms-Regular ;
       src: url('../assets/fonts/TTNorms-Regular.otf');
}
@font-face {
       font-family:Qualy-Bold;
       src: url('../assets/fonts/Qualy-Bold.ttf');
}
@font-face {
       font-family:Serbie;
       src: url('../assets/fonts/Serbie.otf');
}


/* style for all */
*{
       padding: 0;
       margin: 0;
}
/* style for body */
body{
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       background-color: #00000a;
}
/* style for html */
html{
       scroll-behavior: smooth;
}

/* Responsive */


/* phone */
@media (min-width:320px){
/* style and responsive for Home start*/
       /* header style */
       header{
              display: flex;
              justify-content: space-between;
              width: 100vw;
              height: 60px;
       }
       /* menubar */
       .menuIcon{
              cursor: inherit;
              display: flex;
              justify-content: center;
              align-items: center;
       }
       .menubar{
              width: 30px;
              height: 30px;
              padding: 5px;
              margin: 10px;
              color: white;
              cursor: pointer;
              transition: 
                     transform 0.6s linear;
         
       }
       .menubar:hover{
                     transform: scale(1.3);
       }
       nav{
              visibility: hidden;
       }
       nav.close{
              display: flex;
              flex-direction: row;
              justify-content: space-evenly;
              align-items: center;
              gap: 9px;
              margin: 5px;
              padding: 10px;
              position: relative;
              right: 5%;
              border-radius: 10px;
              min-width: 70%;
              animation: menuPopout 1s ease-in-out;    
       }
       nav.open{
              visibility: visible;
              display: flex;
              flex-direction: row;
              justify-content: space-evenly;
              align-items: center;
              gap: 9px;
              margin: 5px;
              padding: 10px;
              position: relative;
              right: 5%;
              border-radius: 10px;
              min-width: 70%;
              animation: menuPopup 1s ease-in-out;

       }
       @keyframes menuPopup {
              from{
                     opacity: 0;
                     transform: translateX(-30%);
              }
              to{
                     opacity: 1;
                     transform: translateX(0);
              }
       }
       @keyframes menuPopout {
              from{
                     visibility: visible;
                     opacity: 1;
                     transform: translateX(0);
              }
              to{
                     visibility: hidden;
                     opacity: 0;
                     transform: translateX(-30%);
              }
       }
       a{
              color: snow;
              text-decoration: none;
              font-size: 14px;
              font-family: Quantum;
              transition: color 0.5s ease-in-out;           
       }
       nav a:hover{
                     color:rgb(238, 45, 238);
              }
       /* welcome */
       .welcome{
              width: 90vw;
              height: 100vh;
              display: flex;
              justify-content: center;
              align-items: center;

       }
       .welcome-template{
              background-color: rgb(45, 45, 45);
              padding: 1rem;
              border-radius: 10px;
       }
       .welcome-template::after{
              content: ' ';
              background-color:  rgb(45, 45, 45);
              display: inline-block;
              border-radius: 1rem;
              width: 100px;
              height: 10px;
              position: relative;
              top: 36px;
              left: 50%;
              transform: translateX(-50%); 

       }
       .typing{
              color: green;
              width: 100%;
              font-size: 20px;
              font-family: Serbie;
              white-space: nowrap;
              overflow: hidden;
              border-right: 3px solid snow; 
              animation: 
                     typing 2s steps(22),
                     blink 0.7s step-end infinite; 
       }
       @keyframes typing {
       from { width: 0 }
       to { width: 100% }
       }

       @keyframes blink {
       50% { border-color: transparent }
       }
       
       /* main */
       main{
              display: flex;
              flex-direction:column;
              justify-content: center;
              align-items: center;
              gap: 10px;
              height: calc(70vh - 70px);
              font-family: Montserrat-Regular;
       }
       .main-image{
              width:220px;
              height:220px;

              border-radius:57% 43% 34% 66% / 55% 48% 52% 45%;

              overflow:hidden;

              box-shadow:
              0 0 30px rgba(255,215,0,.6),
              0 0 70px rgba(255,215,0,.3);

              animation: morph 8s ease-in-out infinite;
       }

       @keyframes morph{
              0%{
                     border-radius:57% 43% 34% 66% / 55% 48% 52% 45%;
              }

              50%{
                     border-radius:40% 60% 70% 30% / 40% 40% 60% 50%;
              }

              100%{
                     border-radius:57% 43% 34% 66% / 55% 48% 52% 45%;
              }
              }

      .main-image img{
              width:100%;
              height:100%;
              object-fit:cover;
              border-radius:inherit;
              display:block;
       }
       .main-info{
              width: 94vw;
              padding: 10px 0 10px 0;
              margin: 10px 0 10px 15px;
       }
       .main-info span{
              color: #8467d8;
              font-size: 26px;
              text-align: center;
              display: block;
              text-align: center;
              position: relative;
              right: 100px;
       }
       .main-info p{
              text-align: center;
              font-size: 26px;
              color: gold;
       }

       .main-job-title{
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 94vw;
              padding: 10px 0 10px 0;
              margin: 10px 0 10px 15px;
       }
       .main-job-title span{
              color: #8467d8;
              font-size: 26px;
       }
       .main-job-title p{
              text-align: center;
              font-size: 26px;
              color: gold;
       }
/* style and responsive for Home end*/       
/* style and responsive for aboutme start*/
       .about-me{
              width: 100vw;
              height: fit-content;
              display: flex;
              justify-content: center;
              align-items: start;
       }
       .aboutme-card{
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              gap: 10px;
              background-color: orange;
              height: 430px;
              width: 250px;
              margin-top: 3rem;
              padding: 5px;
              border-radius: 1rem;
       }
       .about{
              width: calc((250px/2));
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: start;
              align-items: center;
              gap: 1.5rem;
              padding: 5px;
              background-color: black;
              margin-left: 2px;
       }
       .aboutme-image{
              width: 79px;
              height: 79px;
              
       }
       .aboutme-image img{
              width: 100%;
              height:100%;
              border-radius: 50%;
              border:2px solid rgb(3, 158, 255);
              animation: imageAboutmeAnimation 3s ease-in-out infinite;
              background-color:rgba(255, 251, 251, 0.185);
       }
       @keyframes imageAboutmeAnimation {
              0%   {
                     background-color:rgba(255, 251, 251, 0.185);
                     border:2px solid rgba(3, 158, 255, 0.900);

              }
              25%  {
                     background-color:rgba(255, 251, 251, 0.236);
                     border:2px solid rgb(3, 158, 255, 0.800);

              }
              50%  {
                     background-color:rgba(255, 251, 251, 0.237);
                     border:2px solid rgb(3, 158, 255, 0.700);

              }
              75%  {
                     background-color:rgba(255, 251, 251, 0.238);
                     border:2px solid rgb(3, 158, 255, 0.600);


              }
              100% {
                     background-color:rgba(255, 251, 251, 0.237);
                     border:2px solid rgb(3, 158, 255, 0.500);

              }
       }
       .aboutme-info{
              display: flex;
              gap: 1rem;
              flex-direction: column;
              justify-content: center;
              align-items: start;
              color: snow;
              font-size: 20px;
              padding: 10px;
              font-family: TTNorms-Regular;
       }
       .aboutme-info span{
              display: flex;
              gap: 1rem;
              flex-direction: column;
              justify-content: start;
              align-items: start;
              color: rgb(145, 144, 144);
              font-family: Qualy-Bold;
       }
       .aboutme-description{
              font-size: 18px;
              color: black;
              font-family: sans-serif;
              line-height: 25px;
       }
/* style and responsive for aboutme end*/   
/* style and responsive for contact me start*/
.contact-me{
       height: fit-content;
       width: 90vw;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 1rem;
       flex-direction: column;
}

.template-contact-linkdin{
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
}

.template-contact-linkdin img{
       width: 100px;
       height: 100px;
}

.template-contact-instagram{
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
}
.template-contact-instagram img{
       width: 100px;
       height: 100px;

}
.template-contact-github{
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
}
.template-contact-github img{
       width: 100px;
       height: 100px;
}
/* style and responsive for contact me end*/
/* style and responsive for project start*/
       .projects-section {
              width: 90vw;
              margin: 80px auto 50px;
              padding: 20px;
       }

       .projects-header {
              text-align: center;
              margin-bottom: 50px;
       }

       .projects-title {
              font-size: 2.5rem;
              color: gold;
              font-family: Montserrat-Regular;
              margin-bottom: 10px;
              text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
       }

       .projects-subtitle {
              font-size: 1.2rem;
              color: #8467d8;
              font-family: TTNorms-Regular;
       }

       .category-container {
              margin-bottom: 40px;
              background: rgba(45, 45, 45, 0.5);
              padding: 20px;
              border-radius: 15px;
              border: 2px solid rgba(132, 103, 216, 0.3);
       }

       .category-title {
              font-size: 1.5rem;
              color: cyan;
              font-family: Quantum;
              margin-bottom: 20px;
              border-bottom: 2px solid rgba(132, 103, 216, 0.5);
              padding-bottom: 10px;
       }

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

       .skill-tag {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              color: white;
              padding: 8px 16px;
              border-radius: 20px;
              font-size: 0.85rem;
              font-family: TTNorms-Regular;
              transition: all 0.3s ease;
              cursor: pointer;
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
       }

       .skill-tag:hover {
              transform: translateY(-3px) scale(1.05);
              box-shadow: 0 6px 12px rgba(132, 103, 216, 0.6);
              background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
       }

       .favorite-tools {
              margin-top: 60px;
              text-align: center;
       }

       .favorite-title {
              font-size: 2rem;
              color: orange;
              font-family: Quantum;
              margin-bottom: 30px;
              text-shadow: 0 0 15px rgba(255, 165, 0, 0.5);
       }

       .tools-grid {
              display: grid;
              grid-template-columns: 1fr;
              gap: 20px;
              margin-top: 30px;
       }

       .tool-card {
              background: rgba(45, 45, 45, 0.8);
              padding: 30px;
              border-radius: 15px;
              border: 2px solid rgba(255, 165, 0, 0.3);
              transition: all 0.3s ease;
              cursor: pointer;
       }

       .tool-card:hover {
              transform: translateY(-10px);
              border-color: orange;
              box-shadow: 0 10px 30px rgba(255, 165, 0, 0.4);
       }

       .tool-icon {
              font-size: 3rem;
              margin-bottom: 15px;
       }

       .tool-card h3 {
              font-size: 1.2rem;
              color: snow;
              font-family: Montserrat-Regular;
       }
       /* Featured Projects Section */
       .featured-projects {
              width: 90vw;
              margin: 80px auto;
              padding: 40px 0;
       }

       .featured-header {
              text-align: center;
              margin-bottom: 50px;
       }

       .featured-title {
              font-size: 2.2rem;
              color: #00ffff;
              font-family: Quantum;
              margin-bottom: 15px;
              text-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
              letter-spacing: 2px;
       }

       .featured-subtitle {
              font-size: 1rem;
              color: #b19cd9;
              font-family: TTNorms-Regular;
              opacity: 0.9;
       }

       .featured-grid {
              display: grid;
              grid-template-columns: 1fr;
              gap: 40px;
       }

       .featured-card {
              background: linear-gradient(145deg, rgba(40, 40, 40, 0.7), rgba(25, 25, 25, 0.7));
              border-radius: 20px;
              overflow: hidden;
              border: 2px solid rgba(0, 255, 255, 0.2);
              transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
              position: relative;
       }

       .featured-card::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(132, 103, 216, 0.1));
              opacity: 0;
              transition: opacity 0.5s ease;
              pointer-events: none;
       }

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

       .featured-card:hover {
              transform: translateY(-15px) scale(1.02);
              border-color: rgba(0, 255, 255, 0.6);
              box-shadow: 0 20px 60px rgba(0, 255, 255, 0.3),
                          0 0 40px rgba(132, 103, 216, 0.2);
       }

       .featured-image-wrapper {
              position: relative;
              width: 100%;
              height: 220px;
              overflow: hidden;
              background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
       }

       .featured-img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
       }

       .featured-card:hover .featured-img {
              transform: scale(1.15) rotate(2deg);
       }

       .featured-overlay {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(132, 103, 216, 0.7));
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              transition: opacity 0.4s ease;
       }

       .featured-card:hover .featured-overlay {
              opacity: 1;
       }

       .overlay-btn {
              background: linear-gradient(135deg, #00ffff, #8467d8);
              color: #000;
              padding: 14px 28px;
              border-radius: 30px;
              text-decoration: none;
              font-family: TTNorms-Regular;
              font-size: 0.95rem;
              font-weight: 600;
              display: flex;
              align-items: center;
              gap: 10px;
              transition: all 0.3s ease;
              box-shadow: 0 5px 20px rgba(0, 255, 255, 0.4);
       }

       .overlay-btn:hover {
              transform: scale(1.1) translateY(-3px);
              box-shadow: 0 8px 30px rgba(0, 255, 255, 0.6);
       }

       .featured-info {
              padding: 25px;
       }

       .featured-project-title {
              font-size: 1.5rem;
              color: gold;
              font-family: Montserrat-Regular;
              margin-bottom: 15px;
              text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
       }

       .featured-description {
              font-size: 0.95rem;
              color: #d0d0d0;
              font-family: TTNorms-Regular;
              line-height: 1.7;
              margin-bottom: 25px;
              opacity: 0.9;
       }

       .featured-github-btn {
              display: inline-flex;
              align-items: center;
              gap: 10px;
              background: rgba(0, 255, 255, 0.15);
              color: #00ffff;
              padding: 12px 24px;
              border-radius: 10px;
              text-decoration: none;
              font-family: TTNorms-Regular;
              font-size: 0.9rem;
              border: 1px solid rgba(0, 255, 255, 0.3);
              transition: all 0.4s ease;
              position: relative;
              overflow: hidden;
       }

       .featured-github-btn::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
              transition: left 0.5s ease;
       }

       .featured-github-btn:hover::before {
              left: 100%;
       }

       .featured-github-btn:hover {
              background: rgba(0, 255, 255, 0.25);
              border-color: rgba(0, 255, 255, 0.6);
              transform: translateX(8px);
              box-shadow: 0 5px 20px rgba(0, 255, 255, 0.3);
       }

       .featured-github-btn svg {
              transition: transform 0.4s ease;
       }

       .featured-github-btn:hover svg {
              transform: rotate(360deg) scale(1.2);
       }
/* style and responsive for project end*/

}

/* ipad & tablets */
@media (min-width:480px){
/* style and responsive for Home start*/

       /* menubar */
       .menubar{
                     width: 35px;
                     height: 35px; 
              }
       .menuIcon{
              position: absolute;
              left: 0;
       }
       nav.open, nav.close{
              right: 0;
       }
       header{
              justify-content: center;
       }
       a{
              font-size: 18px;        
       }
       /* welcome */
       .welcome{
              width: 90vw;
              height: 100vh;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 2rem;
              margin-top: 10px;
       }
       .welcome-template{
              display: flex;
              justify-content: center;
              align-items: center;
              height: 600px;
              background: none;
              border: none;
              box-shadow: none;
              padding: 1rem;
              border-radius: 10px;
         
           
       }
       .welcome-template::after{
            display: none;
       }
       .typing{
              color: cyan;
              width: 100%;
              font-size: 24px;
              font-family: Serbie;
              white-space: nowrap;
              overflow: hidden;
              border-right: 3px solid snow;
              animation: 
                     typing 2s steps(22),
                     blink 0.7s step-end infinite; 
       }
       @keyframes typing {
       from { width: 0 }
       to { width: 100% }
       }

       @keyframes blink {
       50% { border-color: transparent }
       }
       /* main */
       main{
              gap: 18px;
              height: calc(80vh - 60px);
       }
       .main-image{
              width:240px;
              height:240px;
       }

       .main-info{
              width: 95vw;
       }
       .main-info span{
              font-size: 30px;
              right: 0px;
              width: fit-content;
              left: 25%;
              transform: translateX(-50%);
       }
       .main-info p{
              text-align: center;
              font-size: 30px;
              color: gold;
              position: relative;
              left: 0;
       }

       .main-job-title{
              width: 50vw;
              left: 50%;
              transform: translateX(-50%);

       }
       .main-job-title span{
              color: #8467d8;
              font-size: 30px;
       }
       .main-job-title p{
              text-align: center;
              font-size: 30px;
              color: gold;
       }
       /* style and responsive for Home end*/

       /* style and responsive for aboutme start*/
       .about-me{
              width: 100vw;
              height: fit-content;
              display: flex;
              justify-content: center;
              align-items: start;
       }
       .aboutme-card{
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              gap: 10px;
              background-color: orange;
              height: 430px;
              width: 90%;
              margin-top: 3rem;
              padding: 5px;
              border-radius: 1rem;
       }
       .about{
              width: calc((250px/2));
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: start;
              align-items: center;
              gap: 1.5rem;
              padding: 5px;
              background-color: #0d1117;
              margin-left: 2px;
       }
       .aboutme-description{
              font-size: 30px;
              color: black;
              font-family: sans-serif;
              line-height: 30px;
       }
/* style and responsive for aboutme end*/    
/* style and responsive for contact me start*/
.contact-me{
       height: fit-content;
       width: 90vw;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 1rem;
       flex-direction: row;
       margin-top: 5rem;
}
/* style and responsive for contact me end*/
/* style and responsive for projects start*/
       .projects-section {
              width: 85vw;
              margin: 100px auto 60px;
       }

       .projects-title {
              font-size: 3rem;
       }

       .projects-subtitle {
              font-size: 1.2rem;
       }

       .category-title {
              font-size: 1.8rem;
       }

       .skill-tag {
              font-size: 0.95rem;
              padding: 10px 20px;
       }

       .tools-grid {
              grid-template-columns: repeat(2, 1fr);
              gap: 25px;
       }

       .favorite-title {
              font-size: 2.3rem;
       }

       .tool-card h3 {
              font-size: 1.4rem;
       }
       /* Featured Projects Section */
  .featured-projects {
              width: 85vw;
       }

       .featured-title {
              font-size: 2.6rem;
       }

       .featured-subtitle {
              font-size: 1.1rem;
       }

       .featured-image-wrapper {
              height: 240px;
       }

       .featured-project-title {
              font-size: 1.7rem;
       }

       .featured-description {
              font-size: 1rem;
       }

       .featured-info {
              padding: 30px;
       }

/* style and responsive for projects end*/

}
/* small screen and laptop */
@media (min-width:769px){
       /* header style */
       header{
              display: flex;
              justify-content: center;
              align-items: center;
              width: fit-content;
              height: 60px;
       }
       /* menubar */
       .menuIcon{
              display: none;
       }
       nav{
              visibility: visible;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              gap: 2rem;
              margin: 5px 0 5px 0;
              padding: 5px 0 5px 0;
              position: relative;
              right: 0;
              border-radius: 10px;
              min-width: 100%;
              animation: menuPopup 1s ease-in-out;

       }
       @keyframes menuPopup {
              from{
                     opacity: 0;
                     transform: translateX(-30%);
              }
              to{
                     opacity: 1;
                     transform: translateX(0);
              }
       }
      nav.open{
              justify-content: center;
              gap:2rem;
              right: 0;
       }
       a{
              font-size: 24px;
       }
        /* welcome */
       .welcome-template{
              height: 600px;
              width: 500px;
       }
       .welcome-template::after{
            display: none;
       }
       .typing{
              color: #00fff3;
              width: 100%;
              font-size: 36px;
              
       }

       /* main */
       main{
              display: flex;
              flex-direction:row;
              justify-content: center;
              align-items: center;
              gap: 20px;
              height: 100vh;
              margin-top: 10px;
              font-family: Montserrat-Regular;
       }
       .main-image{
              width:50%;
              background-color: rgba(0, 0, 0, 0.262);
              height:60%;
              padding-top: 2rem;
              border-radius:50px;
              overflow:hidden;
              box-shadow:none;
              animation:none;
              position: relative;
              bottom: 0;
              mask-image: linear-gradient(to bottom, black 30%, transparent);
            
       
       }

      .main-image img{
              width:100%;
              height:100%;
              object-fit:cover;
              border-radius:inherit;
              display:block;
              filter: drop-shadow(0px 0px 15px #492aa7);
       
    
       }
       .main-info{
              width: 25%;
              padding: 10px 0 10px 0;
              margin: 10px 0 10px 15px;
              display: flex;
              gap:1px;
              flex-direction: column;
              justify-content: center;
              align-items: center;
       }
       .main-info span{
              color: #8467d8;
              font-size: 28px;
              text-align: center;
              display: block;
              position:relative;
              left:0;
              transform: translateX(-15%);
       }
       .main-info p{
              text-align: start;
              font-size: 28px;
              color: gold;
              position: relative;
              left: 30px;
              transform: translateX(5%);
              
           
       }

       .main-job-title{
              position: relative;
              width: 25%;
              right: 10%;
              left: -25px;
       }
       .main-job-title span{
              color: #8467d8;
              font-size: 28px;
       }
       .main-job-title p{
              text-align: center;
              font-size: 28px;
              color: gold;
       }
/* style for projects start*/
       .projects-section {
              width: 80vw;
              margin: 120px auto 80px;
       }

       .projects-title {
              font-size: 3.5rem;
       }

       .projects-subtitle {
              font-size: 1.4rem;
       }

       .category-container {
              padding: 30px;
       }

       .category-title {
              font-size: 2rem;
       }

       .skill-tag {
              font-size: 1rem;
              padding: 12px 24px;
       }

       .tools-grid {
              grid-template-columns: repeat(3, 1fr);
              gap: 30px;
       }

       .favorite-title {
              font-size: 2.5rem;
       }

       .tool-icon {
              font-size: 4rem;
       }

       .tool-card h3 {
              font-size: 1.5rem;
       }
       /* projects feature */
.featured-projects {
              width: 80vw;
       }

       .featured-title {
              font-size: 3rem;
       }

       .featured-subtitle {
              font-size: 1.2rem;
       }

       .featured-grid {
              grid-template-columns: repeat(2, 1fr);
              gap: 45px;
       }

       .featured-image-wrapper {
              height: 260px;
       }

       .featured-project-title {
              font-size: 1.9rem;
       }

       .featured-description {
              font-size: 1.05rem;
       }

       .featured-github-btn {
              font-size: 1rem;
              padding: 14px 28px;
       }
/* style for projects end */
}
/* Desktop and large screen */
@media (min-width:1025px){
/* style and responsive for Home start*/

       /* header style */
       header{
              height: 70px;
       }
       /* menubar */
       nav{
            
              width: 100%;
              min-width: none;

       }
      
       a{
              font-size: 30px;
       }
       /* main */
       .main-image{
              width:55%;
              height:80%;
              padding-top: 1rem;
              border-radius:55px;
              mask-image: linear-gradient(to bottom, black 20%, transparent);
            
       
       }

      .main-image img{
              width:90%;
              height:90%;
              filter: drop-shadow(0px 0px 13px #492aa7);
       
    
       }
       .main-info span{              
              width: 90%;
              text-align: center;
              transform: translateX(20%);
       }
       .main-info p{
              text-align: center;
              font-size: 30px;
       }

       .main-job-title span{
              font-size: 30px;
       }
       .main-job-title p{
              font-size: 30px;
       }
       
       /* style and responsive for Home end*/

       /* style and responsive for aboutme start*/
       .about-me{
              width: 100vw;
              height: fit-content;
              display: flex;
              justify-content: center;
              align-items: start;
       }
       .aboutme-card{
              gap: 120px;
       }
  
       .aboutme-description{
              font-size: 50px;
              color: black;
              font-family: sans-serif;
              line-height: 50px;
       }
/* style for about me end */
/* style for projects start*/
       .projects-section {
              width: 75vw;
              margin: 140px auto 100px;
       }

       .projects-title {
              font-size: 4rem;
       }

       .projects-subtitle {
              font-size: 1.6rem;
       }

       .category-title {
              font-size: 2.2rem;
       }

       .skill-tag {
              font-size: 1.1rem;
              padding: 14px 28px;
       }

       .favorite-title {
              font-size: 3rem;
       }

       .tool-icon {
              font-size: 5rem;
       }

       .tool-card h3 {
              font-size: 1.8rem;
       }
       /* projects */
.featured-projects {
              width: 75vw;
       }

       .featured-title {
              font-size: 3.5rem;
       }

       .featured-grid {
              grid-template-columns: repeat(3, 1fr);
              gap: 50px;
       }

       .featured-image-wrapper {
              height: 280px;
       }

       .featured-info {
              padding: 35px;
       }

       .featured-project-title {
              font-size: 2.1rem;
       }

       .featured-description {
              font-size: 1.1rem;
       }       
/* style and responsive for projects end*/  
}
/* large screen */
@media (min-width:1201px){
       /* style and responsive for Home end*/
       /* header style */
       header{
              height: 80px;
       }
       /* menubar */
       a{
              font-size: 35px;
       }
       /* main */
       main{
              display: block;
              margin-top: 81px;

       }
       .main-image{
              width:100%;
              height:500px;
              padding-top: 1rem;
              display: flex;
              justify-content: center;
              align-items: center;
              mask-image: linear-gradient(to bottom, black 100%, transparent);
       
       }
     
      .main-image img{
              max-width:300px;
              max-height:300px;
              border: 3px solid orange;
              filter: drop-shadow(0px 0px 3px cyan);
              animation: movementImage 8s ease-in-out infinite;
              box-shadow:
              0 0 20px rgba(162,89,255,.8),
              0 0 50px rgba(162,89,255,.4);
                     }
       @keyframes movementImage {
              0%{
              border-radius:60% 40% 55% 45% / 45% 60% 40% 55%;
              }

              50%{
                     border-radius:35% 65% 40% 60% / 60% 35% 65% 40%;
              }

              100%{
                     border-radius:60% 40% 55% 45% / 45% 60% 40% 55%;
              }
       }
       .main-info{
              height: fit-content;
              width: 80%;
              display: flex;
              align-items: center;
       }
       .main-info span{              
              width: 700px;
              text-align: start;
              font-size: 50px;
       }
       .main-info p{
              text-align: start;
              font-size: 50px;
              width: 700px;
       }
       .main-job-title{
              display: flex;
              align-items: end;
              width: 100%;
              right: -30%;;
       }
       .main-job-title span{
              font-size: 50px;
              text-align: start;
              width: 700px;
       }
       .main-job-title p{
              font-size: 50px;
              width: 700px;
       }
       /* style and responsive for Home end*/

       /* style and responsive for aboutme start*/
       .about-me{
              width: 100vw;
              height: fit-content;
              display: flex;
              justify-content: center;
              align-items: start;
       }
       .aboutme-card{
              gap: 120px;
              height:600px;
       }
  
       .aboutme-description{
              font-size: 60px;
              color: black;
              font-family: sans-serif;
              line-height: 60px;
       }
/* style and responsive for aboutme end*/
/* style for projects start */
       .projects-section {
              width: 70vw;
              margin: 160px auto 120px;
       }

       .projects-title {
              font-size: 4.5rem;
       }

       .projects-subtitle {
              font-size: 1.8rem;
       }

       .category-container {
              padding: 40px;
              margin-bottom: 50px;
       }

       .category-title {
              font-size: 2.5rem;
       }

       .skill-tag {
              font-size: 1.2rem;
              padding: 16px 32px;
       }

       .favorite-title {
              font-size: 3.5rem;
       }

       .tool-card {
              padding: 40px;
       }

       .tool-icon {
              font-size: 6rem;
       }

       .tool-card h3 {
              font-size: 2rem;
       }
       /* projects */
 .featured-projects {
              width: 70vw;
              margin: 100px auto;
       }

       .featured-title {
              font-size: 4rem;
       }

       .featured-subtitle {
              font-size: 1.4rem;
       }

       .featured-image-wrapper {
              height: 300px;
       }

       .featured-project-title {
              font-size: 2.3rem;
       }

       .featured-description {
              font-size: 1.15rem;
              line-height: 1.8;
       }

       .overlay-btn {
              padding: 16px 32px;
              font-size: 1rem;
       }

       .featured-github-btn {
              padding: 15px 30px;
              font-size: 1.05rem;
       }       
/* style for projects end */
}