@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
/* General Styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  
  /* Shared Background Container */
  .main-container {
    background: linear-gradient(70deg, #7BD3EA, #08e178b3, #6256CA, #00879E, #D7C3F1,#009FBD,#E88D67);
    background-size: 400% 400%;
    animation: gradientBackground 10s ease infinite;
    color: #fff;
  }

  
  
  /* Header */
  /* Header Styling */
header {
  padding: 10px 20px;
  display: flex;
  justify-content: center;

}

.header-container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  justify-content: space-between;
}

/* Logo */
.logo h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
  color: black;
}

/* Center Navigation */
.center-nav {
  display: flex;
  gap: 20px;
  justify-content: center;
}

nav a {
  text-decoration: none;
  color: #fff;
  font-size: 1.2em;
  padding: 5px 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

nav a:hover {
  background-color: #444;
  border-radius: 10px;
}

/* Right Side Navigation */
.right-nav {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Projects Button */
.right-nav a {
  font-weight: bold;
  border: 2px solid #000000;
  border-radius: 5px;
  padding: 2px 2px;
  color: #000000;
  text-decoration: none;
}

.right-nav a:hover {
  background-color: black;
  border: 2px solid white;
  color: #fff;
}

/* ====== New Styles for Icons ====== */

/* Styling for all icons */
.icon {
  font-size: 1.2rem;
  text-decoration: none;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}

/* LinkedIn Icon */
.linkedin {
  color: #ea7777; /* LinkedIn Blue */
}

.linkedin:hover {
  color: #005582;
}

/* GitHub Icon */
.github {
  color: black;
}

.github:hover {
  color: gray;
}

/* Theme Toggle Button */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: black;
  border: 2px solid #000000;
  border-radius: 5px;
}

#theme-toggle:hover {
  color: white;
  background-color:black;
  
}



/* Intro Section */
.intro-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 100px); /* Reduced height */
  padding: 20px; /* Reduced padding */
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Left Side (Image) */
.intro-left img {
  max-width: 380px; /* Slightly reduced width */
  max-height: 330px; /* Adjusted height */
  border-radius: 10%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Right Side (Text) */
.intro-right {
  margin-left: 40px; /* Reduced margin for better spacing */
  text-align: left;
}

.intro-right h2 {
  font-size: 1.5em;
  margin: 0;
}

.intro-right h1 {
  font-size: 3em;
  margin: 5px 0; /* Reduced margin */
  font-weight: bold;
}

.intro-right p {
  font-size: 1em;
  margin: 5px 0 15px; /* Adjusted margin for better spacing */
}

/* Buttons */
.buttons {
  display: flex;
  gap: 10px;
}

.btn {
  text-decoration: none;
  padding: 8px 18px; /* Reduced padding */
  border: 2px solid #fff;
  border-radius: 5px;
  color: black;
  font-weight: bold;
  transition: background-color 0.3s ease;
  background-color: #faef9bab;
}

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

.btn.secondary {
  background-color: #fff;
  color: #000000;
}

.btn.secondary:hover {
  background-color: #000000;
  color: #fff;
}


  @keyframes gradientBackground {
    0% {
      background-position: 0% 50%;
    }
    33% {
      background-position: 50% 50%;
    }
    66% {
      background-position: 100% 50%; 
    }
    100% {
      background-position: 0% 50%;
    }
  }
  

  
  
  

  .education {
    padding: 10px 10px;
    margin: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
  
  }

  .edu-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: bold;
    color:black; /* Adjust for dark theme */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0px;
}

  
  /* Flexbox for Layout */
  .education-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  
  /* Left Side: Image Styling */
/* Education Section Left Side */
.education-image {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 260px;
}

/* Typewriter Container with Black Background */
.typewriter-container {
  width: 100%;
  height: 100%;
  background-color:#F6D6D6;  /* Plain black background */
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Typewriter Effect */
#typewriter {
  font-size: 1.2rem;
  font-family: monospace;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid white;
  padding: 10px;
  z-index: 2;
  animation: blink 0.7s infinite;
}

/* Blinking Cursor */
@keyframes blink {
  50% { border-color: transparent; }
}

  
  /* Right Side: Cards */
  .card-container {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    height: 260px; /* Fixed height for stability */
    overflow: hidden;
    border-radius: 30px;
  }
  
  /* Common Card Styling */
  .card {
    background-color: #ba80e1;
    color: white;
    padding: 20px;
    border-radius: 10px; /* Ensure border-radius applies */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: absolute;
    width: 100%;
    height:80px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    z-index: 1;
  }
  
  
  /* Degree Title */
  .degree {
    font-size: 1.2em;
    font-weight: bold;
  }
  
  /* Hidden Details (Initially Hidden) */
  .hidden-details {
    opacity: 0;
    transform: translateY(10px);
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
  }
  
  /* Ensure both cards are initially stacked correctly */
  .schooling-card {
    top: 0;
  }
  
  .college-card {
    top: 140px;
  }
  
  /* Hover Effect: Expand and Hide the Other */
  .card:hover {
    height: 100%;
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.7);
    background-color:#3D8D7A;
    z-index: 10;
    top: 0;
  }
   
  
  .card:hover .hidden-details {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
  }
  
  /* Hide the other card when hovering */
  .card-container:hover .card:not(:hover) {
    opacity: 0;
    visibility: hidden;
  }
  




