/* ----- VARIABLES ----- */
:root {
  --color-p-headers: #7d73fc;
  --color-s-headers: #9490ff;
  --color-white: white;
  --pfont-family: "roboto", sans-serif;
  --sfont-family: "Inter", sans-serif;
  --border-li-card: 2px solid #555;
}

/* ----- Elements Selectors ----- */
body {
  background-color: #191765;
  margin: 0;
  border: 0;
  width: 100%;
  overflow-x: hidden;
}

h1 {
  font-style: normal;
  font-size: 43px;
  color: var(--color-p-headers);
  opacity: 1;
}

h2 {
  font-style: normal;
  font-size: 40px;
  line-height: 52px;
  color: var(--color-s-headers);
  text-align: left;
  margin-left: 1em;
  margin-top: 2.5em;
}

h3 {
  margin: 0;
  font-size: 20px;
  font-style: normal;
  line-height: 32px;
  letter-spacing: 0;
  text-align: center;
  color: #a2a3ae;
}

h4 {
  font-size: 32px;
  line-height: 44px;
  color: #edecff;
  margin: 12px 0;
}

h6 {
  font-style: normal;
  font-size: 12px;
  line-height: 24px;
  color: var(--color-s-headers);
}

hr {
  background-color: #646369;
  border: 1px solid #646369;
  width: 80vw;
}

li {
  margin-bottom: 0.5em;
}

input {
  width: 80vw;
  height: 3em;
}

textarea {
  width: 80vw;
  height: 10em;
}

/* -----Class Selectors----- */

/* -----generic styles----- */
.pff-700 {
  font-family: var(--pfont-family);
  font-weight: 700;
}

.pff-500 {
  font-family: var(--pfont-family);
  font-weight: 500;
}

.pff-400 {
  font-family: var(--pfont-family);
  font-weight: 400;
}

.sff-500 {
  font-family: var(--sfont-family);
  font-weight: 500;
}

.sff-400 {
  font-family: var(--sfont-family);
  font-weight: 400;
}

.container {
  display: flex;
}

.c-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* -----generic styles----- */

.h-block {
  width: 50%;
  margin-top: 10px;
}

.tx-center {
  text-align: center;
}

.h2-style {
  font-size: 18px;
  line-height: 16px;
  color: #edecff;
  margin: 15px 15px;
}

.b-hamburger {
  background-color: #edecff;
  border: 1px solid #edecff;
  width: 30px;
  margin: 5px;
}

.fd-rr {
  flex-direction: row-reverse;
}

.mr {
  margin-right: 7.5%;
}

.ul-documentation {
  list-style: none;
  font-style: normal;
  font-size: 15px;
  line-height: 24px;
  color: #f5f5ff;
  text-align: left;
}

.container-wrap {
  flex-wrap: wrap;
  padding: 5%;
}

.ai-start {
  align-items: start;
  width: 45%;
  padding-left: 5%;
}

.ul-base {
  padding: 0;
}

.p-1e {
  padding: 1em;
  background-image: url(img/ellipse18.svg);
  background-repeat: no-repeat;
  background-position: -5% -5%;
}

.icons {
  width: 20px;
  margin: 3rem 1rem;
}

.w-style {
  font-style: normal;
  font-size: 20px;
  line-height: 32px;
  color: #a2a3ae;
}

.j-content {
  display: flex;
  justify-content: center;
}

.grid-container {
  display: grid;
  margin-left: 0.5em;
  grid-template-areas:
    "image image image image"
    "header header header header"
    "paragraph paragraph paragraph paragraph"
    "css html bootstrap ruby"
    "buttom buttom buttom buttom";
}

.ul-card {
  list-style: none;
  padding: 0.5rem;
}

.li-card {
  display: inline;
}

.a-card {
  text-decoration: none;
  font-style: normal;
  font-size: 15px;
  line-height: 20px;
  color: #fff;
  padding: 0.5em 1.2em;
}

.g-item1 {
  grid-area: image;
  margin-top: 3em;
  margin-left: 2em;
  width: 85vw;
}

