/* GENERAL */

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

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


body {
  font-family: "Poppins", sans-serif;
  background-color: white;
  padding-top: 12vh;
}

html {
  scroll-behavior: smooth;
  
}

p {
  color: rgb(85, 85, 85);
}

header{
  background-color: #1b1b1b;
  
}

/* TRANSITION */

a,
.btn {
  transition: all 300ms ease;
}

/* ===============
   DESKTOP NAVIGATION
   =============== */

/* General Navigation Styling */
nav,
.nav-links {
  display: flex;
}

nav {
  justify-content: space-around;
  align-items: center;
  height: 16vh;
  
}

/* Navigation Links Styling */
.nav-links {
  gap: 2rem;
  display: flex;
  list-style: none;
  font-size: 1.6rem;
  background-color: rgb(0, 0, 0);
  border-radius: 30px;
  
  
}

.nav-links a{
  color: rgb(255, 255, 255);
  text-decoration: none;
  
}

.nav-links a.active {
  text-shadow: 0 0 10px rgba(0, 255, 255, 1), 0 0 20px rgba(0, 255, 255, 1); /* Glow effect */
  color: #00FFFF; /* Optional: Set text color to match the glow */
  
}

.nav-links li{
  margin: 0.75rem;
}

/* General Link Styling */

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

a:hover {
  color: grey;
  text-decoration: underline;
  text-underline-offset: 1rem;
  text-decoration-color: rgb(181, 181, 181);
  transform: scale(1.2);
}

/* Logo Styling */

.logo {
  width: 100px; /* Adjust width as needed */
  height:auto;
  margin-right: 5px; /* Optional margin for spacing */
  cursor: pointer;
}

.logo img {
  /* Additional styles for the logo image itself (optional) */
  max-width: 100%; /* Ensure image doesn't overflow container */
  border-radius: 50%;
}

.logo:hover {
  cursor: pointer;
}

/* ===============
    HAMBURGER MENU
    =============== */

/* Make sure navigation remains on top */

#desktop-nav, #hamburger-nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000; /* To make sure it stays on top of other content */
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-out; /* Smooth background color transition */ /* Smooth transition for hiding/showing */
  display: flex;
  transform: translateY(0); /* Hide by moving it off-screen */
}



/* Hamburger Navigation (Hidden by Default) */

#hamburger-nav {
  display: none; /* Hidden by default for larger screens */
  height: auto;
}

/* When scrolled, change background color */
#hamburger-nav.scrolled {
  background-color: #333;
  transition: background-color 0.3s ease-in-out;
}

/* Hamburger Menu Container */
.hamburger-menu {
  position: relative; /* Needed for layering elements */
  display: inline-block;
  border-radius: 10px; /* Curved edges (adjust value for desired curve) */
  padding: 5px; /* Optional padding for spacing */
  transition: all 0.3s ease-in-out; /* Optional transition for smooth appearance */
}

/* Hamburger Icon */
.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 24px;
  width: 30px;
  cursor: pointer;
  
}

.hamburger-icon:hover{
  transform: scale(1.1);
}

.hamburger-icon span {
  width: 100%;
  height: 2px;
  background-color: rgb(255, 255, 255);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* When menu is opened, animate into an 'X' */
/* When menu is opened, animate into an 'X' */
.hamburger-icon.open span:first-child {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-icon.open span:nth-child(2) {
  opacity: 0; /* Middle line disappears */
}

.hamburger-icon.open span:last-child {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Menu Links Styling */
.menu-links {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  width: fit-content;
  max-height: 0;
  overflow: hidden;
  display: none; /* Initial state (hidden) */
  transition: all 0.3s ease-in-out;
  border-radius: 50px;
}

.menu-links a {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 1.1rem;
  color: black;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.menu-links li {
  list-style: none;
}

/* When menu is open */
.menu-links.open {
  max-height: 400px;
  display: block; /* Display when open */
  background-color: rgb(166, 195, 214); /* black background */
  border-radius: 50px; /* Curved edges (adjust value for desired curve) */
  transition: all 0.3s ease-in-out;
  overflow: hidden; /* Prevent content overflow when closed */
}


/* SECTIONS */

section {
  position: static;
  padding-top: 0;
  height: 96vh;
  
  box-sizing: border-box;
  min-height: fit-content;
  
}


/* PROFILE SECTION */

#profile {
  display: flex;
  justify-content: center;
  gap: 5rem;
  height: 80vh;
  margin: 1rem 10rem;
  width: fit-content;
}

.bg-image {
  
  filter: blur(1px);
  -webkit-filter: blur(1px);
  background-repeat:no-repeat;
  background-position: center;
  background-size:contain;
}

.section__pic-container {
  display: flex;
  height: 400px; /* Set the height of your home section */
  width: 400px;
  margin: auto 0;
  object-fit:fill; /* Stretch to fill, potentially distorting */
}
.section__pic-container img{
  box-shadow: 0 0 20px 2px rgb(0 0 0 / 92%);
  
  
}

/* Orbit container behind the profile image */
.cbanner {
  position: relative;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* This container rotates continuously */
.cslider {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateOrbit 20s linear infinite;
}

/* Position each orbiting item on a circular path */
.citem {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;    /* Adjust size as needed */
  height: 80px;
  margin: -40px;  /* Center the item (half of width/height) */
  /* 
    The transform does three things:
    1. rotate(…) positions the item at the correct angle,
    2. translateX(180px) moves it outwards (set orbit radius),
    3. rotate(…) rotates it back so it appears upright.
  */
  transform: rotate(calc((var(--position) - 1) * (360deg / var(--total))))
             translateX(180px)
             rotate(calc(-1 * ((var(--position) - 1) * (360deg / var(--total)))));
}

.citem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: none;

}

/* Keyframes to rotate the orbiting container */
@keyframes rotateOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.section__text {
  align-self: center;
  text-align: center;
  justify-items: center;
}

.section__text p {
  font-weight: 600;
}

.section__text__p1 {
  text-align: center;
}
.Warning{
  color: #c70000;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
  background-color: #c7c5c5;
  padding: 0.5rem;
  border-radius: 25px;
  box-shadow: 9px 9px 4px rgb(53 53 53 / 80%);
}
.section__text__p2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.titlecont{
  background-color: #c5c5c5;
  border-radius: 30px;
  box-shadow: 9px 9px 4px rgb(53 53 53 / 91%);
  padding: 20px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* Transition for shadows too */
  perspective: 1300px;
}
.title {
  font-size: 5.5rem;
  text-align: center;
  font-family: Georgia, serif;
  background-color: white;
  border-radius: 40px;
  box-shadow: 9px 9px 3px 0px rgb(40 42 43 / 90%);
  
  padding-bottom: 5px;
  color: #000077;
  transform-style: preserve-3d;
  transform: translateZ(20px);
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* Transition for shadows too */
}
.titlecont::before { /* Pseudo-element for depth */
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: #fc0054;
  border-radius: 25px;
  box-shadow: inset 5px 5px 7px rgba(53, 53, 53, 0.5); /* Default shadow */
  transform: translateZ(-12px);
  z-index: -1;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* Transition for shadows too */
}
#socials-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 1rem;
  
}
#socials-container a{
  transform: scale(1);
  box-shadow: inset 0px 0px 6px 0px rgb(40 42 43 / 90%);
  padding: 5px;
  border-radius: 30px;
}
#socials-container a img:hover{
  box-shadow: 0 0 6px 1px rgb(0, 0, 0);
  border-radius: 50px;
  align-items: center;
  justify-self: center;
  animation: scaleico 1s linear ;
}

