/*body {margin: 0; padding: 0 0 80px; background-color: #efede8; background-image: url(../img/bcg.gif); background-repeat: repeat-x; background-position: 50% 0; text-align: center; color: #716b5c; font-size: 13px; font-family: Georgia, Times, serif; line-height: 18px;}*/
body {width: 100%; margin: 0; padding: 0 0 80px; background-color: #ffffff; background-image: url(../img/bcg.gif); background-repeat: repeat-x; background-position: 50% 0; text-align: center; color: #000000; font-size: 14px; font-family: Georgia, Times, serif; line-height: 18px;}
form {margin: 0; padding: 0;}
table {margin: 0 0 10px; border-collapse: collapse; font-size: 13px; line-height: 18px;}
td, th {padding: 5px 20px 5px 0; vertical-align: top;}
/*h1 {margin: 0; padding: 5px 0 25px; font-size: 28px; text-transform: uppercase; line-height: normal; font-weight: normal; color: gold; text-shadow: black 1px 1px 0px; font-family: Helvetica, Arial, sans-serif; letter-spacing: -0.05em;}*/
/*h2 {margin: 0; padding: 5px 0 5px; font-size: 20px; text-transform: uppercase; line-height: normal; font-weight: normal; color: gold; text-shadow: black 1px 1px 0px; font-family: Helvetica, Arial, sans-serif; letter-spacing: -0.05em;}*/
/*h3 {margin: 0; padding: 5px 0 5px; font-size: 20px; line-height: normal; color: gold; text-shadow: black 1px 1px 0px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; letter-spacing: -0.05em;}*/
/*h4 {margin: 0; padding: 5px; font-size: 13px; line-height: normal; color: gold; text-shadow: black 0.4px 0.4px 0px; font-weight: normal; font-family: Helvetica, Arial, sans-serif;}*/
/*h5 {margin: 0; padding: 5px; font-size: 13px; line-height: normal; color: black; font-family: Helvetica, Arial, sans-serif;}*/
/*hr {background-color: #186420; border: none;}*/
h1 {margin: 0; padding: 5px 0 25px; font-size: 28pt; text-transform: uppercase; line-height: normal; font-weight: normal; color: black text-shadow: white 1px 1px 0px; font-family: Helvetica, Arial, sans-serif; letter-spacing: -0.05em;}
h2 {margin: 0; padding: 5px 0 5px; font-size: 20pt; text-transform: uppercase; line-height: normal; font-weight: normal; color: black; text-shadow: white 1px 1px 0px; font-family: Helvetica, Arial, sans-serif; letter-spacing: -0.05em;}
h3 {margin: 0; padding: 5px 0 5px; font-size: 20pt; line-height: normal; color: black text-shadow: white 1px 1px 0px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; letter-spacing: -0.05em;}
h4 {margin: 0; padding: 5px; font-size: 13pt; line-height: normal; color: black; text-shadow: white 0.4px 0.4px 0px; font-weight: normal; font-family: Helvetica, Arial, sans-serif;}
h5 {margin: 0; padding: 5px; font-size: 13pt; line-height: normal; color: black; font-family: Helvetica, Arial, sans-serif;}
hr {background-color: gold; border: none;}
p {margin: 10px; padding: 5px 0 5px;}
iframe {width:100%; background-color:white;}
ol {margin: 0; padding: 0 0 15px 20px;}
ol ol {padding: 0 0 0 30px;}
ol li {margin: 0; padding: 0;}
ul {margin: 0; padding: 0 0 10px 0; list-style: none;}
ul ul {padding: 5px 0 0 0;}
ul li {background-image: url(../img/bullet.gif); background-repeat: no-repeat; background-position: 0 2px; margin: 0; padding: 0 0 5px 23px;}
input, select, textarea {margin: 0; vertical-align: middle; font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
a {color: black;}
/*a {color: white;}*/
/*a:hover, a:active {color: white; background-color: #acb0ad;}*/
/*a:hover, a:active {color: purple; background-color: white;}*/
a:hover {color: black; background-color: white;}, a:active {color: black; background-color: white;}
img, object {vertical-align: bottom; margin: 0;}
a img {border: none;}

.cb {clear: both; display: block;}
.lined td, .lined th {padding: 5px 10px; border-bottom: 1px solid #dfe5ee; vertical-align: middle;}
.formtable td {vertical-align: middle;}
/*txt {border: 1px solid #cccccc; background-color: #ffffff; color: #444444; padding: 3px 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;}*/ /* -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; */
.txt {border: 1px solid #cccccc; background-color: #ffffff; color: gold; padding: 3px 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;} /* -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; */
 txt:focus {border: 1px solid #999999;}
.btn {border: 1px solid #c4ab65; background-color: #c4ab65; color: #ffffff; font-weight: bold; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;} /* -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; */
.btn:hover, .btn:focus {border: 1px solid #98803d; background-color: #98803d;}
.w20px {width: 20px;}
.w200px {width: 200px;}
.w100pct {width: 100%;}
.tc {text-align: center;}
.tr {text-align: right;}

/*#page {margin: auto; width: 960px; text-align: left;}*/
#page {margin: auto; width: 100%; text-align: left;}
#header {height: 100px; width:97%; overflow: hidden; padding: 0 0px;}
#logo {float: left; padding: 5px 0px 0px 5px;}
#logo-sml {float: left; padding: 5px 10px 0px 15px;}
/*#headerbox {width:100%; float: right; margin: 20px 0 0; background-color: #ecf2fa; padding: 10px; font-family: Helvetica, Arial, sans-serif; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; behavior: url(css/border-radius.htc);}*/
#headerbox {width:100%; float: right; margin: 20px 0 0; background-color: #ffffff; padding: 10px; font-family: Helvetica, Arial, sans-serif; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; behavior: url(css/border-radius.htc);}
#headerbox p {padding: 0;}
#headerbox a {color: #6b9ef5;}
#headerbox a:hover {color: #5485d8;}
#headerbox img {vertical-align: middle;}

/*#menu {list-style: none; padding: 0 10px; font-family: Helvetica, Arial, sans-serif; line-height: 15px; background-image: url(../img/menubcg.jpg); background-repeat: repeat-x; background-color: #cc33ff; height: 35px;}*/
/*#menu {list-style: none; padding: 0 0px; font-family: Helvetica, Arial, sans-serif; line-height: 15px; background-color: #186420; width:100%; height: 35px;}*/
/*#menu {list-style: none; padding: 0 0px; font-family: Helvetica, Arial, sans-serif; line-height: 15px; background-color: purple; width:100%; height: 35px;}*/
#menu {list-style: none; padding: 0 0px; font-family: Helvetica, Arial, sans-serif; font-size: 13pt; line-height: 15px; background-color: gold; width:100%; height: 35px;}
#menu li {display: block; float: left; margin: 0 1px 0 0; padding: 0; background-image: none;}
/*#menu a {display: block; position: relative; color: #ffffff; text-decoration: none; padding: 10px 15px;}*/
#menu a {display: block; position: relative; color: white; text-shadow: black .51px .51px 0px; padding: 10px 15px;}
/*#menu strong a, #menu .open a, #menu a:hover, #menu a:active {background-color: #cc33ff; background-image: url(../img/rollover.jpg); background-repeat: repeat-x; color: #ffffff; font-weight: normal;}*/
/*#menu strong a, #menu .open a, #menu a:hover, #menu a:active {background-color: purple; width:100px; color: white; text-shadow: black .51px .51px 0px; font-weight: normal;}*/
/*#menu strong a, #menu .open a, #menu a:hover, #menu a:active {background-color: white; width:180px; color: purple; text-shadow: black .51px .51px 0px; font-weight: normal;}*/
#menu strong a, #menu .open a, #menu a:hover, #menu a:active {background-color: gold; width:180px; color: black; text-shadow: white .51px .51px 0px; font-weight: normal;}
/*#menu ul {display: none; list-style: none; position: absolute; z-index: 999; padding: 5px 10px 0 10px; background-color: #186420; filter: alpha(opacity=90); -khtml-opacity: 0.90; -moz-opacity: 0.90; opacity: 0.90;}*/
#menu ul {display: none; list-style: none; position: absolute; z-index: 999; padding: 5px 10px 0 10px; background-color: gold; filter: alpha(opacity=90); -khtml-opacity: 0.90; -moz-opacity: 0.90; opacity: 0.90;}
#menu .open ul {display: block;}
#menu .open li {clear: both; margin: 0; width: 180px;}
#menu .open li a {background-color: gold; background-image: none; padding: 6px 15px; color: white;}
/*#menu .open li a:hover, #menu .open li a:active {background-color: #acb0ad; background-image: none; color: #ffffff;}*/
/*#menu .open li a:hover, #menu .open li a:active {background-color: #186420; background-image: none; color: white;}*/
#menu .open li a:hover, #menu .open li a:active {background-color: white; background-image: none; color: black;}

#headerimage {padding: 0 0 0 0; width: 98%;}

/*#datebar {list-style: none; text-align:center; padding: 0px 0px; font-family: Verdana; font-size: 28px; color: white; text-shadow: 1px 1px 1px black; background-color: #186420; line-height: 20px;}*/
#datebar {list-style: none; text-align:center; padding: 0px 0px; font-family: Verdana; font-size: 28px; color: black; text-shadow: 1px 1px 1px black; background-color: #ffefff; line-height: 20px;}
/*#headerqlinks {margin: 15px 0 0; width: 100%; font-size: 16px; } color: white; background-color: #186420;}*/
#headerqlinks {margin: 15px 0 0; width: 100%; font-size: 16px; } color: black; background-color: white;}
/*#headerqlinks a {color: purple; background-color: #186420;}*/
/*#headerqlinks a {color: white; background-color: purple;}*/
/*#headerqlinks a:hover, a:active {color: purple; background-color: white;}*/
#headerqlinks a:hover, a:active {color: black; background-color: white;}

#content {margin: 20px 0 0; padding: 40px 0 10px; border-color: #ffffff; background-color: #ffffff;}
#content2 {width: 100%;}
#content img {vertical-align: middle;}
/*.homecol {float: left; width: 240px; padding: 0 0 20px;}*/
.homecol {float: left; width: 25%; padding: 10px 0 5px;}
.homecol2 {border-left: 1px solid gold; padding: 10px 15px 0 5px;}
.homecol2.spec {border: none;}
#widecol {clear: both; width: 100%;}
#widecol2 {padding: 10px 20px 0px;}

/*#footer {margin: 20px 0 0; width: 100%; border-top: 1px solid purple; font-size: 12px; color: #aca082;}*/
/*#footer {margin: 25px 0 0; width: 100%; border-top: 1px solid purple; font-size: 12px; color: purple; background-color: #000000;}*/
#footer {margin: 25px 0 0; width: 100%; border-top: 1px solid #faa500; font-size: 12px; color: white; background-color: black}
/*#footer a {color: #aca082;}*/
#footer a {color: white; background-color: black;}
#footer a:hover, a:active {color: white; background-color: #faa500;}
#footertext {float: left; padding: 10px 15px 0;}
#footertext p {padding: 0;}
#credit {text-align: right; padding: 10px 15px;}
#credit a {text-decoration: none;}
#credit a strong {text-decoration: underline; font-weight: normal;}

#submenu {float: left; width: 180px; padding: 0 0 20px;}
#submenu2 {padding: 0 0 0 15px;}
#submenu a {display: block; text-shadow: black .5px .5px 0px; position: relative;}
#submenu ul {list-style: none; padding: 0; border-bottom: 1px solid #ffffff;}
#submenu li {display: inline; padding: 0; background-image: none;}
/*#submenu ul a {border-top: 1px solid #ffffff; padding: 8px 10px; font-family: Helvetica, Arial, sans-serif; line-height: 15px; color:purple;}*/
#submenu ul a {border-top: 1px solid #ffffff; padding: 8px 10px; font-family: Helvetica, Arial, sans-serif; line-height: 15px; color:black;}
/*#submenu ul strong a, #submenu ul a:hover, #submenu ul a:active {background-color: #186420; color: white; font-weight: normal;}*/
#submenu ul strong a, #submenu ul a:hover, #submenu ul a:active {background-color: gold; color: black; font-weight: normal;}
/*#submenu ul ul {padding: 4px 5px 5px; border: none; background-color: #186420;}*/
#submenu ul ul {padding: 4px 5px 5px; border: none; background-color: gold;}
#submenu ul ul ul {padding: 0}
#submenu ul ul a {margin: 1px 0 0; padding: 5px 5px 5px 15px; border: none; font-size: 12px;}
/*#submenu ul ul strong a, #submenu ul ul a:hover, #submenu ul ul a:active {background-color: #186420; color: white; font-weight: normal;}*/
#submenu ul ul strong a, #submenu ul ul a:hover, #submenu ul ul a:active {background-color: gold; color: black; font-weight: normal;}
#submenu ul ul ul a {padding: 5px 5px 5px 30px;}
#submenu ul ul ul ul a {padding: 5px 5px 5px 45px;}
#submenu ul ul ul ul ul a {padding: 5px 5px 5px 60px;}
#submenu ul ul ul ul ul ul a {padding: 5px 5px 5px 75px;}
#submenu ul ul ul ul ul ul ul a {padding: 5px 5px 5px 90px;}


/*#rightcol {float: right; width: 700px;}*/
#rightcol {float: right; width: 80%;}
/*#rightcol2 {padding: 0 30px 20px 10px;}*/
#rightcol2 {padding: 0 30px 20px 10px;}

#images {float: right; width: 260px; text-align: center; font-size: 12px; line-height: 14px; font-family: Helvetica, Arial, sans-serif;}
#images p {padding: 0 25px 20px;}
#images a {text-decoration: none; color: #959081; position: relative;}
#images a img {border: 3px solid #ffffff;}
#images a:hover, #images a:active {color: #c4ab65;}
#images a:hover img, #images a:active img {border: 3px solid #ede5cf;}
#images a span {display: block; padding: 3px 0 0;}

#container {position: relative; max-width: 800px; margin: 0 auto; }
#container content {position: absolute; top: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); color: purple; width: 100%; padding: 20px;}

#downloads {padding: 20px 0 0; line-height: 14px;}
#downloads a {text-decoration: none; position: relative;}
#downloads img {float: left; margin: 2px 7px 0 0;}
#downloads span {font-size: 11px; color: #777d88;}

#gallery {clear: both; margin: 0 30px 0 10px; border-top: 1px solid #eeeeee; padding: 5px 0 20px 0; font-size: 12px; line-height: 14px; font-family: Helvetica, Arial, sans-serif;}
#gallery a {display: block; float: left; width: 165px; text-decoration: none; margin: 20px 0 0; color: #959081; position: relative;}
#gallery a img {border: 3px solid #ffffff;}
#gallery a:hover, #gallery a:active {color: #c4ab65;}
#gallery a:hover img, #gallery a:active img {border: 3px solid #ede5cf;}
#gallery a span {display: block; padding: 3px 3px 0;}

#products {clear: both; margin: 0 30px 0 10px; border-top: 1px solid #eeeeee; padding: 5px 0 20px 0; font-size: 12px; line-height: 14px; font-family: Helvetica, Arial, sans-serif;}
#products a {display: block; float: left; width: 165px; text-align: center; text-decoration: none; margin: 20px 0 0; color: #cc33ff; position: relative;}
#products a:hover, #products a:active {color: #79b200;}
#products a span {display: block; border-left: 1px solid #eeeeee;}
#products a span.noline {border-left: none;}
#products a span span {border-left: none; padding: 6px 0 0;}
#products a span span span {padding: 0; color: #999999; font-size: 11px;}
#products a span span span span {display: inline; color: #cc0000;}
#products em {text-decoration: line-through; font-style: normal; color: #cccccc;}

#homeproducts {padding: 0 20px 40px;}
#homeproducts h2 {padding: 0 0 10px;}
#homeproducts #products {margin: 0; border: 1px solid #cadefb; padding: 0 0 20px 10px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; border-radius: 7px; behavior: url(css/border-radius.htc);}
#homeproducts #products a {width: 180px;}

#productimage {float: left; width: 240px; font-size: 12px; line-height: 14px; font-family: Helvetica, Arial, sans-serif;}
#productimage p {padding: 0 30px 20px 0;}
#productimage a {text-decoration: none; color: #777d88; position: relative;}
#productimage a img {border: 3px solid #ffffff;}
#productimage a:hover, #images a:active {color: #79b200;}
#productimage a:hover img, #images a:active img {border: 3px solid #dfecc3;}
#productimage a span {display: block; padding: 3px 0 0;}

#items {clear: both; font-size: 12px; line-height: 14px; font-family: Helvetica, Arial, sans-serif;}
#items th {border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; background-color: #eeeeee; padding: 6px 10px; vertical-align: middle; color: #999999; font-size: 11px;}
#items td {border-bottom: 1px solid #eeeeee; padding: 5px 10px; vertical-align: middle;}
#items em {text-decoration: line-through; font-style: normal; color: #cccccc;}
#items span {color: #cc0000;}

#items {clear: both; font-size: 12px; line-height: 14px; font-family: Helvetica, Arial, sans-serif;}
#items th {border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; background-color: #eeeeee; padding: 6px 10px; vertical-align: middle; color: #999999; font-size: 11px;}
#items td {border-bottom: 1px solid #eeeeee; padding: 5px 10px; vertical-align: middle;}
#items em {text-decoration: line-through; font-style: normal; color: #cccccc;}
#items span {color: #cc0000;}

#order {clear: both; font-size: 12px; line-height: 14px; font-family: Helvetica, Arial, sans-serif;}
#order th {border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; background-color: #eeeeee; padding: 6px 10px; vertical-align: middle; color: #999999; font-size: 11px;}
#order td {padding: 5px 10px; vertical-align: middle;}
#order em {text-decoration: line-through; font-style: normal; color: #cccccc;}
#order span {color: #cc0000;}
#order .line td {border-top: 1px solid #dddddd;}

#errors {color: #cc0000;}

#divbgimg {
    background-image: image_url('https://www.mudgee.catholic.org.au/epd/content/2843_l.jpg');
    background: cover;
    background-color: #ffffff; 
    margin-left: 5px; 
    width: 93%; 
    border: 5px solid gold; 
    border-radius: 5px; 
    box-shadow: 5px 5px 5px #999;
 }
 
#image-blurred-edge {
  /* you need to match the shadow color to your background or image border for the desired effect*/
  box-shadow: 0 0 8px 8px white inset;
}

.email-links {
  background: #fff;
  border: 5px solid #222;
  border-radius: 18px;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  padding: 2rem;
  position: relative;
  width: clamp(600px, 50%, 800px);
}

.email-links:before {
  content: "";
  background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
  border: 5px solid #222;
  border-radius: 18px;
  height: 100%;
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 100%;
  z-index: -1;
}

.email-link {
  padding: 1rem;
}

.email-link:not(:last-child) {
  border-right: 1px solid #ccc;
}

.email-link svg {
  filter: drop-shadow(1px 0 5px hsla(170, 0%, 0%, 0.5));
  margin-right: 10px;
  position: relative;
  top: 4px;
}

.circle-sketch-highlight{
  position:relative;
  left:0.5em;
  font-family: Libre Franklin;
  font-size: 18px;
  font-weight: 500;
}
.circle-sketch-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:-0.1em;
  border-width:2px;
  border-style:solid;
  border-color:#ef8c22;
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.7;
  border-radius:50%;
  padding:0.1em 0.25em;
}
.circle-sketch-highlight:after{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  padding:0.1em 0.25em;
  border-width:2px;
  border-style:solid;
  border-color:#ef8c22;
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.7;
  border-radius:50%;
}

.faq_question {
    margin: 0px;
    padding: 0px 0px 5px 0px;
    display: inline-block;
    cursor: pointer;
    font-size: 14pt;
    font-weight: bold;
}
        
.faq_answer_container {
    display: none;
}

.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background: rgba(255, 165, 0, 0.5);
  /*background-color: orange;*/ 
  color: white; 
  border: 2px solid orange;
  border-radius: 20px;
}

.button1:hover {
  background-color: white;
  color: orange;
}

.button2 {
  background-color: purple; 
  color: white; 
  border: 2px solid purple;
}

.button2:hover {
  background-color: white;
  color: purple;
}

.boxborder-me {
  box-shadow: 0 0 0 3px red;
  outline: dashed 3px purple;
  /*height: 100px;*/
}



/* General Form Container Styling */
.contact-form-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 30px;
    background-color: #f8f9fa; /* Light grey background */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-family: 'Open Sans', Arial, sans-serif; /* A clear, readable font */
    color: #333;
}

.contact-form-container h2 {
    text-align: center;
    color: #0056b3; /* A calming blue, or a color matching your parish branding */
    margin-bottom: 20px;
    font-size: 2em;
}

.contact-form-container p {
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.6;
    color: #555;
}

/* Form Group Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #444;
}

.required-star {
    color: #dc3545; /* Red for required fields */
    margin-left: 4px;
}

/* Input and Textarea Styling */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Ensures padding doesn't increase total width */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    border-color: #007bff; /* Blue border on focus */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none; /* Remove default outline */
}