.g-item2 {
  grid-area: header;
  font-style: normal;
  font-size: 32px;
  line-height: 44px;
  color: #fff;
  margin-left: 1em;
  margin-bottom: 2em;
}

.g-item3 {
  grid-area: paragraph;
  font-style: normal;
  font-size: 20px;
  line-height: 28px;
  color: #dcdce8;
  margin-left: 1.5em;
  margin-top: 2em;
  width: 90vw;
}

.g-item4 {
  grid-area: css;
  border-right: var(--border-li-card);
}

.g-item5 {
  grid-area: html;
  border-right: var(--border-li-card);
}

.g-item6 {
  grid-area: bootdtrap;
  border-right: var(--border-li-card);
}

.g-item7 {
  grid-area: ruby;
}

.g-item8 {
  grid-area: buttom;
  font-style: normal;
  font-size: 12px;
  line-height: 24px;
  color: #edecff;
  margin: 2.5em 2em 0 2.5em;
  padding: 1em;
  background-color: #574bf9;
  border-width: 0;
}

.bc-small {
  width: 68px;
  height: 68px;
  left: 339px;
  top: 650px;
}

.grid-container-2 {
  display: grid;
  grid-template-areas:
    "image image image image"
    "header header header header"
    "paragraph paragraph paragraph paragraph";
  margin-left: 0.5em;
  grid-template-rows: auto auto auto;
}

.g-item9 {
  grid-area: image;
  margin-top: 3em;
  margin-left: 1.5em;
  width: 85vw;
}

.g-item10 {
  grid-area: header;
  font-style: normal;
  font-size: 32px;
  line-height: 44px;
  color: #fff;
  margin-left: 1em;
}

.g-item11 {
  grid-area: paragraph;
  font-style: normal;
  font-size: 20px;
  line-height: 28px;
  color: #dcdce8;
  margin-left: 1.5em;
  margin-top: 1em;
}

.mr-b {
  margin-bottom: 2em;
}

.elipse20 {
  background-image: url(img/ellipse20.svg);
  background-repeat: no-repeat;
  background-position: left 50%;
}

.elipse21 {
  background-image: url(img/ellipse21.svg);
  background-repeat: no-repeat;
  background-position: right 40%;
}

.elipse22 {
  background-image: url(img/ellipse22.svg);
  background-repeat: no-repeat;
  background-position: left 45%;
}

.elipse23 {
  background-image: url(img/ellipse23.svg);
  background-repeat: no-repeat;
  background-position: right;
}

.non-style {
  list-style: none;
  padding: 0;
}

.h-form {
  font-family: var(--pfont-family);
  font-weight: 500;
  font-style: normal;
  font-size: 32px;
  line-height: 44px;
  text-align: center;
  padding-top: 3em;
  padding-bottom: 1em;
  color: #9390ff;
}

.h-form::before {
  content: "CONTACT US";
}

.p-form {
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #f5f5ff;
  margin: 0 2em;
}

.e-mail {
  font-style: normal;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  color: #ebebff;
}

.li-form {
  padding: 0.5em 0;
}

.mr-s {
  margin: 0 auto;
  font-family: var(--pfont-family);
  font-weight: 500;
}

.mr-s::before {
  content: "See Project";
}

.mr-s:hover {
  background-color: #35aeef;
}

.centering-s {
  text-align: center;
  width: 80vw;
}

.email-field {
  font-style: normal;
  font-size: 15px;
  line-height: 24px;
  background-color: #f7f3ff;
  border: 1px solid #9490ff;
}

.email-field::placeholder {
  color: #191765;
}

.text-field {
  font-style: normal;
  font-size: 15px;
  line-height: 24px;
}

.text-field::placeholder {
  color: #81818c;
}

.msg-field {
  font-style: normal;
  font-size: 15px;
  line-height: 24px;
}

.msg-field::placeholder {
  color: black;
}

.hr-work {
  margin-left: 0;
}

/* Id Selectors */
#p-headline {
  font-size: 20px;
  line-height: 28px;
  color: #c8c8d4;
  width: 327px;
  height: 170px;
}

