/* body ********************/
        body {
          font-family: 'copperplate', sans-serif;
          color: #CCCCCC;
          font-size: 1.25  em;
          margin: 0 auto;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          background-image: url("../images/page-bg.jpg");
          background-color: #000;
          background-position: center top;
          background-repeat: no-repeat;
          background-size: cover;
          text-align: justify;
          width:  98%;
          max-width: 860px;
          margin: 0 auto;
        }
        @font-face {
            font-family: 'copperplate';
            src: url('copperplate-webfont.woff2') format('woff2'),
                 url('copperplate-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;

        }
        .body-text{
          font-family: times;
              color: #CCCCCC;
              width: 98%;
              margin: 0 auto;
             font-size: 1em;
        }
        h2 {
          font-family: 'copperplate';
          color: #FF8000; 
          font-size: 1.3em;
          text-transform: capitalize;
          font-weight: lighter;
          text-shadow: 0px 3px 5px rgba(0, 0, 0, 1); /* Add drop shadow */
        text-align: left;
        }

/* Header  ********************/
        .header {
          /*background-color: #000;*/
          text-align: center;
          width: 100%;
          min-width: 300px;
          max-width: 860px;
          margin: 0 auto;
          /* display: flex; */
          justify-content: center;
          align-items: center; /* Center items vertically */
          flex-wrap: wrap; /* Allow items to wrap if needed */
        }

/* Logo  ********************/
        .logo {
          max-width: 70%; /* Ensure logo doesn't exceed its container */
          margin: 0 auto;
        margin-top: 2%;
        }

        /* Large screens */
        @media only screen and (min-width: 769px) {
          .logo-small {
            display: none; /* Hide the small logo on large screens */
          }

          .logo {
            max-width: 70%; /* Set max-width for the large logo on large screens */
            order: 1; /* Ensure logo appears first */
            margin-bottom: 1px; /* Add more vertical margin */
          }
        }

        /* Small screens */
        @media only screen and (max-width: 768px) {
          .logo {
            display: none; /* Hide the large logo on small screens */
          }

          .logo-small {
            display: block; /* Display the small logo on small screens */
            max-width: 70%; /* Set max-width for the small logo */
            margin: 0 auto;
          }
        }
        }

/* Navigation  ********************/
        .nav {
          font-family: 'copperplate', sans-serif;
          font-weight: normal;
          text-align: center; /* Center the links horizontally */
          display: flex; /* Use flexbox to align children */
          justify-content: center; /* Center items horizontally */
          flex-wrap: wrap;
          margin-top: 10px; /* Adjust margin as needed */
          order: 2; /* Ensure navigation appears after logo on large screens */
          width: 100%; /* Ensure navigation takes full width */
        }
        nav ul {
          list-style-type: none;
          padding: 0;
        }

        nav ul li {
          display: inline-block; /* Display list items horizontally */
          margin-left: 10px; /* Adjust margin between items */
        }

        nav a {
          color: #aaa;
          background-color: rgba(0, 0, 0, 0.4);
          text-decoration: none;
          border: 1px solid #aaa;
          border-radius: 3px;
          margin: 0px 4px; /* Adjust the margin between links */
          padding: 2px 15px; /* Add padding to each link */
          transition: color 0.3s; /* Smooth transition effect */
          white-space: nowrap;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6); /* Add drop shadow */
        }

        nav a:hover {
          color: #FF8000; /* Corrected hover color */
          background-color: rgba(0, 0, 0, .9);
          box-shadow: 0px 0px 12px rgba(255, 173, 0, 1.0 );
          border: 1px solid #FF8000;
        }

        .nav-link {
          color: #aaa;
          background-color: rgba(0, 0, 0, .9);
          text-decoration: none;
          border: 1px solid #aaa;
          border-radius: 3px;
          margin: 0px 0px;
          padding: 2px 15px;
          transition: color 0.3s;
          white-space: nowrap;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.8);
        }

        .nav-link:hover {
          color: #FF8000;
          background-color: #000000;
        }

        /* Media Query for smaller screens */
        @media only screen and (max-width: 768px) {
          .header {
            flex-direction: column; /* Stack elements vertically */
            align-items: center; /* Center items horizontally */
          }

          nav {
            margin-top: 20px; /* Add more vertical margin */
          }

          nav ul li {
            margin-bottom: 15px; /* Add more vertical margin between navigation items */
          }

          nav a {
            margin: 10px 5px; /* Adjust margin for smaller screens */
          }
        }

