/* Banner */

	body.is-preload #banner .logo {
		-moz-transform: none;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		opacity: 1;
	}

	body.is-preload #banner h2 {
		opacity: 1;
		-moz-transform: none;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		-moz-filter: none;
		-webkit-filter: none;
		-ms-filter: none;
		filter: none;
	}

	body.is-preload #banner p {
		opacity: 01;
		-moz-transform: none;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		-moz-filter: none;
		-webkit-filter: none;
		-ms-filter: none;
		filter: none;
	}

/* ------------- BANNER / HERO ------------------- */

/* Banner base */
#banner {
    background-position: center center !important;
    background-size: cover !important;
    min-height: 100px;
    max-height: none;
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible !important;
    z-index: 1;
    box-shadow: 0  4px 8px rgba(0,0,0,.3);
}

/* Desktop: more room for call button */
@media screen and (min-width: 737px) {
    #banner {
        padding-top: 9em !important;
        padding-bottom: 5em !important;
    }

    #banner .inner {
        padding-bottom: 5em !important;
    }
}

/* Mobile: less banner height, more space below shadow */
@media screen and (max-width: 736px) {
    #banner {
        padding-top: 5em !important;
        padding-bottom: 3em !important;
        margin-top: -50px;
    }

    #banner .inner {
        padding-bottom: 1.5em !important;
    }
}

#banner .inner {
    text-align: center;
    max-width: 1050px;
    padding-bottom: 4em;
}

#banner .kicker {
    color: #86c2ff; 
    font-size: clamp(1rem, 5vw, 2em);
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
    letter-spacing: 0.0;
    margin-bottom: 0em;
    font-weight: 0;
}

#banner h2 {
    color: #ffffff !important;
    font-family: system-ui, sans-serif !important;
    font-size: clamp(2rem, 5vw, 3em);
    line-height: 1;
    letter-spacing: 0;
    border-bottom: solid 2px rgba(255,255,255,.25);
    padding-bottom: 0.5em;
    margin-bottom: 0.6em;
}

#banner .desc {
    color: #ffffff !important;
    font-family: system-ui, sans-serif !important;
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    font-weight: 600;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    letter-spacing: 0px;
}

#banner {
    position: relative;
    overflow: hidden;
}

#banner::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            #2c3e50c0,
            #2f80d0
        ),
        url("images/bg.jpg");

    background-size: cover;
    background-position: center;

    filter: blur(2px);
    transform: scale(1);

    z-index: 0;
}

#banner .inner {
    position: relative;
    z-index: 1;
}


/* ------------- NAV ------------------- */

/* White/light gray navbar */
#header {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 8px rgba(0,0,0,.25);
}

@font-face {
    font-family: 'TwCenMTCondensedExtraBold';
    src: url('assets/fonts/TwCenMTCondensedExtraBold.ttf') format('truetype');
}

/* Company name */
#header h1 a {
    color: #2f80d0;
    font-size: 1.8em;
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
    letter-spacing: 0.0;
}

/* Services text */
#header nav a {
    color: #2f80d0;
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
    font-size: 1.5em;
    letter-spacing: 0.0;
}

/* Services button border */
#header nav a[href="#menu"] {
    box-shadow: inset 0 0 0 2px #2f80d0;
}

/* Services button hover */
#header nav a[href="#menu"]:hover {
    background-color: rgba(47,128,208,.08);
}

/* Hamburger icon */
#header nav a[href="#menu"]:before {
    color: #2f80d0;
}

/* Desktop logo size */
.header-logo {
    height: 64px;
    width: auto;
}

/* Services button hover */
#header nav a[href="#menu"]:hover {
    background-color: #2f80d0 !important;
    color: #ffffff !important;
}

/* Hamburger icon hover */
#header nav a[href="#menu"]:hover:before {
    color: #ffffff !important;
}

/* ------------- MOBILE NAV FIX ------------------- */

