/* ============================================================
   Watchman Security Services Sdn Bhd
   Brand overrides + styles for the custom sections added on top
   of the Securepress template.
   ============================================================ */

:root {
    --wm-green: #2f8f3e;
    --wm-green-dark: #1f6b2c;
    --wm-lime: #8dc63f;
    --wm-purple: #453273;
    --wm-purple-deep: #2a1e4a;
    --wm-ink: #23252b;
    --wm-body: #6a6c73;
    --wm-line: #e4e6ea;
    --wm-soft: #f6f8f5;
}

/* ---------- preloader ---------- */
/* Paired with js/watchman.js, which guarantees the preloader is dismissed
   even if a third-party resource never finishes loading. */
#preloader {
    transition: opacity .35s ease;
}

/* ---------- header ---------- */
/* Mark + stacked wordmark, set to match the printed company logo. */
.logo a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.logo img {
    max-height: 72px;
    width: auto;
    flex-shrink: 0;
}

.wm-logo-text {
    display: flex;
    flex-direction: column;
    color: var(--wm-purple);
    line-height: 1.05;
    white-space: nowrap;
}

.wm-logo-name {
    font-family: "Montserrat", sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: .6px;
}

.wm-logo-sub {
    font-family: "Montserrat", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .1px;
    margin-top: 3px;
}

.hd-rgt .wm-badge-top {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 3px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
}

.hd-rgt ul li {
    list-style: none;
}

.wm-hd-cta a {
    display: inline-block;
    background: var(--wm-green);
    color: #fff;
    padding: 10px 18px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    transition: background .25s ease;
}

.wm-hd-cta a:hover {
    background: var(--wm-purple);
    color: #fff;
}

.wm-hd-cta a i {
    margin-right: 6px;
}

/* ---------- page headers ---------- */
/* Each inner page carries its own banner photo in place of the template's
   pg_hd.jpg. Those sources are far taller in proportion than the banner strip,
   so "cover" crops them hard - each is anchored slightly above centre to keep
   the subject in frame. */
.pagehding-sec.wm-pagehead-about {
    background-image: url("../img/52980658.jpg");
    background-position: center 40%;
}

.pagehding-sec.wm-pagehead-services {
    background-image: url("../img/banner2.jpg");
    background-position: center 40%;
}

.pagehding-sec.wm-pagehead-contact {
    background-image: url("../img/banner3.jpg");
    background-position: center 40%;
}

/* ---------- quote form feedback ---------- */
.wm-form-success {
    background: rgba(47, 143, 62, .12);
    border-left: 3px solid var(--wm-green);
    color: #1f6b2c;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
}

.wm-form-success i {
    margin-right: 6px;
}

.wm-form-errors ul {
    margin: 0 0 14px;
    padding-left: 18px;
}

.wm-form-errors li {
    color: #c0392b;
    font-size: 13px;
}

.wm-field-error {
    display: block;
    margin-top: 4px;
    color: #c0392b;
    font-size: 12px;
}

/* ---------- shared section helpers ---------- */
.sec-title-light h1,
.sec-title-light p {
    color: #fff;
}

.sec-title-light h1 span {
    color: var(--wm-lime);
}

.wm-btn {
    display: inline-block;
    background: var(--wm-green);
    color: #fff;
    padding: 14px 32px;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background .25s ease;
}

.wm-btn:hover {
    background: var(--wm-purple);
    color: #fff;
    text-decoration: none;
}

/* ---------- vision / mission strip (home) ---------- */
.wm-vm-sec {
    background: var(--wm-purple-deep);
    padding: 70px 0;
}

.wm-vm-card {
    padding: 10px 20px;
}

.wm-vm-card h2 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 14px;
}

.wm-vm-card h2 i {
    color: var(--wm-lime);
    margin-right: 10px;
}

.wm-vm-card p {
    color: rgba(255, 255, 255, .82);
    margin: 0;
    line-height: 1.8;
}

