/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&family=Instrument+Serif:ital@0;1&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");

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

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #ac3b61;
  --accent-color: #ffa585;
  --title-color: hsl(207, 4%, 16%);
  --text-color: hsl(207, 4%, 28%);
  --text-color-light: #64696d;
  --body-color: #faf8f8;
  --container-color: hsl(0, 0%, 88%);
  --white: hsl(0, 0%, 100%);

  /*========== Gray Scale ==========*/
  --gray--900: hsl(24, 10%, 10%);
  --gray--800: hsl(12, 6%, 15%);
  --gray--700: hsl(30, 6%, 25%);
  --gray--600: hsl(33, 5%, 32%);
  --gray--500: hsl(26, 6%, 45%);
  --gray--400: hsl(25, 7%, 64%);
  --gray--300: hsl(26, 8%, 83%);
  --gray--200: hsl(20, 6%, 90%);
  --gray--100: hsl(60, 5%, 96%);
  --gray--50: hsl(60, 9%, 98%);
  --gray--25: hsla(60, 20%, 99%, 0.8);

  /* Change the first number */
  /* Blue: 207 - Purple: 250 - Pink: 356 - Teal: 174 */
  --gradient-color: linear-gradient(180deg, #356eac, #ac3b61);
  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Merriweather Sans", sans-serif;
  --subtitle-font: "Merriweather", serif;
  --title-font: "Fjalla One", sans-serif;
  --banner-font: "Instrument Serif", serif;
  --biggest-font-size: 2.1rem;
  --h1-font-size: 1.66rem;
  --h2-font-size: 1.46rem;
  --h3-font-size: 1.1rem;
  --normal-font-size: 1rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;
  --tiny-font-size: 0.625rem;

  /*========== SwiperJS ==========*/
  --swiper-navigation-size: 30px;

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

  /*========== z index ==========*/
  --z-normal: 1;
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */
@media screen and (min-width: 1024px) {
  :root {
    --biggest-font-size: 3.2rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.2rem;
    --normal-font-size: 1.1rem;
    --small-font-size: 0.9rem;
    --smaller-font-size: 0.813rem;
    --tiny-font-size: 0.688rem;
  }
}
/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}
h1,
h2 {
  color: var(--title-color);
  font-family: var(--banner-font);
  font-weight: var(--font-medium);
}
h3,
h4 {
  color: var(--title-color);
  font-family: var(--title-font);
  font-weight: var(--font-medium);
}
p,
ul,
li {
  font-family: var(--body-font);
  font-weight: lighter;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* unvisited link */
a:link {
  color: var(--text-color);
}

/* visited link */
a:visited {
  color: var(--text-color);
}

/* mouse over link */
a:hover {
  color: var(--first-color);
}

/* selected link */
a:active {
  color: var(--first-color);
}

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

/*=============== REUSABLE CSS CLASSES ===============*/
.container,
.footer {
  max-width: 1024px;
  margin-inline: 2rem;
}
.grid {
  display: grid;
  gap: 1.5rem;
}
.section {
  padding-block: 3.8rem;
}
.section__border {
  border-bottom: 1px solid var(--gray--200);
  padding-bottom: 3.8rem;
}
.section__title,
.section__subtitle {
  text-align: center;
  padding: 0.6rem 0.6rem 0;
}
.section__title {
  font-size: var(--biggest-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: 0.25rem;
}
.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  margin-bottom: 3rem;
}
.main {
  overflow: hidden; /* For animation */
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5rem;
  background-color: var(--gray--800);
  color: var(--white) !important;
  text-align: center;
  border-radius: 0.75rem;
  padding: 0.8rem 1.6rem;
  font-weight: var(--font-medium);
  transition: all 0.4s;
  border: 2px solid var(--text-color);
}
.button:before,
.button:after {
  content: "\ea6c";
  font-family: remixicon;
  position: relative;
  left: -10px;
  opacity: 0;
  transition: all 0.4s;
}
.button:hover:after {
  left: 0px;
  opacity: 1;
}
.button:hover {
  background-color: var(--white);
  color: var(--text-color) !important;
  border: 2px solid var(--text-color);
}
.icon {
  width: 20px;
}
.social_icon {
  width: 25px;
}
.icon_text {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5rem;
}
#content {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards; /* Fade effect for the content */
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* When content is changing (fade-out) */
.fade-out {
  opacity: 0;
}

/*=============== HEADER & NAV ===============*/
.header {
  width: 100%;
  position: fixed;
  bottom: 2rem;
  left: 0;
  z-index: var(--z-fixed);
}
.nav {
  height: calc(var(--header-height) + 0.8rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  backdrop-filter: blur(2rem);
  box-shadow: 0 4px 20px hsla(180, 0%, 44%, 0.2);
  border: 2px solid var(--gray--25);
  border-radius: 3.2rem;
}
.nav__logo,
.nav__toggle,
.nav__close {
  color: var(--title-color);
}
.nav__logo {
  font-family: var(--banner-font);
  font-weight: var(--font-semi-bold);
  font-size: 1.6rem;
  padding-inline: 1.6rem;
}
.nav__toggle {
  display: flex;
  font-size: 1.25rem;
  cursor: pointer;
  padding-inline: 1.6rem;
}
@media screen and (max-width: 1023px) {
  .nav__menu {
    position: fixed;
    bottom: -800%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: var(--white);
    backdrop-filter: blur(2rem);
    box-shadow: 0 4px 20px hsla(180, 0%, 44%, 0.2);
    padding: 2rem 1.5rem 5rem;
    border-radius: 2rem;
    transition: bottom 0.3s;
  }
}
.nav__list {
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  gap: 2rem 2.6rem;
}
.nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.25rem;
  font-size: var(--normal-font-size);
  color: var(--text-color-light);
  transition: color 0.3s;
}
.nav__link:hover {
  color: var(--first-color);
}
.nav__link i {
  font-size: 1.4rem;
}
.nav__close {
  position: absolute;
  right: 1.5rem;
  bottom: 0.8rem;
  font-size: 1.5rem;
  cursor: pointer;
}
/* Show menu */
.show-menu {
  bottom: 0rem;
}
/* Active link */
.active-link {
  color: var(--title-color);
}
/* Nav Icon link */
.nav__link > .social_icon:hover {
  fill: var(--first-color);
}

/*=============== HOME ===============*/
.home {
  background-color: var(--body-color);
  background-image: radial-gradient(
      at 19% 54%,
      hsla(55, 100%, 77%, 0.34) 0px,
      transparent 50%
    ),
    radial-gradient(at 3% 47%, hsla(45, 100%, 80%, 0.8) 0px, transparent 50%),
    radial-gradient(at 98% 3%, hsla(210, 91%, 62%, 0.87) 0px, transparent 50%),
    radial-gradient(at 94% 44%, hsla(44, 100%, 79%, 0.8) 0px, transparent 50%),
    radial-gradient(at 53% 29%, hsla(13, 100%, 72%, 0.87) 0px, transparent 50%),
    radial-gradient(at 65% 14%, hsla(273, 100%, 68%, 0.83) 0px, transparent 50%),
    radial-gradient(at 14% 14%, hsla(16, 100%, 76%, 1) 0px, transparent 50%);
}
.home__title {
  font-family: var(--banner-font);
  font-size: var(--biggest-font-size);
  text-align: center;
  color: var(--text-color-light);
}
.highlight {
  color: var(--title-color);
}
.home__prefil {
  margin: 0 auto;
  padding: 30px 0;
}
.home__prefil img {
  max-width: 120px;
  height: 100%;
  border: 2px solid var(--container-color);
  border-radius: 1rem;
  box-shadow: 0 4px 20px hsla(180, 0%, 44%, 0.6);
  transform: scaleX(-1) translate3d(0rem, 0rem, 0px) scale3d(1, 1, 1)
    rotateX(0deg) rotateY(0deg) rotateZ(-5deg) skew(0deg);
  transition: all 0.2s;
  transform-style: preserve-3d;
  cursor: pointer;
}
.home__prefil img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1) translate3d(0rem, 0rem, 0px) scale3d(1, 1, 1)
    rotateX(0deg) rotateY(180deg) rotateZ(-5deg) skew(0deg);
}
.slider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-container {
  max-width: 100vw;
}
.card-wrapper {
  margin: 60px 0;
  overflow: hidden;
}
.card-list .card-item {
  user-select: none;
  display: block;
  padding: 2px 2px 0;
  border-radius: 12px;
}
.card-list .card-item .card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--white);
}
.card-wrapper .swiper-pagination-bullet {
  height: 16px;
  width: 16px;
  opacity: 0.8;
  background: var(--accent-color);
}
.swiper-button-prev,
.swiper-button-next {
  color: white !important;
  font-weight: 900 !important;
}
.swiper-button-prev {
  padding-left: 2rem;
}
.swiper-button-next {
  padding-right: 2rem;
}