@media screen and (max-width: 736px) {

    #header {
        height: 4em;
        display: flex;
        align-items: center;
    }

    #header h1 {
        max-width: 42%;
        overflow: hidden;
        white-space: nowrap;
    }

    #header h1 a {
        font-size: 1.75em !important;
        white-space: nowrap;
    }

    #header h1 a {
        font-size: 0 !important;
    }

    #header h1 a::after {
        content: "TRI-SHIELD";
        font-size: 1.4rem;
        color: #2f80d0;
        font-family: 'TwCenMTCondensedExtraBold', sans-serif;
    }

    .header-cta {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-logo {
        max-height: 56px;
        width: auto;
    }

    #header nav {
        right: 0.5em;
    }

    #header nav a {
        font-size: 1.6em !important;
        padding: 0 0.8em !important;
        height: 2em;
        line-height: 2em;
    }

    #header nav a[href="#menu"] {
        box-shadow: inset 0 0 0 2px #2f80d0;
        border-radius: 4px;
    }
}


/* ------------- BODY ------------------- */

/* Straighten diagonal section backgrounds */
.wrapper:before,
.wrapper:after {
    transform: none !important;
    -webkit-transform: none !important;
    height: 0 !important;
}

/* Remove angled offset spacing from sections */
.wrapper {
    margin: 0 !important;
    padding-top: 4em !important;
    padding-bottom: 4em !important;
}

/* Keep section backgrounds horizontal */
.wrapper.spotlight {
    background-clip: border-box !important;
    padding-top: 0em !important;
    padding-bottom: 1em !important;
}

/* Remove gap between spotlight sections */
.wrapper.spotlight + .wrapper.spotlight {
    margin-top: 0 !important;
}

/* Main section headings */
.wrapper.spotlight.style1 h2{
    color: #2f80d0 !important;
    font-size: 3em !important;
    letter-spacing: 0.0em;
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
    white-space: nowrap !important;

}
.wrapper.spotlight.style2 h2 {
    color: #ffffff !important;
    font-size: 3em !important;
    letter-spacing: 0.0em;
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
    white-space: nowrap !important;
}
.wrapper.spotlight.style3 h2{
    color: #2f80d0 !important;
    font-size: 3em !important;
    letter-spacing: 0.0em;
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
    white-space: nowrap !important;
}



/* Section 1 */
.wrapper.spotlight.style1 {
    background-color: #ffffff !important;
    color: #2f80d0 !important;
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
}
/* Section 2 */
.wrapper.spotlight.style2 {
    background-color: #286baf8a !important;
    color: #FFFFFF !important;
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
}
/* Section 3 */
.wrapper.spotlight.style3 {
    background-color: #ffffff !important;
    color: #2f80d0 !important;
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
}

/* BODY TEXT - Section 1 */
.wrapper.spotlight.style1 .content {
    color: #286baf !important;
    font-size: 1em;
    line-height: 1.8;
    font-family: Arial, sans-serif;

    margin-top: 3em;
}

/* BODY TEXT - Section 2 */
.wrapper.spotlight.style2 .content {
    color: #ffffff !important;
    font-size: 1em;
    line-height: 1.8;
    font-family: Arial, sans-serif;
}

/* BODY TEXT - Section 3 */
.wrapper.spotlight.style3 .content {
    color: #286baf !important;
    font-size: 1em;
    line-height: 1.8;
    font-family: Arial, sans-serif;
}

/* Learn More link */
.wrapper.spotlight.style1 a.special {
    color: #2f80d0 !important;
}
.wrapper.spotlight.style2 a.special {
    color: #ffffff !important;
}
.wrapper.spotlight.style3 a.special {
    color: #2f80d0 !important;
}

/* Circle around arrow */
.wrapper.spotlight.style1 a.special:before {
    color: #2f80d0 !important;
    border-color: #2f80d0 !important;
    box-shadow: inset 0 0 0 2px #2f80d0 !important;
}
.wrapper.spotlight.style2 a.special:before {
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: inset 0 0 0 2px #ffffff !important;
}
.wrapper.spotlight.style3 a.special:before {
    color: #2f80d0 !important;
    border-color: #2f80d0 !important;
    box-shadow: inset 0 0 0 2px #2f80d0 !important;
}
/* Hover */
.wrapper.spotlight a.special:hover {
    color: #86c2ff !important;
}

.wrapper.spotlight a.special:hover:before {
    color: #86c2ff !important;
    border-color: #86c2ff !important;
    box-shadow: inset 0 0 0 2px #86c2ff !important;
}

