body, td, th {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}
a {
    color: #9A0A3D;
    text-decoration: none;
}
a:hover {
    color: #A92A49;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
h1 {
    font-size: 16px;
    color: #9A0A3D;
}

h3 {
    color: #9A0A3D;
}

.container_vw {
    max-width: 100%;
    margin: 0px;
    padding: 0;
    background-color: #C3BEBB;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
.header_vw {
    width: 100vw;
    text-align: center;
    background-color: #050404;
    padding: 0;
    margin: 0;
}
.header img {
    max-width: 100%;
    width: 100%;
    height: auto;
}
.header-img {
    max-width: 100%;
    width: 960px;
    height: 210.5px;
}
@media (max-width: 600px) {
    .header-img {
        height: 60%;
    }
}

.header_spacer {
    height: 54px;
    background: linear-gradient(
        #AA2B49 0%,
        #AA2B49 50%,
        #9A0A3D 50%,
        #9A0A3D 100%
    );
}

/*NAVIGATION*/

 /* Add a black background color to the top navigation */
 .topnav {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(
        #AA2B49 0%,
        #AA2B49 50%,
        #9A0A3D 50%,
        #9A0A3D 100%
    );
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 960px;
    max-width: 100%;
    height: 60px;
}
@media (max-width: 760px) {
    .topnav {
        display: block;
        background-color: #9A0A3D;
        overflow: visible;
    }
}
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #AA2B49;
    color: black;
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    color: #fcfcfc !important;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  } 

   /* When the screen is less than 760 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 760px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 760px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      background-color: #9A0A3D;
    }
  } 

/*CONTENT*/

.content {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    width: 960px;
    background-color: #C3BEBB;
    padding: 0;
    justify-content: center;
    margin: 0 auto;
    top: -60px;
    position: relative;
}
.content img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.slideshow {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    /*width: 960px;  Match the width of .page-content */
    margin: 0 auto; /* Center the slideshow */
}

.front-slider {
    width: 100%; /* Full width of the parent .slideshow */
    margin: 0;
    padding: 0;
}

.page-content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 100%;
    width: 960px;
    padding: 30px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    gap: 20px;
}

.outer-container {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Gallery */
.container-xxlx {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
   /* width: 960px; /* Match the width of .page-content_gallery */
    margin: -60px auto; /* Center the gallery */
    gap: 20px;
    padding: 0px 20px 120px 20px;
    background-color: #C3BEBB;
}

.page-content_gallery {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 100%;
    width: 960px;
    padding: 45px;
    background-color: #fff;
    
}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    width: 960px; /* Match the width of .page-content_gallery */
    margin: 0 auto; /* Center the gallery */
    gap: 20px;
    padding: 20px;
    background-color: #fff;
}

.container-xxl {
    background-color: #C3BEBB; /* Added background color */
}

.left-column, .right-column {
    padding: 0px;
}
.left-column {
    flex: 60%;
}

.left-column > a:nth-child(3) > img:nth-child(1) {
    float: right;
    max-width: 100%;
    width: 100px;
    height: auto;

}

.left-column > img:nth-child(1) {
    max-width: 100%;
    width: 361px;
    height: auto;
}
.about_us_img {
    max-width: 100%;
    width: 249px;
    height: auto;
}

.right-column {
    flex: 35%;
    padding-left: 20px;
}

.right-column > img:nth-child(1){
    max-width: 100%;
    width: 324px;
    height: auto;
    padding-left: 0;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Venue Hire Table */
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    max-width: 100%;
    width: 900px;
  }

  .page-content > div:nth-child(2) > table:nth-child(1) > caption:nth-child(1) {
    background-color: #9A0A3D;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
  }

  .page-content > div:nth-child(2) > table:nth-child(1) > thead:nth-child(2) > tr:nth-child(1) > th:nth-child(1) {
    background-color: #DDDDDD;
    color: #9A0A3D;
    font-size: 16px;
    font-weight: bold;
  }

  .page-content > div:nth-child(2) > table:nth-child(1) > thead:nth-child(2) > tr:nth-child(1) > th:nth-child(2) {
    background-color: #DDDDDD;
    color: #9A0A3D;
    font-size: 16px;
    font-weight: bold;
  }
  
  td, th {
    border: 5px double #C3BEBB;
    text-align: center;
    padding: 8px;
    max-width: 100%;
    width: 960px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }

/* Responsive Table */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
}

