/* ------------------------------------------------------------------
   G.Garuda brand overlay for the BrentCreek template.

   The template ships with a coral accent (#EA6654) on a dark navy
   (#182345). This file re-skins it to the colours taken from the
   G.Garuda logo - navy #22417F and red #B32F30 - and adds the few
   components the company profile needed that the template did not
   already provide.

   Loaded last, after style.css and responsive.css, so these rules win.
   ------------------------------------------------------------------ */

:root {
    --gg-navy: #22417F;
    --gg-navy-dark: #16294F;
    --gg-navy-deep: #101d3a;
    --gg-red: #B32F30;
    --gg-red-dark: #8f2526;
    --gg-grey: #6f7480;
    --gg-line: #e3e6ec;
    --gg-tint: #f4f6fa;
}

/* ---------- accent recolour ------------------------------------- */

.thm-btn,
.banner-btn.thm-btn,
.scroll-to-top,
.single-feature-box:hover,
.newsletter-form button.thm-btn {
    background: var(--gg-red);
}

.thm-btn:hover,
.banner-btn.thm-btn:hover,
.scroll-to-top:hover,
.newsletter-form button.thm-btn:hover {
    background: var(--gg-navy);
    color: #fff;
}

.sec-title p,
.sec-title h2 span,
.single-service .text-box .read-more,
.single-feature-box .read-more:hover,
.top-bar .container-fluid .contact-info a i,
.top-bar .container-fluid .social a:hover,
.link-widget .link-list li a:hover,
.header .header-navigation .main-navigation li.current > a,
.header .header-navigation .main-navigation li:hover > a,
.single-contact-info i,
.list-items li i,
.breadcumb a:hover {
    color: var(--gg-red);
}

.single-fun-fact i,
.accrodion.active .accrodion-title h4 {
    color: var(--gg-red);
}

/* Dark surfaces move from the template navy to the logo navy. */
.top-bar .container-fluid {
    background: var(--gg-navy-dark);
    padding: 10px 60px;
}

.footer {
    background: var(--gg-navy-dark);
}

.footer-bottom {
    background: var(--gg-navy-deep);
}

.fun-fact-area {
    background-color: var(--gg-navy);
    background-blend-mode: multiply;
    /* img/fun-fact-bg.jpg is portrait (867x1300) in a wide, short band, so cover
       is width-driven and only a thin horizontal slice shows. 35% puts that
       slice over the officer rather than the empty stairwell below him.
       `scroll` replaces the template's `fixed`, which sizes the image against
       the viewport instead of this band and makes the visible slice drift. */
    background-position: center 35%;
    background-attachment: scroll;
}

/* ---------- top bar --------------------------------------------- */

.top-bar .container-fluid .contact-info a {
    font-size: 13px;
}

.top-bar .container-fluid .contact-info a + a {
    margin-left: 26px;
}

.gg-topbar-badge {
    display: inline-block;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 3px 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 2px;
}

.gg-topbar-badge + .gg-topbar-badge {
    margin-left: 10px;
}

.gg-topbar-badge i {
    color: var(--gg-red);
    margin-right: 5px;
}

/* ---------- brand lockup ---------------------------------------- */

.gg-brand,
.gg-footer-brand {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    line-height: 1.1;
}

/* The template sets .navbar-brand { line-height: 47px }, which the wordmark
   spans inherit and which forced a large gap between the two lines. Reset it
   on the spans themselves so the lockup sits tight. */
.gg-brand-name,
.gg-brand-sub {
    line-height: 1;
}

/* gglogo2.jpg is the mark on its own - no wordmark baked in - so it is sized
   against the adjacent text lockup rather than filling the header.

   100px is the most the mark can take without making the header taller: the
   bar is 108px on desktop and its height comes from the menu's link padding,
   not from the brand. Going past that pushes the whole header down. */
.gg-brand img {
    height: 100px;
    width: auto;
    display: block !important;
    mix-blend-mode: multiply; /* drops the JPEG's white box on white headers */
}

/* Once scrolled, the template adds .stricky-fixed and tightens the menu's link
   padding, taking the bar down to 80px. Bring the mark back in so it does not
   hang out of the compact header. */
.header.stricky-fixed .gg-brand img {
    height: 72px;
}

.gg-footer-brand img {
    height: 88px;
    width: auto;
    background: #fff;
    padding: 5px;
    border-radius: 3px;
}

.gg-brand-text {
    display: flex;
    flex-direction: column;
}

.gg-brand-name {
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--gg-navy);
}

.gg-brand-sub {
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--gg-red);
    margin-top: 5px;
}

.gg-footer-brand .gg-brand-name {
    color: #fff;
}

.gg-footer-brand .gg-brand-sub {
    color: #b9c2d6;
}

.gg-footer-tagline {
    margin-top: 18px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    color: #fff;
}

.gg-footer-tagline i {
    color: var(--gg-red);
    margin-right: 8px;
}

/* ---------- footer contact list --------------------------------- */

.gg-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* The .footer prefix is not decoration: the template ships
   `.footer .footer-widget li { padding: 0 }` at specificity 0,0,2,1, which beats
   a plain `.gg-contact-list li` (0,0,1,1) no matter the file order. Without
   out-ranking it the indent is dropped and the absolutely positioned icons land
   on top of the first characters of each line. */
.footer .footer-widget .gg-contact-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 14px;
    color: #B2B3BA;
    font-size: 14px;
    line-height: 1.7;
}