@keyframes scaleico {
  0% {
    transform: scale(1);
  }
  50%{
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.multiText{
  font-weight: 800;
  /*font-size: 1.5rem;*/
  font-family: Georgia, 'Times New Roman', Times, serif;
  white-space: nowrap; /*Prevents the text from wrapping to the next line*/
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: -2px 0 0 rgb(0 0 103), 0 2px 0 rgb(0 93 0), 2px 0 0 rgb(0, 0, 0), 0 -2px 0 rgb(143 0 0);
  transform: rotateX(45deg);
  opacity: 1;
  transition: opacity 0.6s ease-out;
}

.wrapper {
  text-align: center; /* Center align the text within the wrapper */
  display: inline-block;
  font-weight: bold;
  font-size: 2rem;
  color: #3089dd;
}

.typing-animation {
  display: flex;
  position: relative;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 120px; /* Set height to fit content */
  /*
  background-color: #0000000d;
  border-radius: 30px;
  box-shadow: 0 0 12px 0px rgb(0 0 0 / 92%); */
  margin: 30px;
}
.typed-fade-out{
  opacity: 0;
  transition: opacity .3s ease-out;
  
}
.intcont{
  background-color: #021038;
  border: none;
  border-radius: 40px;
  box-shadow: none;
  z-index: -1;
  transform: translate3d(0, 0, 0); /* Reset position */
  transition: transform 0.6s ease-in-out, box-shadow 0.3s ease, background-color 0.6s ease-in-out; /* Smooth transitions */ 
  margin: 5px;
  margin-bottom: 15px;
}
.introtextcon{
  text-align: left;
  background-color:#000000;
  border-radius: 30px;
  box-shadow: none;
  padding: 1rem;
  position: relative;
  transform: translate3d(0, 0, 0); /* Reset position */
  transition: transform 0.6s ease-in-out, box-shadow 0.3s ease; /* Smooth transitions */
}

.intcont:hover{
  transform: translate3d(5px, 5px, 0); /* Move down right slightly on hover */
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.7);
  background-color: #032688;
}
.intcont:hover .introtextcon{
  color: #00ff55;
  transform: translate3d(-15px, -15px, 0); /* Move up left slightly on hover */
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.6); /* Enhanced shadow on hover */
}
.firaim{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0, 0);
  transition: transform 0.6s ease-in-out, scale 0.6s ease-in-out; 
  scale: 1;
  z-index: -1;

}
.secaim{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(0, 0);
  transition: transform 0.6s ease-in-out, scale 0.6s ease-in-out;
  scale: 1;
  z-index: -1;

}
.thiraim, .foraim{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(0, 0);
  transition: transform 0.9s ease-in-out, scale 0.9s ease-in-out;
  scale: 1;
  z-index: -1;
  
}
.intcont:hover .secaim{
  transform: translate(150px, -150px);
  scale: 2;

}
.intcont:hover .firaim{
  transform: translate(-150px, -150px);
  scale: 2;
}
.intcont:hover .thiraim{
  transform: translate(-150px, 100px);
  scale: 2;
}
.intcont:hover .foraim{
  transform: translate(150px, 100px);
  scale: 2;
}

.introtextcon .introtextconem{
  font-style: italic;
  color: #0790eb;
  font-family: 'Courier New', Courier, monospace;
  font-size: 25px; 
  font-weight:750;
  letter-spacing: normal;
  display: inline;
}
.intcont:hover .introtextconem{
  color: #00ff55;
}
#about table {
  margin: 0 auto;  /* Centers the table horizontally */
  
}

/* ICONS */

.icon {
  cursor: pointer;
  height: 2rem;
}

/* BUTTONS */