/* ---------- vision / mission / objective cards (about) ---------- */
.wm-vmo-sec {
    background: var(--wm-soft);
}

.wm-vmo-card {
    background: #fff;
    border: 1px solid var(--wm-line);
    border-top: 3px solid var(--wm-green);
    padding: 34px 28px;
    height: 100%;
    margin-bottom: 30px;
}

.wm-vmo-icon {
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    border-radius: 50%;
    background: var(--wm-green);
    color: #fff;
    font-size: 22px;
    margin-bottom: 18px;
}

.wm-vmo-card h2 {
    font-size: 22px;
    color: var(--wm-purple);
    margin-bottom: 12px;
}

.wm-vmo-card p {
    color: var(--wm-body);
    line-height: 1.8;
}

.wm-tick-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.wm-tick-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    color: var(--wm-body);
}

.wm-tick-list li:before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--wm-green);
    font-size: 13px;
}

/* ---------- dedication quote ---------- */
.wm-quote {
    background: var(--wm-purple);
    color: #fff;
    padding: 40px 34px;
    border-radius: 4px;
    position: relative;
    margin-bottom: 30px;
}

.wm-quote > i {
    font-size: 30px;
    color: var(--wm-lime);
    margin-bottom: 16px;
    display: block;
}

.wm-quote p {
    font-size: 17px;
    line-height: 1.85;
    color: #fff;
    margin-bottom: 18px;
}

.wm-quote p strong {
    color: var(--wm-lime);
}

.wm-quote-by {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .7);
}

.wm-dedication-sec p {
    color: var(--wm-body);
    line-height: 1.9;
}

/* ---------- corporate info tables ---------- */
.wm-corp-table {
    width: 100%;
    margin-bottom: 30px;
    border: 1px solid var(--wm-line);
}

.wm-corp-table th,
.wm-corp-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--wm-line);
    vertical-align: top;
    font-size: 14px;
    line-height: 1.7;
}

.wm-corp-table th {
    width: 34%;
    background: var(--wm-soft);
    color: var(--wm-purple);
    font-weight: 600;
    text-align: left;
}

.wm-corp-table td {
    color: var(--wm-body);
}

.wm-corp-table td strong {
    color: var(--wm-ink);
}

.wm-honours {
    display: block;
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--wm-body);
    margin-top: 4px;
}

.wm-muted {
    color: #999;
}

/* ---------- scope + areas chips ---------- */
.wm-scope-item,
.wm-area-item {
    background: #fff;
    border: 1px solid var(--wm-line);
    border-left: 3px solid var(--wm-green);
    padding: 16px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--wm-ink);
    transition: box-shadow .25s ease, transform .25s ease;
}

.wm-scope-item:hover,
.wm-area-item:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.wm-scope-item i,
.wm-area-item i {
    color: var(--wm-green);
    margin-right: 10px;
}

.wm-areas-sec {
    background: var(--wm-soft);
}

/* Photo-backed variant. This class is shared by the homepage and the services
   page, so the image is opt-in per instance rather than applied to the base
   rule - the homepage keeps the plain soft background above. On services it
   carries that page's banner photo, framed identically (center 40%) so the two
   read as one treatment. The white area chips and the section title both need
   the veil underneath them to stay legible. */
.wm-areas-sec.wm-areas-photo {
    position: relative;
    background-image: url("../img/banner2.jpg");
    background-position: center 40%;
    background-size: cover;
    background-repeat: no-repeat;
}

.wm-areas-photo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 30, 74, .82);
}

.wm-areas-photo > .container {
    position: relative;
    z-index: 1;
}

.wm-areas-photo .sec-title h1 {
    color: #fff;
}