#documentation {
  background-image: url(img/ellipse19.svg);
  background-repeat: no-repeat;
  background-position: right top;
}

#arrow-down {
  padding: 0 1em;
}

#arrow-down1 {
  padding: 0 1em;
}

#form-section {
  border-bottom: 2px solid #3a3837;
  padding-bottom: 4em;
}

.fo-style {
  text-align: center;
}

/* -----Hidden elements----- */
.hidden-el {
  display: none;
}

/* -----Animations and Transitions----- */
.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* -----Modal Style ----- */
.otra-clase {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 1.5em;
  color: #edecff;
  background-color: #191765;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding-top: 3em;
  list-style: none;
  background-image: url(img/ellipses-mobile-menu1.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}

.li-desktop {
  align-self: start;
  padding: 0.5em 0;
}

.mg-t {
  margin-top: 1.5em;
}

.close-icon {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 0.6em;
  padding-right: 1em;
}

.arrow-right-style {
  position: absolute;
  right: 12%;
  margin-top: 0.5em;
  padding-right: 1em;
}

.a-menu {
  text-decoration: none;
  color: #edecff;
}

.backdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #191765;
  background-image: url('img/modal-circles.svg');
  background-repeat: no-repeat;
  background-size: cover;
  overflow: scroll;
}

.modal {
  width: 80%;
  z-index: 200;
  background: rgba(255, 255, 255, 0.16);
  padding: 0.5rem;
  transition: 1s;
  margin: 1em auto;
  border: solid #fff 1px;
  overflow: scroll;
}

.image-popup {
  display: flex;
  justify-content: center;
  width: 100%;
}

.paragraph-popup {
  text-align: center;
  width: 90%;
  margin-left: 1em;
}

.inner-close-icon {
  margin: 0;
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 7.5%;
  right: 15%;
}

.inner-title {
  font-size: 1.25em;
  margin-bottom: 1em;
  margin-top: 0.5em;
}

.inner-margin-buttom {
  margin-top: 0;
  margin-bottom: 1em;
  padding: 0;
  width: auto;
  height: 7.5vh;
  padding-bottom: 5em;
}

.inner-icon {
  padding-top: 1em;
  margin-left: 1em;
}

.inner-ul {
  justify-content: center;
}

.images {
  width: 70vw;
}

/* ----- Validation Style ----- */
.error {
  display: block;
  text-align: center;
  margin-top: 2em;
  font-family: var(--sfont-family);
  color: #ff0;
}

