/* Contact Section */
.contact-section {
  padding: 100px 0;
  background: #0f0f1f;
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(0, 118, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 0, 180, 0.1) 0%, transparent 40%);
  z-index: 1;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.section-header h2 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #ff00cc, #3333ff);
  border-radius: 3px;
}

.section-header p {
  color: #a0a0c0;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(20, 20, 40, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.contact-info {
  flex: 1;
  min-width: 300px;
  padding: 30px;
  background: rgba(30, 30, 60, 0.4);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.info-item:hover {
  transform: translateX(10px);
}

.info-item .icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ff00cc, #3333ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.info-item .details h3 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 5px;
  font-weight: 600;
}

.info-item .details p {
  color: #a0a0c0;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-link {
  color: #a0a0c0;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.contact-link::after {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.contact-link:hover {
  color: #fff;
}

.contact-link:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-icon:hover {
  background: linear-gradient(135deg, #ff00cc, #3333ff);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.contact-form {
  flex: 1;
  min-width: 300px;
  padding: 30px;
  background: rgba(30, 30, 60, 0.4);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-group {
  margin-bottom: 25px;
  position: relative;
}

.form-field {
  position: relative;
  margin-bottom: 10px;
}

.form-input {
  width: 100%;
  padding: 15px 0;
  font-size: 16px;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  outline: none;
  transition: all 0.3s ease;
}

.form-label {
  position: absolute;
  top: 15px;
  left: 0;
  padding: 0 5px;
  color: #a0a0c0;
  pointer-events: none;
  transition: all 0.3s ease;
  font-size: 16px;
}

.form-input:focus,
.form-input:valid {
  border-bottom-color: #ff00cc;
}

.form-input:focus~.form-label,
.form-input:valid~.form-label {
  top: -20px;
  left: 0;
  color: #ff00cc;
  font-size: 14px;
}

.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff00cc, #3333ff);
  transition: width 0.3s ease;
}

.form-input:focus~.focus-border {
  width: 100%;
}

textarea.form-input {
  min-height: 100px;
  resize: vertical;
  padding-top: 20px;
}

.submit-btn {
  background: linear-gradient(135deg, #ff00cc, #3333ff);
  color: #fff;
  border: none;
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3333ff, #ff00cc);
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease;
}

.submit-btn:hover::before {
  opacity: 1;
}

.submit-btn i {
  transition: transform 0.3s ease;
}

.submit-btn:hover i {
  transform: translateX(5px);
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ff00cc, #3333ff);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
  bottom: 40px;
}

.back-to-top:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: all 0.3s ease;
  z-index: 1000;
  overflow: hidden;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  background-color: #128C7E;
}

.whatsapp-float i {
  font-size: 24px;
  margin-right: 0;
  transition: transform 0.3s ease;
}

.whatsapp-float span {
  position: absolute;
  right: 100%;
  margin-right: 10px;
  background-color: #128C7E;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.whatsapp-float:hover span {
  opacity: 1;
  transform: translateX(0);
}

.whatsapp-float:hover i {
  transform: scale(1.1);
}

/* Responsive adjustments for WhatsApp button */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 40px;
    right: 20px;
  }
  
  .whatsapp-float i {
    font-size: 20px;
  }
  
  .whatsapp-float span {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* Responsive styles */
@media (max-width: 992px) {
  .contact-container {
    flex-direction: column;
  }

  .contact-info,
  .contact-form {
    width: 100%;
  }

  .section-header h2 {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .contact-container {
    padding: 20px;
  }

  .info-item {
    flex-direction: column;
    text-align: center;
  }

  .info-item .icon {
    margin: 0 auto 15px;
  }

  .social-links {
    justify-content: center;
  }

  .submit-btn {
    width: 100%;
  }
}

/* Portfolio Section */
.portfolio-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}

.portfolio-card {
  position: relative;
  overflow: hidden;
}

.portfolio-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  border-color: rgba(254, 197, 68, 0.3);
}

.card {
  position: relative;
}

.github-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  font-size: 1.1rem;
  margin-top: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
  margin: 20px auto;
}

.github-link:hover {
  background: #333;
  transform: scale(1.1);
  color: #f5f5f5;
  text-decoration: none;
}

.portfolio-img-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.portfolio-img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

