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

/*==================== VARIABLES CSS ====================*/
:root {
  
  --icon-arrow:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m8.5 12.8l5.7 5.6c.4.4 1 .4 1.4 0c.4-.4.4-1 0-1.4l-4.9-5l4.9-5c.4-.4.4-1 0-1.4c-.2-.2-.4-.3-.7-.3c-.3 0-.5.1-.7.3l-5.7 5.6c-.4.5-.4 1.1 0 1.6c0-.1 0-.1 0 0'/%3E%3C/svg%3E");

  --header-height: 3rem;

  /*========== Colors ==========*/
  /* Change favorite color */
  --hue-color: 0; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

  /* HSL color mode */
  --first-color: hsl(var(--hue-color), 69%, 50%);
  --first-color-second: hsl(var(--hue-color), 55%, 34%);
  --first-color-alt: hsl(var(--hue-color), 97%, 63%);
  --first-color-lighter: hsl(var(--hue-color), 83%, 72%);
  --title-color: hsl(var(--hue-color), 8%, 15%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --input-color: hsl(var(--hue-color), 70%, 96%);
  --body-color: hsl(var(--hue-color), 60%, 98%);
  --container-color: #fff;
  --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
  --arrow-bg-color-hover: rgb(0 0 0 / 10%);

  /*========== Font and typography ==========*/
  --body-font: "Poppins", sans-serif;

  /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
  --big-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margenes Bottom ==========*/
  /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
  --mb-0-25: 0.25rem;
  --mb-0-5: 0.5rem;
  --mb-0-75: 0.75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  --mb-3: 3rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

/* Font size for large devices */
@media screen and (min-width: 968px) {
  :root {
    --big-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

/*========== Variables Dark theme ==========*/
body.dark-theme {
  /* HSL color mode */
  /* --first-color-second: hsl(var(--hue-color), 66%, 28%); */
  --title-color: hsl(var(--hue-color), 8%, 95%);
  --text-color: hsl(var(--hue-color), 0%, 76%);
  --text-color-light: hsl(var(--hue-color), 8%, 75%);
  --input-color: hsl(var(--hue-color), 29%, 16%);
  --body-color: #080202;
  --container-color: hsl(var(--hue-color), 29%, 16%);
  --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
  --arrow-bg-color-hover: rgba(255, 255, 255, 0.1);
}

/*========== Button Dark/Light ==========*/
.nav__btns {
  display: flex;
  align-items: center;
}

.change-theme {
  font-size: 1.25rem;
  color: var(--title-color);
  margin-right: var(--mb-1);
  cursor: pointer;
}

.change-theme:hover {
  color: var(--first-color);
}

/*==================== BASE ====================*/

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0 0 var(--header-height) 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}

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

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
}

/*==================== REUSABLE CSS CLASSES ====================*/
.section {
  padding: 2rem 0 2.5rem;
  /* margin-bottom: 40px; */
}

.section__title {
  font-size: var(--h1-font-size);
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-2);
}

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

/*==================== FadeIn Animations ====================*/
.animation {
	will-change: transform;
}

@media screen and (min-width: 768px) {
	
	.fade-up-desktop {
		opacity: 0;
		transition: 1500ms all ease-in-out;
		transform: translateY(50px);
	}
	.fade-up-desktop {
		transform: translateY(50px);
	}
	
	.fade-up-desktop.animate {
		opacity: 1;
		transform: translateY(0);
	}
}
@media screen and (max-width: 767px) {

	.fade-up-mobile {
		opacity: 0;
		transition: 1500ms all ease-in-out;
	}
	.fade-up-mobile {
		transform: translateY(50px);
	}

	.fade-up-mobile.animate {
		opacity: 1;
		transform: translateY(0);
	}
}

@media screen and (max-width: 767px) {
	.box{
		max-width: 300px;
		width: 100%;
		margin: 0 auto;
	}
}


/*==================== LAYOUT ====================*/

.container {
  max-width: 768px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

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

.header {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--body-color);
}

/*==================== CURSOR ====================*/
.circle {
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background-color: black;
  position: fixed; 
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999999; /* so that it stays on top of all other elements */
}

/*==================== NAV ====================*/
.nav {
  max-width: 968px;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo,
.nav__toggle {
  color: var(--title-color);
  font-weight: var(--font-medium);
}

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

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

.nav__toggle:hover {
  color: var(--first-color);
}

@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background-color: var(--body-color);
    padding: 2rem 1.5rem 4rem;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 1.5rem 1.5rem 0 0;
    transition: 0.3s;
  }
}

