@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&family=Miniver&family=Playwrite+AU+SA:wght@100..400&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");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Poppins", serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

html {
  scroll-behavior: smooth;
  background: rgb(248, 247, 248);
}
html,
body {
  max-width: 100%; /* Prevent overflow caused by large elements */
  overflow-x: hidden; /* Hide horizontal scrolling */
}

@media (max-width: 320px) {
  body {
    font-size: 0.85rem; /* Adjust font size for small screens */
  }

  .nav_list {
    padding: 0; /* Remove extra padding */
  }

  .work-item img {
    max-width: 100%; /* Ensure images don't overflow */
    height: auto;
  }

  .hero-content,
  .about-content,
  .skills-content {
    padding: 10px; /* Reduce padding for smaller screens */
  }

  .footer {
    padding: 10px;
    font-size: 0.9rem;
  }
}
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 22ch;
    }
}

@keyframes blink {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: rgb(247, 245, 245);
    }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(198, 197, 197, 20);
  z-index: 100;
  overflow-x: hidden; /* Prevent nav overflow */

}

.nav {
  height: 4rem; /* Adjust height to reduce gap */
  display: flex;
  align-items: center;
  padding: 0 2rem;
  margin: 0 auto;
  justify-content: space-between;
  background: transparent;
  transition: background 2s ease-in-out;
}

