body {
    margin: 0;
    padding: 0;
    background-color: #E5A835;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    position: relative;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

.navbar {
    position: absolute;
    width: 100%;
    max-width: 1024px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin: 0 auto;
}

.logo {
    width: 250px !important;
    height: 250px !important;
    transform: rotate(-20deg);
}

.listen-live-btn {
    display: inline-block;
    width: 271px;
    height: 63px;
}

.listen-live-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
}

.default-img {
    opacity: 1;
}

.hover-img {
    opacity: 0;
}

.listen-live-btn:hover .default-img {
    opacity: 0;
}

.listen-live-btn:hover .hover-img {
    opacity: 1;
}

.splash-image {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('../img/fgr-splash.webp');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.splash-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Adjust the height of the gradient as needed */
    background: linear-gradient(to bottom, #E5A835 0%, rgba(255, 255, 255, 0) 100%);
}

.footer {
    background-color: #f8f9fa;
    padding: 1rem 0;
    width: 100%;
    text-align: center;
    flex-shrink: 0; /* Ensure the footer does not shrink */
    height: 60px;
}

.footer p {
    margin: 0;
    color: #6c757d;
}

.footer p.credit-text {
    font-size: 0.6rem;
}

.wrapper {
    max-width: 1024px;
    width: 100%;
    margin: auto;
    position: relative; /* Ensure the wrapper is positioned relative */
    flex: 1; /* Allow the wrapper to grow and fill the available space */
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .splash-image {
        background-position: bottom left; /* Align the background image to the bottom */
        height: calc(100vh - 60px); /* Adjust height to fill the available space */
    }
    .logo {
        width: 140px !important;
        height: 140px !important;
        position: absolute;
        top: 10px;
        left: 20px;
        z-index: 1;
        transform: rotate(-20deg);
    }    
    .listen-live-btn {
        position: relative; /* Ensure the images are positioned relative to this element */
        display: inline-block;
        width: 271px; /* Adjust width for mobile */
        height: 63px; /* Adjust height for mobile */
        top: 17em;
        left: 2.5em;
    }
    body .speakpipe-button {
        bottom: 80px !important;
        height: 50px !important; 
        line-height: 40px !important;
        z-index: 10 !important;
    }
    body .speakpipe-container {
        z-index: 20 !important; /* Ensure the widget is displayed on top of other elements */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .splash-image {
        background-position: left; 
        height: calc(90vh - 100px); /* Adjust height for tablets */
    }
    .logo {
        width: 420px !important;
        height: 420px !important;
        position: absolute;
        top: 15px;
        left: 30px;
        z-index: 1;
        transform: rotate(-20deg);
    }    
    .listen-live-btn {
        position: relative; /* Ensure the images are positioned relative to this element */
        display: inline-block;
        width: 450px; /* Adjust width for tablets */
        height: 100px; /* Adjust height for tablets */
        top: 3em;
        left: 30em;
    }    
}

@media (min-width: 1025px) {
    .navbar {
        flex-direction: row;
        align-items: center;
    }
    .splash-image {
        background-position: left; /* Adjust background position for larger screens */
        height: calc(100vh - 60px); /* Adjust height for larger screens */
    }
    .logo {
        width: 250px !important;
        height: 250px !important;
        position: absolute;
        top: 20px;
        left: 35px;
        z-index: 1;
        transform: rotate(-20deg);
    }    
    .listen-live-btn {
        position: relative; /* Ensure the images are positioned relative to this element */
        display: inline-block;
        width: 271px; /* Adjust width for larger screens */
        height: 63px; /* Adjust height for larger screens */
        top: 5em;
        left: -3em;
    }    
}