/* -----Desktop media query Version----- */
@media screen and (min-width: 992px) {
  .resp-hidden {
    display: none;
  }

  .b-hamburger {
    display: none;
  }

  .nav-desktop {
    display: flex;
    align-items: center;
    text-align: center;
    list-style: none;
    flex-direction: row !important;
    justify-content: end;
  }

  .li-desktop {
    font-style: normal;
    font-size: 15px;
    line-height: 20px;
    color: #fff;
    margin: 0 1em;
  }

  .e-mail-icon-style {
    padding-top: 4px;
  }

  .ul-documentation {
    font-size: 14.2px;
    line-height: 28px;
    color: #fff;
  }

  #documentation {
    justify-content: center;
    padding: 0;
    padding-left: 5em;
    background-image: none;
  }

  #p-headline {
    width: 480px;
    margin-top: 5em;
    margin-bottom: -2em;
  }

  .ai-start {
    width: 10%;
    padding-left: 0;
    padding-right: 5%;
  }

  hr {
    width: 480px;
  }

  .h6-documentation {
    font-size: 18px;
    line-height: 29px;
    margin-bottom: 1em;
  }

  .w-class {
    flex-direction: row;
    justify-content: space-around;
    padding-top: 5em;
    padding-bottom: 10em;
  }

  .p-work {
    display: inline-block;
  }

  h2 {
    padding-left: 0.3em;
  }

  .hr-work {
    width: 90vw;
  }

  .g-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto auto auto auto;
  }

  .g-item1 {
    grid-area: 1 / 1 / 5 / 2;
    width: 690px;
    height: 450px;
    font-family: var(--pfont-family);
    font-weight: 700;
  }

  .g-item2 {
    grid-area: 1 / 2 / 2 / 6;
    margin-top: 3.5em;
    margin-bottom: 0;
  }

  .g-item3 {
    grid-area: 2 / 2 / 3 / 6;
    width: 35vw;
  }

  .g-item12 {
    grid-area: 3 / 2 / 4 / 6;
    border-right: var(--border-li-card);
  }

  .ul-card {
    width: 35vw;
  }

  .g-item8 {
    grid-area: 4 / 2 / 5 / 6;
    width: 100px;
    height: 50px;
    padding: 0;
  }

  .g-container-r {
    display: grid;
    margin-left: 0.5em;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto auto auto auto;
  }

  .g-item1-r {
    grid-area: 1 / 2 / 5 / 6;
    width: 690px;
    height: 450px;
    font-family: var(--pfont-family);
    font-weight: 700;
    margin-left: 3.5em;
  }

  .g-item2-r {
    grid-area: 1 / 1 / 2 / 2;
    margin-top: 3em;
    margin-bottom: 0;
    margin-left: 2em;
  }

  .g-item3-r {
    grid-area: 2 / 1 / 3 / 2;
    width: 35vw;
    margin-left: 3em;
  }

  .g-item12-r {
    grid-area: 3 / 1 / 4 / 2;
    margin-left: 3em;
  }

  .g-item8-r {
    grid-area: 4 / 1 / 5 / 2;
    width: 100px;
    height: 50px;
    margin-left: 5em;
  }

  .e-mail {
    font-style: normal;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #ebebff;
    height: 29px;
    margin-top: 2.4em;
    margin-left: 2em;
  }

  #form-section {
    margin-top: 10em;
  }

  .p-form {
    width: 50vw;
    margin-left: 1.8em;
  }

  .email-field {
    width: 50vw;
    margin-left: 12.5em;
  }

  .text-field {
    width: 50vw;
    margin-left: 12.5em;
  }

  .msg-field {
    width: 50vw;
    margin-left: 12.5em;
  }

  .h-form::before {
    content: "Let's chat!";
    font-size: 1.5em;
  }

  .mr-s {
    font-family: var(--pfont-family);
    font-weight: 500;
    width: 10em;
    font-size: 20px;
    letter-spacing: 0.03em;
  }

  .mr-s::before {
    content: "SEND";
  }

  .p-1e {
    padding: 1em;
    background-image: url(img/circle1.svg);
    background-repeat: no-repeat;
    background-position: 5% 50%;
  }

  body {
    background-image: url(img/circle2.svg);
    background-repeat: no-repeat;
    background-position: right 9.5%;
  }

  .elipse20 {
    background-image: url(img/ellipse120.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
  }

  .elipse21 {
    background-image: url(img/ellipse121.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
  }

  .elipse22 {
    background-image: url(img/ellipse122.svg);
    background-repeat: no-repeat;
    background-position: left 45%;
  }

  .elipse23 {
    background-image: url(img/ellipse123.svg);
    background-repeat: no-repeat;
    background-position: right top;
  }

  .backdrop,
  .modal {
    overflow: hidden;
  }

  .modal {
    width: 60vw;
  }

  .popup-buttons {
    flex-direction: row;
    justify-content: center;
  }

  .inner-ul {
    margin-left: auto;
    margin-right: auto;
  }

  .images {
    content: url(img/image-modal-desk.svg);
    width: 90%;
  }

  .paragraph-popup {
    font-family: var(--pfont-family);
    font-size: 0.8em;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7em;
  }

  .inner-title {
    margin-top: 0;
  }

  .inner-margin-buttom {
    width: auto;
  }

  .inner-icon {
    width: 10%;
    padding-top: 0;
  }

  .inner-close-icon {
    width: 0.6em;
    top: 5%;
    right: 20%;
  }

  .fo-style {
    display: flex;
    justify-content: center;
  }
}