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

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

    /* Colors */
    --hue-color: 250;
    --first-color: hsl(var(--hue-color), 69%, 61%);
    --first-color-alt: hsl(var(--hue-color), 57%, 53%);
    --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
    --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%, 99%);
    --container-color: #fff;
    --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);

    /* Font and typography */
    --body-font: 'Poppins', sans-serif;
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

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

    /* Margins */
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .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: .875rem;
        --smaller-font-size: .813rem;
    }
}

/* Dark theme */
body.dark-theme {
    --first-color: hsl(var(--hue-color), 30%, 60%);
    --first-color-alt: hsl(var(--hue-color), 20%, 50%);
    --first-color-lighter: hsl(var(--hue-color), 25%, 65%);
    --title-color: hsl(var(--hue-color), 8%, 95%);
    --text-color: hsl(var(--hue-color), 8%, 75%);
    --text-color-light: hsl(var(--hue-color), 8%, 65%);
    --input-color: hsl(var(--hue-color), 29%, 16%);
    --body-color: hsl(var(--hue-color), 28%, 12%);
    --container-color: hsl(var(--hue-color), 29%, 16%);
    --scroll-bar-color: hsl(var(--hue-color), 12%, 40%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 30%);
}

/*==================== 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);
    transition: background-color .3s ease, color .3s ease;
}

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

ul { list-style: none; }

a { text-decoration: none; color: inherit; }

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

.section {
  padding: 2rem 0 4rem;
}

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

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

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

.container {
  max-width: 968px;
  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);
}

.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__toggle { font-size: 1.1rem; cursor: pointer; }

.nav__list {
  grid-template-columns: repeat(3, max-content);
  gap: 2rem;
}

.nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--smaller-font-size);
  color: var(--title-color);
  font-weight: var(--font-medium);
  transition: color .3s;
}

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

.nav__icon { font-size: 1.2rem; }

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

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

.change-theme {
  font-size: 1.1rem;
  color: var(--title-color);
  cursor: pointer;
  transition: color .3s;
}

.change-theme: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,.15);
    border-radius: 1.5rem 1.5rem 0 0;
    transition: .3s;
  }
}

/* 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,.15); }

/*==================== BUTTONS ====================*/
.button {
  display: inline-block;
  background-color: var(--first-color);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: .5rem;
  font-weight: var(--font-medium);
  transition: .3s;
}

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

.button__icon { font-size: 1.2rem; margin-left: .5rem; }

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

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

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

.button--ghost {
  background-color: transparent;
  border: 2px solid var(--first-color);
  color: var(--first-color);
}

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

.button--white:hover { background-color: #fff; }
/*==================== HOME ====================*/
.home__container { gap: 1rem; }

.home__content {
  grid-template-columns: .5fr 1fr;
  padding-top: 3.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); transition: .3s; }
.home__social-icon:hover { color: var(--first-color-alt); }

.home__blob { width: 220px; fill: var(--first-color-lighter); }
.home__blob-img { width: 240px; }

.home__data { grid-column: 1/3; }
.home__title { font-size: var(--big-font-size); }
.home__subtitle { font-size: var(--h3-font-size); color: var(--text-color); margin-bottom: var(--mb-0-75); }
.home__description { margin-bottom: var(--mb-2); }

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

.home__scroll { display: none; }
.home__scroll-button { color: var(--first-color); transition: .3s; display: flex; align-items: center; column-gap: .35rem; }
.home__scroll-mouse { font-size: 2rem; }
.home__scroll-name { font-size: var(--small-font-size); color: var(--title-color); }
.home__scroll-arrow { font-size: 1.25rem; }

/*==================== ABOUT ====================*/
.about__container { grid-template-columns: repeat(2, 1fr); align-items: center; }
.about__img { width: 280px; border-radius: 1rem; justify-self: center; }
.about__description { text-align: justify; }

.about__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: var(--mb-2); }
.about__info-title { font-size: var(--h2-font-size); color: var(--first-color); }
.about__info-name { font-size: var(--small-font-size); color: var(--text-color-light); }

.about__buttons { display: flex; }

/*==================== SKILLS ====================*/
.skills__container { row-gap: 2rem; }

.skills__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--mb-2-5);
  cursor: pointer;
}

.skills__icon, .skills__arrow { font-size: 2rem; color: var(--first-color); }

.skills__icon { margin-right: var(--mb-0-75); }

.skills__title { font-size: var(--h3-font-size); }
.skills__subtitle { font-size: var(--small-font-size); color: var(--text-color-light); }