/* Link styles  ********************/
        a {
          color: inherit; /* Ensure links inherit the color from their parent */
          text-decoration: none; /* Remove underline */
        }

        /* Active link styles */
        a:active {
          color: #aaa;
          background-color: rgba(0, 0, 0, 0.4);
          text-decoration: none;
          text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
        }

        /* Hover link styles */
        a:hover {
          color: #FF8000;
          text-shadow: 0px 0px 12px rgba(255, 173, 0, 1.0);
        }

/* Pop-up form  ********************/
        #popup-form {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            padding: 20px;
            background-image: url("../images/page-bg.jpg");
            background-color: #000;
            border: 1px solid #C2000B;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        #popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        #popup-form label {
            display: block;
            margin-top: 10px;
        }

        #popup-form input[type="submit"], #popup-form button {
            font-family: 'copperplate', sans-serif;
            font-weight: normal;
            font-size: 1em;
            text-align: center; /* Center the text horizontally */
            display: inline-flex; /* Use flexbox to align children */
            justify-content: center; /* Center items horizontally */
            align-items: center; /* Center items vertically */
            margin-top: 10px; /* Adjust margin as needed */
            padding: 10px 20px; /* Add padding for buttons */
            border: 1px solid #aaa; /* Border similar to nav links */
            border-radius: 3px; /* Rounded corners */
            color: #aaa; /* Text color */
            background-color: rgba(0, 0, 0, 0.4); /* Background color similar to nav links */
            text-decoration: none; /* Remove underline */
            transition: color 0.3s, background-color 0.3s; /* Smooth transition effect */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6); /* Add drop shadow */
            cursor: pointer; /* Pointer cursor for buttons */
        }

        #popup-form input[type="submit"]:hover, #popup-form button:hover {
            color: #FF8000; /* Hover color */
            background-color: rgba(0, 0, 0, .9); /* Hover background color */
            box-shadow: 0px 0px 12px rgba(255, 173, 0, 1.0); /* Hover shadow */
            border: 1px solid #FF8000; /* Hover border color */
        }

        /* Media Query for smaller screens */
        @media only screen and (max-width: 768px) {
            .header {
                flex-direction: column; /* Stack elements vertically */
                align-items: center; /* Center items horizontally */
            }

            nav {
                margin-top: 20px; /* Add more vertical margin */
            }

            nav ul li {
                margin-bottom: 15px; /* Add more vertical margin between navigation items */
            }

            #popup-form input[type="submit"], #popup-form button {
                margin: 10px 5px; /* Adjust margin for smaller screens */
            }
        }


/* Pictures  ********************/
        .img-left {
          float: left; /* Float the image to the left */
          margin: 0px 20px 5px 0px;
          max-width: 55%;
          min-width: 300px;
          border: 1px solid #C2000B;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.8); /* Add drop shadow */
        }

    /* For large screens */
        @media only screen and (min-width: 768px) {
          .img-left {
            float: left; /* Keep the image floated left on large screens */
            margin-right: 20px; /* Add some margin to create space between the image and text */
          }
        }

    /* For small screens */
        @media only screen and (max-width: 767px) {
          .img-left {
            float: none; /* Remove float on small screens */
            margin-right: 0; /* Remove margin */
            display: block; /* Display the image as a block element */
            margin-bottom: 20px; /* Add some margin below the image */
          }
        }

/* Clearfix for the container if needed  ********************/
        .container::after {
          content: "";
          display: table;
          clear: both;
        }

        /* logos */
        .logo-left {
          float: left; /* Float the image to the left */
          margin-right: 20px; 
          max-width: 45%;
          min-width: 300px;
        }

        /* For large screens */
        @media only screen and (min-width: 768px) {
          .logo-left {
            float: left; /* Keep the image floated left on large screens */
            margin-right: 20px; /* Add some margin to create space between the image and text */
          }
        }

        /* For small screens */
        @media only screen and (max-width: 767px) {
          .logo-left {
            float: none; /* Remove float on small screens */
            margin-right: 0 auto; /* Remove margin */
            display: block; /* Display the image as a block element */
            margin-bottom: 20px; /* Add some margin below the image */
          }
        }