.nav.scrolled {
  color: #afaeae;
  background: #121212;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.nav_logo {
  font-size: 2.5rem;
  font-weight: 900;
  color: #4070f4;
  text-decoration: none;
  font-family: "Dancing Script", serif;
  font-optical-sizing: auto;
  background: linear-gradient(
    90deg,
    #f9c1e1,
    #ebbae4,
    #d9b5e7,
    #c4b0e8,
    #acace9,
    #99b2f1,
    #83b9f6,
    #69bff8,
    #52cffe,
    #41dfff,
    #46eefa,
    #5ffbf1
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 15px rgba(169, 168, 169, 0.5);
  display: flex;
  align-items: center;
}

.logo-img {
  width: 121px; /* Adjust the width as needed */
  height: 90px; /* Adjust the height as needed */
  border-radius: 10%;
  transition: transform 0.3s ease-in-out;
}
.logo-text {
  margin-left: 10px; /* Space between logo and text */
  font-size: 1.5rem; /* Adjust the font size as needed */
}

/* Navigation Styles */
.nav_list {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.nav_item {
  position: relative;
}

.nav_link {
  color: #000;
  text-decoration: none;
  padding: 0.5rem 1rem;
}

.nav_toggle {
  display: none;
}

.nav_list {
  display: flex;
  list-style: none;
  gap: 2.5rem;
}

.nav_link {
  position: relative;
  color: #0e2431;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}

.nav_link i {
  margin-right: 8px; /* Add some space between the icon and the text */
}

.nav_link:hover {
  color: #2a07f0;
  transform: translateY(-2px);
}

.nav_link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 0;
  transition: width 0.3s ease;
}

.nav_link:hover::after {
  width: 100%;
  background-color: #0e4cf5;
}

.nav_toogle {
  font-size: large;
  font-weight: 600;
  cursor: pointer;
  color: #757373;
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent; /* Make background transparent */
  border: none; /* Remove any border */
}
.nav_toggle:hover {
  color: #0e2431;
  font-size: larger;
  cursor: pointer;
}
/* //tooltip style */

/* .nav_link::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 40px;
  transform: translateX(-10%);
  background-color: #0e2431;
  color: white;
  font-size: 0.875rem;
  padding: 8px 10px;
  transition: all 0.3s ease;
  opacity: 0;
} */

/* Glassmorphism effect for nav_list */
@media (max-width: 768px) {
  .nav_list {
    display: none;
    flex-direction: column;
    gap: 0;
  }

  .nav_list.show {
    display: flex;
  }

  .nav_toggle {
    display: block;
  }
}

@media (max-width: 768px) {
  .nav_list {
    position: fixed;
    top: 4.3rem;
    right: -100%;
    width: 60%;
    height: calc(100vh - 4rem); /* Adjust height to fit within viewport */
    background: rgba(13, 100, 231, 0.1); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* Blur effect for Safari */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(8, 44, 250, 0.5);
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    transition: right 0.5s ease-in-out; /* Smooth slide-in effect */
    overflow-y: auto; /* Enable scrolling if content overflows */
  }

  .nav_list.show {
    right: 0;
  }

  .nav_link {
    color: #000; /* Ensure text color is visible */
    margin: 0.5rem 0; /* Add margin for spacing */
  }

  .nav_toogle {
    display: block;
  }
}



/* Hero Section for bckground video*/
.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Optional dark overlay for readability */
.video-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* Adjust to your liking */
  z-index: 2;
}

/* Hero content styles */
.hero-content_2 {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #fff;
  padding: 2rem;
}

.hero-content_2 h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-content_2 span {
  color: #00f7ff;
}

.hero-content_2 p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.hero-btn {
  display: inline-block;
  background: #00f7ff;
  color: #000;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s ease;
}

.hero-btn:hover {
  background: #fff;
  color: #000;
}

/* Responsive typography */
@media (max-width: 768px) {
  .hero-content_2 h1 {
    font-size: 2rem;
  }
  .hero-content_2 p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .hero-content_2 h1 {
    font-size: 1.5rem;
  }
  .hero-content_2 p {
    font-size: 0.9rem;
  }
}

.web-intro-section {
  padding: 80px 5%;
  background: linear-gradient(to bottom right, #f0f2f5, #ffffff);
  text-align: center;
}

.intro-header h1 {
  font-size: 2.8rem;
  color: #222;
  margin-bottom: 0.5rem;
}

.intro-header .highlight {
  color: #1163ff;
  font-weight: bold;
}

.intro-subtext {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 3rem;
}

.intro-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.intro-card {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: 0.3s ease;
}

.intro-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.intro-card i {
  font-size: 2.5rem;
  color: #1163ff;
  margin-bottom: 1rem;
}

.intro-card h3 {
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.intro-card p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* CTA Buttons */
.intro-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.intro-btn {
  padding: 10px 20px;
  background: #1163ff;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s ease;
}

.intro-btn:hover {
  background: #3059c9;
  transform: scale(1.05);
}

/* Responsive Text Sizes */
@media (max-width: 768px) {
  .intro-header h1 {
    font-size: 2rem;
  }

  .intro-subtext {
    font-size: 1rem;
  }

  .intro-card h3 {
    font-size: 1.2rem;
  }

  .intro-card p {
    font-size: 0.95rem;
  }
}
/* Initial hidden state */
.scroll-fade {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

/* When in view */
.scroll-fade.visible {
  opacity: 1;
  transform: translateY(0);
}





/* Footer Styles */
.social-links-main {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
  transform: translateY(20px);
  animation: fadeIn 0.5s 5s forwards;
}

.social-links-main a {
  font-size: 1.5rem;
  color: #2d3436;
  transition: all 0.3s;
}

.social-links-main a:hover {
  color: #4070f4;
  transform: translateY(-3px);
}
.social-links-main a i {
  margin-right: 0.5rem;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes fadeINright {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

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


  .social-links-main {
    margin-top: 2rem;
    justify-content: center;
  }

  .social-links-main a {
    font-size: 1.2rem;
  }
  .social-links {
    margin-top: 2rem;
    justify-content: center;
  }

  .social-links a {
    font-size: 1.2rem;
  }


/* Carousel Styles */
.carousel {
  display: flex;
  justify-self: center;
  overflow: hidden;
  position: relative;
  min-width: 100%;
  max-height: 250px;
  margin-top: 20px; /* Aligns below the navbar */
  border-radius: 8px;
}

.carousel-track {
  display: flex;
  transition: transform 0.7s ease-in-out;
  width: auto;
}

.carousel-item {
  padding: 8px;
  margin:2px;
  border-radius: 8px;
  min-width: 65%;
  max-height: 250vh;
}

.carousel-item img {
  box-shadow: 0 4px 10px rgba(167, 122, 122, 0.5);
  border: none;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.carousel-item img:hover {
  transform: scale(1.05);
}

.carousel .prev, .carousel .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(136, 138, 250, 0.3);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 100;
}

.carousel .prev {
  left: 10px;
}

.carousel .next {
  right: 10px;
}

.about-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 5%;
  background: linear-gradient(to right, #eef2f3, #ffffff);
  min-height: 100vh;
}

.about-content {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
}

.about-img img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  margin: 0 auto;
  display: block;
}

.about-text {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.about-text:hover {
  transform: scale(1.02);
}

.about-text h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1rem;
}

.about-text p {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.about-text i {
  color: #3059c9;
  margin-right: 8px;
}

/* Typewriter */
.typewriter {
  display: inline-block;
  overflow: hidden;
  border-right: 2px solid #3059c9;
  white-space: nowrap;
  font-weight: bold;
  color: #3059c9;
  animation: typing 2s steps(30, end) forwards, blink 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  50% { border-color: transparent }
}

/* Buttons */
.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.see-more-btn {
  background: #cef87f;
  border: none;
  color: #303031;
  font-weight: bold;
  font-size: 1rem;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.see-more-btn:hover {
  background: #bbc6e4;
  color: #d5f89c;
}

.resume-icon {
  background: #cef87f;
  color: #252525;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 8px;
  transition: 0.3s ease-in-out;
  display: flex;
  align-items: center;
}

.resume-icon:hover {
  background: #cbcbf5;
  color: #c7fd63;
  transform: scale(1.05);
}

/* Tech Stack */
.tech-stack h3 {
  margin-top: 2rem;
  text-align: center;
  font-size: 1.5rem;
  color: #333;
}

.tech-stack .icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
}

.tech-stack .icons i {
  font-size: 2.5rem;
  color: #3059c9;
  transition: 0.3s ease-in-out;
}

.tech-stack .icons i:hover {
  transform: scale(1.2);
  color: #cef87f;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .about-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-text {
    margin-top: 20px;
  }

  .about-img img {
    max-width: 200px;
  }

  .typewriter {
    font-size: 1.3rem;
  }

  .about-text h2 {
    font-size: 1.5rem;
  }

  .about-text p {
    font-size: 1rem;
  }
}


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

.skills-content {
  display: flex;
  width: 100%;
  gap: 40px;
  align-items: center;
}

.skill_content2 {
  position: relative;
  width: 100vw; /* Ensure full width */
  min-height: 100vh; /* Cover full screen height */
  /* background: url("assets\images\skills background image"); Add background image */
  background-size: cover; /* Cover the entire element */
  background-position: center; /* Center the background image */
  background-attachment: fixed; /* Makes background fixed */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px;
  border-radius: 20px;
}

/* Adding Transparent Overlay */
.skill_content2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4); /* Light overlay for better text visibility */
  z-index: 0;
}

/* Ensure content is on top of overlay */
.skills-text {
  position: relative;
  z-index: 1;
  padding: 20px;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
}

.skills-text h2 {
  font-size: 1.8rem;
  color: #363434;
  margin-bottom: 20px;
}

.skill-list {
  list-style: none; /* Remove default bullets */
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
  gap: 15px;
}

.skill-list li {
  display: flex;
  align-items: center;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.2); /* Subtle background for a modern look */
  padding: 10px;
  border-radius: 8px;
  transition: 0.3s ease-in-out;
}

.skill-list li:hover {
  background: rgba(64, 112, 244, 0.3); /* Highlight effect on hover */
  transform: translateY(-3px);
}

/* Icon Styles */
.skill-list li i {
  font-size: 1.5rem;
  margin-right: 10px;
  color: #4070f4; /* Icon color */
}

/* python lybraries */
.skills-card {
  background-color: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 960px;
  margin: 2rem auto;
  text-align: center;
}
.skills-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #333;
}
.circle-skills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.circle {
  width: 140px;
  height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-decoration: none;
}
.circle::before {
  content: attr(data-label);
  position: absolute;
  bottom: -1.8rem;
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  color: #333;
  text-align: center;
}
.circle::after {
  content: attr(data-percent) '%';
  font-size: 1rem;
  color: #444;
  position: absolute;
  top: 58%;
}
.circle .icon {
  font-size: 2rem;
  color: var(--color);
  z-index: 1;
  position: absolute;
}
.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}
.progress-ring .ring-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 10;
}
.progress-ring .ring-fill {
  fill: none;
  stroke: var(--color);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
}