.skills__arrow { margin-left: auto; transition: .4s; }

.skills__list { row-gap: 1.5rem; padding-left: 2.7rem; }

.skills__titles { display: flex; justify-content: space-between; margin-bottom: var(--mb-0-5); }

.skills__bar, .skills__percentage {
  height: 5px;
  border-radius: .25rem;
}

.skills__bar { background-color: var(--first-color-lighter); }

.skills__percentage { display: block; background-color: var(--first-color); }

.skills__python { width: 90%; }
.skills__cpp { width: 85%; }
.skills__javascript { width: 85%; }
.skills__java { width: 80%; }
.skills__html { width: 95%; }
.skills__react { width: 80%; }
.skills__next { width: 70%; }
.skills__tailwind { width: 90%; }
.skills__node { width: 70%; }
.skills__numpy { width: 85%; }
.skills__tensorflow { width: 70%; }
.skills__webpack { width: 70%; }
.skills__git { width: 90%; }
.skills__docker { width: 80%; }
.skills__fastapi { width: 75%; }
.skills__gcp { width: 75%; }
.skills__vercel { width: 80%; }
.skills__redis { width: 65%; }
.skills__bigquery { width: 70%; }
.skills__office { width: 90%; }

.skills__close .skills__list { height: 0; overflow: hidden; }
.skills__open .skills__list { height: max-content; margin-bottom: var(--mb-2); }
.skills__open .skills__arrow { transform: rotate(-180deg); }

/*==================== QUALIFICATION ====================*/
.qualification__tabs { display: flex; justify-content: center; margin-bottom: var(--mb-2); column-gap: 1rem; }

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

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

.qualification__icon { font-size: 1.5rem; margin-right: .25rem; }

.qualification__sections { display: grid; grid-template-columns: 1fr; }

.qualification__content { display: none; }
.qualification__content.qualification__active { display: block; }

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

.qualification__title { font-size: var(--normal-font-size); }
.qualification__subtitle { display: block; font-size: var(--small-font-size); margin-bottom: var(--mb-0-25); color: var(--text-color); }
.qualification__description { font-size: var(--small-font-size); color: var(--text-color); margin-bottom: var(--mb-0-5); }

.qualification__calendar { display: flex; align-items: center; column-gap: .5rem; font-size: var(--smaller-font-size); color: var(--text-color-light); }

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

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

/*==================== SERVICES ====================*/
.services__container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }

.services__content {
  position: relative;
  background-color: var(--container-color);
  padding: 2rem 1.5rem 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  text-align: left;
}

.services__icon { display: block; font-size: 2rem; color: var(--first-color); margin-bottom: var(--mb-1); }

.services__title { font-size: var(--h3-font-size); margin-bottom: var(--mb-1); }

.services__button { cursor: pointer; color: var(--first-color); }
.services__button .button__icon { font-size: 1rem; }

.services__modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,.5);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-modal);
  transition: .3s;
  padding: 0 1rem;
}

.services__modal-content {
  position: relative;
  background-color: var(--container-color);
  padding: 2.5rem 1.5rem 1.5rem;
  border-radius: 1rem;
}

.services__modal-title { font-size: var(--h3-font-size); margin-bottom: var(--mb-1); }

.services__modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: var(--first-color);
  cursor: pointer;
}

.services__modal-services { row-gap: .75rem; }
.services__modal-service { display: flex; column-gap: .5rem; align-items: flex-start; }
.services__modal-icon { color: var(--first-color); font-size: 1.1rem; margin-top: .15rem; }

.active-modal { opacity: 1; visibility: visible; }
/*==================== PORTFOLIO ====================*/
.portfolio__container { overflow: hidden; }

.portfolio__content { align-items: center; }

.portfolio__img { width: 100%; border-radius: 1rem; justify-self: center; }

.portfolio__data { text-align: left; }

.portfolio__title { font-size: var(--h2-font-size); margin-bottom: var(--mb-0-5); }
.portfolio__description { margin-bottom: var(--mb-1-5); color: var(--text-color); }

.portfolio__button { cursor: pointer; }

.swiper-button-prev, .swiper-button-next { font-size: 2rem; color: var(--first-color); }
.swiper-button-prev::after, .swiper-button-next::after { content: ''; }
.swiper-horizontal > .swiper-pagination-bullets { bottom: 0; }
.swiper-pagination-bullet { background-color: var(--text-color-light); opacity: 1; }
.swiper-pagination-bullet-active { background-color: var(--first-color); }

/*==================== PROJECT IN MIND ====================*/
.project { text-align: center; }