.btn-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.btn {
  font-weight: 600;
  transition: all 300ms ease;
  padding: 1rem;
  width: 8rem;
  border-radius: 2rem;
}
.btn-color-1{
  box-shadow: 6px 6px 2px 0px rgb(75 72 72 / 92%);
  background: rgb(53, 53, 53);
  color: white;
}

.btn-color-2{
  box-shadow: 6px 6px 2px 0px rgb(0 0 0 / 92%);
  transition: all 300ms ease;
}
.btn-color-1,
.btn-color-2 {
  border: rgb(53, 53, 53) 0.1rem solid;
}

.btn-color-1:hover,
.btn-color-2:hover {
  cursor: pointer;
  transform: translate3d(-2px, -2px, 0);
  transition: all 300ms ease;
}

.btn-color-2:hover {
  background: rgb(53, 53, 53);
  color: white;
}

.btn-color-1:hover {
  background: rgb(0, 0, 0);
}


/* ABOUT SECTION */

#about {
  position: relative;
  background-color: #000029;
  padding: 3rem;
  margin: 5px 0px;
  margin-bottom: 0px;
  border-radius: 30px 30px 0 0;
  padding-top: 50px;
}

.abo-title {
  font-size: 3rem;
  text-align: center;
  font-family: Georgia, serif;
  color: #00FFFF;
}
.section-container {
  display: flex;                  /* Enable Flexbox for section-container */
  flex-direction: row;            /* Arrange items in a row */
  justify-content: flex-start;    /* Align items to the start (left) */
  align-items: flex-start;       /* Align items to the top */
  gap: 1rem;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 30px;
  padding: 1rem;
  background-color: #224ba54f;
}
.right-containers {                 /* Style for the new wrapper div */
  display: flex;                  /* Enable Flexbox for right-containers */
  flex-direction: column;         /* Stack items vertically */
  gap: 2rem;                      /* Gap between the stacked containers */
}
.section_det{
  width: 450px;
  height: 420px;
  font-size: 1.5rem;
  color: #00FFFF;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 30px;
  background-color: #3b4f7b;
  overflow: hidden;
  padding: 2px;
  box-shadow: 12px 12px 4px rgb(99 101 155 / 82%);
  transition: all 0.3s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.801);
  border-left: 1px solid rgba(255, 255, 255, 0.801);
}
/*
.section_det ::before {
  content: '';
  position: relative;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, 
  transparent, #ff6b35, #9d4edd, transparent);
  animation: rotate 4s linear infinite;
  transform-origin: center center;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}*/

.section_det h3{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.section_det h4{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000000fb;
  font-family:'Courier New', Courier, monospace;
  font-size: 18px;
  font-style: italic;
}
.section_det_det{
  font-size: 1.1rem;
  margin-top: 1rem;
}
.category-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0.5rem;
  padding: 0.5rem;
  color: #000;
  list-style: none;
}

.category-item{
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 1rem 1rem;
  margin: 0.25rem;
  width: 650px;
  height: 80px;
  border-radius: 20px;
  background: rgb(193 210 255 / 75%);
  border-bottom: 5px solid rgba(0, 46, 73, 0.801);
  border-right: 5px solid rgba(72, 0, 87, 0.801);
  transition: all 0.3s ease;
  box-shadow: 8px 8px 5px 0px #000000d4;
}
.category-item:hover {
  transform: translateX(-1px) translateY(-1px) translateZ(100px);
  
  background: rgb(193 210 255 / 100%);
}

.category-item span:first-child {
  color: #000000;
  font-weight: 500;
  font-size: 1rem;
}
.category-count{
  /* Positioning reset and removal */
  position: static; /* Or position: relative; right: auto; top: auto; */
  right: auto;
  top: auto;

  /* Styling properties */
  align-items: center;
  background-color: rgba(33, 128, 49, 0.829);
  color: white;
  padding: 0.25rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  box-shadow: 0 0 30px rgba(104, 102, 102, 0.774);

  /* Flexbox spacing to push to the right */
  margin-left: auto;
  transition: all 0.3s ease;

  margin-right: 8px;
}
.category-item:hover .category-count {
  background-color: rgb(0, 73, 56);
  transform: scale(1.1);
}
.updated-indicator{ 
  position: relative;
  top: -6%;
  left: 74%;
  padding: 0.5rem;
  font-size: 1rem;
  color: chartreuse;
}
.status-dot {
  position: relative;
  top: 0.5%;
  left: 72%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00ff00;
  box-shadow: 0 0 10px #00ff00;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.domain-details-container{
  display: grid;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  top: 50%;
  left: 50%;
  transition: all 0.3s ease;
  background-color: #224ba54f;
  margin: 5px;
  border-radius: 20px;
  padding: 2rem;
  height: fit-content;
  width: 450px;
  box-shadow: 0 0 15px rgb(0 0 0 / 64%);
  border: 1px solid #224ba54f;
}

