/*=============== GOOGLE FONTS ==================*/
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Lora:wght@500;600&family=Poppins:wght@400;500&display=swap');

/*=============== CSS VARIABLES =================*/
:root {
  --header-height: 3.5rem;

  /*=========== COLORS ============*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --main-color: hsl(220, 25%, 97%);
  --secundary-color: hsl(230, 75%, 62%);
  --title-color: hsl(222, 25%, 16%);
  --text-color: hsl(222, 12%, 38%);
  --text-color-light: hsl(222, 10%, 46%);
  --body-color: hsla(222, 47%, 8%, .5);
  --card-color: hsl(222, 47%, 14%);
  --shadow-color: hsl(222, 47%, 14%, .35);
  --white-text-color: hsl(0, 0%, 100%);

  /* Particle Bg Colors */
  --particle-color: hsl(220, 25%, 97%);
  --lineParticle-color: hsl(230, 75%, 62%);

  /*===== FONT AND TYPOGRAPH =====*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Poppins', sans-serif;
  --title-font: 'Lora', serif;
  --subtitle-font: 'Dancing Script', cursive;
  --biggest-font-size: 2.25rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*======== FONT WEIGHT ========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Z INDEX ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

@media screen and (min-width: 1024px) {
  :root {
    --biggest-font-size: 4rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--main-color);
  color: var(--text-color);
  overflow-x: hidden;
  z-index: 99;
  cursor: default
}

h1,
h2,
h3 {
  color: var(--title-color);
  font-weight: var(--font-medium);
}

img {
  max-width: 225px;
  height: auto;
}

/*==================== THEME =====================*/
/* Particles bg config */
#particles-js {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
}

.nav__buttons {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

/*============= REUSABLE CSS CLASSES ============*/
.container {
  max-width: 1024px;
  margin-inline: 1.5rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding-block: 5rem 1rem;
}

.section__title {
  color: var(--text-color);
  font-size: var(--h1-font-size);
  font-family: var(--title-font);
  margin-bottom: 1.5rem;
}

.section__subtitle {
  display: block;
  font-size: var(--h2-font-size);
  font-family: var(--subtitle-font);
  color: var(--text-color-light);
  margin-bottom: .5rem;
}

.section__title,
.section__subtitle {
  text-align: center;
}

.special {
  text-align: initial;
}

.main {
  overflow: hidden;
  /* For animation ScollReal*/
}

/*================= HEADER & NAV ================*/

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  transition: box-shadow .3s, background .4s;
}

.nav {
  position: relative;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo,
.nav__toggle,
.nav__close {
  display: flex;
  color: var(--title-color);
}

.nav__logo {
  align-items: center;
  column-gap: .5rem;
  font-family: var(--title-font);
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  transition: color .3s;
}

.nav__logo:hover {
  color: var(--secundary-color);
}

.nav__toggle {
  font-size: 1.25rem;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    top: -100%;
    left: 0;
    background-color: hsla(0, 0%, 5%, 0.97);
    width: 100%;
    box-shadow: 0 8px 20px hsla(19, 64%, 24%, .1);
    padding-block: 3.5rem;
    transition: top .4s;
  }
}

.nav__list {
  display: flex;
  flex-direction: column;
  text-align: center;
  row-gap: 2rem;
}

.nav__link {
  color: var(--title-color);
  font-weight: var(--font-medium);
  transition: color .4s;
}

.nav__link:hover {
  color: var(--secundary-color);
}

.nav__close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Show menu */
.show-menu {
  top: 0;
}

/* Change background header */
.bg-header {
  box-shadow: 0 2px 8px hsla(19, 64%, 24%, .1);
}

/* Active link */
.active-link {
  color: var(--secundary-color);
}

/*===================== MAIN ====================*/
.home {
  position: relative;
}

.home_container {
  row-gap: 3rem;
  padding-top: 2rem;
}

.home__img-wrapper {
  position: relative;
  width: 300px;
  aspect-ratio: 1 / 1;
  justify-self: center;
}

