body {
      font-family: "Roboto Slab", serif;
      background: linear-gradient(black 25%, rgb(0, 0, 85) 75%);
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      color: white;
    }

    /* Navigation bar design */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 0 15px;
    }

    .header h1 {
      margin: 10px 0;
    }

    /* Navigation links */
    .nav {
      display: flex;
    }

    .nav a {
      text-decoration: none;
      font-size: larger;
      color: rgb(255, 255, 255);
      margin: 0 10px;
      transition: color 0.3s ease;
    }

    .nav a:hover {
      color: rgb(77, 77, 173);
      text-decoration: underline;
    }

    .nav a:active {
      color: white;
    }

    /* Hamburger menu styles */
    .button {
      display: none;
      /* Hidden by default, will show on mobile */
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
      width: 30px;
      height: 22px;
      gap: 5px;
    }

    .button .hamburger {
      height: 4px;
      width: 100%;
      background-color: white;
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    /* Animate hamburger when active */
    .button.active .hamburger:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .button.active .hamburger:nth-child(2) {
      opacity: 0;
    }

    .button.active .hamburger:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Details design */
    .box1 div {
      padding: 20px;
    }

    .Aboutme {
      font-size: 25px;
    }

    .box {
      margin-top: 40px;
      display: grid;
      grid-template-columns: 600px 400px;
      padding: 10px;
      justify-content: center;
      height: 500px;
      margin-left: -165px;
    }

    .animate-on-scroll {
      opacity: 1;
      transform: translateX(-100px);
      transition: opacity 0.6s ease, transform 0.6s ease;
      display: block;
    }

    .animate-on-scroll.animate {
      opacity: 1;
      transform: translateY(-10px);
    }




    /* TEXT ANIMATION FOR TOOLS AND SKILLS STARTS HERE */
    div>h1 {
      background: linear-gradient(to right, #120044, #ffffff, #310891, #000000);
      background-size: 200%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: text-animation 5s linear infinite;
      animation-delay: 3s;
    }

    @keyframes text-animation {
      to {
        background-position: 200%;
      }
    }

    .outer_border_skill {
      margin-top: 80px;
      margin-left: 20px;
    }


    /* TEXT ANIMATION FOR TOOLS AND SKILLS ENDS HERE */




    /* TYPEWRITER AND TEXT GRADIENT ANIMATION FOR NAME AND FRONT END */
    .container-text {
      display: inline-block;
    }

    /*  FIRST H1 ANIMATION STARTS HERE */
    .text-typewriter-one {
      font-size: 45px;
      letter-spacing: 5px;
      white-space: nowrap;
      overflow: hidden;
      width: 0;
      animation:
        typing 1s steps(8, end) forwards,
        cursor 0.4s step-end infinite alternate,
        text-animation 8s linear infinite;
      animation-timing-function: linear;
      background: linear-gradient(to right, #120044, #ffffff, #310891);
      background-size: 200%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    @keyframes typing {
      from {
        width: 0;
      }

      to {
        width: 8ch;
      }
    }

    @keyframes cursor {
      50% {
        border-color: transparent;
      }
    }

    /*  SECOND H1 ANIMATION START HERE */
    .text-typewriter-two {
      white-space: nowrap;
      overflow: hidden;
      width: 0;
      animation:
        typing-two 2s steps(20, end) forwards,
        cursor-two 0.4s step-end infinite alternate,
        text-animation 8s linear infinite;
      animation-delay: 1s;
      animation-timing-function: linear;
      background: linear-gradient(to right, #120044, #ffffff, #310891);
      background-size: 200%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    @keyframes typing-two {
      from {
        width: 0;
      }

      to {
        width: 20ch;
      }
    }

    @keyframes cursor-two {
      50% {
        border-color: transparent;
      }
    }

    /*  THIRD H1 ANIMATION START HERE */
    .text-typewriter-three {
      white-space: nowrap;
      overflow: hidden;
      width: 0;
      animation:
        typing-three 2s steps(20, end) forwards,
        cursor-three 0.4s step-end infinite alternate,
        text-animation 8s linear infinite;
      animation-delay: 3s;
      animation-timing-function: linear;
      background: linear-gradient(to right, #200a5ed0, #ffffff, #310891);
      background-size: 200%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    @keyframes typing-three {
      from {
        width: 0;
      }

      to {
        width: 22ch;
      }
    }

    @keyframes cursor-three {
      50% {
        border-color: transparent;
      }
    }





    /* IMAGE TOOLD AND SKILLS STARTS HERE */
    .structure_image {
      height: 200px;
      margin-top: -50px;
      margin-left: 50px;
      display: flex;
      flex-direction: row;
    }

    img {
      height: 100px;
      width: 100px;
    }

    .special_git {
      background-color: #ffffff;
      border-radius: 50px;

    }

    .structure_image div {
      height: 150px;
      width: 140px;
      margin: 20px;
    }

    .image {
      height: 100px;
      width: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 1s;
      transition-timing-function: ease;
    }

    .special_git {
      background-color: white;
      border-radius: 100px;

    }

    .structure_image h1 {
      text-align: center;
      margin-top: 80px;
      margin-right: 20px;
    }

    .image:hover {
      transform: translateY(-20px);
      transition: 1s;
      transition-timing-function: ease;
      cursor: pointer;
    }

    /* IMAGE TOOLD AND SKILLS STARTS HERE */





    /* PORTFOLIO MY IMAGE ANIMATION STARTS HERE */
    .myimage {
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .myimagesize {
      animation-iteration-count: 6;
      animation: spring-scale 0.7s ease-out forwards;
      margin-left: 240px;
      margin-top: 50px;
    }

    @keyframes spring-scale {
      0% {
        transform: scale(0);
        height: 0px;
        width: 0px;
        background-color: rgba(255, 255, 255, 0.808);
        border-radius: 3000px;
      }


      100% {
        transform: scale(1.2);
        height: 450px;
        width: 350px;
      }
    }

    /* PORTFOLIO MY IMAGE ANIMATION ENDS HERE */





    /* ANIMATION AND DESIGN OF PROJECT STARTS HERE */
    .projectouter {
      margin-top: 100px;
    }

    .project-layout {
      margin-top: 50px;
      margin-left: 65px;
      display: grid;
      grid-template-columns: 500px 500px;
      height: 380px;
      gap: 20px;
      transition-timing-function: linear;
    }

    .projectbox {
      background-color: rgba(240, 248, 255, 0);
      margin: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transform: scale(1);
      transition: transform 0.5s ease;
    }

    .projectbox:hover {
      transform: scale(1.15);
    }

    .projectbox a img {
      height: 250px;
      width: 350px;
      border-radius: 20px;
    }

    .project-headline {
      margin-left: 75px;
      margin-bottom: -50px;
    }

    .projectbox h1 {
      margin-top: -5px;
      margin-bottom: -10px;
    }

    /* ANIMATION AND DESIGN OF PROJECT ENDS HERE */




    /* DESIGN FOR FOOTER STARTS HERE */
    footer {
      margin-top: 150px;
    }

    .footer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .link {
      text-decoration: none;
      color: white;
      font-size: 16px;
      margin: 10px 0;
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .link:hover {
      color: #000000;
      transform: translateX(5px);
    }

    /* Icon animation */
    .link:hover i {
      transform: rotate(20deg) scale(1.1);
      /* Rotate and scale the icons */
      transition: transform 0.3s ease;
    }

    /* DESIGN FOR FOOTER ENDS HERE */
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-left: -230px;
    }



    /* Responsive Style Starts */
    @media (max-width: 768px) {

      /* Show hamburger menu on small screens */
      .button {
        display: flex;
      }

      /* Hide normal navigation by default */
      .nav {
        position: absolute;
        top: 60px;
        right: 0;
        background-color: rgba(0, 0, 50, 0.95);
        flex-direction: column;
        width: 100%;
        max-width: 250px;
        display: none;
        padding: 10px 0;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        z-index: 1000;
      }

      /* Show nav when toggled */
      .nav.active {
        display: flex;
      }

      .project-headline {
        margin-top: 50px;
        margin-bottom: 50px;
      }

      .nav a {
        margin: 10px 20px;
        font-size: 1.2em;
      }

      .header {
        position: relative;
      }

      .box {
        grid-template-columns: 1fr;
        width: 400px;
        height: 600px;
        margin-left: 20px;
      }

      .myimagesize {
        margin-left: 0;

      }

      .outer_border_skill {
        margin-left: 0;
        margin-top: 550px;
      }

      .structure_image1 {
        margin-top: 650px;
      }


      .structure_image {
        flex-direction: column;
        align-items: center;
        margin-left: 20px;

      }

      .projectouter {
        margin-top: 250px;
        margin-bottom: 300px;

      }

      .project-layout {
        grid-template-columns: 1fr;
        margin-left: 0;
      }

      .projectbox {
        margin: 10px 0;
      }

      .project-headline {
        margin-left: 10px;
        text-align: center;
      }

      .projectbox a img {
        height: 200px;
        width: 300px;
        border-radius: 10px;
        margin-top: 40px;

      }


      .footer {
        padding: 20px;
      }

      .link {
        margin: 5px 0;
      }
    }