/* Default Styles (unchanged for desktop screens) */
#certifications {
  text-align: center;
  padding: 10px 20px;
  background: #7A73D1;
  height: 480px;
}

.cer-title {
  font-size: 2rem;
  margin-bottom: 20px;
  color: black;
}

.certifications-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 80%;
}

.cert-list {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cert-item {
  padding: 10px;
  background:#72BAA9;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  margin-left: 10px;
}

.cert-item h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #000;
}

.cert-item p {
  margin: 5px 0 0;
  font-size: 1rem;
  color: white;
}

.cert-item.active {
  background: #E9C46A;
  color: white;
  font-weight: bold;
}

.cert-item:hover {
  background: #86A788;
  color: white;
  transform: scale(1.05);
}

.cert-image {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cert-image img {
  width: 90%;
  height: 350px;
  border-radius: 8px;
  object-fit: fill;
  transition: opacity 0.3s ease-in-out;
}















  


  .skills-container {
    max-width: 100%;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: black; /* Deep space background */
    padding: 20px;
    position: relative;
    overflow: hidden;
  }
  
  /* Galaxy-like Stars */
  @keyframes twinkling-stars {
    0% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; }
    100% { opacity: 0.3; transform: translateY(-5px); }
  }
  
  .star {
    position: absolute;
    background: white;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: twinkling-stars 2s infinite alternate ease-in-out;
  }
  
  /* Shooting Stars */
  @keyframes shooting-star {
    0% { transform: translateX(0) translateY(0) scale(1); opacity: 1; }
    100% { transform: translateX(-500px) translateY(500px) scale(0.5); opacity: 0; }
  }
  
  .shooting-star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    box-shadow: 0px 0px 8px white;
    transform: rotate(-45deg);
    animation: shooting-star 3s linear infinite;
  }
  
  /* Generating Multiple Stars */
  .skills-container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1%, transparent 20%);
    background-size: 300px 300px;
    background-position: center;
    opacity: 0.3;
  }
  


.section-title {
  text-align: center;
  font-size: 24px;
  color: white;
  text-transform: uppercase;
  margin-bottom: 15px;
  margin-top: 0px;
}
#skillt{
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* Minecraft-like font */
color: white;
}

.skills-wrapper {
  display: flex;
  width: 100%;
  height: 70%; /* Top section takes most of the height */
  gap: 0px; /* Space between the two containers */
}

.skill-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border-radius: 10px;
}

/* Technical Skills */
.technical-skills {
  width: 38%;
  height: 80%;
  padding: 30px;
  padding-top: 10px;
  margin: 10px auto;
  background: black;
  border: 1px solid white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Light Beam Animation */
@keyframes lightBeam {
  0% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; transform: translateX(100%); }
  100% { opacity: 0; transform: translateX(200%); }
}

.technical-skills::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.4), transparent);
  animation: lightBeam 5s infinite linear;
}

/* Technical Skills Grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  height: 100%;
  justify-items: center;
  align-items: center;
}

/* Floating left-to-right effect */
@keyframes floatLeft {
  0% { transform: translate(-1px, -1px); }
  50% { transform: translate(1px, 1px); }
  100% { transform: translate(-1px, -1px); }
}

/* Floating right-to-left effect */
@keyframes floatRight {
  0% { transform: translate(1px, 1px); }
  50% { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

/* Apply animation to skill items */
.skill-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px;
  width: 80px;
  height: 80px;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  border-radius: 8px;
   transition: transform 0.3s ease-in-out;
}

/* Odd items: Float left to right */
.skill-card:nth-child(odd) {
  animation-name: floatLeft;
}

/* Even items: Float right to left */
.skill-card:nth-child(even) {
  animation-name: floatRight;
}

/* Neon Glow Effect */
.skill-card:hover {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  transform: scale(1.1);
}

.skill-icon {
  width: 45px;
  height: 45px;
}

.skill-card p {
  font-size: 12px;
  margin-top: 10px;
  color: white;
}


/* Tooltip Styling */
/* Tooltip Styling */
.skill-card {
  position: relative;
  cursor: pointer;
}

.skill-card::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%; /* Moved a bit higher */
  left: 55%;
  transform: translateX(-50%);
  background:white;
  color: black;
  padding: 1px 1px;  /* Reduced padding */
  border-radius: 4px;
  font-size: 9px;  /* Smaller text */
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  z-index: 999;  /* Higher priority */
  pointer-events: none; /* Prevents blocking hover */
}

.skill-card:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-3px); /* Subtle movement */
}







/* Soft Skills */
.soft-skills {
  width: 38%;
  height: 80%;
  padding: 30px;
  padding-top: 10px;
  margin: 10px auto;
  background-color:#A6F1E0;
  border: 1px solid white;
  border-radius: 30px; /* Rounded corners for the container */
  text-align: center;
  z-index: 1.5; 
}

.soft-skills h2 {
  color: black;
  text-transform: uppercase;
  margin-bottom: 40px; /* Adjusted to match Technical Skills */
  margin-top: 0px;
 
}

.soft-skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px 30px; /* Increased vertical spacing for better readability */
  justify-items: center;
}

.soft-skill-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 1px solid white;
  border-radius: 10px; /* Rounded corners for skill items */
  padding: 12px 15px; /* Increased padding for a better appearance */
  color: white;
  font-size: 14px;
  width: 95%; /* Ensures items fit properly */
  background-color: black;
  white-space: nowrap;
  z-index: 0; 
}
.soft-skill-item:hover{
background-color: #068DA9;
}