.nav__list {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-weight: var(--font-medium);
}

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

.nav__icon {
  font-size: 1.2rem;
}

.nav__close {
  position: absolute;
  right: 1.3rem;
  bottom: 0.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--first-color);
}

.nav__close:hover {
  color: var(--first-color-alt);
}

/* show menu */
.show-menu {
  bottom: 0;
}

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

/* Change background header */
.scroll-header {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}

/*==================== HOME ====================*/

.home__container {
  gap: 1rem;
}

.home__content {
  grid-template-columns: 0.5fr 3fr;
  padding-top: 2.5rem;
  align-items: center;
}

.home__social {
  display: grid;
  grid-template-columns: max-content;
  row-gap: 1rem;
}

.home__social-icon {
  font-size: 1.25rem;
  color: var(--first-color);
}

.home__social-icon:hover {
  color: var(--first-color-alt);
}

.home__blob {
  width: 200px;
  fill: var(--first-color);
}

.home__blob-img {
  width: 220px;
}

.home__data {
  grid-column: 1/3;
}

.home__title {
  font-size: var(--big-font-size);
}

.home__subtitle {
  font-size: var(--h3-font-size);
  color: var(--first-color-alt);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-0-75);
}

.home__description {
  margin-bottom: var(--mb-2);
}

.home__scroll {
  display: none;
}

.home__scroll-button {
  color: var(--first-color);
  transition: 0.3s;
}

.home__scroll-button:hover {
  transform: translateY(0.25rem);
}

.home__scroll-mouse {
  font-size: 2rem;
}

.home__scroll-name {
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-weight: var(--font-medium);
  margin-right: var(--mb-0-25);
}

.home__scroll-arrow {
  font-size: 1.25rem;
}

.animated-text{
  font-size: 34px;
  font-weight: 600;
  min-width: 280px;
}

.animated-text span{
  position: relative;
}

.animated-text span::before{
  content: "AI/ML Engineer..";
  color: var(--first-color-alt);
  animation: words 20s infinite;
}

.animated-text span::after{
  content: "";
  position: absolute;
  width: calc(100% + 8px);
  height: 100%;
  background-color: var(--body-color);
  border-left: 2px solid var(--first-color-alt);
  right: -8px;
  animation: cursor .8s infinite, typing 20s steps(14) infinite;
}

@keyframes cursor {
  to{
      border-left: 2px solid #ff7f5000;
  }
}

@keyframes words {
  0%,20%{
      content: "AI/ML Engineer..";
  }
  21%,40%{
      content: "DevOps Engineer..";
  }
  41%,60%{
      content: "Developer..";
  }
  61%,80%{
      content: "Gamer..";
  }
  81%,100%{
      content: "Artist..";
  }
}

@keyframes typing {
  10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
      width: 0;
  }
  5%,20%,25%,40%,45%,60%,65%,80%,85%{
      width: calc(100% + 8px);
  }
}


/*==================== BUTTONS ====================*/

.button {
  display: inline-block;
  background-color: var(--first-color);
  color: #ffff;
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: var(--font-medium);
}

.button:hover {
  background-color: var(--first-color-alt);
}

.button__icon {
  font-size: 1.2rem;
  margin-right: var(--mb-0-5);
  margin-left: var(--mb-0-5);
  transition: 0.3s;
}

.button--white {
  background-color: #fff;
  color: var(--first-color);
}

.button--white:hover {
  background-color: #fff;
}

.button--flex {
  display: inline-flex;
  align-items: center;
  transition: 0.3s;
}

.button--small {
  padding: 0.75rem 1rem;
}

.button--link {
  padding: 0;
  background-color: transparent;
  color: var(--first-color);
}

.button--link:hover {
  background-color: transparent;
  color: var(--first-color-alt);
}

