h1 {
                    font-size: 42px;
                    font-weight: bold;
                    color:#1e3a8a;
                    text-align: center;
                    
                    
                }
                header {
                  background-color: #f4f4f4;
                  color: white;
                  text-align: center;
                  padding:20px 0;
                  padding-bottom: 15px;
                }
                nav {
                  margin-top: 15px;
                  text-align: center;
                
                }
                nav a {
                  color: #000080;
                  text-decoration: underline;
                  font-weight: bold;
                  transition: color 0.3s ease, transform 0.3s ease;
                  margin: 0 15px;
                  padding: 8px 12px;
                  font-size: 18px;

                }
                nav a:hover {
                  color: #38bdf8;
                  text-decoration: underline;
                  transform: translateY(-2px);
                }
                 p {
                  margin-top:5px;
                  line-height: 1.6;
                  margin-bottom: 15px;
                  text-align: left;
                  }

                p.para1 {
                  line-height: 1.6;
                  background-color: rgb(191, 90, 107);
                }
                

            
                  
              
                body {
                  font-family: Arial, sans-serif;
                  background-color: #f5f5f5;
                  color: #333333;
                  margin: 0;
                  padding: 0;
                  scroll-behavior: smooth;
                }
                .hero {
                  text-align: center;
                  padding: 20px 20px;
                }
                .hero p {
                  max-width: 800px;
                  margin: 20px auto;
                  line-height: 1.5;
                  font-size: 1.1rem;
                  text-align: left;
                }
                .hero a {
                  display: inline-block;
                  margin:15px 10px;
                  text-decoration: none;
                  font-weight: bold;
                  color: #000080;
                  transition: 0.3s ease;
                  border-radius: 8px;
                  padding: 10px 20px;
                  background-color: #000080;
                
                }
                h2, h3 {
                  font-size: 20px;
                  margin-top: 30px;
                  margin-bottom: 0;
                  font-weight: 400;
                  line-height: 1.2;
                  color: #1e3a8a;
                }
                h2 + p{
                  margin-top: 0;
                }
                h3 + p {
                  margin-top: 0;
                }
                ul {
                  line-height: 1.5;
                  margin-top: 0;
                  padding-left: 20px;
                
                }
              
                 .hero img {
                  max-width: 100%;
                  width: 400px;
                  height: auto;
                  border-radius: 50%;
                  display: block;
                  margin: 30px auto;
                  border: 4px solid white;
                  box-shadow: 0 4px 12px rgba (0,0,0,0,15);
                 }
                 section {
                  margin-bottom: 30px;
                 }
                 .page-content {
                  max-width: 800px;
                  margin: 40px auto;
                  padding: 0 20pxx;
                 }
                 footer{
                  background-color: #1e3a8a;
                  color: white;
                  text-align: center;
                  padding: 20px;
                  margin-top: 40px;
                 }
                 footer p {
                  margin: 0;
                  font-size: 12px;
                  letter-spacing: 0.5;
                  text-align: center;
                 }
                 ::selection {
                  background: #1e3a8a;
                  color: white;
                 }
                 @media (max-width: 600px) {
                  .tagline {
                    font-size: 18px;
                    padding: 0 15px;
                  }
                 }
                  .tagline {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: dark teal;
    letter-spacing: 1px;
    margin: 40px auto;
    max-width: 800px;
}
.tagline span {
  color:#38bdf8;
}
.project-card {
  border: 1px solid #f8f9fa;
  border-radius: 10px;
  padding:20px;
  margin: 25px 0;
  box-shadow: 0 3px 8px rgb(0,0,0,0,1);
  background-color: #ced4dd;
  transition: 0.3s ease box-shadow 0.3s ease;
  
}
.project-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgb (0,0,0,0.15);
}