html {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.Top {
    position: absolute;
    width: 100%;
    height: 100px;
    left: 0;
    top: 0;
    background-color: #520229; 
}
 .Top::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}
.Top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.6px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}

.logo {
    margin-top: 4px;   
    margin-left: 4px; 
}
.Main {
    position: absolute;
    width: 100%;
    height: calc(100% - 120px);
    top:100px;
    left: 0;
    background: linear-gradient(to right, #380021, #380021, #00241C, #380021, #00241C, #380021, #380021); 
    overflow: auto;
}

.video-container-background {
    position: relative;
    top: 20px;
    width: 80%;
    max-width: 800px;
    margin: 0 auto; 
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(to right, #A50363,  #501e01, #f3fe3b, #f3fe3b, #501e01, #03A581); 
    padding: 4px; 
}

.video-container {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden; 
}

.video {
    width: 100%;
    display: block;
    border-radius: 16px;
    background: Black;
}


.buffering {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 5px;
    animation: zoom-in-zoom-out 1s ease infinite;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to top, #FA006608, #FA00660F, #FA006614, #FA00661A); 
    padding: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.5s;
    border-radius: 0 0 16px 16px;
}

.controls.hidden {
    opacity: 0;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

 input[type="range"] {
    cursor: pointer;
}

input[type="range"]#progress {
    accent-color: #FA0072;
}

.buffered {
    background: linear-gradient(to right, #C9F0EF  0%, #C9F0EF  var(--buffered-percentage), #04C1F0 var(--buffered-percentage), #04C1F0 100%);
}

#progress {
    flex: 1;
    margin: 0 10px;
    height: 5px;
}

/* Change the color of the volume slider */
input[type="range"]#volume {
    accent-color: #00DEFA; 
}

#volume {
    width: 100px;
    height: 5px;
}

button#mute::before {
     content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDc1IDc1IiBoZWlnaHQ9IjE2IiB2ZXJzaW9uPSIxLjAiPjxwYXRoIGZpbGw9IiMwMDk0ZmYiIGQ9Ik00NC41MjcuNTMxYTIuNjcgMi42NyAwIDAgMC0yLjgyLjMxN0wxNS42NjQgMjEuNjJIMy4zMzZBMi42NjQgMi42NjQgMCAwIDAgLjY2OCAyNC4yOVY1MC45OGEyLjY2NyAyLjY2NyAwIDAgMCAyLjY2OCAyLjY2OGgxMi4zMjhsMjYuMDQzIDIwLjc3Yy40OC4zODMgMS4wNy41ODIgMS42NjQuNTgyLjM5NSAwIC43OS0uMDg2IDEuMTU2LS4yNjZhMi42NiAyLjY2IDAgMCAwIDEuNTEyLTIuNDAyVjIuOTM4YzAtMS4wMjgtLjU4Ni0xLjk2MS0xLjUxMi0yLjQwN1pNNDkuNDkyIDI1LjA3YTIuNjY2IDIuNjY2IDAgMCAwIDAgMy43NzRjNC4xODggNC4xOTEgNC4xODggMTMuMzkgMCAxNy41NzhhMi42NjYgMi42NjYgMCAwIDAgMCAzLjc3MyAyLjY1IDIuNjUgMCAwIDAgMS44ODcuNzg1IDIuNjUgMi42NSAwIDAgMCAxLjg4Ny0uNzg1YzYuMjI2LTYuMjIyIDYuMjI2LTE4LjkwMiAwLTI1LjEyNWEyLjY2NiAyLjY2NiAwIDAgMC0zLjc3NCAwWk02Ni42OTUgMTcuMTQ4YTIuNjc2IDIuNjc2IDAgMCAwLTMuNzczLS4xNjggMi42NzIgMi42NzIgMCAwIDAtLjE2OCAzLjc3YzMuNzQ2IDQuMTAyIDYuMDQzIDEwLjU0IDYuMTQgMTcuMjMuMDk4IDYuODQtMi4wNzggMTIuODA1LTUuOTcyIDE2LjM2OGEyLjY3MiAyLjY3MiAwIDAgMC0uMTY4IDMuNzdjLjUyNy41NzcgMS4yNS44NjYgMS45NjkuODY2LjY0NCAwIDEuMjg5LS4yMyAxLjgtLjY5NSA1LjAyLTQuNTkgNy44MjktMTIuMDIgNy43MTEtMjAuMzg3LS4xMTctNy45Ni0yLjkzMy0xNS43MTUtNy41MzktMjAuNzU0Wm0wIDAiLz48L3N2Zz4=');
}

button#mute.muted::before {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmVyc2lvbj0iMS4wIiB2aWV3Qm94PSIwIDAgNzUgNzUiPjxwYXRoIGZpbGw9IiMwMDk0ZmYiIGQ9Im00MS4yMTkgMTQuMDg2LTEwLjM5NSAxMC4xNEgxOS4yYTYuNTgzIDYuNTgzIDAgMCAwLTYuNTg2IDYuNTgzdjEzLjc3YTYuNTcgNi41NyAwIDAgMCA2LjU4NiA2LjU3aDEuNWwyOC40ODUtMzQuMTg0Yy0uMzc1LTMuODI0LTUuMDk4LTUuNjY4LTcuOTY1LTIuODhabS05LjgwOSAzNy42OCA5LjgwOSA5LjUzOWMyLjk4NCAyLjg5NCA3Ljk4Ljc4IDcuOTgtMy4zNzVWMzAuNDA2Wm0wIDAiLz48cGF0aCBmaWxsPSIjZmYwMTZjIiBkPSJNNjQuMDIgMTAuOThDNTYuOTQgMy44OTggNDcuNTIgMCAzNy41IDBTMTguMDU5IDMuODk4IDEwLjk4IDEwLjk4QzMuODk4IDE4LjA2IDAgMjcuNDggMCAzNy41czMuODk4IDE5LjQ0MSAxMC45OCAyNi41MkMxOC4wNiA3MS4xMDIgMjcuNDggNzUgMzcuNSA3NXMxOS40NDEtMy44OTggMjYuNTItMTAuOThDNzEuMTAyIDU2Ljk0IDc1IDQ3LjUyIDc1IDM3LjVzLTMuODk4LTE5LjQ0MS0xMC45OC0yNi41MlpNNC41OSAzNy41YzAtMTguMTQ4IDE0Ljc2Mi0zMi45MSAzMi45MS0zMi45MSA3LjE0IDAgMTMuNzM4IDIuMjgxIDE5LjE0IDYuMTQ4TDE0LjYyNiA2MS4xNDFDOC40NDUgNTUuMTU2IDQuNTkgNDYuNzcgNC41OSAzNy41Wk0zNy41IDcwLjQxYTMyLjc4IDMyLjc4IDAgMCAxLTE4LjkxNC01Ljk4NEw2MC41NyAxNC4wNTVjNi4wNzUgNS45NjggOS44NCAxNC4yOCA5Ljg0IDIzLjQ0NSAwIDE4LjE0OC0xNC43NjIgMzIuOTEtMzIuOTEgMzIuOTFabTAgMCIvPjwvc3ZnPg==');
}

