/** ===================== RESET ===================== **/
/* *,
*::before,
*::after {
  box-sizing: border-box;
} */

/* *font* */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
  font-family: "Inter", sans-serif, "Poppins";
  height: 100%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/** ===================== PRESET ===================== **/

/** ===================== ANIMATION ===================== **/

/* *Gradient BG Animation* */

.gradient-background {
  background: linear-gradient(-45deg, #1619cc, #5632e3, #0c64de, #0fd2c5);
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;

  width: 100%;
  padding: 36px 60px 80px; /* Simplified padding shorthand */
  z-index: -1;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* *Text Gradient* */
/* Todo */

/* *Footer Gradient Animation* */
.footer-gradient {
  width: 100%;
  background: linear-gradient(270deg, #6b73ff, #000dff);
  background-size: 300% 300%;
  animation: footerGradient 15s ease infinite;
  z-index: -1;
}

@keyframes footerGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* *Text-hightlight-animation* */

.hightlight-animation {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 50%,
    #e8dd0f 50%
  );
  background-position: -0% 0;
  background-size: 200% auto;
  text-decoration: none;
  transition: background-position 1s ease;
}
.hightlight-animation:hover {
  color: #000;
  background-position: -99.99% 0;
}

/** ===================== STICKER EFFECT ===================== **/

.sticker-text {
  font-family: "Arial", sans-serif;
  color: #fff;
  background-color: #20db90;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 5px 5px 0 #000, 10px 10px 0 #ff6347, 15px 15px 0 #000;
  position: relative;
  display: inline-block;
  transform: rotate(5deg);
}

.sticker-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px dashed #000;
  border-radius: 10px;
  box-sizing: border-box;
  z-index: -1;
}

.sticker-text:hover {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: sticker-gradient 5s ease infinite;
  background-size: 400% 400%;
}

@keyframes sticker-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.comic-sticker-text {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 4rem;
  color: #fff;
  background-color: #5f3bff;
  padding: 10px 20px;
  border-radius: 15px;
  box-shadow: 5px 5px 0 #000, 10px 10px 0 #ffeb3b, 15px 15px 0 #000;
  position: relative;
  display: inline-block;
  transform: rotate(-10deg);
}

.comic-sticker-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px dotted #000;
  border-radius: 15px;
  box-sizing: border-box;
  z-index: -1;
}

/** ===================== HIGHTLIGHT EFFECT ===================== **/

