@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

* {
  font-family: 'Lato', sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* outline: 1px solid red; */
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
span {
  color: #242424;
  text-align: center;
  line-height: 1.25;
}

h1 {
  font-size: 36px;
}

p {
  line-height: 1.5;
  font-size: 16px;
}

a {
  text-decoration: none;
  position: relative;
  transition: opacity 300ms ease;
}

i:hover {
  opacity: 0.7;
}

.link__hover-effect:hover {
  color: #6030B1;
}

.link__hover-effect:after {
  content: "";
  position: absolute;
  height: 3px;
  width: 0;
  bottom: -3px;
  right: 0;
  transition: all 300ms ease;
}

.link__hover-effect--white:after {
  background-color: #fff;
}

.link__hover-effect--black:after {
  background-color: #000;
}

.link__hover-effect:hover:after {
  width: 100%;
  left: 0;
}

li {
  list-style-type: none;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.container {
  padding: 50px 0;
}

.row {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 12px;
}

.text--purple {
  color: #6030b1;
}

section:nth-child(even) {
  background-color: #f8f8f8;
}

.section__title {
  margin-bottom: 20px;
}

/* hamburger-container */

.hamburger-container {
  width: max-content;
  position: absolute;
  top: 20px;
  right: 12px;
  color: rgb(6, 3, 3);
  transition: transform 0.5s ease;
  display: none;
}

/* We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down */
.hamburger-container .checkbox {
  opacity: 0;
  position: absolute;
}

/* Show an outline when the hamburger is selected using the keyboard. Older browsers don't support :focus-visible, so we will just use :focus here. */
.hamburger-container .checkbox:focus~.hamburger {
  /* Not all browsers support outline: auto, so set a sensible fallback outline. */
  outline: 2px solid white;
  outline: auto;
  outline-offset: 4px;
}

/* For newer browsers that do support :focus-visible, hide the outline when the checkbox isn't selected with the keyboard. */
@supports selector(:focus-visible) {
  .hamburger-container .checkbox:not(:focus-visible)~.hamburger {
    outline: none;
  }
}

/* Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer. */
.hamburger-container .drawer a {
  visibility: hidden;
  transition: visibility 0.5s linear;
}

/* Make the focusable elements in the drawer visible when it is open. */
.hamburger-container .checkbox:checked~.drawer a {
  visibility: visible;
}

.hamburger-container .checkbox:checked~.drawer {
  transform: translateX(0%);
}

.hamburger-container .checkbox:checked~.hamburger .slice:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}

.hamburger-container .checkbox:checked~.hamburger .slice:nth-child(2) {
  opacity: 0;
}

.hamburger-container .checkbox:checked~.hamburger .slice:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.hamburger {
  width: 32px;
  height: 32px;
  position: relative;
  display: block;
  transition: transform 0.5s ease;
  z-index: 3339999;
  cursor: pointer;
  padding-top: 5px;
}

.hamburger .slice {
  display: block;
  width: 100%;
  height: 2px;
  background-color: rgb(10, 8, 8);
  transition: all 0.5s ease;
}

.hamburger .slice:not(:first-child) {
  margin-top: 10px;
}

.drawer {
  position: fixed;
  left: 0;
  top: 68px;
  height: 60%;
  width: max-content;
  max-width: 100%;
  z-index: 99999;
  padding: 16px;
  background: rgba(8, 8, 6, 0.718);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.842);
}

.drawer .nav-list {
  padding: 0;
  list-style: none;
  margin-top: 6px;
  display: flex;
  line-height: 50px;
  flex-direction: column;
  align-items: center;
  /* margin-left: 20px; */
}

.drawer .nav-list .nav-list-item {
  /* padding-bottom: 10px; */
}

.nav-list-item {
  font-size: 25px;
  font-weight: 700;

  &:hover {
    color: #000;
  }
}


@media screen and (max-width: 600px) {
  .drawer {
    width: 100%;
  }

  .hamburger-container {
    display: inline-block;
    top: 20px;
    right: 25px;
  }
}

.content {
  margin-top: 52px;
  padding: 10px;
}

.nav-list-item>a {
  color: white;
  transition: all 1s;
}

.nav-list-item>a:hover {
  color: rgb(243, 78, 2);
}

/* NAVIGATION BAR */

nav {
  height: 100px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
}

.nav__link--list {
  display: flex;
}

.nav__link--anchor {
  margin: 0 12px;
  color: #242424;
  font-weight: 700;
}

.nav__link--anchor-primary {
  background-color: #6030b1;
  padding: 8px 20px;
  border-radius: 50px;
  color: white;
  transition: all 300ms ease;
}

.nav__link--anchor-primary:hover {
  background-color: #5d3eff;
}

.personal__logo {
  font-size: 24px;
  color: #6030b1;
  margin: 0 12px;
  font-weight: bold
}


/* ABOUT ME */

#about-me {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.about-me__info {
  display: flex;
  flex-direction: column;
}

