/**
 * Project overrides — loaded last, after the design system.
 *
 * Keep edits here rather than in assets/updated/css/*, so those files stay a
 * clean copy of the design system and can be replaced without losing changes.
 */

/* The hover ripple floods the button white. Say the label colour out loud for
   the hover state too, so it can never end up white-on-white. */
.new-btn-position-aware:hover,
.new-btn-position-aware:focus,
.btn-position-aware:hover,
.btn-position-aware:focus {
    color: #000;
}

/* "Approach" card titles. Outside any media query on purpose, so it applies at
   every width. updated-style.css only sets colour and alignment on this
   selector, so there is nothing here to fight. */
.features .item h6 {
    font-size: 26px;
    padding-top: 20px;
}

/* The "approach" cards ship with a per-card `offset-lg-*` and 60px top/bottom
   margins, which scatters them down the page at different heights. Lay them out
   as an even grid instead: three per row, equal height, leftovers centred on the
   next row. The row is narrowed to 75% so a third of it matches the card width
   the four-per-row layout gave. */
@media (min-width: 992px) {
    .features .row.mobile-none {
        --bs-gutter-x: 80px;   /* space between cards, left to right */
        max-width: 86%;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .features .row.mobile-none > [class*="col-lg-"] {
        flex: 0 0 auto;
        width: 33.3333%;
        margin-left: 0 !important;   /* cancels offset-lg-* */
        margin-right: 0 !important;
        display: flex;
    }

    .features .row.mobile-none .item {
        width: 100%;
        margin-top: 0 !important;
        margin-bottom: 80px !important;   /* space between rows */
    }

    /* the icon-to-title-to-copy spacing was tuned for tall staggered cards */
    .features .row.mobile-none .item h6 {
        margin-bottom: 24px !important;
    }
}

/* The FAQ block ships with `padding: 0 0 100px`, so it butts straight up
   against whatever precedes it. Give it matching breathing room on top. */
.follow-sec {
    padding-top: 100px;
}

/* The header is transparent by default, which works over the dark pages. On a
   page that paints the body white its white logo and links vanish, so give it
   the same dark pill it wears once you scroll. */
.light-page .site-header,
.light-page .mobile-header {
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* case-studies sits inside `.about-scope`, so the scoped legacy stylesheet caps
   its container at Bootstrap's 1320px. Match the site-wide container the home
   page uses instead. Below 1400px the two already agree. */
@media (min-width: 1400px) {
    .case-study-pages .about-scope .container {
        max-width: 90.6%;
    }
}

@media (min-width: 2000px) {
    .case-study-pages .about-scope .container {
        max-width: 1850px;
    }
}

/* Legacy pages were laid out under a header that sat in normal flow. The shared
   header is fixed, so reserve its height here. Below lg the mobile header is
   sticky and already takes up its own space. */
@media (min-width: 992px) {
    .legacy-page .about-scope {
        padding-top: 110px;
    }

    /* Unless the page's hero is the shared .lan-banner-section, which lives
       outside .about-scope and already carries the header behind it. */
    .has-new-banner .about-scope {
        padding-top: 0;
    }

    /* That offset keeps ordinary legacy content clear of the fixed header, but a
       page whose first section is a full-bleed banner should run its background up
       behind the header the way the newer templates do. Pull the banner back up by
       the same amount and add it back as padding, so only the artwork moves - the
       heading and form stay below the header. */
    .legacy-page .about-scope > .inner-baner:first-child {
        margin-top: -110px;
        /* Symmetric, so the centred row lands on the screen centre rather than the
           centre of the space left under the header. The 110px of header clearance
           is still there because the banner starts 110px higher than it renders. */
        padding-top: 190px;
        padding-bottom: 190px;
    }

    /* The banner's container and row both carry Bootstrap's .vh-100, so they are a
       full 100vh tall while starting below the section's 190px top padding - they
       overhang the section by 270px, and `align-items: center` then centres against
       that overhang, dropping the heading and form well below the screen centre and
       running the form off the bottom. Fill the section's content box instead.
       .vh-100 is `height: 100vh !important`, so this has to be !important too. */
    .legacy-page .about-scope > .inner-baner:first-child .container.vh-100,
    .legacy-page .about-scope > .inner-baner:first-child .row.vh-100 {
        height: 100% !important;
    }
}

@media (max-width: 991px) {
    .follow-sec {
        padding-top: 70px;
    }
}

@media (max-width: 767px) {
    .follow-sec {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    /* `.follow-social li` ships with `padding: 1.6rem 4rem` at every width, so
       on a 390px phone 128px of the screen is padding and the questions break
       across three lines. Give the row back its width. */
    .follow-social li {
        padding: 1.1rem 1.25rem;
    }

    /* The heading and the cards are a col-md-5 / col-md-7 pair, so below 768px
       they stack. The markup asks for the gap with `md-mb80`, but no stylesheet
       ever defines that class, so the cards ended up flush under the heading. */
    .testimonial-module .testimonial-heading {
        margin-bottom: 32px;
    }
}

/* "Let's get started" is an <h3>, but the responsive step-downs in
   updated-style.css were written for `.site-footer .footer-header h2`, which
   the markup never uses - so it stayed at 90px on a phone. Mirror the sizes
   the h2 rules intended. */
@media (max-width: 992px) {
    .site-footer .footer-header h3 {
        font-size: 56px;
    }
}

@media (max-width: 576px) {
    .site-footer .footer-header h3 {
        font-size: 44px;
    }
}

/* These two headings now sit directly above their paragraph in a half-width
   column, so about-scope.css's `text-align: right` and 4rem top margin - written
   for when the heading had its own column opposite the copy - no longer fit. */
.about-scope .about-services h2,
.about-scope .about-services2 h2 {
    text-align: left;
    margin: 0 0 1.5rem;
}

/* Same reason: the copy carried `margin: 4rem 3rem 0`, which indented it away
   from the heading now sitting directly above it in the same column. */
.about-scope .about-services p,
.about-scope .about-services2 p {
    margin: 0 0 1rem;
}

/* Those 4rem heading/paragraph margins were also what gave these sections their
   breathing room, so put it back on the section itself now that the copy sits
   flush with its heading. */
.about-scope .about-services,
.about-scope .about-services2 {
    padding-top: 90px;
    padding-bottom: 90px;
}

@media (max-width: 991px) {
    .about-scope .about-services,
    .about-scope .about-services2 {
        padding-top: 55px;
        padding-bottom: 55px;
    }
}

/* The button follows the paragraph now; about-scope.css centres it at narrow
   widths and adds a 50px top margin meant for the old layout. */
.about-scope .about-services2 .btn-with-arrow {
    justify-content: flex-start;
    margin-top: 28px;
}

/* "How Our Process Works" accordion body. It inherits the full width of the
   header row, so the copy runs the whole way out under the +/- icon and reads as
   though it is crowding the step number sitting just to its left. Pull the right
   edge in and cap the measure so it stays comfortably inside the row. */
.about-scope .way-work .faq_header .accordion-body {
    padding-right: 90px;
    max-width: 100%;
    line-height: 1.7;
    padding-top: 20px;
}

@media (max-width: 991px) {
    .about-scope .way-work .faq_header .accordion-body {
        padding-right: 40px;
        max-width: 100%;
    }
}

/* Section image column (.section-media) used where a heading now sits above the
   copy and the artwork takes the other half of the row. */
.section-media {
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
    line-height: 0;
}

.section-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 991px) {
    .section-media {
        margin-top: 30px;
        max-height: 320px;
    }
}

/* "Start Growing Your Business With Us!" CTA parity.
   updated-style.css lays this out as two 50% flex columns - "Business" left,
   "With Us!" right - leaving the middle clear for the astronaut. about-scope.css
   instead has `.get-in-touch-content h2 span { display: block; text-align: right }`
   with no width, so on the .about-scope pages both halves shrink to their text and
   sit right-aligned: "Business" slides into the middle and the astronaut lands on
   top of it. Restate the standard, plus the same box padding and type size, so the
   CTA is identical everywhere. */
.about-scope .purple-box {
    padding: 59px 40px;
}

.about-scope .get-in-touch .get-in-touch-content h2 {
    font-size: 102px;
}

.about-scope .get-in-touch .get-in-touch-content h2 span {
    display: block;
    width: 50%;
    text-align: left;
}

.about-scope .get-in-touch .get-in-touch-content h2 span:last-child {
    text-align: right;
    position: relative;
    top: 60px;
}

@media (max-width: 1400px) {
    .about-scope .get-in-touch .get-in-touch-content h2 { font-size: 85px; }
}

@media (max-width: 767px) {
    .about-scope .get-in-touch .get-in-touch-content h2 span,
    .about-scope .get-in-touch .get-in-touch-content h2 span:last-child {
        width: 100%;
        text-align: center;
        top: 0;
    }
}

/* Container width parity across the site.
   updated-style.css sets the site standard: Bootstrap's ladder up to 1200px,
   then 90.6% from 1400px and a 1850px cap from 2000px. about-scope.css ships its
   own competing ladder for .container - 95% under 991px, 1230px/1300px in the
   1300-1400 band, and a copy of Bootstrap's that ends at 1320px - so the eight
   pages wrapped in .about-scope render ~1320px wide while the other 27 sit at
   90.6% (1711px on a 1920 viewport). Same specificity, later file, so restating
   the standard here is what lines them up. */
.about-scope .container {
    max-width: 100%;
}

@media (min-width: 576px)  { .about-scope .container { max-width: 540px; } }
@media (min-width: 768px)  { .about-scope .container { max-width: 720px; } }
@media (min-width: 992px)  { .about-scope .container { max-width: 960px; } }
@media (min-width: 1200px) { .about-scope .container { max-width: 1140px; } }
@media (min-width: 1400px) { .about-scope .container { max-width: 90.6%; } }
@media (min-width: 2000px) { .about-scope .container { max-width: 1850px; } }

/* The header is a fixed 1290px pill on every page; keep it out of the above. */
.about-scope .site-header .container,
.site-header .container {
    max-width: 1290px;
}

/* Legacy banner copy (.inner-baner article).
   The paragraph, rule and CTA carry data-aos="fade-up", which starts them at
   opacity 0. Once the banner row is vertically centred they sit lower than the
   position AOS measured at init, and because these pages scroll through
   ScrollSmoother's transform no real scroll event fires to re-evaluate them - so
   they never get .aos-animate and stay invisible. AOS.refreshHard() does not
   recover it either. The banner is above the fold, where an entrance animation
   earns nothing, so show this copy outright. Higher specificity than AOS's own
   [data-aos^="fade"] rule, so no !important is needed. */
.inner-baner article [data-aos] {
    opacity: 1;
    transform: none;
}

/* Services slider arrows (.box-container2).
   slick-theme.css is not loaded - only the base slick-slider.css - so slick's
   buttons keep their literal "Previous"/"Next" label and get no glyph, and
   about-scope.css parks them at left:100px / bottom:20%, which is why they
   appeared as two tiny broken circles stacked down the left edge. Restated with
   the .about-scope prefix so they beat those rules on specificity, and with the
   bare selector so the section still works outside that wrapper. */
.box-container2 .slick-prev,
.box-container2 .slick-next,
.about-scope .box-container2 .slick-prev,
.about-scope .box-container2 .slick-next {
    position: absolute;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 0;              /* hides the literal Previous / Next label */
    line-height: 0;
    color: transparent;
    cursor: pointer;
    z-index: 5;
    transition: background .3s ease, border-color .3s ease;
}

.box-container2 .slick-prev,
.about-scope .box-container2 .slick-prev {
    left: 24px;
    right: auto;
}

.box-container2 .slick-next,
.about-scope .box-container2 .slick-next {
    right: 24px;
    left: auto;
}

.box-container2 .slick-prev:hover,
.box-container2 .slick-next:hover,
.box-container2 .slick-prev:focus,
.box-container2 .slick-next:focus,
.about-scope .box-container2 .slick-prev:hover,
.about-scope .box-container2 .slick-next:hover,
.about-scope .box-container2 .slick-prev:focus,
.about-scope .box-container2 .slick-next:focus {
    background: #37b4e4;
    border-color: #37b4e4;
}

/* Chevron drawn from two borders, so it needs no icon font. */
.box-container2 .slick-prev::before,
.box-container2 .slick-next::before,
.about-scope .box-container2 .slick-prev::before,
.about-scope .box-container2 .slick-next::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    opacity: 1;
    font-size: 0;
}

.box-container2 .slick-prev::before,
.about-scope .box-container2 .slick-prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.box-container2 .slick-next::before,
.about-scope .box-container2 .slick-next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

@media (max-width: 767px) {
    .box-container2 .slick-prev,
    .box-container2 .slick-next,
    .about-scope .box-container2 .slick-prev,
    .about-scope .box-container2 .slick-next {
        width: 40px;
        height: 40px;
    }

    .box-container2 .slick-prev,
    .about-scope .box-container2 .slick-prev { left: 8px; }

    .box-container2 .slick-next,
    .about-scope .box-container2 .slick-next { right: 8px; }
}

/* Message textarea that replaced the budget slider / was added to the banner
   forms. A textarea is not an `input`, so none of the existing form rules reach
   it and it would fall back to the browser's default box. Two banner designs are
   in use and they style their fields differently, so match each one.

   1. New-style banners (.lan-banner-section, 26 pages) and the two popups
      (.form-container): borderless underline fields, `padding: 16px 0`. */
.lan-banner-section .field-outer textarea,
.form-container textarea {
    width: 100%;
    padding: 16px 0;
    font-size: 16px;
    font-family: inherit;
    line-height: 150%;
    font-weight: 400;
    color: #fff;
    background: transparent;
    border: 0;
    outline: 0;
    resize: vertical;
    min-height: 56px;
}

/* ...except that the popup's own fields are underlined - `.form-container input`
   in updated-style.css gives them `border-bottom: 1px solid #ffffff9e`. The
   banner fields above really are borderless, so only the popup gets the line. */
.form-container textarea {
    border-bottom: 1px solid #ffffff9e;
    height: 100px;
}

/* 2. Legacy banners (.inner-baner - brochure and custom-logo): about-scope.css
      gives their inputs `border: 2px solid #37b4e4; padding: 16px; font-size:
      .875em`, so the textarea has to carry the same box or it reads as broken. */
.inner-baner .field-outer textarea {
    width: 100%;
    padding: 16px;
    font-size: .875em;
    font-family: inherit;
    line-height: 150%;
    font-weight: 400;
    color: #fff;
    background: transparent;
    border: 2px solid #37b4e4;
    border-radius: 0;
    outline: 0;
    resize: vertical;
    min-height: 92px;
}

/* 3. The same shared form is also included on pages with neither wrapper - the
      contact page - where none of the rules above reach the textarea. It fell
      back to the browser's default box, and to its focus ring on click. Scope by
      the form's own id so every page that includes the form gets the same field.
      Same values as the new-style banners, so nothing changes where those apply. */
#lp-landing-page .field-outer textarea {
    width: 100%;
    padding: 16px 0;
    font-size: 16px;
    font-family: inherit;
    line-height: 150%;
    font-weight: 400;
    color: #fff;
    background: transparent;
    border: 0;
    outline: 0;
    resize: vertical;
    min-height: 56px;
}