.github-link {
  color: #fff;
  font-size: 2rem;
  transition: all 0.3s ease;
  background: rgba(254, 197, 68, 0.9);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.github-link:hover {
  transform: scale(1.1) rotate(5deg);
  background: #fec544;
  color: #0a101e;
}

.portfolio-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.portfolio-content h3 {
  color: #fec544;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.portfolio-content p {
  color: #b8b8b8;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 1199.98px) {
  .portfolio-card {
    margin-bottom: 1.5rem;
  }
}

/* Skills Section */
#skills {
  background-color: linear-gradient(#123, #111);
  min-height: 100vh;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(254, 197, 68, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(254, 197, 68, 0.05) 0%, transparent 20%),
    #0a101e;
  background-size: 200% 200%;
  animation: gradientBG 15s ease infinite;
}

/* start  */
/* Snowflakes container */
.snowflakes {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Snowflake base */
.snowflake {
  position: absolute;
  top: -5vh;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: snowfall linear infinite;
}

/* Generate variations with nth-child */
.snowflake:nth-child(odd) {
  filter: blur(1px);
}

@keyframes snowfall {
  to {
    transform: translateY(110vh);
  }
}

/* Assign random-ish positions, sizes, and durations */
.snowflake:nth-child(1) {
  left: 5%;
  width: 5px;
  height: 5px;
  animation-duration: 6s;
}

.snowflake:nth-child(2) {
  left: 15%;
  width: 8px;
  height: 8px;
  animation-duration: 10s;
}

.snowflake:nth-child(3) {
  left: 25%;
  width: 6px;
  height: 6px;
  animation-duration: 12s;
}

.snowflake:nth-child(4) {
  left: 35%;
  width: 4px;
  height: 4px;
  animation-duration: 8s;
}

.snowflake:nth-child(5) {
  left: 45%;
  width: 7px;
  height: 7px;
  animation-duration: 11s;
}

.snowflake:nth-child(6) {
  left: 55%;
  width: 5px;
  height: 5px;
  animation-duration: 9s;
}

.snowflake:nth-child(7) {
  left: 65%;
  width: 9px;
  height: 9px;
  animation-duration: 13s;
}

.snowflake:nth-child(8) {
  left: 75%;
  width: 6px;
  height: 6px;
  animation-duration: 7s;
}

.snowflake:nth-child(9) {
  left: 85%;
  width: 5px;
  height: 5px;
  animation-duration: 10s;
}

.snowflake:nth-child(10) {
  left: 95%;
  width: 8px;
  height: 8px;
  animation-duration: 14s;
}

/* Duplicate patterns to cover all 50 snowflakes */

/* end  */
/* start  */
/* Spinner Base */
.main_spinner {
  animation: spin 2s linear infinite;
  width: 150px;
  position: absolute;
  /* so we can place top-right / bottom-right */
  /* Hide spinner on mobile by default */
  display: none;
}

/* Show spinner only on larger screens */
@media (min-width: 992px) {
  .main_spinner {
    display: block;
  }
}

.main_spinner .dot {
  animation: backspin 1s linear infinite;
  position: absolute;
  border-radius: 100px;
  height: 50px;
  width: 50px;
  box-shadow: 0 112px white, 0 -112px white, 112px 0 white, -112px 0 white;
}

.main_spinner .dot_1 {
  left: 0;
}

.main_spinner .dot_2 {
  right: 0;
}

.main_spinner .center_mass {
  position: absolute;
  width: 25px;
  height: 25px;
  left: 50%;
  top: 50%;
  margin-top: -12.5px;
  margin-left: -12.5px;
  background: rgba(3, 103, 141, 0.6);
  border-radius: 25px;
  box-shadow: 100px 0 rgba(3, 103, 141, 0.6), -100px 0 rgba(3, 103, 141, 0.6);
}

/* Position helpers */
.top-right {
  top: 20px;
  right: 20px;
}


/* strat portfolio */
*/ .port {
  background-color: #060a14;
}

.title {
  text-align: center;
  margin: 40px 0;
}

.title h1 {
  font-size: 50px;
}

.cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  perspective: 1200px;
  padding: 20px;
}

.card {
  width: 100%;
  max-width: 350px;
  height: 450px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  text-align: center;
  color: white;
  overflow: hidden;
  position: relative;
  transform: rotateX(75deg) translateY(-200px) translateZ(-100px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin: 0 auto;
  border-radius: 20px;
}

/* سفشق */
.card:hover {
  transform: rotate3d(1, 1, 0, 15deg) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(255, 200, 100, 0.3);
}

/* الضوء المتحرك */
.card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.15) 50%,
      transparent 100%);
  transform: rotate(25deg);
  opacity: 0;
  transition: opacity 0.4s;

  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card:hover::before {
  opacity: 1;
  animation: shine 2s linear infinite;
}


/* strat  */
.card-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  z-index: 1;
  pointer-events: none;
  /* عشان ميتعارضش مع الكليك */
}

.card-border rect {
  width: 100%;
  height: 100%;
  rx: 20;
  /* نفس قيمة border-radius */
  ry: 20;
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  stroke: url(#gradientBorder);
  transition: stroke-dashoffset 0.4s ease;
}

.card:hover .card-border rect {
  animation: borderRun 4s linear infinite;
}

@keyframes borderRun {
  to {
    stroke-dashoffset: 0;
  }
}

/* end  */

@keyframes shine {
  0% {
    transform: rotate(25deg) translateX(-200%);
  }

  100% {
    transform: rotate(25deg) translateX(200%);
  }
}

/* سفشق */

.card.show {
  transform: rotateX(0deg);
  opacity: 1;
}

.card-slider {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.card-slider img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: none;
}

.card-slider img.active {
  display: block;
}

/* indicators تحت الصورة */
.indicators {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.indicators span {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.3s;
}

.indicators span.active {
  opacity: 1;
  background: #ff9f43;
}

.card h3 {
  margin: 10px 0;
  font-size: 22px;
}

.card p {
  padding: 0 15px;
  font-size: 14px;
}



/* Animations */
@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(0.9);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes backspin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(-180deg) scale(0.9);
  }

  100% {
    transform: rotate(-360deg) scale(1);
  }
}

