.portfolio {
  background-color: #ffffff;
  display: grid;
  justify-items: center;
  align-items: start;
  width: 100vw;
}

.portfolio .div {
  background-color: #ffffff;
  overflow: hidden;
  width: 1980px;
  height: 4400px;
  position: relative;
}

.portfolio .overlap {
  position: absolute;
  width: 1980px;
  height: 4400px;
  top: 0;
  left: 0;
}

.portfolio .background {
  position: absolute;
  width: 1980px;
  height: 4298px;
  top: 102px;
  left: 0;
}

.portfolio .gradient {
  position: absolute;
  width: 642px;
  height: 720px;
  top: 2526px;
  left: 867px;
}

.portfolio .img {
  position: absolute;
  width: 625px;
  height: 700px;
  top: 1022px;
  left: 739px;
}

.portfolio .gradient-2 {
  position: absolute;
  width: 625px;
  height: 700px;
  top: 2604px;
  left: 1166px;
}

.portfolio .gradient-3 {
  position: absolute;
  width: 572px;
  height: 641px;
  top: 3166px;
  left: 274px;
}

.portfolio .gradient-4 {
  position: absolute;
  width: 385px;
  height: 431px;
  top: 220px;
  left: 385px;
}

.portfolio .div-2 {
  position: absolute;
  width: 583px;
  height: 341px;
  top: 2762px;
  left: 1047px;
}

.portfolio .screenshot {
  top: 2494px;
  left: 90px;
  position: absolute;
  width: 583px;
  height: 341px;
}

.portfolio .screenshot-2 {
  top: 0;
  left: 0;
  position: absolute;
  width: 583px;
  height: 341px;
}

.portfolio .screenshot-3 {
  position: absolute;
  width: 568px;
  height: 354px;
  top: 3040px;
  left: 82px;
}

.portfolio .div-3 {
  position: absolute;
  width: 583px;
  height: 341px;
  top: 3330px;
  left: 460px;
}

.portfolio .overlap-group {
  position: absolute;
  width: 583px;
  height: 341px;
  top: 0;
  left: 0;
  background-image: url(./img/screenshot-2022-09-30-at-10-49-3-2.png);
  background-size: 100% 100%;
}

.portfolio .screenshot-4 {
  position: absolute;
  width: 549px;
  height: 316px;
  top: 25px;
  left: 0;
  object-fit: cover;
}

.portfolio .header {
  position: absolute;
  width: 1980px;
  height: 138px;
  top: 0;
  left: 0;
}

.portfolio .text-wrapper {
  width: 66px;
  height: 27px;
  top: 42px;
  left: 1111px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.40px;
  position: absolute;
  color: #ffffff;
  line-height: normal;
}

.portfolio .text-wrapper-2 {
  position: absolute;
  width: 68px;
  height: 27px;
  top: 42px;
  left: 1345px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.40px;
  line-height: normal;
}

.portfolio .text-wrapper-3 {
  position: absolute;
  width: 49px;
  height: 27px;
  top: 42px;
  left: 1581px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.40px;
  line-height: normal;
}

.portfolio .i-m-a-code-architect {
  position: absolute;
  width: 674px;
  height: 90px;
  top: 660px;
  left: 474px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 50px;
  letter-spacing: 1.00px;
  line-height: normal;
}

.portfolio .judges-a-book-by-its {
  /* Judges a book by its cover... */

  position: absolute;
  width: 386px;
  height: 126px;
  left: 727px;
  top: 379.68px;

  font-family: "Preahvihear";
  font-style: normal;
  font-weight: 400;
  font-size: 50px;
  line-height: 126.66%;
  /* or 63px */
  display: flex;
  align-items: center;
  letter-spacing: 0.02em;

  color: #ffffff;

  margin-bottom: 20px;
}

.portfolio .span {
  color: #ffffff;
  letter-spacing: 0px;
}

.portfolio .text-wrapper-4 {
  color: #7127ba;
  letter-spacing: 0px;
}