.lan-banner-section .field-outer textarea::placeholder,
.form-container textarea::placeholder,
.inner-baner .field-outer textarea::placeholder,
#lp-landing-page .field-outer textarea::placeholder {
    color: #bfbfbf;
    opacity: 1;
}

/* Footer office email. updated-style.css styles .office-phone and .office-address
   but has no .office-email, so the link fell back to the default blue while the
   phone and address next to it are white. Match the phone. */
.office-email {
    font-size: 16px;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.6;
    font-weight: 300;
}

/* about-scope.css carries `.about-scope a, .about-scope a:hover { color: #000 }`.
   That is the same specificity as updated-style.css's `.office-phone a` but loads
   after it, so on any page where the footer sits inside .about-scope the phone
   and address render black on the black footer - invisible. This file loads after
   about-scope.css, so restating them here is what actually wins. The email only
   ever looked right because its rule was already declared here. */
.office-phone a,
.office-email a,
.office-address a {
    color: #fff;
}

/* Banner watermark. updated-style.css sizes this at 19vw, which fitted the old
   10-character brand; "the website providers" is 21 characters and at that size
   wraps to a second line and pushes the page sideways. Scale it to the new
   length and keep it on one line. */
.banner-text-bottom span {
    font-size: 8.5vw;
    white-space: nowrap;
    bottom: -44px;
}

