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

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

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(207, 65%, 65%);
  --title-color: hsl(207, 4%, 16%);
  --text-color: hsl(207, 4%, 28%);
  --text-color-light: hsl(207, 4%, 56%);
  --body-color: hsl(207, 4%, 99%);
  --container-color: hsl(240, 35%, 88%);

  /* Change the first number */
  /* Blue: 207 - Purple: 250 - Pink: 356 - Teal: 174 */
  --gradient-color: linear-gradient(180deg,
                      hsla(207, 48%, 72%, 0),
                      hsla(207, 65%, 65%, 1));

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Roboto', sans-serif;
  --title-font: 'Lora', serif;
  --biggest-font-size: 1.5rem;
  --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;
  --tiny-font-size: .625rem;

  /*========== 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: 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;
    --tiny-font-size: .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);
  transition: background .4s; /* for dark mode animation */
}

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

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

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

/*=============== THEME ===============*/
.nav__buttons{
  display: flex;
  align-items: center;
  column-gap: 1.5rem;
}
.change-theme{
  font-size: 1.25rem;
  color: var(--text-color);
  cursor: pointer;
  transition: color .3s;
}

/*========== Variables Dark theme ==========*/
body.dark-theme {
  --title-color: hsl(207, 4%, 95%);
  --text-color: hsl(207, 4%, 65%);
  --body-color: hsl(207, 4%, 10%);
  --container-color: hsl(207, 4%, 12%);
}

/*========== 
    Color changes in some parts of 
    the website, in light theme
==========*/
.dark-theme .nav,
.dark-theme .nav__menu,
.dark-theme .scrollup{
  background-color: var(--container-color);
  box-shadow: 0 4px 20px hsl(207, 24%, 8% ,.4);
}
 
.dark-theme .home__shape-wawes,
.dark-theme .home__shape-circle,
.dark-theme .qualification__img{
  filter: invert(1);
}
.dark-theme .home__social-link{
  color: var(--title-color);
}

.dark-theme .section__border{
  border-radius: 1px sold hsl(207,4%,32%)
}

.dark-theme::-webkit-scrollbar{
  background-color: hsl(207,4%,15%);
}
.dark-theme::-webkit-scrollbar-thumb{
  background-color: hsl(207,4%,25%);
}
.dark-theme::-webkit-scrollbar-thumb :hover{
  background-color: hsl(207,4%,35%);
}
/*=============== HEADER & NAV ===============*/
.header {
  @apply fixed top-0 left-0 w-full z-50 bg-white shadow-md transition-colors duration-400;
}



.nav__logo,
.nav__toggle,
.nav__close {
  @apply text-xl text-title-color cursor-pointer;
}

.nav__toggle {
  @apply md:hidden; /* Hide toggle button on medium and larger screens */
}












.show-menu {
  @apply flex; /* Ensure menu is displayed when 'show-menu' class is added */
  display: flex !important; /* Fallback for older browsers */
}

.active-link {
  @apply text-text-color;
}



/*=============== HOME ===============*/
.home__container{
  row-gap:4rem;
  padding-top: 2rem;
}
.home__data{
  row-gap: 1.5rem;
}

.home__title{
  text-align: center;
 
  letter-spacing: .3px;
  margin-bottom: .5rem;
}
.home__blob{
  position: relative;
  width: 200px;
  height: 290px;
  background-color: var(--body-color);
  border:  2px solid;
  justify-self: center;
  border-radius: 6.25rem;
  place-items: center;
}