.soft-skill-item i {
  font-size: 18px;
}






/* Tools & Frameworks */
.tools-frameworks {
  width: 97%;
  background-color:#1B9C85;
  padding: 15px 5px;
  padding-top: 5px;
  margin: 10px auto;
  border: 1px solid whitesmoke;
  text-align: center;
  margin-top: 0px;
}

.tools-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  position: relative;
}

.tool-item {
  background: black;
  color: white;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  min-width: 100px;
}
.tool-item:hover{
  background-color:#C4E4FF;
  color: black;
}

/* First row: 7 items */
.tool-item:nth-child(-n+7) {
  margin-top: 0; /* Align top row items */
}

/* Second row: 6 items, slightly shifted */
.tool-item:nth-child(n+8) {
  margin-top: 0px; /* Push second row down */
  transform: translateX(30px); /* Shift right to create zigzag */
}

#t-title{
  margin-bottom: 10px;
}

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

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

/* Initially hide items */
.tool-item {
  opacity: 0;
}

/* First row slides in from left */
.tool-item:nth-child(-n+7) {
  animation: slideInLeft 0.6s ease-out forwards;
}

/* Second row slides in from right */
.tool-item:nth-child(n+8) {
  animation: slideInRight 0.6s ease-out forwards;
}

/* Stagger effect for smooth entrance */
.tool-item:nth-child(1) { animation-delay: 0.1s; }
.tool-item:nth-child(2) { animation-delay: 0.2s; }
.tool-item:nth-child(3) { animation-delay: 0.3s; }
.tool-item:nth-child(4) { animation-delay: 0.4s; }
.tool-item:nth-child(5) { animation-delay: 0.5s; }
.tool-item:nth-child(6) { animation-delay: 0.6s; }
.tool-item:nth-child(7) { animation-delay: 0.7s; }
.tool-item:nth-child(8) { animation-delay: 0.8s; }
.tool-item:nth-child(9) { animation-delay: 0.9s; }
.tool-item:nth-child(10) { animation-delay: 1s; }
.tool-item:nth-child(11) { animation-delay: 1.1s; }
.tool-item:nth-child(12) { animation-delay: 1.2s; }
.tool-item:nth-child(13) { animation-delay: 1.3s; }



/* Heading Styles */
.skills-title {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  margin-bottom: 20px;
  margin-top: 0px;
}

/* Entry Animation for Skills Section */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skills-container {
  animation: fadeInUp 1s ease-out;
}

/* Entry Animation for Individual Skill Boxes */
.technical-skills, .soft-skills, .tools-frameworks {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
}

/* Delays for staggered appearance */
.technical-skills { animation-delay: 0.1s; }
.soft-skills { animation-delay: 0.1s; }
.tools-frameworks { animation-delay: 0.2s; }


/* Drop-In Animation for Soft Skill Items */
@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.soft-skill-item {
  opacity: 0;
  transform: translateY(-50px);
  animation: dropIn 0.4s ease-out forwards;
}

/* Staggered Animation Delay for Soft Skill Items */
.soft-skill-item:nth-child(1) { animation-delay: 0.1s; }
.soft-skill-item:nth-child(2) { animation-delay: 0.2s; }
.soft-skill-item:nth-child(3) { animation-delay: 0.3s; }
.soft-skill-item:nth-child(4) { animation-delay: 0.4s; }
.soft-skill-item:nth-child(5) { animation-delay: 0.5s; }
.soft-skill-item:nth-child(6) { animation-delay: 0.6s; }
.soft-skill-item:nth-child(7) { animation-delay: 0.7s; }
.soft-skill-item:nth-child(8) { animation-delay: 0.8s; }
















/* Internship Section */
#internships {
  background: linear-gradient(150deg, #15F5BA, #7F27FF);
  color: white;
  text-align: center;
  padding: 10px 10px;
  height: 450px;
}

/* Internship Section Title */
.section-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
#int-title{
  color: black;
}

/* Internship Container */
.internship-container {
  display: flex;
  justify-content: center;
  gap: 50px;
  align-items: center;
}

/* Wrapper for title and card */
.internship-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Internship Card Titles */
.internship-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
}

/* Internship Cards */
.internship-card {
  width: 400px;
  height: 300px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  backdrop-filter: blur(10px);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out;
  padding: 15px;
  border: 2px solid white;
}


/* Internship Header (Location & Duration - Horizontal) */
.internship-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 13px;
  font-weight: bold;
  color: white;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

/* Internship Role Title (Centered Inside the Card) */
.internship-role {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: black;
  margin: 5px 0;
}

/* Internship Description */
.internship-description {
  font-size: 14px;
  text-align: center;
  color: white;
  padding-top: 10px;
}

/* Python Internship Description */
#descc {
  font-size: 14px;
  text-align: center;
  color: white;
  padding-top: 15px;
}

/* Internship Lists */
.internship-list {
  list-style: none;
  padding-left: 10px;
  font-size: 12.5px;
  text-align: left;
  color: white;
}

/* SEO Internship - Two Lists Placed Horizontally */
.internship-details {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0px 0px 0 0px;
}

/* Ensure Lists Take Equal Space */
.internship-details .internship-list {
  flex: 1;
}

