:root {
    --white: #ffffff;
    --black: #000000;
    --shadow:#868585;
    --text: #050316;
    --background: #fbfbfe;
    --primary: #8d2725;
    --secondary: #e49c9a;
    --accent: #e7be65;
}
:root[data-theme="light"] {
    --text: #050316;
    --background: #fbfbfe;
    --primary: #8d2725;
    --secondary: #e49c9a;
    --accent: #e7be65;
}
:root[data-theme="dark"] {
    --text: #eae9fc;
    --background: #010104;
    --primary: #da7472;
    --secondary: #651d1b;
    --accent: #9a7118;
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {animation-delay: -1ms !important;animation-duration: 1ms !important;animation-iteration-count: 1 !important;background-attachment: initial !important;scroll-behavior: auto !important;transition-delay: 0s !important;transition-duration: 0s !important;}
}

html { -webkit-text-size-adjust: 100%;scroll-behavior: smooth; }
.sreen-reader-only {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
#skip a {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
#skip a:focus {position:static;width:auto;height:auto;}
*, ::before, ::after { box-sizing: border-box; }

:target {scroll-margin-top: 6rem;}
h2:target  {animation: 3s fadeout;}
@keyframes fadeout {
    0% { background-color: var(--accent);}
    80% { background-color: var(--accent);}
    100% { background-color: var(--background);}
}

body {font-size: 1.1rem;line-height: 1.5;margin: auto;padding: 0;font-family: system-ui, Arial, Helvetica, sans-serif;background-color: var(--background);color: var(--text);}

h1 {font-size: clamp(3rem, 7vw - .1rem, 5rem);color: var(--text);letter-spacing: 2px;font-weight: 500;text-transform: capitalize;text-wrap: balance;}
.h1-highlight {background: linear-gradient(120deg, var(--primary), var(--accent));-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-style: italic;}
h2 {font-size: clamp(2rem, 7vw - .1rem, 3rem);color:var(--text);margin: 1em 0 0.5em 0;font-weight: 300;text-wrap-style: balance;line-height: 1;}
h1 a, h2 a {text-decoration:none;}
h3 {font-size: 1.5rem;}
small {font-size: 0.8rem;} 
a {color:var(--primary);}
a:hover {color: var(--text);text-decoration: none;}
ul {line-height: inherit;}
main p, main ul {text-wrap:pretty;max-width:800px;}
img {max-width: 100%;height: auto;display: block;}

/********************* HEADER ********************/
header {background-color:var(--background);}
.head-bg {background:var(--white);border-bottom: solid 1px var(--shadow);transition: all 0.5s ease-in;}
.stick { position: sticky; top: 0; width: 100%; z-index:2; }

.hero-wrapper {display: flex;align-items: center;    max-width: 1280px;margin: 0 auto;    overflow: hidden;}
.hero-text {text-align:center;width: 40%;margin-left: 2rem;}
.hero-image {max-width: 700px;width: 60%;margin-right: -2rem;}
@media screen and (max-width: 600px) {
    .hero-wrapper {flex-direction: column;}
    .hero-text {margin-left: 0;}
    .hero-image {margin-right:0;}
    .hero-text, .hero-image {width:100%;}
    h1 {margin-bottom:0;}
}

/********************* SYSTEM PAGE ********************/
.system_message { text-align: center; }
.big_letter {font-size: 9em;}
.system_svg{width:45px;height:45px;margin:0 auto 35px;display:block; fill: var(--primary);}
.system_title{line-height:1.25;margin:0 auto 20px;text-align:center;}
.system_text{margin-bottom:45px;text-align:center;max-width: 100%;}
.system_subtitle{font-size:20px;text-align:center;margin:0 0 15px}
.system_table{width:50%; margin:auto;}
.system_table td{width:50%;padding:10px 5px;}
.system_table td:first-child {text-align: right;font-weight: bold;}
.system_table td:last-child{text-align: left;}
@media screen and (max-width: 600px) {
   .system_table{width:100%}
}
/**************  NAVIGATION  ****************************************************/
nav.main {color: var(--text); font-size:1.2rem; display: flex; align-items: center;justify-content: space-between; width:98%; max-width: 1280px; margin: auto; }
nav.main img {height: 80px;width: auto;margin:10px;transition: all 0.5s ease-in-out;}

.nav-dropdown > :first-child:after { content: "\25BE"; padding-left: 4px; }
.selected > :first-child{border-bottom:3px solid var(--dark-green); }
.highlight > a {background-color: var(--accent);color: var(--black)!important;}

.nav-hide {display:none!important;}
.main ul { margin: 0; padding: 0; list-style-type: none; position: relative;}
.main ul li { display: inline-block; transition: background-color 0.4s ease-in-out;  }
.main ul li a, .main ul li button { text-decoration: none; display: block; padding: 10px; color:var(--text);transition: margin .3s ease-in-out;line-height: 1;/*background-color: inherit;--removed so i don't need important on highlight*/margin:auto;}
.main ul li a:hover, .main ul li button:hover {background-color: var(--primary)!important;;transition: background-color 0.4s ease-in-out;color: var(--white);}
.main button:hover, .highlight > a:hover {  background: var(--black);color:var(--white);transition: background 0.6s ease-in-out}
.main ul ul { position: absolute; z-index:2; text-align:left; display: none; background: var(--white);box-shadow: 2px 2px 5px var(--shadow);} 
.main ul ul li { display: block;  }
.main ul ul li a { color: var(--black);}
.main div { font-size: 2.5rem; padding: 0 4%; cursor: pointer; display: none;    margin-top: -10px; }
.main button {font-size: 1.3rem;cursor: pointer;display: none;padding: .6rem .5rem;color: var(--text);background: inherit;border: none;font-family: inherit;margin: 0 8% 0 auto;line-height:1;align-items: center;}
.main button span {/*font-size: 1.1rem;*/font-weight: 400;}
.mobilenav {display: block!important;position: absolute;right: 0;top: 90px;}

/*
@media(max-width: 1130px) {
    nav.main img, nav.main svg {height: 100px;}
}
@media(max-width: 1050px) {
    nav.main img, nav.main svg {height: 90px;}
}
*/
@media(max-width: 1020px) {
    .main button {display: flex;}
    .main button svg {stroke:black;}
    .main button:hover svg {stroke:white;}
    nav.main img {height: 80px;}
    nav.main {flex-wrap: wrap;}
    .main div {display: block; }
    .main ul { display: none; position: static; width: 100%;}
    .main ul li { display: block;  text-align: center;}
    .main ul ul { position: static; text-align:inherit;width: 90%;
    margin: auto; }
    nav:has(.mobilenav) ul {display: block;}
}
@media(min-width: 1070px) {
    .scroll-img { height: 60px!important;}
}
@media(min-width: 600px) and (max-width: 1070px) {
    .scroll-img { height: 50px!important;}
}
@media(max-width: 600px) {
    nav.main img { height:60px; }
    nav.main {flex-wrap:wrap;}
}
/********************* ARTICLE/GENERAL ********************/
main {min-height: 50vh;}
article {width:96%;max-width: 1280px;margin: 3rem auto;}

section {display: flex;max-width: 1280px;width: 96%;margin: auto;padding: 3rem 0;gap: 1rem;align-items: center;}
section:nth-child(even) .section-text {order:1;}
section:nth-child(even) .section-image {order:2;}
section div {flex-basis:100%;
}
.section-text { text-align:center;}
.section-text h2 {margin: 0 0 0.5em 0;}
.section-text p {
    max-width: 40ch;
    margin: 1rem auto;
}
@media(max-width: 750px) {
    section {flex-direction: column;}
    .section-text {width: 90%;}
    section:nth-child(even) .section-text {order:2;}
    section:nth-child(even) .section-image {order:1;}
}
@media(max-width: 600px) {
    article {width:94%;}
}

.affiliation-wrapper {display: flex;align-items: center;justify-content: space-evenly;background-color: #0503160d;max-width: 1280px;width: 94%;margin: 3rem auto;border-radius: 1rem;}
.affiliation-wrapper img {max-width: 300px;width: 100%;padding: .5em;}

.agent-wrapper {display: flex;max-width: 1280px;width: 96%;margin: 3rem auto;padding: 1rem;gap: 1rem;align-items: center;background: white;}
.agent-image {max-width: 350px;}
.agent-text {text-align: center;}
.agent-wrapper div {flex-basis: 100%;}
.agent-text h2 {margin: 0;}
.agent-text h3 {margin: .5em 0 0 0;}
.agent-text p {font-size: 1.3rem;max-width: 40ch;margin: 1rem auto;}
.agent-detail-wrapper {display: flex;gap: 2rem;}
.agent-detail-image {max-width: 400px;text-align: center;order: 2;}
.agent-detail-text {order: 1;}
.agent-detail-text h2 {font-size: clamp(1.5rem, 7vw - .1rem, 2rem);}
.agent-detail-text h2:first-of-type {margin-top:0;}
.credintial-flag {background-color: var(--secondary);padding: .25em .5em;margin: 0 .5em 1em;border-radius: .25em;display: inline-block;}
@media(max-width: 750px) {
    .agent-detail-wrapper {flex-direction: column;align-items: center;}
    .agent-detail-image {order: 1;}
    .agent-detail-text {order: 2;}
}

/********************* PAGE HEADER ********************/
.image-wrapper {position: relative;height: 350px;} 
.image-wrapper img { width: 100%; height: 100%; object-fit: cover;filter: brightness(0.5); }
.image-wrapper h1 { font-weight: normal;text-transform: capitalize;text-align: center;position: absolute;top: 50%;left: 50%;width: 90%;margin: 0;transform: translate(-50%, -50%);padding: 0;color: var(--white);text-shadow: 2px 2px 2px var(--primary);font-style: italic;line-height: 1.1;}

/********************* FOOTER ********************/
footer a {color:white;text-decoration:none;}
footer a:focus {outline:2px solid white;}
footer a:hover {background: inherit;text-decoration:underline;color:var(--accent);}
footer { color: var(--white); background-color: var(--primary);padding: 2rem 0 4rem; text-align:center; }
footer h3 {margin-bottom: 1rem;font-weight: bold;}
footer p {margin: 0 auto 1rem auto;}
.footer-grid {width: 96%;max-width: 1280px;margin: auto;display: flex;flex-wrap: wrap;justify-content: center;column-gap: 1rem;row-gap: 3rem;}
.footer-grid > div {flex: 1 1 220px;}
.footer-phone {color:var(--white);}
.footer-phone:hover {color:var(--black);}
.copyright { text-align:center; font-size: .8rem; font-style: italic;margin: 2rem auto;width: 90%;text-wrap: balance; }
.hours {display: grid;grid-template-columns: 50px 160px;column-gap: 1em;row-gap: .25em;text-align: left;    justify-content: center;}
.hours span:nth-child(odd) {text-align: right;}
.social-icons, .map-icons {display: flex;column-gap: 1.5rem;justify-content: center;}
.social-icon {width: 35px;height: auto; }
footer svg:hover, footer img:hover {filter: invert(1);}
.social-round {border-radius:50%;}

/********************* FORM ********************/
form {max-width: 500px;}
.form-flex {display: flex;gap: 1rem;}
@media only screen and (max-width:700px) { 
    .form-flex {display:block;}
}
.form-flex div {flex: 1 1 auto;}
label {line-height: 1;font-size: .9rem;margin: 1rem 0 .25rem 0;display: block;}
label:has(+ input:required):after, label:has(+ textarea:required):after, label:has(+ select:required):after {content: ' *';color: red;}
label:has(+ input[type=radio])::after {
    content: '';
}
input[type=email], input[type=tel], input[type=text], input[type=file] {border: none;width: 100%;padding: .75rem;font-family: inherit;font-size: inherit;line-height:1;border: thin solid var(--accent);}
textarea {display:block;border: none;width: 100%;padding: .75rem;font-family: inherit;font-size: inherit;line-height:inherit;border: thin solid var(--accent);}
input[type=date], input[type=password], input[type=number] {border: none;padding: .75rem;font-family: inherit;font-size: inherit;line-height:1;border: thin solid var(--accent);}
input[type=checkbox], input[type=radio]  {margin: .625em 0 .625em 0;background:var(--white);width: 1rem;height: 1rem;min-width: 20px;}
.checkbox-wrapper {display: flex;align-items: baseline;    gap: 1rem;}
select {border: none;width: 100%;padding: .85rem .75rem;font-family: inherit;font-size: inherit;line-height:1;background: inherit;-webkit-appearance: none;appearance: none;border: thin solid var(--accent);background:var(--white);}
input[type=submit] {background: var(--accent);border-radius: .5rem;padding: .5em 1em;display: inline-block;cursor: pointer;color: var(--text);font-size: inherit;text-decoration: none;border: thin solid var(--accent);font-weight: normal;margin: 1em;}
input[type=submit]:hover {background-color:var(--background);border: thin solid var(--primary);color: var(--text);}
fieldset {margin-bottom: 2rem;border: none;background: var(--background);}
fieldset:last-of-type {margin-bottom: 0;}
fieldset hr {margin: 2rem 1rem;}
legend {background: var(--accent);color: var(--primary);padding: .25rem .75rem;width: 100%;font-weight: bold;letter-spacing: 2px;position: sticky;
    top: 0;}
legend + p {font-style: italic;font-size: 1rem;margin: 0 0 1.5rem;}
input:user-invalid, select:user-invalid, textarea:user-invalid {border-bottom: 2px solid red;}
input:focus:invalid, select:focus:invalid, textarea:focus:invalid  {border-bottom: 3px solid  salmon;}
input:required:valid, select:required:valid, textarea:required:valid {border-bottom: 2px solid palegreen;}
input:required:focus:valid, select:required:focus:valid, textarea:required:focus:valid {border-bottom: 3px solid palegreen;}
input:focus, textarea:focus, select:focus { outline:none; border-bottom: solid 3px #000000;}

/********************* BUTTONS ********************/
.a-btn {background: var(--accent);border-radius: .5rem;padding: .5em 1em;display: inline-block;cursor: pointer;color: var(--text);font-size: inherit;text-decoration: none;border: thin solid var(--accent);font-weight: normal;}
#topbutton {display: none;position: fixed;bottom: 75px;right: -1px;z-index: 1;padding: .5em 1em;background: var(--accent);border-radius: .5rem 0 0 .5rem;color: var(--text);border: thin solid var(--black);text-decoration: none;}
.a-btn:hover, #topbutton:hover {background-color:var(--background);border: thin solid var(--primary);color: var(--text);}
footer .a-btn:hover {background:none;border: thin solid var(--accent);color: var(--accent);}

/********************* CONTACT ********************/
.contact-flex {display: flex;column-gap: 2rem;}
.contact-flex div {flex-basis: 100%;}
.contact-flex h2:first-of-type {margin-top: 0;}
@media(max-width: 700px) {
.contact-flex {flex-direction: column;}
}
iframe {width: 100%;height:300px;border:0;}