.portfolio .text-wrapper-5 {
  position: absolute;
  height: 31px;
  top: 351px;
  left: 718px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0.34px;
  line-height: normal;
  text-decoration: underline;
  margin-bottom: 15px;
}

.portfolio .p {
  position: absolute;
  height: 20px;
  top: 508px;
  left: 727px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.22px;
  line-height: normal;
  margin-top: 10px;
  margin-bottom: 15px;
}

.portfolio .text-wrapper-6 {
  position: absolute;
  width: 892px;
  height: 120px;
  top: 844px;
  left: 477px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 22px;
  letter-spacing: 0.44px;
  line-height: normal;
}

.portfolio .text-wrapper-7 {
  position: absolute;
  height: 72px;
  top: 1134px;
  left: 468px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 40px;
  letter-spacing: 0.80px;
  line-height: normal;
}

.portfolio .hello-i-am-hazem {
  position: absolute;
  width: 245px;
  height: 20px;
  top: 245px;
  left: 707px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 19px;
  text-align: center;
  letter-spacing: -0.50px;
  line-height: 97px;
  white-space: nowrap;
  margin-bottom: 20px;
}

.portfolio .text-wrapper-8 {
  color: #ffffff;
  letter-spacing: -0.10px;
}

.portfolio .text-wrapper-9 {
  color: #7127ba;
  letter-spacing: -0.10px;
}

.portfolio .arrow {
  position: absolute;
  width: 92px;
  height: 82px;
  top: 242px;
  left: 618px;
  transform: rotate(-148.29deg);
}

.portfolio .vector {
  position: absolute;
  width: 78px;
  height: 48px;
  top: 17px;
  left: 7px;
  transform: rotate(148.29deg);
}

.portfolio .ellipse {
  position: absolute;
  width: 188px;
  height: 60px;
  top: 437px;
  left: 930px;
}

.portfolio .text-wrapper-10 {
  height: 45px;
  top: 3904px;
  left: 458px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 0.50px;
  position: absolute;
  color: #ffffff;
  line-height: normal;
  margin-bottom: 20px;
}

.portfolio .i-m-currently {
  position: absolute;
  height: 108px;
  top: 4022px;
  left: 458px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.30px;
  line-height: normal;
}

.portfolio .logo {
  position: absolute;
  width: 35px;
  height: 43px;
  top: 35px;
  left: 497px;
}

.portfolio .designation {
  position: absolute;
  width: 594px;
  height: 43px;
  top: 738px;
  left: 474px;
}

.portfolio .currently-i-m-a-code {
  position: absolute;
  width: 592px;
  height: 43px;
  top: 0;
  left: 0;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 21px;
  letter-spacing: 0.42px;
  line-height: normal;
}

.portfolio .text-wrapper-11 {
  color: #ffffff;
  letter-spacing: 0.09px;
}

.portfolio .text-wrapper-12 {
  color: #1877f2;
  letter-spacing: 0.09px;
}

/* Added proper styling for Instagram logo */
.portfolio .instagram-logo {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0 5px;
  transition: transform 0.3s ease;
}

.portfolio .experience {
  height: 193px;
  top: 1251px;
  left: 463px;
  position: absolute;
  width: 574px;
  margin-bottom: 30px;
}

.portfolio .overlap-2 {
  position: relative;
  width: 592px;
  height: 197px;
  top: -4px;
  left: -22px;
}

.portfolio .div-wrapper {
  position: relative;
  width: 119px;
  height: 33px;
  background-image: url(./img/rectangle-977-3.svg);
  background-size: 100% 100%;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(113, 39, 186, 0.2);
}

.portfolio .rectangle {
  top: 4px;
  background: linear-gradient(
    110deg,
    rgba(19, 4, 40, 1) 7%,
    rgba(37, 16, 67, 1) 34%,
    rgba(56, 18, 109, 1) 57%,
    rgba(38, 16, 69, 1) 85%,
    rgba(25, 6, 52, 1) 100%
  );
  position: absolute;
  width: 570px;
  height: 193px;
  left: 22px;
  border-radius: 15px;
  box-shadow: 4px 7px 26px #0000001f;
}