.domain-details-container:hover {
  border-color: rgba(100, 219, 255, 0.74);
}
.domain-details-container p{
  margin: 0;
  font-size: 1.5rem;
  color: #ffc6c6;

}
.domain-text {
  display: flex;
  flex-direction: column;
  font-size: 1.3rem;/*notowrk because below overwrited*/
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.domain-text p{
  margin: 0;
  font-size: 1.5rem;
  color: #ffffff;
  font-family: 'Courier New', Courier, monospace;
  transition: all 0.3s ease;
  position: relative;
}
.domain-text p::after {
  content: '_';
  position: absolute;
  left: 0;
  bottom: -10%;
  color: #e564ff80;
  font-weight: 700;
  transition: all 0.3s ease;
  transform-origin: 0 50%; /* Set the origin to the right edge */
  transform: scaleX(0);
}

.domain-text p:hover {
  transform: translateX(1px);
}

.domain-text p:hover::after {
  transform: scaleX(5) translateX(5px);
}

.domai-txt{
  font-size: 1.3rem;
  color: #889c88;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.pro-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 1rem;
  box-shadow: 0 0 15px 0px rgb(0 0 0 / 80%);
  height: 880px;
  width: 100%;
  background-color: #77777717;
  padding: 0.5rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.pro-container h3 {
  position: relative;
  font-size: 2.5rem;
  color: #ffffff;
  font-weight: bold;
  align-self: center;
  font-family:serif;
  margin-top: 0;
}
.pro-container h5 {
  position: relative;
  font-size: 1rem;
  color: #b5acac;
  align-self: center;
  font-family:Georgia, 'Times New Roman', Times, serif;
  margin-top: 0;
}

.aprojects-container {
  position: relative;
  width: 100%;
  height: calc(100% - 100px); /* Adjust based on header height */
  overflow: hidden;
}

.projects-track {
  position: absolute;
  display: flex;
  gap: 20px;
  height: 100%;
  animation: scroll 30s linear infinite;
  transition: transform 0.5s ease;
}

.projects-track:hover {
  animation-play-state: paused;
}

.projects-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  min-width: 100%;
  height: 100%;
  padding: 1rem;
  background-color: #003357; 
  border-radius: 20px;
  box-shadow: inset 0 0 5px 0px rgb(0 0 0 / 80%);
  border: 1px solid #c9c9c9;
}

.project-card {
  background: rgb(32 36 73 / 85%);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px 0px #010101;
}

.project-card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease-in-out;
}
.project-card a:hover {
  transform: none;
}

.project-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  padding: 5px;
}

.project-content {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
}

.aproject-title {
  color: #ffffff;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-family:'Franklin Gothic normal', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: 0.05rem;
}

.project-description {
  color: #9df5d0;
  font-size: 0.9rem;
  line-height: 1.4;
  flex-grow: 1;
}

.nav-button-prev-button,
.nav-button-next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(100, 255, 218, 0.1);
  border: none;
  color: #ff6464;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
}

.nav-button-prev-button {
  left: 0.2rem;
}

.nav-button-next-button {
  right: 0.2rem;
}

.nav-button-prev-button:hover,
.nav-button-next-button:hover {
  background: rgba(100, 255, 218, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.678);
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%);
  }
}

/* Overlay Styles */
.project-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}

.overlay-content {
  background: #fff;
  color: #333;
  padding: 20px;
  border-radius: 20px;
  width: 70%;
  max-width: 600px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
  transition: transform 0.3s ease;
  transform: scale(0.8);
}

.project-overlay.show {
  opacity: 1;
  visibility: visible;
}

.project-overlay.show .overlay-content {
  transform: scale(1);
}

.close-overlay {
  position: absolute;
  top: 10px;
  right: 15px;
  background: red;
  color: white;
  border: none;
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 30px 4px rgb(0 0 0);
}

.close-overlay:hover{
  color: white;
  background-color: rgb(0, 102, 255);
}

/* Overlay image styling */
#overlayImage {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 0 30px 3px rgb(0 0 0);
}


/* skills SECTION */

/* Top Section Background */
#skills {
  background-color: #000029;
  color: #f8f9fa;
  font-family: 'Nunito', sans-serif;
  padding: 10px;
  line-height: 1.7;
  padding-bottom: 20px;
}

/* Middle Section - Deep Violet Blue Background */
#skills .skills-container {
  background-color: #120e29; /* Deeper Violet Blue Middle Section Background */
  color: #f8f9fa;
  border-radius: 30px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7); /* Even Stronger shadow for deeper dark */
  padding: 20px;
  max-width: 95%;
  margin: 0 auto;
  background-image: linear-gradient(155deg, #120e29 0%, #0e0b20 100%); /* Deeper Violet Blue Gradient */
}

#skills .skills-header {
  border-bottom: none;
  margin-bottom: 10px;
  padding-bottom: 0;
  text-align: center;
}

#skills .skills-header h2 {
  font-size: 3rem;
  text-align: center;
  font-family: Georgia, serif;
  color: #ffffff; /* Light Header Text for deep violet blue background */
  margin-bottom: 15px;
  font-weight: 700;
  letter-spacing: -1.7px;
  text-transform: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Even stronger text shadow */
}

#skills .skill-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  padding-bottom: 7px;
  border-bottom: 2px solid #2a2542; /* Deeper Violet Blue Tab Border */
}

#skills .skill-tabs button {
  background-color: transparent;
  border: none;
  color: #f0f0f0; /* Very Light Gray Tab Text */
  padding: 13px 25px;
  font-size: 1.3em;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background-image: none;
  border-radius: 30px;
}

#skills .skill-tabs button:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.07); /* Slightly stronger hover background */
  border-radius: 30px;
}

#skills .skill-tabs button.active {
  color: #ffffff;
  border-bottom-color: transparent;
  /* Active Tab - Rainbow Multi-Color Underline Animation - Style 42 (same as 41) */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Rainbow gradient - Style 42 (same as 41) */
  background-repeat: no-repeat;
  background-size: 200% 3px; /* Wider than button for animation */
  background-position: 0% 100%; /* Start at left bottom */
  animation: active-underline-animation 4s linear infinite; /* Apply infinite animation - Style 42 Keyframes (same as 41) */
}

@keyframes active-underline-animation { /* Keyframes for active tab infinite rainbow multi-color underline - Style 42 (same as 41) */
  0% {
      background-position: 0% 100%; /* Start at left */
  }
  100% {
      background-position: 100% 100%; /* Move to right */
  }
}


