.menu-position {
     position: relative;
     position: sticky;
     top: 0px;
     z-index: 9999;
 }

 .menu {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     font-weight: 600;
 }

 .menu-bar {
     display: flex;
     gap: 30px;

 }

 .nav-link {
     color: white;
 }

 @media(min-width:480px) {
     .menu-bar {

         font-size: 15px;
         display: flex;
         gap: 10px;
         align-items: center;
         justify-content: center;
     }
 }

 @media(min-width:1024px) {
     .menu-bar {

         font-size: 20px;
         display: flex;
         gap: 40px;
         align-items: center;
         justify-content: center;
     }
 }

 .nav-link:hover {
     background-color: rgb(111, 161, 236);
     color: rgb(14, 14, 14);
     border-radius: 15px;
 }

 .nav-link {
     position: relative;
 }

 .nav-link::after {
     content: "";
     height: 3px;
     background-color: red;
     width: 40%;
     position: absolute;
     left: 10px;
     bottom: -6px;
     transition: .5s ease-in-out;

 }

 .nav-link:hover::after {
     width: 80%;
 }

 .logo {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .logo h1 {
     background: linear-gradient(to right, red, blue, green, white);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 @media(min-width:480px) {
     .logo h1 {
         font-size: 25px;
     }
 }

 @media(min-width:1024px) {
     .logo h1 {
         font-size: 35px;
     }
 }


 .icons {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-evenly;
     font-size: 30px;
 }

 .icons a:hover {
     color: brown;
 }

 @media (max-width:480px) {
     .icons {
         display: none;
     }
 }

 @media (min-width:480px) {
     .icons {
         display: none;
     }
 }

 @media (min-width:768px) {
     .icons {
         display: block;
     }

     .icons {
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: space-evenly;
         font-size: 20px;
     }
 }

 @media (min-width:1024px) {
     .icons {
         display: block;
     }

     .icons {
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: space-evenly;
         font-size: 30px;
     }
 }



 /* Profile Introduction */
 .portfolio-box {

     display: flex;
     align-items: center;
     justify-content: center;
 }

 .portfolio-image img {
     height: 400px;
     width: 400px;
     border-radius: 50%;
 }

 .portfolio-intro {
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .paragraph {
     text-align: center;
 }

 .typing {
     font-size: 25px;
     font-weight: bold;
     white-space: nowrap;
     overflow: hidden;
     border-right: 3px solid black;
     width: 0px;
     animation: typing 8s steps(17) infinite;
 }

 .typing span::before {
     color: rgb(12, 71, 179);
     content: "I am PHP Developer";
     animation: changeText 8s infinite;
 }


 @keyframes typing {
     0% {
         width: 0;
     }

     20% {
         width: 23ch;
     }

     40% {
         width: 23ch;
     }

     60% {
         width: 0;
     }

     80% {
         width: 23ch;
     }

     100% {
         width: 23ch;
     }
 }

 @keyframes changeText {

     0%,
     50% {
         content: "Full Stack PHP Developer";
     }

     51%,
     100% {
         content: "I am Frontend Developer";
     }
 }

 /* About Me */


 .about {
     font-size: 30px;
     color: white;
     display: flex;
     justify-content: center;
 }


 .intro {
     display: flex;
     justify-content: center;
     padding-top: 50px;
     font-size: 25.2px;
     text-align: justify;
     line-height: 1.3;
 }

 .intro2 {
     display: flex;
     justify-content: center;
     padding-top: 20px;
     font-size: 25.2px;
     text-align: justify;
     line-height: 1.2;
 }

 .b {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     gap: 30px;
     color: red;
 }

 @media(max-width:480px) {
     .b {
         font-size: 10px;
         display: flex;
         gap: 10px;
     }
 }

 @media(max-width:1024px) {
     .b {
         font-size: 15px;
         display: flex;
         gap: 10px;
     }
 }

 /* My Skills */
 .skills-box {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .skills {
     color: white;
     text-align: center;
 }

 .skills-image img {
     height: 200px;
     width: 400px;
     border: 2px solid white;
     border-radius: 20px;
     transition: all ease-in-out .5s;
 }

 .skills-image img:hover {
     transform: translateY(-20px);
     box-shadow: 0px 0px 5px 10px rgb(87, 87, 87);
 }

 .skills-image {
     opacity: 0;
     transform: translateX(0px) rotate(0deg);
 }

 .skills-image.active {
     animation: dropRotate 3s ease forwards;
 }

 .skills-image.active:nth-child(1) {
     animation-delay: 0.2s;
 }

 .skills-image.active:nth-child(2) {
     animation-delay: 0.6s;
 }

 .skills-image.active:nth-child(3) {
     animation-delay: 1s;
 }

 @keyframes dropRotate {
     from {
         transform: translateY(-200px);
         transform: rotate(-20deg);
         opacity: 0;
     }

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

 /* Education */
 .timeline-box {
     height: 200px;
     background: #111;
     color: #fff;
     border: 2px solid white;
     border-radius: 15px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow: 0px 5px 10px goldenrod;
     opacity: 0;
     transform: translateY(-60px) rotateX(90deg);
     transition: transform 1s ease, opacity 1.5s ease;
 }

 .timeline-box h3 {
     color: #00bfff;
     margin-bottom: 10px;
 }

 .timeline-box:hover {
     transform: translateY(20px) !important;
     box-shadow: 0px 5px 10px rgb(161, 162, 162);
 }


 .timeline-box.show {
     opacity: 1;
     transform: translateY(0) rotateX(0deg);
 }

 @media(min-width:768px) {
     h3 {
         text-align: center;
     }

     .p {
         text-align: center;
         font-size: 15px;
     }

     .timeline-box {
         font-size: 10px;
         display: flex;
         align-items: center;
         justify-content: center;

     }

 }

 /* Services */
 .development-project {
     height: 230px;
     border: 2px solid white;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border-radius: 20px;
     box-shadow: 0px 5px 10px rgb(163, 163, 163);
 }

 @media(min-width:768px) {
     .development-project {
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .devlopment {
         text-align: center;
     }
 }

 .animation {
     opacity: 0;
     transform: translateY(-60px) rotateX(90deg);
     transition: transform 1s ease, opacity 1s ease;
 }

 .animation.show {
     opacity: 1;
     transform: translateY(0) rotateX(0deg);

 }

 .development-project:hover {
     transform: translateY(20px);
     box-shadow: 0px 5px 8px white;
 }

 /* Project */
 .project img {
     height: 230px;
     border: 2px solid black;
     border-radius: 20px;
     box-shadow: 0px 5px 8px rgb(138, 138, 138);
     transition: ease 1s;
 }

 .project img:hover {
     transform: translateY(-20px);
     box-shadow: 0px 5px 10px white;
 }
  /* Contact Me */
        .contact-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }