html, body {
    overflow: hidden; 
    height: 100%;
}

.scrollable-container {
    height: 100vh; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
}

body {
    background-image: url('../../Gelredome.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 50%;
}

.hidden {
   display: none;
}

.thumbnails {
height: auto;
width: 200px;
}

.nav a {
color:#ffffff !important;
}
.navbar-header a {
color:#ffffff !important;
}

.navbar-nav > li > a {
border: solid black 1px;
margin: 2px;
}

.navbar-nav > li:hover {
background-color: #000;
}

.words {
   margin: 0.2rem;
}

h1, h2, h3, h4, h5, h6 {
font-family: sans-serif;
}

h1 {
line-height:30px;
text-transform:uppercase;
}
h3 {
line-height:30px;
padding-bottom:20px;
}
h4 {
line-height:40px;
padding-bottom:40px;
}

p {
font-weight:300;
line-height:30px;
padding-bottom:20px;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

.space-pad {
padding-bottom:50px;
}

#listings li {
    padding: 0.8rem;
}

.for-full-back {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}

section {
padding-top:30px; 
}

.color-white {
background-color:#fff!important;
}
.color-dark {
background-color:#696969!important;
}

.color-light {
background-color:#B2BAC2!important;
}
.main-color-red {
color: #DF0000;
}

.head-main {
font-size:6rem !important;
font-weight:900!important;
color:#fff!important;
padding:200px 20px 20px 20px;
}
.head-sub-main {
font-size:3rem !important;
font-weight:600!important;
color:#fff!important;
padding:5px 20px 30px 20px;
}
.head-last {
padding:5px 20px 200px 20px;
}

nav {
position: absolute;
width: 100%;
background: #fff;
z-index:99;
}

.navbar {
    background-color: #DF0000;
    border-color: #D30707;
}

.navbar .nav-link {
    color: #ffffff !important;
    border: solid black 1px;
    margin: 2px;
    padding: 0.5rem 1rem;
}

.navbar .nav-item:hover {
    background-color: #000;
}

.about-div {
    width: 100%;
    background-color: rgba(209, 209, 209, 0.24);
    box-shadow: none;
    border: 0;
    padding: 50px 20px 30px 20px;
    margin-bottom: 20px;
    height: 100%;
}

#Parallax-one, #Parallax-two {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.for-parallax-one {
color:#fff;
padding:40px 20px 40px 20px;
font-size:25px;
}

.text {
color: white;
}

.showcase {
    height: 100%;
}

.showcase-head {
    padding: 0.2rem;
    font-size: x-large;
    text-decoration: underline;
}

#border-row {
    border-top: 1px black solid;
    padding-top: 1.5rem;
}

#Parallax-two {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("");
padding: 0;
background-position: center 0;
background-size: cover;
background-attachment: fixed;
min-height:300px;
}
.for-parallax-two {
color:#fff;
padding:40px 20px 40px 20px;
font-size:25px;
}

#social-icon a {
color:#616161!important;
margin-right:10px;
}
.contact-cls {
font-size:20px;
line-height:40px;
}

#footer {
background-color:#000;
color:#fff;
padding:20px 50px 20px 50px;
text-align:right;
}

.audio-player {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem auto;
    max-width: 600px;
    width: 95%;
}

.audio-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.player-buttons {
    display: flex;
    gap: 0.5rem;
    min-width: fit-content;
}

.progress-group {
    display: flex;
    flex: 1;
    min-width: 200px;
    gap: 0.5rem;
    align-items: center;
}

.progress-container {
    flex-grow: 1;
}

.progress-container input[type="range"],
.volume-controls input[type="range"] {
    width: 100%;
    height: 5px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    cursor: pointer;
}

.volume-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 100px;
    max-width: 120px;
}

.time-display {
    color: white;
    font-family: monospace;
    min-width: 85px;
    text-align: center;
}

.btn {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    border: solid black 1px;
}

#back-to-top {
    position: fixed;
    bottom: 50px;
    right: 50px;
    display: none;
    border-radius: 5px;
    z-index: 99;
    opacity: 0.8;
    transition: all 0.3s ease;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
}

#back-to-top:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.container {
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
}

@media (max-width: 500px) {
   .contact-cls {
       font-size: 14px;
   }
   #footer {
      font-size: 10px;
   }
}

@media (max-width: 355px) {
   #footer {
      font-size: 8px;
   }
}

@media (max-width: 768px) {
    .head-main {
        padding: 50px; 
        font-size: 4rem !important;
        margin-top: 2rem;
    }
    #footer{
        margin-bottom: 3rem !important;
    }
    .head-last {
       padding:50px;
       }
       .navbar-nav {
         margin-top: 1rem;
       }
       .showcase {
        margin-bottom: 1rem;
    }
    #back-to-top {
        bottom: 50px;
        right: 15px;
        padding: 10px;
    }
    .audio-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .player-buttons {
        justify-content: center;
    }
    
    .progress-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .time-display {
        text-align: center;
    }
    
    .volume-controls {
        max-width: none;
        margin-top: 0.5rem;
    }
 }

@media (min-width: 768px) {
    .row.space-pad {
        display: flex;
        flex-wrap: wrap;
    }
    
    .row.space-pad > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    
    .about-div {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 300px; 
    }
    
    .about-div p {
        flex-grow: 1;
        display: flex;
        align-items: center;
    }
}