body {
 background: linear-gradient(to bottom, #530da8, #2b0955);
}
.Main {
 display: grid;
grid-template-columns: 25% 75%;
min-height: 100vh;
}

.Leftbox {
padding: 5px;
 border-right: 2px solid#2b0955;
 justify-content: flex-start;
}
.leftSearch input {
 height: 100%;
 padding-left: 20px;
 border-radius: 100%;
 font-size: clamp(14px, 2vw, 22px);
 color: white;
 font-family: "Pixelify Sans", sans-serif;
 width: 100%;
 background: transparent;
 outline: none;
 border: none;
}
.leftsearch {
 padding: 5px;
 display: grid;
 border-radius: 40px;
 grid-template-columns: 1fr auto;
 place-self: left;
 width: 13%;
 max-width: 90%;
 height: 40px;
 margin-top: 10px;
 background: #b074f9;
 border: 1px solid #2b0955;
 transition: 0.7s ease-in-out;
}
.leftsearch:hover {
 width: 70%;
}
.leftsearch button {
 background: transparent;
 border: none;
 cursor: pointer;
 height: 100%;
 width: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.leftsearch button img {
 height: 80%;
 width: 25px;
 object-fit: contain;
 margin-left: 8px;
}

.search input {
 height: 100%;
 padding-left: 20px;
 border-radius: 100%;
 font-size: clamp(14px, 2vw, 22px);
 color: white;
 font-family: "Pixelify Sans", sans-serif;
 width: 100%;
 background: transparent;
 outline: none;
 border: none;
}
.search {
 padding: 5px;
 display: grid;
 border-radius: 40px;
 grid-template-columns: 1fr auto;
 place-self: left;
 width: 04%;
 max-width: 30%;
 height: 40px;
 margin-top: 10px;
 background: #b074f9;
 border: 1px solid #2b0955;
 transition: 1s ease-in-out;
 grid-template-columns: 25px 1fr;
}
.search:hover {
 width: 90%;
}
.searchicon {
 height: 80%;
 width: 20px;
 place-self: center;
 margin-left: 08px;
 object-fit: contain;
}
.Rightbox {
 height: 100%;
 padding: 5px;
}

#videos {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 15px;
 padding: 10px;
}

.video-item iframe {
 display: block;
 border-radius: 10px;
}

.video-item {
 position: relative;
}

/* ===== HEADER & LOGO STYLES (LOGO + TEXT ONLY) ===== */

.site-header {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 20px; /* Spacing around the header */
  background-color: #2b0955; /* Matches your dark purple */
  border-bottom: 1px solid #530da8; /* Uses your lighter purple */
  box-sizing: border-box;
}

/* This styles the link itself */
.logo-link {
  display: flex; /* Aligns icon and text horizontally */
  align-items: center; /* Aligns them vertically */
  text-decoration: none; /* Removes underline */
}

/* This styles the new icon image */
.logo-icon {
  height: 80px; /* You can adjust this height */
  width: auto;
  margin-right: 10px; /* Adds space between icon and text */
}

/* This styles the "PurpleTube" text */
.site-title-text {
  color: #ffffff; /* White text */
  font-family: "Pixelify Sans", sans-serif; /* Your site's font */
  font-size: 28px; /* Make the site title prominent */
  font-weight: bold;
}