.footer .footer-widget .gg-contact-list li i {
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    text-align: center;
    color: var(--gg-red);
}

.gg-contact-list li a {
    color: #B2B3BA;
}

.gg-contact-list li a:hover {
    color: #fff;
}

.footer-bottom .footer-menu li {
    color: #8c93a6;
    font-size: 13px;
}

.footer-bottom .copy-text {
    font-size: 13px;
}

/* The template ships the about illustration at max-width:none, so around the
   1200px breakpoint it pushed a horizontal scrollbar onto the page. */
.about-area .about-img img {
    max-width: 100%;
    height: auto;
}

/* Same omission on the quotation photo: with max-width unset it renders at its
   natural pixel width and spills out of its column (810px of image in a 600px
   column). Constrain it and let the height follow the aspect ratio. */
.appointment-area .appointment-img-box img {
    max-width: 100%;
    height: auto;
}

/* The service card images set width:100% but no height, so the HTML height
   attribute was taken literally: a 740x480 photo rendered 370x480, stretched.
   height:auto lets the aspect ratio drive it (370x240). */
.single-service .img-box img {
    height: auto;
}

/* .appointment-area carries no vertical padding - the photo is meant to bleed to
   the section edges - which left the submit button sitting flush on the bottom
   edge with nothing beneath it. Pad the form column alone so the photo keeps
   its full-bleed treatment. */
.appointment-area .appointment-content {
    padding-bottom: 60px;
}

/* The template centres the phone badge at top:50%, which on this photo lands
   straight across the team's faces. Sampling the image row by row, the pale
   wall runs from roughly 18% to 43% down and the heads begin near 46%, so
   centring the badge at 31% keeps it entirely on the empty wall above them.
   Re-check this figure if img/appointment-1.jpg is ever swapped.

   Scoped above 667px deliberately: responsive.css drops the badge to
   position:relative below that width so it becomes a full-width bar under the
   photo, and an unscoped `top` here would override its `top:auto` and shove
   that bar down the page. */
@media (min-width: 668px) {
    .appointment-area .appointment-img-box .appoint-text {
        top: 31%;
    }
}

/* ---------- shared section furniture ---------------------------- */

/* Qualified with .sec-title p so it out-ranks the template's own
   `.sec-title p { margin: 0 0 10px }` (0,0,1,1). A bare .gg-sec-lead (0,0,1,0)
   loses, and the `auto` side margins are dropped - which left this paragraph
   sitting 205px left of centre inside its 760px box instead of centred. */
.sec-title p.gg-sec-lead,
.gg-sec-lead {
    max-width: 760px;
    margin: 14px auto 0;
    color: var(--gg-grey);
    font-style: italic;
}

.gg-services-more {
    margin-top: 45px;
}

/* ---------- quote band ------------------------------------------ */

.gg-quote-band {
    background: var(--gg-navy);
    padding: 60px 0;
    color: #fff;
}

.gg-quote-band i {
    font-size: 34px;
    color: rgba(255, 255, 255, .35);
    margin-bottom: 18px;
    display: block;
}

.gg-quote-band p {
    max-width: 900px;
    margin: 0 auto 18px;
    font-size: 19px;
    line-height: 1.75;
    font-style: italic;
    color: #fff;
}

.gg-quote-band span {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: .04em;
}

.gg-quote-band span small {
    display: block;
    font-weight: 400;
    color: #b9c2d6;
    margin-top: 4px;
}

/* ---------- vision / mission / objectives ----------------------- */

.gg-vm-area {
    background: var(--gg-tint);
}

.gg-vm-card {
    background: #fff;
    border: 1px solid var(--gg-line);
    border-top: 3px solid var(--gg-red);
    padding: 32px 30px;
    margin-bottom: 30px;
}

.gg-vm-card-tall {
    height: calc(100% - 30px);
}

.gg-vm-card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--gg-navy);
    margin: 0 0 16px;
}

.gg-vm-card h3 i {
    color: var(--gg-red);
    margin-right: 10px;
    font-size: 24px;
    vertical-align: middle;
}

.gg-vm-card p {
    color: var(--gg-grey);
    line-height: 1.85;
    margin: 0;
}

.gg-vm-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gg-vm-card ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 16px;
    color: var(--gg-grey);
    line-height: 1.8;
}

.gg-vm-card ul li i {
    position: absolute;
    left: 0;
    top: 5px;
    color: var(--gg-red);
}

/* ---------- leadership ------------------------------------------ */

.gg-leader-card {
    background: #fff;
    border: 1px solid var(--gg-line);
    border-left: 3px solid var(--gg-navy);
    padding: 32px 30px;
    height: 100%;
}

/* 6px was enough when a .gg-leader-role line sat underneath and supplied its
   own 18px below. That line is gone, so the heading now carries the gap. */
.gg-leader-card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gg-navy);
    margin: 0 0 20px;
    line-height: 1.4;
}

.gg-leader-role {
    display: block;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gg-red);
    font-weight: 600;
    margin-bottom: 18px;
}

.gg-leader-card p {
    color: var(--gg-grey);
    line-height: 1.85;
}

/* The photo sitting beside the chairman's message. Its row carries
   .gg-equal-grid, so the column is a stretched flex item and the image can fill
   that height with object-fit instead of leaving the two columns ragged. */
.gg-leader-photo {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--gg-line);
}

.gg-leader-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Once the columns stack there is no neighbouring card to match, so let the
   photo keep its own proportions rather than being cropped to a stale height. */