.home__img-wrapper::before {
  content: '';
  position: absolute;
  inset: -0.9rem;
  background: linear-gradient(135deg, var(--secundary-color), var(--card-color));
  border-radius: 2rem;
  opacity: .4;
  transform: rotate(-5deg);
  z-index: -1;
}

.home__img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 1.75rem;
  box-shadow: 0 25px 45px hsla(222, 47%, 14%, .3);
}

.home__data {
  text-align: center;
}

.home__title {
  font-size: var(--h1-font-size);
  font-family: var(--title-font);
  margin-bottom: 1rem;
}

.home__title strong {
  color: var(--secundary-color);
}

.home__title div {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
}

.home__description {
  padding: 0 1rem;
  margin-bottom: 2rem;
  text-align: initial;
}

.home__badge {
  display: inline-flex;
  align-items: center;
  column-gap: .35rem;
  background-color: hsla(222, 47%, 14%, .1);
  color: var(--card-color);
  border: 1px solid hsla(222, 47%, 14%, .3);
  padding: .35rem .9rem;
  border-radius: 4rem;
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
  margin-bottom: 1rem;
}

.home__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/*==================== BUTTON ===================*/
.button {
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  background-color: var(--secundary-color);
  padding: 1rem 1.5rem;
  border-radius: 4rem;
  border: 2px solid var(--secundary-color);
  color: var(--main-color);
  font-weight: var(--font-medium);
  transition: background-color .3s, color .3s, border-color .3s;
}

.button i {
  font-size: 1.5rem;
  transition: transform .3s;
}

.button:hover {
  background-color: var(--card-color);
  color: var(--main-color);
  border-color: var(--white-text-color);
}

.button:hover i {
  transform: translateX(.25rem);
}

.button--ghost {
  background-color: transparent;
  color: var(--secundary-color);
}

.button--ghost:hover {
  background-color: var(--secundary-color);
  color: var(--main-color);
  border-color: var(--secundary-color);
}

/*================ ABOUT & SKILLS ================*/
.about,
.skills {
  position: relative;
}

.about__container {
  row-gap: 3rem;
}

.skills__title {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: .5rem;
  margin-bottom: .5rem;
  color: var(--text-color);
}

.skills__subtitle {
  margin-bottom: 3.5rem;
}

.skills__panel {
  display: grid;
  row-gap: 2rem;
  background-color: hsl(0, 0%, 100%);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 1px 2px hsla(222, 47%, 8%, .04);
}

.skills__group {
  display: grid;
  row-gap: 1.1rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(222, 20%, 92%);
}

.skills__group:first-child {
  padding-top: 0;
  border-top: none;
}

.about__data {
  text-align: center;
}

.skills__group-title {
  display: flex;
  align-items: center;
  column-gap: .6rem;
  font-family: var(--title-font);
  font-size: var(--h3-font-size);
  font-weight: 500;
  color: var(--title-color);
}

.skills__group-title i {
  color: var(--secundary-color);
  font-size: 1.15rem;
}

.skills__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.skills__pills span {
  background-color: hsla(230, 75%, 62%, .1);
  color: var(--secundary-color);
  border: 1px solid hsla(230, 75%, 62%, .18);
  padding: .45rem 1rem;
  border-radius: 4rem;
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  transition: background-color .25s, transform .25s;
}

.skills__pills span:hover {
  background-color: hsla(230, 75%, 62%, .18);
  transform: translateY(-1px);
}

.skills__pills--soft span {
  background-color: hsl(222, 20%, 95%);
  color: var(--text-color);
  border-color: hsl(222, 20%, 90%);
}

.skills__pills--soft span:hover {
  background-color: hsl(222, 20%, 90%);
}

@media screen and (max-width: 576px) {
  .skills__panel {
    padding: 1.75rem;
    row-gap: 1.5rem;
  }

  .skills__group {
    padding-top: 1.5rem;
  }
}

.about__img {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  justify-self: center;
  border-radius: 1.5rem;
  box-shadow: 0 20px 40px hsla(222, 47%, 14%, .25);
}

/*================== EXPERIENCE ==================*/
.experience {
  position: relative;
}

.experience__container {
  padding-top: 2rem;
  display: grid;
  row-gap: 3rem;
}

