/* body and stuff */
        body {
          font-family: 'hessianregular', times;
          color: #CCCCCC;
          font-size: 1.2em;
          margin: 0 auto;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          background-image: url("../images/bg-01.jpg");
          background-color: #000;
          background-size: cover;
          background-position: center top;
          background-repeat: no-repeat;
          /*text-align: justify; */
          width: 80%;
          max-width: 860px;
          margin: 0 auto;
        }

        @font-face {
          font-family: 'hessianregular';
          src: url('../fonts/hessian-webfont.woff2') format('woff2'),
               url('../fonts/hessian-webfont.woff') format('woff');
          font-weight: normal;
          font-style: normal;
        }
        .body-text{
              font-family: 'Times New Roman', Times, serif;
              color: #CCCCCC;
              width: 80%;
              margin: 0 auto;
        }
        h2 {
          font-family: 'hessianregular', times;
          color: #FF8000; 
          font-size: 1.3em;
          text-transform: capitalize;
          font-weight: lighter;
          text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.8); /* Add drop shadow */
        }
        .small-text{
          font-family: times;
          color: #CCCCCC; 
          font-size: .9em;
          text-transform: capitalize;
          font-weight: lighter;
        padding-bottom: 5px;
        }
        .url-link {
          text-decoration: none;
          color: #CCC;
          transition: color 0.3s; /* Smooth transition effect for color change */
        }

        .url-link:hover {
          color: #FFFF00; /* Color change on hover */
        }


/* Header */
        .header {
          background-color: rgba(0, 0, 0, .2);
          border: 2px solid #C2000B;
          padding: 3%;
          text-align: center;
          width: 80%;
          min-width: 300px;
          max-width: 860px; 
          margin: 3% auto 3% auto;
          display: flex; 
          justify-content: space-between; 
          align-items: center;
          box-shadow: 0px 0px 12px rgba(255, 173, 0, 1.0 );
        }
/* header row */
        .custom-hr {
            height: 12px; /* Set the height of the horizontal rule */
            background-image: url("../images/hr-01.png"); /* Specify the path to your image */
            background-repeat: no-repeat; /* Ensure the image is not repeated */
            background-size: 100% 100%; /* Adjust the size of the image to fit the <hr> */
            border: none; /* Remove the default border */
            margin: 20px auto; /* Adjust the margin as needed */
            width: 90%;
        }

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

          .logo-small {
            display: block; /* Display the small logo on small screens */
            max-width: 280px; /* Set max-width for the small logo */
          }
        }

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

          .logo {
            max-width: 100%; /* Set max-width for the large logo on large screens */
          }
        }

/* Navigation */
       .nav {
          font-family: 'hessianregular';
          text-align: center; /* Center the links horizontally */
          display: flex;
          flex-wrap: wrap;
        }

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

        nav ul li {
          display: inline-block; /* Display list items horizontally */
        }

        nav a {
          color: #FF8000;
          background-color: #910000;
          text-decoration: none;
          font-size: 1em;
          font-weight: 500;
          border: 1px solid #ff8000;
          border-radius: 0px;
          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.8); /* Add drop shadow */       
        }

        nav a:hover {
          color: #FF8000; /* Corrected hover color */
          background-color: #000000;
        }

        .nav-link {
          color: #FF8000;
          background-color: #910000;
          text-decoration: none;
          border: 1px solid #ff8000;
          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 */
          }

          .logo {
            order: 1; /* Move logo above navigation */
            margin-bottom: 20px; /* Add more vertical margin */
          }

          nav {
            order: 2; /* Move navigation below logo */
            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 */
          }
        }

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

          .logo {
            order: 1; /* Move logo above navigation */
            margin-bottom: 20px; /* Add more vertical margin */
          }

          nav {
            order: 2; /* Move navigation below logo */
            margin-top: 15px; /* Add more vertical margin */
          }

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

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

/* Pictures */
      /* left */
        .img-left {
          float: left; /* Float the image to the left */
          margin-right: 20px;
          max-width: 50%;
          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 */
            }
        }
      /* right */     
        .img-right {
          float: right; /* Float the image to the left */
          margin-right: 20px;
          max-width: 50%;
          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-right {
            float: right; /* 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-right {
            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 */
          }
        }  

/* right transparent */     
       .img-rt {
          float: right; /* Float the image to the left */
          margin-right: 20px;max-width: 40%;
          min-width: 300px;
          text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.8); /* Add drop shadow */
        }

    /* For large screens */
        @media only screen and (min-width: 768px) {
          .img-rt {
            float: right; /* 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-rt {
            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 */
          }
        }