/* ---------- service detail cards ---------- */
.wm-detail-card {
    background: #fff;
    border: 1px solid var(--wm-line);
    padding: 30px 26px;
    margin-bottom: 30px;
    height: calc(100% - 30px);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.wm-detail-card:hover {
    border-color: var(--wm-green);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
}

.wm-detail-card h2 {
    font-size: 19px;
    color: var(--wm-purple);
    margin-bottom: 12px;
    line-height: 1.4;
}

.wm-detail-card p {
    color: var(--wm-body);
    font-size: 14px;
    line-height: 1.85;
    margin: 0;
}

.wm-electronic-sec {
    background: var(--wm-soft);
}

/* ---------- licences ---------- */
.wm-licence-sec {
    background: var(--wm-purple-deep);
    padding: 90px 0 70px;
}

.wm-licence-item {
    text-align: center;
    padding: 26px 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 4px;
    margin-bottom: 30px;
    height: calc(100% - 30px);
}

.wm-licence-item i {
    font-size: 32px;
    color: var(--wm-lime);
    margin-bottom: 14px;
    display: block;
}

.wm-licence-item h3 {
    font-size: 17px;
    color: #fff;
    margin-bottom: 8px;
}

.wm-licence-item span {
    font-size: 13px;
    color: rgba(255, 255, 255, .68);
    line-height: 1.7;
    display: block;
}

.wm-insurance-row {
    margin-top: 20px;
}

.wm-insurance-title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 24px;
}

.wm-insurance-title i {
    color: var(--wm-lime);
    margin-right: 8px;
}

.wm-insurance-item {
    background: rgba(255, 255, 255, .07);
    border-left: 3px solid var(--wm-lime);
    color: #fff;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* ---------- call to action ---------- */
.wm-cta-sec {
    background: var(--wm-green);
    padding: 55px 0;
}

.wm-cta-sec h2 {
    color: #fff;
    font-size: 27px;
    margin-bottom: 8px;
}

.wm-cta-sec p {
    color: rgba(255, 255, 255, .9);
    margin: 0;
}

.wm-cta-sec .wm-btn {
    background: #fff;
    color: var(--wm-green-dark);
}

.wm-cta-sec .wm-btn:hover {
    background: var(--wm-purple);
    color: #fff;
}

/* ---------- contact ---------- */
.wm-contact-card {
    text-align: center;
    border: 1px solid var(--wm-line);
    padding: 38px 24px;
    margin-bottom: 30px;
    height: calc(100% - 30px);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.wm-contact-card:hover {
    border-color: var(--wm-green);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
}

.wm-contact-icon {
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--wm-green);
    color: #fff;
    font-size: 24px;
}

.wm-contact-card h2 {
    font-size: 19px;
    color: var(--wm-purple);
    margin-bottom: 12px;
}

.wm-contact-card p,
.wm-contact-block p {
    color: var(--wm-body);
    line-height: 1.85;
    margin: 0;
}

.wm-contact-card a,
.wm-contact-block a {
    color: var(--wm-green);
}

.wm-contact-secondary {
    margin-top: 20px;
}

/* These two blocks are stacked in a single column beside the team photo, so
   they size to their own content. The equal-height rule they used to carry
   was for the old side-by-side layout; kept here it made the first block
   stretch to the full height of the photo column and pushed the second one
   far down the page. */
.wm-contact-block {
    background: var(--wm-soft);
    border-left: 3px solid var(--wm-purple);
    padding: 26px 24px;
    margin-bottom: 30px;
    height: auto;
}

.wm-contact-block h3 {
    font-size: 17px;
    color: var(--wm-purple);
    margin-bottom: 10px;
}

/* ---------- enquiry form ---------- */
.wm-form input,
.wm-form textarea {
    width: 100%;
    border: 1px solid var(--wm-line);
    background: #fff;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--wm-ink);
    border-radius: 3px;
}

.wm-form input:focus,
.wm-form textarea:focus {
    outline: none;
    border-color: var(--wm-green);
}

.wm-form-note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--wm-body);
}

.wm-form-note i {
    color: var(--wm-green);
    margin-right: 6px;
}

.wm-form-note a {
    color: var(--wm-green);
}

