@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crete+Round&display=swap");

/* CSS RESET */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  list-style: none;
}

/* Animations */

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

html {
  font-size: 62.5%;
}

body {
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
}

/* HEADER */

header {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: #3c3a39;
  height: 4rem;
  width: 100%;
  text-decoration: none;
  align-items: center;
}

.menu {
  display: none;
}

a {
  text-decoration: none;
}

@media screen and (width <= 768px) {
  .hamb-icon,
  .close {
    display: block;
  }

  .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    min-width: 10rem;
    gap: 4rem;
    inset: 0 0 0 -20%;
    background-color: #3c3a39;
    padding: 2rem;
    box-shadow: 0 0 0 100vmax #3c3a39;
    opacity: 0;
    visibility: hidden;
  }

  .menu.visible {
    opacity: 1;
    visibility: visible;
  }

  .menu-desktop li {
    min-width: 80vw;
    flex-direction: column;
    align-items: end;
    padding-bottom: 1rem;
    margin-bottom: 2.5rem;
    border-bottom: 1.5px grey solid;
    margin-left: 10%;
  }

  .menu-desktop li a {
    color: #fff5e1;
    font-weight: 700;
    font-size: 3rem;
  }

  .close {
    background-color: transparent;
    color: grey;
    font-size: 3rem;
    cursor: pointer;
    padding-left: 80%;
  }

  .img-item {
    display: none;
  }
}

.menu a:hover {
  color: orange;
  transition: color ease-in 0.5s;
  transform: scale(1.5);
}

header .logo {
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: #fff;
  display: flex;
  align-items: center;
  text-align: center;
  padding-left: 2.3rem;
}

.hamb-icon {
  background-color: transparent;
  color: #fff;
  font-size: 2.5rem;
  position: absolute;
  right: 0;
  padding-right: 2.3rem;
  cursor: pointer;
}

/* MAIN */

.main {
  background-color: #1c1a19;
  color: white;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 60rem;
  left: 0;
  padding-left: 5%;
  padding-right: 5%;
  background-image: url("Images/Main/bg-image.svg");
  background-repeat: no-repeat;
  background-position: bottom 5% right;
}

.bg-main-desk {
  display: none;
}

.main h1 {
  font-family: "Crete Round", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 5.6rem;
  line-height: 6.4rem;
  letter-spacing: 0.037rem;
  color: #ff6b00;
  margin-bottom: 0;
  padding-top: 6vh;
  animation-duration: 1s;
  animation-name: slidein;
}

.main h2 {
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 700;

  /* Consider changing the below em to rem DR */
  font-size: 3rem;
  line-height: 6rem;
  display: flex;
  align-items: center;
  animation-duration: 2s;
  animation-name: slidein;
}

.main p {
  display: block;
  font-family: Poppins, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  flex: none;
  margin-bottom: 0;
  margin-top: 0;
  animation-duration: 3s;
  animation-name: slidein;
}