/* Responsive Adjustments */
@media (max-width: 1024px) {
  .skill_content2 {
    background-attachment: scroll; /* Disable fixed background on mobile */
    background-size: cover;
  }
}

@media (max-width: 768px) {
  .skills-text {
    padding: 30px;
  }
}

@media (max-width: 480px) {
  .skill_content2 {
    padding: 30px 10px;
  }

  .skills-text h2 {
    font-size: 1.5rem;
  }

  .skills-text p {
    font-size: 0.9rem;
  }
}
.projects-img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: rgb(253, 170, 214) 1vh 2vh 4vh -1vh,
    rgb(255, 255, 255) -2vh -2vh 1.6vh -1vh;
}

.skill-bars {
  margin-top: 20px;
  width: 100%;
  max-width: 600px;
}
.skill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  border-left: 6px solid var(--color);
}
.skill-item:hover {
  cursor: pointer;
  animation: bounce 2s infinite;
  transform: scale(1.02);
}

/* SKILL ICON */
.skill-icon {
  font-size: 2rem;
  margin-right: 20px;
  color: var(--color);
  min-width: 40px;
}

.skill-info {
  flex: 1;
}

/* SKILL NAME */
.skill-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}
/* PROGRESS CONTAINER */
.skill-progress {
  background: #eee;
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 100%;
  border-radius: 10px;
  background-color: var(--color);
  animation: progressAnimation 4s ease-in-out infinite;
  animation-delay: 4s;
  
}
/* PERCENT LABEL */
.skill-percent {
  font-weight: bold;
  font-size: 0.95rem;
  color: var(--color);
  margin-left: 10px;
}
.skills-subsection {
  margin-bottom: 40px;
}

