h1, h2, h3, h4{
    text-align: center;
}

h1{
  color: rgb(79,129,189);
}

h2 {
  color: rgb(42,168,153);
}

h3{
  color: black
}

figure a {
  pointer-events: none;
  cursor: default;
}

#caption{
    color: rgb(79,129,189);
    padding: 20px;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
}

figure{
    padding: 10px;
}




#colouredList li#red::marker {
  color: red;
  font-size: 30px;
  list-style-type: square;
}

#colouredList li#yellow::marker {
  color: gold;
  font-size: 30px;
  list-style-type: square;
}

#colouredList li#green::marker {
  color: green;
  font-size: 30px;
  list-style-type: square;
}

#colouredList li#lightblue::marker {
  color: lightblue;
  font-size: 30px;
  list-style-type: square;
}

#colouredList li#blue::marker {
  color: blue;
  font-size: 30px;
  list-style-type: square;
}

#service{
  color:red;
}

hr {
  border-width: 3px ;
}


.container{
  white-space: nowrap;
}

#no_bullet{
  list-style-type: none;
}

.wy-nav-content {
    max-width: 1000px;
    background-color: white; 
}


@media (max-width: 768px) {

  p, ul, li{
    font-size: 16px;
  }

  .image-row img {
  width: 100%; 
  }

  .container {
    font-size: 16px;
  }

  .flexbox img {
    max-width: 100%;
  }
  .flexbox {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  p, ul, li{
    font-size: 14px;
  }
}

.image-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.image-row img {
  max-width: 100%;
  width: 45%; 
  height: auto;
}


.responsive-container {
  max-width: 800px;
  width: 100%;
  margin: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.container {
  white-space: normal; 
  word-break: break-word;
  margin: 5px 0;
}


.flexbox {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  padding-top:30px;
  padding-bottom:30px;
}

.flexbox img {
  width: 100%;
  max-width: 500px;
  height: auto;
  flex-shrink: 0;
  border-radius: 4px;
}


.flexbox > div {
  flex: 1 1 100px;
}

@media (max-width: 1024px) {
  .flexbox {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .flexbox > div {
    width: 100%;
  }
    p, ul, li{
    font-size: 16px;
  }
}


.wy-nav-side::-webkit-scrollbar {
    width: 8px;
}

.wy-nav-side::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.wy-nav-side::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.wy-nav-side::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.wy-nav-side {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.image-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
}

.image-container img {
  max-width: 100%;
  height: auto;
}