/* Adjust Bullet Points for SEO Internship */
.internship-list li {
  position: relative;
  margin-bottom: 20px;
  padding-left: 15px;
}

.internship-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #000000;
  font-size: 16px;
}

/* Python Internship Card */
.python-intern {
  background: linear-gradient(135deg, #37B5B6, #98D8AA);
}

/* SEO Internship Card */
.seo-intern {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}

/* Hover Effect */
.internship-card:hover {
  transform: scale(1.02);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .internship-container {
    flex-direction: column;
    gap: 40px;
  }

  .internship-details {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .internship-list {
    padding-left: 0;
  }

  .internship-list li {
    text-align: center;
    padding-left: 0;
  }

  .internship-list li::before {
    display: none;
  }
}


/* Initial State - Positioned Off-Screen */
.python-intern {
  transform: translateX(-60px);
  transition: transform 0.8s ease-out;
}

.seo-intern {
  transform: translateX(60px);
  transition: transform 0.8s ease-out;
}

/* When the Section is in Viewport - Move to Normal Position */
.animated .python-intern {
  transform: translateX(0);
}

.animated .seo-intern {
  transform: translateX(0);
}



/* Mobile Devices (Below 768px) */
@media (max-width: 768px) {
  #internships {
    height: auto; /* Allow the section to expand dynamically */
    padding: 20px 10px; /* Adjust padding */
  }

  .internship-container {
    flex-direction: column;
    gap: 20px;
  }

  .internship-card {
    width: 90%; /* Reduce width for better fit */
    height: 250px; /* Decrease height to fit on the screen */
    font-size: 13px;
    padding: 10px;
  }

  .internship-title {
    font-size: 16px;
  }

  .internship-header {
    font-size: 11px;
  }

  .internship-role {
    font-size: 15px;
  }

  .internship-description {
    font-size: 12px;
  }

  .internship-list {
    font-size: 11.5px;
  }
}

/* Small Mobile (Below 480px) */
@media (max-width: 480px) {
  .internship-card {
    width: 95%; /* Adjust width for smaller screens */
    height: 350px; /* Reduce height to fit within viewport */
    font-size: 12px;
    padding: 8px;
  }

  .internship-title {
    font-size: 14px;
  }

  .internship-header {
    font-size: 10px;
  }

  .internship-role {
    font-size: 14px;
  }

  .internship-description {
    font-size: 11px;
  }
}




#projects {
  text-align: center;
  padding: 5px 0;
  background-color: #B7B1F2;
}

.section-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

#pro-title {
  color: black;
}

.projects-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  perspective: 1000px;
  background-color: #B7B1F2;
}

.project-card {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: black;
  padding: 15px;
  box-sizing: border-box;
  transition: transform 0.8s ease, z-index 0.8s ease;
}

/* Stacking Order */
.project-1 { z-index: 3; background-color: #ffadad; }
.project-3 { z-index: 2; background-color: #9bf6ff; }
.project-2 { z-index: 1; background-color: #caffbf; }

/* Stack Animation */
.projects-container.active .project-1 { transform: translateX(-330px) rotateY(360deg); z-index: 2; }
.projects-container.active .project-3 { transform: translateX(330px) rotateY(360deg); z-index: 2; transition-delay: 0.3s; }
.projects-container.active .project-2 { transform: translateY(0); z-index: 1; }

.project-3:hover {
  transition-delay: 0s !important; /* Removes delay only when hovering */
}

/* Title & Description */
.project-card h3 {
  font-size: 17px;
  margin-bottom: 5px;
}

.project-card .project-type {
  font-size: 12px;
  font-weight: normal;
  background: black;
  color: white;
  padding: 3px 8px;
  border-radius: 5px;
  margin-bottom: 5px;
}

.project-card hr {
  width: 80%;
  border: 1px solid black;
  margin-bottom: 5px;
}

.project-card p {
  font-size: 12px;
  margin: 3px 0;
}

/* Tech Stack Header */
.project-card h4 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}

/* Tech Icons */
.tech-icons {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
}

.tech-icons img {
  width: 30px;
  height: 30px;
}

/* View Project Button */
.view-project-btn {
  margin-top: auto;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  background-color: black;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.view-project-btn:hover {
  background-color: #ffffff;
  color: black;
}

/* Hover Effect */
.project-card:hover {
  transform: scale(1.3) translateZ(50px);
  box-shadow: 0px 0px 30px 10px rgba(235, 243, 240, 0.8);
  border: 2px solid rgba(255, 255, 255, 1);
  transition: transform 0.1s ease, box-shadow 0.3s ease, border 0.3s ease;
}

.tech-text {
  font-size: 10px;
  font-weight: bold;
  background-color: #f0f0f0;
  padding: 2px 2px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
}











/* Base Styles */
.contact-section {
  background-color: #1E3E62;
  padding: 30px;
  padding-top: 0px;
  text-align: center;
  position: relative;
}

/* Header Container */
.contact-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  padding: 10px 10px;
  flex-wrap: wrap;
}

.contact-header {
  font-size: 2rem;
  color: white;
  position: relative;
  display: inline-block;
  animation: glitch 0.5s infinite alternate;
  margin-top: 0px;
}

@keyframes glitch {
  0% { text-shadow: 1px 1px #C7DB9C; }
  100% { text-shadow: -1px -1px #EFB036; }
}

/* Back to Top Button */
#back-to-top {
  padding: 8px 12px;
  font-size: 14px;
  background-color: #61C0BF;
  color: #111;
  border: none;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  border-radius: 5px;
  border: 2px solid black;
}

#back-to-top:hover {
  background-color: #ffdb4d;
}

/* Contact Container */
.contact-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1300px;
  margin: auto;
  padding: 20px;
  border: 1px solid #69247C;
  border-radius: 12px;
  background: linear-gradient(175deg, #B771E5, #66D2CE);
}

/* Contact Button */
#contact-button {
  padding: 15px 20px;
  font-size: 18px;
  background-color: #E68369;
  color: black;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  width: 200px;
  border: 1px solid #7ED4AD;
}

#contact-button:hover {
  background-color: #72BAA9;
}