/*==================== ABOUT ====================*/
.about__img {
  width: 200px;
  border-radius: 0.5rem;
  justify-self: center;
  align-items: center;
}

.about__description {
  text-align: center;
  margin-bottom: var(--mb-2-5);
}

.about__info {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: var(--mb-2-5);
}

.about__info-title {
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}

.about__info-name {
  font-size: var(--smaller-font-size);
}

.about__info-title,
.about__info-name {
  display: block;
  text-align: center;
}

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

.about__data {
  width: 100%; /* Ensure it takes up the full width */
}

/*==================== SKILLS ====================*/

.skills__description {
  text-align: center;
}

.slider{
  position: relative;
  /* width: calc(var(--card-width) + calc(var(--arrow-size) * 2) + 2rem); */
}

.logo_container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(5, 1fr);
}

.cards_container{
  position: relative;
  margin-inline: auto;
}

.card {
  text-align: center;
  padding: 10px;
}

/* CSS for the image in each card */
.card img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  object-position: center;
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
}

.card p {
  font-size: 15px;
  font-weight: bold;
}


.slider__arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.slider__arrow {
  height: 2.5rem;
  width: 2.5rem;
  background-color: transparent;
  border-radius: 50%;
  border: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.slider__arrow[disabled] {
  opacity: .25;
  pointer-events: none;
}

.slider__arrow:is(:hover, :focus-visible) {
  background-color: var(--arrow-bg-color-hover);
}

.slider__arrow::after {
  content: '';
  display: block;
  height: 1.75rem;
  width: 1.75rem;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--icon-arrow);
  -webkit-mask-image: var(--icon-arrow);
  background-color: var(--first-color);
}

.slider__arrow:is(:hover, :focus-visible)::after {
  background-color: var(--first-color-alt);

}

.slider__arrow--next::after {
  transform: rotate(180deg);
}

.slider__bullets {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  position: absolute;
  left: 0;
  pointer-events: none;

}

.slider__bullet {
  display: block;
  height: .5rem;
  width: .5rem;
  background-color: var(--first-color-alt);
  border: none;
  border-radius: 2rem;
  transition: width 0.5s cubic-bezier(0.55, -0.85, 0.2, 1.85);
}

.slider__bullet[active] {
  width: calc(.5rem * 3);
}

.page-link {
  cursor: pointer;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  margin-right: 5px;
}



/*==================== QUALIFICATION ====================*/
.experience__tabs {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: var(--mb-2);
}

.experience__button {
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  cursor: pointer;
}

.experience__button:hover {
  color: var(--first-color);
}

.experience__icon {
  font-size: 1.8rem;
  margin-right: var(--mb-0-25);
}

.experience__data {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  column-gap: 1.5rem;
}

.experience__title {
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
}

.experience__subtitle {
  display: inline-block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-1);
}

.experience__calendar {
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  /* margin-bottom: var(--mb-1) */
}

.experience__rounder {
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: var(--first-color);
  border-radius: 50%;
}

.experience__line {
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--first-color);
  transform: translate(6px, -7px);
}

.experience__content[data-content] {
  display: none;
}

.experience__active[data-content] {
  display: block;
}

.experience__button.experience__active {
  color: var(--first-color);
}

/*==================== PROJECTS ====================*/

.projects__content {
  position: relative;
  background-color: var(--container-color);
  padding: 0.75rem 0.5rem 0.5rem 1.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}

.projects__content:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.projects__button {
  cursor: pointer;
  font-size: var(--small-font-size);
}

.projects__button:hover .button__icon {
  transform: translateX(0.25rem);
}

.projects__container {
  overflow: initial;
}

.project__content {
  padding: 0 1.5rem;
}

.project__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-0-5);
}

