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

 body {
     background: #05012a;
     color: white;
     font-family: 'poppins', sans-serif;

 }

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 70px;
  background: #0f0660;

  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}


 nav ul {
     display: flex;
     justify-content: center;
 }

 nav ul li {
     list-style: none;
     margin: 5px 25px;
 }

 nav ul li a {
     text-decoration: none;
     color: white;
     transition: 0.3s;
 }

 nav ul li a:hover {
     color: rgb(114, 138, 245);
     font-size: 1.01rem;
 }
nav .left {
     font-size: 1.5rem;
     color: white;
     font-family: 'Tangerine', cursive;
     font-size: 2.5rem;
 }
 .firstSection {
     display: flex;
     justify-content: space-around;
     margin: 20px 0;
     align-items: center;
 }

 .firstSection>div {
     width: 30%;
 }

 .leftSection {
     font-size: 3rem;
     margin: 50px 0;
 }

 .leftSection .btn {
     padding: 12px;
     color: white;
     background-color: #a176bd;
     border: 2px solid white;
     border-radius: 10px;
     font-size: 20px;
     cursor: pointer;
     margin-right: 20px;

 }

 .leftSection .btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(213, 144, 245, 0.4);
     background-color: #e47ee8;

 }

 .leftSection .button {
     padding-top: 20px;
 }

 .righttSection img {
     width: 100%;
     margin: 100px 0;

 }

 .purple {
     color: rgb(213, 144, 245);
     font-family: 'Tangerine', cursive;
     font-size: 5rem;
 }

 nav ul li a {
     text-decoration: none;
     color: white;
 }

 nav ul li a:hover {
     color: rgb(114, 138, 245);
     font-size: 1.01rem;
 }

 #element {
     color: rgb(229, 149, 241);
 }

 main hr {
     border: 0;
     height: 1px;
     background: #19278f;
     margin: 40px 80px;
 }

 .educationSection {
     padding: 100px 80px;
     font-family: 'Poppins', sans-serif;
     background-color: #05012a;
     color: white;
     margin-top: 70px;
 }

 .educationSection h2 {
     font-size: 2.5rem;
     color: #d590f5;
     /* light purple */
     margin-bottom: 30px;
     border-bottom: 2px solid #19278f;
     /* matches your hr */
     display: inline-block;
     padding-bottom: 5px;
 }

 .education-card {
     position: relative;
     background-color: #0f0660;
     padding: 20px 25px;
     margin-bottom: 20px;
     border-left: 4px solid #d590f5;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     border-radius: 10px;
     transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
     overflow: hidden;
 }

 .edu-logo {
     position: absolute;
     top: 10px;
     right: 15px;
     width: 100px;
     height: auto;
     opacity: 1;
     transition: transform 0.3s ease;
     background: none;
 }

 .education-card:hover .edu-logo {
     transform: scale(1.1);
 }

 .education-card strong {
     font-size: 1.2rem;
     color: #e7e7ff;
 }

 .education-card p {
     margin: 5px 0;
     font-size: 1rem;
     color: #c7c8f7;
 }

 .education-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 8px 20px rgba(213, 144, 245, 0.4);
     background-color: #180b80;
     /* slightly brighter on hover */
 }

 /*second*/
 
 .about-container {
     padding: 100px 80px;
 }

 .about-container h2 {
     font-size: 2.5rem;
     color: #d590f5;
     margin-bottom: 30px;
     border-bottom: 2px solid #19278f;
     display: inline-block;
     padding-bottom: 8px;
 }

 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 40px;
 }

 .about-text {
     flex: 1;
     min-width: 280px;
 }

 .about-text h3 {
     font-size: 1.6rem;
     margin-bottom: 15px;
     color: #e4d5f6;
 }

 .about-text p {
     color: #c7c8f7;
     font-size: 1rem;
     line-height: 1.8;
 }

 .about-img {
     flex: 1;
     min-width: 250px;
     display: flex;
     justify-content: center;
 }

 .about-img img {
     width: 250px;
     border-radius: 50%;
     border: 4px solid #d590f5;
     box-shadow: 0 0 25px rgba(213, 144, 245, 0.4);
     transition: 0.3s ease;
 }

 .about-img img:hover {
     transform: scale(1.05);
     box-shadow: 0 0 30px rgba(213, 144, 245, 0.6);
 }

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

     nav {
         flex-direction: column;
         padding: 10px 0;
     }

     nav ul {
         flex-direction: column;
         margin-top: 10px;
     }
 }

 /*third*/

 .contact-container {
     max-width: 800px;
     margin: 50px auto;
     padding: 100px 80px;
     background-color: #0f0660;
     border-radius: 10px;
     box-shadow: 0 0 20px rgba(213, 144, 245, 0.2);
 }

 .contact-container:hover {
     transform: translateY(-8px);
     box-shadow: 0 8px 20px rgba(213, 144, 245, 0.4);
     background-color: #180b80;
 }

 h1 {
     text-align: center;
     margin-bottom: 30px;
     color: #d590f5;
 }

 .contact-info {
     display: flex;
     flex-direction: column;
     gap: 20px;
     font-size: 1.1rem;
     line-height: 1.6;
 }

 .contact-info strong {
     color: #d590f5;
 }

 .contact-links a {
     color: #85b4ff;
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .contact-links a:hover {
     color: #ffffff;
 }
 
 footer {
     text-align: center;
     padding: 20px;
     background-color: #0f0660;
     color: #aaa;
     margin-top: 40px;
     height: 200px; 
 }

 .footer {
     display: flex;
     padding: 20px 120px;
     justify-content: space-evenly;
 }

 .footer ul {
     list-style: none;
 }

 footer .footer-rights {
     text-align: center;
     color: #c7c8f7;
 }
 @media (max-width: 600px) {
     .contact-container {
         margin: 20px;
         padding: 20px;
     }
 }
 /* 🌐 Full mobile responsiveness below 768px */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        height: auto;
        padding: 10px 0;
        text-align: center;
    }

    nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        margin: 10px 0;
        padding: 0;
    }

    nav ul li {
        margin: 10px 10px;
    }

     nav ul li:hover{
        font-weight: bolder;
    }

    .firstSection {
        flex-direction: column;
        text-align: center;
        padding: 80px 20px 20px;
    }

    .firstSection > div {
        width: 100%;
    }

    .leftSection {
        font-size: 2rem;
        margin: 80px 0;
    }

    .righttSection img {
        width: 100%;
        margin: 20px 0;
    }

    .leftSection .btn {
        width: 80%;
        margin: 10px auto;
        display: block;
        font-size: 1rem;
    }

    .about-container {
        padding: 80px 20px 40px;
    }

    .about-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .about-text h3 {
        font-size: 1.3rem;
    }

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

    .about-img img {
        width: 180px;
    }

    .educationSection {
        padding: 80px 20px 40px;
    }

    .education-card {
        position: relative;
        margin-bottom: 20px;
        border-left: 4px solid #d590f5;
        border-radius: 10px;
        transition: transform;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
         overflow: hidden;

    }

    .edu-logo {
        width: 70px;
        top: 10px;
        right: 10px;
        opacity: .5;
        height: auto;
        position: relative;
        margin-bottom: 20px;
    }

    .contact-container {
        margin: 20px;
        padding: 40px 20px;
    }

    .footer {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    footer {
        height: auto;
    }

    .btn {
        width: 100%;
        font-size: 1rem;
        padding: 10px;
    }
}