.home__perfil{
  width: 170px;
  height: 260px;
  background: var(--gradient-color);
  border-radius: 5.5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.home__perfill img {
  width: 150px;
}
.home__shape-wawes,
.home__shape-circle{
  position: absolute;
  opacity: .1;
}
.home__shape-wawes{
  width: 50px;
  left: -1.5rem;
  top: 5rem;
}
.home__shape-circle{
  width: 150px;
  bottom: -2rem;
  right: -3rem;
  transform: rotate(15deg);
  z-index: -1;
}
.home__social{
  justify-self: center;
  display: flex;
  column-gap: 1.25rem;
}
.home__social-link:hover{
  color: var(--title-color)
}
.home__info-title {
  font-family: var(--body-font);
  
  font-weight: 400;
  color: var(--text-color-light);
  margin-bottom: 1rem;
}
.home__info-description,
.home__info-number{
  font-family: var(--title-font);
  color: var(--title-color);
}
.home__info-number{
  font-size: var(--h1-font-size);
  font-weight: var(--font-semi-bold);
}
/* General Styles */
.home__container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.home__data {
  order: 2;
}

.home__info:nth-child(3) {
  order: 3;
  text-align: right;
}

.home__info {
  margin-top: 10rem;
}

.home__info-description {
  padding-right: 0;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
  .home section {
    display: flex; /* Enables flexbox */
    justify-content: space-evenly; /* Distributes items evenly */
    align-items: center; /* Aligns items vertically (optional) */
    margin: auto; /* Centers the container horizontally */
    width: 100%; /* Optional: Ensures the section takes up full width */
    max-width: 1200px; /* Optional: Constrains the maximum width */
  }
}
/*=============== SKILLS ===============*/
.skills__container{
  row-gap: 3.5rem;
}
.skills__title{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: .5rem;
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: 2.5rem;
}
.skills__title i {
  font-size: 1rem;
  font-weight: initial;
  align-items: center;
}

.skills__info,
.skills__data,
.skills__blob{
  display: grid;
}
.skills__info{
  grid-template-columns: repeat(3,1fr);
  gap: 2.5rem 2rem;
}
.skills__data{
justify-content: center;
text-align: center;
}
.skills__blob{
  width: 80px;
  height: 100px;
  background-color: var(--container-color);
  border-radius: 3rem;
  place-items: center;
  margin-bottom: 1rem;
  transition: background .4s;
}

.skills__blob img{
  width: 40px;
}
.skills__name{
  font-size: var(--small-font-size);
  margin-bottom: .25rem;
}

.skills_subtitle{
  font-size: var(--tiny-font-size);
  color: var(--text-color-light);
}
/* Animation skills */
.skills__blob:hover img{
  animation: bounce-skills .6s;
}
@keyframes bounce-skills{
  0%{
    transform:  translate(0);
  }
  20%{
    transform: translate(-6px);
  }
  40%{
    transform: translate(0);
  }
  60%{
    transform: translateY(-3px);
  }
  80%{
    transform: translate(0);
  }
}

/*=============== QUALIFICATION ===============*/
.qualification{
  position: relative;
}
.qualification__container{
  row-gap: 3.5rem;
}
.qualification__title{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: .5rem;
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: 2rem;
}

.qualification__title i {
  font-size: 1rem;
  font-weight: initial;
}
.qualification__info{
  display: grid;
  row-gap: 2rem;
}

.qualification__country,
.qualification__year{
  display: block;
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.qualification__img{
  width: 150px;
  position: absolute;
  right: 2rem;
  bottom: 12rem;
  transform: rotate(15deg);
  opacity: .40;
}
.qualification__container {
  display: flex;
  
  justify-content: center; /* Center-align the items horizontally */
  gap: 2rem; /* Adjust the gap between items as needed */
}
/*=============== SERVICES ===============*/
.services__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  justify-items: center;
  max-width: 1200px; /* Adjust the max-width as needed */
  margin: 0 auto; /* Center the container */
}
.services__card{
  position: relative;
  width: 228px;
  height: 322px;
  background-color: var(--container-color);
  text-align: center;
  padding: 2.5rem 1rem;
  border-radius: 7.25rem;
  transition: background .4s;
}
.services__card i {
  display: block;
  font-size: 2rem;
  color: var(--title-color);
  margin-bottom: .5rem;
  transition: transform .8s;
}
.services__title{
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: .5rem;
}
.services__border{
  width: 248px;
  height: 342px;
  border: 1.8px solid var(--text-color-light);
  border-radius: 7.75rem;
  position: absolute;
  inset: 0;
  left: -10px;
  margin: auto;
  z-index: -1;
  transition: opacity .6s;
  opacity: 0;
}

.services__card:hover i {
  transform: rotateY(360deg);
}
.services__card:hover .services__border{
  opacity: 1;
}

/*=============== PROJECTS ===============*/
.section__title {
  @apply text-4xl font-bold text-center mb-4;
}

.section__subtitle {
  @apply text-2xl text-center block mb-8 ;
}

.projects__title {
  @apply text-2xl font-semibold text-gray-800 mb-2;
}

.project__description {
  @apply text-gray-600 mb-4;
}

.projects__button {
  @apply text-sky-600 font-bold hover:scale-105 transition-transform inline-flex items-center gap-2 text-lg;
}

.swiper-button-prev,
.swiper-button-next {
  @apply absolute top-1/2 transform -translate-y-1/2 w-12 h-12 text-2xl rounded-full flex items-center justify-center z-10 cursor-pointer bg-transparent transition duration-300;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.swiper-button-prev {
  @apply left-5;
}

.swiper-button-next {
  @apply right-5;
}

.swiper-pagination {
  @apply absolute bottom-2 left-1/2 transform -translate-x-1/2;
}

.projects__img {
  @apply w-full max-w-full h-auto rounded-lg mb-4;
}

.project__content {
  @apply bg-white shadow-lg rounded-lg p-6;
}
/*=============== CONTACT ===============*/
.contact__title {
  @apply flex justify-center items-center gap-2 text-sm font-semibold mb-10;
}
.contact__title i {
  @apply text-base;
}
.contact__info {
  @apply grid gap-8;
}
.contact__data {
  @apply grid gap-3;
}
.contact__data-title {
  @apply text-sm font-bold text-gray-800;
}
.contact__button {
  @apply inline-flex items-center gap-2 text-gray-800 text-sm;
}
.contact__button i {
  @apply text-base transition-transform duration-300 ease-in-out;
}
.contact__button:hover i {
  @apply transform translate-x-1;
}
.contact__form {
  @apply relative grid gap-8;
}
.contact__form-div {
  @apply relative h-16;
}
.contact__form-input {
  @apply absolute top-0 left-0 w-full h-full border-2 border-gray-300 rounded-2xl p-6 text-base text-gray-700 bg-transparent outline-none z-10;
}
.contact__form-tag {
  @apply absolute -top-3 left-5 z-20 bg-white text-gray-800 text-xs font-medium px-2 transition-colors duration-400;
}
.contact__form-area {
  @apply h-40 resize-none;
}
.contact__form .contact__button {
  @apply border-none bg-transparent text-xl font-semibold cursor-pointer outline-none mt-3;
}
.contact__form .contact__button i {
  @apply text-lg;
}
.contact__message {
  @apply text-sm absolute bottom-11 left-6;
}

/* Status color */
.color-red {
  @apply text-red-500;
}
.color-blue {
  @apply text-blue-600;
}
/*=============== FOOTER ===============*/

.footer__title {
  font-size: var(--h1-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: 1rem;
  color: var(--title-color);
}

.footer__link {
  color: var(--body-color);
}

.footer__link:hover {
  text-decoration: underline;
  color: var(--title-color);
}

.footer__social-link {
  font-size: 1.25rem;
  color: var(--body-color);
  transition: transform 0.3s ease;
}

.footer__social-link:hover {
  transform: scale(1.1);
  color: var(--title-color);
}

.footer__copy {
  display: block;
  margin: 4.5rem 0 0;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{
  width: .6rem;
  border-radius: .5rem;
  background-color: hsl(207,4%,75%);
}
::-webkit-scrollbar-thumb{
  background-color: hsl(207,4%,65%);
  border-radius: .5rem;
}
::-webkit-scrollbar-thumb:hover{
  background-color: hsl(207,4%,55%);
}


/*=============== SCROLL UP ===============*/
.scrollup {
  position: fixed;
  right: 1rem;
  bottom: 1rem; /* Set to 0 for absolutely no space at the bottom */
  background-color: var(--body-color);
  box-shadow: 0 4px 12px hsl(207, 24%, 35%, .15);
  display: inline-flex;
  padding: .35rem;
  border-radius: .25rem;
  font-size: 1.1rem;
  color: var(--text-color);
  z-index: var(--z-tooltip);
  transition: bottom .3s, transform .3s;
}

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

/* Show Scroll Up */
.show-scroll {
  bottom: 1rem; /* Adjust this to 0 for no space at all */
}


/*----------------Button css------*/
button {
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #3498db; /* Sky blue color */
  font-weight: bold;
  outline: none;
}

/* Hover effect */
button:hover {
  transform: scale(1.05); /* Scale up on hover */
  color: #2980b9; /* Darker blue on hover */
}

/* Unique animation for Hire Me button */
#hire-me-btn {
  animation: pulse 1.5s infinite; /* Example animation: pulsing effect */
}

@keyframes pulse {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}

/* Download CV button styling */
#download-cv-btn {
  background-color: #2ecc71; /* Green color */
  color: #fff; /* White text */
}

#download-cv-btn:hover {
  background-color: #27ae60; /* Darker green on hover */
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
/* Medium Devices */
@media screen and (min-width: 768px) {
  /* 2nd Skill with grid columns 2 */
  .skill-container:nth-child(2),
  .skill-container:nth-child(1) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .projects__container {
    display: grid;
    grid-template-columns: 1fr;
  }
  /* Qualification section flex, center, and gap for md */
  .qualification-container {
    display: flex;
    justify-content: center;
    gap: 2rem; /* Adjust gap as needed */
  }

  /* Connect section flex justify-between for md */
  .connect-container {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
  }
}

/* Small Devices */
@media screen and (max-width: 768px) {
  /* Qualification section grid for sm */
  .qualification-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Services section grid for sm */
  .services__container {
    display: grid;
    grid-template-columns: 2fr;
  }

  /* Project section to show 1 project for sm */
  .projects__container {
    display: grid;
    grid-template-columns: 1fr;
  }

  .projects__container .project-card {
    display: none;
  }

  .projects__container .project-card:nth-child(1) {
    display: block;
  }

  /* Connect section grid for sm */
  .connect-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media screen and (min-width: 1024px) {
  .header {
    position: fixed;
    top: 0;
    background-color: var(--body-color);
    transition: 0.4s;
  }
  
  

  .dark-theme .nav,
  .dark-theme .nav__menu {
    background-color: var(--body-color);
    box-shadow: none;
  }

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

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

  .section {
    padding-block: 8rem 0;
  }

  .home__title {
    font-size: 2.25rem;
  }

  /* 2nd Skill with grid columns 2 */
  .skill-container:nth-child(2),
  .skill-container:nth-child(1) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Qualification section flex and center for md and lg */
  .qualification-container {
    display: flex;
    justify-content: center;
  }

  /* Project section to show 32 projects for lg */
  .projects__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  .projects__container .project-card {
    display: block;
  }
 
  /* Connect section flex justify-between for md and lg */
  .connect-container {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
  }
}