@media screen and (max-width: 1023px) {
  .swiper-button-prev {
    padding-left: 20px;
  }
  .swiper-button-next {
    padding-right: 20px;
  }
}

/*=============== WORK ===============*/
.work-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.inner-work-card-wrapper {
  display: flex;
  gap: 3rem;
}
.right-side-project img {
  height: 100%;
  object-fit: cover;
}
.next__item > h3 {
  text-align: center;
}
/*=============== PROJECTS ===============*/
.projects-wrapper {
  display: flex;
  gap: 2rem;
}
.project-item {
  background-color: var(--white);
  padding: 1rem;
  border-radius: 12px;
}
.inner-project-card-wrapper {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2rem;
  height: 100%;
}
.project-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.inner-project-card-wrapper > .left-side-project,
.inner-project-card-wrapper > .right-side-project {
  width: 100%;
}
.inner-project-card-wrapper > .left-side-project {
  height: 100%;
}
.left-side-project {
  display: flex;
  flex-flow: column;
  gap: 2rem;
  justify-content: space-between;
}
.right-side-project img {
  border-radius: 12px;
}
.project-headline-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.project-headline-wrapper .project-label {
  padding: 8px 16px;
  background-color: var(--gray--100);
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  border-radius: 50px;
  width: fit-content;
  margin-bottom: 0.8rem;
}
.project__title {
  font-size: var(--h1-font-size);
}
.project__subtitle {
  font-family: var(--subtitle-font);
  font-size: var(--small-font-size);
  font-weight: 200;
  color: var(--text-color-light);
}
.project-summary {
  line-height: 1.6rem;
}
.project-item .left-side-project .grid {
  gap: 0.4rem;
}
.twobuttons {
  grid-template-columns: repeat(2, 1fr);
}
.twobuttons > .button {
  padding: 0.8rem 0rem;
}
/*=============== GALLERY ===============*/
.portfolio__container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.portfolio__img {
  box-shadow: 1px 1px 10px rgb(136, 136, 136, 0.2);

  background-color: var(--white);
  border: 8px solid var(--white);
}
.portfolio__name {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  text-align: center;
  padding: 0.6rem;
  background-color: var(--white);
}
.gallery__container {
  padding-bottom: 1rem;
}
.gallery2__container > .portfolio__img {
  border: none;
  box-shadow: none;
  background-color: var(--body-color);
}