#skills .skill-tabs button.active:hover {
  background-color: rgba(255, 255, 255, 0.07); /* Hover effect for active tab - Style 42 (same as 41) - keep hover background */
  border-radius: 30px;
}


#skills .tab-content {
  display: none;
  padding: 20px;
  height: 620px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Scrollbar Styling - Deep Violet Blue Theme */
#skills .tab-content::-webkit-scrollbar {
  width: 6px;
}

#skills .tab-content::-webkit-scrollbar-track {
  background: #2a2542; /* Deeper Violet Blue Scrollbar Track */
  border-radius: 6px;
}

#skills .tab-content::-webkit-scrollbar-thumb {
  background-color: #20c997; /* Vibrant Teal Scrollbar Thumb */
  border-radius: 6px;
  border: 1px solid #2a2542; /* Deeper Violet Blue border for thumb */
}


/* --- Tool Skills Tab - Style 42 - Four Columns on larger screens, responsive to smaller --- */
#skills .tab-content#tool.active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Four Columns - Style 42 - Default for larger screens */
  gap: 30px;
  padding: 25px;
}

#skills .tab-content#tool .skill-category {
  background-color: #2a2542; /* Deeper Violet Blue Category Box - Style 42 (same as 41) */
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6); /* Even Stronger shadow */
  border: 1px solid #302b4a; /* Slightly Lighter Violet Blue Border - Style 42 (same as 41) */
   background-image: linear-gradient(150deg, #2a2542 0%, #24203a 100%); /* Deeper Violet Blue Gradient - Style 42 (same as 41) */
}

#skills .tab-content#tool .skill-category-title {
  color: #ffffff; /* Light Category Title */
  font-size: 1.4em; /* Category Title size - Style 42 (same as 41) */
  font-weight: 700; /* Category Title weight - Style 42 (same as 41) */
  margin-bottom: 15px; /* Margin - Style 42 (same as 41) */
  border-bottom: 2px dashed #524d64; /* Dashed Border - Style 42 (same as 41) */
  padding-bottom: 8px; /* Padding - Style 42 (same as 41) */
  text-shadow: none;
}

#skills .tab-content#tool .skill-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

#skills .tab-content#tool .skill-tag {
  background-color: #302b4a; /* Slightly Lighter Violet Blue Tag Background - Style 42 (same as 41) */
  color: #30a728;
  padding: 10px 18px;
  border-radius: 24px; /* Tag border-radius - Style 42 (same as 41) */
  display: inline-block;
  font-size: 1.15em;
  margin-bottom: 5px;
  box-shadow: -13px 13px 8px 0px rgba(0, 0, 0, 0.5); /* Even Stronger tag shadow */
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

#skills .tab-content#tool .skill-tag:hover {
  background-color: #3b3655; /* Slightly Lighter Violet Blue Tag Hover - Style 42 (same as 41) */
  transform: translateY(-2px);
  box-shadow: -13px 13px 4px 0px rgba(0, 0, 0, 0.5); /* Even Stronger hover tag shadow */
}


/* --- Technical, Soft, Other Skills Tabs - Deep Violet Blue Card Grid Layout (Style 42 - responsive) --- */
#skills .tab-content.active:not(#tool) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Style 42 - Default for larger screens - auto-fill columns */
  gap: 25px;
}

#skills .tab-content.active:not(#tool) .skill-item {
  background-color: #2a2542; /* Deeper Violet Blue Card Background - Style 42 (same as 41) */
  color: #e9ecef;
  padding: 22px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.6); /* Even Stronger card shadow */
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.2s ease-in-out;
  border: 1px solid #302b4a; /* Slightly Lighter Violet Blue Border - Style 42 (same as 41) */
   background-image: linear-gradient(150deg, #2a2542 0%, #24203a 100%); /* Deeper Violet Blue Gradient - Style 42 (same as 41) */
}

#skills .tab-content.active:not(#tool) .skill-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7); /* Even Stronger hover card shadow */
  border-color: #20c997; /* Vibrant Teal Hover Border - contrast with violet blue */
}


#skills .skill-icon { /* Generic skill icon style - Deep Violet Blue Theme */
  background-color: #302b4a; /* Slightly Lighter Violet Blue Icon Background */
  color: #20c997; /* Vibrant Teal Icon Color - contrast with violet blue */
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8em;
  opacity: 0.85;
  text-shadow: none;
}

#skills .skill-name { /* Generic skill name style - Deep Violet Blue Theme */
  font-size: 1.2em;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-shadow: none;
}


/* --- Media Queries for Responsiveness - Style 42 --- */

/* For tablets and smaller screens (up to 768px) */
@media (max-width: 768px) {
  #skills .skills-container {
      padding: 45px; /* Reduced padding for tablet */
  }
  #skills .skills-header h2 {
      font-size: 2.6em; /* Slightly smaller header for tablet */
  }
  #skills .skills-header p {
      font-size: 1.2em; /* Slightly smaller description for tablet */
  }
  #skills .skill-tabs button {
      font-size: 1.2em; /* Smaller tab font for tablet */
      padding: 10px 20px; /* Smaller tab padding for tablet */
  }
  #skills .tab-content#tool.active {
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Three columns for Tool Skills on tablet */
  }
  #skills .tab-content.active:not(#tool) {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Two columns for other skills on tablet */
  }
  #skills .tab-content.active:not(#tool) .skill-item {
      padding: 18px; /* Reduced card padding for tablet */
  }
   #skills .tab-content#tool .skill-category-title {
      font-size: 1.3em; /* Slightly smaller category title for tablet */
  }
  #skills .tab-content#tool .skill-tag {
      font-size: 1.05em; /* Slightly smaller skill tag for tablet */
  }
  #skills .skill-name {
      font-size: 1.15em; /* Slightly smaller skill name for tablet */
  }


}