.form-group textarea {
    resize: vertical; /* Allow vertical resizing, but not horizontal */
    min-height: 120px; /* Minimum height for message box */
}

/* Captcha Specific Styling */
.captcha-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the reCAPTCHA box */
    margin-top: 25px;
    margin-bottom: 30px;
}

.captcha-group .form-text {
    margin-top: 10px;
    font-size: 0.9em;
    color: #6c757d;
}

/* Submit Button Styling */
.submit-button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #28a745; /* A pleasant purple for action */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.submit-button:hover {
    background-color: #218838; /* Darker purple on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

.submit-button:active {
    background-color: #1e7e34;
    transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .contact-form-container {
        margin: 20px;
        padding: 20px;
    }
}


/* --- Form container styling --- */
.contact-form-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 30px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-form-container h2 {
  text-align: center;
  color: #333;
  margin-bottom: 25px;
  font-family: sans-serif;
}

/* --- Input and textarea styling --- */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #555;
  font-family: sans-serif;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.form-group textarea {
  resize: vertical; /* Allows the user to resize the textarea vertically */
}

/* --- Button styling --- */
#submitBtn {
  display: block;
  width: 100%;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#submitBtn:hover {
  background-color: #0056b3;
}

#submitBtn:active {
  transform: translateY(1px);
}

