@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #e5e5e5;
}

.parent-container-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  width: 100%;
}


/* header {
  width: 100%;
  height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #fff;
} */

header {
  /* order: 0; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 48px;
  border-bottom: 1px solid #6070ff;
  box-shadow: 0 0 10px #6070ff;
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 500;
}

.nav-list-mobile-container {
  display: none;
  position: fixed;
  top: 0;
  background-color: #6070ff;
  backdrop-filter: blur(9px);
  width: 100%;
  height: 100vh;
  mix-blend-mode: multiply;
  padding-top: 62px;
}

.nav-cross-icon {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 49px;
  right: 40px;
}

.nav-list-mobile {
  position: absolute;
  top: 96px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.nav-link-mobile {
  font-weight: 600;
  font-size: 32px;
  line-height: 44px;
  color: #fff;
}

@media (max-width: 768px) {
  .nav-list-desktop {
    display: none;
  }
}

.logo {
  font-weight: 700;
  font-size: 28px;
  line-height: 20px;
  color: #6070ff;
  position: relative;
  left: 24px;
}

.hamburger-btn {
  width: 24px;
  height: 24px;
  position: relative;
  right: 35px;
}

.intro-page {
  min-height: 100vh;
  padding: 114px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  background-color: #fff;
  border-bottom-left-radius: 100px;
  margin-top: -1px;
  background-image: url('./Images/header-shapes mobile@2x.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.hey-i-am {
  line-height: 0;
}

.intro-heading {
  font-weight: 700;
  font-size: 40px;
  line-height: 52px;
  color: #172b4d;
  animation-name: slidein;
  animation-duration: 3s;
}

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

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

.intro-description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #344563;
}

.lets-connect-div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.connect-heading {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #7f8cff;
}

.social-icons-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.intro-twitter {
  width: 19.99px;
  height: 19.96px;
}

.intro-linkedin {
  width: 12.71px;
  height: 16.97px;
}

.medium {
  width: 24px;
  height: 24px;
}

.intro-github {
  width: 17.99px;
  height: 20px;
}

.intro-vector {
  width: 14.17px;
  height: 20px;
}

/* ======================== Works Page ======================== */
.works-page {
  background-color: #e5e5e5;
  width: 100%;
  height: fit-content;
  padding: 114px 24px;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-items: center;
  gap: 88px;
}

.project-work-card {
  border: 1px solid #dfe1e6;
  border-radius: 16px;
  background-color: #fff;
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.work-project-image {
  width: 50%;
  height: 295px;
  border-radius: 10px;
  transition: width 2s;
}

.work-project-image:hover {
  width: 40%;
}

.work-project-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.work-project-details-heading {
  font-weight: 700;
  font-size: 32px;
  line-height: 44px;
  color: #172b4d;
}

.work-project-highlights {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.client-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  color: #344563;
}

.dot {
  width: 8px;
  height: 8px;
}

.your-role,
.project-year {
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  color: #7a869a;
}

.work-project-description {
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #344563;
}

.project-languages-tags {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.tech {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #6070ff;
  background: #ebebff;
  border-radius: 8px;
  padding: 4px 12px;
  height: 24px;
  width: fit-content;
}

@media (max-width: 768px) {
  .ruby-on-rails {
    display: none;
  }
}

.css {
  width: 45px;
}

.javascript {
  width: 89px;
}

.project-link-button {
  width: 124px;
  height: 48px;
  padding: 12px;
  margin: 12px 0;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  border: 1px solid #6070ff;
  color: #396df2;
  background-color: #fff;
}

/* ======================== Popup ======================== */
.popup-works {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 88px;
  height: fit-content;
}

.popup-card {
  z-index: 100;
  position: fixed;
  top: 0;
  background-color: #fff;
  border: 1px solid #ebecf0;
  box-shadow: 0 0 0 200px rgb(193, 199, 208, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 16px;
  width: 90%;
  height: 90%;
  margin-top: 30px;
  justify-self: center;
  align-self: center;
  display: none;
  flex-direction: column;
  gap: 28px;
  overflow-y: auto;
}

.popup-work-project-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.popup-heading-close-button {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.popup-work-project-details-heading {
  font-weight: 700;
  font-size: 32px;
  line-height: 44px;
  color: #172b4d;
}

.popup-cross-button {
  width: 24px;
  height: 24px;
  position: relative;
  right: 8px;
}

.popup-work-project-highlights {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.popup-client-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  color: #344563;
}

.popup-your-role,
.popup-project-year {
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  color: #7a869a;
}

.popup-work-project-image {
  width: 100%;
}

.popup-description-tags-buttons {
  width: 100%;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 12px;
}

.popup-work-project-description {
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #344563;
}

.popup-tags-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.popup-tags {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.popup-technology {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #6070ff;
  background: #ebebff;
  border-radius: 8px;
  padding: 4px 12px;
  height: 24px;
}

.popup-html {
  width: 53px;
}

.popup-css {
  width: 45px;
}

.popup-javascript {
  width: 89px;
}

.popup-github {
  width: 66px;
}

.popup-ruby {
  width: 53px;
}

.popup-bootstraps {
  width: 93px;
}

.popup-buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 4px 9px;
}

.popup-see-live-button,
.popup-see-source-button {
  border: 1px solid #6070ff;
  border-radius: 8px;
  color: #396df2;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  width: 136px;
  height: 38px;
}

/* ======================== About Page ======================== */

.about-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 114px 24px;
  gap: 24px;
  width: 100%;
  height: 1400px;
  border-top-right-radius: 100px;
  background-color: #fff;
}

.about-description-and-links-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 12px;
  width: 100%;
  height: fit-content;
}

.about-heading {
  font-weight: 700;
  font-size: 40px;
  line-height: 52px;
  color: #172b4d;
}

.about-description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #344563;
}

.connect-heading-about {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #7f8cff;
}

.social-icons-container-about {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding-left: 8px;
  padding-right: 8px;
}

.social-icons-about {
  width: 24px;
  height: 24px;
}

.medium-about {
  width: 24px;
  height: 24px;
}

.about-resume-button {
  width: 162px;
  height: 48px;
  border: 1px solid #6070ff;
  border-radius: 8px;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  color: #396df2;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-knowledge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  width: 100%;
}

.about-languages-list-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  width: 100%;
}

.languages-dropdown-menu,
.frameworks-dropdown-menu,
.skills-dropdown-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 72px;
}

