@font-face {
  font-family: 'Segment7Standard';
  font-style: normal;
  font-weight: normal;
  src: local('Segment7Standard'), url('../fonts/Segment7Standard.otf') format('truetype');
}

html {
  background: #02010a;
}
.starry-bg {
  background-color: #02010a;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(48, 72, 160, 0.38), transparent 58%),
    radial-gradient(ellipse 70% 40% at 85% 110%, rgba(90, 30, 130, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 30% at 10% 90%, rgba(20, 50, 120, 0.18), transparent 50%),
    radial-gradient(1px 1px at 4% 18%, #fff, transparent),
    radial-gradient(1px 1px at 11% 62%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 18% 28%, #fff, transparent),
    radial-gradient(1px 1px at 26% 74%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 33% 12%, #eef6ff, transparent),
    radial-gradient(1.5px 1.5px at 41% 48%, #fff, transparent),
    radial-gradient(1px 1px at 49% 22%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 57% 81%, #fff, transparent),
    radial-gradient(1px 1px at 64% 36%, rgba(210,230,255,.7), transparent),
    radial-gradient(2px 2px at 72% 14%, #fff, transparent),
    radial-gradient(1px 1px at 79% 58%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 86% 31%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 93% 70%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 8% 88%, #fff, transparent),
    radial-gradient(1px 1px at 96% 8%, rgba(255,255,255,.5), transparent),
    linear-gradient(118deg, transparent 38%, rgba(180, 198, 255, 0.07) 50%, transparent 62%);
}
nav.starry-bg {
  border-bottom: 1px solid rgba(140, 170, 255, 0.18);
}
body.site-sky {
  position: relative;
  min-height: 100vh;
  color: #dce6f5;
}
body.site-sky::before,
body.site-sky::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body.site-sky::before {
  background-image:
    radial-gradient(1px 1px at 4% 8%, #fff, transparent),
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 18% 6%, #fff, transparent),
    radial-gradient(1px 1px at 27% 41%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 33% 14%, #eef6ff, transparent),
    radial-gradient(1.5px 1.5px at 41% 28%, #fff, transparent),
    radial-gradient(1px 1px at 48% 9%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 56% 36%, #fff, transparent),
    radial-gradient(1px 1px at 63% 18%, rgba(210,230,255,.7), transparent),
    radial-gradient(2px 2px at 71% 7%, #fff, transparent),
    radial-gradient(1px 1px at 78% 31%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 86% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 93% 24%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 8% 52%, #fff, transparent),
    radial-gradient(1px 1px at 16% 68%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 24% 81%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 35% 58%, rgba(220,235,255,.9), transparent),
    radial-gradient(1px 1px at 44% 74%, #fff, transparent),
    radial-gradient(1px 1px at 52% 63%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 61% 88%, #fff, transparent),
    radial-gradient(1px 1px at 69% 55%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 77% 72%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 91%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 94% 64%, #fff, transparent),
    radial-gradient(1px 1px at 6% 91%, rgba(255,255,255,.5), transparent),
    linear-gradient(118deg, transparent 38%, rgba(180, 198, 255, 0.07) 50%, transparent 62%);
  animation: star-twinkle 6s ease-in-out infinite alternate;
}
body.site-sky::after {
  background-image:
    radial-gradient(1px 1px at 7% 17%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 19% 47%, #fff, transparent),
    radial-gradient(1px 1px at 29% 3%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 38% 92%, #fff, transparent),
    radial-gradient(1px 1px at 49% 21%, rgba(180,210,255,.8), transparent),
    radial-gradient(1px 1px at 58% 49%, #fff, transparent),
    radial-gradient(1px 1px at 67% 11%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 74% 66%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 82% 43%, #fff, transparent),
    radial-gradient(1px 1px at 91% 78%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 14% 86%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 46% 39%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 88% 5%, #fff, transparent);
  animation: star-twinkle 9s ease-in-out infinite alternate-reverse;
}
@keyframes star-twinkle {
  from { opacity: 0.7; }
  to { opacity: 1; }
}
.site-content,
#footer {
  position: relative;
  z-index: 1;
}
.main.txtcolrs,
.txtcolWhite {
  color: #d7e2f4;
}
.main.txtcolrs p,
.txtcolWhite p {
  color: #c5d2ea;
  line-height: 1.55;
}
.web-heading{
    height: 20px;
    color: #ef7720;
    font-weight: 700;
}
.web-heading-text{
    font-size: clamp(5px, 1.1vw, 25px);
}
.logo{
    display: flex;
    width: 60px;
    float: left;
}
.brand-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}
.brand-row .logo {
    float: none;
    flex-shrink: 0;
}
.brand-row .brand-title {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.brand-row .web-heading {
    height: auto;
}

h1{
	font-size: 30px !important;
	font-weight: 700 !important;
	width: max-content !important;
    color: #f3f0e8;
    text-shadow: 0 0 18px rgba(120, 160, 255, 0.35);
    }

/** featured **/

#featured li {
	float: left;
	width: 220px;
    min-height: 180px;
	margin: 0 10px;
	text-align: center;
    background: rgba(8, 16, 42, 0.62);
    border: 1px solid rgba(180, 200, 255, 0.18);
    border-radius: 10px;
    padding: 8px 8px 12px;
    box-sizing: border-box;
}
#featured li h3 {
	color: #f0f4ff;
    font-size: 18px;
    font-family: cursive;
    font-weight: bold;
    margin: 11px 0;
}
#featured li h3 a {
	color: #f0f4ff;
	text-decoration: none;
}
#featured li h3 a:hover {
	color: #8ec8ff;
}
#featured li p {
	color: #c9d6ee;
	font-size: 12px;
	text-align: center;
    overflow-y: auto;
}
#featured li img{
    width: 220px;
    height: 204px;
}

/*------------------------------ FOOTER ------------------------------*/
#footer {
	display: inline-block;
	width: 100%;
    border-top: 1px solid rgba(140, 170, 255, 0.18);
}
#footer h4 {
	color: #8ec8ff;
	font: normal 14px Georgia, "Times New Roman", Times, serif;
	margin: 0 0 12px;
}
#footer p {
	color: #7890a1;
	font-size: 12px;
	line-height: 24px;
	margin: 0;
	padding: 0 0 6px;
}
#footer .footnote {
	display: inline-block;
	text-align: center;
	color: #9bb4cc;
	width: 100%;
}
#footer .box{
	display: inline-table;
    float: left;
	margin: auto;
}
#footer .book-program-link {
	display: inline-block;
	width: 255px;
	padding: 0;
	line-height: 0;
	border: 3px solid #e2c27a;
	border-radius: 10px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		0 2px 0 #8a6a28,
		0 6px 12px rgba(0, 0, 0, 0.55);
	background: #0b1020;
	overflow: hidden;
	box-sizing: border-box;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#footer .book-program-link:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 3px 0 #8a6a28,
		0 8px 16px rgba(0, 0, 0, 0.6);
}
#footer .book-program-link img {
	display: block;
	width: 100%;
	height: auto;
}
.hit_counter {
  font-family: 'Segment7Standard', serif;
  font-size: 48px;
  color: #00FF00;
  text-shadow: 0 2px #FF0000, 2px 0 #FF0000, 0 -2px #FF0000, -2px 0 #FF0000;
}
/** links **/

#links {
	list-style: none;
	width: 178px;
	margin: 0;
	padding: 0;
}
#links li {
	margin: 0 0 6px;
	padding: 3px 0 10px;
    display: flex;
}
#links li:first-child {
	padding-top: 0;
}
#links li a {
	color: #d8eaff;
	line-height: 24px;
	text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    vertical-align: top;
    padding-left: 8px;
}
#links li a:hover {
	color: #0a34f0;
}

#desktop_menu a{
    width: max-content;
}

.rw{
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
}

@media (max-width: 768px) {
    html, body {
        min-width: 100% !important;
        max-width: 100%;
        overflow-x: hidden;
    }
    .brand-row .logo:not(.brand-title) {
        width: 36px;
    }
    .brand-row .web-heading-text {
        font-size: clamp(7px, 2.4vw, 13px) !important;
        line-height: 1.15;
        white-space: nowrap;
    }
    h1 {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    #featured {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
    }
    #featured li {
        width: 100%;
        max-width: 100%;
        margin: 0 0 16px;
        box-sizing: border-box;
    }
    #footer > div {
        max-width: 100% !important;
        width: 100%;
        box-sizing: border-box;
    }
    #footer .box {
        float: none;
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

.login-bx{
	margin: 5px;
    border: solid #ffcf0a;
    border-radius: 8px;
    padding: 2px;
}
.footer-login-box {
    padding: 18px 22px 16px;
    vertical-align: top;
}
.footer-login {
    width: 188px;
}
.footer-login .footer-login-field {
    display: block;
    margin: 0 0 10px;
}
.footer-login .footer-login-field span.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.footer-login .login-bx {
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 8px 10px;
    color: #1a2433;
    background: #ffffff;
    border: 1px solid rgba(180, 200, 255, 0.28);
    border-radius: 8px;
    outline: none;
    font-size: 13px;
}
.footer-login .login-bx::placeholder {
    color: #7a8899;
}
.footer-login .login-bx:focus {
    border-color: #e2c27a;
    box-shadow: 0 0 0 2px rgba(226, 194, 122, 0.28);
}
.footer-login .footer-login-btn {
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #1a6fb8 0%, #0d4e86 100%);
    border-color: rgba(226, 194, 122, 0.55);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.navSelected{
	font-weight: 800;
	transform: scale(1.2);
}