.project__description {
  margin-bottom: var(--mb-0-75);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

.swiper-projects-icon {
  font-size: 2rem;
  color: var(--first-color);
}

.swiper-button-prev {
  left: -0.5rem;
}

.swiper-button-next {
  right: -0.5rem;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: -2.5rem;
}

.swiper-pagination-bullet-active {
  background-color: var(--first-color);
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination-bullet {
  outline: none;
}

.swiper-pagination-bullet {
  background: #fef8f8;
}
/*==================== PROJECT IN MIND ====================*/
.project {
  text-align: center;
}

.new_project__bg {
  background-color: var(--first-color-second);
  padding: 3rem 0;
}

.new_project__title {
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-0-75);
}

.new_project__description {
  margin-bottom: var(--mb-1-5);
}

.new_project__title,
.new_project__description {
  color: #fff;
}

.project__img {
  width: 232px;
  justify-self: center;
}

/*==================== CONTACT ME ====================*/
.contact__container {
  row-gap: 3rem;
}

.contact__information {
  display: flex;
  margin-bottom: var(--mb-2);
}

.contact__icon {
  font-size: 1.5rem;
  color: var(--first-color);
  margin-right: var(--mb-0-75);
}

.content__title {
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
}

.contact__subtitle {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.contact__content {
  background-color: var(--input-color);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem 0.25rem;
}

.contact__label {
  font-size: var(--smaller-font-size);
  color: var(--title-color);
}

.contact__input {
  width: 100%;
  background-color: var(--input-color);
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  border: none;
  outline: none;
  padding: 0.25rem 0.5rem 0.5rem 0;
}

/*==================== FOOTER ====================*/
.footer {
  padding-top: 2rem;
}

.footer__container {
  row-gap: 3.5rem;
}

.footer__bg {
  background-color: var(--first-color-second);
  padding: 2rem 0 3rem;
}

.footer__title {
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb-0-25);
}

.footer__subtitle {
  font-size: var(--small-font-size);
}

.footer__links {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}

.footer__link:hover {
  color: var(--first-color-lighter);
}

.footer__social {
  font-size: 1.25rem;
  margin-right: var(--mb-1-5);
}

.footer__social:hover {
  color: var(--first-color-lighter);
}

.footer__copy {
  font-size: var(--smaller-font-size);
  text-align: center;
  color: var(--text-color-light);
  margin-top: var(--mb-3);
}

.footer__title,
.footer__subtitle,
.footer__link,
.footer__social {
  color: #fff;
}

/*========== SCROLL UP ==========*/
.scrollup {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  background-color: var(--first-color);
  opacity: 0.8;
  padding: 0 0.3rem;
  border-radius: 0.4rem;
  z-index: var(--z-tooltip);
  transition: 0.4s;
}

.scrollup:hover {
  background-color: var(--first-color-alt);
}

.scrollup__icon {
  font-size: 1.5rem;
  color: #fff;
}

/* Show scroll */
.show-scroll {
  bottom: 5rem;
}

/*========== SCROLL BAR ==========*/
::-webkit-scrollbar {
  width: 0.6rem;
  background-color: var(--scroll-bar-color);
  border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color);
  border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color-light);
}