/* Centered Image */
        .img-center {
          display: block; /* Display the image as a block element */
          margin: 0 auto; /* Center the image horizontally */
          width: 80%; /* Set the width to 80% */
          max-width: 80%;
          border: 1px solid #C2000B; /* Add border */
          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-center {
            display: block; /* Ensure the image remains centered on large screens */
            margin: 0 auto; /* Center the image horizontally */
          }
        }

    /* For small screens */
        @media only screen and (max-width: 767px) {
          .img-center {
            display: block; /* Ensure the image remains centered on small screens */
            margin: 0 auto; /* Center the image horizontally */
            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%;
            }
        }

/* Custom Item List */
        .custom-list {
          list-style: none; /* Remove default bullet points */
          padding: 0 0 0 2%;
          margin: 0;
          color: rgba(255, 255, 255, .7);
          text-transform: capitalize;
          font-size: .95em;
        
        }
        .custom-list li {
          position: relative;
          padding-left: 20px; /* Adjust padding for the icon */
          margin-bottom: 5px; /* Add some space between items */
          font-weight: 200;
        }
        .custom-list li::before {
          content: '\21A0'; /* Unicode for a bullet point or use a custom icon */
          color: rgba(255, 255, 255, .7); /* Icon color */
          position: absolute;
          left: 5px;
          font-size: .6em; /* Adjust icon size */
        }

/* video container */
        .video-container {
            position: relative;
            width: 90%;
            margin: 0 auto; /* Center align the container */
            background-color: rgba(0, 0, 0, .6);
            border: 1px solid #C2000B;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.9); /* Add drop shadow */
            padding: 20px;  
        }

        .video-container::before {
            content: "";
            display: block;
            padding-top: 56.25%; /* 16:9 aspect ratio */
        }

        .video-container iframe {
            position: absolute;
            top: 10px; /* 10px margins from top */
            left: 10px; /* 10px margins from left */
            width: calc(100% - 30px); /* Subtract margins from width */
            height: calc(100% - 30px); /* Subtract margins from height */
        }

/* reel container */
        .reel-container {
            position: relative;
            width: 267px;
            height: 476px;
            margin: 0 auto; /* Center align the container */
            background-color: rgba(0, 0, 0, .6);
            border: 1px solid #C2000B;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.9); /* Add drop shadow */
            padding: 20px;
            box-sizing: border-box; /* Ensure padding and border are included in the width and height */
        }

        /* Ensure the aspect ratio is maintained */
        .reel-container::before {
            content: "";
            display: block;
            padding-top: 177.9%; /* Maintain aspect ratio for portrait (476/267 * 100) */
        }

        /* Style the iframe to fit within the container */
        .reel-container iframe {
            position: absolute;
            top: 10px; /* 10px margins from top */
            left: 10px; /* 10px margins from left */
            width: calc(100% - 20px); /* Subtract margins from width */
            height: calc(100% - 20px); /* Subtract margins from height */
        }

/* Form elements */
        .form-block {
            font-family: 'hessianregular', times;
            display: inline-block;
            margin: 2%; /* Adjust margin to add space between elements */
        }

            .input-text,
            .text-area,
            .captcha-input {
              background-color: #f9f9f9; /* Light grey background color */
              color: #333; /* Dark text color */
              padding: 10px; /* Add padding inside the inputs */
              border: 1px solid #ccc; /* Light grey border */
              border-radius: 4px; /* Rounded corners */
              width: calc(100% - 22px); /* Full width minus padding and border */
            }

            .input-text:focus,
            .text-area:focus,
            .captcha-input:focus {
              border-color: #ff8000; /* Orange border on focus */
              outline: none; /* Remove default outline */
            }

            .text-area {
              display: block; /* Ensure textarea is block to make it always go below previous inputs */
              width: 80%; /* Adjust the width as needed */
            }

            .captcha-input {
              width: 4ch; /* Width for 4 characters */
            }

    /* Submit button styling */
        .input-btn {
            font-family: times;
            color: #FF8000;;
            font-size: 1em;
            background-color: #910000;
            text-decoration: none;
            border: 1px solid #ff8000;
            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.8); /* Add drop shadow */ 
            transition: background-color 0.3s; /* Smooth background color transition */
            }

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


/* 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: 'hessianregular', 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: 'hessianregular', times;
            background-color: rgba(0, 0, 0, .5);
            border: 2px solid #C2000B;
            position: relative;
            margin: 30px auto 30px; /* Adjusted margin property */
            bottom: 2%;
            width: 80%;
            min-width: 300px; /* Set a maximum width */
            max-width: 860px;
            color: #5b5b5b;
            font-size: .8em;
            text-transform: capitalize;
            font-weight: lighter;
            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: #5b5b5b;
                }

                .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 */
        }