diff --git a/css/animation.css b/css/animation.css
new file mode 100644
index 0000000..6cb6b35
--- /dev/null
+++ b/css/animation.css
@@ -0,0 +1,96 @@
+@keyframes animate {
+  40%,
+  60% {
+    left: 100%;
+  }
+  100% {
+    left: 0%;
+  }
+}
+
+@keyframes cursor {
+  50% {
+    border-color: transparent;
+  }
+}
+@keyframes typing {
+  from {
+    width: 1px;
+  }
+}
+
+@keyframes neon-border-animation {
+  0% {
+    box-shadow: 0 0 10px #ff004f, 0 0 20px #ff004f, 0 0 30px #ff004f,
+      0 0 40px #ff004f, 0 0 70px #f0004f, 0 0 80px #ff004f, 0 0 100px #ff004f,
+      0 0 150px #ff004f;
+  }
+  100% {
+    box-shadow: 0 0 20px #ff004f, 0 0 30px #ff004f, 0 0 40px, 0 0 50px #ff004f,
+      0 0 80px #ff004f, 0 0 90px #ff004f, 0 0 110px #ff004f, 0 0 160px #ff004f;
+  }
+}
+@keyframes html {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 70%;
+  }
+}
+@keyframes css {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 50%;
+  }
+}
+@keyframes python {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 60%;
+  }
+}
+@keyframes flask {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 40%;
+  }
+}
+@keyframes git {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 70%;
+  }
+}
+@keyframes ml {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 50%;
+  }
+}
+@keyframes teamwork {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 80%;
+  }
+}
+@keyframes creativity {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 80%;
+  }
+}
diff --git a/css/general.css b/css/general.css
new file mode 100644
index 0000000..5c0fd1c
--- /dev/null
+++ b/css/general.css
@@ -0,0 +1,873 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "Poppins", "sans-serif";
+    box-sizing: border-box;
+  }
+  
+  #sp1 {
+    background-color: #080800;
+    width: 100%;
+    height: 10vh;
+  }
+  
+  .space {
+    background: linear-gradient(90deg, #000000, #737373);
+    width: 100%;
+    height: 20vh;
+  }
+  body {
+    background: #080800;
+    color: #fff;
+    overflow-x: hidden;
+  }
+  #header {
+    width: 100%;
+    height: 100vh;
+    background-image: url(../images/bgimg.jpg);
+    background-size: cover;
+  
+    background-position: center;
+  }
+  .container {
+    padding: 10px 10%;
+  }
+  
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  
+  .logo {
+    width: 140px;
+  }
+  nav ul li {
+    display: inline-block;
+    list-style: none;
+    margin: 10px 20px;
+  }
+  
+  .menuButton {
+    display: none;
+  }
+  nav ul li a {
+    color: white;
+    text-decoration: none;
+    font-size: 18px;
+    position: relative;
+  }
+  nav ul li a::after {
+    content: "";
+    width: 0;
+    height: 3px;
+    background: #ff004f;
+    position: absolute;
+    left: 0;
+    bottom: -6px;
+    transition: 0.5s;
+  }
+  
+  nav ul li a:hover::after {
+    width: 100%;
+  }
+  
+  nav ul li a svg {
+    color: white;
+  }
+  
+  .sidebar {
+    top: 0;
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    backdrop-filter: blur(10px);
+    z-index: 999;
+    display: none;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+  
+  .sidebar li {
+    width: 100%;
+  }
+  
+  .sidebar a {
+    width: 100%;
+  }
+  
+  .header-text {
+    margin-top: 10%;
+    font-size: 30px;
+  }
+  .header-text h3 {
+    font-weight: 100;
+    font-size: 30px;
+  }
+  .header-text #main {
+    color: #ff004f;
+    font-size: 50px;
+    margin-top: 25px;
+  }
+  
+  .auto-type {
+    color: #ff004f;
+  }
+  
+  /* PROJECTS*/
+  
+  .projects {
+    width: 100%;
+    height: 100vh;
+  }
+  
+  .project-title {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  
+    width: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  
+  #project-1 {
+    width: 50%;
+    float: left;
+  }
+  #project-2 {
+    width: 50%;
+    float: right;
+  }
+  
+  #project-3 {
+    width: 50%;
+    float: left;
+  }
+  
+  #project-4 {
+    width: 50%;
+    float: right;
+  }
+  .project-container {
+    color: white;
+    height: 45vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: #f0004f;
+  }
+  
+  .inner-cont {
+    border-radius: 15px;
+    width: 80%;
+    height: 80%;
+    border: 2px solid rgb(243, 16, 16);
+    /* adding neor*/
+    border: 2px solid #ff004f;
+    border-radius: 5px;
+    box-shadow: 0 0 10px #ff004f;
+    padding: 10px;
+    transition: box-shadow 0.3s ease-in-out;
+  }
+  
+  .inner-cont:hover {
+    box-shadow: 0 0 20px #ff004f;
+  }
+  
+  .inner-left {
+    border-radius: 15px;
+    border: 1px solid black;
+    width: 40%;
+    float: left;
+    height: 100%;
+  }
+  
+  .inner-right {
+    padding-left: 5px;
+    border-radius: 15px;
+    border: 1px solid black;
+    float: right;
+    width: 60%;
+    height: 100%;
+  }
+  .right-title {
+    border-radius: 15px;
+    padding: 10px 10px;
+  
+    width: 100%;
+    height: 30%;
+  }
+  
+  .right-title a {
+    text-decoration: none;
+  }
+  .right-desc {
+    font-size: 15px;
+    padding-top: 5px;
+    padding-left: 10px;
+    margin-top: 10px;
+    color: white;
+  }
+  .inner-left img {
+    width: 100%;
+    height: 100%;
+    border-radius: 15px;
+  }
+  
+  .right-desc p {
+    color: white;
+  }
+  .right-title h2 {
+    color: white;
+  }
+  
+  /*skills section*/
+  
+  .skills {
+    width: 100%;
+    height: 100vh;
+  }
+  
+  .skills-title {
+    width: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .skills-title h1 {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+  
+  .skill-main {
+    padding: 50px 13%;
+    height: 90vh;
+    margin-top: 10px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 50px;
+    grid-row-gap: 20px;
+  }
+  
+  .skill-main .skill-bar .info {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+  }
+  
+  .skill-bar .info .percent {
+    font-weight: bold;
+  }
+  
+  .skill-bar .bar {
+    position: relative;
+    border-radius: 15px;
+    width: 100%;
+    height: 10px;
+    background-color: antiquewhite;
+    margin-top: 5px;
+  }
+  
+  .skill-bar .bar span {
+    width: 50%;
+    height: 100%;
+    position: absolute;
+    background-color: #f0004f;
+    border-radius: 15px;
+    box-shadow: #080800;
+  }
+  .skill-bar .bar .html {
+    width: 70%;
+    animation: html 3s;
+  }
+  
+  .skill-bar .bar .css {
+    width: 50%;
+    animation: css 3s;
+  }
+  
+  .skill-bar .bar .python {
+    width: 60%;
+    animation: python 3s;
+  }
+  
+  .skill-bar .bar .flask {
+    width: 40%;
+    animation: flask 3s;
+  }
+  
+  .skill-bar .bar .git {
+    width: 70%;
+    animation: git 3s;
+  }
+  
+  .skill-bar .bar .ml {
+    width: 50%;
+    animation: ml 3s;
+  }
+  
+  .skill-bar .bar .teamwork {
+    width: 80%;
+    animation: teamwork 3s;
+  }
+  
+  .skill-bar .bar .creativity {
+    width: 80%;
+    animation: creativity 3s;
+  }
+  
+  /*education*/
+/*   
+  .education {
+    background: linear-gradient(90deg, #000000, #737373);
+    padding: 0px 15px;
+    width: 100%;
+    height: 100vh;
+  }
+  
+  .education-title {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    width: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .education h2 {
+    margin-bottom: 1rem;
+  }
+  
+  .timeline {
+    margin: 2em auto;
+    max-width: 34.15em;
+  }
+  
+  .checkpoint {
+    max-width: 34em;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    position: relative;
+  }
+  .checkpoint div {
+    border: 1px solid #f0004f;
+    border-radius: 1em;
+    padding: 1.5em;
+    border: 2px solid #ff004f;
+    border-radius: 5px;
+    box-shadow: 0 0 10px #ff004f;
+    padding: 10px;
+    transition: box-shadow 0.3s ease-in-out;
+  }
+  .checkpoint div:hover {
+    box-shadow: 0 0 20px #ff004f;
+  }
+  .checkpoint p {
+    line-height: 20px;
+  }
+  
+  .checkpoint:nth-child(odd) {
+    border-left: 3px solid #f0004f;
+    padding-left: 3em;
+    transform: translateX(17em);
+  }
+  
+  .checkpoint:nth-child(even) {
+    border-right: 3px solid #f0004f;
+    padding-right: 3em;
+    transform: translateX(-3.20em);
+  }
+  
+  .checkpoint:nth-child(odd)::before,
+  .checkpoint:nth-child(even)::before {
+    content: "";
+    background: #f0004f;
+    width: 3em;
+    height: 3px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  
+  .checkpoint:nth-child(odd)::before {
+    left: 0;
+  }
+  
+  .checkpoint:nth-child(even)::before {
+    right: 0;
+  } */
+  
+
+
+  /* new EDU AND EXP */
+
+.eduexp {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+.econtainer{
+    width: 100%;
+    padding: 35px 10%;
+}
+.econtainer{
+    padding-right: calc(10% - 30px);
+}
+main.row{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 20px;
+}
+
+col header.title{
+    color: #f0004f;
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 0px 0px 20px 30px;
+}
+.col .contents{
+    padding:0px 30px;
+    border-left: 2px solid white;
+}
+.col .contents .box{
+    position: relative;
+    padding:  20px;
+    border: 1px solid #f0004f;
+    cursor: pointer;
+    transition: all 0.4s;
+    margin-bottom: 20px;
+    margin-top: 20px;
+
+}
+.col .contents .box:hover{
+    box-shadow: 0px 3px 12px 0px #f0004f;
+    border: 1px solid transparent;
+}
+.col .contents .box:before{
+    content: ' ';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    right: calc(100% + 22px);
+    top: 0;
+    background-color: #f0004f;
+    border: 2px solid #f0004f;
+}
+.box h4{
+    position: relative;
+    color: #f0004f;
+}
+.box h3{
+    font-size: 13px;
+    padding: 10px 0px 6px;
+    font-family: Arial, Helvetica, sans-serif;
+    color: #fff;
+}
+
+.box p{
+    line-height: 1.2;
+    color: rgb(246, 211, 211);
+}
+/*  edu exp responsive ness */
+@media (max-width:768px){
+    main.row{
+        grid-template-columns: 1fr;
+    }
+    .row .col:nth-child(2){
+        margin-top: 30px;
+    }
+}
+
+  /* CONTACT */
+  
+  .contact {
+    background: linear-gradient(90deg, #000000, #737373);
+    width: 100%;
+    height: 100vh;
+  }
+  .contact-title {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .contact-title h1 {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .contact-left {
+    width: 40%;
+    height: 90vh;
+    float: left;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .contact-right {
+    width: 60%;
+    float: right;
+    height: 90vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .form-cont {
+    border: 1px solid white;
+    width: 80%;
+    height: 80%;
+    background-color: #ff004f;
+    border-radius: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .menu {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .menu li {
+    position: absolute;
+    left: 0;
+    list-style: none;
+    transform-origin: 100px;
+    transition: 0.5s;
+    transition-delay: calc(0.1s * var(--i));
+    transform: rotate(0deg) translateX(80px);
+  }
+  
+  .menu.active li {
+    transform: rotate(calc(360deg / 4 * var(--i)));
+  }
+  
+  .menu li a {
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    background-color: white;
+    transform: rotate(calc(360deg / -4 * var(--i)));
+  }
+  
+  .toggle {
+    position: absolute;
+    background: #f0004f;
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform 1.25s;
+    font-size: 2em;
+  }
+  
+  .menu .active .toggle {
+    transform: rotate(315deg);
+  }
+  
+  .form-cont {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .form-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-evenly;
+  }
+  
+  .form-container textarea {
+    height: 140px;
+    padding-top: 15px;
+    border-radius: 20px;
+  }
+  
+  .contact-input {
+    width: 400px;
+    height: 50px;
+    border: none;
+    outline: none;
+    padding-left: 25px;
+    font-weight: 500;
+    border-radius: 50px;
+  }
+  
+  .contact-input:focus {
+    border: 1px solid #b8b2b4;
+  }
+  
+  .contact-input::placeholder {
+    color: #f0004f;
+  }
+  
+  .form-container button {
+    float: left;
+    display: flex;
+    align-items: center;
+    padding: 15px 30px;
+    font-size: 16px;
+    color: white;
+    gap: 10px;
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+  }
+  .form-container button b {
+    color: #f0004f;
+  }
+  .download {
+    text-align: center;
+    width: 50%;
+    float: right;
+  }
+  
+  .download a {
+    padding: 15px 30px;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+    float: right;
+    border: 1px solid white;
+    display: flex;
+    color: #ff004f;
+    background-color: white;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 50px;
+    cursor: pointer;
+  }
+  
+  .download a b {
+    text-align: center;
+  }
+  
+  .last-cont {
+    padding: 10px 10px;
+    justify-content: space-between;
+    display: flex;
+    height: 50px;
+    width: 100%;
+  }
+  footer {
+    font-weight: 100;
+    text-align: center;
+    text-decoration: none;
+  }
+  
+@media (max-width: 321px) {
+    .header-text #main {
+      font-size: 25px;
+    }
+    .header-text p {
+      font-size: 20px;
+    }
+    .header-text h3 {
+      font-size: 20px;
+    }
+    .right-title {
+      font-size: 14px;
+      padding-top: 23px;
+    }
+    .skill-bar {
+      margin-top: 20px;
+    }
+    .skill-main {
+      font-size: 12px;
+      margin-top: -20px;
+      display: block;
+    }
+    .toggle {
+      width: 70px;
+      height: 70px;
+    }
+    .contact-input {
+      width: 358px;
+      height: 34px;
+    }
+    .contact-right {
+      width: 100%;
+    }
+    .contact-left {
+      height: 50vh;
+      width: 100%;
+    }
+  
+    .form-container {
+      align-items: center;
+      justify-content: center;
+    }
+    .form-container button {
+      font-size: 12px;
+    }
+    .download {
+      width: 60%;
+    }
+    .download a {
+      font-size: 12px;
+    }
+    .checkpoint div {
+      font-size: 12px;
+    }
+  }
+  
+  @media (max-width: 426px) {
+    #header {
+      background-image: url(none);
+    }
+    .menuButton {
+      display: block;
+    }
+    .header-text #main {
+      font-size: 25px;
+    }
+    .hideOnMobile {
+      display: none;
+    }
+  
+    .checkpoint:nth-child(odd)::before,
+    .checkpoint:nth-child(even)::before {
+      content: none;
+    }
+    .checkpoint:nth-child(odd) {
+      width: 80%;
+      border-left: none;
+      padding-left: 3em;
+      transform: translateX(1em);
+    }
+    .checkpoint:nth-child(even) {
+      width: 80%;
+      border-right: none;
+      padding-right: 3em;
+      transform: translateX(4.15em);
+    }
+    .contact-input {
+      margin-top: 0;
+      height: 30px;
+      width: 80%;
+    }
+  
+    /*projects*/
+    .project-container {
+      width: 100%;
+      float: none;
+    }
+    #project-1 {
+      width: 100%;
+    }
+    #project-2 {
+      width: 100%;
+    }
+    #project-3 {
+      width: 100%;
+    }
+    #project-4 {
+      width: 100%;
+    }
+    .projects {
+      height: 200vh;
+    }
+    .right-desc p {
+      display: none;
+    }
+  
+    /*SKILSS*/
+    .skills {
+      height: 180vh;
+    }
+    .skill-main {
+      font-size: 12px;
+      margin-top: -20px;
+      display: block;
+    }
+    .skill-main .skill-bar .info {
+      display: flex;
+      justify-content: space-between;
+      padding: 13px 10px;
+    }
+  
+    /*EDUCATION*/
+  
+    .checkpoint:nth-child(odd)::before,
+    .checkpoint:nth-child(even)::before {
+      content: normal;
+    }
+  
+    .toggle {
+      width: 70px;
+      height: 70px;
+    }
+    .contact {
+      height: 152vh;
+    }
+    .contact-left {
+      height: 50vh;
+      width: 100%;
+    }
+    .contact-right {
+      width: 100%;
+      align-items: center;
+      justify-content: center;
+    }
+    .form-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-evenly;
+    }
+  }
+  @media (min-width: 427px) {
+    .checkpoint:nth-child(odd) {
+      width: 60%;
+    }
+    .checkpoint:nth-child(even) {
+      width: 60%;
+      transform: translateX(-53.99px);
+    }
+  }
+  
+  @media (max-width: 700px) {
+    #header {
+      background-image: none;
+      background-color: #080800;
+    }
+    body {
+      overflow-x: hidden;
+    }
+    .education {
+      height: 120vh;
+    }
+  }
+  
+  /* @media(max-width:400px){
+      .sidebar{
+          width: 100%;
+      }
+   } */
+  
+  @media (max-width: 400px) {
+    /*contacts*/
+  } 
+  
\ No newline at end of file
diff --git a/css/responsive.css b/css/responsive.css
new file mode 100644
index 0000000..1a91e82
--- /dev/null
+++ b/css/responsive.css
@@ -0,0 +1,183 @@
+/*media queries */
+@media (max-width: 321px) {
+  .header-text #main {
+    font-size: 25px;
+  }
+  .header-text p {
+    font-size: 20px;
+  }
+  .header-text h3 {
+    font-size: 20px;
+  }
+  .right-title {
+    font-size: 14px;
+    padding-top: 23px;
+  }
+  .skill-bar {
+    margin-top: 20px;
+  }
+  .skill-main {
+    font-size: 12px;
+    margin-top: -20px;
+    display: block;
+  }
+  .toggle {
+    width: 70px;
+    height: 70px;
+  }
+  .contact-input {
+    width: 358px;
+    height: 34px;
+  }
+  .contact-right {
+    width: 100%;
+  }
+  .contact-left {
+    height: 50vh;
+    width: 100%;
+  }
+
+  .form-container {
+    align-items: center;
+    justify-content: center;
+  }
+  .form-container button {
+    font-size: 12px;
+  }
+  .download {
+    width: 60%;
+  }
+  .download a {
+    font-size: 12px;
+  }
+  /* .checkpoint div {
+    font-size: 12px;
+  }
+} */
+
+@media (max-width: 426px) {
+  #header {
+    background-image: url(none);
+  }
+  .menuButton {
+    display: block;
+  }
+  .header-text #main {
+    font-size: 25px;
+  }
+  .hideOnMobile {
+    display: none;
+  }
+
+  /* .checkpoint:nth-child(odd)::before, */
+  /* .checkpoint:nth-child(even)::before { */
+    /* content: none; */
+   /* .checkpoint:nth-child(odd) { +
+      width: 80%; 
+    border-left: none;
+    padding-left: 3em;
+    transform: translateX(1em);
+  } */
+  /* .checkpoint:nth-child(even) {
+    width: 80%;
+    border-right: none;
+    padding-right: 3em;
+    transform: translateX(4.15em);
+  }  */
+  .contact-input {
+    margin-top: 0;
+    height: 30px;
+    width: 80%;
+  }
+
+  /*projects*/
+  .project-container {
+    width: 100%;
+    float: none;
+  }
+  #project-1 {
+    width: 100%;
+  }
+  #project-2 {
+    width: 100%;
+  }
+  #project-3 {
+    width: 100%;
+  }
+  #project-4 {
+    width: 100%;
+  }
+  .projects {
+    height: 200vh;
+  }
+  .right-desc p {
+    display: none;
+  }
+
+  /*SKILSS*/
+  .skills {
+    height: 180vh;
+  }
+  .skill-main {
+    font-size: 12px;
+    margin-top: -20px;
+    display: block;
+  }
+  .skill-main .skill-bar .info {
+    display: flex;
+    justify-content: space-between;
+    padding: 13px 10px;
+  }
+
+  /*EDUCATION*/
+
+  /* .checkpoint:nth-child(odd)::before,
+  /* .checkpoint:nth-child(even)::before {
+    content: normal;
+  } */
+
+  .toggle {
+    width: 70px;
+    height: 70px;
+  }
+  .contact {
+    height: 152vh;
+  }
+  .contact-left {
+    height: 50vh;
+    width: 100%;
+  }
+  .contact-right {
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  .form-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+}
+/* @media (min-width: 427px) {
+  /* .checkpoint:nth-child(odd) {
+    width: 60%;
+  } */
+  /* .checkpoint:nth-child(even) {
+    width: 60%;
+    transform: translateX(-53.99px);
+  }
+}  */
+
+@media (max-width: 700px) {
+  #header {
+    background-image: none;
+    background-color: #080800;
+  }
+  body {
+    overflow-x: hidden;
+  }
+}
+
+
+}
\ No newline at end of file
diff --git a/images/AR_CV.pdf b/images/AR_CV.pdf
deleted file mode 100644
index b2c09db..0000000
Binary files a/images/AR_CV.pdf and /dev/null differ
diff --git a/images/CV Mohammed Abdul Rahman  - Copy.pdf b/images/CV Mohammed Abdul Rahman  - Copy.pdf
new file mode 100644
index 0000000..303c02e
Binary files /dev/null and b/images/CV Mohammed Abdul Rahman  - Copy.pdf differ
diff --git a/index.html b/index.html
index bb57fde..7edfb6f 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>that-ar-guy</title>
-    <link rel="stylesheet" href="style.css">
+
+    <!-- <link rel="stylesheet" href="style.css"> -->
+    <link rel="stylesheet" href="css/responsive.css">
+    <link rel="stylesheet" href="css/general.css">
+    <link rel="stylesheet" href="css/animation.css">
 </head>
 
 <body>