/*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media screen and (max-width: 380px) {
  .container {
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }

  .nav__menu {
    padding: 2rem 0.25rem 4rem;
  }

  .nav__list {
    column-gap: 0;
  }

  .home__content {
    grid-template-columns: 0.35fr 3fr;
    text-align: center;
  }

  .home__blob {
    width: 250px;
  }

  .home__social-icon {
    width: 30px;
  }

  .home__subtitle {
    font-size: 24px;
  }

  .home__description {
    font-size: 18px;
  }

  .home__button {
    font-size: 20px;
  }

  .skills__title {
    font-size: var(--normal-font-size);
  }
  .experience__data {
    gap: 0.5rem;
  }

  .projects__content {
    padding-right: 3.5rem;
  }
  .projects__modal {
    padding: 0 0.5rem;
  }

  .project__img {
    width: 200px;
  }

  .testimonial__header,
  .testimonial__data {
    flex-direction: column;
    align-items: center;
  }

  .testimonial__img {
    margin-right: 0;
    margin-bottom: var(--mb-0-25);
  }

  .testimonial__data,
  .testimonial__description {
    text-align: center;
  }

  .cards-container {
    grid-template-columns: repeat(3, 1fr);
    padding: 20px;
  }

}

@media screen and (max-width: 568px) {
.home__content {
    text-align: center;
  }

  .logo_container {
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    padding-bottom: 20px;
  }
  .circle{
    display: none;
  }
}

/* For medium devices */
@media screen and (min-width: 568px) {
  .home__content {
    grid-template-columns: max-content 1fr 1fr;
  }

  .home__data {
    grid-column: initial;
  }
  .home__img {
    order: 1;
    justify-self: center;
  }

  .about__container,
  .project__content,
  .new_project__container,
  .contact__container,
  .footer__container {
    grid-template-columns: repeat(2, 1fr);
  }

  .experience__sections {
    display: grid;
    grid-template-columns: 0.6fr;
    justify-content: center;
  }

  .logo_container {
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 20px;
  }

  @media screen and (min-width: 768px) {
    .container {
      margin-left: auto;
      margin-right: auto;
    }

    .body {
      margin: 0;
    }
    .section {
      padding: 6rem 0 2rem;
    }
    .section__subtitle {
      margin-bottom: 4rem;
    }
    .header {
      top: 0;
      bottom: initial;
    }

    .header,
    .main,
    .footer__container {
      padding: 0 1rem;
    }

    .nav {
      height: calc(var(--header-height) + 1.5rem);
      column-gap: 1rem;
    }
    .nav__icon,
    .nav__close,
    .nav__toggle {
      display: none;
    }

    .nav__list {
      display: flex;
      column-gap: 2rem;
    }

    .nav__menu {
      margin-left: auto;
    }
    .change-theme {
      margin: 0;
    }

    .home__container {
      row-gap: 5rem;
    }

    .home__content {
      padding-top: 4.5rem;
      column-gap: 2rem;
    }
    .home__blob {
      width: 270px;
    }
    .home__scroll {
      display: block;
    }
    .home__scroll-button {
      margin-left: 3rem;
    }
    .about__container {
      column-gap: 5rem;
      display: flex;
      align-items: center;
    }
    .about__img {
      width: 350px;
    }
    .about__description {
      text-align: initial;
    }
    .about__info {
      justify-content: space-between;
    }
    .logo_container {
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(5, 1fr);
      padding: 0 1.5rem;
      margin-bottom: 1.5rem;
    }
    .experience__tabs {
      justify-content: center;
    }
    .experience__button {
      margin: 0 var(--mb-1);
    }

    .experience__sections {
      grid-template-columns: 0.5fr;
    }
    .projects__icon {
      font-size: 2rem;
    }
    /* .projects__content {
      padding: 6rem 0 2rem 2.5rem;
    } */

    .projects__modal-content {
      width: 450px;
    }
    .project__content {
      align-items: center;
    }
    .project {
      text-align: initial;
    }
    .new_project__bg {
      background: none;
    }
    .new_project__container {
      background-color: var(--first-color-second);
      border-radius: 1rem;
      padding: 1rem 2.5rem 2rem;
      grid-template-columns: 1fr max-content;
      column-gap: 3rem;
    }
    .new_project__data {
      padding-top: 0.8rem;
    }
    .footer__container {
      grid-template-columns: repeat(3, 1fr);
    }
    .footer__bg {
      padding: 3rem 0 3.5rem;
    }

    .footer__links {
      flex-direction: row;
      column-gap: 2rem;
    }
    .footer__socials {
      justify-self: flex-end;
    }
    .footer__copy {
      margin-top: 4.5rem;
    }
  }
}

/* For large devices */
@media screen and (min-width: 1024px) {
  body {
    margin: 0;
  }

  .header,
  .main,
  .footer__container {
    padding: 0;
  }
  .home__blob {
    width: 320px;
  }
  .home__social {
    transform: translateX(-6rem);
  }
  .project__content {
    column-gap: 1.5rem;
  }

  .new_project__container {
    padding-bottom: 30px;
  }

  .swiper-projects-icon {
    font-size: 3.5rem;
  }
  .swiper-button-prev {
    left: -3.5rem;
  }
  .swiper-button-next {
    right: -3.5rem;
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: -4.5rem;
  }

  .contact__form {
    width: 460px;
  }
  .contact__inputs {
    grid-template-columns: repeat(2, 1fr);
  }
}