@media (max-width: 991px) {
    .gg-leader-photo {
        height: auto;
    }

    .gg-leader-photo img {
        height: auto;
    }
}

/* ---------- corporate info tables ------------------------------- */

.gg-corporate-area {
    background: var(--gg-tint);
}

/* Explicit, so a future display declaration on .gg-corporate-area cannot
   quietly override the hidden attribute and put the section back on the page. */
.gg-corporate-area[hidden] {
    display: none;
}

.gg-info-table {
    width: 100%;
    background: #fff;
    border: 1px solid var(--gg-line);
}

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

.gg-info-table th {
    width: 38%;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: var(--gg-navy);
    background: #fafbfd;
}

.gg-info-table td {
    color: var(--gg-grey);
}

.gg-info-table tr:last-child th,
.gg-info-table tr:last-child td {
    border-bottom: 0;
}

.gg-info-table a {
    color: var(--gg-red);
}

/* ---------- credentials ----------------------------------------- */

/* ---------- licences & registrations ---------------------------- */

/* Photo background behind the credential cards. The source is bright (white
   uniforms), so a heavy overlay is needed before the white heading can be read
   over it - see the .sec-title override below. The overlay is a pseudo-element
   rather than a gradient on the image so the cards, which sit in .container,
   can be lifted above it with position:relative. */
.gg-credentials-area {
    position: relative;
    background: var(--gg-navy) url(../img/licences-bg.jpg) center 40% no-repeat;
    background-size: cover;
}

.gg-credentials-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(22, 24, 39, .82);
}

.gg-credentials-area .container {
    position: relative;
}

/* The heading sits directly on the darkened photo, so it flips to white - the
   cards below keep their own white panels and are unaffected. */
.gg-credentials-area .sec-title h2 {
    color: #fff;
}

.gg-credential-card {
    background: #fff;
    border: 1px solid var(--gg-line);
    padding: 28px 30px 28px 74px;
    position: relative;
    margin-bottom: 30px;
    min-height: 150px;
}

.gg-credential-card i {
    position: absolute;
    left: 26px;
    top: 30px;
    font-size: 32px;
    color: var(--gg-red);
}

/* 4px here was deliberately tight because a red .gg-credential-ref line used to
   sit between the heading and the paragraph and carried its own 10px below it.
   Those reference numbers have been removed from the cards, so the heading now
   meets the paragraph directly and needs its own breathing room. The
   .gg-credential-ref rule that went with it is gone - nothing uses that class
   any more. */
.gg-credential-card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--gg-navy);
    margin: 0 0 10px;
    line-height: 1.4;
}

.gg-credential-card p {
    color: var(--gg-grey);
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

.gg-insurance-strip {
    background: var(--gg-navy);
    color: #fff;
    padding: 26px 30px;
    text-align: center;
    margin-top: 10px;
}

.gg-insurance-strip h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: #fff;
}

.gg-insurance-strip ul {
    margin: 0;
}

.gg-insurance-strip li {
    color: #dfe4ef;
    font-size: 14px;
    padding: 0 14px;
}

.gg-insurance-strip li i {
    color: #8fb4ff;
    margin-right: 6px;
}

/* ---------- org chart ------------------------------------------- */

.gg-org-chart {
    background: #fff;
    border: 1px solid var(--gg-line);
    padding: 30px 26px;
}

.gg-org-level {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
}

.gg-org-level:not(:last-child)::after {
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    background: var(--gg-line);
    position: absolute;
    left: 50%;
    bottom: -14px;
}

.gg-org-level span {
    font-family: "Montserrat", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 3px;
    text-align: center;
}

.gg-org-top span {
    background: var(--gg-navy);
    color: #fff;
    min-width: 220px;
}

.gg-org-depts span {
    background: var(--gg-red);
    color: #fff;
    flex: 1 1 40%;
}

.gg-org-ops span {
    background: var(--gg-tint);
    color: var(--gg-navy);
    border: 1px solid var(--gg-line);
    flex: 1 1 40%;
}

/* ---------- zones ----------------------------------------------- */

.gg-zone-panel {
    background: var(--gg-navy);
    color: #fff;
    padding: 34px 30px;
    height: 100%;
}

.gg-zone-panel h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}

.gg-zone-panel > p {
    color: #c3cbdd;
    margin-bottom: 22px;
}

.gg-zone-panel ul {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.gg-zone-panel ul li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.gg-zone-panel ul li:last-child {
    border-bottom: 0;
}

.gg-zone-panel ul li strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    letter-spacing: .04em;
}

.gg-zone-panel ul li span {
    font-size: 13px;
    color: #c3cbdd;
}

/* ---------- why-choose panel ------------------------------------ */

.gg-why-panel {
    background: var(--gg-navy);
    color: #fff;
    padding: 34px 32px;
}

.gg-why-panel h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
}

.gg-why-panel ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.gg-why-panel ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    color: #dfe4ef;
    line-height: 1.75;
}

.gg-why-panel ul li i {
    position: absolute;
    left: 0;
    top: 5px;
    color: #8fb4ff;
}

.gg-why-foot {
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-top: 20px;
}

.gg-why-label {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8fb4ff;
    margin-bottom: 8px;
}

.gg-why-foot p {
    color: #dfe4ef;
    font-style: italic;
    line-height: 1.8;
    margin: 0;
}

/* ---------- services page --------------------------------------- */