/* White sections = blue divider */
.wrapper.spotlight.style1 h2.major,
.wrapper.spotlight.style3 h2.major {
    border-bottom: solid 2px #286baf48 !important;
}

/* Blue section = white divider */
.wrapper.spotlight.style2 h2.major {
    border-bottom: solid 2px rgba(255, 255, 255, 0.301) !important;
}

/* Make service section wider */
.wrapper.spotlight .inner {
    max-width: 1280px !important;
    width: 100% !important;
    align-items: center !important;
}

/* Give image more space */
.wrapper.spotlight .image {
    width: 30% !important;
    max-width: 40% !important;
}

/* Give text slightly less space */
.wrapper.spotlight .content {
    width: 55% !important;
}

.wrapper.spotlight h2.major {
    font-size: clamp(1.5rem, 3.2vw, 10em) !important;
}

.wrapper.spotlight .content {
    font-size: clamp(0.9rem, 1.05vw, 1.25rem) !important;
    line-height: 1.65;
}

.wrapper.spotlight a.special {
    font-size: clamp(0.9rem, 0.95vw, 1rem) !important;
}

.wrapper.spotlight .image img {

    height: auto !important;
}

.wrapper.spotlight .content {
    width: 70% !important;
}

.wrapper.spotlight .image {
    width: 50% !important;
}

/* ----------- CONTACT US --------------- */
#wrapper,
#four,
.wrapper.alt.style1 {
    background-color: #286baf8a !important;
    color: #ffffff !important;
    padding-top: 0em !important;
    padding-bottom: 0em !important;
}
#four h2.major {
    color: #ffffff !important;
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
    letter-spacing: 0px;

    /* CHANGE THESE */
    font-size: 2.5em !important;
    border-bottom: solid 2px rgba(255,255,255,.35) !important;
}
#four label {
    color: #ffffff !important;
    /* font-size: 1em; */
}

#four input[type="text"],
#four input[type="email"],
#four input[type="tel"],
#four select,
#four textarea {
    background: #f3f3f3 !important;

    color: #286baf !important;
    border: solid 2px #d3dcef !important;
    border-radius: 4px;
    font-family: system-ui, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600;
}

#four ::placeholder {
    color: #888888 !important;
}
#four select {
    color: #444444 !important;
}
#four input[type="submit"] {

    background: #ffffff !important;
    color: #286baf !important;

    /* CHANGE THESE */
    border: solid 2px #d3dcef !important;
    font-size: 0.8em;
}
#four input[type="submit"]:hover {
    background: #ffffff2c !important;
    color: #ffffff !important;
    border: solid 2px #ffffff !important;
}
#Phone {
    height: 2.7em !important;
}

/* Category dropdown */
#four select {
    background-color: #ffffff !important;
    color: #286baf !important;
    border: 2px solid #d3dcef !important;
    border-radius: 4px !important;
    font-family: system-ui, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600;
}

/* Dropdown options */
#four select option {
    background-color: #ffffff;
    color: #286baf;
    font-family: system-ui, sans-serif;
    font-weight: 600;
}

/* Disabled placeholder option */
#four select option:disabled {
    color: #777777;
}

/* Focus state */
#four select:focus {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.45) !important;
}

/* Contact section separation */
#four {
    position: relative;
    z-index: 10;
    box-shadow:
    0 -4px 8px rgba(0,0,0,.3),
    0  4px 8px rgba(0,0,0,.3);
}

/* ------------- POSTS SECTION ------------------- */

#five {
    background: #ffffff !important;
    color: #286baf !important;
    padding-top: 1em !important;
    padding-bottom: 0em !important;
}

#five h2.major {
    color: #286baf !important;
    border-bottom: solid 2px rgba(40, 107, 175, 0.35) !important;


}

#five p,
#five b {
    color: #286baf !important;
}

/* Blog cards */
#five .features article {
    background: #286baf !important;
    color: #ffffff !important;
    border: solid 1px rgba(255,255,255,.15) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Blog titles */
#five .features article h3.major {
    color: #ffffff !important;
    border-bottom: solid 2px rgba(255,255,255,.25) !important;
}

/* Blog body text */
#five .features article p,
#five .features article b {
    color: #ffffff !important;
    font-family: system-ui, sans-serif !important;
}

