body {
  font-family: "Roboto", sans-serif;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #2b0f03;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  /* width: 100%; */
}
.flex-container-side {
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
}

.flex-container-secondary {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.flex-container-stretch {
  display: flex;
  flex-wrap: nowrap;
  justify-content: stretch;
  width: 100%;
}
#secondary-banner .flex-container {
  align-items: center;
}

.banner-left {
  background-color: #ff6100;
  padding: 5px 20px 0px 10px;
}

.banner-right {
  background-color: #ff6100;
  padding: 20px 20px 0px 10px;
}

#banner-top {
  border-bottom: #e4ecef 12px solid;
}

#banner-top h1 {
  border-left: #ff6100 6px solid;
  border-right: #ff6100 6px solid;
  text-align: center;
  padding: 15px 15px 0px 15px;
}

#secondary-banner {
  margin-top: 20px;
}

#candidate-name {
  font-size: 3.8em;
  font-weight: bold;
  padding: 0px 5px 0px 30px;
  margin: 0px;
  margin-bottom: 0px;
}

#candidate-party {
  font-size: 2em;
  font-weight: bold;
  padding: 0px 5px 0px 30px;
  margin: 0px;
  margin-bottom: 35px;
}

#candidate-constituency {
  font-size: 1.5em;
  font-weight: normal;
  padding: 5px 5px 0px 60px;
  margin: -30px;
  border: #ff7800 3px solid;
  border-left: none;
  border-right: none;
  margin-bottom: 25px;
}

#candidate-slogan {
  font-size: 1.5em;
  font-weight: bold;
  padding: 5px 5px 0px 30px;
  margin: 0px;
  color: #ff8314;
}

#left-map {
  width: 250px;
  height: 250px;
  padding: 0px 0px 0px 0px;
}

#right-map {
  width: 250px;
  height: 250px;
  padding: 0px 0px 0px 0px;
}

#left-map > img {
  display: block;
  height: 100%;
  width: auto;
}

#constituency-map {
  width: 280px;
  height: 280px;
  padding: 0px 0px 0px 0px;
}

#constituency-map > img {
  display: block;
  height: 100%;
  width: auto;
}

#right-map > img {
  display: block;
  height: 100%;
  width: auto;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  padding: 10px 20px;
  position: relative;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #2b0f03;
  padding: 5px;
}

nav ul li a:hover {
  color: #ff6100;
  border: #ff6100 1px solid;
}

/* Dropdown styles for navigation */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
nav ul li {
    position: relative;
}
.dropdown .dropbtn {
    cursor: pointer;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 0;
    top: 100%;
}
.dropdown-content li {
    display: block;
    text-align: left;
    padding: 0;
}
.dropdown-content li a {
    display: block;
    padding: 10px 20px;
    color: #2b0f03;
    text-decoration: none;
    background: #fff;
}
.dropdown-content li a:hover {
    background: #ff6100;
    color: #fff;
}
.dropdown:hover .dropdown-content {
    display: block;
}

.main-content-container {
  display: flex;
  justify-content: space-evenly;
  padding: 0px 100px;
  column-gap: 70px;
}

#right-content-top #video {
  height: auto;
  width: auto;
}

#video img {
  height: auto;
  width: 100%;
}

.main-content-container #right-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

div.main-content-heading {
  display: flex;
  justify-content: center;
}

.bordered {
  position: relative;
  border: 3px solid #ff6100;
  padding: 20px;
  /* margin: 10px; */
}

h2.bordered {
  border: #ff7800 3px solid;
  border-left: none;
  border-right: none;
}

.bordered img.decorator-top {
  position: absolute;
  top: -20px; /* Position the image so the border passes through its center */
  left: 20px; /* Adjust this value to control the horizontal position */
  /* transform: translateY(50%); Center the border through the image */
  z-index: 1; /* Ensure the image appears above the border */
  height: 30px !important; /* Maintain aspect ratio or adjust as needed */
  width: auto !important; /* Set the size of the image (adjust as needed) */
}

.bordered img.decorator-side {
  position: absolute;
  bottom: 25px; /* Position the image so the border passes through its center */
  right: -20px; /* Adjust this value to control the horizontal position */
  /* transform: translateY(50%); Center the border through the image */
  z-index: 1; /* Ensure the image appears above the border */
  height: auto !important; /* Maintain aspect ratio or adjust as needed */
  width: 30px !important; /* Set the size of the image (adjust as needed) */
}

p.bordered {
  padding: 2px 20px;
  border-left: #ff6100 3px solid;
  border-top: none;
  border-right: none;
  border-bottom: none;
}