/* For mobile and very small screens (up to 576px) */
@media (max-width: 576px) {
  #skills .skills-container {
      padding: 30px; /* Further reduced padding for mobile */
  }
  #skills .skills-header h2 {
      font-size: 2.2em; /* Smaller header for mobile */
  }
  #skills .skills-header p {
      font-size: 1.1em; /* Smaller description for mobile */
  }
  #skills .skill-tabs {
      flex-direction: column; /* Stack tabs vertically on mobile */
      align-items: stretch; /* Full width tabs on mobile */
      justify-content: flex-start; /* Align items to start in column layout */
      border-bottom: none; /* Remove border in vertical layout */
  }
  #skills .skill-tabs button {
      margin-bottom: 5px; /* Spacing between stacked tabs */
      margin-right: 0; /* Remove right margin for stacked tabs */
      display: block; /* Make tabs full width */
      width: 100%; /* Ensure full width */
      text-align: center; /* Center text in tabs */
      padding: 12px 15px; /* Further reduced tab padding for mobile */
  }
  #skills .tab-content {
      padding: 25px 15px; /* Reduced tab content padding for mobile */
  }
  #skills .tab-content#tool.active {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Two columns for Tool Skills on mobile */
  }
  #skills .tab-content.active:not(#tool) {
      grid-template-columns: 1fr; /* Single column for other skills on mobile */
  }
  #skills .tab-content#tool .skill-category {
      padding: 20px; /* Reduced category box padding for mobile */
  }
  #skills .tab-content#tool .skill-tag-list {
      justify-content: center; /* Center align tags on mobile */
  }

  #skills .tab-content.active:not(#tool) .skill-item {
      padding: 15px; /* Further reduced card padding for mobile */
  }
  #skills .skill-icon {
      width: 50px; /* Smaller skill icon for mobile */
      height: 50px; /* Smaller skill icon for mobile */
      font-size: 1.6em; /* Smaller skill icon font size for mobile */
  }


}


.floating-emoji {
  position: absolute;
  font-size: 2rem;
  pointer-events: none;
  animation: bounce 3s ease-in-out infinite;
  background: transparent;
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0) scale(1); /* Start and end at original position and scale */
  }
  50% {
    transform: translateY(-10px) scale(1.13); /* Move up slightly and scale up subtly */
  }
}

.floating-emoji:nth-child(2) { top: 20%; right: 10%; animation-delay: -1s; }
.floating-emoji:nth-child(3) { top: 25%; left: 15%; animation-delay: -2s; }

.floating-emoji:nth-child(5) { top: 50%; left: 5%; animation-delay: -3s; }
.floating-emoji:nth-child(6) { top: 60%; right: 5%; animation-delay: -4s; }
.floating-emoji:nth-child(7) { top: 70%; left: 15%; animation-delay: -5s; }
.floating-emoji:nth-child(8) { top: 85%; right: 10%; animation-delay: -6s; }
.floating-emoji:nth-child(9) { top: 90%; left: 5%; animation-delay: -7s; }




/*Education & Experience*/
/* =====================================
   Education & Experience Section
===================================== */
#education-experience {
  position: relative;
  background-color: #000029;
  color: #fff;
  padding: 2rem;

  
}

