body {
  font-family: 'Segoe UI', sans-serif;
  margin: 5px;
padding: 15px;
background-color: rgba(0,0,0,0.2);
}header {

  background: #7f83df;
  color: #2c2e2d;
  padding: 1rem;
  text-align: center;
}

/* 🖼️ Image Section */
#images {
  background-color: #f0f8ff;
  padding: 30px;
  text-align: center;
}

#images img {
  max-width: 300px;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

#head{
vertical-align: auto;


}

nav ul {
  list-style: none;
  padding: 5px;
  display: flex;
  justify-content: center;
  gap: 25px;
}

nav a {
  color: #fff;
  text-decoration: none;
}


#singh {
  width: 150px;
  height: auto;
  background-color: aqua;
  text-align: center;
}



a {
  color: #fff;
  background-color: #222;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: box-shadow 0.9s ease;
}

a:hover {
  box-shadow: 0 0 10px #00f, 0 0 20px #00f;
}

/* 🔊 Audio Section */
#audio {
  background-color: #f5fffa;
  padding: 30px;
  text-align: center;
}

#audio audio {
  width: 300px;
}

/* 🎥 Video Section */
#videos {
  background-color: #fff0f5;
  padding: 30px;
  text-align: center;
}

#videos video {
  border: 2px solid #ff69b4;
  border-radius: 10px;
}

.video-section {
 
  float: left;
  margin: 20px 10px;
}

.video-section h3 {
  font-family: 'Segoe UI', sans-serif;
  color: #333;
  margin-bottom: 10px;
}





/* Link Style (लिंक की स्टाइल) */
    a.custom-link {
      text-decoration: none;         /* No underline (रेखा हटाएं) */
      color: white;                  /* Text color (टेक्स्ट रंग) */
      background-color: #007BFF;     /* Background color (पृष्ठभूमि रंग) */
      padding: 10px 20px;            /* Padding around text (टेक्स्ट के चारों ओर जगह) */
      border-radius: 8px;            /* Rounded corners (गोल कोने) */
      font-weight: bold;             /* Bold text (मोटा टेक्स्ट) */
      transition: background-color 0.3s ease; /* Smooth hover effect */
    }

    /* Hover Effect (हवर इफेक्ट) */
    a.custom-link:hover {
      background-color: #0056b3;     /* Darker on hover (हवर पर गहरा रंग) */
    }



/* Responsive Video Container */
.video-container {
  position: relative;
  width: 320px;
  max-width: 80px;   /* adjust as needed */
  margin: 0 auto;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
  text-align: center;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 240px;
}









footer {
  background: #c3c0e1;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}