button#play-pause.paused::before {
     content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4wIiB2aWV3Qm94PSIwIDAgNzUgNzUiPjxkZWZzPjxjbGlwUGF0aCBpZD0iYyI+PHBhdGggZD0iTTAgMGg3NXY3NUgweiIvPjwvY2xpcFBhdGg+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgeD0iMCUiIHk9IjAlIj48ZmVDb2xvck1hdHJpeCBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiIHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMSAwIi8+PC9maWx0ZXI+PG1hc2sgaWQ9ImIiPjxnIGZpbHRlcj0idXJsKCNhKSI+PHBhdGggZmlsbC1vcGFjaXR5PSIuNTUiIGQ9Ik0tNy41LTcuNWg5MHY5MGgtOTB6Ii8+PC9nPjwvbWFzaz48L2RlZnM+PGcgbWFzaz0idXJsKCNiKSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2MpIj48cGF0aCBmaWxsPSIjMDE0OTU5IiBkPSJNNzUgMzcuNWEzNy4yOSAzNy4yOSAwIDAgMS0uNzE5IDcuMzE2IDM4Ljc3NCAzOC43NzQgMCAwIDEtLjg5NCAzLjU3IDM3LjcxMyAzNy43MTMgMCAwIDEtMi44MTcgNi43OSAzNi4yMzUgMzYuMjM1IDAgMCAxLTEuODkgMy4xNTYgMzcuMTQzIDM3LjE0MyAwIDAgMS00LjY2NCA1LjY4NCAzNy4xNDMgMzcuMTQzIDAgMCAxLTUuNjg0IDQuNjY0IDM2LjIzNSAzNi4yMzUgMCAwIDEtMy4xNTYgMS44OSAzNy43MTMgMzcuNzEzIDAgMCAxLTYuNzkgMi44MTYgMzguNzc0IDM4Ljc3NCAwIDAgMS0zLjU3Ljg5NUEzNy4yOSAzNy4yOSAwIDAgMSAzNy41IDc1YTM3LjI5IDM3LjI5IDAgMCAxLTcuMzE2LS43MTkgMzguNzc0IDM4Ljc3NCAwIDAgMS0zLjU3LS44OTQgMzcuNzEzIDM3LjcxMyAwIDAgMS02Ljc5LTIuODE3IDM2LjIzNSAzNi4yMzUgMCAwIDEtMy4xNTYtMS44OSAzNy4xNDMgMzcuMTQzIDAgMCAxLTUuNjg0LTQuNjY0IDM3LjE0MyAzNy4xNDMgMCAwIDEtNC42NjQtNS42ODQgMzYuMjM1IDM2LjIzNSAwIDAgMS0xLjg5LTMuMTU2IDM3LjcxMyAzNy43MTMgMCAwIDEtMi44MTYtNi43OSAzOC43NzQgMzguNzc0IDAgMCAxLS44OTUtMy41N0EzNy4yOSAzNy4yOSAwIDAgMSAwIDM3LjVhMzcuMjkgMzcuMjkgMCAwIDEgLjcxOS03LjMxNmMuMjQyLTEuMjA0LjUzOS0yLjM5NS44OTQtMy41N2EzNy43MTMgMzcuNzEzIDAgMCAxIDIuODE3LTYuNzkgMzYuMjM1IDM2LjIzNSAwIDAgMSAxLjg5LTMuMTU2IDM3LjE0MyAzNy4xNDMgMCAwIDEgNC42NjQtNS42ODQgMzcuMTQzIDM3LjE0MyAwIDAgMSA1LjY4NC00LjY2NCAzNi4yMzUgMzYuMjM1IDAgMCAxIDMuMTU2LTEuODkgMzcuNzEzIDM3LjcxMyAwIDAgMSA2Ljc5LTIuODE2IDM4Ljc3NCAzOC43NzQgMCAwIDEgMy41Ny0uODk1QTM3LjI5IDM3LjI5IDAgMCAxIDM3LjUgMGEzNy4yOSAzNy4yOSAwIDAgMSA3LjMxNi43MTljMS4yMDQuMjQyIDIuMzk1LjUzOSAzLjU3Ljg5NGEzNy43MTMgMzcuNzEzIDAgMCAxIDYuNzkgMi44MTcgMzYuMjM1IDM2LjIzNSAwIDAgMSAzLjE1NiAxLjg5IDM3LjE0MyAzNy4xNDMgMCAwIDEgNS42ODQgNC42NjQgMzcuMTQzIDM3LjE0MyAwIDAgMSA0LjY2NCA1LjY4NCAzNi4yMzUgMzYuMjM1IDAgMCAxIDEuODkgMy4xNTYgMzcuNzEzIDM3LjcxMyAwIDAgMSAyLjgxNiA2Ljc5Yy4zNTYgMS4xNzUuNjUzIDIuMzY2Ljg5NSAzLjU3QTM3LjI5IDM3LjI5IDAgMCAxIDc1IDM3LjVabTAgMCIvPjwvZz48L2c+PHBhdGggZmlsbD0iI2ZmMDE2YyIgZD0ibTU4LjAxMiAzNy42Ni0yOS43MTkgMTguNWMtMS40NTMgMS40NS0zLjk1My40MjItMy45NTMtMS42MzNsLS4wNTktMzQuMDE1YzAtMi4wNTUgMi40OC0zLjA4MiAzLjk1LTEuNjNsMjkuNzggMTUuNDkzYy45MS45My45MSAyLjM3OSAwIDMuMjg1Wm0wIDAiLz48L3N2Zz4=');
}
    