/* Contact Items */
.contact-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  position: relative;
}

.contact-item {
  width: 140px;
  height: 110px;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.5);
  background: linear-gradient(-150deg, #C1CFA1, #ADB2D4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  text-decoration: none;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.contact-item img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.contact-item p {
  color: black;
  font-size: 10px;
  font-weight: bold;
}

/* Light Gradient Effect */
.light-effect {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.2s ease-out;
  pointer-events: none;
  z-index: 2;
}

.light-effect.active {
  opacity: 1;
  transform: translateX(100%);
}

/* Contact Section Animations */
.contact-section {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, filter 0.8s ease-out, transform 0.8s ease-out;
}

.contact-section.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Contact Info Position */
#contact-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 24px;
  color: black;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: center;
  transition: opacity 0.5s ease-out;
  pointer-events: none;
}

.hidden-info {
  opacity: 0;
}



























  /* Dark Mode Styles */
body.dark-mode {
  background-color: #000; /* Black background */
  color: #fff; /* White text */
}

/* Gradient Background */
body.dark-mode .main-container {
  background:black;
  background-size: 400% 400%;
  animation: gradientBackground 10s ease infinite;
}

/* Header */
body.dark-mode header {
  background-color: #111;
}

/* Logo */
body.dark-mode .logo h1 {
  color: white;
}

/* Navigation Links */
body.dark-mode nav a {
  color: #ddd;
}

body.dark-mode nav a:hover {
  background-color: #555;
  color: #fff;
}

/* Right Navigation (Projects Button) */
body.dark-mode .right-nav a {
  border-color: #fff;
  color: #fff;
}

body.dark-mode .right-nav a:hover {
  background-color: white;
  color: black;
}

/* Icons */
body.dark-mode .icon {
  color: #fff;
}

body.dark-mode .linkedin {
  color: #b50000;
}

body.dark-mode .github {
  color: #ddd;
}

body.dark-mode .github:hover {
  color: #aaa;
}

/* Theme Toggle Button */
body.dark-mode #theme-toggle {
  color: white;
  border: 2px solid #ffffff;
  border-radius: 5px;
}

body.dark-mode #theme-toggle:hover {
  color: #000000;
  background-color: #ffffff;
}

/* Intro Section */
body.dark-mode .intro-section {
  background-color: #111;
}

/* Intro Section Text */
body.dark-mode .intro-right h2,
body.dark-mode .intro-right h1,
body.dark-mode .intro-right p {
  color: #fff;
}

/* Buttons */
body.dark-mode .btn {
  border-color: #fff;
  background-color: black;
  color: white;
}

body.dark-mode .btn:hover {
  background-color: white;
  color: black;
}

/* Cards */
body.dark-mode .card {
  background-color: #222;
  color: white;
}

body.dark-mode .card:hover {
  background-color: #222;
}




body.dark-mode .education{
  background-color: black;
}  

body.dark-mode .edu-title{
  color: white;

}

body.dark-mode .typewriter-container {
background-color: black;
color: white;
border: 1px solid white;
}

body.dark-mode  #typewriter {
  color: white;
}
body.dark-mode .card{
  background-color: #333;
  border: none;
}




/* Certifications Section */
body.dark-mode #certifications {
  background: black;
}
body.dark-mode .cer-title {
  color: white;
}

body.dark-mode .cert-item h3 {
  color: white;
}
body.dark-mode .cert-item p {
  color: white;
}


body.dark-mode .cert-item {
  background: #111;
  color: white;
  border: 1px solid white ;
}

body.dark-mode .cert-item:hover {
  background: #333;
}
body.dark-mode  .cert-item.active {
  background: #666;
  color: white;
  font-weight: bold;
}

/* Dimming Background */
body.dark-mode.dimmed::before {
  background-color: rgba(0, 0, 0, 0.9);
}



/* Dark Mode - Skills Section */
.dark-mode .skills-container {
  background: black; /* Keep deep space background */
}

.dark-mode .section-title,
.dark-mode #skillt,
.dark-mode .skill-card p {
  color: white;
}