/* ---------- "What We Do" band background --------------------------

   img/service-bg.jpg is a wall of CCTV cameras from Unsplash (photo id
   1557597774-9d273605dfa9), fetched already cropped to 1920x560 so it suits
   this wide band instead of being a portrait squeezed into it. Unsplash's
   licence covers commercial use with no attribution.

   The texture is uniform, so no special framing is needed - centre is fine, and
   the heading stays legible wherever it falls. `scroll` replaces the template's
   `fixed`, which sizes the image against the viewport rather than this band. */
.service-title-box {
    background-position: center center;
    background-attachment: scroll;
}

/* ---------- floating WhatsApp button -----------------------------

   Fixed to the bottom right on every page. This template's .scroll-to-top sits
   at bottom:20px and is 50px tall, so it occupies up to 70px; 82px keeps the
   two clear of each other. (The equivalent button on the Watchman site uses a
   smaller offset because its scroll control is a different size.) */
.gg-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 82px;
    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 a second box-shadow so it expands strictly outside the
       button and never tints the face. */
    animation: gg-whatsapp-pulse 2.4s ease-out infinite;
}

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

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

.gg-whatsapp i {
    display: block;
}

@keyframes gg-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. */
.gg-whatsapp span {
    position: absolute;
    right: 68px;
    white-space: nowrap;
    background: var(--gg-navy);
    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;
}

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

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

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

/* Respect a reduced-motion preference: keep the button, drop the pulse. */
@media (prefers-reduced-motion: reduce) {
    .gg-whatsapp {
        animation: none;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    }
}

/* ---------- our team gallery -------------------------------------

   Every tile is pre-cropped to an identical 600x800, so the grid needs no
   masonry logic and no aspect-ratio juggling - the sources ranged from 496x1080
   to 1080x810 and were normalised when they were generated. */
.gg-team-area {
    background: var(--gg-tint);
}

.gg-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 46px;
}

.gg-team-tile {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--gg-navy);
    border-radius: 4px;
    line-height: 0;
}

.gg-team-tile img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .45s ease, opacity .3s ease;
}

.gg-team-tile:hover img,
.gg-team-tile:focus img {
    transform: scale(1.06);
    opacity: .88;
}

/* These are links opening a lightbox, so the keyboard focus state has to be
   visible - the template suppresses outlines widely. */
.gg-team-tile:focus-visible {
    outline: 3px solid var(--gg-red);
    outline-offset: 3px;
}