#five .button {
    background: #286baf !important;
    color: #ffffff !important;
    border: solid 2px #286baf !important;
    box-shadow: none !important;
    font-size: 0.8em;
}

#five .button:hover {
    background: #86c2ff1e !important;
    color: #286baf !important;
    border: solid 2px #286baf !important;
}

/* ------------- CONTACT INFO SECTION ------------------- */
#six {
    background: #286baf !important;
    color: #ffffff !important;
    position: relative;
    z-index: 10;
    box-shadow:
    0 -4px 8px rgba(0,0,0,.3),
    0  4px 8px rgba(0,0,0,.3);
}

#six .contact li,
#six .contact li a {
    color: #ffffff !important;
    font-family: system-ui, sans-serif !important;
    font-weight: 600;
}

/* Contact icons */
#six .contact li:before {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.45) !important;
}

/* Fix phone icon alignment/appearance */
#six .contact li.fa-phone:before {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.45) !important;
}

/* Link hover */
#six .contact li a:hover {
    color: #dcecff !important;
}

/* Mobile footer/social/contact centering */
@media screen and (max-width: 736px) {

    #six .contact {
        text-align: center !important;
        padding-left: 0 !important;
    }

    #six .contact li {
        display: block !important;
        text-align: center !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    #six .contact li:before {
        position: relative !important;
        display: block !important;
        margin: 0 auto 0.75em auto !important;
        left: auto !important;
        top: auto !important;
    }
}

/* ------------- FOOTER ------------------- */

#footer .copyright {
    border-top: none !important;
}

#footer {
    position: relative;
    overflow: hidden;
    margin-top: -6em;
}

#footer::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            #2f80d0,
            #2c3e50c0
        ),
        url("images/bg.jpg");

    background-size: cover;
    background-position: center;

    filter: blur(2px);
    transform: scale(1);

    z-index: 0;
}

#footer .inner {
    position: relative;
    z-index: 1;
}

/* Hero call button */
#banner .banner-call-btn {
    display: inline-block;
    margin-top: clamp(1.2em, 2vw, 2em);
    padding: clamp(0.9em, 1.2vw, 1.1em) clamp(1.6em, 4vw, 4em);
    margin-bottom: 0;

    background: #FFFFFF;
    color: #2f80d0 !important;

    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);

    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

#banner .banner-call-btn:hover {
    background: #2f80d0;
    color: #ffffff !important;
}

#banner {
    padding: 10em 0 0em 0 !important;
}
    #banner .banner-call-btn .desktop-call-text {
        display: inline;
    }

    #banner .banner-call-btn .mobile-call-text {
        display: NONE;
    }

/* Mobile button scaling */
@media screen and (max-width: 736px) {
    #banner .banner-call-btn {
        width: 100%;
        max-width: 360px;
        font-size: clamp(0.8rem, 3.5vw, 1rem);
        white-space: normal;
    }
        #banner .banner-call-btn .desktop-call-text {
        display: none;
    }

    #banner .banner-call-btn .mobile-call-text {
        display: inline;
    }
}

/* ------------- SERVICES POPUP MENU ------------------- */

#menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

#menu .inner {
    width: min(400px, calc(100vw - 2em)) !important;
    margin: 0 auto !important;
}

#menu .inner {
    background: #ffffff !important;
    color: #286baf !important;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.30);
    width: 400px;
}

#menu h2 {
    color: #286baf !important;
    font-family: system-ui, sans-serif !important;
    font-family: 'TwCenMTCondensedExtraBold', sans-serif !important;
    font-size: 3em !important;
    letter-spacing: 0;
        border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: -0.5em;
    margin-bottom: 0.1em !important;
}

#menu .links li {
    border-top: solid 1px rgba(40,107,175,.18) !important;
    font-size: 2.5em;
}

#menu .links a {
    color: #286baf !important;
    font-family: system-ui, sans-serif !important;
    letter-spacing: 0.04em;
    font-weight: 600;
}

#menu .links a:hover {
    background: #286baf !important;
    color: #ffffff !important;
}

#menu .close {
    color: #286baf !important;
}

#menu .close:before,
#menu .close:after {
    background-color: #286baf !important;
}