.experience__timeline {
  display: grid;
  row-gap: 2.5rem;
}

.experience__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1.25rem;
}

.experience__marker {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--card-color);
  color: var(--white-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 6px 14px var(--shadow-color);
}

.experience__content {
  background-color: var(--card-color);
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 8px 20px var(--shadow-color);
}

.experience__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: .25rem;
}

.experience__role {
  color: var(--white-text-color);
  font-family: var(--title-font);
  font-size: var(--h3-font-size);
}

.experience__date {
  color: hsla(0, 0%, 100%, .75);
  font-size: var(--smaller-font-size);
  white-space: nowrap;
}

.experience__company {
  display: block;
  color: hsla(0, 0%, 100%, .85);
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  margin: .35rem 0 1rem;
}

.experience__list {
  display: grid;
  row-gap: .6rem;
}

.experience__list li {
  position: relative;
  padding-left: 1.1rem;
  color: hsla(0, 0%, 100%, .92);
  font-size: var(--small-font-size);
  line-height: 1.5;
}

.experience__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--white-text-color);
}

.experience__grid {
  display: grid;
  row-gap: 2rem;
}

.experience__panel {
  background-color: hsl(0, 0%, 100%);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 1.25rem;
  padding: 1.75rem;
}

.experience__panel-title {
  display: flex;
  align-items: center;
  column-gap: .5rem;
  font-family: var(--title-font);
  font-size: var(--h3-font-size);
  margin-bottom: 1.25rem;
}

.experience__panel-title i {
  color: var(--secundary-color);
}

.experience__edu-item {
  margin-bottom: 1.25rem;
}

.experience__edu-item:last-child {
  margin-bottom: 0;
}

.experience__edu-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1rem;
  margin-bottom: .35rem;
}

.experience__edu-title {
  font-weight: var(--font-semi-bold);
  font-size: var(--small-font-size);
}

.experience__edu-item p {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  line-height: 1.5;
}

.experience__certs {
  display: grid;
  row-gap: .85rem;
}

.experience__certs li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--small-font-size);
  line-height: 1.4;
}

.experience__certs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--secundary-color);
}

@media screen and (min-width: 767px) {
  .experience__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
  }
}

/*=================== PORTFOLIO ===================*/
.carousel {
  position: relative;
  padding-top: 4rem;
}

.carousel__track {
  display: flex;
  column-gap: 1.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1.5rem .25rem 2rem;
  scroll-padding-left: .25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline-offset: 8px;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 250px;
  scroll-snap-align: start;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1.5rem;
  margin-top: 1rem;
}

.carousel__arrow {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background-color: var(--card-color);
  color: var(--white-text-color);
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color .3s, transform .2s, opacity .3s;
}

.carousel__arrow:hover {
  background-color: var(--secundary-color);
  transform: translateY(-2px);
}

.carousel__arrow:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}

.carousel__dots {
  display: flex;
  align-items: center;
  column-gap: .5rem;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: hsl(222, 20%, 85%);
  cursor: pointer;
  transition: background-color .3s, transform .3s;
}

.carousel__dot--active {
  background-color: var(--secundary-color);
  transform: scale(1.35);
}

.portfolio__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background-color: var(--card-color);
  padding: 13rem 2rem 1.5rem;
  box-shadow: 0 8px 20px var(--shadow-color);
  border-radius: 1rem;
  transition: background .4s;
}

.progress_band {
  position: absolute;
  top: 26px;
  left: -29px;
  width: 126px;
  height: 0;
  border-right: 23px solid transparent;
  border-left: 26px solid transparent;
  transform: rotate(313deg);
  z-index: 1;
}

.progress_band--completed {
  border-bottom: 24px solid hsla(119, 100%, 35%, 0.8);
}

.progress_band--inprogress {
  border-bottom: 24px solid hsla(0, 100%, 35%, 0.8);
}

.progress_band p {
  font-size: var(--smaller-font-size);
  color: var(--white-text-color);
  font-weight: var(--font-medium);
}

.portfolio__img {
  max-width: 220px;
  position: absolute;
  inset: 0;
  margin: 20px auto;
  transition: transform .4s;
}