/* start  */

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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.skills-wrapper {
  position: relative;
  z-index: 2;
}

.skills-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.skill-category {
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

/* Base styles for skill items */
.skill-item {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Animation keyframes */
@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Frontend skills animation */
#skills .skill-category:nth-child(1).animate .skill-item {
  opacity: 0;
  transform: scale(0.5);
  animation: scaleIn 0.6s forwards;
  animation-delay: calc(var(--index, 0) * 0.1s);
}

/* Backend skills animation */
#skills .skill-category:nth-child(2).animate .skill-item {
  opacity: 0;
  transform: scale(0.6);
  animation: scaleIn 0.6s forwards;
  animation-delay: calc(var(--index, 0) * 0.1s);
}

/* Tools & Other skills animation */
#skills .skill-category:nth-child(3).animate .skill-item {
  opacity: 0;
  transform: scale(0.7);
  animation: scaleIn 0.6s forwards;
  animation-delay: calc(var(--index, 0) * 0.1s);
}

/* When not animated, ensure items are hidden */
.skill-category:not(.animate) .skill-item {
  animation: none !important;
  opacity: 0 !important;
  transform: scale(0.5) !important;
}

@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.skill-category.animate {
  opacity: 1;
  transform: translateY(0);
}

.skill-title {
  color: var(--orange);
  font-size: 1.8rem;
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {

  0%,
  100% {
    text-shadow: 0 0 5px rgba(254, 197, 68, 0.5),
      0 0 10px rgba(254, 197, 68, 0.3);
  }

  50% {
    text-shadow: 0 0 15px rgba(254, 197, 68, 0.8),
      0 0 25px rgba(254, 197, 68, 0.5);
  }
}

.skill-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: var(--orange);
  border-radius: 3px;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.5rem;
  justify-content: center;
}

.skill-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(0) scale(1);
  opacity: 0.9;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  perspective: 1000px;
  transform-style: preserve-3d;
}

.skill-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(254, 197, 68, 0.1), transparent);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: -1;
}

.skill-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(254, 197, 68, 0.1), transparent);
  transform: translateX(-100%);
  transition: 0.6s;
  z-index: -1;
}

.skill-item:hover {
  transform: translateY(-5px) scale(1.03) rotateX(5deg) rotateY(5deg);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 15px 30px rgba(254, 197, 68, 0.25), 0 5px 15px rgba(0, 0, 0, 0.1);
  opacity: 1;
  border-color: var(--orange);
  animation: pulse 1.5s infinite, float 3s ease-in-out infinite;
}

.skill-item:hover::before {
  opacity: 1;
  transform: translateZ(10px);
}

@keyframes float {

  0%,
  100% {
    transform: translateY(-5px) rotateX(5deg) rotateY(5deg);
  }

  50% {
    transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
  }
}

