/* ============================================================
   modern.css — minimal / clean refresh layer
   Loaded AFTER style.css. Keeps the brand coral + warm yellow
   (from the logo) but flattens the palette, neutralises busy
   backgrounds, unifies radii/shadows and modernises type.
   Safe to remove this <link> to fully revert.
   ============================================================ */

:root {
    /* brand accent (coral from logo) — darkened to #d23b47 so coral text
       and white-on-coral buttons clear WCAG AA contrast (4.71:1). */
    --ld-main-color: #d23b47;
    --ld-main-color-dark: #b22f3a;
    --ld-main-light: #fdecec;       /* soft coral chip bg */
    --ld-main-color1: #f6f6f9;      /* was pink service bg -> neutral */
    --ld-accent-yellow: #f4c84a;    /* ribbon yellow, used sparingly */

    /* neutral system */
    --ld-heading-color: #16161f;
    --ld-text-color: #5c5c6a;
    --ld-muted-color: #8a8a99;
    --ld-border: #ececf1;
    --ld-surface: #ffffff;
    --ld-bg-soft: #f7f7f9;
    --ld-light-color: #fafafa;

    /* dark footer */
    --ld-footer: #16161f;
    --ld-footer-text: #b9b9c6;
    --ld-copywrite: #101017;

    /* tokens */
    --ld-radius: 18px;
    --ld-radius-sm: 12px;
    --ld-shadow-sm: 0 6px 24px rgba(20, 20, 40, .05);
    --ld-shadow-md: 0 14px 40px rgba(20, 20, 40, .08);
    --ld-shadow-lg: 0 24px 56px rgba(20, 20, 40, .12);
    --ld-shadow-coral: 0 14px 34px rgba(233, 75, 87, .28);
}

/* ---------- base ---------- */
body {
    color: var(--ld-text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* With explicit width/height attributes added to <img> for CLS, the
   template's `img{max-width:100%}` (no height:auto) let the fixed height
   attribute distort width-constrained images (e.g. footer QR codes).
   Restore proportional scaling. Specific rules (logo height, swiper
   slide height:100%) are more specific and still win. */
img {
    max-width: 100%;
    height: auto;
}

/* Header logo is sized by CSS height (80px); force width:auto so the
   width="730" presentational hint can't stretch it on Safari/Firefox. */
.ld-logo img {
    width: auto;
}

/* ---------- section headings + eyebrows ---------- */
.ld-all-heading h1 {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.6px;
    line-height: 1.25;
    color: var(--ld-heading-color);
}

.ld-about-right h1,
.ld-choose-left h1 {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.6px;
    line-height: 1.25;
}

.ld-about-right h2,
.ld-choose-left h2 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2.5px;
    color: var(--ld-main-color);
}

.ld-about-right p,
.ld-choose-left p,
.ld-service-box p {
    font-size: 15px;
    line-height: 1.75;
}

/* ---------- banner / hero ---------- */
.ld-banner-left h1 {
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.12;
}

.ld-banner-left p {
    font-weight: 300;
    opacity: .92;
}

/* ---------- buttons: unified pill ---------- */
a.ld-all-btn,
a.ld-all-btn1,
a.ld-top-header-btn,
a.ld-footer-btn {
    border-radius: 100px !important;
    font-weight: 600;
    letter-spacing: .2px;
}

a.ld-all-btn:hover,
a.ld-all-btn1:hover,
a.ld-top-header-btn:hover,
a.ld-footer-btn:hover {
    border-radius: 100px !important;
    transform: translateY(-2px);
}

/* primary hero CTA -> solid coral */
a.ld-top-intro-btn {
    background-color: var(--ld-main-color);
    color: #fff;
    box-shadow: var(--ld-shadow-coral);
}

a.ld-top-intro-btn span svg {
    fill: #fff;
}

a.ld-top-intro-btn:hover {
    background-color: var(--ld-main-color-dark);
    box-shadow: 0 18px 40px rgba(233, 75, 87, .38);
}

/* ---------- header / sticky ---------- */
ul.ld-header-menu li a {
    font-weight: 500;
}

ul.ld-header-menu li a:hover {
    opacity: .72;
}

/* Sticky header stays brand coral so the white logo wordmark + white
   menu remain visible; subtle blur/shadow keeps it modern. */
.ld-header-wrapper.ld-header-fixed {
    background-color: rgba(210, 59, 71, .97);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
    padding-top: 14px;
    padding-bottom: 14px;
}

.ld-header-fixed ul.ld-header-menu li a:hover {
    opacity: .8;
}

/* ---------- service cards ---------- */
.ld-service-wrapper {
    background-color: var(--ld-bg-soft);
}

.ld-service-box {
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow-sm);
    padding: 48px 26px;
}