.about-me__info--container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.about-me__picture--mask {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
  margin-bottom: 28px;
  transition: all 1s;
  border: 2px double rgba(255, 166, 0, 0.399);
  animation: animate-profile-picture 800ms 200ms backwards;
  box-shadow: 0px 3px 10px rgba(225, 255, 0, 0.769);

  &:hover {
    scale: 1.1;
  }

}

.about-me__picture--mask>img {
  border-radius: 50%;
  width: 220px;
  height: 220px;
  object-fit: contain;

}


@keyframes animate-profile-picture {
  0% {
    transform: scale(0);
  }

  80% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.about-me__picture {
  width: 150px;
  margin-top: 25px;
  margin-left: 3px;



  /* Improving my own picture */
  transform: scale(1.5);
  padding-top: 8px;
}

.about-me__info--title {
  margin-bottom: 16px;
  animation: fade-up 650ms 400ms backwards;
}

.about-me__info--para {
  font-size: 20px;
  margin-bottom: 28px;
  animation: fade-up 650ms 600ms backwards;
}

.about-me__link {
  font-size: 30px;
  color: #0e76a8;
  padding: 0 16px;

}

#resume-doc {
  background-color: #6030B1;
  font-size: 20px;
  box-shadow: 0px 3px 10px rgba(195, 193, 193, 0.606);
  color: #f8f8f8;
  border-radius: 8px;
  font-weight: 700;
  padding: 10px 20px;
  transition: all 1s;

  &:hover {
    background-color: rgb(236, 224, 4);
    scale: 0.9;
  }
}

.about-me__links {
  animation: fade-up 650ms 800ms backwards;
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-me__img--container {
  display: flex;
  background-color: #d6d3d21b;
  width: 100%;
  box-shadow: 5px 5px 8px rgba(185, 183, 183, 0.383);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px 0px;
  display: flex;
  align-items: center;
}

.about-head {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10px;
}

.about-head>h2 {
  font-size: 25px;
  color: #6030B1;

}

.about-head>h4 {
  font-weight: 600;
  margin-top: 8px;
  font-size: 15px;
  line-height: 20px;
}

.about-p {
  display: flex;
  max-width: 80%;
  align-items: center;
  margin: 20px 0px;
  justify-content: center;
  text-align: center;
}

.about-p>p {
  font-size: 18px;
}

.icon-linkedin>a>img {
  height: 60px;
  mix-blend-mode: color-burn;
  margin-top: 20px;
  object-fit: contain;

}

.icon-linkedin>a>img:hover {

  scale: 1.1;

}

/* .about-me__img {
  width: 100%;
  animation: fade-in 1200ms 800ms backwards;
} */

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.wave {
  display: inline-block;
  animation: animate-wave 500ms infinite ease-in-out;
}

@keyframes animate-wave {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(30deg);
  }

  100% {
    transform: rotate(0);
  }
}

/* TECH - STACK */

.language__img {
  width: 100%;
  max-width: 100px;
  transition: all 300ms;
  /* box-shadow: 0px 0px 2px black; */
}

.language:hover .language__img {
  filter: brightness(100%);
  opacity: 0.86;
  transform: scale(0.9);
}

.language {
  width: 25%;
  display: flex;
  justify-content: center;
  position: relative;
}

.language__img--wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 16px;
}

.language__list {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.language__name {
  position: absolute;
  bottom: 0;
  transform: scale(0);
  transition: all 300ms;
  font-size: 20px;
  opacity: 0;
}

.language:hover .language__name {
  transform: scale(1);
  opacity: 1;
}

/* PROJECTS */

.project {
  margin-bottom: 135px;
}

.project:last-child {
  margin-bottom: 40px;
}

.project__img {
  width: 100%;
  transition: all 500ms ease;
}

.project__wrapper {
  display: flex;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.project__wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #1c1d25;
  opacity: 0;
  transition: all 450ms ease;
  z-index: 2;
  transform: translateY(100%);
}

.project:hover .project__wrapper:before {
  transform: translateY(0);
  opacity: 0.7;
}

.project:hover .project__img {
  transform: scale(1.07);
  filter: blur(5px);
}

.project:hover .project__description {
  opacity: 1;
  transform: translateY(-50%);
}

.project__list {
  padding-top: 40px;
}

.project__description {
  position: absolute;
  top: 50%;
  left: 90px;
  transform: translateY(100%);
  max-width: 550px;
  z-index: 3;
  opacity: 0;
  transition: transform 450ms, opacity 300ms;
}

.project__description--title {
  font-size: 30px;

}

.project__description--para {
  margin: 12px 0;
}

.project__description--link {
  font-size: 20px;
  margin-right: 16px;
}

.project__description--title,
.project__description--sub-title,
.project__description--para,
.project__description--link {
  text-align: left;
  color: #fff;
}

/* Exprience section */
.exe-11 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;

}

.experi-con {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-content: center;
  gap: 30px;
  margin: 50px 0px;
}

.experi-2 {
  /* border: 1px solid black; */
  max-width: 500px;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgb(186, 184, 184);
  padding: 20px;
}

.exprp {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 25px;
}