.dark-mode .technical-skills {
  background: black;
  border: 1px solid white;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.dark-mode .soft-skills {
  background-color: #222; /* Darker background */
  border: 1px solid white;
}

.dark-mode .soft-skills h2 {
  color: white;
}

.dark-mode .soft-skill-item {
  background-color: black;
  color: white;
}

.dark-mode .soft-skill-item:hover {
  background-color: white;
  color:black;
}

.dark-mode .tools-frameworks {
  background-color: #111; /* Dark background */
  border: 1px solid white;
}

.dark-mode .tool-item {
  background: black;
  color: white;
}

.dark-mode .tool-item:hover {
  background-color: white;
  color: black;
}

.dark-mode .skill-card {
  color: white;
  background: black;
  border: 1px solid white;
}

.dark-mode .skill-card:hover {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.dark-mode .skill-card::before {
  background: white;
  color: black;
}




/* Dark Mode for Internship Section */
.dark-mode #internships {
  background: linear-gradient(150deg, #0D0D0D, #232526);
  color: #E0E0E0;
}

/* Dark Mode Internship Cards */
.dark-mode .internship-card {
  background: rgba(50, 50, 50, 0.4);
  border: 2px solid #8E8E8E;
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1);
}

/* Dark Mode Internship Titles */
.dark-mode #int-title {
  color: #E0E0E0;
}

/* Dark Mode Internship Role */
.dark-mode .internship-role {
  color: #D1D1D1;
}

/* Dark Mode Internship Description */
.dark-mode .internship-description,
.dark-mode #descc,
.dark-mode .internship-list {
  color: #C0C0C0;
}

/* Dark Mode Bullet Points */
.dark-mode .internship-list li::before {
  color: #BBBBBB;
}

/* Dark Mode Internship Headers */
.dark-mode .internship-header {
  color: #D0D0D0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dark Mode Python Internship Card */
.dark-mode .python-intern {
  background-color: black;
}

/* Dark Mode SEO Internship Card */
.dark-mode .seo-intern {
  background-color: black;
}

/* Hover Effect in Dark Mode */
.dark-mode .internship-card:hover {
  transform: scale(1.03);
  box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.2);
}




/* Dark Mode Styles for Projects Section */
body.dark-mode #projects {
  background-color: black; /* Dark background */
}

body.dark-mode #pro-title {
  color: #fff; /* White text */
}

body.dark-mode .projects-container {
  background-color: black; /* Dark background */
}

/* Dark Theme for Project Cards */
body.dark-mode .project-card {
  border: 1px solid white;
  color: white;
}

/* Background colors for each project card */
body.dark-mode .project-1 { background-color: #111; color: white; } /* Dark theme */
body.dark-mode .project-3 { background-color: #111; color: white; } /* Dark theme */
body.dark-mode .project-2 { background-color: #111; color: white; } /* Dark theme */


/* Title & Description */
body.dark-mode .project-card h3 {
  color: white;
}

body.dark-mode .project-card .project-type {
  background: white;
  color: black;
}

body.dark-mode .project-card hr {
  border: 1px solid white;
}

/* View Project Button */
body.dark-mode .view-project-btn {
  background-color: white;
  color: black;
}

body.dark-mode .view-project-btn:hover {
  background-color: black;
  color: white;
}

/* Hover Effect */
body.dark-mode .project-card:hover {
  box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 1);
}

/* Tech Text Background */
body.dark-mode .tech-text {
  background-color: #222;
  color: white;
}




/* Dark Mode Styles for Contact Section */
body.dark-mode .contact-section {
  background-color: black; 
}

/* Glitch Effect for Header */
body.dark-mode .contact-header {
  color: white;
}

@keyframes glitch {
  0% { text-shadow: 1px 1px white; }
  100% { text-shadow: -1px -1px gray; }
}

/* Back to Top Button */
body.dark-mode #back-to-top {
  background-color: black;
  color: white;
  border: 2px solid white;
}

body.dark-mode #back-to-top:hover {
  background-color: white;
  color: black;
}

/* Contact Container */
body.dark-mode .contact-container {
  border: 1px solid white;
  background: black;
}

/* Contact Button */
body.dark-mode #contact-button {
  background-color: white;
  color: black;
  border: 1px solid white;
}

body.dark-mode #contact-button:hover {
  background-color: black;
  color: white;
}

/* Contact Items */
body.dark-mode .contact-item {
  background: black;
  border: 2px solid white;
}

body.dark-mode .contact-item p {
  color: white;
}




/* Light Effect */
body.dark-mode .light-effect {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

/* Info Message */
body.dark-mode #contact-info {
  color: white;
}




