:root {

    --wm-orange: #ed7009;

    --wm-grey: #606060;

    --wm-dark: #1f2937;

    --wm-dark-2: #111827;

    --wm-white: #ffffff;

}

body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4 {
    font-weight: 700;
}

p {
    line-height: 1.7;
}

.navbar-brand img {
    height: 45px;
    width: auto;
}

.btn-wm-primary {
    background-color: var(--wm-orange);
    border-color: var(--wm-orange);
    color: white;
}

.btn-wm-primary:hover {
    background-color: var(--wm-orange-hover);
    border-color: var(--wm-orange-hover);
    color: white;
}

.navbar {

    padding-top: 15px;

    padding-bottom: 15px;

}

.nav-link {

    color: var(--wm-dark);

    font-weight: 500;

}

.nav-link:hover {

    color: var(--wm-orange);

}

.nav-link {

    color: var(--wm-grey);

    font-weight: 500;

    padding: 10px 18px !important;

    border-radius: 6px;

    transition: all 0.3s ease;

}

.nav-link:hover {

    background-color: var(--wm-orange);

    color: white !important;

    font-weight: 700;

}

.nav-link.active {
    background-color: var(--wm-orange);
    color: white !important;
    font-weight: 700;
}


/* ==========================================

   HERO SECTION

========================================== */

.hero-section {

    min-height: 70vh;

    display: flex;

    align-items: center;

}

.hero-tagline {

    color: var(--wm-orange);

    letter-spacing: 1px;

}

.hero-logo {

    max-width: 450px;

    width: 100%;

}

/* ==========================================

   HOMEPAGE

========================================== */

.bg-light {

    background-color: var(--wm-light-grey) !important;

}


.hero-section {

    background: linear-gradient(

        135deg,

        #3a3a3a 0%,

        #242424 100%

    );

    color: white;
}


.btn-wm-primary {
    background-color: #ed7009;
    border-color: #ed7009;
}

.hero-tagline {
    color: #ed7009;
}

.hero-typing-container {

    color: var(--wm-orange);

    font-weight: 700;

    font-size: 1.2rem;

    min-height: 40px;

    margin-bottom: 15px;

    letter-spacing: 0.5px;

}

.cursor {

    animation: blink 0.8s infinite;

}

@keyframes blink {

    50% {

        opacity: 0;

    }

}


/* ==========================================
   SERVICE CARDS
========================================== */

.service-card {

    background-color: white;

    padding: 30px;

    border-radius: 10px;

    border-top: 5px solid var(--wm-orange);

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    transition: all 0.3s ease;

}

.service-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

}

.service-card h4 {

    color: var(--wm-dark);

    margin-bottom: 15px;

    font-weight: 700;

}

.service-card p {

    color: var(--wm-grey);

    margin-bottom: 0;

    line-height: 1.6;

}

.service-card:hover {

    border-top-width: 8px;

}


/* ==========================================
   MSP SECTION
========================================== */

.msp-section {
    background-color: #f8f9fa;
}

.section-label {
    color: var(--wm-orange);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.4rem;
}

.msp-highlight {

    font-size: 1.1rem;

}

.msp-card {

    background-color: white;

    border-left: 5px solid var(--wm-orange);

    padding: 30px;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

}

.msp-card h4 {

    margin-bottom: 20px;

    color: var(--wm-dark);

    font-weight: 700;

}

.msp-card ul {

    padding-left: 20px;

    margin-bottom: 0;

}

.msp-card li {

    margin-bottom: 12px;

    color: var(--wm-orange);
    font-weight: 700;

}

/* ==========================================
   INDUSTRIES SECTION
========================================== */

.industries-section {
    background-color: #ffffff;
}

.industry-card {

    background-color: white;

    text-align: center;

    padding: 35px 20px;

    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    transition: all 0.3s ease;

    height: 100%;
}

.industry-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

}

.industry-card i {

    font-size: 2.5rem;

    color: var(--wm-orange);

    margin-bottom: 15px;

    display: block;

}

.industry-card h5 {

    color: var(--wm-dark);

    margin-bottom: 0;

    font-weight: 700;

}

/* ==========================================
   WHY CHOOSE US
========================================== */

.why-us-section {
    background-color: #f8f9fa;
}

.why-card {

    background-color: white;

    height: 100%;

    padding: 30px;

    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    border-top: 5px solid var(--wm-orange);

    transition: all 0.3s ease;

}

.why-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

}

.why-card h4 {

    color: var(--wm-dark);

    font-size: 1.25rem;

    margin-bottom: 15px;

    font-weight: 700;

}