.eduexp-container {
  padding: 2rem;
  background: #131b29;
  border-radius: 50px;
  box-shadow: 0px 0px 20px 3px rgb(0 0 0);
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */
.eduexp-header {
  text-align: center;
  margin-bottom: 20px;
}

.eduexp-header h1 {
  font-size: 2.5em;
  margin-bottom: 5px;
  font-family: Georgia, serif;
}

.eduexp-header h2 {
  font-size: 1.5em;
  color: #aaa;
  font-weight: normal;
  font-family: Georgia, serif;
}

/* ---------- Main Content Layout ---------- */
/* Mobile-first: stacked vertically */
.eduexp-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.experience-section{
  overflow-y: scroll;
  scroll-behavior: smooth;
  height: 850px;
}

/* =====================================
   Section Common Styles
===================================== */
.experience-section,
.education-section,
.certificates-section,
.certi-section,
.cer-section {
  background-color: #1e1e1e;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px 3px rgb(2 2 2 / 88%);
}

/* Section Headings */
.experience-section h3,
.education-section h3,
.certificates-section h3,
.certi-section h3 {
  margin-top: 0;
  font-size: 1.8em;
  margin-bottom: 15px;
  border-bottom: 1px solid #0093fba8;
  padding-bottom: 5px;
  border-radius: 5px;
}

/* =====================================
   Left Column – Experience Details
===================================== */

.experience-details .extitle {
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ebebeb;
  font-family:'Times New Roman', Times, serif;
  margin-top: 25px;
}

.experience-details .excompany {
  color: #a5c3cc;
  font-style: italic;
  margin: 8px 8px 8px 0;
  font-size: 1.3em;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.experience-details .excompany img{
  width: 30px !important;
  height: 30px !important;
  border-radius: 50px;
  box-shadow: 0 0 15px 1px rgb(75 75 75);
  margin-right: 20px;
}

.experience-details .exduration {
  color: #aaa;
  font-size: 1em;
  margin-bottom: 15px;
  right: 10%;
}

.experience-details .dur-diff {
  color: #8ac78a;
  font-size: 1em;
  margin-left: 50px;
}

.projects-list {
  list-style: decimal;
  padding-left: 25px;
}

.projects-list li {
  margin-bottom: 10px;
  line-height: 1.4;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 1em;
  font-style: italic;
}


/* =====================================
   Middle Column – Education & Certificates
===================================== */

/* Education Section */
.education-section .education-item {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #555;
}

.education-section .education-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.education-section .degree {
  margin-bottom: 5px;
  color: #f3f3f3;
  font-family: "Rubik", serif;
  font-size: 1.3rem;
}

.education-section .school {
  color: #bbb;
  font-size: 1em;
  font-family:sans-serif;
}

/* Certificates & Certification Section */
.certificates-section .certificate-item {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #555;
}

.certificates-section .certificate-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.certificates-section .certificate-item p {
  margin: 0;
  margin-bottom: 5px;
  color: #e6e6ff;
  font-size: 1.2em;
  font-family: "Rubik", serif;
}

.certificates-section .certificate-item .provider {
  color: #bbb;
  font-size: 1em;
  font-family:sans-serif;
}

/* =====================================
   Right Column – Scrolling Certificates
===================================== */
.certi-section {
  width: 100%;
  height: 850px; /* Adjust as needed */
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.certi-section h3 {
  margin: 1px;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #333;
  padding: 5px;
  border-radius: 50px;
  align-self: center;
  font-size: 1.5rem;
}

.certi-scroll-container {
  overflow-y: scroll;
  flex: 1;
  padding-top: 20px;
  position: relative;
  scroll-behavior: smooth;
}

/* Custom Scrollbar Styles */
.certi-scroll-container::-webkit-scrollbar {
  width: 5px;
  height: 4px;
  background-color: rgba(32, 32, 32, 0.322);
}

.certi-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(226, 226, 226, 0.486);
  border-radius: 50px;
}

.certi-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(226, 226, 226, 0.815);
  border-radius: 50px;
}

.experience-section::-webkit-scrollbar {
  width: 5px;
  height: 4px;
  background-color: rgba(32, 32, 32, 0.322);
}

.experience-section::-webkit-scrollbar-thumb {
  background-color: rgba(226, 226, 226, 0.486);
  border-radius: 50px;
}

.experience-section::-webkit-scrollbar-thumb:hover{
  background-color: rgba(226, 226, 226, 0.815);
  border-radius: 50px;
}

.cer-section {
  margin: 10px;
  background-color: #121212;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 6px 0px rgb(47 47 47);
}

.cer-section img {
  height: 150px;
  width: 100%;
  object-fit: cover;
  display: block;
}

.cer-section p {
  margin: 0;
  padding: 5px;
  text-align: center;
  color: #b1d4ff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}


  

/* PROJECTS SECTION */

.about-containers {
  gap: 2rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
  display: flex;
}

#projects {
  position: relative;
  background: url('/assets/img/Gemini.jpg');
  margin: 0px;
  padding: 5px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.color-container {
  border-color: rgb(163, 163, 163);
  background: rgb(250, 250, 250);
}

#projects .about-containers{
  margin: 5rem 1rem;
  background-color: #8f8e8e5c;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 20px 3px rgb(0 0 0);
}

.article-container-2{
  display: flex;
  text-align: initial;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 2.5rem;
  justify-content: space-around;
}
.protitle{
  color: #ffffff;
  margin: 0;
  font-size: 3rem;
  text-align: center;
  font-family: Georgia, serif;
}

.project-img {
  border-radius: 2rem;
  width: 90%;
  height: 90%;
}

.project-title {
  margin: 1rem;
  color: black;
}

.project-btn {
  color: black;
  border-color: rgb(163, 163, 163);
}

.details-container {
  padding: 2rem;
  flex: 1;
  background: #b3b3b3b8;
  border-radius: 2rem;
  border-color: rgb(83, 67, 67);
  border-width: 0.25rem;
  text-align: center;
  box-shadow: 0 0 17px 2px rgb(0 0 0);
  transition: transform 0.3s ease-in-out;
  overflow: hidden;
  animation: bouncep 5s ease-in-out infinite;
}
@keyframes bouncep {
  0%, 100% {
    transform: translateY(0); /* Start and end at original position and scale */
  }
  25% {
    transform: translateY(-1px); /* Move up slightly  */
  }
  75% {
    transform: translateY(1px); /* Move down slightly  */
  }
}
.details-container:nth-child(1) { animation-delay: -1s; }
.details-container:nth-child(2) { animation-delay: -2s; }
.details-container:nth-child(3) { animation-delay: -3s; }

/*
.details-container:hover{
  transform: translateX(1px) translateY(-1px);
  
}
*/
.project-details-container .btn-color-2{
  overflow: hidden;
}

.project-details-container .btn-color-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgb(24, 24, 24);
  transition: width 0.25s ease-in-out;
  z-index: -2;
  border-radius: 2rem; /* Specific border-radius set */
}

.project-details-container .btn-color-2:hover::before {
  width: 100%;
}


/*Publications*/

#Publications{
  position: relative;
  /*
  background-color: #010527;
  box-shadow: 0 0 17px 3px rgb(0 0 0 / 93%);*/

  background: url('/assets/img/Gemini.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 2rem;
}
.publititle{
  color: #ffffff;
  margin: 0;
  font-size: 3rem;
  text-align: center;
  font-family: Georgia, serif;
}

.contact-info-upper-container-pub{
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 1rem 5rem;
  background-color: #b9b9b991;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 20px 3px rgb(0 0 0);
}


.publication-filter{
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  border: 1.5px solid #81007b;
  border-radius: 100px;
  flex-wrap: wrap ;
  margin: 20px;
  box-shadow: 0 0 15px 2px rgb(0 0 0);
  background: azure;
}

.publication-filter li{
  margin: 10px;
  padding: 5px 20px;
  color: #000000;
  
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  border-radius: 100px;
  box-shadow: 0 0 6px 2px rgb(0 0 0);
  transition: background-color 0.3s ease-in-out;
}