/* ---------- map ---------- */
.wm-map-sec iframe {
    display: block;
}

/* ---------- footer additions ---------- */
/* The mark is dark purple artwork and all but disappears against the dark
   footer, so it sits on a white plate. The plate is on the image alone - the
   wordmark beside it stays as it is. Box-sizing is border-box here, so the
   max-height is raised by twice the padding to keep the artwork itself at the
   62px it was before. */
.footer-wedget-one img {
    max-height: 78px;
    width: auto;
    margin-bottom: 18px;
    display: inline-block;
    background: #fff;
    padding: 8px;
    border-radius: 4px;
}

.wm-footer-tagline {
    margin-top: 18px;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--wm-lime);
}

.wm-footer-tagline i {
    margin-right: 8px;
}

.footer-wedget-four .inner-item a {
    color: inherit;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    /* The logo column narrows sharply from the md breakpoint down, so scale
       the wordmark to keep "Security Services Sdn Bhd" on one line. */
    .logo a {
        gap: 8px;
    }

    .logo img {
        max-height: 42px;
    }

    .logo img {
        max-height: 60px;
    }

    .wm-logo-name {
        font-size: 22px;
        letter-spacing: .3px;
    }

    .wm-logo-sub {
        font-size: 12px;
        margin-top: 2px;
    }

    .wm-cta-sec {
        text-align: center;
    }

    .wm-cta-sec .wm-btn {
        margin-top: 22px;
    }

    .text-lg-right {
        text-align: center !important;
    }

    .wm-vm-card {
        margin-bottom: 26px;
    }
}

@media (max-width: 575px) {
    /* Too little width left for the mark - fall back to the wordmark alone,
       which is how the logo is set in print. */
    .logo img {
        display: none;
    }

    .logo img {
        max-height: 52px;
    }

    .wm-logo-name {
        font-size: 19px;
        letter-spacing: .2px;
    }

    .wm-logo-sub {
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    .wm-corp-table th,
    .wm-corp-table td {
        display: block;
        width: 100%;
    }

    .wm-corp-table th {
        border-bottom: none;
        padding-bottom: 4px;
    }

    .wm-quote {
        padding: 30px 24px;
    }
}

/* Visually hidden, but read out by screen readers. Used to label the
   enquiry form fields, which show placeholders only by design. */
.wm-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------- floating WhatsApp button ---------- */
/* Fixed to the bottom right on every page. Sits clear of the template's
   #scrollUp control (bottom: 5px, 40px tall) so the two never overlap. */
.wm-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 58px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
    /* The ring is drawn as a second box-shadow so it expands strictly
       outside the button and never tints the face. */
    animation: wm-whatsapp-pulse 2.4s ease-out infinite;
}

.wm-whatsapp:hover,
.wm-whatsapp:focus {
    background: #1da851;
    color: #fff;
    text-decoration: none;
    transform: scale(1.08);
}

.wm-whatsapp:focus-visible {
    outline: 3px solid var(--wm-lime);
    outline-offset: 3px;
}

.wm-whatsapp i {
    display: block;
}