.why-card p {

    color: var(--wm-grey);

    margin-bottom: 0;

    line-height: 1.7;

}

/* ==========================================
   HERO MISSION CARD
========================================== */

.mission-hero-card {

    background-color: rgba(255,255,255,0.08);

    backdrop-filter: blur(6px);

    padding: 35px;

    border-radius: 12px;

    border-left: 5px solid var(--wm-orange);

    box-shadow: 0 0 25px rgba(237,112,9,0.15);

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}

.mission-hero-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 30px rgba(0,0,0,0.25);

}

.mission-hero-card h3 {

    color: white;

    font-weight: 700;

}

.mission-hero-card p {

    color: rgba(255,255,255,0.9);

    line-height: 1.8;

}

.mission-hero-card hr {

    border-color: rgba(255,255,255,0.2);

}

.wifi-icon {

    color: var(--wm-orange);

    font-size: 2.2rem;

    margin-bottom: 15px;

    animation: pulse 2s infinite;

}

@keyframes pulse {

    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }

}

.mission-hero-card .bi-envelope-fill,
.mission-hero-card .bi-telephone-fill {

    color: var(--wm-orange);

    margin-right: 10px;

}

/* ==========================================
   HOMEPAGE CTA
========================================== */

.homepage-cta {

    background-color: #f8f9fa;

}

.cta-box {
        
    background: linear-gradient(

        135deg,

        #3a3a3a 0%,

        #242424 100%

    );

    color: white;

    padding: 60px 40px;

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

}

.cta-box h2 {

    color: white;

}

.cta-contact p {

    margin-bottom: 10px;

    font-size: 1.1rem;

}

.cta-contact i {

    color: var(--wm-orange);

    margin-right: 10px;

}

/* ==========================================
   FOOTER
========================================== */

.site-footer {

    background-color: #242424;

    color: rgba(255,255,255,0.85);

    padding: 60px 0 20px;

    border-top: 3px solid var(--wm-orange);

}

.footer-logo {

    max-height: 70px;

    width: auto;

    margin-bottom: 20px;

}

.site-footer h5 {

    color: white;

    margin-bottom: 20px;

}

.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-links li {

    margin-bottom: 12px;

}

.footer-links a {

    color: rgba(255,255,255,0.8);

    text-decoration: none;

    transition: 0.3s;

}

.footer-links a:hover {

    color: var(--wm-orange);

}

.site-footer i {

    color: var(--wm-orange);

    margin-right: 10px;

}

.site-footer hr {

    border-color: rgba(255,255,255,0.15);

}

.footer-contact-icon {

    color: var(--wm-orange);

    margin-right: 10px;

    animation: footerPulse 5s infinite;

}

@keyframes footerPulse {

    0% {

        text-shadow: none;

    }

    50% {

        text-shadow:
            0 0 8px rgba(237,112,9,0.8),
            0 0 16px rgba(237,112,9,0.5);

    }

    100% {

        text-shadow: none;

    }

}


/* ==========================================
   SERVICES PAGE
========================================== */

.services-hero {

background: linear-gradient(

        135deg,

        #3a3a3a 0%,

        #242424 100%

    );

    color: white;

}

.service-card {

    background: white;

    padding: 30px;

    border-radius: 12px;

    height: 100%;

    border-top: 4px solid var(--wm-orange);

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    transition: all 0.3s ease;

}

.service-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

}

.service-card h4 {

    color: var(--wm-dark);

    margin-bottom: 15px;

}

/* ==========================================
   TOOLS SECTION
========================================== */

.tool-card {

    background: white;

    padding: 25px;

    border-radius: 12px;

    height: 100%;

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    transition: all 0.3s ease;

}

.tool-card:hover {

    transform: translateY(-5px);

}

.tool-card h4 {

    color: var(--wm-orange);

    margin-bottom: 15px;

}

.certification-banner {

    background: linear-gradient(

        135deg,

        #3a3a3a 0%,

        #242424 100%

    );

    color: white;

    padding: 40px;

    border-radius: 12px;

    text-align: center;

    border-left: 5px solid var(--wm-orange);

}

.method-card {

    background: white;

    padding: 35px;

    border-radius: 15px;

    height: 100%;

    text-align: center;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

}

.method-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.15),
        0 0 20px rgba(237,112,9,0.25);

}

.method-icon {

    width: 70px;

    height: 70px;

    background: var(--wm-orange);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    color: white;

    font-size: 1.5rem;

    font-weight: 700;

    box-shadow:
        0 0 15px rgba(237,112,9,0.5);

}



/* ==========================================

   ABOUT PAGE

========================================== */