@media (max-width: 767px) {
    .banner-text-bottom span {
        font-size: 9.5vw;
        bottom: -26px;
    }
}

/* ------------------------------------------------------------------
   Header mega-menu: fit every service name on one line.
   updated-style.css gives .dg-dropdown-item 55px of left padding, leaving
   only ~207px for text, so four names wrapped to two lines: Ecommerce
   Website Development, Mobile App Development Services, Woocommerce
   Website Development and Online Reputation Management. A narrower tab
   rail plus a tighter dot inset frees ~29px; the longest name still needs
   a slightly smaller face to clear it.

   The font-size must be set via .site-header-menu a.dg-dropdown-item -
   updated-style.css has `.site-header-menu a { font-size: 15px }`, whose
   (0,1,1) specificity beats a bare `.dg-dropdown-item` rule.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .dg-dropdown-menu {
        grid-template-columns: 225px 1fr;
    }

    .site-header-menu a.dg-dropdown-item {
        padding: 20px 8px 20px 34px;
        font-size: 13.5px;
    }

    .dg-dropdown-item::before {
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
    }
}

/* Under ~1280px the menu is capped at calc(100vw - 40px), so three columns
   leave too little room for the longest names again. Drop to two columns
   (the three .dg-dropdown-column blocks reflow onto two rows). */
