@font-face {
    font-family: "open-sans";          /* ← This is the name you'll use in font-family */
    src: url("../fonts/open-sans/OpenSans-Regular-HGJZxRD.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;             /* recommended for performance */
}

@font-face {
    font-family: "open-sans";
    src: url("../fonts/open-sans/OpenSans-Semibold-NMKmwZY.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "open-sans";
    src: url("../fonts/open-sans/OpenSans-Bold-7BmbGn_.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "open-sans";
    src: url("../fonts/open-sans/OpenSans-Light-jIlR4D_.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "open-sans";
    src: url("../fonts/open-sans/OpenSans-Italic-eFzjdqT.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


:root{
    --pp-dark-purple: #510C5A;
    --pp-purple-orchid: #B719CC;
    --pp-fuchsia-purple: #AF328E;
    --pp-bright-purple: #C547D6;
    --pp-magnolia: #FBF4FC;
}

.open-sans{
    font-family: "open-sans", sans-serif;
}

body{padding-top: 160px !important;}

html {scroll-behavior: smooth;   /* beautiful smooth scrolling */}

html,
body {
    overflow-x: hidden; /* Prevent scroll on narrow devices */
}

a, a:link, a:visited, a:active, a:hover{
    text-decoration: none;
}

form,
input {
    font-family: "open-sans", sans-serif;
}

input{
    height: 65px;
}

/** JOE'S CSS */
.btn-purplish{
    color: white;
    background-color: #AF328E
}

.dropdown-toggle::after{
    border-top: 0.3em solid var(--pp-purple-orchid);
}

.bg-dark-purple{background-color: var(--pp-dark-purple);}
.bg-purple-orchid{background-color: var(--pp-purple-orchid);}
.bg-fuchsia-purple{background-color: var(--pp-fuchsia-purple);}
.bg-bright-purple{background-color: var(--pp-bright-purple);}
.bg-magnolia{background-color: var(--pp-magnolia);}

.text-purple-orchid{color: var(--pp-purple-orchid);}
.text-fuchsia-purple{color: var(--pp-fuchsia-purple);}

.hero-section::before
{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(80, 120, 200, 0.45);   /* ← cold deep purple from #510C5A */
    mix-blend-mode: multiply;             /* makes it feel colder & richer */
}

.service-card{
    background: url("../images/pp-home-with-bubble-ch57muF.jpg");
    background-position: center center;
    background-size: cover !important;
    background-repeat: no-repeat;
    width: 350px;
    min-height: 400px;
}

.service-card:before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));   /* ← cold deep purple from #510C5A */
    mix-blend-mode: multiply;             /* makes it feel colder & richer */
}

/** bootstrap components **/
.card {
    background-color: transparent;
}

.card .card-title{
    font-size: 1.5vw;
    font-family: NextSphere, sans-serif;
    color:#fff;
}

.table-grid{
    width: 100% !important;
    border: 1px solid #cccccc;
    border-collapse: collapse;
}

.table-grid > thead > tr > th,
.table-grid > tbody > tr > td
{
    border: 1px solid #cccccc;
}

.table-grid > thead > tr > th
{
    padding-top: 4px;
    padding-bottom: 4px;
    background-color: #F7F7F9;
}

.table-grid > thead > tr > th,
.table-grid > tbody > tr > td
{

    padding-left: 8px !important;
}

/** font sizes **/
.fs-1vw {font-size: 1.2vw;}
.fs-2vw {font-size: 2.4vw;}
.fs-3vw {font-size: 3.6vw;}
.fs-4vw {font-size: 4.8vw;}
.fs-5vw {font-size: 6.0vw;}

/** z-index **/
.z-100{z-index: 100 !important;}
.z-200{z-index: 200 !important;}
.z-300{z-index: 300 !important;}
.z-400{z-index: 400 !important;}
.z-500{z-index: 500 !important;}
.z-600{z-index: 600 !important;}
.z-700{z-index: 700 !important;}
.z-800{z-index: 800 !important;}
.z-900{z-index: 900 !important;}
.z-1000{z-index: 1000 !important;}

/** z-index (negative) **/
.z-n2 {z-index: -2 !important;}
.z-n3 {z-index: -3 !important;}
.z-n4 {z-index: -4 !important;}
.z-n5 {z-index: -5 !important;}
.z-n6 {z-index: -6 !important;}
.z-n7 {z-index: -7 !important;}
.z-n8 {z-index: -8 !important;}
.z-n9 {z-index: -9 !important;}
.z-n10 {z-index: -10 !important;}

/** background opacities **/
.bg-opacity-1i {opacity: 0.1 !important;-moz-opacity: 0.1 !important;}
.bg-opacity-2i {opacity: 0.2 !important;-moz-opacity: 0.2 !important;}
.bg-opacity-3i {opacity: 0.3 !important;-moz-opacity: 0.3 !important;}
.bg-opacity-4i {opacity: 0.4 !important;-moz-opacity: 0.4 !important;}
.bg-opacity-5i {opacity: 0.5 !important;-moz-opacity: 0.5 !important;}
.bg-opacity-6i {opacity: 0.6 !important;-moz-opacity: 0.6 !important;}
.bg-opacity-7i {opacity: 0.7 !important;-moz-opacity: 0.7 !important;}
.bg-opacity-8i {opacity: 0.8 !important;-moz-opacity: 0.8 !important;}
.bg-opacity-9i {opacity: 0.9 !important;-moz-opacity: 0.9 !important;}
.bg-opacity-10i {opacity: 1 !important;-moz-opacity: 1 !important;}

/** horizontal margins **/
.mx-100 {margin-left: 100px !important;margin-right: 100px !important;}
.mx-200 {margin-left: 200px !important;margin-right: 200px !important;}
.mx-300 {margin-left: 300px !important;margin-right: 300px !important;}
.mx-400 {margin-left: 400px !important;margin-right: 400px !important;}
.mx-500 {margin-left: 500px !important;margin-right: 500px !important;}
.mx-600 {margin-left: 600px !important;margin-right: 600px !important;}
.mx-700 {margin-left: 700px !important;margin-right: 700px !important;}
.mx-800 {margin-left: 800px !important;margin-right: 800px !important;}
.mx-900 {margin-left: 900px !important;margin-right: 900px !important;}
.mx-1000 {margin-left: 1000px !important;margin-right: 1000px !important;}

/** extra margins **/
.sx-1 {height: 1rem !important;}
.sx-2 {height: 2rem !important;}
.sx-3 {height: 3rem !important;}
.sx-4 {height: 4rem !important;}
.sx-5 {height: 5rem !important;}
.sx-6 {height: 6rem !important;}
.sx-7 {height: 7rem !important;}
.sx-8 {height: 8rem !important;}
.sx-9 {height: 9rem !important;}
.sx-10 {height: 10rem !important;}

/** purple/pink text/bg colors **/
.btn-purple {background-color: #6f42c1;color: #fff !important;}
.btn-purple:hover {background-color: #8c68cd;}
.bg-purple {--bs-bg-opacity: 1;background-color: #6f42c1 !important;}

.bg-pink {--bs-bg-opacity: 1;background-color: #de5c9d !important;}
.bg-pink-priority{background-color: #D200FF !important;}

/** gradients **/
.bg-gradient-sudo{
    background-image: linear-gradient(rgb(195,53,101), rgb(99,48,112));
}

.text-gradient-sudo{
    background: linear-gradient(rgb(195,53,101), rgb(99,48,112));
    background: -webkit-linear-gradient(rgb(195,53,101), rgb(99,48,112));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-gradient-camtien{
    background-image: linear-gradient(#000, #6F42C1);
}
.bg-gradient-lukoy{
    background-image: linear-gradient(#6F42C1, #000);
}
.bg-gradient-megs{
    background-image: linear-gradient(#6F42C1, rgb(195,53,101), #000);
}

.blink {
    animation: blink 1s infinite;
    -webkit-animation: blink 1s infinite;
    -webkit-transform: translate3d(0, 0, 0);
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes blink { /* For Safari compatibility */
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.text-purple-100 {
    color: #6f42c1 !important;
}

.text-pink-100 {
    color: #d63384 !important;
}

.text-purple-200 {
    color: #7043c1 !important;
}

.text-pink-200 {
    color: #d63484 !important;
}

.text-purple-300 {
    color: #7043c1 !important;
}

.text-pink-300 {
    color: #d63485 !important;
}

.text-purple-400 {
    color: #7044c1 !important;
}

.text-pink-400 {
    color: #d63585 !important;
}

.text-purple-500 {
    color: #6f42c1 !important;
}

.text-pink-500 {
    color: #d63384 !important;
}

.text-purple-600 {
    color: #59359a !important;
}

.text-pink-600 {
    color: #ab296a !important;
}

.text-purple-700 {
    color: #432874 !important;
}

.text-pink-700 {
    color: #801f4f !important;
}

.text-purple-800 {
    color: #2c1a4d !important;
}

.text-pink-800 {
    color: #561435 !important;
}

.text-purple-900 {
    color: #160d27 !important;
}

.text-pink-900 {
    color: #2b0a1a !important;
}

/** insects **/
.bed-bug, .roach, .termite, .mosquito, .flea, .rodent, .moisture-control{
    height: 312px;
    background-image: url("../images/pest-control-sprite-yuoUvY6.png");
    background-repeat: no-repeat;
}

.flea{background-position: 0 0;}
.termite{background-position: 0 -961.4px;}
.mosquito{background-position: 0 -1585.2px;}
.bed-bug{background-position: 0 -1897px;}
.roach{background-position:  0 -2521.1px;}
.rodent{background-position: 0 -3145.1px}
.moisture-control{background-position: 0 -3457px}

@media (max-width: 991.98px) {
    .offcanvas-collapse {
        position: fixed;
        top: 160px; /* Height of navbar */
        bottom: 0;
        left: 100%;
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        visibility: hidden;
        background-color: var(--pp-magnolia);
        transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    }
    .offcanvas-collapse.open {
        visibility: visible;
        transform: translateX(-100%);
    }

    .dropdown-menu .dropdown-item {
        white-space: normal !important;   /* force wrap */
        padding: 0.5rem 1.5rem;           /* optional: nicer spacing */
        line-height: 1.4;
    }
}

@media (max-width: 767.98px) {
    .tech {
        display: none;
    }
}
@media (max-width: 1399.98px) {
    /** font sizes **/
    .fs-1vw {
        font-size: 1.9vw;
    }
    .fs-2vw {
        font-size: 3.8vw;
    }
    .fs-3vw {
        font-size: 5.7vw;
    }
    .fs-4vw {
        font-size: 7.6vw;
    }
    .fs-5vw {
        font-size: 9.5vw;
    }
    /** extra margins **/
    .sx-1 {
        height: 50px !important;
    }
    .sx-2 {
        height: 50px !important;
    }
    .sx-3 {
        height: 50px !important;
    }
    .sx-4 {
        height: 50px !important;
    }
    .sx-5 {
        height: 50px !important;
    }
    .sx-6 {
        height: 50px !important;
    }
    .sx-7 {
        height: 50px !important;
    }
    .sx-8 {
        height: 50px !important;
    }
    .sx-9 {
        height: 50px !important;
    }
    .sx-10 {
        height: 50px !important;
    }
    .mx-100 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .mx-200 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .mx-300 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .mx-400 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .mx-500 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .mx-600 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .mx-700 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .mx-800 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .mx-900 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .mx-1000 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

@media print {
    .no-print {display: none;}
    .page-break { break-after: page; }

    #signature-img {
        display: flex; /* Ensure Flexbox is used */
        justify-content: center;
        align-items: center;
        width: 300px; /* Explicit size */
        height: 150px;
        position: relative;
        page-break-inside: avoid; /* Prevent splitting across pages */
        margin: 0;
        padding: 0;
    }

    #signature-img svg {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        overflow: visible;
    }
}

label.required:before {
    content: "*";
    color: red;
}

.border-pink{
    border: 1px solid #D200FF !important; /* Light gray background */
}

/** Overriding Garner's dept. of commerce widget */
.mn-widget-member-name,
.mn-widget-member-text{
    display: none;
}