.portfolio .mask-group {
  position: absolute;
  width: 592px;
  height: 172px;
  top: 0;
  left: 0;
}

.portfolio .text-wrapper-13 {
  position: absolute;
  width: 256px;
  top: 50px;
  left: 219px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 26px;
  letter-spacing: 0;
  line-height: 32.5px;
  white-space: nowrap;
  margin-bottom: 10px;
}

.portfolio .building-interactive {
  position: absolute;
  width: 232px;
  top: 85px;
  left: 220px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 8px;
  letter-spacing: 0;
  line-height: 10.5px;
  margin-bottom: 15px;
}

.portfolio .learn-more {
  position: absolute;
  width: 121px;
  height: 33px;
  top: 116px;
  left: 217px;
}

.portfolio .div-wrapper {
  position: relative;
  width: 119px;
  height: 33px;
  background-image: url(./img/rectangle-977-3.svg);
  background-size: 100% 100%;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(113, 39, 186, 0.2);
}

.portfolio .div-wrapper:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(113, 39, 186, 0.4);
  filter: brightness(1.1);
}

.portfolio .div-wrapper:active {
  transform: translateY(0) scale(0.98);
  transition: all 0.1s ease;
}

.portfolio .div-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.portfolio .div-wrapper:hover::before {
  left: 100%;
}