.skills-subtitle {
  font-size: 1.5rem;
  font-weight: bold;
  color: #222;
  margin: 25px 0 15px;
  border-left: 4px solid #007bff;
  padding-left: 10px;
}


.skill-item[data-skill="HTML5"] {
  --color: #e34c26;
}
.skill-item[data-skill="CSS"] {
  --color: #264de4;
}
.skill-item[data-skill="JavaScript"] {
  --color: #f0db4f;
}
.skill-item[data-skill="Microsoft Excel"] {
  --color: #217346;
}
.skill-item[data-skill="MS Office"] {
  --color: #f86751;
}
.skill-item[data-skill="Power Point"] {
  --color: #d24726;
}
.skill-item[data-skill="Bootstrap"] {
  --color: #a36ef1;
}
.skill-item[data-skill="Tailwind CSS"] {
  --color: #06b6d4;
}
.skill-item[data-skill="React"] {
  --color: #61dbfb;
}
.skill-item[data-skill="Node.js"] {
  --color: #8cc84b;
}
.skill-item[data-skill="Express.js"] {
  --color: #8cc84b;
}
.skill-item[data-skill="MongoDB"] {
  --color: #47a248;
}
.skill-item[data-skill="Python"] {
  --color: #3776ab;
}
.skill-item[data-skill="Django"] {
  --color: #0c4b33;
}
@keyframes progressAnimation {
  0% {
    width: 0;
  }
  100% {
    width: var(--progress-width);
  }
}
.skill-percent {
  margin-left: 10px;
  font-weight: bold;
  color: #4169e1;
}

@media (max-width: 768px) {
  .skills-content {
    flex-direction: column;
  }

  .skills-img {
    margin-top: 30px;
  }

  .skills-text h2 {
    font-size: 1.5rem;
  }

  .skills-text p {
    font-size: 1rem;
  }
}

/* Work Section Styling */
.work-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Grid Layout for Work Section */
.work-grid {
  margin-top: 30px;
  padding: 1rem; /*flexible specing */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Two columns */
  gap: 20px;
  align-items: center;
}
/* .work-item {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Image and text in two columns */
/*  gap: 20px;
  align-items: center;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
} */
 /* Work Items */