.skill-item:hover::before {
  transform: translateX(100%);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(254, 197, 68, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(254, 197, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(254, 197, 68, 0);
  }
}

.skill-item i {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  display: block;
  color: var(--orange);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-shadow: 0 0 10px rgba(254, 197, 68, 0.3);
  transform-style: preserve-3d;
  transform: translateZ(0);
}

.skill-item:hover i {
  transform: scale(1.3) translateZ(20px);
  color: #fff;
  text-shadow: 0 0 30px rgba(254, 197, 68, 0.9);
  animation: iconPulse 2s infinite, iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

  0%,
  100% {
    transform: scale(1.3) translateZ(20px) translateY(0);
  }

  50% {
    transform: scale(1.3) translateZ(20px) translateY(-5px);
  }
}

@keyframes iconPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

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

.skill-item span {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  display: block;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translate3d(0, 0, 0);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.skill-item:hover span {
  color: #fff;
  transform: translate3d(0, 2px, 10px);
  text-shadow: 0 0 15px rgba(254, 197, 68, 0.8);
  letter-spacing: 0.5px;
}

/* Add a subtle shine effect on hover */
.skill-item::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to bottom right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(30deg) translate(-20%, -20%);
  opacity: 0;
  transition: all 0.6s ease;
  pointer-events: none;
}

.skill-item:hover::after {
  opacity: 1;
  transform: rotate(30deg) translate(0, 0);
  transition-delay: 0.1s;
}

/* Animation for skill items */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skill-item {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

/* Staggered animation for skill items */
.skills-grid .skill-item:nth-child(1) {
  animation-delay: 0.1s;
}

.skills-grid .skill-item:nth-child(2) {
  animation-delay: 0.2s;
}

.skills-grid .skill-item:nth-child(3) {
  animation-delay: 0.3s;
}

.skills-grid .skill-item:nth-child(4) {
  animation-delay: 0.4s;
}

.skills-grid .skill-item:nth-child(5) {
  animation-delay: 0.5s;
}

.skills-grid .skill-item:nth-child(6) {
  animation-delay: 0.6s;
}

/* Global  */
:root {
  --main: #a9adb8;
  --orange: #fec544;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p {
  color: var(--main);
}

body {
  overflow-x: hidden;
  font-family: Arial, sans-serif;/
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

/* start css  */

/* About Section */
.about {
  background-color: #f8f9fa;
}

.section-title {
  font-size: 2.5rem;
  color: var(--orange);
  margin-bottom: 1.5rem !important;
  position: relative;
  display: inline-block;
}

.animated-line {
  position: relative;
  width: 200px;
  height: 2px;
  margin: -10px auto 2rem;
  overflow: hidden;
}

.animated-bullet {
  position: absolute;
  left: 0;
  top: 40%;
  transform: translateY(-50%);
  width: 30px;
  height: 12px;
  background-color: var(--orange);
  border-radius: 50%;
  animation: moveBullet 4s linear infinite;
}

@keyframes moveBullet {
  0% {
    left: 0;
    transform: translateY(-50%) translateX(-100%);
  }

  50% {
    left: 100%;
    transform: translateY(-50%) translateX(0);
  }

  100% {
    left: 0;
    transform: translateY(-50%) translateX(-100%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Loading Screen Styles */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0a101e 0%, #1a1f3a 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
  visibility: visible;
}

.loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loading-content {
  text-align: center;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.loading-name {
  font-size: 4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 2rem 0;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(254, 197, 68, 0.5);
  animation: nameGlow 2s ease-in-out infinite alternate;
}

@keyframes nameGlow {
  0% {
    text-shadow: 0 0 20px rgba(254, 197, 68, 0.5);
    transform: translateY(0);
  }
  100% {
    text-shadow: 0 0 30px rgba(254, 197, 68, 0.8), 0 0 40px rgba(254, 197, 68, 0.4);
    transform: translateY(-2px);
  }
}

.loading-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.loading-dots .dot {
  width: 12px;
  height: 12px;
  background: #fec544;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.4s infinite ease-in-out both;
  box-shadow: 0 0 10px rgba(254, 197, 68, 0.6);
}

.loading-dots .dot-1 {
  animation-delay: -0.32s;
}

.loading-dots .dot-2 {
  animation-delay: -0.16s;
}

.loading-dots .dot-3 {
  animation-delay: 0s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0.8) translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2) translateY(-20px);
    opacity: 1;
  }
}

/* Optional text */
#loadingOverlay p {
  margin-top: 30px;
  font-family: Arial;
  color: var(--main);
  font-size: 50px;
}

/* start Header  */
.sideHeader {
  background-color: #0a101e;
  width: 300px;
  position: fixed;
  z-index: 1000;
}

.sideHeader img {
  border-bottom: 2px solid var(--orange);
  padding: 10px;
}

.nav-item {
  position: relative !important;
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.5s ease-out;
}

.nav-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.nav-item a {
  padding: 10px 0;
  display: block;
}

.nav-item a::after {

  width: 100%;
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: #ffc107;
  transition: all 0.4s linear;
}

.nav-item a:hover::after,
.nav-item a.active::after {
  width: 100%;
}

.nav-item a.active {
  color: var(--orange) !important;
}

.nav-item a.active::after {
  background: var(--orange);
}

@keyframes line {
  0% {
    background-position-x: 390px;
  }
}

.btn:hover {
  transition: all 0.3s ease;
  scale: .9;
}


section {
  padding: 100px 0;
  margin-left: 300px;
}

.home {
  height: 100vh;
  background: url("../images/back3.avif") center/cover no-repeat;
  overflow: hidden;
  position: relative;
  perspective: 1000px;
}

.home .container {
  opacity: 0;
  transform: translateZ(100px) scale(0.5);
  transform-style: preserve-3d;
  transition: all 1s ease-out;
  will-change: transform, opacity;
}

.home.visible .container {
  opacity: 1;
  transform: translateZ(0) scale(1);
}

.home h1 {
  color: #ffffff87;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  margin-bottom: 30px;
}

.home h1 span {
  color: #fec544;
}

.home h1::after {
  content: "";
  animation: front 10s linear infinite;
  white-space: nowrap;
  font-weight: bold;
  font-size: 32px;
  color: #fff;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.home p {
  color: #ffffff87;
  font-size: 1.2rem;
  margin-top: 30px;
  padding: 20px;
}


/* Social icons ----------------------------*/
.social-icons {
  margin: 2rem 0 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.social-icons a {
  width: 45px;
  height: 45px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ffffff87;
  border-radius: 50%;
  margin: 0 7px;
  color: #ffffff;
  font-size: 18px;
  transition: .3s;
  animation: bounce 3s ease-in-out infinite;
}

.social-icons a:nth-child(1):hover {
  background: #1877F2;
  border-color: #1877F2;

}

.social-icons a:nth-child(2):hover {
  background: #0A66C2;
  border-color: #0A66C2;
}

.social-icons a:nth-child(3):hover {
  background: #181717;
  border-color: #181717;
}

.social-icons a:nth-child(1) {
  animation-delay: 0s;
}

.social-icons a:nth-child(2) {
  animation-delay: .25s;
}

.social-icons a:nth-child(3) {
  animation-delay: .5s;
}

/* Download CV Button */
.btn-download-cv {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--orange), #ff9a3c);
  color: #fff !important;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 4px 15px rgba(254, 197, 68, 0.3);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 12px 25px;
  margin-top: 1rem;
}

.btn-download-cv::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ff9a3c, var(--orange));
  z-index: -1;
  opacity: 0;
  transition: all 0.4s ease;
}

.btn-download-cv:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(254, 197, 68, 0.5);
  color: #fff !important;
}