/* contact section */
.cont-con {
  display: flex;
  margin: 30px 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form-mai {
  margin-top: 20px;

}

.con-input {
  border: 1px solid rgb(188, 182, 182);
  max-width: 415px;
  height: 40px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(187, 185, 185, 0.593);

  &:hover {
    box-shadow: 0px 0px 10px rgba(147, 152, 254, 0.334);

  }
}

.con-input>input {
  outline: none;
  border: none;
  height: 20px;
  font-size: 15px;
  background-color: #fff;

  padding-left: 8px;
}

textarea {
  margin-top: 2px;
  outline: none;
  font-size: 15px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid rgb(188, 182, 182);

  border-radius: 10px;

  &:hover {
    box-shadow: 0px 0px 10px rgba(147, 152, 254, 0.345);

  }
}

.cont-btn {
  display: flex;
  justify-content: center;
  align-self: center;
  margin-top: 20px;
}

.cont-btn>button {
  cursor: pointer;
  background-color: #5d3eff;
  color: #fff;
  outline: none;
  border: none;
  box-shadow: 0px 0px 5px rgba(187, 185, 185, 0.593);

  font-size: 19px;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.5s;
}

.cont-btn>button:hover {
  background-color: #f59a09;
  scale: 1.1;
}

/* FOOTER */

footer {
  background-color: #242424;
}

.footer__social--list {
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 28px;
}

.footer__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8% 0;
}

.fa-solid,
.fa-brands {
  font-size: 30px;
  background-color: #f8f8f8;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0px 1px 5px rgba(255, 255, 255, 0.541);

  &:hover {
    scale: 1.1;
  }

}

.footer__logo--img {
  width: 100px;
  border-radius: 50%;
  height: 100px;
  padding: 2px;
  border: 2px solid yellow;
  box-shadow: 0px 0px 8px #fff;
}

.footer__social--link,
.footer__copyright,
.footer__logo--popper {
  color: #fff;
}

.footer__logo--popper {
  position: absolute;
  right: 0;
  top: 30px;
  font-weight: 700;
  opacity: 0;
  transition: all 300ms ease;
}

.footer__anchor {
  margin-bottom: 20px;
  position: relative;
}

.footer__anchor:hover .footer__logo--popper {
  transform: translateX(60px);
  opacity: 1;
}

/* Small phones, tablets, large smartphones */
@media (max-width: 768px) {
  nav {
    height: 68px;
  }

  h1 {
    font-size: 28px;
  }

  .about-me__info--para {
    font-size: 18px;
  }

  .language {
    width: calc(100% / 3);
  }

  .project__description--para {
    font-size: 14px;
  }

  .project__description {
    left: 30px;
    padding-right: 30px;
  }

}
/* top btn */
#myBtn1 {
  
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
   border: none; 
  outline: none;
  border-radius: 50%;
}

 .btn-0:hover {
  background-color: #f59b09fb;
  color: #0e0707;
  font-size: 25px;
 box-shadow: 0px 0px 10px rgba(117, 116, 116, 0.584);
  transform: rotate(-180deg);
}
.btn-0{
  background-color: #f59a09;
  color: #fff;
  font-size: 25px;
 transition: all 0.4s;

}
/* SMALL PHONES */
@media screen and (max-width: 600px) {
  nav {
    width: 100%;
    position: fixed;
    background-color: #eeeef0;
    top: 0;
    z-index: 9999;
  }

  .about-me__picture--mask {
    display: flex;
    flex-direction: column;
    align-items: center;

  }

  .about-me__info--container {
    width: 100%;
    margin-top: 100px;
  }

  .about-me__info {
    width: 100%;
    padding: 0;
  }

  .flex {
    width: 100%;
  }

  .about-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

  }

  .row {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;

  }

  .language {
    display: flex;
    width: 50%;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid black; */
  }

  .project__wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid black; */
  }

  .container {
    width: 100%;
  }

  .exe-11,
  .form-mai {
    width: 100%;
  }

  .experi-con {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;

  }

  .form-mai {
    display: flex;
    /* width: 100%; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .con-input {
    width: 80%;
  }

  .tex-a {
    width: 80%;
    display: flex;
    /* width: 100%; */
    flex-direction: column;
    align-self: center;
  }

  .row {
    padding: 0;
  }

  .icon-linkedin {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .cont-con {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  footer {
    width: 100%;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .footer__social--list,
  .footer__row {
    width: 50%;
    display: flex;
    width: 100%;
    align-items: center;
  }

  .project {
    margin-bottom: 50px;
  }

  .nav__link {
    display: none;
  }

  .project__wrapper {
    border-radius: 0;
  }


  .project__description {
    padding: 0;
    left: 0;
    width: 100%;
  }

  .project__description--para {
    display: none;
  }

  .about-me__info--para {
    width: 85%;
  }

  .project__description--links {
    display: flex;
    justify-content: center;
  }

  .project__description--title {
    font-size: 32px;
    line-height: 1;
    text-align: center;
  }

  .project__description--sub-title {
    text-align: center;
    margin: 12px 0;
  }

  .about-me__img--container {
    width: 100%;
  }

  .about-head>h4 {
    width: 100%;
  }

}