/*=============== ABOUT ===============*/
.about__container {
  row-gap: 3.5rem;
}
.about__info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about__data {
  display: grid;
  row-gap: 1.6rem;
}
.about__info {
  row-gap: 2rem;
}
.about__data-info {
  font-weight: 100;
  line-height: 2rem;
}
.about__data-title {
  font-weight: var(--font-semi-bold);
}
.about__data-service {
  font-weight: 100;
  line-height: 1.8rem;
  font-size: var(--small-font-size);
}
.about-img {
  transform: scaleX(-1);
  border-radius: 12px;
  border: 2px solid var(--white);
  box-shadow: 0 4px 20px hsla(180, 0%, 44%, 0.2);
}
.dot-space {
  padding: 6px;
}

/*=============== QUALIFICATION ===============*/
.qualification {
  position: relative;
}
.qualification__container {
  row-gap: 3.6rem;
}
.qualification__title {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5rem;
  font-size: var(--h3-font-size);
  margin-bottom: 2.6rem;
}
.qualification__info {
  display: grid;
  row-gap: 2rem;
}
.qualification__name {
  font-size: var(--normal-font-size);
  margin-bottom: 0.8rem;
}
.location__time {
  display: flex;
  justify-content: space-between;
}
.qualification__location,
.qualification__year {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}
.qualification__location {
  margin-bottom: 0.25rem;
}
.main-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}
@media screen and (min-width: 688px) {
  .qualification__container {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
  }
  .main-button {
    margin-top: 4rem;
  }
}