.btn-download-cv:hover::before {
  opacity: 1;
}

.btn-download-cv i {
  margin-right: 8px;
  transition: transform 0.3s ease;
}

.btn-download-cv:hover i {
  transform: translateY(-2px);
}

/* Pulse animation */
@keyframes btnPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(254, 197, 68, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(254, 197, 68, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(254, 197, 68, 0);
  }
}

.btn-download-cv:active {
  transform: translateY(1px);
  animation: btnPulse 0.5s ease-out;
}

.bubble {
  position: absolute;
  background: rgba(255, 255, 255, 0.21);
  border-radius: 50%;
  filter: blur(4px);
  opacity: 1;
}

/* bubble 1 – small */
.bubble:nth-child(5) {
  top: 85%;
  left: 20%;
  width: 120px;
  height: 120px;
  animation: up1 5s infinite linear;
}

@keyframes up1 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-200px);
    opacity: 0;
  }
}

/* bubble 2 – medium */
.bubble:nth-child(6) {
  top: 90%;
  left: 50%;
  width: 170px;
  height: 170px;
  animation: up2 4s infinite linear;
}

@keyframes up2 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-250px);
    opacity: 0;
  }
}

/* bubble 3 – large */
.bubble:nth-child(7) {
  top: 88%;
  left: 80%;
  width: 220px;
  height: 220px;
  animation: up3 6s infinite linear;
}

/* // start about  */
/* About Section */
/* Animated Background */


.about {
  position: relative;
  background-color: #060a14;
  padding: 100px 0;
  overflow: hidden;
  min-height: 90Vh;
}

.stars {
  width: 1px;
  height: 1px;
  position: absolute;
  background: white;
  box-shadow: 2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white,
    22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white,
    38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white,
    53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white,
    68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white,
    83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white,
    98vw 35vh 2px white, 5vw 60vh 1px white, 12vw 65vh 2px white,
    18vw 72vh 1px white, 25vw 78vh 2px white, 30vw 85vh 1px white,
    35vw 68vh 2px white, 40vw 82vh 1px white, 45vw 92vh 2px white,
    50vw 75vh 1px white, 55vw 88vh 2px white, 60vw 95vh 1px white,
    65vw 72vh 2px white, 70vw 85vh 1px white, 75vw 78vh 2px white,
    80vw 92vh 1px white, 85vw 82vh 2px white, 90vw 88vh 1px white,
    95vw 75vh 2px white;
  animation: twinkle 8s infinite linear;
}



.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, white, transparent);
  animation: shoot 3s infinite ease-in;
}

.shooting-star:nth-child(1) {
  top: 20%;
  left: -100px;
  animation-delay: 0s;
}

.shooting-star:nth-child(2) {
  top: 35%;
  left: -100px;
  animation-delay: 1s;
}

.shooting-star:nth-child(3) {
  top: 50%;
  left: -100px;
  animation-delay: 2s;
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0) rotate(25deg);
    opacity: 1;
  }

  100% {
    transform: translateX(120vw) translateY(50vh) rotate(25deg);
    opacity: 0;
  }
}

/* Additional twinkling stars with different animation timing */
.stars::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
    3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
    27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
    51vw 92vh 2px white, 59vw 78vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}



.about::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(254, 197, 68, 0.3) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(254, 197, 68, 0.25) 0%, transparent 25%),
    radial-gradient(circle at 30% 80%, rgba(254, 197, 68, 0.2) 0%, transparent 30%);
  z-index: 1;
  animation: moveGradient1 20s ease-in-out infinite;
}

.about::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background:
    radial-gradient(circle at 70% 20%, rgba(254, 197, 68, 0.2) 0%, transparent 25%),
    radial-gradient(circle at 30% 50%, rgba(254, 197, 68, 0.25) 0%, transparent 30%),
    radial-gradient(circle at 60% 60%, rgba(254, 197, 68, 0.15) 0%, transparent 25%);
  z-index: 1;
  animation: moveGradient2 25s ease-in-out infinite reverse;
  mix-blend-mode: overlay;
}

@keyframes moveGradient1 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }

  50% {
    transform: translate(20px, 20px) scale(1.2);
    opacity: 0.5;
  }

  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
}

@keyframes moveGradient2 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.2;
  }

  50% {
    transform: translate(-20px, -20px) scale(1.3);
    opacity: 0.4;
  }

  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.2;
  }
}

.about>.container {
  position: relative;
  z-index: 2;
}


.wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* Animation Classes */
.about .section-title {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.about .section-title.animate {
  opacity: 1;
  transform: translateY(0);
}

.about .circle-img {
  width: 280px;
  height: 280px;
  float: left;
  border-radius: 50%;
  shape-outside: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  object-fit: cover;
  margin: 0 40px 20px 0;
  transform: scale(0.5);
  opacity: 0;
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 1s ease-out;

}


.about .circle-img.animate {
  transform: scale(1);
  opacity: 1;
}

.about .wrapper p {
  transform: translateX(100px);
  opacity: 0;
  transition: transform 0.8s ease-out 0.3s,
    opacity 0.8s ease-out 0.3s;
  color: var(--main);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.about .wrapper p.animate {
  transform: translateX(0);
  opacity: 1;
}

.about .animated-line {
  margin: 20px auto 40px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s ease-out 0.2s,
    opacity 1s ease-out 0.2s;
}

.about .animated-line.animate {
  opacity: 1;
  transform: scaleX(1);
}



@keyframes up3 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-280px);
    opacity: 0;
  }
}

