body {
    /*line-height:1.55;*/
}
/*:root{font-size:100%}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.55;color:#202124;background:#f4f6f8}
a{color:#0757a6}*/
/*button,input,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #e09b00;outline-offset:3px}.header{background:#173f35;color:white;padding:1.4rem}
.wrap{max-width:1000px;margin:auto}
main{padding:1.5rem}.hero,.card
                   
 {background:white;padding:1.4rem;border-radius:12px;margin-bottom:1rem}*/

/*.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}

.card{border:1px solid #ddd}.form{display:grid;gap:.7rem;max-width:500px}*/

.form label{font-weight:bold}

.form input,.form textarea{width:100%;padding:.7rem;border:1px solid #777;border-radius:5px}

.primary{background:#173f35;color:white;border:0;border-radius:6px;padding:.7rem 1rem}

#a11y{position:fixed;right:16px;bottom:16px;z-index:99999;color:#202124}

#launcher{background:#0067ff;color:#ffffff;border:2px solid white;border-radius:30px;padding:12px 16px;font-weight:bold;box-shadow:0 3px 14px #0004}

#panel{width:min(350px,calc(100vw - 32px));max-height:78vh;overflow:auto;background:white;color:#202124;border:2px solid #173f35;border-radius:12px;padding:1rem;margin-bottom:.6rem;box-shadow:0 8px 30px #0004}

#panel[hidden]{display:none!important}.panelhead{display:flex;justify-content:space-between;gap:.5rem}.panelhead h2{font-size:1.7rem;margin:0 0 .7rem}.control{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.7rem 0;border-top:1px solid #ddd}

.control label,.control .label{font-weight:600}.control button,#panel button{min-height:38px;padding:.4rem .65rem;border:1px solid #666;border-radius:5px;background:#f4f4f4;color:#111}.control input{width:20px;height:20px}.reset{width:100%;margin-top:.7rem;font-weight:bold}

.status{min-height:1.5em;font-size:.85rem}

html.high body{background:#000!important;color:#fff!important}

html.high .header,html.high .hero,html.high .card,html.high footer{background:#000!important;color:#fff!important;border:1px solid white}

html.high a{color:#ffeb3b!important}html.high input,html.high textarea,html.high .primary{background:#000!important;color:white!important;border:2px solid white!important}
 
  html.readable body{font-family:Arial,Verdana,sans-serif!important}
 
 html.spacing body{line-height:1.9!important}

html.gray body{filter:grayscale(1)}
html.links a{outline:2px solid currentColor;text-decoration:underline!important;font-weight:bold}
html.still *,html.still *:before,html.still *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}


/* ==========================================================================
   Accessibility: High Contrast Target Rules
   ========================================================================== */
html.high, 
html.high body, 
html.high #section_2,
html.high .section-bg,
html.high .custom-text-box {
    background-color: #000000 !important;
    background-image: none !important; /* Removes background image properties if any */
    color: #ffffff !important;
}

/* Force headings, list text, and counter icons to high contrast colors */
html.high h2, 
html.high h5, 
html.high p, 
html.high li,
html.high .counter-text, 
html.high .counter-number {
    color: #ffffff !important;
}

/* Make icons stand out distinctly (e.g., bright yellow) */
html.high .custom-text-box-icon {
    color: #ffff00 !important;
}

/* ==========================================================================
   Accessibility: Grayscale Target Rules
   ========================================================================== */
html.gray,
html.gray body,
html.gray #section_2 {
    filter: grayscale(100%) !important;
}


/* ==========================================================================
   Accessibility Modifications (Triggered by classes added to <html>)
   ========================================================================== */

/* 1. Font Size Scaling Rules */
html.readable .contact-section,
html.readable .contact-section p,
html.readable .contact-section h2,
html.readable .contact-section h5,
html.readable .contact-section .form-control,
html.readable .contact-section .btn {
    font-family: 'Open Sans', 'Arial', sans-serif !important; /* Forces a highly legible font */
}

/* 2. Line Spacing Rules */
html.spacing .contact-section p,
html.spacing .contact-section label,
html.spacing .contact-section .form-control {
    line-height: 2 !important;
    letter-spacing: 0.1em !important;
}

/* 3. Grayscale Rules */
html.gray .contact-section {
    filter: grayscale(100%) !important;
}

/* 4. Highlight Links Rules */
html.links .contact-section a {
    text-decoration: underline !important;
    background-color: #ffff00 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* 5. High Contrast Color Rules (Overrides text-warning & standard backgrounds) */
html.high body,
html.high .contact-section {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html.high .contact-section .contact-info-wrap,
html.high .contact-section .custom-form {
    background-color: #121212 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

/* Force headings to turn high-contrast yellow/white instead of default gold/warning */
html.high .contact-section h2.text-warning,
html.high .contact-section h5.text-warning,
html.high .contact-section p strong {
    color: #ffff00 !important; 
}

/* Links and Interactive Elements in High Contrast */
html.high .contact-section a,
html.high .contact-section a.text-warning {
    color: #00ffff !important;
}

/* Input Fields & Buttons in High Contrast */
html.high .contact-section .form-control {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

html.high .contact-section .form-control::placeholder {
    color: #bbbbbb !important;
}

html.high .contact-section .contactsubbut {
    background-color: #ffff00 !important;
    color: #000000 !important;
    font-weight: bold !important;
    border: none !important;
}



/* ==========================================================================
   Responsive Text Scaling Overrides for Header, Navbar, and Banner
   ========================================================================== */

/* Scales the Top Site Header content */
.site-header p, 
.site-header a {
    font-size: 1rem !important; /* Forces a relative layout sizing */
}

/* Scales the Navigation Brand Text and Rules */
.navbar-brand .logo_contaenttext {
    font-size: 1.25rem !important;
}

.navbar-brand small {
    font-size: 0.85rem !important;
    display: block;
}

/* Scales the Navbar Links (including ASP.NET LinkButtons) */
.navbar-nav .nav-link {
    font-size: 1rem !important;
}

/* Scales the Banner/Hero Headings */
.news-detail-header-section h1 {
    font-size: 2.5rem !important;
}

/* Fallback: Ensure everything inside main structural containers 
   is forced to scale off the root percentage if absolute pixel styles exist */

/* Set a solid reference base for your 100% size calculation */
/*html {
    
    font-size: 16px; 
}*/


/* 2. Fixes for the "Under Concession" Contact Section */
#section_6.contact-section h1.text-warning {
    font-size: 3rem !important; /* Forces layout tracking from root percentage */
}

/* 3. Fixes for the Hero Image Slider Carousel Section */
/* Converts hardcoded banner typography to root scaling */
/*.hero-section .carousel-caption h1 {
    font-size: 4.5rem !important; 
}*/

.hero-section .carousel-caption p {
    font-size: 1.5rem !important; /* Ensures the tagline description text scales down/up */
}



/* ==========================================================================
   Responsive Text Scaling Overrides for "Our Story" & Mission Section
   ========================================================================== */

/* 1. Base structural typography scaling */
#section_2.contact-section,
#section_2 .custom-text-box h2 {
    font-size: 2.25rem !important; /* Converts the main "Our Story" title */
}

#section_2 .custom-text-box h5 {
    font-size: 1.25rem !important; /* Converts sub-headings like "Our Mission" */
}

#section_2 .custom-text-box p {
    font-size: 1rem !important; /* Converts paragraphs to scale from root % */
    line-height: 1.6 !important;
}

/* 2. Fixes for the bulleted check-list items */
#section_2 .custom-list-item {
    font-size: 1rem !important;
}

#section_2 .custom-text-box-icon {
    font-size: 1.2rem !important; /* Ensures checkmarks scale with text size */
}

/* 3. Fixes for the dynamic counter widgets ("Founded" & "Member") */
#section_2 .counter-number,
#section_2 .counter-number-text {
    font-size: 3rem !important; /* Allows numerical metrics to grow cleanly */
    font-weight: bold !important;
    display: inline-block;
}