@media (min-width: 992px) and (max-width: 1279px) {
    .dg-dropdown-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ------------------------------------------------------------------
   Services accordion icons.

   updated-style.css greys the icons out (`.faq-img img { grayscale(1) }`)
   and drops the grey on hover (`.accordion-item:hover img { grayscale(0) }`),
   which reveals each PNG's own brand colour - Shopify's lime green, WordPress
   blue and so on. That is the old theme showing through.

   Tint them to the site's blue instead. The chain below was solved against a
   real canvas filter and lands exactly on #37b4e4 - rgb(55,180,228), zero error.
   `brightness(0) saturate(100%)` flattens the artwork to a black silhouette
   first, so every icon ends up the same blue whatever colour it started as.

   The `:not(.collapsed)` half matters for touch: phones have no hover, so
   without it an opened item would keep sitting there in grey.
   ------------------------------------------------------------------ */
.accordion-item:hover .faq-img img,
.accordion-button:not(.collapsed) .faq-img img,
.accordion-item:hover .faq-img img:hover {
    filter: brightness(0) saturate(100%) invert(46.96%) sepia(9.4%) saturate(3953.86%) hue-rotate(162.05deg) brightness(138.63%) contrast(79.24%);
    -webkit-filter: brightness(0) saturate(100%) invert(46.96%) sepia(9.4%) saturate(3953.86%) hue-rotate(162.05deg) brightness(138.63%) contrast(79.24%);
}

/* The services-accordion intro. updated-style.css centres the heading below
   768px (`.services_accordion_section .faq-title`) but leaves the paragraph
   left-aligned under it, so the block reads lopsided on a phone. The hard <br>
   breaks in the markup were measured for the desktop line length; left in, they
   drop single words onto their own line once the text is centred. */
@media (max-width: 768px) {
    .services_accordion_section .services-wrap p {
        text-align: center;
    }

    .services_accordion_section .services-wrap p br {
        display: none;
    }
}

/* Below 992px the shared mobile header is `position: fixed` and 86px tall, so
   unlike a sticky header it takes up no space in the flow and the first legacy
   section slides underneath it - on case-studies the "Take a look at our
   projects" heading was half hidden behind the logo bar.

   The desktop equivalent of this (110px) is in the min-width:992px block above;
   this is the same idea at the mobile header's height plus a little air.
   Pages carrying .has-new-banner are excluded for the same reason as on
   desktop: their hero is meant to run up behind the header. */
@media (max-width: 991px) {
    .legacy-page .about-scope {
        padding-top: 100px;
    }

    .has-new-banner .about-scope {
        padding-top: 0;
    }
}

/* `.butn-bord-sm` is built for a dark background - white border, white bullet -
   but never sets a text colour, so inside .about-scope it inherits Bootstrap's
   near-black body colour and the label disappears on the black page. Only the
   dot and the outline were showing. Applies at every width. */
.about-scope .butn-bord-sm {
    color: #fff;
    /* about-scope.css also repaints the border black, which hid the pill outline
       the 30px radius and 10px/20px padding were drawn for. */
    border-color: rgba(255, 255, 255, 0.5);
}

/* Mobile header: was `position: sticky; top: 0` in main-style.css and
   updated-style.css, so it stayed pinned over the content on every page at
   phone widths. Let it scroll away with the page instead.
   (case-studies/assets/css/style.css loads after this file and set its own
   `position: fixed`, so that one is corrected in place rather than here.) */
.mobile-header {
    position: static;
}

/* On these legacy sections about-scope.css centres the paragraph below 768px,
   but the `text-align: left` set on the heading further up this file applies at
   every width - so on a phone the heading sat left while its own paragraph was
   centred underneath it. Let the heading follow the paragraph at that width. */
@media (max-width: 767px) {
    .about-scope .about-services h2,
    .about-scope .about-services2 h2 {
        text-align: center;
    }
}

/* about-us banner: the paragraph is centred below 768px but the h1 stays left,
   so the two sat out of line on a phone - same mismatch as the .about-services
   sections above. Scoped to this banner so the other legacy banners keep their
   own alignment. */
@media (max-width: 767px) {
    .inner-baner-about article h1 {
        text-align: center;
    }
}

/* ------------------------------------------------------------------
   "Start Growing Your Business With Us!" CTA on mobile.

   The two <span>s are laid out as a 50%-wide pair with the second one
   offset (`top: 60px`) so they read as a staggered headline. That works
   at desktop widths, but the rules had no upper bound: on a 390px phone
   50% is about 213px, each word wraps inside it and the two spans end up
   sitting on top of each other - "Business" and "With Us!" rendered as
   overlapping letters.

   Below 768px stack them full width instead and drop the offset.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* The h2 lays its two spans out side by side, so `display: block` on the
       spans alone does not stack them - the heading itself has to become a
       column first. */
    .get-in-touch .get-in-touch-content h2,
    .about-scope .get-in-touch .get-in-touch-content h2 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .get-in-touch .get-in-touch-content h2 span,
    .get-in-touch .get-in-touch-content h2 span:last-child,
    .about-scope .get-in-touch .get-in-touch-content h2 span,
    .about-scope .get-in-touch .get-in-touch-content h2 span:last-child {
        display: block;
        width: 100%;
        text-align: center;
        position: static;
        top: auto;
    }

    /* 85px was inherited from the desktop treatment and is far too large once
       each line is full width. */
    .about-scope .get-in-touch .get-in-touch-content h2 {
        font-size: 42px;
    }

    .get-in-touch .get-in-touch-content .subtitle {
        text-align: center;
    }

    /* The button under .about-services2 is pinned left for the desktop layout;
       centre it with the heading and copy now that those are centred. */
    .about-scope .about-services2 .btn-with-arrow {
        justify-content: center;
    }
}

