/* styles.css */
        body {
                margin: 0;
                font-family: Arial, sans-serif;
                background-color: #121212;
                color: #FFFFFF;
                display: flex;
                min-height: 100vh; /* Ensure the sidebar extends to full height */
                flex-direction: row; /* Sidebar and content are in a row */
            }

            h1 {
                color: #ff8400;
                opacity: .8;
            }

            .container {
                display: flex;
                flex-wrap: wrap;
                min-height: 100vh;
                max-width: 1080px;
                width: 100%; /* Ensure it scales for smaller screens */
                margin: auto; /* Center the container */
            }

            /* Sidebar */
            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                width: 200px;
                background-color: #1e1e1e;
                padding: 10px;
                height: 100vh;
                overflow-y: auto; /* Enable scrolling for the sidebar */
            }

            .sidebar .logo {
                display: block;
                text-align: center;
                margin-bottom: 20px;
            }

            .sidebar .logo img {
                max-width: 80%;
                height: auto;
                display: block;
                margin: 0 auto;
            }

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

            .sidebar ul li {
                margin-bottom: 20px;
            }

            .sidebar ul li a {
                color: #fff;
                text-decoration: none;
                font-size: 20px;
                display: block;
                text-align: center;
            }

            /* Main content */
            .main-content {
                margin-left: 200px; /* Adjusted margin to reduce spacing */
                padding: 20px;
                flex-grow: 1;
            }

            @media (max-width: 700px) {
                .sidebar {
                    position: static;
                    width: 100%;
                    max-width: 200px; /* Set max width to prevent sidebar from becoming too wide on larger screens */
                    height: auto;
                }

                .main-content {
                    margin-left: 0; /* Reset margin for main content */
                }
            }

            /* Header Row */
            hr {
                width: 80%; 
                border: none;
                border-top: 2px solid gold; 
                margin: 30px auto; 
            }

            /* social links */
            .sidebar ul li a img {
                max-width: 40px; /* Set the maximum width for the social media icon */
                margin-right: 10px;
            }

            .sidebar ul li a:hover {
                color: #ffa500;
            }

            .content {
                flex: 3 1 600px;
                padding: 20px;
            }

            .content section {
                margin-bottom: 40px;
            }

            @media (max-width: 768px) {
                .sidebar {
                    flex: 1 1 100%;
                    max-width: 100%; /* Ensure the sidebar takes full width on small screens */
                }
                .content {
                    flex: 1 1 100%;
                }
                .sidebar .logo img {
                    max-width: 200px; /* Adjust for smaller screens if needed */
                }
            }

/* Top image carousel */
            .slider {
              width: 80%;
              overflow: hidden;
              position: relative;
              margin: 0 auto; /* Center the slider horizontally */
            }

            .slider ul {
              display: flex;
              padding: 0;
              margin: 0;
              width: 100%;
              transition: transform 0.5s ease-in-out;
              list-style: none;
            }

            .slider li {
              min-width: 100%;
              box-sizing: border-box;
            }

            .slider img {
              width: 98%;
              display: block;
            margin: 0 auto;
            }

            /* Media query for smaller screens */
            @media (max-width: 700px) {
              .slider {
                width: 100%; /* Full width on smaller screens */
                margin-left: 0; /* Remove margin to prevent overlap */
              }

              .sidebar {
                position: relative; /* Sidebar should be in the normal flow of the document */
                width: 100%; /* Full width on smaller screens */
              }

              .content {
                margin-left: 0; /* Remove margin to prevent overlap */
              }
            } 

/* event pic */
        .events-container {
            display: flex;
            flex-wrap: wrap; /* allows wrapping on smaller screens */
            justify-content: center;
            gap: 10px; /* spacing between images */
        }

        /* Each item */
        .event-pics {
            flex: 1 1 300px;
            max-width: 320px;
            text-align: center;
            padding: 5px 0;
        }

        /* Images */
        .event-pics img {
            width: 100%;   /* fill the container */
            height: auto;
            border: solid 1px;
        }