p.bordered span {
  display: block; /* Forces each span to start on a new line */
  padding: 3px 0; /* Adds small padding between each line */
}

ul.bordered {
  padding: 2px 5px 2px 42px;
  border-left: #ff6100 3px solid;
  border-top: none;
  border-right: none;
  border-bottom: none;
}

ul.bordered li {
  padding: 2px 0; /* Adds small padding between each line */
}

.fancy-text {
  font-family: "Dancing Script", cursive;
  font-size: 28px;
  letter-spacing: 1px;
}

footer {
  background-color: #ff6100;
  text-align: center;
  padding: 10px;
}

footer div.flex-container {
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 25px;
  row-gap: 5px;
  font-weight: bold;
  align-items: center;
}

footer div.flex-container div {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
}

/* Gallery container */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Gallery items */
.gallery-item {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Image styles */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease-in-out;
}

/* Hover effects */
.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.main-content-container-bio {
  display: flex;
  justify-content: center;
  padding: 0px 5px;
  column-gap: 10px;
}

#bio-image {
  height: 400px;
  width: auto;
}

#bio-image img {
  height: 100%;
  width: auto;
}

.main-content-container-vision {
  display: flex;
  align-items: center;
  justify-content:space-around;
  padding: 0px 300px;
  column-gap: 50px;
}

div.vision-banner {
  width: 200px;
  height:auto;
}

div.vision-banner img {
  height: auto;
  width: 100%;
}

/* Endorsement container */
.endorsement-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Endorsement item */
.endorsement-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid rgba(255, 165, 0, 0.5); /* Slight orange border */
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(255, 165, 0, 0.3); /* Slight orange shadow */
  transition: box-shadow 0.3s ease-in-out;
}

.endorsement-item:hover {
  box-shadow: 0 8px 20px rgba(255, 165, 0, 0.5); /* Slight orange shadow on hover */
}

/* Endorsement image */
.endorsement-item img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  object-fit: cover;
}

/* Endorsement text */
.endorsement-item .endorsement-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.endorsement-item .endorsement-text p {
  margin: 0;
  line-height: 1.5;
}

/* Card container styles */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card styles */
.card {
  background-color: #fff;
  border: 1px solid rgba(255, 165, 0, 0.5); /* Slight orange border */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(255, 165, 0, 0.3); /* Slight orange shadow */
  padding: 20px;
  transition: box-shadow 0.3s ease-in-out;
}

.card:hover {
  box-shadow: 0 8px 20px rgba(255, 165, 0, 0.5); /* Slight orange shadow on hover */
}

.card h2 {
  margin-top: 0;
  color: #ff6100;
}

.card ul {
  padding-left: 20px;
}

.card ul li {
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Constrain main video size */
.main-video {
    max-width: 100%;
    width: 480px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* Center and scale the Caribtix image responsively */
#carib-tix {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Remove vertical centering */
    min-height: unset; /* Remove large min-height */
    margin-top: 1.5rem; /* Add a small top margin for spacing */
}
#carib-tix img {
    display: block;
    max-width: 100vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.dot.ed { background: #f472b6; }
.dot.pd { background: #93c5fd; }
.dot.community { background: #34d399; }
.dot.police { background: #f59e0b; }
.dot.office { background: #22d3ee; }
.dot.polling { background: #a8a29e; }

/* Polling locations table styles */
.table-wrap {
  overflow-x: auto;
  margin-top: 18px;
  margin-bottom: 18px;
}
table[aria-describedby="table-desc"] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(255, 165, 0, 0.08);
  border-radius: 12px;
  font-size: 1em;
}
thead th {
  background: #ff6100;
  color: #fff;
  font-weight: bold;
  padding: 14px 12px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  text-align: left;
  letter-spacing: 0.04em;
}
tbody tr {
  background: #fff;
  box-shadow: 0 2px 8px rgba(255, 165, 0, 0.10);
  border-radius: 12px;
  transition: box-shadow 0.2s, background 0.2s;
}
tbody tr:hover {
  background: #fff7e6;
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.18);
}
tbody td {
  padding: 16px 12px;
  border-top: 1px solid #ffe0b2;
  border-bottom: 1px solid #ffe0b2;
  font-size: 1em;
}
tbody tr td:first-child {
  border-left: 1px solid #ffe0b2;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  text-align: center;
  color: #ff6100;
  font-weight: bold;
}
tbody tr td:last-child {
  border-right: 1px solid #ffe0b2;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* End polling locations table styles */

/* Manifesto page embed styles */
.manifesto-embed {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}
.manifesto-iframe {
    border: none;
    max-width: 100%;
    min-width: 320px;
}

/* Responsive polling division map */
#constituency-map-polling {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 18px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#constituency-map-polling img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(255, 165, 0, 0.10);
  object-fit: contain;
}

@media (max-width: 600px) {
    .main-video {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
    }
}

@media (max-width: 1500px) {
  .main-content-container-vision {
    padding: 0px 200px;
  }
  div.vision-banner {
    width: 250px;
  }
}

@media (max-width: 1300px) {
  #candidate-name {
    font-size: 3em;
  }
  #candidate-party {
    font-size: 1.8em;
    margin-bottom: 60px;
  }
  #candidate-constituency {
    font-size: 1.2em;
    margin-bottom: 15px;
  }
  #candidate-slogan {
    font-size: 1.2em;
  }
  .main-content-container-vision {
    padding: 0px 100px;
  }
  div.vision-banner {
    width: 250px;
  }
}

@media (max-width: 1202px) {
  #candidate-name {
    font-size: 2.5em;
  }
  #candidate-party {
    font-size: 1.5em;
    margin-bottom: 60px;
  }
  #candidate-constituency {
    font-size: 1.2em;
    margin-bottom: 15px;
  }
  #candidate-slogan {
    font-size: 1.2em;
  }
}