.about-highlight-card {

    background: linear-gradient(

        135deg,

        #343a40 0%,

        #242424 100%

    );

    color: white;

    padding: 40px;

    border-radius: 15px;

    border-left: 5px solid var(--wm-orange);

    box-shadow:

        0 10px 30px rgba(0,0,0,0.2);

    transition: all 0.3s ease;

}


.about-highlight-card:hover {

    transform: translateY(-5px);

    box-shadow:

        0 15px 35px rgba(0,0,0,0.25),

        0 0 20px rgba(237,112,9,0.25);

}

.about-highlight-card h3 {

    color: var(--wm-orange);

    font-weight: 700;

    margin-bottom: 20px;

}

.about-highlight-card::before {

    content: "";

    display: block;

    width: 60px;

    height: 4px;

    background: var(--wm-orange);

    margin-bottom: 20px;

    border-radius: 10px;

}

/* ==========================================
   CONTACT PAGE
========================================== */

.contact-card {

    background: white;

    padding: 35px;

    border-radius: 15px;

    text-align: center;

    height: 100%;

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    transition: all 0.3s ease;

}


.contact-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.15),
        0 0 20px rgba(237,112,9,0.25);

}

.contact-icon {

    color: var(--wm-orange);

    font-size: 2.5rem;

    margin-bottom: 20px;

    animation: pulse 4s infinite;

}

.contact-card a {

    color: var(--wm-orange);

    font-weight: 700;

    text-decoration: none;

}

.contact-card a:hover {

    text-decoration: underline;

}

.service-mini-card {

    background: white;

    padding: 20px;

    border-radius: 10px;

    border-top: 4px solid var(--wm-orange);

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    transition: all 0.3s ease;

}

.service-mini-card:hover {

    transform: translateY(-5px);

}

.service-mini-card h5 {

    margin-bottom: 0;

}

.contact-hero-icon {

    width: 120px;

    height: 120px;

    background: rgba(237,112,9,0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 30px;

    color: var(--wm-orange);

    font-size: 4rem;

    animation: wifiPulse 3s infinite;

}


/* ==========================================
   LEGAL PAGES
========================================== */

.legal-content {

    background: #f8f9fa;

}

.legal-card {

    border-top: 4px solid var(--wm-orange);

}

.legal-card {

    background: white;

    padding: 50px;

    border-radius: 15px;

    box-shadow:
        0 4px 15px rgba(0,0,0,0.08);

}

.legal-card h2 {

    color: var(--wm-dark);

    margin-top: 35px;

    margin-bottom: 15px;

    font-size: 1.5rem;

    font-weight: 700;

}

.legal-card p,
.legal-card li {

    color: #555;

    line-height: 1.8;

}

.legal-card ul {

    padding-left: 20px;

}

/* ==========================================
   RESOURCES PAGE
========================================== */

.resources-section {

    padding: 80px 0;

}

.resource-category {

    height: 100%;

}

.resource-category h2 {

    text-align: center;

    color: var(--wm-orange);

    font-size: 2.2rem;

    font-weight: 700;

    margin-bottom: 15px;

    position: relative;

}

.resource-category h2::after {

    content: '';

    display: block;

    width: 60px;

    height: 3px;

    background: var(--wm-orange);

    margin: 10px auto 0;

    border-radius: 10px;

}

.category-description {

    text-align: center;

    color: #666;

    min-height: 70px;

    margin-bottom: 35px;

}

.resource-list {

    display: flex;

    flex-direction: column;


}

.resource-card {

    background: #ffffff;

    padding: 35px;

    border-radius: 15px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08);

    border-top: 4px solid var(--wm-orange);

    transition: all 0.3s ease;

}



.resource-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 15px 35px rgba(0,0,0,0.15);

}

.resource-icon {

    font-size: 2rem;

    color: var(--wm-orange);

    margin-bottom: 20px;

}

.resource-card h3 {

    font-size: 1.4rem;

    font-weight: 700;

    margin-bottom: 15px;

}


.resource-card p {

    color: #666;

    margin-bottom: 25px;

}

.resource-link {

    color: var(--wm-orange);

    font-weight: 600;

    text-decoration: none;

}

.resource-link:hover {

    color: #c95e05;

}

.resource-more {

    text-align: center;

    margin-top: 25px;

}

.resource-more-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 24px;

    border-radius: 8px;

    background: var(--wm-orange);

    color: #ffffff;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;

}

.resource-more-btn:hover {

    color: #ffffff;

    transform: translateY(-2px);

}

.hero-icon {

    font-size: 3rem;

    color: var(--wm-orange);

    margin-bottom: 20px;

}

