@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

:root {
  /*--primary-color: #a855f7; 
  --primary-color-dark: #9333ea;
  --secondary-color: #ca8a04;
  --text-dark: #1f2937;
  --text-light: #6b7280;
  --extra-light: #faf5ff;
  --max-width: 1200px; */

  --primary-color: black; 
  --primary-color-dark:grey;
  --secondary-color: #ca8a04;
  --text-dark: #1f2937;
  --text-light: #6b7280;
  --extra-light: #faf5ff;
  --max-width: 1200px; 
  
}

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

a {
  text-decoration: none;
}

body {
  font-family: "Poppins", sans-serif;
}

nav {
  width: 100%;
   
  top: 0;
  left: 0;
  background-color: #ffffff;
  /*z-index: 99; */
  position: relative; /* Adjusted to ensure z-index works correctly */
  z-index: 1000;

  transition: top 0.3s;
}

nav.fixed {
  top: 0; /* Keep the navigation bar at the top when fixed */
}

.nav__content {
  max-width: var(--max-width);
  margin: auto;
  padding: 1.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav .logo a {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
  transition: 0.3s;
}
nav .logo a:hover {
  color: var(--primary-color-dark);
}

nav .checkbox {
  display: none;
}

nav input {
  display: none;
}
nav .checkbox i {
  font-size: 2rem;
  color: var(--primary-color);
  cursor: pointer;
}

ul {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  transition: left 0.3s;
}

ul li a {
  padding: 0.5rem 1rem;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 600;
  color: var(--text-dark);
  transition: 0.3s;
}

ul li a:hover {
  border-top-color: var(--secondary-color);
  border-bottom-color: var(--secondary-color);
  color: var(--secondary-color);
}

.section {
  background-color: var(--extra-light);
  /*margin-top: 70px;    /* Adjust this value based on the height of your navigation bar */
  
}


/*.section__container {
  min-height: 100vh;
  max-width: var(--max-width);
  margin: auto;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
} */

.section__container {
  min-height: 100vh;
  max-width: var(--max-width);
  margin: auto;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 2rem; 
  align-items: center; 
  position: relative;
} 


.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  margin: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.subtitle {
  letter-spacing: 2px;
  color: var(--text-light);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.title {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 3rem;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.title span {
  font-weight: 600;
}


.Hemtop {
  background: linear-gradient(
    90deg,
    #ff6ec4,
    #7873f5,
    #76e5fc,
    #ff6ec4,
    #7873f5,
    #76e5fc
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 5s infinite;
}


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


.description {
  line-height: 1.5rem;
  color: var(--text-light);
  margin-bottom: 2rem;
}

.action__btns {
  display: flex;
  gap: 1rem;
}

.action__btns button {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 1rem 2rem;
  outline: none;
  border: 2px solid var(--primary-color);
  border-radius: 10px;
  transition: 0.3s;
  cursor: pointer;
}

.hire__me {
  background-color: var(--primary-color);
  color: #ffffff;
}

.hire__me:hover {
  background-color: var(--primary-color-dark);
}

.portfolio {
  color: var(--primary-color);
}

.portfolio:hover {
  background-color: var(--primary-color-dark);
  color: #ffffff;
}


.image {
  display: grid;
  place-items: center;
  margin-top: 50px;
  position: relative;
  top: 50px; 
} 

/*.image {
  position: relative;
  top: 50px; 
} 
*/

.image img {
  width: min(25rem, 90%);
  height: min(25rem, 90%);
  border-radius: 100%;
  object-fit: cover;
}


#slideShow {
  position: relative;
  width: 300px;
  height: 130px; /* Keep width and height the same for a square */
  margin: 0 auto; /* Center the slideshow */
  overflow: hidden; /* Hide the non-active slides */
}

.slide {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.emoji {
  display: inline-block; 
  width: 20px;
  height: 20px;
  background-color: yellow;
  border-radius: 50%;
  position: relative;
  vertical-align: middle; 
  margin-left: 5px; 
}

.emoji1 {
  display: inline-block; 
  width: 20px;
  height: 20px;
  background-color: yellow;
  border-radius: 50%;
  position: absolute; /* Updated this line */
  vertical-align: middle; 
  margin-left: 5px; 
  animation: roll 16s infinite linear;
}


.ball {
  position: absolute;
  width: 20px; /* Diameter of the ball */
  height: 20px; /* Diameter of the ball */
  border-radius: 50%;
  background-color: red; /* Color of the ball */
  transform: translateX(0%);
  animation: roll 4s infinite linear;
}

.eye {
  width: 3px;
  height: 3px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 6px;
}

.left-eye {
  left: 5px;
}

.right-eye {
  right: 5px;
}

.mouth {
  width: 10px;
  height: 5px;
  background-color: black;
  border-radius: 0 0 5px 5px;
  position: absolute;
  bottom: 4px;
  left: 5px;
}



@media (width < 750px) {
  nav .checkbox {
    display: block;
  }

  ul {
    position: absolute;
    width: 100%;
    height: calc(100vh - 85px);
    left: -100%;
    top: 85px;
    background-color: var(--extra-light);
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
  }

  nav #check:checked ~ ul {
    left: 0;
  }

  ul li a {
    font-size: 1.25rem;
  }

  .section__container {
    padding: 10rem 1rem 5rem 1rem;
    text-align: center;
    grid-template-columns: repeat(1, 1fr);
  }

  .image {
    grid-area: 1/1/2/2;
  }

  .action__btns {
    margin: auto;
  }
}

.animation-container {
  position: relative;
  width: 100%;
  height: 50px; /* Adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
}

.line {
  position: absolute;
  width: 100%;
  height: 2px; /* Thickness of the line */
  background-color: black; /* Color of the line */
}


/*
@keyframes roll {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
} */

@keyframes roll {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 20px); /* 100% of the container width - the emoji width */
  }
}

.action__btns button, .action__btns a {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 1rem 2rem;
  outline: none;
  border: 2px solid var(--primary-color);
  border-radius: 10px;
  transition: 0.3s;
  cursor: pointer;
}

.hire__me, .hire__me:hover, .hire__me:active, .hire__me:focus {
  background-color: var(--primary-color);
  color: #ffffff;
  text-decoration: none; /* This prevents the underline text decoration on anchor tags */
}

/* footer */




/*projects */
/* Basic Styles */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Navigation Styles */
nav {
  width: 100%;
  background-color: #f8f8f8;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.nav__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px; /* Increased padding for greater height */
}

.psection {
  background-color: var(--extra-light);
  /* margin-top: 70px;     Adjust this value based on the height of your navigation bar */
  padding-top: 70px;
}

.logo a {
  font-size: 24px;
  color: #333;
}

/* Grid Layout for Project Items */
.pcontent {
  display: grid;
  grid-template-columns: 1fr; /* One column grid */
  gap: 30px;
  padding: 20px 10px; /* Reduced side padding for more width */
  margin: 0 auto;
  max-width: 80%; /* Increases the width to near full-width */
}

.item {
  display: flex;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
  align-items: flex-start; /* Aligns items at the top */
}

.item img {
  width: 300px; /* Fixed width for images */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensures the image covers the designated area without distortion */
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.details {
  padding: 15px;
  flex: 1; /* Takes remaining space next to the image */
}

.details h3, .details h4 {
  margin: 5px 0;
  color: #303f9f;
}

.details p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  text-align: justify;
}


.year-badge {
  background-color: #303f9f;
  color: #fff;
  padding: 2px 6px; /* Reduced padding for a tighter fit */
  border-radius: 16px;
  font-size: 14px;
  font-weight: bold;
  display: inline-block; /* Ensures the background wraps the content snugly */
}

/*line*/
.details h3 {
  position: relative;
  padding-bottom: 5px; /* Provides space between the text and the line */
  margin-bottom: 20px; /* Space after the title to separate from content below */
}

.details h3:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%; /* Ensures the line spans the full width of the title */
  height: 2px; /* Thickness of the line */
  background-color: #808080; /* Gray color for the line */
  display: block;
}