.about-languages-list-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.languages-heading,
.frameworks-heading,
.skills-heading {
  position: relative;
  left: 12px;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #000;
  width: 100%;
}

.down-arrow,
.right-arrow {
  position: relative;
  right: 24px;
  width: 24;
  height: 24;
}

.javascript-container,
.html-container,
.css-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* gap: 16px; */
  padding: 9px 12px;
  width: 100%;
  height: 66.72px;
  background: #f7f7f9;
  border-radius: 8px;
}

.ts-frame {
  height: 48px;
  width: 48px;
}

.separator-bar {
  height: 1px;
  width: 100%;
  padding: 0 24px;
}

/* ======================== Contact Page ======================== */
.contact-form-page {
  position: relative;
  background: #6070ff;
  padding: 103px 24px 45px 24px;
  border-top-left-radius: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 790px;
  margin-top: -138px;
}

.contact-form-heading {
  font-weight: 700;
  font-size: 40px;
  line-height: 52px;
  color: #fff;
  text-align: center;
}

.contact-form-description {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  color: #ebebff;
  margin-top: 12px;
  margin-bottom: 20px;
}

form {
  list-style: none;
  z-index: 10;
}

.form-fields {
  display: flex;
  flex-direction: column;
  width: 327px;
}

.hidden-label {
  visibility: hidden;
}

input {
  width: 100%;
  height: 48px;
  background: #fff;
  border: 1px solid #cfd8dc;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  color: #b3bac5;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  padding: 15px;
}

textarea {
  width: 100%;
  height: 140px;
  background: #fff;
  border: 1px solid #cfd8dc;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  color: #b3bac5;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  padding: 15px;
}

.submit-button {
  width: 140px;
  height: 48px;
  margin: 10px;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  color: #6070ff;
  border-radius: 8px;
  border-color: #fff;
  font-family: 'Poppins', sans-serif;
  background-color: #fff;
}

.email-case-error {
  font-weight: 900;
  color: rgb(56, 39, 41);
  display: none;
}

.ellipse-image {
  position: absolute;
  right: 0;
  top: 48.75px;
}

.up-rectangle {
  position: absolute;
  right: 0;
  top: 21px;
}