.work-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: 0.3s ease-in-out;
}
.work-item:hover {
  transform: translateY(-5px);
}
.work-item img {
  width: 100%;
  /* height: 250px; */
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
/* Work Text */
.work-text {
  padding: 15px;
  text-align: left;
}

.work-text h3 {
  font-size: 1.3rem;
  color: #363636;
  display: flex;
  align-items: center;
  gap: 10px;
}

.work-item img:hover {
  transform: scale(1.1);
}
/* Project Details (Hidden by Default) */
.project-details {
  display: none;
  margin-top: 10px;
}

.project-details p {
  font-size: 0.9rem;
  color: #4a4a4a;
}
.project-details {
  display: none;
  margin-top: 10px;
}

.project-details.show {
  display: block;
  opacity: 1;
}
.project-details p {
  font-size: 0.9rem;
  color: #4a4a4a;
}
/* Details Button */
.details-btn {
  background: #4070f4;
  color: white;
  padding: 8px 15px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.3s ease-in-out;
  display: flex;
  align-items: center;
  gap: 5px;
}

.details-btn:hover {
  background: #3059c9;
}
/* Project Buttons (Live Preview & Source Code) */
.project-buttons {
  display: flex;
  justify-content: left;
  margin: 10px 0;
  gap: 15px;
}

.project-btn {
  font-size: 1.5rem;
  color: #cbf174;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #c2fa68;
  transition: 0.3s ease-in-out;
}

.project-btn:hover {
  background: #4070f4;
  border: none;
  color: white;
  transform: scale(1.1);
}

/* Mobile View: Single Column */
@media (max-width: 768px) {
  .work-grid {
    grid-template-columns: 1fr; /* Single column */
  }
}
.work-item {
  grid-template-columns: 1fr; /* Image and text stacked */
  text-align: center; /* Center align for mobile view */
}

.work-item img {
  margin: 0 auto; /* Center the image */
}

@media (max-width: 480px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

/* contact form.............. */

.card {
  height: 30rem;
  background: lightgrey;
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );
  border-top-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  transition: 0.5s ease-in-out;
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

.heading {
  text-align: center;
  font-weight: 600;
  padding-top: 1rem;
  font-size: large;
}

.input-div {
  display: flex;
  margin-top: 1rem;
  transition: 0.5s ease-in-out;
}

.card input {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid black;
  width: 20rem;
  padding: 12px;
  outline: none;
  border-radius: 8px;
  font-size: 1rem;
}

.form-control:focus {
  outline: none;
  border-color: #4070f4;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.121);
}

.card textarea {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid black;
  width: 20rem;
  padding: 12px;
  outline: none;
  border-radius: 8px;
  font-size: 1rem;
}



/* message submitbutton from ui verse */
/* From Uiverse.io by marcelodolza */ 
.button {
  --primary: #ff5569;
  --neutral-1: #f7f8f7;
  --neutral-2: #e7e7e7;
  --radius: 14px;

  cursor: pointer;
  border-radius: var(--radius);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border: none;
  box-shadow: 0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 5px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  min-width: 200px;
  padding: 20px;
  height: 68px;
  font-family: "Galano Grotesque", Poppins, Montserrat, sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  margin-top: 3rem;
}
.button:hover {
  transform: scale(1.02);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
    0 15px 30px rgba(0, 0, 0, 0.3), 0 10px 3px -3px rgba(0, 0, 0, 0.04);
}
.button:active {
  transform: scale(1);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
    0 10px 3px -3px rgba(0, 0, 0, 0.2);
}
.button:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 2.5px solid transparent;
  background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45))
      border-box;
  z-index: 0;
  transition: all 0.4s ease;
}
.button:hover::after {
  transform: scale(1.05, 1.1);
  box-shadow: inset 0 -1px 3px 0 rgba(255, 255, 255, 1);
}
.button::before {
  content: "";
  inset: 7px 6px 6px 6px;
  position: absolute;
  background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
  border-radius: 30px;
  filter: blur(0.5px);
  z-index: 2;
}
.state p {
  display: flex;
  align-items: center;
  justify-content: center;
}
.state .icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: scale(1.25);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.state .icon svg {
  overflow: visible;
}

/* Outline */
.outline {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  inset: -2px -3.5px;
}
.outline::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 180deg,
    transparent 60%,
    white 80%,
    transparent 100%
  );
  animation: spin 2s linear infinite;
  animation-play-state: paused;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.button:hover .outline {
  opacity: 1;
}
.button:hover .outline::before {
  animation-play-state: running;
}

/* Letters */
.state p span {
  display: block;
  opacity: 0;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}
.button:hover p span {
  opacity: 1;
  animation: wave 0.5s ease forwards calc(var(--i) * 0.02s);
}
.button:focus p span {
  opacity: 1;
  animation: disapear 0.6s ease forwards calc(var(--i) * 0.03s);
}
@keyframes wave {
  30% {
    opacity: 1;
    transform: translateY(4px) translateX(0) rotate(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
    color: var(--primary);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px) translateX(5px) rotate(-90deg);
    color: var(--primary);
    filter: blur(5px);
  }
  30% {
    opacity: 1;
    transform: translateY(4px) translateX(0) rotate(0);
    filter: blur(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}
@keyframes disapear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(5px) translateY(20px);
    color: var(--primary);
    filter: blur(5px);
  }
}