.ld-service-box img {
    transition: transform .35s ease;
}

.ld-service-box h2 {
    font-weight: 600;
    letter-spacing: -0.2px;
}

.ld-service-box:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: var(--ld-shadow-lg);
}

.ld-service-box:hover img {
    transform: scale(1.08);
}

/* ---------- choose us ---------- */
.ld-choose-option1-text h1 {
    font-weight: 600;
}

/* ---------- testimonials: single clean card ---------- */
.ld-client-wrapper {
    background-image: none;
    background-color: var(--ld-bg-soft);
}

.ld-client-box {
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow-md);
    padding: 50px 44px 44px;
}

.ld-client-box::after {
    display: none;
}

.ld-client-box-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ld-text-color);
}

.ld-client-box-text h2 {
    margin-top: 22px;
}

.ld-client-box-text h2 a {
    color: var(--ld-main-color);
}

/* pagination bullets */
.swiper-pagination-bullet {
    background: #d6d6df;
    opacity: 1;
    width: 8px;
    height: 8px;
    transition: all .25s ease;
}

.swiper-pagination-bullet-active {
    background: var(--ld-main-color);
    width: 24px;
    border-radius: 5px;
}

/* ---------- work steps ---------- */
.ld-work-box h5 {
    background-color: var(--ld-main-light);
    /* darker coral so the badge label clears AA on the light coral chip */
    color: var(--ld-main-color-dark);
    font-weight: 600;
    border-radius: 100px;
}

.ld-work-box:hover h5 {
    background-color: var(--ld-main-color);
    color: #fff;
}

.ld-work-box:after {
    border-color: var(--ld-border);
}

/* ---------- pricing ---------- */
.ld-plan-wrapper {
    background-image: none;
    background-color: var(--ld-bg-soft);
}

.ld-plan-section-box {
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    box-shadow: var(--ld-shadow-sm);
}

/* highlight the express option */
.ld-plan-section-box:nth-child(2) {
    border-color: var(--ld-main-color);
    box-shadow: 0 12px 32px rgba(233, 75, 87, .14);
}

.ld-plan-section-box:hover {
    background-color: var(--ld-main-color);
    box-shadow: var(--ld-shadow-coral);
}

/* ---------- footer ---------- */
.ld-footer-inner {
    border-bottom-color: rgba(255, 255, 255, .12);
}

/* ---------- goto-top ---------- */
.ld-top-icon a {
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(233, 75, 87, .35);
}

.ld-top-icon a svg {
    fill: none;
    stroke: #fff;
    transform: none;
}

/* ---------- tap targets (a11y): grow touch area to >=48px ---------- */
/* Language switch flags: keep the 24px flag but give each link a 48px
   hit area, centered. (style.css sized the <a> to 24px.) */
.language-container a {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.language-container a img {
    width: 24px;
    height: 24px;
}

/* Mobile hamburger: pad the bars out to a 48px square touch target.
   Negative margin keeps it visually aligned despite the added padding. */
.ld-toggle-btn {
    padding: 15px;
    margin: -5px -15px -5px 15px;
}

/* Footer nav links: turn the inline text into a taller block so each
   link is a comfortable touch target with spacing between rows. */
ul.ld-footer-menu li {
    padding-bottom: 2px;
}

ul.ld-footer-menu li a {
    display: inline-block;
    padding: 9px 0;
}

/* ---------- small phones: keep headings proportional ---------- */
@media (max-width: 575px) {
    .ld-all-heading h1,
    .ld-about-right h1,
    .ld-choose-left h1 {
        font-size: 26px;
    }

    .ld-client-box {
        padding: 36px 22px 32px;
    }

    .ld-client-box-text p {
        font-size: 15px;
    }
}