/* tour text */

        .tour-text{
            font-family: Arial light, sans-serif;
            padding-left: 5%;
            color: #FFFFFF;
            opacity: .9;
        }
        .tour-text .date {
            color: #ff8400;
            opacity: .6;
        }

        .tour-text .listing {
            margin-bottom: 10px; /* Adds space between listings */
        }

        .more-dates {
            margin-top: 10px;
            color: #ff8400;
        }
/* video stuff */
        .video-container {
           display: block;
            margin: 0 auto; 
            min-width: 240px;
            display: inline-block;
            padding-left:5%;
        }

        .video-container iframe {
            width: 100%;
            height: auto;
            max-width: 100%;
            max-height: calc(300px * 0.575); /* 0.5625 - 16:9 aspect ratio 
            max-height: calc(300px * 0.75); for a 4:3 aspect ratio */
        }
        .content {
            width: 90%;
            height: 1000px;
        }
        .content iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

/* Ticker Container */
    .ticker-container {
        width: 100%;
        height: auto; /* Allow the height to adjust based on content */
        overflow: hidden; /* Hide overflowing content */
        padding: 10px 0; /* Optional padding */
        display: flex;
        align-items: center; /* Center the content vertically */
        justify-content: center; /* Center the content horizontally */
        box-sizing: border-box; /* Ensure padding is included in height/width calculations */
    }

    /* Ticker */
    .ticker {
        display: flex;
        flex-wrap: wrap; /* Allow wrapping to new lines */
        align-items: center; /* Center images vertically */
        justify-content: center; /* Center images horizontally */
    }

    /* Slide */
    .slide {
        display: flex;
        justify-content: center; /* Center images within the slide */
        padding: 1%; /* Adjust padding as needed */
    }

    /* Image */
    .ticker-img {
        min-width: 120px;
        max-width: 120px;
        height: auto;
    }

/* back to tpp */
          .back-to-top {
            position: fixed;
            bottom: 60px;
            right: 30px;
            background-color: rgba(7, 82, 90, .2);
            border: 1px solid #CEEDEF;
            color: #CEEDEF;
            padding: 5px 10px;
            border-radius: 5px;
            text-decoration: none;
            opacity: 0; /* Initially invisible */
            transition: opacity 0.3s ease-in-out;
            z-index: 9999;
            }

        .back-to-top:hover {
            background-color: #07525A;
            border: 1px solid #CEEDEF;
            color: #EAD257;
            font-family: 'Poppins', sans-serif;
            font-style: normal;
            font-size: .8em;
            font-weight: 600; /* font weight */
            }

        /* Show the button when the user scrolls down */
            .back-to-top.show {
            opacity: .9;
            font-family: 'Poppins', sans-serif;
            font-style: normal;
            font-size: .8em;
            font-weight: 600; /* font weight */
            }

/* bio text */
            .bio-text{
                padding-left: 3%;
                padding-right: 3%;
                padding-bottom: 3%;
                text-align: justify;
                opacity: 1;
                line-height: 20pt;
            }

/* ticker styles */
        .ticker {
            display: flex;
            align-items: center;
        }
        .ticker img {
            max-width: auto;
            max-height: 90px;
            display: block;
            margin: 8px;
        }
        .ticker img.active {
            display: block;
        }
        .button {
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            margin: 0 20px;
        }
        .button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
/* fady text */
	.fader {
	    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
	    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
	    height:  400px;
	    width: 100%;
	    overflow-y: scroll;
        padding-bottom: 15%;
	}

    .fader-video {
	    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
	    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
	    height:  500px;
	    width: 100%;
	    overflow-y: scroll;
        padding-bottom: 15%;
	}

/* footer stuff */
        .footer {
            position: relative;
            width: 90%;
            margin: auto;
            margin-top: auto;
            bottom: 12px; /* Adjusted to include the additional 10px */
            background-color: rgba(0, 0, 0, 0.6);
            color: #ff8400;
            border: 2px solid #483D8B;
            padding: 1em;
            text-align: center;
            font-size: .9em;
            box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
        }


    @media only screen and (max-width: 600px) {
      .header, .footer {
        padding: 0.5em;
      }

      .main {
        padding: 0.5em;
      }
    }
    .footer .footer-nav {
            text-decoration: none;
            color: #ff8400;
        }

        .footer .footer-nav:hover {
            color: #ffffff; /* Change this to the color you want on hover */
        }