/* animation  */

@keyframes front {
  0% {
    content: " |";
  }

  2% {
    content: " F|";
  }

  4% {
    content: " Fu|";
  }

  6% {
    content: " Ful|";
  }

  8% {
    content: " Full|";
  }

  10% {
    content: " Full |";
  }

  12% {
    content: " Full S|";
  }

  14% {
    content: " Full St|";
  }

  16% {
    content: " Full Sta|";
  }

  18% {
    content: " Full Stac|";
  }

  20% {
    content: " Full Stack|";
  }

  22% {
    content: " Full Stack |";
  }

  24% {
    content: " Full Stack E|";
  }

  26% {
    content: " Full Stack En|";
  }

  28% {
    content: " Full Stack Eng|";
  }

  30% {
    content: " Full Stack Engi|";
  }

  32% {
    content: " Full Stack Engin|";
  }

  34% {
    content: " Full Stack Engine|";
  }

  36% {
    content: " Full Stack Enginee|";
  }

  38%,
  50% {
    content: " Full Stack Engineer|";
  }

  /* deleting */
  52% {
    content: " Full Stack Enginee|";
  }

  54% {
    content: " Full Stack Engine|";
  }

  56% {
    content: " Full Stack Engin|";
  }

  58% {
    content: " Full Stack Engi|";
  }

  60% {
    content: " Full Stack Eng|";
  }

  62% {
    content: " Full Stack En|";
  }

  64% {
    content: " Full Stack E|";
  }

  66% {
    content: " Full Stack |";
  }

  68% {
    content: " Full Stack|";
  }

  70% {
    content: " Full Stac|";
  }

  72% {
    content: " Full Sta|";
  }

  74% {
    content: " Full St|";
  }

  76% {
    content: " Full S|";
  }

  78% {
    content: " Full |";
  }

  80% {
    content: " Full|";
  }

  82% {
    content: " Ful|";
  }

  84% {
    content: " Fu|";
  }

  86% {
    content: " F|";
  }

  88%,
  100% {
    content: " |";
  }
}

/* bounce  */

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@import url("https://fonts.googleapis.com/css?family=Fredoka+One");

.store-container {
  line-height: 0;
  margin: 50px auto;
  width: 50%;
}

.stroke {
  stroke: #0170bb;
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.round-end {
  stroke-linecap: round;
}

#store {
  animation: fadeIn 0.8s ease-in;
}

.border-animation {
  background-color: white;
  border-radius: 10px;
  position: relative;
}

.border-animation:after {
  content: "";
  background: linear-gradient(45deg, #ccc 48.9%, #0170bb 49%);
  background-size: 300% 300%;
  border-radius: 10px;
  position: absolute;
  top: -5px;
  left: -5px;
  height: calc(100% + 10px);
  width: calc(100% + 10px);
  z-index: -1;
  animation: borderGradient 8s linear both infinite;
}

@keyframes borderGradient {

  0%,
  100% {
    background-position: 0% 100%;
  }

  50% {
    background-position: 100% 0%;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

#browser {
  transform: translateY(-100%);
  -webkit-animation: moveDown 1.5s cubic-bezier(0.77, -0.5, 0.3, 1.5) forwards;
  animation: moveDown 1.5s cubic-bezier(0.77, -0.5, 0.3, 1.5) forwards;
}

@keyframes moveDown {
  from {
    transform: translate(0, -100%);
  }

  to {
    transform: translate(0, 0);
  }
}

#toldo {
  animation: fadeIn 1s 1.4s ease-in forwards;
}

.grass {
  animation: fadeIn 0.5s 1.6s ease-in forwards;
}

#window {
  animation: fadeIn 0.5s 1.8s ease-in forwards;
}

#door {
  animation: fadeIn 0.5s 2s ease-in forwards;
}

#sign {
  transform-origin: 837px 597px;
  animation: pendulum 1.5s 2s ease-in-out alternate;
}

.trees {
  animation: fadeIn 0.5s 2.2s ease-in forwards;
}

#toldo,
.grass,
#window,
#door,
.trees,
.cat,
.cat-shadow,
.box,
.parachute,
.tshirt,
.cap,
.ball,
#text,
#button,
.sky-circle,
.sky-circle2,
.sky-circle3 {
  opacity: 0;
}

@keyframes pendulum {
  20% {
    transform: rotate(60deg);
  }

  40% {
    transform: rotate(-40deg);
  }

  60% {
    transform: rotate(20deg);
  }

  80% {
    transform: rotate(-5deg);
  }
}

.cat {
  transform-origin: 1145px 620px;
}

.cat-shadow {
  transform-origin: 1115px 625px;
}

#store:hover .cat {
  animation: catHi 3s 3s cubic-bezier(0.7, -0.5, 0.3, 1.4);
}

#store:hover .cat-shadow {
  animation: catShadow 4s 2s cubic-bezier(0.7, -0.5, 0.3, 1.4) alternate;
}