@media (max-width: 1024px) {
  .intro-section {
    flex-direction: column;
    text-align: center;
    min-height: calc(100vh - 40px); /* Reduced height */
    padding: 10px 0; /* Removed extra space */
  }

  .intro-left img {
    max-width: 300px;
    max-height: 250px;
  }

  .intro-right {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .right-nav {
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
  }

  .intro-section {
    flex-direction: column;
    min-height: calc(100vh - 30px); /* Further reduced space */
    padding: 5px 0; /* Minimized padding */
  }

  .intro-left img {
    max-width: 250px;
    max-height: 200px;
  }

  .intro-right h1 {
    font-size: 2em;
  }

  .intro-right p {
    font-size: 0.9em;
  }

  .buttons {
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .logo h1 {
    font-size: 1.5rem;
  }

  .right-nav a {
    font-size: 0.9em;
    padding: 2px 5px;
  }

  .intro-section {
    min-height: calc(60vh - 20px); /* Minimum possible space */
    padding: 0;
    padding-left: 10px;
    padding-right: 10px; /* Removed padding */
    margin-bottom: 0px;
  }

  .intro-left img {
    max-width: 200px;
    max-height: 180px;
  }

  .intro-right h1 {
    font-size: 1.8em;
  }

  .intro-right p {
    font-size: 0.8em;
  }

  .btn {
    padding: 8px 15px;
  }
}





/* Responsive for Tablets (768px - 1024px) */
@media (max-width: 1024px) {
  .education-container {
      flex-direction: column; /* Stack items vertically */
      align-items: center;
      gap: 30px;
  }

  .education-image {
      width: 90%; /* Increase image width */
      height: auto;
  }

  .typewriter-container {
      padding: 15px;
      height: auto;
  }

  #typewriter {
      font-size: 1.2rem;
      text-align: center;
  }

  .card-container {
      width: 90%;
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .card {
      position: static; /* Remove absolute positioning */
      height: auto;
      width: 100%;
  }

  .hidden-details {
      opacity: 1;
      transform: none;
      max-height: unset;
  }
}

/* Responsive for Mobile Devices (Below 768px) */
@media (max-width: 768px) {
  .edu-title {
      font-size: 1.8rem;
  }

  .education-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
  }

  .education-image {
      width: 100%;
      height: auto;
  }

  .typewriter-container {
      padding: 10px;
  }

  #typewriter {
      font-size: 1rem;
  }

  .card-container {
      width: 100%;
      height: auto;
      gap: 15px;
  }

  .card {
      width: 90%;
      padding: 15px;
      font-size: 0.9rem;
  }

  .hidden-details {
      opacity: 1;
      transform: none;
      max-height: unset;
  }
}

/* Extra Small Screens (Phones Below 480px) */
@media (max-width: 480px) {
  .edu-title {
      font-size: 1.5rem;
  }

  .education-container {
      gap: 15px;
  }

  .education-image {
      height: 180px;
  }

  .typewriter-container {
      padding: 5px;
  }

  #typewriter {
      font-size: 0.9rem;
  }

  .card {
      width: 95%;
      padding: 12px;
      font-size: 0.85rem;
  }
}




/* 📌 Large Tablets (Max Width: 1024px) */
@media (max-width: 1024px) {
  .certifications-container {
      flex-direction: column;
      height: auto;
      gap: 20px;
  }

  .cert-list {
      width: 80%;
      align-items: center;
  }

  .cert-item {
      width: 100%;
      margin-left: 0;
      text-align: center;
      font-size: 1rem;
  }

  .cert-image {
      width: 90%;
  }

  .cert-image img {
      height: auto;
      max-width: 100%;
  }
}

/* 📌 Tablets & Small Laptops (Max Width: 900px) */
@media (max-width: 900px) {
  .cert-list {
      width: 85%;
  }

  .cert-image {
      width: 85%;
  }

  .cert-image img {
      width: 100%;
      height: auto;
  }
}

/* 📌 Mobile Devices (Max Width: 768px) */
@media (max-width: 768px) {
  #certifications {
      padding: 20px;
      height: auto;
  }

  .cer-title {
      font-size: 1.5rem;
  }

  .certifications-container {
      flex-direction: column;
      gap: 15px;
  }

  .cert-list {
      width: 100%;
  }

  .cert-item {
      width: 95%;
      padding: 8px;
      font-size: 0.9rem;
  }

  .cert-item h3 {
      font-size: 1rem;
  }

  .cert-item p {
      font-size: 0.85rem;
  }

  .cert-image {
      width: 100%;
  }

  .cert-image img {
      height: auto;
      max-width: 100%;
  }
}

/* 📌 Small Phones (Max Width: 600px) */
@media (max-width: 600px) {
  .cer-title {
      font-size: 1.4rem;
  }

  .cert-list {
      width: 100%;
  }

  .cert-item {
      width: 100%;
      font-size: 0.85rem;
  }

  .cert-image img {
      height: auto;
      width: 100%;
  }
}

/* 📌 Extra Small Screens (Max Width: 480px) */
@media (max-width: 480px) {
  .cer-title {
      font-size: 1.3rem;
  }

  .cert-list {
      width: 100%;
  }

  .cert-item {
      width: 100%;
      font-size: 0.8rem;
  }

  .cert-image {
      width: 100%;
  }

  .cert-image img {
      width: 95%;
      height: auto;
  }
}

 

/* Responsive Design */
@media screen and (max-width: 1024px) {
  .skills-wrapper {
    flex-direction: column; /* Stack elements on smaller screens */
    align-items: center;
    height: auto; /* Adjust height */
  }

  .technical-skills,
  .soft-skills,
  .tools-frameworks {
    width: 90%; /* Make sections take more space */
    height: auto;
    padding: 20px;
  }

  .skills-grid {
    grid-template-columns: repeat(2, 1fr); /* Adjust grid to 2 columns */
    gap: 15px;
  }
}

@media screen and (max-width: 768px) {
  .skills-container {
    height: auto; /* Allow dynamic height */
    padding: 10px;
  }

  .section-title {
    font-size: 20px; /* Reduce font size */
  }

  .skills-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
    gap: 10px;
  }

  .skill-card {
    width: 70px;
    height: 70px;
  }

  .skill-icon {
    width: 40px;
    height: 40px;
  }

  .soft-skills-grid {
    grid-template-columns: repeat(2, 1fr); /* Adjust for better fit */
  }

  .tools-grid {
    grid-template-columns: repeat(2, 1fr); /* Reduce columns */
  }
}