button#play-pause::before {
     content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgdmlld0JveD0iMCAwIDc1IDc1IiBoZWlnaHQ9IjI0IiB2ZXJzaW9uPSIxLjAiPjxwYXRoIGZpbGw9IiNmNmE3ZDQiIGQ9Ik03NC43NzcgMzcuNWMwIDIwLjY2NC0xNi43MzggMzcuMzktMzcuMzg2IDM3LjM5QzE2LjczNCA3NC44OSAwIDU4LjE2NSAwIDM3LjUgMCAxNi44NTIgMTYuNzM0LjExIDM3LjM5LjExYzIwLjY1IDAgMzcuMzg3IDE2Ljc0MiAzNy4zODcgMzcuMzlabTAgMCIvPjxwYXRoIGZpbGw9IiNlYWY2MDAiIGQ9Ik0yNi43MDMgMjUuMDRoNy4xMjV2MjQuOTE3aC03LjEyNVpNNDAuOTUzIDI1LjA0aDcuMTIxdjI0LjkxN2gtNy4xMlptMCAwIi8+PC9zdmc+');
}


button#fullscreen::before {
   content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDc1IDc1IiBoZWlnaHQ9IjE2IiB2ZXJzaW9uPSIxLjAiPjxwYXRoIGZpbGw9IiMxMGYxYTciIGQ9Ik0wIDB2MjguMTI1aDYuMjVWNi4yNWgyMS44NzVWMFptNDYuODc1IDB2Ni4yNUg2OC43NXYyMS44NzVINzVWMFpNMCA0Ni44NzVWNzVoMjguMTI1di02LjI1SDYuMjVWNDYuODc1Wm02OC43NSAwVjY4Ljc1SDQ2Ljg3NVY3NUg3NVY0Ni44NzVabTAgMCIvPjwvc3ZnPg==');
}

button#fullscreen.exit::before {
   content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDc1IDc1IiBoZWlnaHQ9IjE2IiB2ZXJzaW9uPSIxLjAiPjxwYXRoIGZpbGw9IiNmZjAxNmMiIGQ9Ik03MC44OTggNDYuNDczaC0xOC4xMmE0LjA5MiA0LjA5MiAwIDAgMC00LjA5NCA0LjA5djIwLjMzNWE0LjA5MyA0LjA5MyAwIDEgMCA4LjE4MyAwVjU1LjM0NGgxNC4wMzFhNC4wOTIgNC4wOTIgMCAwIDAgNC4wOTQtNC4wOXYtLjY5MWE0LjA5NyA0LjA5NyAwIDAgMC00LjA5NC00LjA5Wk0yMi4yMDcgNDYuNDczSDQuMDg2YTQuMDkyIDQuMDkyIDAgMCAwLTQuMDk0IDQuMDl2LjY5YTQuMDkyIDQuMDkyIDAgMCAwIDQuMDk0IDQuMDloMTQuMDMxdjE1LjU1NWE0LjA5MiA0LjA5MiAwIDEgMCA4LjE4NCAwVjUwLjU2M2E0LjA5MiA0LjA5MiAwIDAgMC00LjA5NC00LjA5Wk03MC44OTggMTkuNjRoLTE0LjAzVjQuMDg3YTQuMDkyIDQuMDkyIDAgMSAwLTguMTg0IDB2MjAuMzM2YTQuMDkyIDQuMDkyIDAgMCAwIDQuMDkzIDQuMDloMTguMTIxYTQuMDkxIDQuMDkxIDAgMCAwIDQuMDktNC4wOXYtLjY4OGE0LjA5MiA0LjA5MiAwIDAgMC00LjA5LTQuMDkzWk0yMi4yMDctLjAwNGE0LjA5MSA0LjA5MSAwIDAgMC00LjA5IDQuMDlWMTkuNjRINC4wODZhNC4wOTMgNC4wOTMgMCAwIDAtNC4wOTQgNC4wOTN2LjY4OGE0LjA5MyA0LjA5MyAwIDAgMCA0LjA5NCA0LjA5NGgxOC4xMjFhNC4wOTMgNC4wOTMgMCAwIDAgNC4wOTQtNC4wOTRWNC4wODZhNC4wOTIgNC4wOTIgMCAwIDAtNC4wOTQtNC4wOVptMCAwIi8+PC9zdmc+');
}
.fullscreen .video-container-background { 
    border-radius: 0;
}