/* A magnifier hint on hover, so it reads as clickable rather than decorative. */
.gg-team-tile::after {
    content: "\f00e";                       /* fa-search-plus */
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    color: #fff;
    font-size: 26px;
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.gg-team-tile:hover::after,
.gg-team-tile:focus::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 991px) {
    .gg-team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 575px) {
    .gg-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* ---------- section rhythm ---------------------------------------

   Adjacent sections each bring their own generous padding and the two stack, so
   the template left 200px+ voids between blocks of content:

       .features-area  120 bottom + .sec-pad      120 top = 240
       .sec-pad        120 bottom + .fun-fact     100 top = 220
       .service-area   150 bottom + .gg-quote-band 60 top = 210
       .fun-fact       100 bottom + footer       ~110 top = 210

   These values pull that back to a consistent ~120-160px between sections,
   which still reads as clearly separated without the empty screens.

   Scoped to desktop on purpose: responsive.css already tunes these down at
   991px and below, and ggaruda.css loads last, so unscoped rules here would
   silently override the mobile values too. */
@media (min-width: 992px) {
    .sec-pad {
        padding: 80px 0;
    }

    /* The 195px hole between the feature cards and the next heading was four
       values stacking, not one:
           .single-feature-box margin-bottom  40   (only needed when they wrap)
           .features-area      padding-bottom 40
           .about-area         padding-top    80
           .about-content      margin-top     40   (only needed when they stack)
       The two margins do nothing at this width, where the cards sit in a single
       row beside each other, so they go; that plus a smaller grey band leaves
       about 105px, a normal gap rather than an empty screen. */
    .features-area {
        padding-bottom: 30px;
    }

    .features-area .single-feature-box {
        margin-bottom: 0;
    }

    .about-area .about-content {
        margin-top: 0;
    }

    .service-title-box {
        padding: 80px 0;
    }

    /* Keeps the overlap with .overlaped-top's -80px margin intact. */
    .service-area {
        padding-bottom: 100px;
    }

    .fun-fact-area {
        padding: 70px 0;
    }
}

/* ---------- feature cards: hide the photo between them ------------

   The four credential cards overlap the hero by 65px. style.css does that by
   pulling each CARD up (.single-feature-box margin-top: -65px) while the grey
   .features-area stays where it is. In that 65px strip only the cards are
   painted, so the hero photo shows through the gutters between them and down
   both outer margins - four white blocks with photo stripes in between, cut off
   by a hard horizontal line where the grey finally starts.

   responsive.css already avoids this everywhere else by moving the offset onto
   the SECTION instead (max-width: 991px does exactly that, and max-width: 1024px
   removes the overlap altogether). So this only ever went wrong from 1025px up,
   and the fix is to follow the same pattern there: pull the section up by 65
   and give the card back its 65. The cards do not move - the grey simply runs
   full width behind their overhang, so the gaps disappear.

   Pulling the section up is only half of it. The carousel is position:relative
   with z-index 991, so a static .features-area paints UNDERNEATH it and the
   grey stays invisible in the overlap - elementFromPoint in the gutters still
   returned the carousel. The section therefore also has to win the stacking,
   hence position:relative and a z-index one above the carousel's. The cards are
   descendants, so they still sit on top of their own section background. */
@media (min-width: 1025px) {
    .features-area {
        position: relative;
        z-index: 992;
        margin-top: -65px;
    }

    .features-area .single-feature-box {
        margin-top: 0;
    }
}

/* ---------- links inside headings ---------------------------------

   A heading that is also a link should still read as a heading, so it inherits
   the h2 colour rather than taking the template's link styling. The underline
   appears only on hover/focus, which is what tells a reader it is clickable. */
.sec-title h2 a.gg-heading-link,
.sec-title h2 a.gg-heading-link:visited {
    color: inherit;
    text-decoration: none;
}

.sec-title h2 a.gg-heading-link:hover,
.sec-title h2 a.gg-heading-link:focus {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* The template suppresses outlines site-wide, so a keyboard user would other-
   wise have nothing to follow here. */
.sec-title h2 a.gg-heading-link:focus-visible {
    outline: 3px solid var(--gg-red);
    outline-offset: 4px;
    text-decoration: none;
}

/* ---------- in-page anchor targets --------------------------------

   The header is position:fixed and about 108px tall, so a plain #hash jump puts
   the top of the target section underneath it. scroll-margin-top offsets the
   landing position by a little more than the header height. */
#enquiry,
#vision,
#corporate,
#licences,
#branches {
    scroll-margin-top: 120px;
}

/* ---------- page headings ----------------------------------------

   Each page needs exactly one <h1>. On the inner pages the banner title is the
   natural one, so it was promoted from <h2> to <h1>; the template only styles
   .inner-banner h2, so mirror those rules here to keep the look identical.
   The home page carries a visually-hidden <h1> instead, because its visible
   headline lives inside a rotating carousel. */
.inner-banner h1 {
    margin: 0;
    color: #fff;
    font-size: 45px;
    font-weight: 600;
    font-family: "Titillium Web", sans-serif;
}

/* Per-page banner photos.

   style.css sets .inner-banner's background as a shorthand, so all five inner
   pages share one image. These override only background-image, which keeps the
   shorthand's "center center no-repeat" and the separate background-size: cover
   intact, and leaves Contact, Thank You and 404 on the original photo.

   Both sources were portrait (958x1120 and 896x1200) against a band of roughly
   3.2:1. Left to background-size: cover that becomes a thin horizontal slice
   through the middle of the frame - waists, not faces - so each was cropped to
   the band's ratio over the part worth showing: the line of officers at muster
   on About, and the checkpoint scan on Services. Cropping also removed the
   four-point AI-edit sparkle sitting in the bottom-right of both originals.

   The template's own :before lays rgba(23,27,39,.7) over the photo. Measured
   against that overlay, the brightest patch of either crop still leaves white
   text at 7.6:1 (About) and 6.3:1 (Services), so neither needs its own scrim. */
.inner-banner.gg-banner-about {
    background-image: url(../img/about-banner.jpg);
}

.inner-banner.gg-banner-services {
    background-image: url(../img/services-banner.jpg);
}

/* Contact carries the office signboard. Unlike the other two this image has to
   survive horizontal cropping intact, because the subject IS text - a sign
   trimmed to "RUDA SECURITY SERVIC" is worse than no sign at all.

   The source is 1182x375 (3.15:1). The phone band is 375x287, which is 1.31:1,
   so background-size: cover would scale to height and show only the middle 41%
   of the width - exactly that failure. The fix is in the image rather than the
   CSS: it was composited onto a 1182x900 canvas, which is also 1.31:1, with the
   sign placed on the centre line. Phones now show the full width, wide screens
   crop vertically around the centre instead, and the sign survives whole from
   375px to 1920px (checked at 375, 768, 1024, 1200, 1425 and 1920). The added
   area above and below is a gradient that starts from the photograph's own edge
   row - so the join is invisible - and dissolves toward a flat tone with
   distance, otherwise every window and drainpipe extends out as a streak.

   Centre is therefore the correct anchor here, not the 45% the previous photo
   needed. Worst patch under the template's .7 overlay measures 7.2:1. */
.inner-banner.gg-banner-contact {
    background-image: url(../img/contact-banner.jpg?v=2);
}

/* ---------- thank-you page ---------------------------------------

   The banner itself needs no rules - thank-you.html reuses .inner-banner, so it
   matches the About Us / Services / Contact banners exactly. These cover the
   confirmation content below it. */
.gg-thanks-block > i {
    font-size: 72px;
    color: var(--gg-red);
    display: block;
    margin-bottom: 24px;
}

.gg-thanks-block h2 {
    font-family: "Titillium Web", sans-serif;
    font-size: 34px;
    font-weight: 600;
    color: var(--gg-navy);
    margin: 0 0 18px;
}

.gg-thanks-lead {
    max-width: 720px;
    margin: 0 auto 50px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--gg-grey);
}

.gg-thanks-next {
    margin-bottom: 20px;
    text-align: left;
}

.gg-thanks-card {
    background: #fff;
    border: 1px solid var(--gg-line);
    padding: 30px 26px;
    margin-bottom: 30px;
}

.gg-thanks-num {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    background: var(--gg-red);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
}

.gg-thanks-card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--gg-navy);
    margin: 0 0 10px;
    line-height: 1.45;
}

