*{
  overflow:auto;
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #d6dada;
  color: #333;



}

header.head {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  color: white;
  padding: 15px 0;
  text-align: center;
  overflow: hidden;
}

/* Background + Blur  yaha karenge */

header.head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("gate2.jpeg") no-repeat center center/cover;
  filter: blur(6px);
  /* yaha blur control karna  hai */
  z-index: 0;
}

/* Content clear dikhane ke liye aise karenge */
header.head h1,
header.head nav {
  position: relative;
  z-index: 1;
}

/* Buttons me jo karenge  */
nav button {
  background-color: #e22609;
  border: none;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 3px;
  margin: 5px;

}

nav button:hover {
  background: #f0f1ed;
  transform: scale(1.15);
}

.button {
  background-color: rgb(165, 16, 16);
}

nav a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
}

nav a:hover {
  color: #f39c12;
}

main {
  padding: 20px;
  text-align: center;
}

section {
  margin: 20px auto;
  max-width: 800px;
  background: #ceeee7;
  padding: 20px;
  border-radius: 40px;
  box-shadow: 0 0 5px gray;
  font-family: sans-serif;
  overflow: auto;

}

section div h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid black;
  width: 200px;
  height:40px;
  background-color: antiquewhite;
  border-radius: 20px;
  animation: blink 1s infinite;
}
section div{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:15px;
}
section .news{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:15px;
  animation: blink 1s infinite;
}
@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
.news h1{
  display:flex;
  justify-content: center;
  align-items: center;
  border:1px solid black;
  width:250px;
  height:90px;
  background-color:#e22609;
  border-radius:20px;
}
.news h1:hover{
  background-color: aliceblue;
  color:#e22609;
}
.start div h2{
  display:flex;
  justify-content: center;
  align-items: center;
  border:none;
  width:250px;
  height:60px;
  background-color:#0ff8be;
  border-radius:20px;
  box-shadow: 2px 3px 5px 1px black;
}
hr {
  border: none;
  border-top: 3px dotted rgb(127, 121, 131); /* dotted style, color change kar sakte ho */
}
.high div h2{
  display:flex;
  justify-content: space-evenly;
  align-items: center;
  border:none;
  width:220px;
  height:60px;
  background-color:#0ff8be;
  border-radius:20px;
  box-shadow: 2px 3px 5px 1px black;
}
.high div .stat{
  border-radius: 20px;
}
.start .pop h2{
  display:flex;
  justify-content: space-evenly;
  align-items: center;
  border:none;
  width:350px;
  height:60px;
  background-color:#0ff8be;
  border-radius:20px;
  box-shadow: 2px 3px 5px 1px black;
}
.start .pop h2 img{
  border-radius: 20px;
}
.lit #lit h2{
  width:380px;
}
.lit #sub{
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height:100px;
  background-color: #0ff8be;
  border-radius:20px;
  box-shadow:2px 3px 5px 1px black;
}
.head #head h2{
  display:flex;
  justify-content: center;
  align-items: center;
  border:none;
  width:250px;
  height:60px;
  background-color:#0ff8be;
  border-radius:20px;
  box-shadow: 2px 3px 5px 1px black;
}
.query {
  margin: 10px;
  font-family: cursive;
  font-size: x-small;
  text-align: center;
}

form {
  background: #84a7d2;
  color: white;
  padding: 15px 0;
  text-align: center;
}

/* yaha se  table ka kaam karenge */
tbody {
  display: table-row-group;
  vertical-align: middle;
  unicode-bidi: isolate;
  border-color: inherit;
}

.htable table {
  border-collapse: collapse;
  width: 100%;
  font-size: small;
  font-family: sans-serif;
  overflow: auto;
}

table,
td,
th {
  border: 1px solid black;
}

tr:nth-child(even) {
  background-color: rgb(241, 203, 201);
}

thead {
  background-color: #5293e2;
}

.button:hover {
  color: red;
  background: red;
}

.clickable {
  width: 200px;
  cursor: pointer;
  transition: 0.3s;
}

.clickable:hover {
  transform: scale(1.2);
}

.hindi {
  background-color: #a1f461;
  box-shadow: 2px 2px 20px 2px rgb(79, 77, 75);
}

/* yaha per jo next ya privious and next wala kaam karenge */
.position {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  padding: 0 15px;
  font-weight: bolder;
  font-size: medium;

}
/* yaha se jo neeche ka kaam hai usko karenge */
footer {
  background: #2a2b2d;
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

footer div ul li a {
  color: white;
}

#term,
#privacy {
  color: #f2f9f8
}
footer {
  background-color: #222;
  color: white;
  padding: 30px;
  text-align: center;
  font-family: Arial, sans-serif;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin: 5px 0;
}

.footer-links a {
  color: white;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.social-links {
  margin: 20px 0;
}

.social-links a {
  color: white;
  margin: 0 10px;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.3s;
}

.social-links a:hover {
  color: #ff4081; /* Optional hover color */
}

#term,
#privacy {
  color: white;
  text-decoration: none;
  margin: 0 5px;
}

#term:hover,
#privacy:hover {
  text-decoration: underline;
}