/* Plane */
.state--default .icon svg {
  animation: land 0.6s ease forwards;
}
.button:hover .state--default .icon {
  transform: rotate(45deg) scale(1.25);
}
.button:focus .state--default svg {
  animation: takeOff 0.8s linear forwards;
}
.button:focus .state--default .icon {
  transform: rotate(0) scale(1.25);
}
@keyframes takeOff {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translateX(70px) rotate(45deg) scale(2);
  }
  100% {
    opacity: 0;
    transform: translateX(160px) rotate(45deg) scale(0);
  }
}
@keyframes land {
  0% {
    transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Contrail */
.state--default .icon:before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  width: 0;
  left: -5px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}
.button:focus .state--default .icon:before {
  animation: contrail 0.8s linear forwards;
}
@keyframes contrail {
  0% {
    width: 0;
    opacity: 1;
  }
  8% {
    width: 15px;
  }
  60% {
    opacity: 0.7;
    width: 80px;
  }
  100% {
    opacity: 0;
    width: 160px;
  }
}

/* States */
.state {
  padding-left: 29px;
  z-index: 2;
  display: flex;
  position: relative;
}
.state--default span:nth-child(4) {
  margin-right: 5px;
}
.state--sent {
  display: none;
}
.state--sent svg {
  transform: scale(1.25);
  margin-right: 8px;
}
.button:focus .state--default {
  position: absolute;
}
.button:focus .state--sent {
  display: flex;
}
.button:focus .state--sent span {
  opacity: 0;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}
.button:focus .state--sent .icon svg {
  opacity: 0;
  animation: appear 1.2s ease forwards 0.8s;
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: scale(4) rotate(-40deg);
    color: var(--primary);
    filter: blur(4px);
  }
  30% {
    opacity: 1;
    transform: scale(0.6);
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* Message submit button 1 */
.button-div {
  text-align: center;
  justify-content: center;
}

.card input::placeholder {
  color: black;
}

.card textarea::placeholder {
  color: black;
}
.input:focus {
  transition: 0.2s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.input:hover {
  transition: 0.2s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.textarea .form-control {
  min-height: 200px;
  resize: vertical;
}

.sub-btn-group {
  display: flex;
  align-content: flex-end;
  margin-top: 2px;
  gap: 20px;
}
@media (max-width: 768px) {
  .contact-form {
    padding: 10px;
  }
  .sub-btn {
    width: 100%;
    text-align: center;
  }
}

/* footer ............................ */

.footer {
  background-color: #0a192f;
  color: white;
  padding: 20px 10px;
  text-align: center;
}

.footer-name {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 2rem;
  transform: translateY(20px);
  animation: fadeIn 0.5s 5s forwards;
}

.social-links a {
  color: white;
  font-size: 24px;
  text-decoration: none;
  font-size: 1.5rem;
  transition: all 0.3s;
}

.social-links a:hover {
  color: #3367d6;
  transform: translateY(-3px);
}

/* Define the animation ....................*/
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Pop down to up animation */
@keyframes popDownToUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

.pop-up {
  animation: popUp 0.5s forwards;
}

.reverse-pop {
  animation: reversePop 0.5s forwards;
}

.animated {
  opacity: 0;
  visibility: hidden;
}

.pop-down-to-up {
  animation: popDownToUp 1s forwards;
}

/* Default styles before animation */
.animated {
  opacity: 0;
  visibility: hidden;
  transition: all 0.9s ease;
}

/* When animation triggers */
.fadeInUp {
  animation: fadeInUp 2s forwards;
}

.fadeInLeft {
  animation: fadeInLeft 2s forwards;
}

.fadeInRight {
  animation: fadeInRight 2s forwards;
}

/* Dynamic progress bar class */
.progress-bar-html {
  width: 95%;
}
.nav_link {
  color: var(--primary-color);
}

/* Improve performance with will-change */
.animated {
  will-change: transform, opacity;
}

/* for image preview of projects */

.lightbox-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Lightbox Image */
.lightbox-image {
  max-width: 80%;
  max-height: 80%;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(53, 52, 52, 0.5);
}

/* Close Button */
.lightbox-close {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 3rem;
  color: white;
  background: rgba(255, 0, 0, 0.9);
  padding: 5px 15px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000;
  transition: 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1; /* Ensure the close button is visible */
}

.lightbox-close:hover {
  background: rgb(87, 5, 5);
}


/* Navigation Arrows */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: rgb(129, 253, 27);
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 15px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000;
  opacity: 0.9; /* Ensure the arrows are visible */
  transition: 0.3s ease-in-out;
}

.lightbox-prev {
  left: 5px;
}

.lightbox-next {
  right: 5px;
}

.lightbox-arrow:hover {
  background: rgba(255,255,255,0.3);
  color: #ffcc70;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .lightbox-close {
      font-size: 2.5rem;
      top: 10px;
      right: 10px;
  }
  
  .lightbox-arrow {
      font-size: 2.5rem;
  }
}

.resume-btn {
    display: inline-block;
    background: #4070f4;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.resume-btn:hover {
    background-color: white;
    color: #4070f4;
    border: 2px solid #4070f4;
}
/* Theme Toggle Button */
.theme-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  color: #030a49;
  z-index: 1000;
}
.dark-mode .theme-btn {
  color: rgb(247, 243, 10);
}
/* Added color variables */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

.dark-mode {
  --bg-color: #121212;
  --text-color: #ffffff;
}
/* Dark Mode Styling */
body.dark-mode {
  background: #121212 !important; /* Dark background */
  color: #ffffff !important; /* White text */
}

/* Remove Backgrounds in Dark Mode */
.dark-mode .work-section,
.dark-mode .about-section,
.dark-mode .projects-img,
.dark-mode .contact-form,
.dark-mode .tutorial-videos-section,
.dark-mode .skills-card{
  background: none !important;
}

/* Adjust Project Cards in Dark Mode */
.dark-mode .work-item,
.dark-mode .intro-cards {
  filter: brightness(0.8);
}
.dark-mode .tutorial-video-item{
  background: #1e1e1e !important;
  color: white !important;
  border: 1px solid #333;
}

/* Buttons in Dark Mode */
.dark-mode .project-btn{
  border-color: white;
  color: white;
}

.dark-mode .project-btn:hover {
  background: white;
  color: #121212;
}
.typing-animation {
  display: inline-block;
  overflow: hidden;
  white-space: wrap;
  border-right: 1.5px solid white;
  animation: typing 5s steps(30, end), blink 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: black;
  }
}