.blue-circle {
  position: absolute;
  left: 40%;
  top: 55px;
}

.down-rectangle {
  position: absolute;
  right: 7%;
  top: 676.27px;
}

.white-circle {
  position: absolute;
  right: 15%;
  top: 705.27px;
}

/* ======================== Desktop Version ======================== */
@media (min-width: 768px) {
  /* header {
    height: 72px;
    justify-content: center;
  } */

  header {
    align-items: center;
  }

  .hamburger-btn {
    display: none;
  }

  .nav-list-desktop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    right: 10%;
  }

  .nav-portfolio,
  .nav-about,
  .nav-contact {
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: #344563;
    padding: 2px 4px;
    border-radius: 8px;
    transition: background-color 2s, font-size 1s;
  }

  .nav-portfolio:hover,
  .nav-about:hover,
  .nav-contact:hover {
    background-color: yellow;
    font-size: 20px;
  }

  .logo {
    left: 10%;
  }

  .intro-page {
    padding-left: 20%;
    padding-right: 20%;
    height: 646px;
    background-image: url('./Images/Header\ bg\ 3.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .intro-heading {
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    color: #091e42;
  }

  .tablet-heading {
    display: none;
  }

  .intro-description {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #344563;
  }

  .project-work-card {
    flex-direction: row;
  }

  .project-work-card:nth-of-type(even) {
    flex-direction: row-reverse;
  }

  .work-project-image {
    height: 90%;
  }

  .work-project-details {
    align-self: flex-start;
    margin-top: 40px;
  }

  .ruby-on-rails {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #6070ff;
    background: #ebebff;
    border-radius: 8px;
    padding: 4px 12px;
    height: 24px;
    width: 105px;
  }

  .work-project-details-heading {
    display: block;
    font-weight: 700;
    font-size: 40px;
    line-height: 52px;
    color: #091e42;
  }

  .client-name {
    display: block;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #344563;
  }

  .your-role {
    display: block;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #6b778c;
  }

  .project-year {
    display: block;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #6b778c;
  }

  .work-project-description {
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #344563;
  }

  .project-link-button:hover {
    background: #6070ff;
    box-shadow: px 8px 16px rgba(64, 83, 252, 0.24);
    color: #fff;
  }

  .project-link-button:active {
    background: #2230d2;
  }

  .popup-works {
    left: 670px;
  }

  .popup-card {
    padding: 24px;
    width: 80vw;
    height: 93%;
    gap: 12px;
    margin-top: 20px;
    overflow: auto;
  }

  .popup-work-project-details-heading {
    font-weight: 700;
    font-size: 40px;
    line-height: 52px;
    color: #091e42;
  }

  .popup-client-name {
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: #344563;
  }

  .popup-your-role,
  .popup-project-year {
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: #7a869a;
  }

  .popup-description-tags-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: 63% 35%;
    column-gap: 2%;
    margin-top: 31px;
  }

  .popup-work-project-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #344563;
  }

  .popup-first-three-tags,
  .popup-last-three-tags {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
  }

  .popup-buttons {
    padding-left: 5px;
    padding-right: 5px;
  }

  .popup-see-live-button,
  .popup-see-source-button {
    width: 142px;
    height: 40px;
  }

  .about-page {
    display: grid;
    grid-template-columns: 40% 60%;
    column-gap: 25px;
    padding: 10% 10%;
    height: 824px;
  }

  .about-description-and-links-container,
  .about-knowledge-container {
    margin-top: -200px;
  }

  .about-languages-list-details {
    flex-direction: row;
  }

  .javascript-container,
  .html-container,
  .css-container {
    flex-direction: column;
    align-items: flex-start;
    width: 110px;
    height: 110px;
  }


  .ts-frame {
    height: 48px;
    width: 48px;
  }

  .contact-form-page {
    height: fit-content;
    margin-top: -170px;
  }

  .contact-form-background {
    display: block;
    background-image: url("../Images/desktopcontactformbackgroundshapes.svg");
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -400;
    left: 0;
    width: 100%;
    /* height: 700px; */
  }

  .contact-form-description {
    width: 569px;
  }

  .form-fields {
    width: 447px;
  }

  .submit-button-container {
    text-align: center;
  }

  .ellipse-image,
  .up-rectangle,
  .blue-circle,
  .down-rectangle,
  .white-circle {
    display: none;
  }
}