.project__bg {
  background-color: var(--first-color);
  padding: 3rem 1.5rem;
  border-radius: 1rem;
}

.project__container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: center; row-gap: 2rem; }

.project__title { font-size: var(--h2-font-size); color: #fff; margin-bottom: var(--mb-0-75); }
.project__description { color: #f8f8f8; margin-bottom: var(--mb-1-5); }

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

/*==================== TESTIMONIAL ====================*/
.testimonial__container { overflow: hidden; }
.testimonial__content {
  background-color: var(--container-color);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.testimonial__data { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--mb-1); }

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

.testimonial__img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--first-color); }

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

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

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

.testimonial__icon-star { color: var(--first-color); font-size: 1rem; }

/*==================== CONTACT ME ====================*/
.contact__container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

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

.contact__icon { font-size: 1.5rem; color: var(--first-color); }

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

.contact__form { row-gap: 1.5rem; }
.contact__inputs { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 1rem; }

.contact__content { background-color: var(--input-color); border-radius: .5rem; padding: .75rem 1rem .25rem; }

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

.contact__input { width: 100%; border: none; outline: none; background: transparent; color: var(--text-color); font-size: var(--normal-font-size); padding: .25rem 0 .5rem; }

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

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

.footer__title { font-size: var(--h2-font-size); color: #fff; }
.footer__subtitle { font-size: var(--small-font-size); color: #fff; }

.footer__links { display: flex; justify-content: center; column-gap: 1.5rem; margin: var(--mb-2) 0; }
.footer__link { color: #fff; font-size: var(--small-font-size); }
.footer__link:hover { color: var(--first-color-lighter); }

.footer__socials { display: flex; justify-content: center; column-gap: 1rem; }
.footer__social { color: #fff; font-size: 1.2rem; }
.footer__social:hover { color: var(--first-color-lighter); }

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

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

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

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

.show-scroll { bottom: 4rem; }

/*========== SCROLL BAR ==========*/
::-webkit-scrollbar { width: .6rem; background-color: var(--scroll-bar-color); border-radius: .5rem; }
::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb-color); border-radius: .5rem; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-color-light); }

/*==================== MEDIA QUERIES ====================*/
@media screen and (max-width: 350px) {
  .container { margin-left: var(--mb-1); margin-right: var(--mb-1); }
  .nav__menu { padding: 2rem .25rem 4rem; }
  .nav__list { column-gap: 0; }
  .home__content { grid-template-columns: .6fr 1fr; }
  .home__blob { width: 200px; }
}

@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, .skills__container, .services__container,
  .portfolio__content, .contact__container { grid-template-columns: repeat(2, 1fr); }

  .qualification__sections { grid-template-columns: .6fr; justify-content: center; }

  .project__container { grid-template-columns: repeat(2, 1fr); align-items: center; }
  .project__bg { text-align: left; }
}

@media screen and (min-width: 768px) {
  body { margin: 0; }
  .header { top: 0; bottom: initial; }
  .main { padding: 6rem 0 2rem; }
  .section { padding: 6rem 0 2rem; }
  .nav { height: calc(var(--header-height) + 1.5rem); }
  .nav__icon, .nav__close, .nav__toggle { display: none; }
  .nav__list { display: flex; column-gap: 2rem; }
  .nav__menu { margin-left: auto; }

  .home__container { row-gap: 5rem; }
  .home__content { padding-top: 5.5rem; column-gap: 2rem; }
  .home__blob { width: 270px; }
  .home__data { grid-column: initial; }
  .home__social { transform: translateX(-6rem); }
  .home__scroll { display: block; }

  .about__container { column-gap: 5rem; }
  .about__img { width: 320px; }

  .qualification__tabs { justify-content: center; }
  .qualification__button { margin: 0 var(--mb-1); }

  .services__container { grid-template-columns: repeat(4, 1fr); }
  .services__icon { font-size: 2.5rem; }

  .portfolio__img { width: 320px; }
  .portfolio__content { align-items: center; column-gap: 2rem; }

  .project__bg { padding: 3.5rem 2.5rem; }
  .project__img { width: 230px; }

  .footer__bg { padding: 3rem 0 3.5rem; }
  .footer__links { column-gap: 2rem; }
}

@media screen and (min-width: 1024px) {
  .container { margin-left: auto; margin-right: auto; }
  .home__blob { width: 320px; }
  .home__social { margin-left: -3rem; }
  .portfolio__content { column-gap: 3rem; }
  .services__container { grid-template-columns: repeat(4, 1fr); }
}