/*project section*/
/* Projects Page */
.projects {
  padding: 60px 20px;
  text-align: center;
  background: #05012a; /* same as index.html background */
}

.projects h1 {
  font-size: 2.5rem;
  color: #d590f5; /* accent color */
  margin-bottom: 10px;
}

.projects p {
  color: #bbb; /* light gray text */
  margin-bottom: 40px;
}

.projects-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1100px;
  margin: auto;
}

.project-card {
  flex: 1 1 300px;
  max-width: 350px;
  background: #0f0660; /* card color same as index */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}

.project-card h2 {
  color: #d590f5; /* accent */
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.project-card p {
  color: #ddd; /* light text */
  margin-bottom: 15px;
  font-size: 0.95rem;
  line-height: 1.4;
}

.project-card a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background: #d590f5; /* accent button */
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.project-card a:hover {
  background: #b96ad9; /* darker accent */
  color: #05012a; /* invert text on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
  .projects h1 {
    font-size: 2rem;
  }

  .projects-container {
    gap: 15px;
  }

  .project-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

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

  .projects h1 {
    font-size: 1.6rem;
  }

  .project-card {
    padding: 15px;
  }

  .project-card h2 {
    font-size: 1.2rem;
  }

  .project-card p {
    font-size: 0.85rem;
  }

  .project-card a {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}