.gg-thanks-card p {
    color: var(--gg-grey);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

.gg-thanks-urgent {
    margin: 25px 0 32px;
    font-size: 15px;
    color: var(--gg-grey);
}

.gg-thanks-block .thm-btn {
    margin: 0 6px 10px;
}

/* Secondary action - outlined rather than filled, so the primary button leads. */
.gg-btn-ghost {
    background: transparent !important;
    border: 2px solid var(--gg-navy) !important;
    color: var(--gg-navy) !important;
}

.gg-btn-ghost:hover {
    background: var(--gg-navy) !important;
    color: #fff !important;
}

/* ---------- equal-height card grids ------------------------------

   Bootstrap 3 floats each column, so a single card that runs one line taller
   than its neighbours blocks the next row from floating up past it and leaves
   a hole in the grid. Turning the row into a flex container lays the columns
   out as real rows and stretches every card in a row to a common height, which
   fixes the hole and squares off the ragged bottoms at the same time. */
.gg-equal-grid {
    display: flex;
    flex-wrap: wrap;
}

/* .row's clearfix pseudo-elements would otherwise be treated as flex items and
   show up as stray zero-width columns. */
.gg-equal-grid::before,
.gg-equal-grid::after {
    display: none;
}

.gg-equal-grid > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* The card is the child that has to fill the column's stretched height. */
.gg-equal-grid > [class*="col-"] > * {
    width: 100%;
    flex: 1 1 auto;
}

.gg-service-card {
    background: #fff;
    border: 1px solid var(--gg-line);
    padding: 34px 28px;
    margin-bottom: 30px;
    transition: all .35s ease;
    min-height: 260px;
}

.gg-service-card:hover {
    border-color: var(--gg-red);
    box-shadow: 0 12px 30px rgba(22, 41, 79, .12);
    transform: translateY(-4px);
}

.gg-service-card i {
    font-size: 44px;
    color: var(--gg-red);
    display: block;
    margin-bottom: 18px;
}

.gg-service-card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--gg-navy);
    margin: 0 0 12px;
    line-height: 1.45;
}

.gg-service-card p {
    color: var(--gg-grey);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

/* ---------- job scope ------------------------------------------- */

/* Photo background behind "Taking It To The Next Level / Guard Job Scope".
   Unlike the emergency section, real text sits directly on this one - the
   kicker, the heading and the italic lead - so those flip to light colours and
   the overlay is sized for them, not just for separating the cards. */
.gg-jobscope-area {
    position: relative;
    background: var(--gg-navy) url(../img/jobscope-bg.jpg) center center no-repeat;
    background-size: cover;
    background-attachment: scroll;
}

.gg-jobscope-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(22, 24, 39, .78);
}

.gg-jobscope-area .container {
    position: relative;
}

.gg-jobscope-area .sec-title h2 {
    color: #fff;
}

.gg-jobscope-area .gg-sec-lead {
    color: #d7dbe4;
}

/* The section kickers ("Taking It To The Next Level", "Licences &
   Registrations") use --gg-red #B32F30, a deep brick red meant for light
   backgrounds. Over these darkened photos it fell to 2.4:1 and 3.8:1, and at
   20px/600 WCAG still wants 4.5:1 - the large-text allowance needs 700 weight.

   This coral is set against the harder of the two: the Licences photo is bright
   (white uniforms) so even at 0.82 its overlaid background stays lighter than
   the Job Scope one, and #EA6654 only reached 3.8:1 there. #F08774 clears both
   - roughly 6.0:1 on Job Scope and 4.9:1 on Licences. */
.gg-jobscope-area .sec-title p,
.gg-credentials-area .sec-title p {
    color: #f08774;
}

/* Translucent over the section photo, matching the emergency cards further down
   the page. The blur keeps the copy on an even tone instead of on whatever
   detail of the control-room photo happens to sit behind it. */
.gg-scope-card {
    background: rgba(255, 255, 255, .90);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .55);
    padding: 30px 28px;
    height: 100%;
}

.gg-scope-card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--gg-navy);
    margin: 0 0 16px;
}

.gg-scope-num {
    display: inline-block;
    background: var(--gg-red);
    color: #fff;
    font-size: 13px;
    padding: 3px 9px;
    border-radius: 2px;
    margin-right: 8px;
}

/* Darker than the shared --gg-grey (#6f7480), which measured under 4.5:1 once
   the card became translucent - same adjustment as the emergency cards. */
.gg-scope-card p,
.gg-scope-card li {
    color: #4e535d;
    font-size: 14px;
    line-height: 1.8;
}

.gg-scope-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.gg-scope-card ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
}

.gg-scope-card ul li i {
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 8px;
    color: var(--gg-red);
}

/* ---------- training -------------------------------------------- */

.gg-training-panel {
    background: var(--gg-navy);
    color: #fff;
    padding: 34px 32px;
}

.gg-training-panel h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
}

.gg-training-panel ol {
    padding-left: 20px;
    margin: 0;
}

.gg-training-panel ol li {
    color: #dfe4ef;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    line-height: 1.6;
}

.gg-training-panel ol li:last-child {
    border-bottom: 0;
}

.gg-pull-quote {
    background: #fff;
    border-left: 3px solid var(--gg-red);
    padding: 22px 26px;
    margin-top: 26px;
    font-style: italic;
    font-size: 16px;
    color: var(--gg-navy);
    line-height: 1.75;
}

.gg-pull-quote i {
    color: var(--gg-red);
    margin-right: 10px;
}