.hero-container {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.social-icon {
  list-style-type: none;
  display: flex;
  align-items: center;
  padding: 0;
  width: 20rem;
  height: 4.2rem;
  transition: all 0.5s ease-out;
  animation-duration: 0.5s;
  animation-name: slidein;
}

.social-icon:hover {
  background-color: #3e4844;
  box-shadow: 0 0 35px #f27e12;
}

.social-icon img:hover {
  transition: color ease-in 0.5s;
  transform: scale(1.5);
}

/* Modals */

.detailSection {
  position: fixed;
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  top: 5%;
  width: 85%;
  margin-left: 5%;
  overflow-y: scroll;
  padding: 1.5rem;
}

.details {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  align-items: normal;
  width: 100%;
  justify-content: flex-start;
  padding-top: 1rem;
}

.modal-heading {
  width: 95%;
}

.title-modal {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.tit-mod-desk {
  display: none;
}

.title-modal h2 {
  font-size: 2.5rem;
  color: #172b4d;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  line-height: 2.75rem;
}

.close-modal-btn {
  font-size: 2.2rem;
}

.modals-tech {
  display: flex;
  list-style: none;
  gap: 8px;
  margin: 12% 0 0% 0;
}

.modals-tech li {
  padding: 1rem;
  border: 1px solid #979493;
  color: #3c3a39;
  font-size: 0.8rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: 1rem;
  display: flex;
  align-items: center;
}

.body-modal {
  display: flex;
  flex-direction: column;
}

.img-modal {
  margin: 25px 0;
}

.art-dk {
  display: none;
}

.descrip-modal article {
  font-size: 1rem;
  color: #344563;
  font-weight: 400;
  line-height: 1.5rem;
  font-family: "Inter", sans-serif;
}

.descript-btn {
  gap: 1rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 4rem;
  margin-top: 25px;
}

.descript-btn button {
  display: flex;
  width: 23rem;
  gap: 12px;
  align-items: center;
  justify-content: center;
  background-color: #ff6b00;
}

.modal-btn {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: 0.03188rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
}

/* Recent Work section */

.recent-works {
  width: 100%;
  display: grid;
  padding: 1% 5%;
  column-gap: 5px;
  row-gap: 34px;
}

.recent-works h2 {
  font-family: "Crete Round", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 3.5rem;
  line-height: 5.2rem;
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 10%;
  border-bottom: 1px solid black;
}

.img-vector {
  display: none;
}

.img-work {
  padding-top: 5rem;
  padding-bottom: 1.2rem;
  margin: 0;
}

.mult-post h3 {
  font-family: "Crete Round", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 4.4rem;
}

.mult-post p {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 2.4rem;
  padding-bottom: 1rem;
}

.tech {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  margin-bottom: 1rem;
}

.a-tech {
  color: black;
}

.tech li {
  color: black;
  border: 1px solid #8993a4;
  padding: 1rem 1.2rem;
  margin-right: 1rem;
}

.tech a:disabled {
  background: #f4f1f0;
}

.btn-works-1 {
  width: fit-content;
  background: #ff6b00;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.7rem;
  line-height: 2.4rem;
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 700;
  padding: 1.2rem;
  gap: 1rem;
}

.btn-works-1:hover {
  background: #fff5e1;
  border: 0.1rem solid #f55800;
  color: #f55800;
}

.btn-works-1:active {
  background: #e05304;
  color: white;
}

.card a:hover {
  background: #fff5e1;
  border: 0.1rem solid #f55800;
  color: #f55800;
}

.card a:active {
  background: #e05304;
  color: white;
}

.introduction a:hover {
  background: #fff5e1;
  border: 0.1rem solid #f55800;
  color: #f55800;
}

.introduction a:active {
  background: #e05304;
  color: white;
}

.card-container {
  color: white;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  padding-bottom: 3rem;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-image: url("Images/Work/Work-bg-1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: fit-content;
  gap: 2rem;
}

.card-title {
  font-family: "Crete Round", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 4.4rem;
  padding-left: 2.3rem;
  padding-top: 7rem;
}

.card-desk-title {
  display: none;
}

.card-description {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  padding-left: 2.3rem;
  align-content: center;
}

.card-lang {
  display: flex;
  gap: 1.5rem;
  padding-left: 2.3rem;
  align-items: center;
}

.card-lang li {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1rem 1.2rem;
  animation-name: lang-color-changes;
  animation-duration: 3s;
  background-color: rgb(255 255 255 / 24%);
}

@keyframes lang-color-changes {
  from {
    background-color: #f4f1f0;
  }

  to {
    background-color: #e05304;
  }
}

@keyframes lang-color-changes {
  from {
    background-color: #f4f1f0;
  }

  to {
    background-color: #e05304;
  }
}

.btn-works {
  color: white;
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.4rem;
  align-items: center;
  text-align: center;
  letter-spacing: 0.2rem;
  height: 4.5rem;
  background: #ff6b00;
  display: flex;
  justify-content: center;
}

/* ABOUT */

.about {
  background-color: #1c1a19;
  color: white;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  left: 0;
  padding-left: 5%;
  padding-bottom: 5rem;
}

.introduction {
  height: 60rem;
  background-image: url("Images/About/bg-about.png");
  background-repeat: no-repeat;
  background-position: bottom 5% right;
}

.abtme-title {
  color: #ff6b00;
  font-family: "Crete Round", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 7.2rem;
  line-height: 8.8rem;
  letter-spacing: 0.37px;
  padding-top: 15rem;
  padding-bottom: 2rem;
}

.introduction p {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  align-content: center;
  padding-bottom: 2.3rem;
  padding-right: 2.3rem;
}

.get-resume {
  width: fit-content;
  background: #ff6b00;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 1.2rem;
  gap: 1rem;
  margin-bottom: 10rem;
}

.line-dev {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-right: 2.3rem;
  padding-top: 10%;
}

/* Knowledge */

.knowledge {
  text-align: center;
  padding-top: 10rem;
}

.title-lang::before {
  content: url("Images/rhombus.svg");
}

.title-lang {
  font-family: InaiMathi, sans-serif;
  font-style: normal;
  font-weight: 700;
  align-items: center;
  font-size: 3.2rem;
  line-height: 4.4rem;
  padding-top: 1.2rem;
  padding-bottom: 2rem;
}

.title {
  font-family: Inter, serif;
  font-style: normal;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.4rem;
  padding-top: 1.2rem;
  padding-bottom: 2rem;
}

.frameworks h3::before {
  content: url("Images/Rectangle\ 56.svg");
}

.skills h3::before {
  content: url("Images/Circle.svg");
}

#items li {
  font-family: Inter, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 4.3rem;
}

/* Contact Me Section */

.contact {
  display: flex;
  flex-direction: column;
}

.art-contact {
  color: #172b4d;
  font-family: Inter, sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 4.4rem;
  text-align: center;
  display: flex;
  flex-flow: column wrap;
  margin: 4.6rem 2.3rem;
  margin-bottom: 10%;
}

form {
  margin: 2.3rem;
  width: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

form input {
  margin: 3%;
  border-top: none;
  border-right: none;
  border-left: none;
  padding-bottom: 1rem;
  border-bottom: 0.1rem solid #dbd8d7;
}

form input:focus {
  outline: none;
  background-color: white;
}

#textarea {
  padding-left: 2.3rem;
  justify-content: flex-start;
  padding-top: 1rem;
  background-color: #fbf8f7;
}

#textarea:focus {
  outline: none;
  background-color: white;
}

.btn-contact {
  background-color: #ff6b00;
  padding: 1.3rem;
  font-family: Inter, sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.03em;
  text-align: center;
  width: fit-content;
  align-items: center;
  justify-self: center;
  color: #fff;
}

.btn-div {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}

.btn-contact:hover {
  background: #fff5e1;
  border: 1px solid #f55800;
  color: #f55800;
}

.btn-contact:active {
  background: #e05304;
  color: white;
}

.contact-devider {
  margin-top: 10%;
  display: flex;
  justify-content: center;
}

.socm-contact {
  display: flex;
  justify-content: center;
}

.social-ic-2 {
  list-style-type: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 0;
  width: 200rem;
  height: 4.2rem;
  padding-top: 6%;
}

.last-devider {
  display: flex;
  justify-content: center;
  padding-top: 20%;
  padding-bottom: 3%;
}

.errorMessage {
  color: red;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  margin-top: 3rem;
}

@media (width >= 768px) {
  body {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  /* HEADER */
  .hamb-icon {
    display: none;
  }

  header {
    height: 72px;
    justify-content: space-between;
    align-items: center;
  }

  .menu {
    display: flex;
    align-items: center;
  }

  .menu-desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 7.2rem;
    margin-right: 10rem;
    gap: 2rem;
  }

  .close {
    display: none;
  }

  header .logo {
    margin-left: 13rem;
    padding-right: 50px;
  }

  .element {
    height: 7rem;
    color: #fff;
    font-family:
      Inter,
      "Franklin Gothic Medium",
      "Arial Narrow",
      Arial,
      sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 2rem;
  }

  .element:link {
    text-decoration: none;
  }

  /* MAIN DESKTOP */

  .main {
    height: 87rem;
    flex-direction: row-reverse;
    background-image: none;
    padding-right: 0;
    padding-left: 2.3rem;
    align-items: flex-start;
  }

  .hero-container {
    flex-direction: row-reverse;
    justify-content: start;
  }

  .social-icon {
    width: 4rem;
    height: auto;
    flex-direction: column;
    padding-top: 0%;
    align-self: flex-end;
  }

  .main h1 {
    max-width: 40rem;
    min-width: 30%;
    height: auto;
    font-size: 8rem;
    line-height: 8rem;
    padding-top: 15rem;
    padding-bottom: 1rem;
    color: #f55800;
  }

  .main h2 {
    width: 100%;
    max-width: 56rem;
    height: auto;
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 3.2rem;
    line-height: 3.2rem;
    padding-bottom: 0.5em;
    color: #f4f5f7;
  }

  .main p {
    width: 100%;
    height: 123px;
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #f4f5f7;
  }

  .bg-main-desk {
    display: block;
    width: 60%;
    max-width: 1100px;
    height: 750px;
    padding-left: 10%;
  }

  /* Modal */

  .details {
    margin-left: 5rem;
    bottom: 5%;
  }

  .modal-heading {
    display: flex;
    flex-direction: column;
    justify-content: start;
    margin-bottom: 2rem;
  }

  .title-modal {
    justify-content: space-between;
  }

  .tit-mod-desk {
    display: block;
  }

  .titl-mod-mob {
    display: none;
  }

  .modals-tech {
    margin: 0;
    margin-top: 1rem;
  }

  .body-modal {
    margin-top: 1rem;
    flex-direction: row;
    align-items: stretch;
  }

  .img-modal {
    margin-top: 0;
    width: 50%;
  }

  .descrip-modal {
    width: 43%;
    margin: 1rem;
    padding-left: 2%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .descrip-modal article {
    color: var(--neutrals-n-600, #344563);
    font-size: 1.2rem;
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
  }

  .art-dk {
    display: block;
    padding-top: 2rem;
  }

  .descript-btn {
    display: flex;
    justify-content: flex-start;
    height: 4rem;
    margin-top: 0;
    margin-bottom: 2rem;
  }

  .descript-btn button {
    width: auto;
    padding: 1rem;
  }

  /* Recent Work Section */

  .recent-works {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8%;
    margin-left: 8%;
    margin-bottom: 0;
    padding: 0;
  }

  .recent-w-title {
    display: flex;
    width: 100%;
    align-items: center;
    padding-bottom: 5rem;
  }

  .recent-w-title img {
    display: flex;
    height: 0.1rem;
    width: 60%;
    align-self: center;
  }

  .recent-w-title h2 {
    width: 30%;
    height: 4rem;
    justify-content: flex-start;
    text-align: start;
    align-items: center;
    border: none;
    padding: 0;
    padding-right: 3rem;
    margin-bottom: 2rem;
    font-family:
      "Crete Round",
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      "Open Sans",
      "Helvetica Neue",
      sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 2em;
    line-height: 5.2rem;
  }

  .img-work {
    width: 45%;
    min-width: 30%;
    height: auto;
    min-height: 50rem;
    padding: 0%;
  }

  .mult-post {
    width: 40%;
    height: auto;
    display: flex;
    flex-direction: column;
    text-align: start;
    padding-left: 2%;
  }

  .mult-post p {
    width: 100%;
    max-width: 448px;
    height: auto;
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #091e42;
    padding-bottom: 3%;
  }

  .tech {
    height: auto;
    padding-top: 4%;
    padding-bottom: 4%;
  }

  .tech-btn a {
    width: 43px;
    height: 20px;
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: #091e42;
  }

  .container {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }

  /* Cards section */
  .card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    padding-top: 3%;
    padding-bottom: 10%;
  }

  .card {
    width: 100%;
    height: auto;
    min-height: 500px;
  }

  .card-title {
    display: none;
  }

  .card-description {
    padding-left: 0%;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .card-lang {
    padding-left: 0%;
  }

  .card-1 {
    background-image: url("Images/Work/Desktop/c1.png");
  }

  .card-1 .btn-works {
    display: flex;
    height: 6rem;
  }

  .card-1 article {
    display: none;
  }

  .card-1 li {
    display: none;
  }

  .card-2,
  .card-5 {
    background-image: url("Images/Work/Desktop/Healthcare-bk.png");
    background-repeat: no-repeat;
    justify-content: end;
    padding: 5%;
  }

  .card-2 .card-desk-title {
    display: flex;
    width: 100%;
    height: 81px;
    font-family: "Crete Round", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 44px;
    color: #fff;
  }

  .card-5 .card-desk-title {
    display: flex;
    width: 100%;
    height: 81px;
    font-family: "Crete Round", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 44px;
    color: #fff;
  }

  .card-3,
  .card-6 {
    background-image: url("Images/Work/Desktop/WebPortfolio-bg.png");
    justify-content: end;
    padding: 5%;
  }

  .card-3 .card-desk-title {
    display: flex;
    font-family: "Crete Round", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 44px;
    color: #fff;
  }

  .card-6 .card-desk-title {
    display: flex;
    font-family: "Crete Round", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 44px;
    color: #fff;
  }

  .card-4 .card-title {
    display: flex;
    font-family: "Crete Round", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 44px;
    color: #fff;
    padding-left: 0%;
  }

  .card-4 {
    justify-content: end;
    padding: 5%;
  }

  /* About me Section */

  .about {
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #262626;
    padding-bottom: 5%;
  }

  .abtme-title {
    font-size: 7.2rem;
    line-height: 8.2rem;
    color: #f55800;
  }

  .introduction {
    background-image: url("Images/About/desktop-about.png");
    background-repeat: no-repeat;
    background-position: bottom 10rem right;
    background-size: 66rem 35rem;
  }

  .present-ab {
    width: 40%;
  }

  .present-ab p {
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 3.2rem;
    padding-bottom: 8%;
  }

  .get-resume {
    width: fit-content;
    height: auto;
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 2.4rem;
    margin-bottom: 14rem;
  }

  .line-dev {
    display: none;
  }

  .knowledge {
    color: white;
    display: flex;
    justify-content: space-between;
    width: 90%;
    height: auto;
    column-gap: 1rem;
    padding-top: 10rem;
    margin-top: 4rem;
    border-top: 0.1rem solid #fff;
  }

  .lang {
    text-align: start;
  }

  .frameworks {
    text-align: start;
  }

  .skills {
    text-align: start;
  }

  .knowledge li {
    margin-bottom: 1.5rem;
  }

  .items {
    font-family:
      Inter,
      "Franklin Gothic Medium",
      "Arial Narrow",
      Arial,
      sans-serif;
    font-size: 2.2rem;
    line-height: 4.3rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .contact {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .contact-devider {
    display: none;
  }

  .contact.container {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .art-contact {
    display: flex;
    justify-content: flex-start;
    width: 50%;
    margin: 0;
    padding-right: 20px;
    font-size: 4rem;
    line-height: 52px;
    align-items: center;
    color: #172b4d;
  }

  .contact-container-2 {
    display: flex;
    justify-content: center;
    margin: 80px;
  }

  form {
    width: 100%;
    justify-content: center;
    margin: 0;
    padding: 0%;
    margin-bottom: 10rem;
    padding-left: 5px;
  }

  #textarea {
    padding-left: 2%;
  }

  .contact-devider,
  .last-devider {
    display: none;
  }

  .btn-div {
    padding: 2rem;
    margin-top: 2rem;
    padding-left: 0;
    align-items: flex-start;
  }

  .btn-contact {
    padding: 2rem;
  }

  footer {
    display: flex;
    justify-content: center;
    border-top: black 1px solid;
  }

  .social-ic-2 img:hover {
    transition: color ease-in 0.5s;
    transform: scale(1.5);
  }
}