/* These sections are a col-md-6 pair, so below 768px they stack with nothing
   between them - the image sat flush against the heading. The image is first in
   .about-services2 and second in .about-services, so put the space on whichever
   column lands second rather than on the image itself. */
@media (max-width: 767px) {
    /* !important because these columns carry bootstrap's `.my-auto`, whose
       `margin-top: auto !important` wins over any plain rule. */
    .about-scope .about-services .row > [class*="col-"] + [class*="col-"],
    .about-scope .about-services2 .row > [class*="col-"] + [class*="col-"] {
        margin-top: 28px !important;
    }
}

/* "How Our Process Works" section (brochure + custom-logo, the only two pages
   with .way-work). On a phone the three decorative dots sat beside the heading
   and the heading was centred, so the two collided. Mobile only - desktop keeps
   the dots and already had the heading left.
   !important on the heading because a mobile rule in about-scope.css centres it. */
@media (max-width: 767px) {
    .way-work .cercle {
        display: none;
    }

    .way-work .ways-worker h2,
    .about-scope .way-work .ways-worker h2 {
        text-align: left !important;
        /* about-scope.css gives this heading `padding-left: 5rem` plus a 1rem
           side margin to clear the dots. With the dots hidden here that just
           pushed the heading 96px right of its own paragraph. */
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------------------------------------------------------------------------
   Shared FAQ section (includes/faq.php) on phones.

   Three things ran at desktop sizes on a phone:
   - the astronaut is 175px tall below 768px and sat over the heading;
   - updated-style.css only shrinks `.follow-sec .follow-header h2` on mobile,
     but this section's heading is an `h3`, so it stayed at 100px;
   - `.follow-social li a` is 30px, which wrapped every question onto 2-3 lines.

   These live here rather than in updated-style.css because about-scope.css
   loads after it and carries its own `.about-scope .follow-social li a`. Equal
   specificity, later file, so this wins on scoped and unscoped pages alike.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Two mobile fixes on the legacy service pages (brochure-design-services.php,
   custom-logo-design-service.php). Both rules being corrected live in
   about-scope.css, which loads immediately before this file, so restating them
   here at the same specificity is what wins.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* about-scope.css:5758 sets `line-height: 1.9` on this 24px heading. That is
       body-copy spacing - on a three-line heading it left a visible gap between
       every line. */
    .cb-postcard2 .info h2,
    .about-scope .cb-postcard2 .info h2 {
        line-height: 1.25;
    }

    /* The "+" after the counter is a bare text node inside the h5, so it wraps
       like any other word. about-scope.css leaves this heading at 8.5rem (136px)
       until 375px, which on a phone left no room for the "+" beside the number.
       nowrap keeps them together whatever the width. */
    .experience-sec .content .counter h5,
    .about-scope .experience-sec .content .counter h5 {
        font-size: 7rem;
        line-height: 1.1;
        white-space: nowrap;
    }
}

/* Tablets kept the 409px desktop astronaut: updated-style.css only shrinks it
   below 768px, so 768-991px got the full-size one sitting over the questions.
   `z-index: 0` puts it behind the list as well - it is decoration, and the
   questions have to stay readable whatever the viewport. */
@media (max-width: 991px) {
    .follow-sec .follow-header .follow-image-wrapper img {
        height: 150px;
        max-width: 46%;
        object-fit: contain;
        top: -66px;
        right: 0;
        z-index: 0;
    }
}

@media (max-width: 767px) {
    .follow-sec .follow-header .follow-image-wrapper img {
        height: 130px !important;
        top: -80px;
        right: -6px;
    }

    .follow-sec .follow-header h3 {
        font-size: 40px;
        margin-block: 10px 28px;
    }

    .follow-sec .follow-social li a,
    .about-scope .follow-sec .follow-social li a {
        font-size: 18px;
    }

    .follow-sec .follow-social li a .follow-faq-q {
        font-size: 17px !important;
    }

    .follow-sec .follow-social li a .faq-number {
        font-size: 30px;
        min-width: 42px;
    }

    .follow-sec .follow-social li a img {
        height: 20px;
    }
}

@media (max-width: 480px) {
    /* the image deliberately has no override here - the 767px sizing above
       carries all the way down so it stays exactly as tuned */

    .follow-sec .follow-header h3 {
        font-size: 32px;
    }

    .follow-sec .follow-social li a,
    .about-scope .follow-sec .follow-social li a {
        font-size: 16px;
    }

    .follow-sec .follow-social li a .faq-number {
        font-size: 26px;
        min-width: 36px;
    }
}

/* ===== Home hero: gif centred over the banner video ===== */
/* frost the video itself — backdrop-filter mirrors its backdrop inside
   .main-img because that box is clipped (clip-path) and scaled by GSAP */
.header-ca .main-img .bg-video {
    filter: blur(3px) saturate(112%);
    transform: scale(1.06);
}

.header-ca .main-img .hero-glass {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.72) 100%),
                rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.header-ca .main-img .hero-gif {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 55%;
    max-width: 780px;
    line-height: 0;
    pointer-events: none;
}