#section_2 .counter-text {
    font-size: 0.9rem !important; /* Scales down labels like "Founded" / "Member" */
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ==========================================================================
   Responsive Text Scaling Overrides for the Site Footer
   ========================================================================== */

/* 1. Main Footer Column Selectors */
.site-footer .site-footer-title {
    font-size: 1.25rem !important; /* Converts column headings like "Quick Links" */
}

.site-footer p, 
.site-footer .footer-menu-link, 
.site-footer .site-footer-link {
    font-size: 1rem !important; /* Forces layout tracking from root percentage */
    line-height: 1.6 !important;
}

.site-footer .bi-telephone,
.site-footer .bi-envelope,
.site-footer .bi-geo-alt {
    font-size: 1.1rem !important; /* Ensures the contact vector icons scale proportionally */
}

.site-footer .custom-btn {
    font-size: 0.95rem !important; /* Resizes the action buttons like "Get Direction" */
}

/* 2. Bottom Copyright Bar Selectors */
.site-footer-bottom .copyright-text,
.site-footer-bottom .copyright-text a {
    font-size: 0.85rem !important; /* Safely scales the tiny footer brand stamps */
}

.site-footer-bottom .social-icon-link {
    font-size: 1.2rem !important; /* Enables the profile shortcut symbols to expand cleanly */
}

