* {
  margin: 0px;
  padding: 0px;
  font-family: "Noto Serif Display", serif;
  font-weight: bold;
}
.TopHeader {
  height: 35px;
  background-color: gray;
  font-size: 15px;
  color: white;
  padding-top: 10px;
}
.Header {
  height: 85px;
  font-size: 22px;
}
.row {
  width: 100%;
  padding-top: 25px;
}
.Header img {
  width: 60px;
  height: 50px;
  margin-right: 10px;
}
.hp1 {
  width: 5%;
  float: left;
}
.hp2 {
  width: 50%;
  float: left;
  font-size: 35px;
  color: rgb(60, 255, 0);
}
.hp3 {
  width: 7%;
  float: right;
  background-color: #0077b5;
  padding: 10px;
  text-align: center;
  margin-right: 30px;
  border-radius: 10px;
}
.hp3:hover {
  background-color: red;
}
.p {
  text-decoration: none;
  color: white;
}
.Menu {
  height: auto;
  background-color: lightgray;
  font-size: 22px;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.Menu ul {
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.Menu ul li {
  margin-right: 105px;
}
body {
  background-color: #100043;
}

.Menu ul li a {
  display: inline-block;
  text-decoration: none;
  color: black;
  font-size: 18px;
  padding: 5px 12px;
  font-weight: bold;
  font-family: "Arial";
  border-radius: 10px;
}

.Menu ul li:hover {
  background-color: red;
  transition: background-color 0.3s, color 0.3s, border-radius 0.3s;
  cursor: pointer;
}

.Menu ul li:hover a {
  color: yellow;
  cursor: pointer;
}
.Bodypart {
  height: auto;
  font-size: 22px;
  width: auto;
}
.title {
  text-align: center;
  color: white;
}
.about {
  width: 100%;

  margin: 0 auto auto;
}
.content {
  width: 100%;
  border: 1px solid green;
  margin-right: 50px;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
}
.content img {
  width: 15%;
  border-radius: 10px;
  float: inline-start;
  box-shadow: 3px 6px red;
  margin-left: 10px;
  margin-top: 50px;
}
.para {
  width: 75%;
  float: left;
  text-align: justify;
  color: white;
  margin-left: 40px;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.Achieve img {
  width: 500px;
  height: 350px;
  margin-right: 50px;
}
.Footer {
  height: auto;
  font-size: 12px;
  background-color:  #100043;
  color: white;
  padding: 20px;
}
#ContactMe {
  font-family: serif;
  font-size: 32px;
  color: white;
  text-align: center;
  margin-top: 20px;
  font-family: "Noto Serif Display", serif;
  font-weight: bold;
  padding-bottom: 10px;
}
.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

label {
  width: 200px;
  font-size: 24px;
}
input[type="text"],
textarea {
  width: 300px;
  padding: 8px;
  font-size: 14px;
  margin-left: 10px;
}
textarea {
  width: 310px;
  margin-left: 10px;
}
.gender-group input {
  margin-right: 5px;
}
#btn {
  font-size: 16px;
  padding: 8px 16px;
  margin-left: 210px; 
  color: rgb(214, 216, 214);
  background-color: green;
}
.skil {
  display: flex;
  width: 100%;
}
.Coding,
.personal,
.social {
  flex: 1;
  padding: 10px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background-color: #100043;
  border: 1px solid #ccc;
  color: white;
}
.social a,
.Coding a,
.personal a {
  text-decoration: none;
  color: rgb(179, 146, 146);
  text-align: center;
  float: center;
  padding: 10px;
}
.container {
  display: flex;            
  justify-content: space-between; 
  gap: 20px;                 
  align-items: flex-start;   
  padding: 20px;     
  flex-wrap: wrap;      
}
.project img {
  width: 600px;              
  height: 300px;              
}
.project {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;        
  flex-basis: 25%;           
}
.project p {
  margin-top: 10px; 
  width: 600px;  
  text-align: justify;  
  color: white;   
}
.project h4, .project h5, .project h6{
  margin-top: 10px;
  width: 400px;
  text-align: center;
  margin: 10px;
  font-size: 30px;
  color: yellow;
}
.education-section{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
width: 500px;
justify-content: center;
background-color: #100043;
}
.education-section {
width: 90%;
max-width: 800px;
margin-top: 50px;
}
.timeline {
position: relative;
padding-left: 20px;
}
.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
height: 100%;
width: 2px;
background: #4caf50;
}
.timeline-item {
position: relative;
margin-bottom: 30px;
padding-left: 40px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 10px;
top: 0;
height: 10px;
width: 10px;
background: #4caf50;
border-radius: 50%;
}
.timeline-item .year {
font-weight: bold;
color: #0bff13;
}
.timeline-item .degree {
font-size: 28px;
font-weight: bold;
color: #ffff08;
margin-top: 5px;
}
.timeline-item .description {
font-size: 14px;
color: #ffffff;
margin-top: 5px;
font-size: 24px;
width: 700px;
padding-left: 40px;
}
.skills-section {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.skills-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.skills-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.skill-category {
  width: 48%;
  margin-bottom: 20px;
}
.skill-category h3 {
  font-size: 24px;
  margin-bottom: 10px;
  border-bottom: 2px solid #4CAF50;
  padding-bottom: 5px;
  color: yellow;
}
.skills-list {
  list-style-type: none;
  padding: 0;
}
.skills-list li {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
  font-size: 18px;
}
  .scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px 0; /* space above and below */
    scroll-behavior: smooth;
  }

  .certificate-img {
    height: 350px; /* 🎯 same height as original marquee-style */
    display: inline-block;
    margin-right: 20px;
    vertical-align: middle;
  }
  #scrollCertificates::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

#scrollCertificates::-webkit-scrollbar {
  height: 0px;
}
.popup {
        display: none;
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #28a745; 
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        z-index: 1000;
        text-align: center;
        transition: opacity 0.5s ease-in-out;
      }
      .popup.error {
        background-color: #dc3545; 
      }
.Footer hr {
  width: 100vw;       /* full width of the viewport */
  margin: 0;          /* remove any automatic centering */
  border: 1px solid white;  /* keep or style as needed */
}
.TopHeader {
  background-color:gray;
  padding:10px 20px;
  display:flex;
  justify-content:space-between;
  align-items: center;
  font-family: 'Noto Serif Display', serif;
}

.top-links {
  display: flex;
  gap: 60px;
  font-size: 20px;
}

.top-btn {
  border: 2px solid #b88989;
  padding: 5px 12px;
  border-radius: 10px;
  background-color: white;
  color: blue;
  text-decoration: none;
  font-weight: bold;
}

.top-btn:hover {
  background-color:white
}