/* General Mobile Adjustments */
@media screen and (max-width: 768px) {
  .skills-wrapper {
    flex-direction: column; /* Stack sections vertically */
    align-items: center;
    height: auto; /* Allow dynamic height */
    gap: 20px; /* More spacing */
  }

  .technical-skills, 
  .soft-skills, 
  .tools-frameworks {
    width: 95%; /* Full width with some padding */
    height: auto;
    padding: 15px;
  }

  .skills-grid, 
  .tools-grid {
    grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns */
    gap: 15px;
    justify-content: center;
  }

  .soft-skills-grid {
    grid-template-columns: repeat(1, 1fr); /* Stack soft skills */
    gap: 10px;
  }

  .skill-card {
    width: 80px; /* Increase size slightly for better visibility */
    height: 80px;
  }

  .skill-icon {
    width: 50px;
    height: 50px;
  }

  .section-title {
    font-size: 22px; /* Ensure the text size is readable */
    text-align: center;
  }
}

/* For Smaller Screens (Phones) */
@media screen and (max-width: 480px) {
  .skills-container {
    padding: 10px;
  }

  .skills-grid,
  .tools-grid {
    grid-template-columns: repeat(1, 1fr); /* Single column for narrow screens */
    gap: 10px;
  }

  .skill-card {
    width: 70px;
    height: 70px;
  }

  .skill-icon {
    width: 40px;
    height: 40px;
  }

  .soft-skills-grid {
    grid-template-columns: repeat(1, 1fr); /* Soft skills stacked */
    width: 100%; /* Ensure it doesn’t overflow */
  }

  .soft-skills {
    padding-bottom: 20px; /* Prevent cutoff issue */
  }
}




/* Responsive Adjustments */
@media (max-width: 768px) {
  .internship-container {
    flex-direction: column;
    gap: 40px;
  }

  .internship-details {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .internship-list {
    padding-left: 0;
  }

  .internship-list li {
    text-align: center;
    padding-left: 0;
  }

  .internship-list li::before {
    display: none;
  }
}


/* Initial State - Positioned Off-Screen */
.python-intern {
  transform: translateX(-60px);
  transition: transform 0.8s ease-out;
}

.seo-intern {
  transform: translateX(60px);
  transition: transform 0.8s ease-out;
}

/* When the Section is in Viewport - Move to Normal Position */
.animated .python-intern {
  transform: translateX(0);
}

.animated .seo-intern {
  transform: translateX(0);
}



/* Mobile Devices (Below 768px) */
@media (max-width: 768px) {
  #internships {
    height: auto; /* Allow the section to expand dynamically */
    padding: 20px 10px; /* Adjust padding */
  }

  .internship-container {
    flex-direction: column;
    gap: 20px;
  }

  .internship-card {
    width: 90%; /* Reduce width for better fit */
    height: 250px; /* Decrease height to fit on the screen */
    font-size: 13px;
    padding: 10px;
  }

  .internship-title {
    font-size: 16px;
  }

  .internship-header {
    font-size: 11px;
  }

  .internship-role {
    font-size: 15px;
  }

  .internship-description {
    font-size: 12px;
  }

  .internship-list {
    font-size: 11.5px;
  }
}

/* Small Mobile (Below 480px) */
@media (max-width: 480px) {
  .internship-card {
    width: 95%; /* Adjust width for smaller screens */
    height: 350px; /* Reduce height to fit within viewport */
    font-size: 12px;
    padding: 8px;
  }

  .internship-title {
    font-size: 14px;
  }

  .internship-header {
    font-size: 10px;
  }

  .internship-role {
    font-size: 14px;
  }

  .internship-description {
    font-size: 11px;
  }
}





/* Responsive Design */
@media (max-width: 768px) {
  .projects-container {
    flex-direction: column;
    height: auto;
    padding: 20px 0;
  }

  .project-card {
    position: static;
    width: 90%;
    height: auto;
    margin-bottom: 20px;
    transform: none !important;
    transition: transform 0.8s ease;
  }

  .projects-container.active .project-1,
  .projects-container.active .project-2,
  .projects-container.active .project-3 {
    transform: none !important;
  }

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


/* RESPONSIVENESS */

/* Tablets */
@media screen and (max-width: 1024px) {
  .contact-container {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }

  .contact-item {
    width: 130px;
    height: 100px;
  }

  .contact-item img {
    width: 45px;
    height: 45px;
  }

  #contact-button {
    font-size: 16px;
    padding: 12px 18px;
    width: 180px;
  }

  #contact-info {
    font-size: 20px;
  }
}

/* Mobile Devices */
@media screen and (max-width: 768px) {
  .contact-header {
    font-size: 1.6rem;
    text-align: center;
    width: 100%;
  }

  .contact-header-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 10px;
  }

  #back-to-top {
    font-size: 12px;
    padding: 6px 10px;
  }

  .contact-container {
    padding: 10px;
    width: 95%;
  }

  .contact-items {
    flex-direction: column;
    gap: 15px;
  }

  .contact-item {
    width: 90%;
    height: auto;
    padding: 10px;
  }

  .contact-item img {
    width: 40px;
    height: 40px;
  }

  .contact-item p {
    font-size: 11px;
  }

  #contact-button {
    font-size: 14px;
    width: 160px;
    padding: 10px 15px;
  }

  #contact-info {
    font-size: 18px;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
}