@media (max-width: 991px) {

    .resource-category {

        margin-bottom: 50px;

    }

}


.resource-category {

    margin-bottom: 70px;
    margin-bottom: 12px;

}



.category-description {

    margin-bottom: 25px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}




/* ========================================
   ARTICLE PAGES
======================================== */

.article-section {

    padding: 80px 0;

}

.article-content {

    max-width: 900px;

    margin: 0 auto;

}

.article-intro {

    font-size: 1.2rem;

    line-height: 1.8;

    margin-bottom: 50px;

    color: #444;

}

.article-block {

    margin-bottom: 50px;

}

.article-block h2 {

    color: var(--wm-orange);

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 20px;

}

.article-block p {

    line-height: 1.9;

    color: #555;

}

.key-takeaways {

    background: linear-gradient(
        135deg,

        #3a3a3a 0%,
        #242424 100%
    );

    color: white;

    padding: 40px;

    border-radius: 15px;

    margin-top: 60px;

    margin-bottom: 60px;

    border-left: 5px solid var(--wm-orange);

}

.key-takeaways h3 {

    color: var(--wm-orange);

    margin-bottom: 20px;

}

.key-takeaways ul {

    margin: 0;

    padding-left: 20px;

}

.key-takeaways li {

    margin-bottom: 10px;

}

.article-cta {

    background: var(--wm-white);

    padding: 50px;

    border-radius: 15px;

    text-align: center;

}

.article-cta h3 {

    margin-bottom: 15px;
    color: var(--wm-orange);

}

.article-cta p {

    margin-bottom: 25px;

}

.wm-btn {

    background: var(--wm-orange);

    color: white;

    border: none;

    padding: 14px 30px;

    border-radius: 10px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;

}

.wm-btn:hover {

    background: #c95e05;

    color: white;

    transform: translateY(-2px);

    box-shadow:

        0 8px 20px rgba(237,112,9,0.3);

}

.article-breadcrumb {

    margin-bottom: 30px;

    font-size: 0.95rem;

}

.article-breadcrumb a {

    color: #666;

    text-decoration: none;

    transition: color 0.3s ease;

}

.article-breadcrumb a:hover {

    color: var(--wm-orange);

}

.article-breadcrumb span {

    color: #999;

    margin: 0 6px;

}


.breadcrumb-current {

    color: var(--wm-orange) !important;

    font-weight: 600;

}

.breadcrumb-category {

    color: rgba(255,255,255,0.9);

    text-decoration: none;

    transition: color 0.3s ease;

}

.breadcrumb-category:hover {

    color: var(--wm-orange);


}

.article-header {

    background: linear-gradient(
        135deg,
        #3a3a3a 0%,
        #242424 100%
    );

    padding: 80px 0;

    color: white;

}

.article-header h1 {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 20px;

}

.article-header p {

    color: rgba(255,255,255,0.85);

    font-size: 1.2rem;

}

.article-breadcrumb {

    margin-bottom: 20px;

    color: rgba(255,255,255,0.7);

}

/* ========================================
   What is a Wi-Fi Survey Page
======================================== */

.article-subtitle {

    color: rgba(255,255,255,0.85);

    max-width: 700px;


}


.knowledge-box {

    background: #f8f9fa;

    border-left: 5px solid var(--wm-orange);

    padding: 35px;

    border-radius: 12px;

    margin: 60px 0;

}

.related-articles {

    margin: 60px 0;

}

.related-articles h3 {

    margin-bottom: 20px;

}

.related-articles ul {

    padding-left: 20px;

}

.related-articles li {

    margin-bottom: 10px;

}

.survey-types {

    margin-top: 25px;

    padding-left: 30px;

}

.survey-types li {

    margin-bottom: 25px;

    line-height: 1.8;

}

.survey-name {

    color: var(--wm-orange);

    font-weight: 700;

}

.survey-types {

    margin-top: 25px;

    padding-left: 30px;

}

.survey-types li {

    margin-bottom: 25px;

    line-height: 1.8;

}

.survey-name {

    color: var(--wm-orange);

    font-weight: 700;

}

.article-author {

    background: linear-gradient(
        135deg,
        #3a3a3a 0%,
        #242424 100%
    );

    border-left: 4px solid var(--wm-orange);

    padding: 25px;

    margin: 40px 0;

    border-radius: 10px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.05);

}

.article-author h3 {

    color: var(--wm-orange);

    margin-bottom: 15px;

    font-size: 1.3rem;

}

.article-author p {

    margin-bottom: 0;

    color: white;

}


/* TEST UPLOAD 2025 */

.test-upload-marker {

    color: red;

}