/* 🟢 High Contrast Mode Styles */
html.high, 
html.high body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Ensure the header container obeys high contrast colors */
html.high .site-header,
html.high .site-header p,
html.high .site-header a,
html.high .site-header i {
    background-color: #000000 !important;
    color: #ffff00 !important; /* High contrast yellow for links/text is common */
    border-color: #ffffff !important;
}

/* Ensure social icon links are visible */
html.high .social-icon-link {
    color: #ffffff !important;
    background-color: #000000 !important;
    border: 1px solid #ffffff;
}

/* ==========================================================================
   🟢 HIGH CONTRAST MODE (.high) FOR NAVBAR
   ========================================================================== */
/* Force navbar container background to pitch black */
html.high .navbar,
html.high .navbar.bg-primary {
    background-color: #000000 !important;
    border-bottom: 2px solid #ffffff;
    box-shadow: none !important;
}

/* Force navbar brand and navigation links to high-contrast colors */
html.high .navbar .navbar-brand,
html.high .navbar .logo_contaenttext,
html.high .navbar .logo_contaenttext small,
html.high .navbar .nav-link {
    color: #ffffff !important;
}

/* Give links a bright yellow color on hover or when they are active */
html.high .navbar .nav-link:hover,
html.high .navbar .nav-link.active {
    color: #ffff00 !important; 
    text-decoration: underline !important;
}

/* Style the mobile menu burger menu icon white so it stays visible */
html.high .navbar-toggler {
    border-color: #ffffff !important;
}
html.high .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}


/* ==========================================================================
   🟢 GRAYSCALE MODE (.gray) FOR IMAGE LOGOS
   ========================================================================== */
/* Your code sets '.gray' class on html, this strips color out of your logo image */
html.gray .navbar .logo {
    filter: grayscale(100%) !important;
}
html.high .navbar .logo {
    filter: contrast(200%) brightness(1.5); /* Boosts image contrast in high-contrast mode */
}





/* ==========================================================================
   🟢 HIGH CONTRAST MODE (.high) FOR FOOTER
   ========================================================================== */
/* Force footer background to pitch black and text to pure white */
html.high .site-footer-bottom {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-top: 1px solid #ffffff;
}

/* Force standard copyright text to white */
html.high .site-footer-bottom .copyright-text,
html.high .site-footer-bottom .copyright-text p {
    color: #ffffff !important;
}

/* Force all hyperlinks in the footer to high-contrast yellow */
html.high .site-footer-bottom a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

/* Force the ASP.NET dynamically rendered Label1 span to yellow */
html.high .site-footer-bottom span {
    color: #ffff00 !important;
}

/* Style the social icon squares for high contrast visibility */
html.high .site-footer-bottom .social-icon-link {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

/* Highlight social icon squares on hover */
html.high .site-footer-bottom .social-icon-link:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}


@media screen and (min-width: 320px) and (max-width: 400px) {
    #launcher {
        margin-right: 60px;
    }

}


@media screen and (min-width: 420px) and (max-width: 480px) {
    #launcher {
        margin-right: 42px;
    }

}

/* Mobile responsive scaling adjustment (optional but highly recommended) */
@media (max-width: 991px) {
    .hero-section .carousel-caption h1 {
        font-size: 2.5rem !important;
    }
    .hero-section .carousel-caption p {
        font-size: 1.1rem !important;
    }
    #section_6.contact-section h1.text-warning {
        font-size: 2rem !important;
    }
}

@media (max-width:480px){
    main{padding:1rem}#a11y{right:10px;bottom:10px}
}
    @media (prefers-reduced-motion:reduce)
    {*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}