/* ---------- emergency / guard dogs ------------------------------ */

/* Photo background behind the emergency / guard dog cards. No text sits
   directly on it - both headings live inside their own white cards - so the
   overlay is about keeping the cards prominent and the section cohesive rather
   than about legibility. The overlay is a pseudo-element and .container is
   lifted above it, matching how .gg-credentials-area is built. */
.gg-emergency-area {
    position: relative;
    background: var(--gg-navy) url(../img/emergency-bg.jpg) center center no-repeat;
    background-size: cover;
    background-attachment: scroll;
}

.gg-emergency-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(22, 24, 39, .78);
}

.gg-emergency-area .container {
    position: relative;
}

/* Slightly translucent so the photo behind reads through the cards. The blur
   keeps the text sitting on an even tone rather than on whatever detail happens
   to be behind it - without it, busy areas of the photo show through as noise
   under the copy. */
.gg-emergency-card {
    background: rgba(255, 255, 255, .90);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .55);
    padding: 32px 30px;
    height: 100%;
}

.gg-emergency-card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--gg-navy);
    margin: 0 0 18px;
}

.gg-emergency-card h3 i {
    color: var(--gg-red);
    margin-right: 10px;
    font-size: 26px;
    vertical-align: middle;
}

/* Darker than the shared --gg-grey (#6f7480). Against the now-translucent card
   that grey measured 3.87:1, under the 4.5:1 AA threshold; this clears it. */
.gg-emergency-card p {
    color: #4e535d;
    line-height: 1.8;
}

.gg-emergency-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    counter-reset: em;
}

.gg-emergency-list li {
    counter-increment: em;
    position: relative;
    padding: 9px 0 9px 38px;
    border-bottom: 1px solid var(--gg-line);
    color: var(--gg-navy);
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.gg-emergency-list li::before {
    content: counter(em);
    position: absolute;
    left: 0;
    top: 8px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: var(--gg-red);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
}

/* ---------- call-to-action band --------------------------------- */

.gg-cta-band {
    background: var(--gg-navy);
    padding: 64px 0;
}

.gg-cta-band h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
}

.gg-cta-band p {
    color: #c3cbdd;
    margin-bottom: 26px;
}

/* ---------- branches -------------------------------------------- */

.gg-branches-area {
    background: var(--gg-tint);
}

.gg-branch-card {
    background: #fff;
    border: 1px solid var(--gg-line);
    padding: 26px 22px;
    margin-bottom: 30px;
    text-align: center;
    min-height: 210px;
    transition: all .35s ease;
}

.gg-branch-card:hover {
    border-color: var(--gg-red);
    box-shadow: 0 12px 30px rgba(22, 41, 79, .12);
}

.gg-branch-card i {
    font-size: 26px;
    color: var(--gg-red);
    margin-bottom: 14px;
    display: block;
}

.gg-branch-card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--gg-navy);
    margin: 0 0 10px;
    line-height: 1.4;
}

.gg-branch-card p {
    color: var(--gg-grey);
    font-size: 13.5px;
    line-height: 1.75;
    margin: 0;
}

.gg-registered-band {
    background: var(--gg-navy-dark);
    padding: 34px 0;
    color: #dfe4ef;
}

.gg-registered-band h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8fb4ff;
    margin: 0 0 8px;
}

.gg-registered-band p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
}

/* ---------- forms ----------------------------------------------- */

.gg-alert {
    padding: 14px 18px;
    margin-bottom: 22px;
    border-radius: 3px;
    font-size: 14.5px;
}

.gg-alert-center {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.gg-alert-success {
    background: #e8f5ec;
    border-left: 3px solid #2e7d47;
    color: #1f5c34;
}

.gg-alert-success i {
    margin-right: 8px;
}

.gg-alert-error {
    background: #fdecec;
    border-left: 3px solid var(--gg-red);
    color: var(--gg-red-dark);
}

/* The alert blocks ship in the markup and are revealed by js/gg-static.js once
   the enquiry form has something to report, so keep them out of the layout
   until then. The explicit [hidden] rule guards against a future display
   declaration on .gg-alert quietly overriding the browser default. */
.gg-alert[hidden] {
    display: none;
}

.gg-alert-error:empty {
    display: none;
}

.gg-alert-error ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gg-field-error {
    display: block;
    color: var(--gg-red);
    font-size: 13px;
    margin: -12px 0 14px;
}

.gg-field-error:empty {
    display: none;
}

.contact-form textarea,
.appointment-form input,
.contact-form input {
    font-family: inherit;
}

/* ---------- select dropdown ------------------------------------- */

/* The template only skins bootstrap-select inside .appointment-form, so the
   same control on the contact page rendered as an unstyled Bootstrap button.
   These rules give it the contact form's own field styling: 60px tall, the
   #EDF0F3 grey fill and a 5px radius, so it lines up with the inputs. */

.contact-section .contact-form .select-box {
    margin-bottom: 30px;
}

.contact-section .contact-form .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
    height: 60px;
    margin-bottom: 0;
}

.contact-section .contact-form .bootstrap-select > .dropdown-toggle {
    padding: 0;
}

.contact-section .contact-form .bootstrap-select > .btn {
    height: 100%;
    padding: 0 20px;
    color: #182345;
    background-color: #EDF0F3 !important;
    border: 0;
    box-shadow: none;
    font-size: 15px;
    text-align: left;
    outline: none !important;
    border-radius: 5px;
}