.portfolio .text-wrapper-14 {
  position: absolute;
  width: 77px;
  top: 10px;
  left: 19px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.5px;
  line-height: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.portfolio .text-wrapper-14:hover {
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.portfolio .group {
  position: absolute;
  width: 122px;
  height: 115px;
  top: 40px;
  left: 72px;
}

.portfolio .div-4 {
  position: relative;
  height: 341px;
}

.portfolio .overlap-wrapper {
  height: 196px;
  top: 1461px;
  left: 463px;
  position: absolute;
  width: 574px;
  margin-bottom: 30px;
}

.portfolio .overlap-3 {
  position: relative;
  width: 592px;
  height: 200px;
  top: -4px;
  left: -22px;
}

.portfolio .rectangle-2 {
  top: 7px;
  background-color: #2b114f;
  position: absolute;
  width: 570px;
  height: 193px;
  left: 22px;
  border-radius: 15px;
  box-shadow: 4px 7px 26px #0000001f;
}

.portfolio .rectangle-3 {
  top: 7px;
  background: linear-gradient(
    96deg,
    rgba(19, 4, 40, 1) 7%,
    rgba(37, 16, 67, 1) 34%,
    rgba(56, 18, 109, 1) 57%,
    rgba(38, 16, 69, 1) 85%,
    rgba(25, 6, 52, 1) 100%
  );
  position: absolute;
  width: 570px;
  height: 193px;
  left: 22px;
  border-radius: 15px;
  box-shadow: 4px 7px 26px #0000001f;
}

.portfolio .text-wrapper-15 {
  position: absolute;
  width: 256px;
  top: 49px;
  left: 219px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 26px;
  letter-spacing: 0;
  line-height: 32.5px;
  white-space: nowrap;
  margin-bottom: 10px;

  /* زرار زي text-wrapper-14 */
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.portfolio .text-wrapper-15:hover {
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.portfolio .text-wrapper-16 {
  position: absolute;
  width: 232px;
  top: 84px;
  left: 220px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 8px;
  letter-spacing: 0;
  line-height: 10.5px;
  margin-bottom: 15px;
  line-height: 1.4;
}

.portfolio .overlap-group-wrapper {
  position: absolute;
  width: 121px;
  height: 33px;
  top: 120px;
  left: 217px;
}

.portfolio .overlap-group-2 {
  position: relative;
  width: 119px;
  height: 33px;
  background-image: url(./img/rectangle-977-2.svg);
  background-size: 100% 100%;
}

.portfolio .group-2 {
  position: absolute;
  width: 120px;
  height: 117px;
  top: 44px;
  left: 78px;
}

.portfolio .experience-2 {
  height: 196px;
  top: 1458px;
  left: 1055px;
  position: absolute;
  width: 574px;
  margin-bottom: 30px;
}

.portfolio .rectangle-4 {
  top: 7px;
  background: linear-gradient(
    150deg,
    rgba(19, 4, 40, 1) 7%,
    rgba(37, 16, 67, 1) 34%,
    rgba(56, 18, 109, 1) 57%,
    rgba(38, 16, 69, 1) 85%,
    rgba(25, 6, 52, 1) 100%
  );
  position: absolute;
  width: 570px;
  height: 193px;
  left: 22px;
  border-radius: 15px;
  box-shadow: 4px 7px 26px #0000001f;
}

.portfolio .text-wrapper-17 {
  position: absolute;
  width: 256px;
  top: 49px;
  left: 219px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 26px;
  letter-spacing: 0;
  line-height: 32.5px;
  white-space: nowrap;
  margin-bottom: 10px;
}

.portfolio .text-wrapper-18 {
  position: absolute;
  width: 232px;
  top: 84px;
  left: 220px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 8px;
  letter-spacing: 0;
  line-height: 10.5px;
  margin-bottom: 15px;
  line-height: 1.4;
}

.portfolio .learn-more-2 {
  position: absolute;
  width: 121px;
  height: 33px;
  top: 126px;
  left: 217px;
}

.portfolio .overlap-group-3 {
  position: relative;
  width: 119px;
  height: 33px;
  background-image: url(./img/rectangle-977-4.svg);
  background-size: 100% 100%;
}

.portfolio .icons {
  position: absolute;
  width: 114px;
  height: 97px;
  top: 53px;
  left: 83px;
}

.portfolio .card {
  position: absolute;
  width: 669px;
  height: 165px;
  top: 2886px;
  left: 460px;
}

.portfolio .portfolio-text {
  position: absolute;
  width: 553px;
  height: 333px;
  top: 2786px;
  left: 462px;
}

.portfolio .an-interactive-web {
  position: absolute;
  height: 135px;
  top: 118px;
  left: 12px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ccd6f6;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1.6;
  margin-bottom: 25px;
}

.portfolio .overlap-4 {
  position: absolute;
  width: 379px;
  height: 70px;
  top: 0;
  left: 0;
}

.portfolio .text-wrapper-19 {
  position: absolute;
  height: 51px;
  top: 19px;
  left: 0;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ccd6f6;
  font-size: 26px;
  letter-spacing: 0.68px;
  line-height: normal;
  margin-bottom: 20px;
}

.portfolio .featured-project {
  position: absolute;
  height: 24px;
  top: 0;
  left: 0;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #9757d3;
  font-size: 16px;
  letter-spacing: 0.32px;
  line-height: normal;
  margin-bottom: 15px;
}

.portfolio .icon-park-solid-wrapper {
  position: absolute;
  width: 31px;
  height: 31px;
  top: 302px;
  left: 73px;
  background-image: url(./img/icon-park-solid-click.svg);
  background-size: 100% 100%;
}

.portfolio .icon-park-solid {
  position: absolute;
  width: 31px;
  height: 31px;
  top: 0;
  left: 0;
}

.portfolio .icon-park-solid-2 {
  top: 301px;
  left: 25px;
  position: absolute;
  width: 31px;
  height: 31px;
}

.portfolio .portfolio-text-2 {
  position: absolute;
  width: 818px;
  height: 329px;
  top: 3337px;
  left: 961px;
}

/* Focus management for better accessibility */
*:focus-visible {
  outline: 2px solid #7127ba;
  outline-offset: 2px;
}

.portfolio .virtual-assistant-card-wrapper {
  position: absolute;
  width: 669px;
  height: 165px;
  top: 96px;
  left: 0;
  background-image: url(https://raw.githubusercontent.com/HazemYoriichi/portfolio/d2076a6a1ee0c78b3746de11f0c50440643ddc23/img/card-2.png);
  background-size: 100% 100%;
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease-out;
}

.portfolio .virtual-assistant-card-wrapper:hover {
  transform: translateY(-5px);
  filter: brightness(1.1);
}

.portfolio .virtual-assistant-description {
  position: absolute;
  height: 81px;
  top: 40px;
  left: 34px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ccd6f6;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1.6;
  margin-bottom: 25px;
}

.portfolio .overlap-5 {
  position: absolute;
  width: 430px;
  height: 70px;
  top: 0;
  left: 382px;
}

.portfolio .featured-project-2 {
  position: absolute;
  height: 24px;
  top: 0;
  left: 141px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #9757d3;
  font-size: 16px;
  letter-spacing: 0.32px;
  line-height: normal;
  margin-bottom: 15px;
}

.portfolio .img-wrapper {
  position: absolute;
  width: 31px;
  height: 31px;
  top: 298px;
  left: 596px;
  background-image: url(./img/icon-park-solid-click-5.svg);
  background-size: 100% 100%;
}

.portfolio .icon-park-solid-3 {
  top: 297px;
  left: 548px;
  position: absolute;
  width: 31px;
  height: 31px;
}

.portfolio .skills {
  position: absolute;
  width: 895px;
  height: 754px;
  top: 1817px;
  left: 598px;
  background-image: url(./img/group-1910.png);
  background-size: 100% 100%;
}

.portfolio .social-icons {
  position: absolute;
  top: 4162px;
  left: 458px;

  display: flex;
  gap: 15px; /* المسافة بين الأيقونات */
  align-items: center;
}

.portfolio .social-icons img {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.portfolio .social-icons img:hover {
  transform: scale(1.2); /* يكبر الأيقونة بس من غير ما يبوظ مكانها */
}

.portfolio .me {
  position: absolute;
  width: 258px;
  height: 259px;
  top: 306px;
  left: 461px;
  background-image: url(./img/ellipse-3.png);
  background-size: 100% 100%;
}

.portfolio .image {
  width: 165px;
  height: 223px;
  top: 6px;
  left: 48px;
  position: absolute;
  object-fit: cover;
}

.portfolio .experience-3 {
  height: 193px;
  top: 1251px;
  left: 1053px;
  position: absolute;
  width: 574px;
  margin-bottom: 30px;
}

.portfolio .rectangle-5 {
  top: 4px;
  background: linear-gradient(
    96deg,
    rgba(19, 4, 40, 1) 7%,
    rgba(37, 16, 67, 1) 34%,
    rgba(56, 18, 109, 1) 57%,
    rgba(38, 16, 69, 1) 85%,
    rgba(25, 6, 52, 1) 100%
  );
  position: absolute;
  width: 570px;
  height: 193px;
  left: 22px;
  border-radius: 15px;
  box-shadow: 4px 7px 26px #0000001f;
}

.portfolio .text-wrapper-20 {
  position: absolute;
  width: 317px;
  top: 53px;
  left: 219px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 26px;
  line-height: 32.5px;
  white-space: nowrap;
  margin-bottom: 10px;

  /* زرار زي text-wrapper-14 */
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.portfolio .text-wrapper-20:hover {
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.portfolio .text-wrapper-21 {
  position: absolute;
  width: 232px;
  top: 88px;
  left: 221px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 8px;
  letter-spacing: 0;
  line-height: 10.5px;
  margin-bottom: 15px;
  line-height: 1.4;
}

.portfolio .learn-more-3 {
  position: absolute;
  width: 121px;
  height: 33px;
  top: 116px;
  left: 215px;
}

.portfolio .overlap-group-4 {
  position: relative;
  width: 119px;
  height: 33px;
  background-image: url(./img/rectangle-977.svg);
  background-size: 100% 100%;
}

.portfolio .group-3 {
  position: absolute;
  width: 120px;
  height: 98px;
  top: 53px;
  left: 81px;
}

.portfolio .image-2 {
  width: 549px;
  height: 278px;
  top: 2831px;
  left: 1085px;
  aspect-ratio: 2;
  position: absolute;
  object-fit: cover;
}

.header-section {
  position: relative;
}

.navigation {
  position: absolute;
  top: 42px;
  left: 1111px;
  display: flex;
  gap: 234px;
}

.navigation a {
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.40px;
  line-height: normal;
  text-decoration: none;
  transition: color 0.3s ease;
}

.navigation a:hover,
.navigation a:focus {
  color: #7127ba;
  outline: 2px solid #7127ba;
  outline-offset: 2px;
}

.hero-section {
  position: relative;
}

.hero-content {
  position: relative;
}

.about-section {
  position: relative;
}

.experience-section {
  position: relative;
}

.skills-section {
  position: relative;
}

.portfolio-section {
  position: relative;
}

.contact-section {
  position: relative;
}

.project-links {
  position: absolute;
  display: flex;
  gap: 17px;
}

.portfolio-text .project-links {
  top: 301px;
  left: 25px;
}

.portfolio-text-2 .project-links {
  top: 297px;
  left: 548px;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

button:hover,
button:focus {
  opacity: 0.8;
}

button:focus-visible {
  outline: 2px solid #7127ba;
  outline-offset: 2px;
}

.social-icons a {
  display: inline-block;
  transition: transform 0.3s ease;
}

.social-icons a:hover,
.social-icons a:focus {
  transform: scale(1.1);
}

.social-icons a:focus-visible {
  outline: 2px solid #7127ba;
  outline-offset: 2px;
}

.i-m-currently a {
  color: #ffffff;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.i-m-currently a:hover,
.i-m-currently a:focus {
  color: #7127ba;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

*:focus-visible {
  outline: 2px solid #7127ba;
  outline-offset: 2px;
}

.portfolio .section-divider {
  position: absolute;
  width: 100%;
  height: 120px;
  top: 1800px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.portfolio .divider-image {
  max-width: 800px;
  height: auto;
  opacity: 0.8;
  filter: brightness(1.1);
}


.portfolio .text-wrapper-29 {
  position: absolute;
  width: 256px;
  top: 1800px;
  left: 460px;
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 40px;
  letter-spacing: 0;
  line-height: 32.5px;
  white-space: nowrap;
  margin-bottom: 10px;
}

.portfolio .coding-skills-section {
  position: absolute;
  top: 1850px;
  left: calc(50% - 550px);
  width: 400px;
  margin: 40px 20px;
  z-index: 15;
  animation: fadeInUp 0.8s ease-out;
}

.portfolio .coding-skills-section-2 {
  position: absolute;
  top: 1850px;
  left: calc(50% + -100px);
  width: 400px;
  margin: 40px 20px;
  z-index: 15;
  animation: fadeInUp 0.8s ease-out;
}

.portfolio .coding-skills-section-3 {
  position: absolute;
  top: 1850px;
  left: calc(50% - -350px);
  width: 400px;
  margin: 40px 20px;
  z-index: 15;
  animation: fadeInUp 0.8s ease-out;
}

.portfolio .coding-skills-section-4 {
  position: absolute;
  top: 1850px;
  left: calc(50% + 350px);
  width: 400px;
  margin: 40px 20px;
  z-index: 15;
  animation: fadeInUp 0.8s ease-out;
}

.portfolio .skills-card {
  background: linear-gradient(135deg, rgba(113, 39, 186, 0.1) 0%, rgba(43, 17, 79, 0.2) 100%);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease;
  animation: slideInUp 0.8s ease-out;
  position: relative;
  overflow: hidden;
}

.portfolio .skills-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: rotate(45deg);
  transition: transform 0.6s ease;
}

.portfolio .skills-card:hover::before {
  transform: rotate(45deg) translate(50%, 50%);
}

.portfolio .skills-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 25px 50px rgba(113, 39, 186, 0.4);
  border-color: rgba(113, 39, 186, 0.5);
}

.portfolio .skills-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  gap: 15px;
}

.portfolio .skills-icon {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

.portfolio .skills-card:hover .skills-icon {
  transform: rotate(360deg) scale(1.1);
}

.portfolio .skills-title {
  font-family: "Preahvihear", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 24px;
  margin: 0;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(113, 39, 186, 0.3);
}

.portfolio .skills-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.portfolio .skill-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: all 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.portfolio .skill-item::before {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(113, 39, 186, 0.2), transparent);
  transition: left 0.5s ease;
}

.portfolio .skill-item:hover::before {
  left: 100%;
}

.portfolio .skill-item:hover {
  background: rgba(113, 39, 186, 0.2);
  transform: translateX(15px) scale(1.02);
  border-color: rgba(113, 39, 186, 0.5);
  box-shadow: 0 5px 15px rgba(113, 39, 186, 0.3);
}

.portfolio .skill-bullet {
  width: 8px;
  height: 8px;
  background: linear-gradient(45deg, #7127ba, #a855f7);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(113, 39, 186, 0.5);
  animation: pulse 2s infinite;
}

.portfolio .skill-text {
  font-family: "Preahvihear", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
}

.portfolio .skill-item:hover .skill-text {
  color: #a855f7;
  text-shadow: 0 0 5px rgba(168, 85, 247, 0.5);
}

/* Enhanced Instagram button with clickable link and animations */
.portfolio .instagram-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  padding: 5px 10px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.portfolio .instagram-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.portfolio .instagram-link:hover::before {
  left: 100%;
}

.portfolio .instagram-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(113, 39, 186, 0.3);
  background: rgba(113, 39, 186, 0.1);
}

.portfolio .instagram-link:hover .instagram-logo {
  transform: rotate(360deg) scale(1.1);
}

.portfolio .instagram-link:hover .text-wrapper-12 {
  color: #a855f7;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* Added comprehensive mobile responsiveness */
@media (max-width: 1200px) {
  .portfolio .coding-skills-section-2,
  .portfolio .coding-skills-section-4 {
    left: calc(50% + 320px);
  }
}

@media (max-width: 1024px) {
  .portfolio .coding-skills-section,
  .portfolio .coding-skills-section-2,
  .portfolio .coding-skills-section-3,
  .portfolio .coding-skills-section-4 {
    width: 350px;
  }

  .portfolio .coding-skills-section-2,
  .portfolio .coding-skills-section-4 {
    left: calc(50% + 380px);
  }
}

@media (max-width: 768px) {
  .portfolio .coding-skills-section,
  .portfolio .coding-skills-section-2,
  .portfolio .coding-skills-section-3,
  .portfolio .coding-skills-section-4 {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    margin: 20px auto;
  }

  .portfolio .coding-skills-section {
    top: auto;
  }

  .portfolio .coding-skills-section-2 {
    top: auto;
  }

  .portfolio .coding-skills-section-3 {
    top: auto;
  }

  .portfolio .coding-skills-section-4 {
    top: auto;
  }

  .portfolio .skills-card {
    padding: 20px;
  }

  .portfolio .skills-title {
    font-size: 20px;
  }

  .portfolio .skill-text {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .portfolio .coding-skills-section,
  .portfolio .coding-skills-section-2,
  .portfolio .coding-skills-section-3,
  .portfolio .coding-skills-section-4 {
    width: 95%;
  }

  .portfolio .skills-card {
    padding: 15px;
  }

  .portfolio .skills-title {
    font-size: 18px;
  }

  .portfolio .skill-text {
    font-size: 13px;
  }
}

/* Added keyframe animations for enhanced visual effects */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(113, 39, 186, 0.5);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(113, 39, 186, 0.8);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 10px;
  }

  .container {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 100%;
    margin-bottom: 15px;
  }

  nav ul {
    flex-direction: column;
    gap: 10px;
  }
}