/*=============== SKILLS ===============*/
.skills__container {
  row-gap: 2rem;
}
.skills__content {
  margin-bottom: 4rem;
}
.skills__title {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5rem;
  font-size: var(--h3-font-size);
  margin-bottom: 2.6rem;
}
.skills__info,
.skills__data,
.skills__blob {
  display: grid;
}
.skills__info {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 1rem;
  max-width: 380px;
  margin: 0 auto;
}
.skills__data {
  justify-content: center;
  text-align: center;
}
.skills__blob {
  width: 80px;
  height: 100px;
  background-color: var(--container-color);
  border-radius: 12px;
  place-items: center;
  margin-bottom: 1rem;
}
.skills__blob img {
  width: 40px;
}
.skills__name {
  font-size: var(--normal-font-size);
  color: var(--text-color-light);
  margin-bottom: 0.25rem;
}

/* Animation skills */
.skills__blob:hover img {
  animation: bounce-skills 0.6s;
}

@keyframes bounce-skills {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translateY(-6px);
  }
  40% {
    transform: translate(0);
  }
  60% {
    transform: translateY(-3px);
  }
  80% {
    transform: translate(0);
  }
}

/*=============== FOOTER ===============*/
.footer {
  margin: 0 auto;
}
.footer__container {
  margin-bottom: 6rem;
  padding: 4rem 0;
}
.footer__content {
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  row-gap: 4rem;
}
.footer__intro {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
}
.footer__intro p {
  font-size: var(--small-font-size);
  line-height: 1.4rem;
}
.footer__logo {
  font-family: var(--banner-font);
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
}
.footer__title {
  font-family: var(--title-font);
  font-size: var(--normal-font-size);
}
.footer__social {
  display: flex;
  justify-content: center;
  column-gap: 0.8rem;
}
.footer__social-link {
  color: var(--title-color);
  font-size: 1.4rem;
  transition: transform 0.3s;
}
.footer__social-link:hover {
  transform: translateY(-0.2rem);
}
.footer__directory {
  grid-template-columns: repeat(3, max-content);
  column-gap: 1rem;
  row-gap: 4rem;
  justify-content: space-evenly;
}
.footer__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer__link {
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-weight: 200;
  text-decoration: underline;
}

.footer__copy {
  display: block;
  margin-top: 1rem;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  text-align: center;
  padding: 6px;
}