.contact-section .contact-form .bootstrap-select > .btn:hover,
.contact-section .contact-form .bootstrap-select > .btn:focus,
.contact-section .contact-form .bootstrap-select.open > .btn {
    background-color: #e4e8ee !important;
    color: #182345;
}

.contact-section .contact-form .bootstrap-select.btn-group .dropdown-toggle .caret {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -8px;
    width: auto;
    height: auto;
    border: none;
}

.contact-section .contact-form .bootstrap-select.btn-group .dropdown-toggle .caret:before {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 16px;
    color: #182345;
}

.contact-section .contact-form .bootstrap-select.btn-group .dropdown-menu.inner {
    width: 100%;
}

.contact-section .contact-form .bootstrap-select .dropdown-menu {
    padding: 0;
    margin: 0;
    border: 1px solid var(--gg-line);
    border-radius: 0;
    box-shadow: 0 10px 26px rgba(22, 41, 79, .14);
}

.contact-section .contact-form .bootstrap-select .dropdown-menu > li {
    padding: 0;
}

.contact-section .contact-form .bootstrap-select .dropdown-menu > li > a {
    padding: 10px 18px;
    font-size: 14.5px;
    font-weight: normal;
    white-space: normal;
}

.contact-section .contact-form .bootstrap-select .dropdown-menu > li > a span {
    color: var(--gg-grey);
}

.contact-section .contact-form .bootstrap-select .dropdown-menu > li > a:hover,
.contact-section .contact-form .bootstrap-select .dropdown-menu > li.selected > a {
    background: var(--gg-red);
}

.contact-section .contact-form .bootstrap-select .dropdown-menu > li > a:hover span,
.contact-section .contact-form .bootstrap-select .dropdown-menu > li.selected > a span {
    color: #fff;
}

/* Home-page enquiry dropdown: keep the template's white field but move the
   highlight from the template coral onto the brand red. */
.appointment-area .appointment-content .appointment-form .bootstrap-select .dropdown-menu > li > a:hover,
.appointment-area .appointment-content .appointment-form .bootstrap-select .dropdown-menu > li.selected > a {
    background: var(--gg-red);
}

.appointment-area .appointment-content .appointment-form .bootstrap-select .dropdown-menu > li > a:hover span,
.appointment-area .appointment-content .appointment-form .bootstrap-select .dropdown-menu > li.selected > a span {
    color: #fff;
}

.appointment-area .appointment-content .appointment-form .bootstrap-select .dropdown-menu > li > a {
    white-space: normal;
}

.appointment-area .appointment-content .appointment-form .bootstrap-select.btn-group .dropdown-menu.inner {
    width: 100%;
}

/* The service names are long - let the closed control ellipsis rather than
   push the caret out of the field. */
.bootstrap-select .filter-option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 24px;
}

/* ---------- google map ------------------------------------------ */

.gg-map-area {
    position: relative;
    line-height: 0;
}

.gg-map {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
    filter: grayscale(35%);
}

.gg-map-card {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    background: #fff;
    padding: 30px 32px;
    max-width: 340px;
    line-height: 1.7;
    box-shadow: 0 16px 40px rgba(22, 41, 79, .2);
    border-top: 3px solid var(--gg-red);
}

.gg-map-card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--gg-navy);
    margin: 0 0 12px;
}

.gg-map-card h3 i {
    color: var(--gg-red);
    margin-right: 8px;
}

.gg-map-card p {
    color: var(--gg-grey);
    font-size: 14px;
    margin: 0 0 20px;
}

@media (max-width: 767px) {
    .gg-map {
        height: 320px;
    }

    .gg-map-card {
        position: static;
        transform: none;
        max-width: none;
        box-shadow: none;
        text-align: center;
    }
}

/* ---------- error page ------------------------------------------ */

.gg-error-block i {
    font-size: 64px;
    color: var(--gg-red);
    display: block;
    margin-bottom: 22px;
}

.gg-error-block h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--gg-navy);
    margin: 0 0 14px;
}

.gg-error-block p {
    color: var(--gg-grey);
    max-width: 640px;
    margin: 0 auto 26px;
    line-height: 1.8;
}

.gg-error-block a {
    color: var(--gg-red);
}

.gg-error-block a.thm-btn {
    color: #fff;
}

/* ---------- responsive ------------------------------------------ */

@media (max-width: 991px) {
    .gg-brand img {
        height: 72px;
    }

    .gg-brand-name {
        font-size: 19px;
    }

    .gg-brand-sub {
        font-size: 9px;
    }

    .top-bar .container-fluid {
        padding: 10px 20px;
        text-align: center;
    }

    .top-bar .contact-info,
    .top-bar .social {
        float: none !important;
    }

    .top-bar .container-fluid .contact-info a {
        display: block;
        margin: 4px 0 !important;
    }

    .gg-topbar-badge {
        margin-top: 8px;
    }

    .gg-org-depts span,
    .gg-org-ops span {
        flex: 1 1 100%;
    }

    .gg-vm-card-tall {
        height: auto;
    }
}

@media (max-width: 767px) {
    .gg-brand-text {
        display: none; /* the mark alone carries the brand on small screens */
    }

    .gg-quote-band p {
        font-size: 16px;
    }

    .gg-cta-band h2 {
        font-size: 22px;
    }

    .footer-bottom .copy-text,
    .footer-bottom .footer-menu {
        float: none !important;
        text-align: center;
    }
}