/* *solid underline* */
.underline-01 {
  -webkit-text-decoration: underline solid #17b7ed;
  text-decoration: underline solid #17b7ed;
}
/* *double underline* */
.underline-02 {
  -webkit-text-decoration: underline double #b373b3;
  text-decoration: underline double #b373b3;
}
/* *dotted underline* */
.underline-03 {
  -webkit-text-decoration: underline dotted #59bfb3;
  text-decoration: underline dotted #59bfb3;
}
/* *dashed underline* */
.underline-04 {
  -webkit-text-decoration: underline dashed #f2a640;
  text-decoration: underline dashed #f2a640;
}
/* *wavy underline* */
.underline-05 {
  -webkit-text-decoration: underline wavy #22a4be;
  text-decoration: underline wavy #22a4be;
}
/* *gradient underline* */
.underline-06 {
  background-image: linear-gradient(90deg, #dcacea, #e4c8a2);
  background-position: bottom;
  background-size: 100% 10%;
  background-repeat: no-repeat;
}

/* *hightlight* */

/* *low-hightlight* */

/** ===================== Navbar EFFECT ===================== **/

.element {
  border: 0px none rgba(139, 34, 224, 0);
  border-radius: 75px;
  background-color: rgb(227, 227, 227);
  box-shadow: inset -1px -1px 20px 0px rgba(102, 156, 255, 0.23),
    inset 1px 1px 24px 0px rgba(219, 235, 255, 0.6);
}

/** ===================== TEXT EFFECT ===================== **/

/* *Multi-layer Text Shadow* */
.text-shadow {
  color: #ffffff;
  font-family: russo one;
  text-transform: uppercase;
  /* font-size: 240px; */
  letter-spacing: 25px;
  cursor: pointer;
  transition: text-shadow 1s;
}
.text-shadow:hover {
  text-shadow: 2px 2px #23036a, 10px 10px #3700b3, 20px 20px #6200ee,
    30px 30px #7f39fb, 40px 40px #985eff;
}

/* *Background-Animation* */

/* *Text-gradient */
.text-gradient-01 {
  background: linear-gradient(to right, hsl(258, 89%, 46%), hsl(145, 90%, 48%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

/* *Linear-wipe* */
.linear-wipe {
  text-align: center;

  background: linear-gradient(
    to right,
    #fff 20%,
    #ff0 40%,
    #ff0 60%,
    #ffffff 80%
  );
  background-size: 200% auto;

  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 1s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.linear-wipe-02 {
  background: linear-gradient(
    to right,
    #e5f00c 20%,
    #dadada 30%,
    #e5f00c 70%,
    #dfdfdf 80%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}

@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/** ===================== STAR ===================== **/

/** ===================== Progress Bar ===================== **/

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: rgba(76, 175, 80, 0.5); /* Semi-transparent green */
  z-index: 0;
}

/** ===================== HEADER & NAVBAR ===================== **/

/* *Header Style* */

header {
  /* border: 2px solid red; */
}

.nav-container {
  position: fixed;
  max-width: 1217px;
  width: 100%;
  margin: 0 auto;
  gap: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px 32px;
  top: 0; /* Adjust if needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;

  /* border: 2px solid red; */
}

.middle-nav {
  position: relative;
  max-width: 386px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center; /* Center vertically if needed */
  /* gap: 10px;  */
  z-index: 1;
}

.progress-bar {
  position: absolute;
  width: 5%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgb(19, 218, 79) 0%,
    rgb(198, 229, 21) 35%,
    rgba(0, 212, 255, 1) 100%
  );
  z-index: 0%;
  border-radius: 40px;
}

nav li {
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
}

nav ul li.active {
  background: #1448ff;
  color: white;
  transition: all 0.5s ease;
}

nav ul li:hover {
  background: #1448ff;
  color: white;
  transition: all 0.5s ease;
}

.left-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.left-nav h1 {
  color: var(--Font, #fff);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* .left-nav p {
  color: var(--Font, #fff);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
} */

.middle-nav {
  display: flex;
  padding: 4px;
  align-items: flex-start;
  gap: 4px;

  border-radius: 40px;
}

.right-nav {
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-align: left;
}

.right-nav h1 {
  transition: text-decoration 1s ease;
}

.right-nav:hover h1 {
  text-decoration: underline;
  text-decoration-color: yellow;
}

/** ===================== INTRO SECTION ===================== **/

/* *1. Intro Style* */

.intro-container {
  padding: 172px 0px 0px;
  display: flex;
  /* border: 1px solid red; */
  max-width: 1217px;
  width: 100%;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}

.left-intro {
  width: 297px;
  flex-shrink: 0;
  text-align: left;
  padding-top: 20px;
}

.left-intro p {
  display: inline;
  width: 100%;
  font-family: poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: auto;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255);
}

.intro-content {
  margin: 0 auto;
  color: #ffffff;
  font-family: Inter;
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 3px;
}

/* *2. Intro Font* */

.intro-content .italic-text {
  font-style: italic;
}

.intro-content .name {
  font-weight: 800;
}

.intro-content .designer {
  font-weight: 800;
}

/* *3. Emoji Sticker* */

.emoji-sticker img {
  transition: box-shadow 0.3s ease-in-out;
  border-radius: 300px;
}

.emoji-sticker img:hover {
  box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.6),
    0 0 25px 10px rgba(0, 255, 255, 0.4);
}

/* *4. Works Style* */
.works {
  padding: 240px 0px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 60px;
  align-self: stretch;
}

.works h2 {
  color: white;
  font-family: Inter;
  font-size: 128px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 2.8px;
  text-shadow: -12px 0 #7f39fb, 0 -2px #23036a;
}

.work-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.work-col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  margin: 0 auto;
  gap: 24px;
}

.work-item {
  position: relative;
  width: 100%;
  max-width: 555px;

  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.work-item img {
  border: 8px solid white;
  border-radius: 100px;
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease;
  object-fit: cover; /* Ensures the image covers the entire area */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 8px solid white;
  border-radius: 100px;

  background: rgba(0, 0, 0, 0.5); /* Glass effect background */
  color: #fff;
  opacity: 0;

  transition: opacity 0.3s ease-in-out;
}

.content h2 {
  font-size: 56px;
  text-shadow: -6px 0 #7f39fb;
}

.work-item:hover img {
  /* bottom: 0; */
  filter: blur(4px);
}

.content h2,
.content p {
  transition: transform 1s ease, text-decoration 1s ease;
  position: relative;
}

.content h2:hover,
.content p:hover {
  /* transform: scale(1.1); */
  text-decoration: underline;
  text-decoration-color: yellow;

  animation: shake 1s ease;
}

@keyframes shake {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

.work-item:hover .content {
  opacity: 1;
}

/** ===================== Bottom Col ===================== **/

.bottom-col {
}

/** ===================== ABOUT ME ===================== **/

.about-me {
  margin-top: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 160px;
  align-self: stretch;
  padding-bottom: 80px;
  border-radius: 40px;
  background-color: #fff;
}

/* *About Style* */

.about-intro {
  text-align: left;
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.about-intro h2 {
  color: #000;

  font-family: Inter;
  font-size: 56px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 2.8px;
}

.about-intro p {
  color: rgba(0, 0, 0, 0.8);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 150% */
  letter-spacing: 0.24px;
}

/* *Resume* */

.resume-download {
  display: flex;
  padding: 8px 16px 8px 12px;
  align-items: center;
  border-radius: 40px;
  border: 2px solid var(--Blue, #1448ff);
  color: var(--Blue, #1448ff);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  letter-spacing: 0.16px;
  transition: all 0.5s ease;
}

.resume-download:hover {
  background: #1448ff;
  color: white;
}

.resume-download:hover svg path {
  transition: all 0.5s ease;
  fill: #ffffff; /* Change this to your desired hover color */
}

/* *Channels Styles* */
.channels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  align-self: stretch;
  text-align: left;
}

.channels h2 {
  color: var(--BG, #000);

  font-family: Inter;
  font-size: 56px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 2.8px;
}

.channel-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.channel-item {
  position: relative;
  border-radius: 40px;
  padding: 0;
  margin: 0;

  text-align: center;

  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.channel-item:hover {
  transform: scale(1.05);

  box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.6),
    0 0 25px 10px rgba(0, 255, 255, 0.4);
}

.channel-item img {
  /* border: 4px solid blue; */

  display: block;
  border-radius: 45px;
  width: 100%;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.channel-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  border-radius: 40px;
  transition: opacity 0.3s ease;

  /* border: 4px solid white; */
}

.channel-item:hover .overlay {
  opacity: 1;
}

/** ===================== FOOTER ===================== **/

/* * Footer Style* */

footer {
  /* background-color: #007bff; */
  position: absolute;
  color: white;
  width: 100%;
  padding: 60px 32px 0px;
  margin-top: -40px;
  z-index: -1;
  /* border: 1px solid red; */
}

.footer-container {
  width: 100%;
  /* border: 1px solid red; */
  margin: 0 auto;
  max-width: 1217px;
  justify-content: center;
  align-items: center;
}

.footer-heading {
  color: var(--Font, #fff);

  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-heading p {
}

.footer-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  margin-top: 60px;
}

.footer-intro p {
  color: var(--Font, #fff);

  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px; /* 133.333% */
  letter-spacing: 0.24px;
}

.footer-intro h3 {
  color: var(--Font, #fff);
  font-family: Inter;
  font-size: 64px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px; /* 50% */
  letter-spacing: 0.64px;
}

.social-media {
  display: flex;
  margin: 72px 0;
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: flex-start;
  gap: 29px;
}

.social-icon {
  display: flex;
  width: 48px;
  height: 48px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 40px;
  border: 2px solid var(--Font, #fff);
}

/* .social-icon img {
  width: 30px;
  height: 30px;
} */

.social-icon:hover {
  /* border: 2px solid #1448ff; */
  transition: all 0.5s ease;
  background: white;
}

.social-icon:hover svg path {
  transition: all 0.5s ease;
  fill: #1448ff; /* Change this to your desired hover color */
}

/** ===================== RESPONSIVE DESIGN ===================== **/

/* *Responsive Style* */

/* @media (max-width: 1111px) {
  .intro-content {
    font-size: 48px;
  }
}
@media (max-width: 975px) {
  .intro-content {
    font-size: 36px;
  }
} */

@media (max-width: 1080px) {
  .intro-container {
    display: grid;
    grid-template-rows: auto auto; /* Two rows */
    gap: 20px; /* Adjust the gap between items as needed */
    padding: 172px 0px 0px;
    max-width: 1217px;
    width: 100%;
    margin: 0 auto;
  }

  .middle-intro {
    grid-column: 2; /* Place in the second column */
    grid-row: 1 / 3; /* Span across both rows */
    text-align: left; /* Align text to the left */
    align-self: center;
  }

  .emoji-sticker {
    grid-column: 1; /* Place in the first column */
    grid-row: 1; /* Place in the first row */
    align-self: flex-end;
    justify-self: start; /* Align to the left */
    /* grid-template-columns: minmax(0, 100px) 1fr; */
  }

  .emoji-sticker img {
    width: 88px;
    height: 88px;
  }

  .left-intro {
    grid-column: 1; /* Place in the first column */
    grid-row: 2; /* Place in the second row */
    justify-self: start; /* Align to the left */
    align-self: flex-start;
  }

  .works {
    padding-top: 120px;
  }

  .work-col {
    grid-template-columns: auto;
  }

  .about-intro {
    min-width: 574px;
  }
}

@media (max-width: 963px) {
  .intro-content {
    font-size: 52px;
  }
  .about-intro {
    min-width: 480px;
  }
}
@media (max-width: 865px) {
  .intro-content {
    font-size: 48px;
  }
  .about-intro {
    min-width: 360px;
  }

  .emoji-sticker img {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 796px) {
  .nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
  }

  .middle-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
    justify-self: center;
    margin-bottom: 20px; /* Adjust as needed */
  }

  .left-nav {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .right-nav {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .intro-container {
    grid-template-rows: auto auto auto; /* Three rows */
    justify-content: center;
    padding-top: 200px;
  }

  .middle-intro {
    grid-column: 1 / -1; /* Span across all columns */
    grid-row: 1; /* Place in the first row */
  }

  .emoji-sticker {
    grid-column: 1 / -1; /* Span across all columns */
    grid-row: 2; /* Place in the second row */
  }

  .left-intro {
    grid-column: 1 / -1; /* Span across all columns */
    grid-row: 3; /* Place in the third row */
  }

  .works > h2 {
    font-size: 100px;
    /* color: red; */
  }
}

@media (max-width: 684px) {
  .content {
    border-radius: 64px;
  }

  .work-item img {
    border-radius: 64px;
  }
  .gradient-background {
    padding-left: 30px;
    padding-right: 30px;
  }
  .channel-grid {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 600px) {
  /* .content {
    border-radius: 32px;
  }
  .work-item img {
    border-radius: 32px;
  } */
  .works > h2 {
    font-size: 96px;
    /* color: red; */
  }
  .content h2 {
    font-size: 48px;
  }

  .about-intro {
    min-width: 300px;
  }
}

@media (max-width: 480px) {
  .works > h2 {
    font-size: 64px;
    /* color: red; */
  }
  .work-grid {
    grid-template-columns: 1fr;
  }

  .channel-grid {
    grid-template-columns: 1fr;
  }

  .channels h2 {
    font-size: 48px;
  }

  /* .social-media {
    display: block;
    text-align: center;
  } */

  .footer-intro h3 {
    /* line-height: auto */
    line-height: 1.2;
    /* color: red; */
  }
}