@keyframes catHi {

  0%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }

  10%,
  60% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes catShadow {

  0%,
  100% {
    transform: translate(40px, -35px) scale(0.3);
  }

  10%,
  60% {
    opacity: 1;
    transform: translate(-5px, 10px) scale(0.5);
  }

  60% {
    opacity: 0;
  }
}

.box,
.parachute {
  transform-origin: 430px 100px;
  animation: moveBox 14s 4s linear forwards infinite;
}

.parachute {
  animation: parachute 14s 4s linear forwards infinite;
}

@keyframes moveBox {
  0% {
    opacity: 0;
    transform: translate(0, -150px) rotate(20deg);
  }

  15% {
    opacity: 1;
    transform: translate(0, 100px) rotate(-15deg);
  }

  25% {
    transform: translate(0, 250px) rotate(10deg);
  }

  30% {
    transform: translate(0, 350px) rotate(-5deg);
  }

  35% {
    opacity: 1;
    transform: translate(0, 570px) rotate(0deg);
  }

  45%,
  100% {
    opacity: 0;
    transform: translate(0, 570px);
  }
}

@keyframes parachute {
  0% {
    transform: translate(0, -150px) rotate(20deg) scale(0.8);
    opacity: 0;
  }

  15% {
    transform: translate(0, 100px) rotate(-15deg) scale(1);
    opacity: 1;
  }

  25% {
    transform: translate(0, 250px) rotate(10deg);
  }

  30% {
    transform: translate(0, 350px) rotate(-5deg);
  }

  33% {
    transform: translate(0, 460px) rotate(0deg) scale(0.9);
    opacity: 1;
  }

  45%,
  100% {
    transform: translate(0, 480px);
    opacity: 0;
  }
}

.tshirt {
  animation: fadeInOut 42s 10s ease-in forwards infinite;
}

.cap {
  animation: fadeInOut 42s 24s ease-in forwards infinite;
}

.ball {
  animation: fadeInOut 42s 38s ease-in forwards infinite;
}

#text,
#button {
  animation: fadeIn 1s 5s ease-in forwards;
}

@keyframes fadeInOut {

  5%,
  12% {
    opacity: 1;
  }

  20% {
    opacity: 0;
  }
}

.cloud {
  animation: clouds 50s linear backwards infinite;
}

.cloud2 {
  animation: clouds 40s 40s linear backwards infinite;
}

.plane {
  animation: clouds 30s linear backwards infinite;
  will-change: transform;
}

@keyframes clouds {
  from {
    transform: translate(-150%, 0);
  }

  to {
    transform: translate(150%, 0);
  }
}

.sky-circle {
  animation: fadeInOut 10s 5s ease-in infinite;
}

.sky-circle2 {
  animation: fadeInOut 12s 30s ease-in infinite;
}

.sky-circle3 {
  animation: fadeInOut 8s 40s ease-in infinite;
}
/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
  padding: 0;
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 2.5px;
  background-color: #fec544;
  margin: 6px 0;
  transition: all 0.3s ease;
}

