html{
  display:flex;
  min-height:100vh;
}



body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
display: flex;
flex-direction: column;
flex-grow: 1;
}
div{
  display: flex;
}
/* Navbar styles */
.bar {
  display: block;
  background-color: rgb(29, 78, 216);
  padding: 0.2px;
}

.navbar {
  background-color: rgb(29, 78, 216);
  display: flex;

  padding: 10px 20px;
  color: #fff;

  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: auto;
}


.navbar a {
  color: #fff;
  font-weight: bolder;
  text-decoration: none;
  padding: 10px;
  display: inline-block;

}

.navbar a:hover {
  
  transition: 0.3s;
  color: orange;

}

.navbar .menu {
  display: flex;
}

.navbar .menu a {
  margin-right: 20px;
}

.navbar .more-options {
  position: relative;
  padding-right: 0vw;

}

.navbar .dropdown {
  display: none;
  position: absolute;
  top: 120%;
  right: 0%;
  background-color: #71b2ee;
  z-index: 1;
  flex-direction: column;

  padding-right: 4vw;
  padding-left: 4vw;


}

.navbar .dropdown a {
  white-space: nowrap;
  font-size: 1.1rem;
  box-sizing: border-box;
  border: 2px;
  align-items: center;
  margin: 1px;

}


.navbar .more-options .dropdown {

  display: none;
}

/* Hamburger menu styles */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 30px;
  height: 25px;
  justify-content: space-between;
}

.line {
  height: 4px;
  background-color: white;
  transition: 0.7s;

}

/* Sidebar styles */
.sidebar {
  flex-direction: column;
  position: fixed;
  top: 0;
  right: -130vw;
  height: 100%;
  width: 75vw;
  background-color: #71b2ee;
  /* Different background color */
  color: #250909;
  padding: 20px;
  transition: right 0.7s ease;
  z-index: 1000;
}

.sidebar.open {
  right: 0;
}

.sidebar a {
  display: block;
  padding: 15px 5px;
  color: white;
  text-decoration: none;
  font-weight: bolder;
  font-size: 1.4rem;
}

.sidebar a:hover {
  
  color: orange;
}

.sidebar .close {
  display: block;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  font-weight: bolder;
  cursor: pointer;
  color: white;

}

.sitename {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bolder;
  font-style: italic;
  font-size: 1.25rem;

}

.heading {

  align-items: center;
  justify-content: center;
  width: 90vw;
  margin-left:auto ;
  margin-right: auto;
}

.first-para {
  
  align-items: center;
  justify-content: center;
  max-width: 800px;
  width: 90vw;
  margin-left:auto ;
  margin-right: auto;
}



.heading2{
  
 margin-top: 3vh;
 line-height: 2;
}
#a99 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  font-size: 2.5rem;
  font-weight: bolder;

  color: #200909;

}
h2{
  font-size: 0.8rem;
}


.heading2 a {
  text-decoration: none;
  
}

/* Footer styles */


.footer-links {
  display: flex;
  
}
.footerbar{
  flex-grow: 3;
  margin-top: 3vh;
}

.footer-links{
  
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-left:auto ;
  margin-right:auto ;
  gap: 4vw;
  
}
.footer-links a{
  text-decoration: none;
  font-size: 1rem;
  color: white;
  font-weight: 700;
}
.footer-links a:hover{
  color:orange;
}

.footer{
  display: flex;
  
  position:relative;
  bottom: 0;
  width:100% ;
  margin: auto;
background-color: rgb(29, 78, 216);

}
#a99{
background-color: #c4d1c7;
}
.tools4{
  color: hsla(199, 100%, 15%, 0.966);
  font-size: 1.1rem;
  font-weight:700 ;
  
  padding: 3px;
}
.tools4:hover{
  color: orange;
  text-decoration: underline;
  
}
.pp1{
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 10px 30px 10px 30px;
}
h2{
  font-size: 1.2rem;
}

#box8{
  max-width: 800px;
  width: 85vw;
  margin: auto;
}
/* Mobile responsive */
@media (max-width: 360px) {}


/* Mobile styles */
@media (max-width: 768px) {
  .navbar .menu {
    display: none;
  }

  .hamburger {
    display: flex;
  }
  
}


@media (max-width: 600px) {

  

  h1{
    font-size: 1.5rem;
  }
  #a99{
    font-size: 1.5rem;
  }
  }
@media (min-width: 769px) {

  /* Hide the sidebar and hamburger on larger screens */
  .sidebar {
    display: none;
  }
 .heading2{
  margin-left: 2vh;
 } 
  
}

.relatedlinks {
  text-decoration: none; 
  color: rgb(100, 24, 24);
  font-weight: 700;
  line-height: 1.9;
}
.relatedlinks:hover{
    color:#d6616d
}
@media (max-width: 500px){
  .sitename{
    font-size:1rem;
  }
}