.portfolio__name {
  color: var(--white-text-color);
  font-size: var(--h3-font-size);
  font-family: var(--title-font);
  text-align: center;
}

.portfolio__description,
.about__description {
  display: block;
  font-size: var(--small-font-size);
  margin: 1rem 0;
}

.portfolio__description {
  color: var(--white-text-color);
  text-align: justify;
}

.portfolio__card-footer {
    column-gap: 30px;
}

.card__project__links {
  display: flex;
  padding: 6px;
  justify-content: space-evenly;
}

.card__project__links a {
  color: var(--white-text-color);
  transition: color .3s, transform .3s;
}

.card__project__links i {
  font-size: 1.5em;
}

.card__project__links a:hover {
  color: var(--secundary-color);
  transform: translateY(-2px);
}

.portfolio__card:hover .portfolio__img {
  transform: translateY(-.25rem);
}

/*================ FEATURED PROJECTS ==============*/
.other-projects__title {
  margin-top: 5rem;
}

.featured__grid {
  display: grid;
  row-gap: 2.5rem;
}

.featured__card {
  background-color: var(--card-color);
  border-radius: 1.5rem;
  box-shadow: 0 8px 24px var(--shadow-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.featured__media {
  height: 200px;
  background-color: var(--card-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
}

.featured__logo {
  max-width: 300px;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.featured__media--quiv {
  background: linear-gradient(135deg, hsl(150, 55%, 22%), hsl(84, 55%, 38%));
}

.featured__body {
  padding: 2rem;
  display: grid;
  row-gap: 1rem;
}

.featured__eyebrow {
  color: hsla(0, 0%, 100%, .75);
  font-size: var(--smaller-font-size);
  font-weight: var(--font-semi-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.featured__title {
  color: var(--white-text-color);
  font-family: var(--title-font);
  font-size: var(--h2-font-size);
}

.featured__description {
  color: hsla(0, 0%, 100%, .92);
  font-size: var(--small-font-size);
  line-height: 1.6;
}

.featured__apps {
  display: grid;
  row-gap: 1rem;
  background-color: hsla(0, 0%, 100%, .08);
  border-radius: 1rem;
  padding: 1.25rem;
}

.featured__app {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.featured__app img {
  width: 44px;
  height: 44px;
  border-radius: .75rem;
  flex-shrink: 0;
}

.featured__app-icon {
  width: 44px;
  height: 44px;
  border-radius: .75rem;
  background-color: hsla(0, 0%, 100%, .15);
  color: var(--white-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.featured__app h4 {
  color: var(--white-text-color);
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: .15rem;
}

.featured__app p {
  color: hsla(0, 0%, 100%, .8);
  font-size: var(--smaller-font-size);
  line-height: 1.4;
}

.featured__highlights {
  display: grid;
  row-gap: 1rem;
  background-color: hsla(0, 0%, 100%, .08);
  border-radius: 1rem;
  padding: 1.25rem;
}

.featured__highlight {
  display: flex;
  align-items: center;
  column-gap: .85rem;
}

.featured__highlight i {
  width: 40px;
  height: 40px;
  border-radius: .75rem;
  background-color: hsla(0, 0%, 100%, .15);
  color: var(--white-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.featured__highlight span {
  color: hsla(0, 0%, 100%, .92);
  font-size: var(--small-font-size);
  line-height: 1.4;
}

.featured__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.featured__tags span {
  background-color: hsla(0, 0%, 100%, .12);
  color: var(--white-text-color);
  font-size: var(--smaller-font-size);
  padding: .3rem .75rem;
  border-radius: 4rem;
}

.featured__links {
  margin-top: .25rem;
}

.featured__links .button {
  padding: .8rem 1.4rem;
}

.featured__links .button i {
  font-size: 1rem;
}

@media screen and (min-width: 1024px) {
  .featured__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2.5rem;
  }

  .featured__media {
    height: 240px;
  }
}

/*=================== CONTACT ==================*/
.contact__container {
  position: relative;
}

.contact__content {
  position: relative;
  background-color: var(--card-color);
  border-radius: 2.5rem;
  padding: 5rem 1rem 3rem;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2rem;
}

.contact__title,
.contact__subtitle {
  color: var(--white-text-color);
}

.contact__map {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 1.5rem;
  overflow: hidden;
  background: radial-gradient(circle at 28% 24%, hsl(222, 45%, 22%), var(--card-color) 65%);
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .08);
}

.contact__map-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact__map-gridDot {
  fill: hsla(0, 0%, 100%, .16);
}

.contact__map-links line {
  stroke: var(--secundary-color);
  stroke-width: .35;
  opacity: .55;
}

.contact__map-nodes circle {
  fill: var(--secundary-color);
  opacity: .85;
}

.contact__map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.contact__map-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--secundary-color);
  box-shadow: 0 0 0 5px hsla(230, 75%, 62%, .22);
}

.contact__map-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--secundary-color);
  animation: map-pulse 2.4s ease-out infinite;
}

@keyframes map-pulse {
  0% {
    transform: scale(1);
    opacity: .55;
  }

  100% {
    transform: scale(5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact__map-pulse {
    animation: none;
    display: none;
  }
}

.contact__map-label {
  position: absolute;
  left: 1.5rem;
  bottom: 1.35rem;
  display: grid;
  row-gap: .2rem;
}

.contact__map-label strong {
  color: var(--white-text-color);
  font-family: var(--title-font);
  font-size: 1.1rem;
  font-weight: 500;
}

.contact__map-label span {
  color: hsla(0, 0%, 100%, .7);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: .7rem;
  letter-spacing: .02em;
}

.contact__data .section__title {
  margin-bottom: 2rem;
}

.contact__info {
  display: grid;
  row-gap: .75rem;
  margin-bottom: 2rem;
}

.contact__info li {
  display: flex;
  justify-content: center;
}

.contact__info a,
.contact__info span {
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  color: var(--white-text-color);
  font-size: var(--small-font-size);
  transition: color .3s;
}

.contact__info a:hover {
  color: var(--title-color);
}

.contact__form {
  display: grid;
  row-gap: 1rem;
  text-align: initial;
}

.contact__input,
.contact__button {
  font-family: var(--body-font);
  outline: none;
}

.contact__input {
  width: 100%;
  padding: .95rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: 1rem;
  background-color: var(--white-text-color);
  color: var(--title-color);
  font-size: var(--small-font-size);
  box-shadow: 0 1px 2px hsla(222, 47%, 8%, .06);
  transition: border-color .25s, box-shadow .25s;
}

.contact__input::placeholder {
  color: var(--text-color-light);
}

.contact__input:hover {
  border-color: hsla(222, 47%, 14%, .15);
}

.contact__input:focus {
  border-color: var(--secundary-color);
  box-shadow: 0 0 0 4px hsla(230, 75%, 62%, .18);
}

textarea.contact__input {
  resize: vertical;
  min-height: 130px;
  line-height: 1.5;
}

.contact__button {
  cursor: pointer;
  justify-self: start;
  border: none;
}

.contact__container,
.contact__input {
  transition: background .4s;
}

/*==================== FOOTER ===================*/
.footer {
  position: relative;
  padding-block: 3rem 2rem;
  overflow: hidden;
  background: var(--card-color);
}

.footer__container {
  row-gap: 3rem;
}

.footer__information {
  color: var(--white-text-color);
  font-size: var(--small-font-size);
  margin-bottom: 1.5rem;
  letter-spacing: 3px;
}

.footer__content {
  text-align: center;
}

.footer__title {
  color: var(--white-text-color);
  font-size: var(--biggest-font-size);
  margin-bottom: 1.5rem;
}

.footer__social {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.footer__social-link {
  color: var(--secundary-color);
  font-size: 1.25rem;
  margin-top: 1rem;
  transition: color .3s, transform .2s;
}

.footer__social-link:hover {
  color: var(--white-text-color);
  transform: translateY(-5px);
}

/*================== SCROLL BAR =================*/
.scrollup {
  position: fixed;
  bottom: -50%;
  right: 1rem;
  width: 55px;
  height: 55px;
  background-color: var(--text-color);
  text-align: center;
  padding: .35rem;
  border-radius: 50%;
  font-size: 1.4rem;
  color: var(--main-color);
  z-index: var(--z-tooltip);
  border: 4px solid transparent;
  transition: bottom .3s, transform .3s, background .4s;
}

.scrollup:hover {
  transform: translateY(-.25rem);
}

/* Show Scroll Up */
.show-scroll {
  bottom: 3rem;
}

/*================= BREAKPOINTS =================*/
/* For small devices */
@media screen and (max-width: 340px) {
  .container {
    margin-inline: 1rem;
  }

  .section {
    padding-block: 4rem 1rem;
  }

  .home__title {
    font-size: 2rem;
  }

  .contact__content {
    padding: 6rem 1rem 2rem;
  }

  .contact__button {
    justify-content: center;
  }

  .footer__content {
    gap: 1.5rem;
  }
}

/* For medium devices */
@media screen and (min-width: 576px) {

  .home_container,
  .about__container,
  .contact__content {
    grid-template-columns: .7fr;
    justify-content: center;
  }

  .footer__content {
    grid-template-columns: repeat(3, max-content);
  }
}

@media screen and (min-width: 767px) {
  .nav {
    column-gap: 3rem;
  }

  .nav__toggle,
  .nav__close {
    display: none;
  }

  .nav__list {
    flex-direction: row;
    column-gap: 3rem;
  }

  .nav__menu {
    margin-left: auto;
  }

  .footer__content {
    grid-template-columns: repeat(4, max-content);
  }
}

/* For large devices */
@media screen and (min-width: 1024px) {
  .section {
    padding-block: 7rem 1.5rem;
  }

  .section__subtitle {
    margin-bottom: .75rem;
  }

  .skills__subtitle {
    margin-bottom: 4rem;
  }

  .nav {
    height: calc(var(--header-height) + 1.5rem);
  }

  .home__container {
    grid-template-columns: 480px 500px;
    padding: 5rem 3rem;
  }

  .home__data {
    text-align: initial;
    order: -1;
  }

  .home__description {
    padding-inline: 0 10rem;
  }

  .home__img-wrapper {
    width: 440px;
  }

  .about__container {
    grid-template-columns: 450px 360px;
    align-items: center;
    column-gap: 7rem;
    padding: 7rem 0;
  }

  .about__data {
    order: 1;
  }

  .about__data,
  .about .section__subtitle,
  .about .section__title {
    text-align: initial;
  }

  .about__title {
    column-gap: 1rem;
    justify-content: initial;
  }

  .about__img {
    width: 450px;
  }

  .carousel__slide {
    flex-basis: 270px;
  }

  .portfolio__card {
    padding: 13.5rem 2rem 2rem;
    border-radius: 1.5rem;
  }

  .portfolio__img {
    width: 230px;
  }

  .portfolio__button {
    bottom: 2rem;
  }

  .contact__content {
    grid-template-columns: 350px 360px;
    align-items: center;
    column-gap: 6rem;
    padding: 2.5rem 0;
    border-radius: 4.5rem;
  }

  .contact__img {
    position: initial;
    width: 350px;
  }

  .contact .section__subtitle,
  .contact .section__title {
    text-align: initial;
  }

  .contact .section__title {
    margin-bottom: 2.5rem;
  }

  .contact__info li {
    justify-content: flex-start;
  }

  .contact__button {
    font-size: var(--normal-font-size);
    margin-top: 0.5rem;
  }

  .footer {
    padding-block: 6rem 3rem;
  }

  .footer__content {
    column-gap: 4rem;
  }

  .footer__title {
    font-size: var(--h1-font-size);
    transition: letter-spacing .3s;
  }

  .footer__information {
    font-size: var(--h3-font-size);
  }

  .footer__title:hover {
    letter-spacing: 2px;
  }

  .footer__social-link {
    font-size: 1.5rem;
  }

  .scroll-up {
    right: 3rem;
  }
}


@media screen and (min-width: 1064px) {
  .container {
    margin-inline: auto;
  }
}