/* Tutorial Videos Section */
.tutorial-videos-section {
    padding: 2rem;
}

.tutorial-videos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.tutorial-video-item {
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tutorial-video-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tutorial-video-item h3 {
    margin-top: 0.5rem;
    text-align: center;
}

/* Responsive Grid */
@media (min-width: 600px) {
    .tutorial-videos-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .tutorial-videos-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


.projects-3d-section {
  padding: 4rem 1rem;
  background: #0f0f1a; /* Dark background for better glow visibility */
  text-align: center;
  color: #fff;
  position: relative;
}

.project-carousel-wrapper {
  perspective: 1200px;
  overflow: hidden;
  position: relative;
}

/* Glowing circle behind carousel */
.project-carousel-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(64,112,244,0.25) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.project-carousel {
  width: 100%;
  height: 340px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateCarousel 20s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center;
  z-index: 1;
}

.project-card {
  width: 180px;
  height: 220px;
  background: #121225;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(64,112,244,0.5); /* Card glow */
  position: absolute;
  text-decoration: none;
  color: #fff;
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s;
  backdrop-filter: blur(2px);
}

.project-card:hover {
  transform: scale(1.1) translateZ(20px);
  box-shadow: 0 0 35px rgba(64,112,244,0.9);
}

.project-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  image-rendering: auto;
}


.project-label {
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: bold;
  background: #4070f4;
  color: #fff;
  text-align: center;
}

/* Positioning around the circle */
.project-card:nth-child(1) { transform: rotateY(0deg) translateZ(400px); }
.project-card:nth-child(2) { transform: rotateY(45deg) translateZ(400px); }
.project-card:nth-child(3) { transform: rotateY(90deg) translateZ(400px); }
.project-card:nth-child(4) { transform: rotateY(135deg) translateZ(400px); }
.project-card:nth-child(5) { transform: rotateY(180deg) translateZ(400px); }
.project-card:nth-child(6) { transform: rotateY(225deg) translateZ(400px); }
.project-card:nth-child(7) { transform: rotateY(270deg) translateZ(400px); }
.project-card:nth-child(8) { transform: rotateY(315deg) translateZ(400px); }

@keyframes rotateCarousel {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@media screen and (max-width: 768px) {
  .project-card {
    width: 140px;
    height: 180px;
  }
  .project-label {
    font-size: 0.9rem;
  }
}