.item-info {
  display: flex; /* Enables flexbox layout */
  align-items: center; /* Vertically aligns the contents in the middle */
  gap: 10px; /* Provides space between the year badge and the tools description */

  margin-top: 10px; /* Add margin top */
  margin-bottom: 10px; /* Add margin bottom */

}

.year-badge {
  margin: 0; /* Removes default margin to align properly */
  white-space: nowrap; /* Prevents breaking into multiple lines */
}

.item-info h4 {
  margin-bottom: 10px; /* Increase margin bottom */
 /* margin: 0;  Removes default margin to align properly */
  white-space: nowrap; /* Prevents breaking into multiple lines */
}

.details h4 {
  color: #303f9f; /* Ensures consistent color styling with other headings */
}


/* project button */

.project-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #303f9f; /* Primary color for the button */
  color: #fff; /* Text color */
  text-decoration: none; /* Remove underline */
  border-radius: 5px; /* Rounded corners */
  font-weight: bold; /* Bold text */
  transition: background-color 0.3s; /* Smooth color transition on hover */

  margin-top: 20px;
}

.project-link:hover {
  background-color: #1e2777; /* Darker color on hover */
}





/* Footer Styles */
footer {
  padding: 20px 0;
  text-align: center;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.socials i {
  font-size: 24px;
  color: #666;
  transition: color 0.3s;
}

.socials i:hover {
  color: #333;
}

/* Media Queries */
@media (max-width: 768px) {
  .item {
    flex-direction: column; /* Stack elements vertically on smaller screens */
  }
  .item img {
    width: 100%; /* Full width images on small screens */
    height: auto; /* Adjust height automatically */
    border-radius: 3px; /* Full radius for a standalone image */
  }
}


/*research */

/* Research Publications */
/* Research Publications */
.publications {
  display: flex;
  flex-direction: column; /* Stack vertically on smaller screens */
  align-items: center;
  padding-top: 70px; /* Add space between navigation and first box */
  margin-bottom: 20px;
}

.publication {
  background-color: #f0f0f0;
  padding: 25px; /* Slightly increased padding */
  margin: 20px 15px; /* Adjusted side margins */
  border-radius: 10px;
  width: 95%; /* Slightly increased width */
  max-width: 700px; /* Increase maximum width */
}

.title {
  font-size: 1.3rem; /* Slightly larger title font */
  font-weight: bold;
  margin-bottom: 10px;
}

.journal-year {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.journal, .year {
  font-size: 1.1rem; /* Slightly larger font for journal and year */
}

.year {
  color: #007bff; /* Highlighted in blue */
}

.separator {
  border: none;
  border-top: 1px solid #d3d3d3; /* Line before abstract */
  margin: 10px 0;
}

.authors {
  font-size: 1rem;
  font-style: italic;
  margin-bottom: 10px;
  color: #666; /* Light color */
}

.abstract {
  font-size: 1rem;
  font-family: "Georgia", serif; /* Stylish font */
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Show only 2 lines */
  -webkit-box-orient: vertical;
}

.abstract.full {
  -webkit-line-clamp: initial; /* Show full text */
}

.read-more {
  display: inline-block;
  margin-top: 10px;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
}

.publication-link, .other-documents {
  display: inline-block;
  margin-top: 10px;
  margin-left: 10px; /* Add spacing between buttons */
  background-color: #007bff;
  color: #fff;
  padding: 8px 12px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9rem;
}

.publication-link:hover, .other-documents:hover {
  background-color: #0056b3;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .publication {
    width: 95%; /* Slightly wider for smaller screens */
    margin: 15px 0; /* Reduced vertical spacing between items */
    padding: 20px; /* Adjust padding to fit smaller screens */
  }

  .title {
    font-size: 1.2rem;
  }

  .authors, .journal, .year {
    font-size: 1rem;
  }

  .read-more, .publication-link, .other-documents {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .publication {
    width: 100%;
    margin: 10px 0;
    padding: 15px; /* Adjust padding for smaller devices */
  }

  .title {
    font-size: 1.1rem;
  }

  .authors, .journal, .year {
    font-size: 0.9rem;
  }

  .read-more, .publication-link, .other-documents {
    font-size: 0.8rem;
    padding: 6px 10px;
  }
}



/*message*/

/* Styles for the message box */
.message-box {
  margin: 100px auto;
  width: 60%;
  max-width: 600px;
  padding: 30px;
  background: #f5f5f5;
  border: 2px solid #c1c1c1;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.message-title {
  font-size: 2rem;
  color: #4a90e2; /* Primary color */
  margin-bottom: 20px;
}

.message-content {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.5;
  margin-bottom: 20px;
}

.go-back {
  display: inline-block;
  padding: 10px 15px;
  background-color: #4a90e2; /* Primary color */
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 1rem;
}

.go-back:hover {
  background-color: #357abd; /* Darker shade on hover */
}