.section-title {
   font-size: 2rem;
   margin-bottom: 1.3rem;
   position: relative;
 }

 .section-title::after {
   content: '';
   width: 80px;
   height: 4px;
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
 }

 /* Hero Section */
 #hero {
   height: 100vh;
   display: flex;
   align-items: center;
   position: relative;
   background: linear-gradient(to top, #f0f8ff, rgba(255, 255, 255, 0.7)),
     url('https://images.unsplash.com/photo-1587620962725-abab7fe55159?ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80');
   background-size: cover;
   background-position: center;
   transition: background 0.3s ease;
   /* Smooth transition */
   border-bottom: 2px solid var(--border-color);
 }

 .dark-mode #hero {
   /* background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)),
     url('https://images.unsplash.com/photo-1587620962725-abab7fe55159?ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80'); */
     
   background: linear-gradient(to top,  #111827, rgba(0, 0, 0, 0.7)),
     url('https://images.unsplash.com/photo-1587620962725-abab7fe55159?ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80');
     
   background-size: cover;
   background-position: center;
 }

 #hero .container {
   height: 100vh;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   gap: 6.5rem;
 }

 .hero-greeting {
   color: var(--extra-color);
 }

 .hero-job-title {
   color: var(--extra-color);
   display: flex;
   border-bottom: 4px solid var(--extra-color);
   width: fit-content;
 }

 .hero-name {
   font-size: 2rem;
   color: var(--dark-text-color);
 }

 .hero-subtitle {
   font-size: 1.2rem;
   margin-bottom: 2rem;
   font-weight: normal;
   color: var(--dark-text-color);
 }

 .hero-buttons {
   display: flex;
   gap: 1rem;
 }

 .project-btn {
   background-color: var(--extra-color);
   border: 2px solid var(--extra-color);
   color: #fff;
 }

 .project-btn:hover {
   color: var(--dark-text-color);
   background-color: transparent;
   border: 2px solid var(--extra-color);
 }

 .download-btn {
   border: 2px solid var(--extra-color);
   color: #fff;
 }

 .download-btn:hover {
   background-color: var(--extra-color);
 }

 #hero .social-links {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 1.5rem;
 }

 #hero .social-links ul {
   display: flex;
   flex-direction: row;
   gap: 0.1rem;
 }

 #hero .social-links ul {
   display: flex;
   flex-direction: row;
   gap: 0.3rem;
 }

 #hero .social-links ul li {
   background: var(--extra-color);
   font-size: 2rem;
   border-radius: 5px;
   width: 3rem;
   height: 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
 }

 #hero .social-links ul li:hover {
   border-radius: 50%;
 }

 #hero .social-links i {
   font-size: 3rem;
   color: #fff;
   padding: 0.1rem;
 }

 .hero-text-content {
   gap: 0;
 }

 .hero-img-content {
   justify-content: center;
   align-items: center;
 }

 .hero-img-content img {
   width: 25rem;
   border-radius: 50% 30%;
   border: 1px solid var(--extra-color);
   background-color: var(--light-color);
   background-color: var(--extra-color);
 }

 .hero-img-content {
   display: flex;
   align-items: center;
 }

 .hero-img-content ul {
   position: absolute;
   right: 0;
   margin-right: 3rem;
   margin-right: 5rem;
   gap: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .hero-img-content li {
   background: var(--extra-color);
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
 }

 .hero-img-content li:nth-child(2) {
   background: var(--extra-color);
   width: 2.3rem;
   height: 2.3rem;
 }

 .hero-img-content li:nth-child(3) {
   width: 1.5rem;
   height: 1.5rem;
   background: var(--extra-color);
 }

 .hero-img-content li {
   width: 2.7rem;
   height: 2.7rem;
   border-radius: 50%;
   transition: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .hero-img-content li:hover {
   background-color: var(--dark-color);
 }


 /* ------------------------------------About Section------------------------------------ */
 #about {
   padding: 5rem 0;
   background-color: var(--light-color);
 }

 #about .btn {
   display: inline-block;
   padding: 0.75rem 1.5rem;
   border-radius: 5px;
   cursor: pointer;
   margin-top: 2rem;
   transition: all 0.3s ease;
 }

 .action-btn-container {
   display: flex;
   gap: 0.8rem;
 }

 .about-me-btn {
   border: 2px solid var(--extra-color);
   color: var(--extra-color);
 }

 .hire-me-btn {
   background: var(--extra-color);
 }

 .about-container {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   align-items: center;
   gap: 3rem;
 }

 .about-img img {
   flex: 1;
   overflow: hidden;
   border-radius: 50% 70%;
   width: 30rem;
   box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
   border: 3px solid var(--extra-color);
 }

 .about-content {
   flex: 1;
 }

 .about-section-title {
   text-align: left;
   color: var(--extra-color);
   width: fit-content;
   border-bottom: 4px solid var(--extra-color);
 }

 .about-title {
   font-size: 2rem;
   margin-bottom: 1rem;
   line-height: normal;
 }

 .about-text {
   margin-bottom: 1.5rem;
 }

 .skills {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-top: 2rem;
 }

 .skill {
   padding: 0.5rem 1rem;
   background: var(--secondary-color);
   border-radius: 30px;
   display: inline-block;
   transition: all 0.3s ease;
   color: var(--dark-text-color);
 }

 .skill:hover {
   background: var(--extra-color);
   color: #fff;
   transform: translateY(-5px);
 }

 /* ---------------------------------education Section--------------------------------- */
 #education {
   padding: 5rem 0;
   background-color: var(--light-color);
 }

 #education .section-title {
   text-align: center;
   color: var(--extra-color);
   border-bottom: 4px solid var(--extra-color);
 }

 .timeline {
   position: relative;
   /* max-width: 800px; */
   margin: 0 auto;
 }

 .timeline::after {
   content: '';
   position: absolute;
   width: 4px;
   background-color: var(--extra-color);
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -2px;
 }

 .timeline-item {
   padding: 5px 20px;
   position: relative;
   background-color: inherit;
   width: 50%;
 }

 .timeline-item::after {
   content: '';
   position: absolute;
   width: 20px;
   height: 20px;
   right: -1px;
   background-color: white;
   border: 4px solid var(--extra-color);
   top: 15px;
   background-color: var(--extra-color);
   border-radius: 50%;
   z-index: 1;
 }

 .left {
   left: 0;
 }

 .right {
   left: 50%;
 }

 .right::after {
   left: -10px;
 }

 .timeline-content {
   padding: 20px 30px;
   background-color: var(--light-color);
   position: relative;
   border-radius: 6px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   box-shadow: 0 4px 10px rgba(46, 138, 86, 0.5);
 }

 .timeline-date {
   font-weight: bold;
   color: var(--primary-color);
   margin-bottom: 0.5rem;
   border-bottom: 4px solid var(--extra-color);
   width: fit-content;
 }

 .timeline-title {
   color: var(--extra-color);
   margin-bottom: 0.5rem;
 }


 /* Skills section */
 #skills {
   padding: 5rem 0;
   background-color: var(--light-color);
 }

 .skill-section-header {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
 }

 .skill-section-header h2 {
   width: 100%;
   text-align: center;
   color: var(--extra-color);
   border-bottom: 4px solid var(--border-color);
   border-bottom: 4px solid var(--extra-color);
 }

 .tech-stacks {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   width: 100%;
   gap: 2rem;
 }

 hr {
   border: none;
   height: 2rem;
   background: var(--extra-color);
   width: 0.2rem;
   display: none;
 }

 .tech-stacks .stack {
   width: 100%;
   transition: 0.9s cubic-bezier(0.17, 0.67, 0, 1.01);
 }

 .tech-stacks .stack h4 {
   background: var(--extra-color);
   margin-bottom: 1rem;
   font-size: large;
   color: #fff;
   padding: 0.9rem;

 }

 .stack-container {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   justify-content: center;
   align-items: center;
   width: 100%;
 }

 .stack-container ul {
   display: flex;
   height: 100%;
   width: 100%;
   padding: 0.8rem;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   background: var(--secondary-color);
   gap: 1rem;
 }

 .stack-container ul li {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 1rem;
 }

 .stack-container ul li p {
   font-size: 1rem;
   /* text-transform: uppercase; */
 }

 .stack-container .layouts {
   width: 100%;
 }

 .bg-layout {
   width: 100%;
   height: 30px;
   background-color: #fff;
   border-radius: 50px;
   overflow: hidden;
   transition: width 0.5s;
 }

 .fg-layout {
   transition: width 0.5s;
   /* height: 100%;
  background-color: #4CAF50;
  width: 50%;
  border-radius: 5px;
  transition: width 0.5s;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-weight: bold; */
 }

 .bg-layout:hover .fg-layout {
   height: 100%;
   background-color: #4CAF50;
   width: 50%;
   /* border-radius: 5px; */
   transition: width 0.5s;
   text-align: center;
   line-height: 30px;
   color: #fff;
   font-weight: bold;
 }

 .tech-stacks .stack ul li i {
   background: var(--extra-color);
   font-size: 2.5rem;
   color: var(--primary-bg);
 }


 /* Projects Section */
 #projects {
   padding: 5rem 0;
   background-color: var(--light-color);
 }

 .projects-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 2rem;
 }

 .project-card {
   background: var(--light-color);
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   box-shadow: 0 15px 30px rgba(46, 138, 86, 0.2);

   transition: all 0.3s ease;
 }

 .project-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
   box-shadow: 0 15px 30px rgba(46, 138, 86, 0.5);

 }

 .project-img {
   height: 200px;
   overflow: hidden;
   position: relative;
 }

 .project-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
 }

 .project-card:hover .project-img img {
   transform: scale(1.1);
 }

 .project-links {
   position: absolute;
   top: 10px;
   right: 10px;
   display: flex;
   gap: 10px;
   opacity: 0;
   transition: opacity 0.3s ease;
 }

 .project-card:hover .project-links {
   opacity: 1;
 }

 .project-link {
   width: 40px;
   height: 40px;
   color: var(--light-text-color);
   display: flex;
   background-color: var(--extra-color);
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
 }

 .project-link:hover {
   background: var(--primary-color);
   color: var(--dark-text-color);
 }

 .project-content {
   padding: 1.5rem;
 }

 .project-title {
   margin-bottom: 0.5rem;
 }

 .project-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 1rem;
 }

 .project-tag {
   padding: 0.3rem 0.6rem;
   background: var(--secondary-color);
   border-radius: 20px;
   font-size: 0.8rem;
 }

 .case-study-btn {
   margin-top: 1rem;
   transition: all 0.3s ease;
   background-color: var(--extra-color);
   width: fit-content;
   padding: 10px;
   border-radius: 55px;
   border: 2px solid var(--light-color);
   opacity: 0;
   transform: translateY(20px);
 }

 .project-card:hover .case-study-btn {
    opacity: 1;
    transform: translateY(0);
  }

 .case-study-btn a {
   color: #fff;
 }

 .case-study-btn:hover {
   background-color: var(--light-color);
   border: 2px solid var(--extra-color);
   color: var(--extra-color);
 }

 .view-more-btn-container {
   text-align: center;
   margin-top: 2rem;
 }

 .view-more-btn {
   background: transparent;
   border: 2px solid var(--extra-color);
   color: var(--extra-color);
 }

 .view-more-btn:hover {
   background: var(--extra-color);
   color: #fff;
 }

 /* Contact Section */
 #contact {
   padding: 5rem 0;
   background-color: var(--light-color);
 }

 .contact-container {
   display: flex;
   justify-content: space-between;
   gap: 3rem;
 }

 #contact .container .section-title {
   color: var(--extra-color);
   text-align: center;
   border-bottom: 4px solid var(--extra-color);
 }

 .contact-info {
   flex: 1;
 }

 .contact-item {
   display: flex;
   align-items: center;
   margin-bottom: 2rem;
 }

 .contact-icon {
   width: 60px;
   height: 60px;
   background: var(--extra-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 1rem;
   transition: all 0.3s ease;
   border: 2px solid var(--extra-color);
 }

 .contact-item:hover .contact-icon {
   background: var(--secondary-color);
   color: var(--extra-color);
   border: 2px solid var(--extra-color);
 }

 .contact-form {
   flex: 1;
   padding: 2rem;
   background: var(--light-color);
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   box-shadow: var(--shadow);
 }

 .form-group {
   margin-bottom: 1.5rem;
 }

 .form-control {
   width: 100%;
   padding: 0.8rem;
   border: 1px solid #ddd;
   border-radius: 5px;
   font-family: inherit;
   transition: border-color 0.3s ease;
 }

 .form-control:focus {
   border-color: var(--primary-color);
   outline: none;
 }

 textarea.form-control {
   height: 150px;
   resize: none;
 }

 .submit-btn {
   padding: 1rem;
   border-radius: 0.5rem;
   border: 3px solid var(--extra-color);
   background-color: transparent;
   color: var(--dark-text-color);
 }

 .submit-btn:hover {
   background-color: var(--extra-color);
 }

 /* Footer */
 #footer {
   padding: 2rem 0;
   background: var(--extra-color);
   color: #fff;
   text-align: center;
 }

 .social-icons {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-bottom: 1rem;
 }

 .social-icon {
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
 }

 .social-icon:hover {
   background: var(--primary-color);
   transform: translateY(-5px);
 }

 .footer-text {
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.7);
 }

 /* Responsive Styles */
 @media (max-width: 992px) {
   .hero-content {
     width: 60%;
   }

   .hero-img {
     width: 35%;
   }
.hero-buttons   {
  justify-content: left;
}
.hero-buttons .btn{
  padding: 0.9rem;
  margin: 0;
}
   .about-container {
     flex-direction: column;
   }
 /* Projects section style [Phone] */
 .projects-content-container {
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

/* Skills section style [Phone] */
.tech-stacks {
  grid-template-columns: repeat(1, 1fr);
}

.tech-stacks .stack {
  border: 1px solid var(--border-color);
}

   .contact-container {
     flex-direction: column;
   }

   .timeline::after {
     left: 3px;
   }

   .timeline-item {
     width: 100%;
     padding-left: 20px;
     padding-right: 5px;
     margin: 2rem 0;
   }

   .timeline-item::after {
     left: 0px;
   }

   .right {
     left: 0%;
   }
 }