@@ -14,7 +18,7 @@
             <nav>
                 <img src="images/logo.png" alt="" class="logo" width="100px" height="100px">
 
-               
+
                 <ul class="sidebar">
                     <li onclick="hideSidebar()"><a href=""><svg xmlns="http://www.w3.org/2000/svg" width="28"
                                 height="28" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
@@ -22,15 +26,17 @@
                                     d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
                             </svg></a></li>
                     <li onclick="hideSidebar()"><a href="#projects">PROJECTS</a></li>
-                    <li onclick="hideSidebar()"><a href="#skills">SKILLS</a></li>
-                    <li onclick="hideSidebar()"><a href="#education">EDUCATION</a></li>
+                    <li onclick="hideSidebar()"><a href="#eduexp">EXPERIENCE</a></li>
+                    <li onclick="hideSidebar()"><a href="#skills"> SKILLS</a></li>
+                    <li onclick="hideSidebar()"><a href="#eduexp">EDUCATION</a></li>
                     <li onclick="hideSidebar()"><a href="#contact">CONTACT</a></li>
                 </ul>
                 <ul>
                     <li class="hideOnMobile"><a class="text" href="">HOME</a></li>
                     <li class="hideOnMobile"><a class="text" href="#projects">PROJECTS</a></li>
+                    <li class="hideOnMobile"><a class="text" href="#eduexp">EXPERIENCE</a></li>
                     <li class="hideOnMobile"><a class="text" href="#skills">SKILLS</a></li>