/*=============== WORK DESCRIPTION ===============*/
.employment-wrapper > img {
  border-radius: 12px;
  border: 2px solid var(--white);
  max-height: 460px;
  object-fit: cover;
  width: 100%;
}
.employment__content {
  margin: 1rem;
}
.employment__item {
  line-height: 2rem;
}
.employment__item .employment__title {
  font-family: var(--body-font);
  font-size: var(--small-font-size);
  font-weight: 200;
}
.employment__item .employment__name {
  font-family: var(--title-font);
}
.technology__wrapper,
.technology2__wrapper {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 0.8rem;
}
.technology__wrapper > .social_icon {
  width: 30px;
}
.technology2__wrapper > .social_icon {
  width: 60px;
}
.overview__container {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.overview__content,
.next__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.overview__title {
  font-size: var(--biggest-font-size);
  padding-top: 2rem;
}
.overview__item > li {
  list-style: circle;
  list-style-position: inside;
  padding: 8px;
  margin-left: 10px;
  line-height: 2rem;
}
.overview__container > .portfolio__img {
  border-radius: 2px;
}
.next {
  margin: 4rem 0 2rem;
}
.next__container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.next__item > img {
  border-radius: 12px;
  max-height: 300px;
  object-fit: cover;
}
.next__link {
  border: 5px solid var(--body-color);
  border-radius: 12px;
  padding: 10px;
  transition: 0.2s ease;
}
.next__link:hover {
  opacity: 0.8;
  background: var(--white);
  color: var(--title-color);
  border: 5px solid var(--white);
  box-shadow: 0 4px 12px var(--gray--300);
}

/*=============== SCROLL UP ===============*/
.scrollup {
  position: fixed;
  right: 0.6rem;
  bottom: -30%;
  background-color: var(--white);
  box-shadow: 0 4px 12px var(--gray--300);
  display: inline-flex;
  padding: 0.6rem 0.3rem;
  color: var(--text-color);
  border-radius: 0.3rem;
  font-size: 1.2rem;
  z-index: var(--z-tooltip);
  transition: bottom 0.3s, transform 0.3s;
}

.scrollup:hover {
  transform: translateY(-0.2rem);
}
/* Show Scroll Up*/
.show-scroll {
  bottom: 8rem;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */

@media screen and (max-width: 340px) {
  .nav__menu {
    padding-bottom: 4rem;
  }
  .nav__list {
    gap: 1rem 1.25rem;
  }

  .skills__info {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__directory {
    grid-template-columns: repeat(2, max-content);
  }
}
@media screen and (min-width: 380px) and (max-width: 576px) {
  .nav {
    margin: 0 3rem !important;
  }
}
@media screen and (max-width: 576px) {
  .container {
    margin-inline: 1.2rem;
    padding: 0;
  }
  .footer__directory {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* For medium devices */
@media screen and (min-width: 576px) {
  .nav,
  .nav__menu {
    width: 380px;
  }
  .nav {
    margin: 0 auto;
  }
  .skills__info {
    gap: 2.5rem 2rem;
  }
  .employment__content {
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
    justify-content: space-evenly;
  }
  .next-wrapper {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
  }
}

@media screen and (min-width: 576px) and (max-width: 866px) {
  .about__container {
    display: flex;
    flex-direction: column-reverse;
  }
  .about-img {
    width: 60%;
    margin: 0 auto;
  }
  .project-item {
    padding: 2rem;
  }
  .qualification__container {
    column-gap: 3rem;
  }
  .qualification__container {
    column-gap: 4.6rem;
  }
}

@media screen and (max-width: 866px) {
  .inner-work-card-wrapper {
    gap: 2rem;
    flex-flow: column-reverse;
  }
  .projects-wrapper {
    flex-direction: column;
  }
  .inner-work-card-wrapper > .left-side-project,
  .inner-work-card-wrapper > .right-side-project {
    width: 100%;
  }
}

/* For large devices */
@media screen and (min-width: 768px) {
  .about__container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4.8rem;
  }
  .skills__container {
    grid-template-columns: repeat(2, max-content);
    column-gap: 4.8rem;
    justify-content: center;
  }
  .footer__content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 4rem;
  }
  .footer__intro {
    text-align: left;
  }
  .footer__social {
    justify-content: start;
  }
  .footer__directory {
    column-gap: 4rem;
  }
  .icon_text {
    justify-content: start;
  }
  .employment__content {
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
    justify-content: space-around;
  }
  .overview {
    margin: 4rem 0;
  }
}

@media screen and (min-width: 866px) {
  .inner-work-card-wrapper > .left-side-project {
    width: 40%;
  }
  .inner-work-card-wrapper > .right-side-project {
    width: 60%;
  }
  .work-wrapper > .project-item {
    padding: 2rem;
  }
  .gallery__container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
  }
  .gallery2__container {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
  }
  .qualification__container {
    column-gap: 8rem;
  }
}

@media screen and (min-width: 1023px) {
  .container {
    margin: 0 auto;
  }
  .header {
    top: 0;
    bottom: initial;
    transition: 0.4s;
    background-color: white;
    border-bottom: 5px solid;
    border-image-source: linear-gradient(90deg, #356eac, #ac3b61);
    border-image-slice: 1;
    box-shadow: 1px 1px 10px rgb(136, 136, 136, 0.2);
  }
  .nav {
    width: initial;
    height: cal(var(--header-height) + 1.5 rem);
    box-shadow: none;
    border-radius: 0;
    padding: 0 1rem;
    backdrop-filter: none;
  }
  .nav__logo {
    padding-inline: 0;
  }
  .nav__link i,
  .nav__toggle,
  .nav__close,
  .nav__link > svg {
    display: none;
  }
  .nav__menu {
    width: initial;
    margin-left: auto;
    background-color: var(--white);
    transition: background 0.4s;
  }
  .nav__list {
    display: flex;
    column-gap: 2rem;
    padding: 1rem 0;
  }
  .nav__link {
    font-size: var(--small-font-size);
  }
  .section {
    padding-block: 8rem 0;
  }
  .footer {
    padding: 0 1rem;
  }
}