@media (max-width: 1150px) {
  #candidate-name {
    padding-left: 0px;
  }
  #candidate-party {
    padding-left: 0px;
  }
  #candidate-constituency {
    padding-left: 30px;
  }
  #candidate-slogan {
    padding-left: 0px;
  }
  .main-content-container-vision {
    padding: 0px 100px;
  }
  div.vision-banner {
    width: 220px;
  }
}

@media (max-width: 1100px) {
  #left-map {
    display: none;
  }
  .main-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 50px;
  }
  .main-content-container-vision {
    padding: 0px 50px;
  }
  div.vision-banner {
    width: 220px;
  }
}

@media (max-width: 850px) {
  #right-map {
    display: none;
  }
  .gallery-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }
  .main-content-container-vision {
    padding: 0px 25px;
    flex-direction: column;
  }
  .main-content-container-vision > div:last-child {
    display: flex;
    flex-direction: row;
    column-gap: 5px;
  }
  div.vision-banner {
    height: auto;
    width:auto;
  }
}

@media (max-width: 650px) {
  #constituency-map {
    width: 200px;
    height: 200px;
  }

  #candidate-party {
    margin-bottom: 30px;
  }

  #banner-top h1 {
    border: none;
  }
}

@media (max-width: 600px) {
  .banner-right {
    padding: 20px 0px 0px 0px;
  }
  #banner-top h1 {
    font-size: 1.5em;
    padding: 25px 10px 0px 10px;
  }

  .endorsement-item {
    flex-direction: column;
    align-items: center;
    text-align: justify;
  }

  .endorsement-item img {
    margin-bottom: 10px;
  }

  .endorsement-item .endorsement-text p {
    padding: 5px;
  }
}

@media (max-width: 520px) {
  .banner-right {
    padding: 25px 0px 0px 0px;
  }
  .banner-right img {
    height: auto;
    width: 40%;
  }

  #banner-top h1 {
    padding: 25px 5px 0px 5px;
  }

  #candidate-name {
    font-size: 1.5em;
  }
  #candidate-party {
    font-size: 1em;
  }
  #candidate-constituency {
    font-size: 0.8em;
  }
  #candidate-slogan {
    font-size: 0.8em;
  }
  footer div.flex-container {
    justify-content: flex-start;
  }

  footer #signature {
    height: auto;
    width: 300px;
  }

  footer #signature img {
    height: auto;
    width: 100%;
  }

  .gallery-container {
    grid-template-columns: 1fr;
  }

  .main-content-container-bio {
    align-items: center;
  }

  #bio-image {
    height: 250px;
    width: auto;
  }
}

@media (max-width: 418px) {
  #constituency-map {
    width: 200px;
    height: 180px;
  }

  #candidate-party {
    margin-bottom: 50px;
  }

  #candidate-constituency {
    margin-bottom: 28px;
  }

  #candidate-slogan {
    margin-left: -45px;
  }

  #banner-top h1 {
    font-size: 1.1em;
    padding: 40px 5px 0px 5px;
  }
}


@media (max-width: 700px) {
   #carib-tix {
        margin-top: 0.5rem; /* Reduce top margin on small screens */
    }

  table[aria-describedby="table-desc"] {
    font-size: 0.95em;
  }
  thead th, tbody td {
    padding: 10px 6px;
  }

   #constituency-map-polling {
    max-width: 100vw;
    padding: 0 8px;
  }
  #constituency-map-polling img {
    border-radius: 8px;
  }
}