.header-ca .main-img .hero-gif img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .header-ca .main-img .hero-gif {
        width: 82%;
    }
}

/* ===== Services switcher videos: light dark overlay =====
   Done as a filter on the video itself rather than an ::after layer: the
   video morphs from a 13rem circle to a full-width pill on hover, so an
   overlay element would have to track both the size and the radius. */
.services-sec .switcher .video video {
    filter: brightness(0.68) saturate(105%);
}

/* ===== "Web Design" (section 4) mirrors "Branding" (section 2) =====
   Video on the left, copy right-aligned. main-style.css only ever wrote this
   layout as `.services-sec-2`, so the geometry is repeated here for section 4.
   Its colour rules are deliberately NOT copied - section 4 stays dark. */
.services-sec-4 .services-sec-top-wrapper .col-md-8 {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

.services-sec-4 .services-sec-title {
    text-align: end;
}

.services-sec-4 .services-sec-wrapper {
    grid-template-columns: 1.2fr 4fr .55fr;
}

.services-sec-4 .services-sec-numbers-col .services-sec-scroll-text {
    left: auto;
    right: 52%;
}

.services-sec-4 .services-sec-number {
    text-align: start;
}

.services-sec-4 .services-sec-content {
    padding-left: 40px;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.services-sec-4 .services-sec-content h4 a,
.services-sec-4 .services-sec-content p {
    text-align: end;
}

.services-sec-4 .services-sec-slide-numbers {
    align-items: flex-end;
}

.services-sec-4 .services-sec-slide-number-item {
    padding-left: 0;
    padding-right: 12px;
}

/* Once .services-sec-wrapper collapses to a single column the right-alignment
   has nothing to sit against, so hand it back to centre. */
@media (max-width: 992px) {
    .services-sec-4 .services-sec-content {
        align-items: center;
    }

    .services-sec-4 .services-sec-content h4 a,
    .services-sec-4 .services-sec-content p {
        text-align: center;
    }

    .services-sec-4 .services-sec-slide-numbers {
        align-items: center;
    }
}

/* col-md-8 / col-md-4 stack below md */
@media (max-width: 767.98px) {
    .services-sec-4 .services-sec-top-wrapper .col-md-8 {
        align-items: center;
    }
}

/* .experience-sec-2 holds a near-square logo graphic (915x924) in a 420x530
   portrait box, so `object-fit: cover` was already cropping ~100px off its
   sides. The margin offset added for the cut-out figure in .experience-sec then
   pushed another 38px of it past the container's overflow. That offset is only
   right for the figure, so fit the whole graphic here instead. */
.experience-sec-2 .profile-img .img img {
    width: 100% !important;
    height: 100%;
    object-fit: contain;
    margin-left: 0;
    margin-top: 0;
    display: block;   /* an inline img sits on the baseline, hanging 15px out */
}

/* .inner-baner-about is `height: 100vh` with `align-items: center`, so its content
   lands on the centre of the section. The fixed header then covers the top ~111px,
   which leaves 141px of clear space above the content and 252px below it - the
   banner reads as top-heavy. Shift the content down by half the header's height so
   it sits on the centre of the band you can actually see. */
@media (min-width: 992px) {
    .about-scope .inner-baner-about {
        padding-top: 176px;
        padding-bottom: 64px;
    }
}

/* WooCommerce CTA: "WooCommerce" is far longer than the one-word headings the
   other pages use (Business, Brand), so at the shared 102px it runs under the
   statue. Size it down on this page only, and set "Store" as a lighter line
   sitting just above "With Us!". */
.woocommerce-website-development-dubai .get-in-touch .get-in-touch-content h2 {
    font-size: 78px;
}

/* Same problem wherever the CTA heading is more than one short word: each half is
   only 50% wide, so at 102px the line runs under the statue. Opt in with
   `cta-md` on the h2 instead of adding another body-class rule. */
.get-in-touch .get-in-touch-content h2.cta-md {
    font-size: 78px;
}

/* CTA statue: the shared rule tilts and enlarges it whenever the pointer is
   anywhere over the panel. Hold it still by repeating the resting transform.
   Below 992px the image is position:static, where a translate would shift it
   off-centre, so that breakpoint keeps `none` as updated-style.css has it. */
.get-in-touch .get-in-touch-content:hover .hand-image {
    transform: translate(-50%, -50%);
}

@media (max-width: 991px) {
    .get-in-touch .get-in-touch-content:hover .hand-image {
        transform: none;
    }
}

/* Opt-in CTA variant: the right half stacks a small line over the big one, so it
   mirrors the left column's `.subtitle` + heading pair. Add `cta-stacked` to the
   h2 and wrap the two lines in .cta-sub / .cta-main.

   A flex column rather than a block with a negative margin: the margin collapsed
   through the parent span and dropped the first line onto the second. */
.get-in-touch .get-in-touch-content h2.cta-stacked > span:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    top: 18px;   /* the shared rule pushes this half down 60px */
}

.get-in-touch .get-in-touch-content h2.cta-stacked .cta-sub,
.get-in-touch .get-in-touch-content h2.cta-stacked .cta-main {
    display: block;
    width: auto;
    /* `h2 span:last-child` also matches .cta-main, which inherited its 60px
       offset and opened a gap between the two lines. */
    position: static;
    top: auto;
}

/* Same size and weight as .subtitle on the left, sitting tight on the big line. */
.get-in-touch .get-in-touch-content h2.cta-stacked .cta-sub {
    font-size: 45px;
    font-weight: 400;
    line-height: 54px;
}

.get-in-touch .get-in-touch-content h2.cta-stacked .cta-main {
    line-height: 1.2;
}


.field-outer textarea {
    border: 0;
    background: transparent !important;
}

/* Process section intro. It is the only thing in that column with no width of
   its own, so on a wide screen its line runs the full half and ends hard against
   the numbered steps beside it. Cap the measure instead. */
.way-work .ways-worker article > p {
    max-width: 62ch;
}



/* Footer bottom bar: copyright on the left, site links centred, legal links on
   the right. The base rule centres this block, so the grid overrides it.
   `1fr auto 1fr` is what keeps the middle group on the true centre line - the
   two outer columns are equal whatever their content - while still letting the
   long copyright line have more room than an even third would give it. */
.footer-copyright {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px 32px;
    text-align: left;
}

.footer-copyright > .footer-legal-links {
    justify-content: flex-end;
}

.footer-copyright .footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-copyright .footer-bottom-links a {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: #fff;
    text-decoration: none;
    transition: opacity .3s ease;
}

.footer-copyright .footer-bottom-links a:hover {
    opacity: .65;
}

/* Below lg the three groups no longer fit side by side, so stack them centred
   rather than squeezing three columns into a phone. */
@media (max-width: 991px) {
    .footer-copyright {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 14px;
    }

    .footer-copyright > .footer-legal-links {
        justify-content: center;
    }

    .footer-copyright .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 20px;
    }
}