.publication-filter-active{
  background-color: #00ffd5;
  border-radius: 100px;
  color: #272727;
}

.publication-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  box-shadow: 0 0 15px 1px rgb(0 0 0);
  border-radius: 20px;
  background-color: #b0b5c3c2;
  

}
.publication-box{
  width:330px;
  height: 380px;
  
  /*border: 1px solid #000000; */
  border-radius: 15px;
  margin: 20px;
  box-shadow: 0 0 10px 2px rgb(39 39 39);
  overflow: hidden;
  background-color: #6d989259;
  display: block;
  position: relative; /* For badge positioning */
  
}

.publication-box img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  
}

.pub-title{
  text-align: center;
  font-size: 1.2rem;
  font-weight: 300;
  
  background-color: rgba(0, 0, 0, 0.836); /* Dark overlay for title */
  color: #fff;
  
  border-radius: 15px;
  bottom: 30%;
  left: 0;
  position:relative;
  z-index: 1;
  margin: 8px;
  font-family: 'Courier New', Courier, monospace;
}



.publication-container a{
  transition: all 500ms ease;
}

.publication-container a {
  color: rgb(201, 170, 170);
  text-decoration: none;
  text-decoration-color: white;
  
}

.publication-container a:hover {
  color: grey;
  
  text-decoration-color: rgb(181, 181, 181);
  transform: scale(1);
}


.badge {
  position: absolute;
  background-color: rgb(231, 197, 0);
  color: rgb(0, 0, 0);
  padding: 4px 8px;
  text-align: center;
  border-radius: 5px;
  font-weight: bold;
  top: 10px;
  left: 10px;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
}
.publication-box:hover .badge {
  opacity: 1; /* Show title on hover */
}
/* CONTACT */

#contact {
  position: relative;
  background-image: url("/assets/img/footerbackground.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 2rem;
}

.contitle{
  color: #ffffff;
  margin: 0;
  font-size: 3rem;
  text-align: center;
  font-family: Georgia, serif;
}
.contact2{
  height: 60vh;
  display: flex;
  gap: 150px;
  align-items: center;
  justify-content: space-evenly;
  background-color: #77777747;
  padding: 10px;
  box-shadow: 0px 0px 20px 5px rgb(0 0 0);
  border-radius: 20px;
}

.contact-left{
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 15px;
  color: #ffffff;
  background: #ffffff8a;
  border-radius: 20px;
  width: fit-content;
  box-shadow: 0px 0px 15px 2px rgb(14 14 14);
}

.contact-left-title{
  margin: 1rem;
  color: #000;
}
.contact-left-title hr{
  border: none;
  flex-direction: column;
  width: 120px;
  height: 5px;
  background-color: #002270;
  padding-left: 25px;
  font-weight: 500;
  color: #000000;
  border-radius: 50px;
  
}

.contact-input{
  border: none;
  width: 400px;
  height: 50px;
  outline: none;
  background-color: rgb(39 39 39);
  border-radius: 15px;
  margin-bottom: 20px;
  font-size: 1rem;
  margin: 1rem;
  color: #ffffff;
  padding-left: 20px;
}

.contact-left textarea{
  width: 380px;
  height: 110px;
  padding-top: 15px;
  border-radius: 20px;
  font-size: 1rem;
  
}

.contact-input:focus{
  border: 0.5px solid #f0f0f0d0;
  box-shadow: 0px 0px 10px 1px rgb(0, 0, 0);
}

.contact-input::placeholder{
  color: #d6d6d6;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding-left: 10px;
}

.contact-left button{
  display: flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 16px;
  color: #ffffff;
  gap: 10px;
  border: none;
  border-radius: 50px;
  background: #0659af;
  cursor: pointer;
  margin: 1rem;
  box-shadow: 0px 0px 5px 2px rgb(0 0 0 / 42%);
  transition:  box-shadow 0.8s ease-in-out, background 0.8s ease-in-out;
  transition: transform 0.5s ease-in-out;
}

.contact-left button:hover{
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 15px 2px rgb(0 0 0 / 42%);
  transition: transform 0.5s ease-in-out, background 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
}

.contact-left button img{
  height: 35px;
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

.contact-left button:hover img{
  transform: translateX(60px);
  transition: transform 0.5s ease-in-out;
  opacity: 1;
}
.contact-left button:hover h5{
  color: transparent;
  transition: all 0.5s ease-in-out;
  transform: translateX(-60px);
}
.contact-left button h5{
  
  transition: all 0.5s ease-in-out;
}

.contact-right{
  background: #d1d1d1ab;
  border-radius: 20px;
  align-items: center;
  justify-content:center;
  width: fit-content;
  margin: 1rem;
  box-shadow: 0px 0px 15px 2px rgb(14 14 14);
}

.contact-right table{
  margin: 1rem;
  width: 100%;
  font-size: 1.3rem;
}
.contact-right table tr td{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

tr td:first-child{
  padding-right: 25px;
}

.con-lin{
  
  text-align: center;
}

/* FOOTER SECTION */

footer {
  height: 15vh;
  
  background-color: #101010;

}

footer p {
  text-align: center;
  color: #c3c3d4;
}

.nav-links-footer {
  gap: 1.5rem;
  list-style: none;
  font-size: 1rem;
  display: flex;
}

.nav-links-footer a{
  color: #ffffff;
}

.footer-nav{
  height: 75px;
}

.scrollTop{
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 10px 15px;
  background-color: #000000;
  color: #fff;
  border-radius: 50px;
  border: 1px solid #fff;
  cursor: pointer;
  transition: all 0.5s ease 0s;
}

.scrollTop:hover{
  background-color: #f7f7f7;
  color: #000;
}