-                    <li class="hideOnMobile"><a class="text" href="#education">EDUCATION</a></li>
+                    <li class="hideOnMobile"><a class="text" href="#eduexp">EDUCATION</a></li>
                     <li class="hideOnMobile"><a class="text" href="#contact">CONTACT</a></li>
                     <li class="menuButton" onclick="showSidebar()"><a href="#"><svg xmlns="http://www.w3.org/2000/svg"
                                 width="23" height="23" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
@@ -223,11 +229,8 @@ <h1 id="skills">SKILLS</h1>
         </div>
     </div>
 
-    <div class="space">
 
-    </div>
-
-    <div class="education">
+    <!-- <div class="education">
         <div id="education" class="education-title">
             <h1><b>EDUCATION</b></h1>
         </div>
@@ -259,6 +262,65 @@ <h3> Nawab Shah Alam Khan College of Engineering and Technology [2021-2025]</h3>
                 </div>
             </div>
         </div>
+    </div> -->
+    <div class="eduexp" id="eduexp">
+        <div class="econtainer">
+            <main class="row">
+                <!-- education starts here
+             -->
+                <section class="col">
+                    <header class="title">
+                        <h1>EDUCATION</h1>
+                    </header>
+                    <div class="contents">
+                        <div class="box">
+                            <h4>2008-2019</h4>
+                            <h3>MUKARRAM JAH SCHOOL</h3>
+                            <p>CGPA: 91.3</p>
+
+                        </div>
+                        <div class="box">
+                            <h4>2019-2021</h4>
+                            <h3>MS JUNIOR COLLEGE</h3>
+                            <p>Percentage: 97.3%</p>
+
+                        </div>
+                        <div class="box">
+                            <h4>2021-2025</h4>
+                            <h3>NAWAB SHAH ALAM KHAN COLLEG OF ENGINEERING AND TECHNOLOGY</h3>
+                            <p>CGPA: 8.5</p>
+
+                        </div>
+                    </div>
+                </section>
+                <!-- education ends here -->
+
+                <!-- experience starts here -->
+                <section class="col">
+                    <header class="title">
+                        <h1>EXPERIENCE</h1>
+                    </header>
+                    <div class="contents">
+                        <div class="box">
+                            <h4>JAN 2024-FEB 2024</h4>
+                            <h3>MALIKS INSTITUTE</h3>
+                            <p>Engineering Tutor(DSA, PPS, Automata)</p>
+
+                        </div>
+                        <div class="box">
+                            <h4>Jun 2024- Aug 2024</h4>
+                            <h3>ENEXPERTS CONSULTANCY PVT LTD</h3>
+                            <p>Data Analyst Intern</p>
+
+                        </div>
+                    </div>
+                </section>
+
+
+                <!-- experience ends here  -->
+
+            </main>
+        </div>
     </div>
 
     <div class="space">