@keyframes wm-whatsapp-pulse {
    0%   { box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 0 0 rgba(37, 211, 102, .55); }
    70%  { box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 0 18px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Hover label, desktop only - hidden on touch layouts where there is
   no hover state to reveal it. */
.wm-whatsapp span {
    position: absolute;
    right: 68px;
    white-space: nowrap;
    background: var(--wm-ink);
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.wm-whatsapp:hover span,
.wm-whatsapp:focus span {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 767px) {
    .wm-whatsapp {
        right: 15px;
        bottom: 54px;
        width: 52px;
        height: 52px;
        font-size: 27px;
    }

    .wm-whatsapp span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wm-whatsapp {
        transition: none;
        animation: none;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    }

    .wm-whatsapp:hover,
    .wm-whatsapp:focus {
        transform: none;
    }
}

/* ---------- slider: right aligned slide ---------- */
/* Used by the second slide. .slider-wraper is a fixed 700px block sitting at
   the left of the 1170px .slider-text, so the box itself has to be pushed
   across as well as having its text realigned. Below 991px the template
   widens the wraper to 100%, where the auto margin simply does nothing. */
.wm-slide-right .slider-wraper {
    margin-left: auto;
    text-align: right;
}

/* The buttons are inline-block, so they follow text-align on their own.
   Only the trailing margin needs clearing to sit flush with the text edge. */
.wm-slide-right .slider-text li:last-child {
    margin-right: 0;
}

/* ---------- client logos: whole logo inside the circle ---------- */
/* The template gives these an 80px circular frame with overflow hidden, and
   the three crests have different aspect ratios (188x148, 157x148, 447x447),
   so the mask was clipping their edges by differing amounts. Contain fits the
   artwork whole, the padding keeps it inside the inscribed circle, and the
   white ground makes the clipped corners invisible. */
.testimonial2-client-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 10px;
}

.testimonial2-client-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------- about page: dedication section imagery ---------- */
/* Office photo, sitting full width above the Company Introduction heading. */
.wm-intro-img {
    margin-bottom: 30px;
}

.wm-intro-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Team photo inside the purple quote card. The source is portrait (608x1080),
   so at full column width it would run roughly 675px tall and tower over the
   text column beside it. Capping the height and centring keeps the whole group
   visible - cropping to a landscape band would cut off heads and feet. */
.wm-quote-img {
    margin-top: 26px;
}

.wm-quote-img img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    border-radius: 4px;
}

/* ---------- contact page: team photo ---------- */
/* Portrait source (810x1080). At the full width of its column it would run
   about 740px tall and dwarf the two info blocks beside it, so the height is
   capped and the image centred. The whole group stays visible rather than
   being cropped to fit. */
.wm-contact-photo {
    margin-bottom: 30px;
    text-align: center;
}

.wm-contact-photo img {
    display: inline-block;
    max-width: 100%;
    max-height: 460px;
    width: auto;
    height: auto;
    border-radius: 4px;
}

/* ---------- manned security: photographic background ---------- */
/* The white service cards sit on top of the photo, so a dark veil is laid
   over the image to hold contrast for both the cards and the section title. */
.wm-detail-sec {
    position: relative;
    background-image: url(../img/52980658.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.wm-detail-sec::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 30, 74, .82);
}

/* Lift the content above the veil. */
.wm-detail-sec > .container {
    position: relative;
    z-index: 1;
}

/* The heading is dark by default and would disappear against the photo. */
.wm-detail-sec .sec-title h1 {
    color: #fff;
}

/* ---------- guard team gallery: uniform tile heights ---------- */
/* The six photos are different shapes (720x1225 through 810x880), so their
   natural heights left the rows ragged. Fixing the tile height and cropping
   with cover squares both rows up. The focal point sits above centre because
   these are standing figures - faces survive the crop, feet give way first. */
.project-sec .project-thumb {
    height: 420px;
    overflow: hidden;
}

.project-sec .project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

@media (max-width: 991px) {
    .project-sec .project-thumb {
        height: 320px;
    }
}

@media (max-width: 767px) {
    .project-sec .project-thumb {
        height: 380px;
    }
}

@media (max-width: 575px) {
    .project-sec .project-thumb {
        height: 300px;
    }
}

/* ---------- quote anchor ---------- */
/* The header becomes sticky on scroll, so an anchor jump would otherwise land
   with the top of the form hidden underneath it. */
#get-a-quote {
    scroll-margin-top: 110px;
}

/* The one landscape photo in the gallery (1280x960 against portrait tiles).
   A centred crop pulls in the signboard on the right and clips the guard on
   the left, so this tile is anchored towards the left of the frame - the
   three figures stay whole and the signboard falls outside the crop. */
.project-sec .project-thumb img.wm-focus-left {
    object-position: 25% center;
}