/* Event images  ********************/
        .event-image {
            display: inline-block;
            width: 40%;
            min-width: 300px;
            vertical-align: top;
            margin: 0 2%; /* Add some margin between images */
        }

        .event-image img {
            display: block;
            width: 100%;
            height: auto;
            border: 1px solid #C2000B;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.8);
        }

        @media screen and (max-width: 768px) {
            .event-image {
                display: block;
                width: 80%;
                margin: 0 auto 20px; /* Adjust margin as needed */
                padding-bottom: 1%;
            }
        }

/* video stuff  ********************/
        .video-container {
            display: inline-block;
            margin: 0 2% 5px 0%; /* Adjust margin for spacing */
            vertical-align: top; /* Align videos to the top */
            text-align: center; /* Center video title */
            border: 1px solid red; 
        }

        .video-container iframe {
            width: 100%; /* Full width of container */
            height: auto; /* Maintain aspect ratio */
            max-width: 100%;
            max-height: calc(300px * 0.575); /* Adjust for aspect ratio if needed */
        }

        @media (min-width: 768px) {
            .video-container {
                max-width: 320px; /* Set width to 300px on larger screens */
            }

            .video-container iframe {
                width: 100%; /* Ensure iframe remains responsive */
                max-width: 100%;
                max-height: calc(300px * 0.575); /* Adjust aspect ratio if needed */
            }
        }

/* header rows  ********************/
        .custom-hr {
            height: 3px; /* Set the height to 2px */
            background-color: #aaa; /* Set the background color to black */
            border: none; /* Remove any default border */
            margin: 20px auto; /* Adjust the margin as needed */
            width: 100%; /* Set the width to 90% */
            box-shadow: 0px 0px 12px rgba(255, 173, 0, 1.0 );
            border-radius: 3px; /* Round the ends of the line */
        }

        .dates-line {
            width: 80%;
            height: 1px;
            border: none;
            background-color: #FF8000;
            opacity: .5;
            margin-left: 0;
        }



/* Dates text  ********************/
        .listing{
            margin: 2%;
        }


/* Back to top button  ********************/
        #back-to-top-btn {
          display: none; /* Initially hide the button */
          position: fixed;
          bottom: 12%;
          right: 5%;
          z-index: 99;
          border: 1px solid #ff8000;
          outline: none;
          background-color: rgba(0, 0, 0, .7);
          cursor: pointer;
          padding: 10px 15px;
          border-radius: 3px;
          font-family: 'copperplate', times;
          color: #C2000B; 
          font-size: .8em;
          text-transform: uppercase;
          font-weight: 100;
        }

        #back-to-top-btn:hover {
          color: #FF8000;
        background-color: rgba(0, 0, 0, .9);
        }


/* Footer ********************/
        .footer {
          font-family: 'copperplateregular', sans-serif;
            background-color: rgba(0, 0, 0, .5);
            border: 2px solid #aaa;
            position: relative;
            margin: 30px auto 30px; /* Adjusted margin property */
            bottom: 2%;
            width: 80%;
            min-width: 340px; /* Set a maximum width */
            max-width: 860px;
            color: #aaa;
            text-transform: capitalize;
            font-weight: normal;
            padding: 1em;
            text-align: center;
            font-size: .9em;
            text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.8); /* Add drop shadow */
            box-shadow: 0px 0px 12px rgba(255, 173, 0, 1.0 );
        }
         @media only screen and (max-width: 600px) {
              .header, .footer {
                padding: 0.5em;
              }

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

                .footer .footer-nav:hover {
                    color: #FF8000; /* Change this to the color you want on hover */
                }
/* Social links ********************/
        .social-links {
            width: 20%;
            max-width: 80px; /* Limiting the width */
            padding: 0 2% 0 2%;
            filter: drop-shadow(0px 0px 5px rgba(255, 173, 0, 0.8)); /* Applying a drop shadow */
        }