:root {
  --primary-color: #555;
  --secondary-color: #427d44;
  --third-color: #27A1D0;
  --text-color: #333;
  --background-color: whitesmoke;
  --button-color: #c2d2a6;
  --shadow-color: #999;
}

html {
  font-size: 62.5%;
}

body {
  font-family: opensans, Arial, Helvetica, sans-serif;
  font-size: 2rem;
  background-color: var(--background-color);
  margin-top: 1em;
}

h1 {
  text-align: center;
  margin: 1rem 0 1rem;
  color: var(--primary-color);
  font-size: 3rem;
}

h2 {
  text-align: center;
  color: var(--third-color);
  font-size: 2.7rem;
}

h3 {
  text-align: center;
  margin-bottom: 1rem;
  font-style: italic;
  color: var(--secondary-color);
  font-size: 2.5rem;
}

h4 {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--button-color);
  font-size: 2.3rem;
}

p {
  text-align: justify;
  color: var(--text-color);
  line-height: 1.5;
  letter-spacing: 1px;
}

textarea::placeholder {
  color: #a9a9a9;
  opacity: 1.0;
}

input::placeholder {
  color: #a9a9a9;
  opacity: 1.0;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

.main {
  margin: 1rem 5%;
}

.main p a {
  color: var(--text-color);
}

.text-button {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  text-decoration: underline;
}
.text-button:hover {
  cursor: pointer;
}

.button-link {
  color: white;
  text-align: center;
  padding: 1.5rem 1.5em;
  min-width: 10em;
  border: 2px solid var(--primary-color);
  background-color: #427d44;
  border-radius: 50px;
  border-color: var(--primary-color);
  text-decoration: none;
  font-weight: normal;
}

.button-link:hover {
  cursor: pointer;
  text-decoration: underline;
}

.main .text-link {
  color:#317ea8;
  text-decoration: underline;
}

.main .text-link:hover {
  cursor: pointer;
}

.image-caption {
  font-size: 1.3rem;
}

.image-caption a {
  color: var(--text-color);
  text-decoration: none;
}

.text-list {
  line-height: 2;
  text-align: left;
  color: var(--text-color);
}

.form-container {
  width:90%;
  min-width: 200px;
  max-width: 600px;
  text-align: center;
}

form .input-text-div {
  position: relative;
}

form .input-text-div .input-field {
  padding: 1rem;
  text-align: left;
  border-radius: 10px;
  border: 2px #999 solid;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  color: var(--text-color);
}

form .input-text-div .input-pw-field {
  padding: 1rem 4rem 1rem 1rem;
  text-align: left;
  border-radius: 10px;
  border: 2px #999 solid;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  color: var(--text-color);
}

form .input-text-div .input-pw-icon {
  padding: 1rem;
  text-align: right;
  border-radius: 10px;
  border: 2px #61121200 solid;
  margin: none;
  color: var(--text-color);
  position: absolute;
  top: 0;
  right: 0;
}

form .input-text-div .input-label {
  padding: 1rem;
  text-align: left;
  border-radius: 10px;
  border: 2px #99999900 solid;
  margin: none;
  color: #757575;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

form .input-text-div .input-label-top {
  padding: 1rem;
  text-align: left;
  border-radius: 10px;
  border: 2px #99999900 solid;
  margin: none;
  color: #757575;
  position: absolute;
  pointer-events: none;
  top: -2em;
  left: 0;
  font-size: 80%;
  pointer-events: none;
}

form .input-text-div input:focus ~ label,
form .input-text-div input:valid ~ label {
  top: -2em;
  font-size: 80%;
}

form .input-text-div textarea {
  padding: 1rem;
  text-align: left;
  border-radius: 10px;
  border: 2px #999 solid;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  color: var(--text-color);
}

form .input-text-div textarea:focus ~ label,
form .input-text-div textarea:valid ~ label {
  top: -2em;
  font-size: 80%;
}

form .input-text-div .input-search-field {
  padding: 1rem 4rem 1rem 1rem;
  text-align: left;
  border-radius: 10px;
  border: 2px #999 solid;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  color: var(--text-color);
}

form .input-text-div .input-search-icon {
  padding: 1rem;
  text-align: right;
  border-radius: 10px;
  border: 2px #61121200 solid;
  margin: none;
  color: var(--text-color);
  position: absolute;
  top: 0;
  right: 0;
}

form .input-text-div .input-search-list {
  display: inline-block;
  visibility: hidden;
  background-color: #e6e6e6;
  overflow: auto;
  border: 1px solid #888;
  z-index: 1;
  text-align: left;
  position: absolute;
  bottom: 100%;
  left: 0;
  max-height: 10.75em;
  max-width:100%;
  min-width:50%;
  border-radius: 5px;
}

form .input-text-div .input-search-list a {
  color: black;
  padding: 0.25em 1em;
  text-decoration: none;
  display: block;
}

form .input-text-div .input-search-list a:hover {
  background-color: #ccc;
  cursor: pointer;
}

form .box-1 {
  grid-area: box-1;
  text-align: left;
}

form .box-2 {
  grid-area: box-2;
  text-align: left;
}

form .form-line-1 {
  display: inline-grid;
  grid-template: 1vw 1vw;
  grid-template-areas: "box-1 box-2";
  width: 80%;
  column-gap: 50px;
  margin-bottom: 30px;
}

form .enquiry {
  display: inline-grid;
  border-radius: 10px;
  width: 80%;
}

form .enquiry textarea {
  padding: 1rem;
  text-align: left;
  border-radius: 10px;
  border: 2px #999 solid;
  box-sizing: border-box;
}

@media screen and (max-width:1000px) {
  form .form-line-1 {
    display: inline-grid;
    grid-template-areas: "box-1" "box-2";
    width: 80%;
    row-gap: 30px;
  }
  
  form .enquiry {
    display: inline-grid;
    border-radius: 10px;
    width: 80%;
  }
}

.scope-card-row {
  display: inline-grid;
  grid-template: 1vw 1vw;
  grid-template-areas: "box-1 box-2";
  width: 95%;
  column-gap: 50px;
  margin-bottom: 30px;
}

.scope-card-row .scope-card1 {
  grid-area: box-1;
  text-align: left;
  border-radius: 7px;
  box-shadow: 0 0 20px 10px var(--shadow-color);
}

.scope-card-row .scope-card2 {
  grid-area: box-2;
  text-align: left;
  text-align: center;
  border-radius: 7px;
  box-shadow: 0 0 20px 10px var(--shadow-color);
}

.scope-card-row .scope-card12 {
  grid-column: span 2;
  width: 55%;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  border-radius: 7px;
  box-shadow: 0 0 20px 10px var(--shadow-color);
}

@media screen and (max-width:1000px) {
  .scope-card-row {
    display: inline-grid;
    grid-template-areas: "box-1" "box-2";
    width: 80%;
    row-gap: 30px;
  }

  .scope-card-row .scope-card12 {
    grid-column: span 1;
    width: 100%;
  }
}

.scope-card-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}

.scope-card-header {
  flex-basis: 10%;
  padding: 1em;
  border-radius: 7px 7px 0 0;
}

.scope-card-body {
  flex-basis: 80%;
  padding: 1em;
  color: #555555;
  text-align: justify;
}

.scope-card-footer {
  flex-basis: 10%;
  padding: 0 1em 1em 1em;
  color: #555555;
  text-align: center;
}

.scope-card-header .card-title {
  color: #555555;
  font-size: 120%;
  font-weight: 700;
  text-align: left;
  font-style: normal;
  padding: 0;
  margin: 0;
}

.scope-card-header .card-description {
  color: #555555;
  font-size: 110%;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 1px;
  text-align: left;
  padding: 0.5em 0 0 0;
  margin: 0;
}

.scope-card-footer a {
  color: #555555;
  text-decoration: underline;
}

.scope-card-footer a:hover {
  cursor: pointer;
}

/* Header */
.topnav img {
  width: 40%;
  vertical-align: middle;
  text-align: left;
  max-width: 250px;
  float:left;
}

.topnav .textlinks {display:block; float:right; width:60%; text-align:right}
.topnav .iconlinks {display:none;  float:right; width:60%; text-align:right}

@media screen and (max-width:800px) {
  .topnav .textlinks {display:none;  float:right; width:60%; text-align:right}
  .topnav .iconlinks {display:block; float:right; width:60%; text-align:right}
}

.topnav .textlinks a {
  font-weight: bold;
  color: #555;
  background-color: #ddd;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
  margin-bottom: 6px;
}

.topnav .iconlinks a {
  color: #555;
  background-color: #ddd;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
  margin-bottom: 6px;
}

.topnav a:hover {
  color: #ddd;
  background-color: #555;
}

.topnav .menu .block a {
  font-weight: bold;
  color: white;
  background-color: #555;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
  margin-bottom: 0px;
}

.topnav .menu .block a:hover {
  color: black;
  background-color: #ddd;
}

.topnav i {
  font-size: 150%;
}

.topnav .menu {
  position: relative;
  display: inline-block;
}

.topnav .menu .block {
  visibility: hidden;
  position: absolute;
  display: block;
  background-color: #555;
  color: #fff;
  text-align: right;
  padding: 10px;
  z-index: 1;
  top: 100%;
  right: 0px;
  border-radius: 6px;
}

.topnav .menu:hover .block {
  visibility: visible;
}

.topnav .menu .block .item {
  display: block;
}

/* Sidebar */
.sidebar-cont {
  display: flex;
  flex-direction: row;
}

.sidebar-left {
  order: 1;
  flex-basis: 25%;
  text-align: center; 
  background: url(../images/wood.jpg);
  color: white;
  opacity: 0.8;
  border-top: whitesmoke solid 0.5rem;
  border-bottom: whitesmoke solid 0.5rem;
  padding-bottom: 1em;
}

.sidebar-right {
  order: 2;
  flex-basis: 75%;
}

.sidebar-link {
  margin: 1em 1em 0 1em;
  display: block;
}

.sidebar-link a {
  color: white;
  text-decoration: none;
}

@media screen and (max-width:1024px) {
  .sidebar-cont   {flex-direction: column;}
  .sidebar-left   {order: 2;}
  .sidebar-right  {order: 1;}
  .sidebar-link   {display: inline-block;}
  .sidebar-link a {text-decoration: underline;}
}

/* Footer */
footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  background: url(../images/wood.jpg);
  color: white;
  padding: 1em 0 1em 0;
  margin: 0;
  text-align: center;
  opacity: 0.8;
  font-weight: 700;
  font-size: 1.3rem;
}

footer .footer-col1 {
  order: 1;
  flex-basis: 33%;
  min-width: 300px;
  padding: 1em 0 1em 0;
}

footer .footer-col2 {
  order: 2;
  flex-basis: 33%;
  min-width: 300px;
  padding: 1em 0 1em 0;
}

footer .footer-col3 {
  order: 3;
  flex-basis: 33%;
  min-width: 300px;
  padding: 1em 0 1em 0;
}

footer a {
  color: white;
  text-decoration: none;
}

footer .footer-links-table {
  display: table;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

footer .footer-links-table .link-row {
  display: table-row;
}

footer .footer-links-table .link-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}