@@ -303,7 +365,8 @@ <h1 id="contact">CONTACT</h1>
                         <button type="submit"><b>SUBMIT</b>
 
                         </button>
-                        <div class="download"><a href="images/AR_CV.pdf" download="download"><B>DOWNLOAD CV</B></a>
+                        <div class="download"><a href="/images/CV Mohammed Abdul Rahman  - Copy.pdf"
+                                download="download"><B>DOWNLOAD CV</B></a>
                         </div>
                     </div>
                 </form>
@@ -313,40 +376,13 @@ <h1 id="contact">CONTACT</h1>
     <footer>
         made with love by<a href="https://github.com/that-ar-guy" target="_blank">that-ar-guy</a>
     </footer>
-    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js">
-
-
-    </script>
-    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js">
-
-    </script>
-    <script>
-        let toggle = document.querySelector('.toggle');
-        let menu = document.querySelector('.menu');
-        toggle.onclick = function () {
-            menu.classList.toggle('active')
-        }
-
-    </script>
+    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+    <script src="./js/menuToggle.js"></script>
     <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
-    <script>
-        var typed = new Typed('.auto-type', {
-            strings: ['Programmer', 'Coder', 'Engineer'],
-            TypeSpeed: 200,
-            BackSpeed: 200,
-            loop: true
-        })
-    </script>
-    <script>
-        function showSidebar() {
-            const sidebar = document.querySelector(".sidebar");
-            sidebar.style.display = 'flex'
-        }
-        function hideSidebar() {
-            const sidebar = document.querySelector(".sidebar");
-            sidebar.style.display = 'none'
-        }
-    </script>
+    <script src="./js/sidebarToggle.js"></script>
+    <script src="./js/typedAnimations.js"></script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/js/menuToggle.js b/js/menuToggle.js
new file mode 100644
index 0000000..8cf9cdc
--- /dev/null
+++ b/js/menuToggle.js
@@ -0,0 +1,5 @@
+let toggle = document.querySelector('.toggle');
+let menu = document.querySelector('.menu');
+toggle.onclick = function () {
+    menu.classList.toggle('active');
+}
diff --git a/js/sidebarToggle.js b/js/sidebarToggle.js
new file mode 100644
index 0000000..03f6163
--- /dev/null
+++ b/js/sidebarToggle.js
@@ -0,0 +1,8 @@
+function showSidebar() {
+    const sidebar = document.querySelector(".sidebar");
+    sidebar.style.display = 'flex';
+}
+function hideSidebar() {
+    const sidebar = document.querySelector(".sidebar");
+    sidebar.style.display = 'none';
+}
diff --git a/js/typedAnimations.js b/js/typedAnimations.js
new file mode 100644
index 0000000..53f8104
--- /dev/null
+++ b/js/typedAnimations.js
@@ -0,0 +1,6 @@
+var typed = new Typed('.auto-type', {
+    strings: ['Programmer', 'Coder', 'Engineer'],
+    TypeSpeed: 200,
+    BackSpeed: 200,
+    loop: true
+});
diff --git a/style.css b/style.css
deleted file mode 100644
index 38a6b17..0000000
--- a/style.css
+++ /dev/null
@@ -1,913 +0,0 @@
-*{
-    margin: 0;
-    padding: 0;
-    font-family:'Poppins','sans-serif';
-    box-sizing: border-box;
-}
-
-#sp1{
-    background-color: #080800;
-    width: 100%;
-    height: 10vh;
-}
-
-.space{
-    background: linear-gradient(90deg,#000000,#737373);
-    width: 100%;
-    height: 20vh;
-}
-body{
-    background: #080800;
-    color: #fff;
-    overflow-x: hidden;
-}
-#header{
-    width: 100%;
-    height: 100vh;
-    background-image: url(images/bgimg.jpg);
-    background-size: cover;
-
-    background-position: center;
-}
-.container{
-    padding: 10px 10%;
-}
-
-
-
-nav{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-
-.logo{
-    width: 140px;
-
-}
-nav ul li{
-    display: inline-block;
-    list-style: none;
-    margin: 10px 20px;
-}
-
-.menuButton{
-    display: none;
-}
-nav ul li a{
-    color: white;
-    text-decoration: none;
-    font-size: 18px;
-    position: relative;
-}
-nav ul li a::after{
-    content: '';
-    width: 0;
-    height: 3px;
-    background:#ff004f ;
-    position: absolute;
-    left:0;
-    bottom: -6px;
-    transition:0.5s ;
-}
-
-nav ul li a:hover::after{
-    width: 100%;;
-}
-
-nav ul li a svg{
-    color: white;
-}
-
-.sidebar{
-    top: 0;;
-    height: 100vh;
-    width:100vw;
-    position: fixed;
-    backdrop-filter: blur(10px);
-    z-index: 999;
-    display: none;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-.sidebar li{
-    width: 100%;
-
-}
-
-.sidebar a{
-    width: 100%;
-}
-
-.header-text{
-    margin-top: 10%;
-    font-size: 30px;
-}
-.header-text h3{
-    font-weight: 100;
-    font-size: 30px;
-}
-.header-text #main{
-    color: #ff004f;
-     font-size: 50px;
-     margin-top: 25px;
-     
-}
-
-.auto-type{
-    color: #ff004f;
-}
-@keyframes animate{
-    40%,60%{
-        left: 100%;
-    }100%{
-        left: 0%;
-    }
-}
-
-
-
-@keyframes cursor{
-    50%{ 
-        border-color: transparent;
-    }
-}
-@keyframes typing{
-    from {
-         width: 1px;;
-    }
-}
-/* PROJECTS*/
-
-.projects{
-    
-    
-    width: 100%;
-    height: 100vh;
-}
-
-.project-title{
-    padding-top: 20px   ;
-    padding-bottom:20px ;
-  
-    width: 100%;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-#project-1{
-    
-    width: 50%;
-    float: left;
-}
-#project-2{
-    
-    width: 50%;
-    float: right;
-}
-
-#project-3{
-    width: 50%;
-    float: left;
-   
-}
-
-#project-4{
-    width: 50%;
-    float: right;
-    
-}
-.project-container{
-    color: white;
-    height: 45vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: #f0004f;
-}
-
-.inner-cont{
-    border-radius: 15px;
-    width: 80%;
-    height: 80%;
-    border: 2px solid rgb(243, 16, 16);
-    /* adding neor*/
-    border: 2px solid #ff004f;
-        border-radius: 5px;
-        box-shadow: 0 0 10px #ff004f;
-        padding: 10px;
-        transition: box-shadow 0.3s ease-in-out;
-
-    
-}
-
-.inner-cont:hover {
-    box-shadow: 0 0 20px #ff004f;
-}
-@keyframes neon-border-animation {
-    0% {
-        box-shadow: 0 0 10px #ff004f, 0 0 20px #ff004f, 0 0 30px #ff004f, 0 0 40px #ff004f, 0 0 70px #f0004f, 0 0 80px #ff004f, 0 0 100px #ff004f, 0 0 150px #ff004f;
-    }
-    100% {
-        box-shadow: 0 0 20px #ff004f, 0 0 30px #ff004f, 0 0 40px , 0 0 50px #ff004f, 0 0 80px #ff004f, 0 0 90px #ff004f, 0 0 110px #ff004f, 0 0 160px #ff004f;
-    }
-}
-
-.inner-left{
-    border-radius: 15px;
-    border: 1px solid black;
-    width: 40%;
-    float: left;
-    height: 100%;
-}
-
-.inner-right{
-    padding-left: 5px;
-    border-radius: 15px;
-    border: 1px solid black;
-    float: right;
-    width: 60%;
-    height: 100%;
-}
-.right-title{
-    border-radius:15px;
-    padding: 10px 10px;
-
-    width: 100%;
-    height: 30%;
-}
-
-.right-title a{
-    text-decoration: none;
-}
-.right-desc{
-    font-size: 15px;
-    padding-top: 5px;
-    padding-left: 10px;
-    margin-top: 10px;
-    color:white;
-    
-}
-.inner-left img{
-    width: 100%;
-    height: 100%;
-    border-radius: 15px;
-}
-
-.right-desc p{
-    color:white;
-}
-.right-title h2{
-    color:white;
-}
-
-/*skills section*/
-
-.skills{
-    background: linear-gradient(90deg,#000000,#737373);
-    width: 100%;
-    height: 100vh;
-}
-
-.skills-title{
-
-    width: 100%;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.skills-title h1{
-    padding-top: 20px   ;
-    padding-bottom:20px ;
-}
-
-.skill-main{
-    padding:50px 13%;
-    height: 90vh;
-    margin-top: 10px;
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(2,1fr);
-    grid-column-gap: 50px;
-    grid-row-gap: 20px;
-}
-
-.skill-main .skill-bar .info{
-    display: flex;
-    justify-content: space-between;
-    padding: 0 10px;
-}
-
-.skill-bar .info .percent{
-    font-weight: bold;
-}
-
-.skill-bar .bar{
-    position: relative;
-    border-radius: 15px;
-    width: 100%;
-    height: 10px;
-    background-color: antiquewhite;
-    margin-top: 5px;
-}
-
-.skill-bar .bar span{
-    width: 50%;
-    height: 100%;
-    position:absolute;
-    background-color: #f0004f;
-    border-radius: 15px;
-    box-shadow: #080800;
-}
-.skill-bar .bar .html{
-    width: 70%;
-    animation: html 3s;
-}
-@keyframes html{
-    0%{
-        width: 0;
-    }100%{
-        width: 70%;
-    }
-}
-
-.skill-bar .bar .css{
-    width: 50%;
-    animation: css 3s;
-}
-@keyframes css{
-    0%{
-        width: 0;
-    }100%{
-        width: 50%;
-    }
-}
-
-.skill-bar .bar .python{
-    width: 60%;
-    animation: python 3s;
-}
-@keyframes python{
-    0%{
-        width: 0;
-    }100%{
-        width: 60%;
-    }
-}
-
-.skill-bar .bar .flask{
-    width: 40%;
-    animation: flask 3s;
-}
-@keyframes flask{
-    0%{
-        width: 0;
-    }100%{
-        width: 40%;
-    }
-}
-
-.skill-bar .bar .git{
-    width: 70%;
-    animation: git 3s;
-}
-@keyframes git{
-    0%{
-        width: 0;
-    }100%{
-        width: 70%;
-    }
-}
-
-.skill-bar .bar .ml{
-    width: 50%;
-    animation: ml 3s;
-}
-@keyframes ml{
-    0%{
-        width: 0;
-    }100%{
-        width: 50%;
-    }
-}
-
-.skill-bar .bar .teamwork{
-    width: 80%;
-    animation: teamwork 3s;
-}
-@keyframes teamwork{
-    0%{
-        width: 0;
-    }100%{
-        width: 80%;
-    }
-}
-
-.skill-bar .bar .creativity{
-    width: 80%;
-    animation: creativity 3s;
-}
-@keyframes creativity{
-    0%{
-        width: 0;
-    }100%{
-        width: 80%;
-    }
-}
-
-/*education*/
-
-.education{
-    background: linear-gradient(90deg,#000000,#737373);
-    padding: 0px 15px;
-    width: 100%;
-    height: 100vh;
-}
-
-.education-title{
-    padding-top: 20px   ;
-    padding-bottom:20px ;
-    width: 100%;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.education h2{
-    margin-bottom: 1rem;
-
-}
-
-.timeline{
-    margin: 2em auto;
-    max-width: 34.15em;
-}
-
-.checkpoint{
-    max-width: 34em;
-    padding-top: 1em;
-    padding-bottom: 1em;
-    position: relative;
-}
-.checkpoint div{
-    border: 1px solid #f0004f;
-    border-radius: 1em;
-    padding: 1.5em;
-    border: 2px solid #ff004f;
-    border-radius: 5px;
-    box-shadow: 0 0 10px #ff004f;
-    padding: 10px;
-    transition: box-shadow 0.3s ease-in-out;
-
-}
-.checkpoint div:hover{
-    box-shadow: 0 0 20px #ff004f;   
-}
-.checkpoint p{
-    line-height: 20px;
-
-}
-
-.checkpoint:nth-child(odd){
-    border-left: 3px solid #f0004f;
-    padding-left: 3em;
-    transform: translateX(17em);
-}
-
-.checkpoint:nth-child(even){
-    border-right: 3px solid #f0004f;
-    padding-right: 3em;
-    transform: translateX(-16.85em);
-}
-
-.checkpoint:nth-child(odd)::before,
-.checkpoint:nth-child(even)::before {
-    content: "";
-    background: #f0004f;
-    width: 3em;
-    height: 3px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    
-}
-
-.checkpoint:nth-child(odd)::before{
-    left: 0;
-}
-
-.checkpoint:nth-child(even)::before{
-    right: 0;
-}
-
-/* CONTACT */
-
-.contact{
-    background: linear-gradient(90deg,#000000,#737373);
-    width: 100%;
-    height: 100vh;
-}
-.contact-title{
-align-items: center;
-display: flex;
-justify-content: center;
-}
-
-.contact-title h1{
-    padding-top: 10px;
-    padding-bottom :10px;
-}
-.contact-left{
-
-    width: 40%;
-    height: 90vh;
-    float: left;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.contact-right{
-
-    width: 60%;
-    float: right;
-    height: 90vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.form-cont{
-    border: 1px solid white;
-    width:80%;
-    height: 80%;
-    background-color: #ff004f;
-    border-radius: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.menu{
-    
-    position: relative;
-    width: 200px;
-    height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.menu li{
-    
-    position:absolute;
-    left: 0;
-    list-style: none;
-    transform-origin: 100px;
-    transition: 0.5s;
-    transition-delay: calc(0.1s*var(--i));
-    transform: rotate(0deg) translateX(80px);
-}
-
-.menu.active li{
-     transform: rotate(calc(360deg/4*var(--i)));
-}
-
-.menu li a{
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50px;
-    height: 50px;
-    background-color: white;
-    transform: rotate(calc(360deg/-4*var(--i)));
-}
-
-.toggle{
-
-    position: absolute;
-    background: #f0004f;
-    width: 80px;
-    height: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10000;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: transform 1.25s;
-    font-size: 2em;
-}
-
-.menu .active .toggle{
-    transform: rotate(315deg);
-
-}
-
-.form-cont{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.form-container{
-    display: flex;
-    flex-direction:column ;
-    align-items: flex-start;
-    justify-content: space-evenly;
-}
-
-.form-container textarea{
-    height: 140px;
-    padding-top: 15px;
-    border-radius: 20px;
-}
-
-.contact-input{
-    width: 400px;
-    height: 50px;
-    border: none;
-    outline: none;
-    padding-left: 25px;
-    font-weight: 500;
-    border-radius: 50px;
-}
-
-.contact-input:focus{
-    border: 1px solid #b8b2b4;
-}
-
-.contact-input::placeholder{
-    color: #f0004f;
-}
-
-.form-container button{
-    float: left;
-    display: flex;
-    align-items: center;
-    padding: 15px 30px;
-    font-size: 16px;
-    color: white;
-    gap: 10px;
-    border: none;
-    border-radius: 50px;
-    cursor: pointer;
-}
- .form-container button b{
-    color: #f0004f;
- }
- .download{
-    text-align: center;
-    width: 50%;
-    float:right;
-    
- }
-
-.download  a{
-    padding: 15px 30px;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    text-decoration: none;
-    float: right;
-    border: 1px solid white;
-    display: flex;
-    color:#ff004f;
-    background-color: white;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    border-radius: 50px;
-    cursor: pointer;
- }
-
- .download  a  b{
-    text-align: center;
- }
-
- .last-cont{
-    padding: 10px 10px;
-    justify-content: space-between;
-    display: flex;
-    height: 50px;
-    width:100%;
-    
-
-}
- footer{
-    font-weight: 100;
-    text-align: center;
-    text-decoration: none;
-    
- }
-
-/*media queries */
-@media(max-width:321px){
-    .header-text #main{
-        font-size: 25px;
-    }
-    .header-text p{
-        font-size: 20px;
-    }
-    .header-text h3{
-        font-size: 20px;
-    }
-    .right-title {
-        font-size: 14px;
-        padding-top: 23px;
-    }
-    .skill-bar{
-        margin-top: 20px;
-    }
-    .skill-main{
-        font-size: 12px;
-        margin-top: -20px;
-        display: block;
-     }
-     .toggle{
-        width: 70px;
-        height:70px;
-     }
-    .contact-input{
-        width: 358px;
-        height: 34px;
-    }
-    .contact-right {
-        width: 100%;
-    }
-    .contact-left{
-        height: 50vh;
-        width: 100%;
-    }
-    
-    .form-container {
-        align-items: center;
-        justify-content: center;
-    }
-    .form-container button {
-        font-size: 12px;
-    }
-    .download{
-        width: 60%;
-    }
-    .download a{
-        font-size: 12px;
-    }
-    .checkpoint div{
-        font-size: 12px;
-    }
-}
-
-@media (max-width:426px){
-    #header{
-        background-image: url(none);
-    }
-    .menuButton{
-        display: block;
-    }
-    .header-text #main {
-        font-size: 25px;
-    }
-    .hideOnMobile{
-        display: none;
-    }
-    
-    
-
-.checkpoint:nth-child(odd)::before, .checkpoint:nth-child(even)::before {
-    content: none;
-}
-.checkpoint:nth-child(odd) {
-    width: 80%;
-    border-left: none;
-    padding-left: 3em;
-    transform: translateX(1em);
-}
-.checkpoint:nth-child(even) {
-    width: 80%;
-    border-right: none;
-    padding-right: 3em;
-    transform: translateX(4.15em);
-}
-.contact-input{
-    margin-top: 0;
-    height: 30px;
-    width: 80%;
-}
-
-/*projects*/
-.project-container{
-    width: 100%;
-    float: none;
-}
-#project-1 {
-    width: 100%;
-}
-#project-2{
-    width: 100%;
-}
-#project-3{
-    width: 100%;
-}
-#project-4{
-    width: 100%;
-}
-.projects{
-    height: 200vh;
-}
-.right-desc p{
-    display: none;
-}
-
-/*SKILSS*/
-.skills{
-    height: 180vh;
-}
-.skill-main {
-    font-size: 12px;
-    margin-top: -20px;
-    display: block;
-}
-.skill-main .skill-bar .info {
-    display: flex;
-    justify-content: space-between;
-    padding: 13px 10px;
-}
-
- /*EDUCATION*/
- 
- .checkpoint:nth-child(odd)::before, .checkpoint:nth-child(even)::before{
-    content: normal;
- }
- 
-.toggle{
-    width: 70px;
-    height: 70px;
-}
-.contact{
-    height: 152vh;
-}
-.contact-left {
-    height: 50vh;
-    width: 100%;
-}
-.contact-right{
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-}
-.form-container{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-evenly;
-    
-}
-
-}
-@media (min-width:427px){
-    .checkpoint:nth-child(odd) {
-        width: 60%;
-    }
-    .checkpoint:nth-child(even) {
-        width: 60%;
-        transform: translateX(-53.99px);
-}
-
-
-
-
-@media(max-width:700px){
-    #header{
-        background-image: none;
-        background-color: #080800;
-    }
-    body{
-        overflow-x: hidden;
-    }
-    .education{
-        height: 120vh;
-    }
-}
-
- /* @media(max-width:400px){
-    .sidebar{
-        width: 100%;
-    }
- } */
-
-@media(max-width:400px){
-    /*contacts*/
-    
-    
-    }
-
-
- 
-}
\ No newline at end of file