.fullscreen .video-container {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

.fullscreen .video {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.fullscreen .controls {
    bottom: 0;
    width: 100%;
    border-radius: 0;
}


#quality-select {
    background-color: #4B2C2C;
    color: #EFFA00AB;
    border: none;
    padding: 5px;
    font-size: 14px;
    border-radius: 25px;
    border: none;
}
#video-time {
    color: #F302A1;
    font-size: 14px;
    margin-left: 10px;
}

#video-list {
    position: relative;
    top: 20px;
    width: 100%;
    height: auto;
    text-align: center;
    background:  #005455;
}
#video-list::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}
#video-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}
#video-list h3 {
   font-family: "Times New Roman", Times, serif;
   font-size: 20px;
   color: white;
   padding: 10px;
   cursor: pointer;
   
}
#video-list h3:hover {
   color: pink;
}
.Footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    color: #DBC1CF;
    background-color: #17000D;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.Footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.6px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}

.Footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.6px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}


.buttonContraner {
    position: relative;
    left: 0;
    width: 100%;
    height: 60px;
    margin: 40px 0;
}
#showFormButton {
    background-color: #f3fe3b;
    color: #501e01;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}
       

#showFormButton:hover {
    background-color: #501e01;
    color: #f3fe3b;
}
        
 #hideFormButton {
    background-color: red;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 auto;
}
#hideFormButton:hover {
    background-color: black;
}

#uploadForm {
    display: none;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    margin: 0 auto;
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

input[type="text"],
textarea,
input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button[type="button"] {
    background-color: #4CAF50;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button[type="button"]:hover {
    background-color: #45a049;
}

.status {
    color: Pink;
    text-align: center;
}

.status-success {
    color: green;
    text-align: center;
}

.statuss-error {
    color: red;
    text-align: center;
}


.progress-container {
    width: 100%;
    background-color: #f3f3f3;
    margin-top: 10px;
}

.progress-bar {
    width: 0;
    height: 20px;
    background-color: #4caf50;
}


.AboutUs {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  max-width: 800px; 
  font-family: 'Arial', sans-serif; 
  color: #333; 
}

.AboutUs h1 {
  font-size: 2.6em; 
  color: #CD0074; 
  margin-bottom: 20px;
}

.AboutUs h2 {
  font-size: 1.6em; 
  color: #A29E00; 
  margin-bottom: 15px;
}

.AboutUs p {
  font-size: 1.2em; 
  color: #555; 
  margin-bottom: 10px;
  line-height: 1.6; 
}

        
@keyframes zoom-in-zoom-out {
    0% {
        transform: translate(-50%, -50%) scale(1, 1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5, 1.5);
    }
    100% {
        transform: translate(-50%, -50%) scale(1, 1);
    }
}

@media only screen and (min-width: 269px) and (max-width: 631px) {
   
    .video-container-background {
        width: 98.8%;
        padding: 4px; 
    }

    .controls {
        display: flex;
    }

    #progress {
        width: 20px;
        flex: 1;
        margin: 0 6px;
        height: 4px;
    }

    #volume {
        width: 28px;
        height: 4px;
    }


    #quality-select {
        padding: 1px;
        font-size: 8px;
    }
    #video-time {
        font-size: 10px;
        margin-left: 4px;
    }
}