/* Sidebar styles for mobile */
.sideHeader {
  transition: transform 0.3s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  /* Hide sidebar by default on mobile */
  .sideHeader {
    transform: translateX(-100%);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    overflow-y: auto;
    width: 200px;
  }

  /* Show sidebar when active */
  .sideHeader.active {
    transform: translateX(0);
  }

  /* Show mobile menu button */
  .mobile-menu-toggle {
    display: block;
  }

  /* Adjust main content area */
  section {
    margin-left: 0 !important;
    padding-top: 80px;
  }

  /* Home section adjustments */
  .home {
    padding: 60px 20px;
    text-align: center;
  }

  .home h1 {
    font-size: 2.2rem;
    margin-bottom: 20px;
  }

  .home p {
    font-size: 1rem;
    padding: 10px;
  }

  /* Navigation adjustments */
  .nav-item {
    margin: 10px 0;
  }

  .nav-item a {
    font-size: 1.1rem;
  }

  /* Social icons adjustments */
  .social-icons a {
    width: 40px;
    height: 40px;
    margin: 0 5px;
  }

  /* Adjust the home section container */
  .home .container {
    padding: 20px;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767.98px) {
  .home h1 {
    font-size: 1.8rem;
  }

  .home p {
    font-size: 0.95rem;
  }

  .nav-item a {
    font-size: 1rem;
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .home h1 {
    font-size: 1.6rem;
  }

  .home p {
    font-size: 0.9rem;
  }

  .nav-item a {
    font-size: 0.95rem;
  }

  .social-icons a {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* About Section Responsive */
@media (max-width: 1200px) {
  .about .wrapper {
    padding: 40px 20px;
  }
  
  .about .container {
    padding: 0 15px;
  }
}

@media (max-width: 992px) {
  .about {
    padding: 40px 0;
  }
  
  .about .wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .about .circle-img {
    margin: 0 auto 30px;
    float: none;
  }
  
  .about .wrapper p {
    padding: 0 15px;
  }
}

/* Portfolio Responsive Styles */

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .port .row {
    justify-content: center;
  }
  
  .port .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
  }
  
  .port .card {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 30px;
  }
  
  .port .card h3 {
    font-size: 1.3rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .port .row {
    justify-content: center;
  }
  
  .port .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0 15px;
  }
  
  .port .card {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .port .card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  }
  
  .port .card h3 {
    font-size: 1.5rem;
    margin: 20px 0 15px;
  }
}

/* Mobile Styles */
@media (max-width: 767.98px) {
  .contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .info-item {
    width: 100%;
    max-width: 300px;
    margin: 10px 0;
  }
  .details{
    margin: auto;
  }

  /* WhatsApp link alignment fix */
  .info-item .whatsapp-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    gap: 0;
  }

  .info-item .whatsapp-link:hover {
    color: inherit;
  }

  .info-item .whatsapp-link .icon {
    margin: 0 auto 15px;
    margin-bottom: 10px;
  }

  /* Skills grid - 2 items per row on mobile */
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .skill-item {
    padding: 1rem 0.5rem;
  }

  .skill-item i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .skill-item span {
    font-size: 0.9rem;
  }

  .port .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    padding: 0 15px;
  }
  
  .port .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
  }
  
  .port .card {
    margin: 0 auto 30px;
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .port .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  
  .port .card h3 {
    font-size: 1.4rem;
    margin: 15px 0 10px;
    text-align: center;
  }
  
  .port .card p {
    text-align: center;
    padding: 0 15px;
    margin-bottom: 15px;
    color: #666;
  }
  
  .port .card .github-link {
    display: flex;
    justify-content: center;
    margin: 15px auto 20px;
  }
  
  .about {
    padding: 30px 0;
    min-height: auto;
  }
  
  .about .circle-img {
    width: 200px;
    height: 200px;
    margin-bottom: 25px;
  }
  
  .about .section-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
  }
  
  .about .wrapper .about-text {
    position: relative;
    width: 100%;
  }

  /* Base styles for all screens */
  .about .wrapper p.about-paragraph {
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0 auto 20px;
    text-align: center;
    padding: 0 30px;
    max-width: 800px;
  }

  /* Hide read more button by default */
  .read-more-btn {
    display: none;
  }

  .about-content {
    display: inline-block;
    width: 100%;
  }

  /* Read More Button Styles */
  .read-more-btn {
    background: transparent;
    border: 1px solid #fec544;
    color: #fec544;
    font-size: 0.9rem;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px auto 0;
    display: block;
    transition: all 0.3s ease;
  }

  .read-more-btn:hover {
    background: rgba(254, 197, 68, 0.1);
  }

  /* Tablet styles (768px - 1199px) */
  @media (min-width: 768px) and (max-width: 1199.98px) {
    .about .wrapper p.about-paragraph {
      max-width: 90%;
      margin: 0 auto 20px;
      padding: 0 20px;
      max-height: 8.5em;
      overflow: hidden;
      position: relative;
    }

    .about .wrapper p.about-paragraph::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3em;
      background: linear-gradient(to bottom, 
        transparent, 
        var(--dark-color));
      pointer-events: none;
    }

    .about .wrapper p.about-paragraph.expanded {
      max-height: none;
    }

    .about .wrapper p.about-paragraph.expanded::after {
      display: none;
    }
  }

  /* Mobile styles (up to 767px) */
  @media (max-width: 767.98px) {
    .aboutContent {
      margin-top: 50px !important;
    }
    
    .about .wrapper {
      margin: 0 !important;
      padding: 0 10px;
    }
    
    .about .wrapper p.about-paragraph {
      font-size: 1rem;
      line-height: 1.8;
      padding: 0;
      margin: 0 0 15px 0 !important;
      max-height: 9em;
      overflow: hidden;
      position: relative;
      transition: max-height 0.3s ease;
    }

    .about .wrapper p.about-paragraph::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3em;
      background: linear-gradient(to bottom, 
        transparent, 
        var(--dark-color));
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .about .wrapper p.about-paragraph.expanded {
      max-height: 1000px; /* Adjust based on your content */
    }

    .about .wrapper p.about-paragraph.expanded::after {
      opacity: 0;
    }

    /* Show read more button only on mobile */
    .read-more-btn {
      display: block;
      background: #f8c34d ;
      color: #ffffffe3;
      border: 2px solid var(--main-color);
      padding: 10px 25px;
      border-radius: 30px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      margin: 20px auto 0;
      transition: all 0.3s ease;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

   
  }

  /* For very small screens */
  @media (max-width: 576px) {
    .about .wrapper p.about-paragraph {
      font-size: 0.95rem;
      line-height: 1.8;
    }
  }





  
  .about .wrapper p.animate {
    transform: none;
  }
  
  .about-content {
    padding: 0 10px;
  }
  
  /* Adjust shooting stars for mobile */
  .shooting-star {
    display: none; /* Hide on small screens for better performance */
  }
  
  .stars {
    opacity: 0.7; /* Make stars more subtle on mobile */
  }
}

@media (max-width: 576px) {
  .about {
    padding: 25px 0;
  }
  
  .about .circle-img {
    width: 180px;
    height: 180px;
  }
  
  .about .section-title {
    font-size: 2rem;
    margin-bottom: 15px;
  }
  
  .about .wrapper p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  .about::before,
  .about::after {
    display: none; /* Disable complex gradients on very small screens */
  }
  
  .stars {
    display: none; /* Hide stars on very small screens */
  }
}