/* --- Status message styling --- */
#formStatus {
  margin-top: 20px;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  display: none; /* Initially hidden */
}

.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
/* --- Form container styling --- */


/* --- NEW MOBILE-FIRST RESPONSIVE INTEGRATION --- */

/* 1. Universal Box Sizing - Prevents elements from "popping" out of the screen width */
* {
    box-sizing: border-box;
}

/* 2. Responsive Images - Prevents fixed-width images from breaking the mobile layout */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* 3. Mobile Specific Breakpoint (Screens 1023px and narrower) */
@media (max-width: 1023px) {
    
    /* Force main page to respect screen width */
    #page {
        width: 100% !important;
        overflow-x: hidden;
    }

    /* Stack the 4-column Homepage Columns vertically */
    .homecol {
        float: none !important;
        width: 100% !important;
        padding: 15px 20px !important;
        border-left: none !important;
        border-bottom: 1px solid #eee;
    }

    /* Stack the Sidebar and Main Content */
    #submenu {
        float: none !important;
        width: 100% !important;
        padding: 10px 20px !important;
    }

    #rightcol {
        float: none !important;
        width: 100% !important;
        padding: 0 15px 20px 15px !important;
    }

    /* Adjust Font Sizes for smaller screens */
    h1 { font-size: 22pt !important; }
    h2 { font-size: 18pt !important; }
    h3 { font-size: 18pt !important; }

    /* Tables (like the Readings section) become scrollable so they don't stretch the page */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Center the Universalis readings tables on mobile */
    #headerqlinks table {
        display: table; /* Keep the quicklinks as a table if using the old header.php */
    }

    /* Adjust footer for mobile */
    #footertext, #credit {
        float: none !important;
        text-align: center;
        width: 100%;
        padding: 10px;
    }
}