.responsive-table td, .responsive-table th {
    border: 1px solid #fff;
    padding: 8px;
}

.responsive-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.responsive-table tr:hover {
    background-color: #ddd;
}

.responsive-table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

@media screen and (max-width: 600px) {
    .responsive-table td, .responsive-table th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .responsive-table tr {
        display: block;
        margin-bottom: 10px;
    }

    .responsive-table th {
        background-color: #9A0A3D;
        color: white;
    }
}

/* Contact Form */
label {
    display: block;
    margin: 0.5rem 0;
}

.form-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

form {
    margin: 0 auto;
    width: 100%;
    padding: 2em;
    box-sizing: border-box;
}

fieldset {
    border: none;
    padding-top: 2rem 0;
    border-bottom: 1px solid #3b3b4f;   
}

fieldset:last-of-type {
    border-bottom: none;
}

input, textarea, select {
    width: 100%;
    margin: 10px 0 0 0;
    min-height: 2em;
}

.inline {
    width: unset;
    margin: 0 0.5em 0 0.5em;
    vertical-align: middle;
}

a {
    color: #9A0A3D;
    text-decoration: none;
}

input, textarea {
    background-color: #F0F0F0;
    border: 1px solid #C3BEBB;
    color: #9A0A3D;
    border-radius: 5px;
}

input[type="submit"] {
    display: block;
    width: 60%;
    min-width: 300px;
    margin: 1em auto 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #F0F0F0;
    border: 2px solid #C3BEBB;
    border-radius: 5px;
  }

  input[type="submit"]:hover {
    background-color: #C3BEBB;
    color: #9A0A3D;
}

input[type="submit"]:active {
    background-color: #A92A49;
    color: #fff;
}

input[type="file"] {
    padding: 1px 2px;
}

.legend {
    padding-top: 8px;
}

@media (max-width: 600px) {
    .form-container {
        padding: 0 1em;
    }

    form {
        padding: 1em;
    }
}

/*FOOTER*/

.footer {
    display: flex;
    justify-content: space-between; /* Distributes space evenly between the items */
    align-items: center; /* Vertically aligns items in the center */
    padding: 10px;
    background-color: #000; /* Or any background color you prefer */
}

.footer-left {
    text-align: left; /* Aligns the text to the left */
}

.footer-right {
    text-align: right; /* Aligns the Facebook icon to the right */
}

.footer-mobile,
.footer-email,
.footer-web {
    margin: 5px 0; /* Adds some spacing between the text elements */
    color:#F0F0F0
}

.footer img {
    max-width: 100%;
    width: 36px;
    height: auto;
}

.footer a img {
    display: inline-block; /* Allows the image to be aligned */
    vertical-align: middle; /* Vertically aligns the image */
}

.witpoort-link {
    color: #9A0A3D;
    text-decoration: none;
}


/*
.footer {
    text-align: center;
    background-color: #000;
    padding: 20px;
}
.footer img {
    width: 100%;
    height: auto;
}

.footer > a:nth-child(1) > img:nth-child(1) {
    max-width: 100%;
    width: 30px;
    height: auto;
}

.footer-mobile {
    color: #fff;
    float: left;
}

.footer-email{
    color: #fff;
    float: left;
}

.footer-web{
    color: #fff;
    float: left;
}
*/
@media (max-width: 768px) {
    .navbar, .content {
        flex-direction: row;
    }
    .left-column, .right-column {
        flex: 100%;
    }
}
@media (max-width: 800px) {
    body {
        background-size: contain; /* or use 'cover' depending on your preference */
    }
}