/* Graffiti On Nails -- adjustments on top of the Rasm template.
 *
 * Loaded last, after css/style.css, so these win on equal specificity.
 * Kept in a separate file so the template's own stylesheets stay untouched
 * and can be replaced wholesale if Rasm is ever updated.
 */

/* ---- Header brand -----------------------------------------------------
 * The live site shows a small circular logo mark NEXT TO the words
 * "Graffiti On Nails". Rasm's own logo is a wide 196x70 SVG with the name
 * baked in; this one is a 267x300 portrait mark, so the name is set as text
 * beside it to get the same lockup.
 *
 * Rasm's header band (.logo-bg) is 100px tall. Keep to that: an earlier
 * version set min-height:100px AND an 86px logo, which pushed the row open
 * and squeezed the Book Appointment button off the end.
 */
/* Rasm's own band is 100px with a 12px-padded top bar above it. That is
 * taller than this brand lockup needs, so the band comes down to 84px and
 * the top bar to 8px -- the logo-bg wedge is kept in step so the white
 * shape still matches the row it sits behind. */
.header-layout2 .header-top {
    padding: 8px 0;
}

/* The menu row, the white wedge and the logo all have to describe the same
 * height or the header looks mis-stacked. Rasm's band is 100px because its
 * nav links carry 36.5px of vertical padding (14px text + 73px = ~99px).
 * Shortening the band alone left the nav setting the real height, so the
 * wedge read as too short and the logo as too small inside it.
 *
 * Band height H = 2 * link-padding + 26px line box. For H = 84: 29px.
 */
.header-layout2 .main-menu > ul > li > a {
    padding: 29px 0;
}

.header-layout2 .logo-bg {
    height: 84px;
}

.header-layout2 .sticky-wrapper.sticky .main-menu > ul > li > a {
    padding: 22px 0;
}

.header-layout2 .sticky-wrapper.sticky .logo-bg {
    height: 70px;
}

.header-layout2 .sticky-wrapper.sticky .header-logo {
    min-height: 70px;
    /* Rasm's sticky rule zeroes padding-bottom but leaves padding-top:15px,
     * which would push the logo 15px low in the shorter sticky wedge. */
    padding-top: 0;
    padding-bottom: 0;
}

.header-layout2 .sticky-wrapper.sticky .header-logo .brand-link img {
    max-height: 42px;
}

.header-layout2 .header-logo {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    min-height: 84px;
    /* Rasm puts 15px of padding top and bottom on .header-logo. Added to
     * the image that made the row 92px against an 84px wedge, so the logo
     * spilled 8px past the white onto the black bar. The row is sized by
     * min-height here instead, so the band and the wedge always agree. */
    padding-top: 0;
    padding-bottom: 0;
}

.header-logo .brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.header-logo .brand-link img {
    max-height: 62px;
    width: auto;
    flex: 0 0 auto;
}

.header-logo .brand-name {
    font-family: var(--title-font);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--title-color);
    white-space: nowrap;
}

/* The white wedge sits behind the brand. Narrow enough to hug the lockup
 * and leave the nav and the header button their room. */
.header-layout2 .logo-bg {
    width: 19%;
}

@media (max-width: 1399px) {
    .header-layout2 .logo-bg {
        width: 22%;
    }
}

@media (max-width: 1199px) {
    .header-logo .brand-name {
        font-size: 20px;
    }

    .header-layout2 .logo-bg {
        width: 26%;
    }
}

@media (max-width: 991px) {
    .header-layout2 .header-logo {
        min-height: 70px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .header-layout2 .main-menu > ul > li > a {
        padding: 22px 0;
    }

    .header-logo .brand-link img {
        max-height: 50px;
    }

    .header-logo .brand-name {
        font-size: 18px;
    }

    .header-layout2 .logo-bg {
        width: 68%;
        height: 70px;
    }
}

.th-menu-wrapper .mobile-logo .brand-link {
    justify-content: center;
}

.th-menu-wrapper .mobile-logo img {
    max-height: 60px;
    width: auto;
}

/* Keep the header button visible: it is the main call to action, and at
 * 1200-1400px the brand lockup would otherwise crowd it out. */
.header-layout2 .header-button .th-btn {
    padding: 14px 22px;
    white-space: nowrap;
}

/* ---- Page banner ------------------------------------------------------
 * .breadcumb-wrapper is 153px of padding on a flat #F7F7F7 in Rasm, whose
 * demo banner is a muted studio shot. A full-colour nail photograph behind
 * it reads as raw and the title competes with the artwork, so cover-size it
 * and lay a scrim over, the same treatment as the appointment section.
 */
/* Padding lives with the title sizing further down, so the banner height
 * is set in one place. */
.breadcumb-wrapper {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.breadcumb-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 12, 10, 0.86) 0%, rgba(18, 12, 10, 0.55) 100%);
}

.breadcumb-wrapper > .container {
    position: relative;
    z-index: 1;
}

.breadcumb-wrapper .breadcumb-title,
.breadcumb-wrapper .breadcumb-menu li,
.breadcumb-wrapper .breadcumb-menu li a {
    color: #fff;
}

.breadcumb-wrapper .breadcumb-menu li a:hover {
    color: var(--theme-color);
}

/* ---- Contact page ------------------------------------------------------
 * Rasm's contact layout styles .contact-info-wrap, .contact-form-wrapper and
 * .form-title, but has no rule for the map embed (its demo uses a bare
 * iframe sized by the column). Give it a height so it matches the info
 * column beside it.
 */
.contact-map {
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    border-radius: 8px;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
}

@media (max-width: 991px) {
    .contact-map,
    .contact-map iframe {
        min-height: 320px;
    }
}

/* Consent line above the submit button, from the source site's form. */
.form-consent {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.85;
}

/* setupContactForm appends <span class="error"> on a failed field. */
.contact-form .error {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: #c0392b;
}

.contact-form .inputError {
    border-color: #c0392b;
}

/* ---- Appointment section ----------------------------------------------
 * .appointment-sec has NO rules of its own in Rasm. In the reference the
 * "background image" is a 167-byte PNG holding a single flat colour, so
 * what the demo actually shows is a plain colour block -- not a photograph.
 *
 * Reproduced here as a real colour fill in the theme green, with no image.
 * That placeholder is 1920x310px and .bg-top-center positions it
 * "top center" at background-size:auto, so the colour band is exactly 310px
 * tall from the top of the section and everything below it is white. The
 * fill is given that same fixed height -- not a percentage or a bottom
 * inset, either of which would move as content length changes (this page's
 * hours list has seven rows to the reference's three).
 */
.appointment-sec {
    position: relative;
    background-color: transparent;
    background-image: none;
}

.appointment-sec::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 310px;
    background-color: var(--theme-color);
}

.appointment-sec > .container {
    position: relative;
    z-index: 1;
}

/* Only the heading block sits on the green; Working Hours and the day list
 * fall below the 310px band onto white, so they keep Rasm's own dark text
 * and rules. Rasm turns .work-title white under 1199px for its dark-photo
 * layouts -- that has to be undone here, since this band is a fixed height
 * and the hours are on white at every width. */
.appointment-sec .work-title {
    color: var(--title-color);
}

/* ---- Footer brand -----------------------------------------------------
 * .about-logo carries only margins in Rasm -- its own footer logo is a wide
 * ~170px SVG that needs no cap. The Graffiti mark is a 267x300 portrait PNG,
 * so uncapped it renders about 260px tall, dwarfs the three link columns and
 * pushes the description text below them.
 *
 * Rasm's .th-widget-about is 170px wide in its narrow variant, so match that
 * scale.
 */
.footer-wrapper .about-logo img {
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
}

.footer-wrapper .th-widget-about .about-text {
    margin-top: 0;
}

@media (max-width: 991px) {
    .footer-wrapper .about-logo img {
        max-width: 120px;
        max-height: 120px;
    }
}

/* ---- Service cards ----------------------------------------------------
 * The Graffiti service images are 94x90 multicoloured line-art icons on
 * transparency, not the 243x173 photographs Rasm's .service-item expects --
 * that component sets width:100% on the image, so a 94px icon was being
 * blown up about fourfold and looked crude.
 *
 * .service-box is the icon-based card (centred, 30px padding, circular icon
 * badge). Its badge is a 65px circle filled with the theme colour, which is
 * right for a white glyph but clashes with coloured art, so the fill is
 * dropped here and the badge sized to the icon's own proportions.
 */
.service-box .service-box_icon {
    width: auto;
    height: auto;
    line-height: 1;
    border-radius: 0;
    background-color: transparent;
    border: 0;
    margin: 0 auto 22px auto;
}

.service-box .service-box_icon img {
    width: 94px;
    height: auto;
    max-width: 100%;
    image-rendering: auto;
}

.service-box .box-title {
    margin-bottom: 10px;
}

.service-box .box-title a {
    color: inherit;
}

@media (max-width: 575px) {
    .service-box .service-box_icon img {
        width: 80px;
    }
}

/* ---- Hero -------------------------------------------------------------
 * Rasm's hero-2 puts the subject inside .hero-shape, a 678px tinted circle,
 * and sizes .th-hero-img with min-width:750px for its own cut-out art.
 *
 * This hero uses ordinary studio photographs rather than cut-outs, so the
 * image is clipped to the circle instead of overflowing it: the same
 * silhouette, without needing transparent artwork. .hero-style2's
 * margin:231px 0 is also trimmed, as a photo needs less headroom than the
 * full-bleed demo art.
 */
/* Rasm's .hero-2 carries no background of its own -- its demo art supplies
 * the pale wash. Give the section that soft tint so the tinted circle and
 * the dark heading read the same way as the reference. */
.hero-2 {
    background-color: #FBF4F0;
}

.hero-2 .hero-style2 {
    margin: 150px 0;
    max-width: 660px;
}

.hero-2 .th-hero-img {
    position: relative;
    min-width: 0;
    max-height: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 60px;
}

/* The photo sits inside the circle. z-index keeps it above .hero-shape,
 * which Rasm positions absolutely behind. */
.hero-2 .th-hero-img > img {
    position: relative;
    z-index: 1;
    width: 420px;
    height: 420px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.hero-2 .hero-shape {
    width: 500px;
    height: 500px;
    bottom: 20px;
}

.hero-2 .hero-title {
    font-size: 56px;
    line-height: 1.08;
}

@media (max-width: 1199px) {
    .hero-2 .hero-style2 {
        margin: 110px 0;
    }

    .hero-2 .hero-title {
        font-size: 44px;
    }

    .hero-2 .th-hero-img > img {
        width: 340px;
        height: 340px;
    }

    .hero-2 .hero-shape {
        width: 410px;
        height: 410px;
    }
}

@media (max-width: 991px) {
    .hero-2 .hero-style2 {
        margin: 70px 0 20px;
    }

    .hero-2 .hero-title {
        font-size: 34px;
    }

    .hero-2 .th-hero-img {
        padding-bottom: 50px;
    }

    .hero-2 .th-hero-img > img {
        width: 260px;
        height: 260px;
    }

    .hero-2 .hero-shape {
        width: 320px;
        height: 320px;
    }
}

/* ---- Header call to action --------------------------------------------
 * Rasm hides .header-button .th-btn below 1499px because its own nav has
 * seven dropdown items plus search, cart and grid icons -- there is simply
 * no room. This site has five plain nav items and a single search icon, so
 * the space exists and the booking CTA (the main action on the site) should
 * stay visible on ordinary laptop screens.
 */
@media (min-width: 1200px) {
    .header-button .th-btn {
        display: inline-block;
    }
}

/* The button column is d-xl-block in the markup, so below 1200px the CTA is
 * reached through the mobile menu instead. */

/* ---- Page images ------------------------------------------------------
 * Rasm sizes .img-box5, .img-box6 and .choose-image, but NOT .img-box4 --
 * its demo art for that component is pre-cropped, so the stylesheet never
 * needs to constrain it. The Graffiti photographs are 1024-2560px originals,
 * so in .img-box4 they render at natural width, overflow their column and
 * squeeze the text beside them.
 *
 * Constrain every page image to its column and give the paired rows a
 * consistent crop, so the two halves balance.
 */
.img-box4 {
    padding-right: 0;
}

.img-box4 .img1 img {
    display: block;
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: 8px;
}

/* A blanket guard: nothing inside the page body may exceed its container,
 * whatever component it ends up in. */
.th-blog .blog-img img,
.page-content img,
.service-box img,
.img-box4 img {
    max-width: 100%;
}

@media (max-width: 1199px) {
    .img-box4 .img1 img {
        height: 380px;
    }
}

@media (max-width: 991px) {
    .img-box4 {
        margin-bottom: 30px;
    }

    .img-box4 .img1 img {
        height: 300px;
    }
}

@media (max-width: 575px) {
    .img-box4 .img1 img {
        height: 240px;
    }
}

/* ---- Blog listing cards -----------------------------------------------
 * Rasm's .blog-img img sets width:100% and object-fit:cover but no height --
 * its demo thumbnails are pre-cropped landscape, so the aspect never varies.
 * The Graffiti post images are portrait, so a card renders at the image's
 * full natural height and one post fills the screen.
 *
 * Fix the thumbnail to a landscape crop so every card is the same height
 * whatever shape the featured image is.
 */
.blog-box .blog-img {
    overflow: hidden;
}

.blog-box .blog-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

/* Keep the cards level when titles run to different lengths. */
.blog-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-box .blog-box_content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.blog-box .box-title {
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 10px;
}

.blog-box .blog-text {
    flex: 1 1 auto;
}

@media (max-width: 991px) {
    .blog-box .blog-img img {
        height: 175px;
    }
}

/* ---- Blog detail --------------------------------------------------------
 * Rasm gives .blog-single .blog-img img a width and object-fit but no
 * height, because its demo thumbnails are pre-cropped landscape. The
 * Graffiti featured images are portrait, so without a height the hero
 * renders at full natural height and pushes the article off the screen.
 *
 * The body copy comes straight from the CMS, so headings, paragraphs and
 * images inside .blog-content are sized here rather than in the pasted
 * markup -- that keeps the content clean and the styling in the theme.
 */
.blog-single .blog-img img {
    height: 420px;
    object-position: center;
    border-radius: 8px;
}

.blog-single .blog-content > h2,
.blog-single .blog-content > h3 {
    margin-top: 36px;
    margin-bottom: 14px;
    line-height: 1.3;
}

.blog-single .blog-content > h2 {
    font-size: 30px;
}

.blog-single .blog-content > h3 {
    font-size: 24px;
}

.blog-single .blog-content > p {
    margin-bottom: 18px;
}

.blog-single .blog-content > ul,
.blog-single .blog-content > ol {
    margin-bottom: 18px;
    padding-left: 20px;
}

.blog-single .blog-content > ul li,
.blog-single .blog-content > ol li {
    margin-bottom: 8px;
}

.blog-single .blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0 24px;
}

.blog-single .blog-meta a i {
    margin-right: 8px;
    color: var(--theme-color);
}

.blog-details .sidebar-area .widget_title {
    font-size: 22px;
}

@media (max-width: 991px) {
    .blog-single .blog-img img {
        height: 280px;
    }

    .blog-single .blog-content > h2 {
        font-size: 25px;
    }

    .blog-single .blog-content > h3 {
        font-size: 21px;
    }

    .blog-details .sidebar-area {
        margin-top: 40px;
    }
}

/* ---- Page banner height -------------------------------------------------
 * Rasm pads .breadcumb-wrapper 153px top and bottom, sized for its own
 * 84px display titles. These inner pages carry a short "Blog Details"
 * style label instead, so that much padding leaves a near-empty band.
 * The title is also capped here: Rasm gives .breadcumb-title no font-size
 * above 575px, so it inherits the heading scale and a long page name runs
 * over several lines.
 */
.breadcumb-wrapper {
    padding: 70px 0;
}

/* The banner title is an h1 for SEO. Rasm gives h1 a font-size of 84px and
 * .breadcumb-title none of its own above 575px, so without this cap the
 * post title renders at display size and the banner fills the viewport.
 *
 * No max-width: the heading uses the full container, as the rest of the
 * page does. text-wrap:balance evens the two lines where the browser
 * supports it (Chrome 114+, Safari 17.5+); elsewhere it simply wraps at
 * the container edge, which is the normal behaviour.
 */
.breadcumb-title {
    font-size: 44px;
    line-height: 1.25;
    text-wrap: balance;
}

.breadcumb-menu {
    margin-top: 18px;
}

@media (max-width: 1199px) {
    .breadcumb-wrapper {
        padding: 60px 0;
    }

    .breadcumb-title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .breadcumb-wrapper {
        padding: 48px 0;
    }

    .breadcumb-title {
        font-size: 28px;
        line-height: 1.35;
    }

    .breadcumb-menu {
        margin-top: 14px;
    }
}

/* ---- Section rhythm -----------------------------------------------------
 * Rasm's .space is 120px top AND bottom, so two stacked sections put 240px
 * between their content. That works in the demo because its sections carry
 * background images and decorative shapes to fill the gap; these pages are
 * mostly flat, so the same padding reads as dead space.
 *
 * Adjacent sections that share a background are pulled closer, because the
 * eye reads them as one block and does not need the full gap. Where the
 * background changes the full rhythm is kept: there the padding is what
 * separates the bands.
 */
.space + .space,
.space + .space-top {
    padding-top: 90px;
}

.bg-smoke + .space:not(.bg-smoke),
.space:not(.bg-smoke) + .bg-smoke {
    padding-top: var(--section-space);
}

/* A divider already provides the visual break, so the section after one
 * does not also need a full 120px of lead-in. */
.sec-shape + section.space {
    padding-top: 80px;
}

.sec-shape {
    margin: 10px 0;
}

@media (max-width: 991px) {
    .space + .space,
    .space + .space-top {
        padding-top: 60px;
    }

    .bg-smoke + .space:not(.bg-smoke),
    .space:not(.bg-smoke) + .bg-smoke {
        padding-top: var(--section-space-mobile);
    }

    .sec-shape + section.space {
        padding-top: 55px;
    }
}

/* ---- Text-only service boxes --------------------------------------------
 * The courses feature cards reuse .service-box but carry no icon. Rasm's
 * rule sets margin-top:30px to clear the icon that overhangs the card, and
 * a smoke background -- which disappears on a smoke section. Both are
 * corrected via an explicit .style-text class, so the home page's iconed
 * cards keep Rasm's styling exactly.
 */
.service-box.style-text {
    margin-top: 0;
    height: 100%;
}

.bg-smoke .service-box.style-text {
    background-color: var(--white-color);
}

.service-box.style-text .service-box_content {
    padding: 0;
}

/* ---- Section headings ---------------------------------------------------
 * Rasm has two title treatments and they are not interchangeable:
 *
 *   centred  .sub-title.style2 with title_shape_1.svg as a SIBLING below it
 *            -- the symmetric ornament, arrows fading out both ways
 *   left     plain .sub-title with title_right.svg INSIDE the span
 *            -- a single arrow trailing the label
 *
 * The ornament artwork is #C28565, but .sub-title renders in --theme-color
 * (#1a3128 here), so the label and its own arrows would disagree. The
 * centred variant is tinted to match the artwork; the left variant keeps
 * Rasm's colour because its arrow sits inline with the text.
 */
.title-area .sub-title.style2 {
    color: var(--theme-color2);
    letter-spacing: 0.02em;
}

.title-area.text-center .sub-title.style2 + img,
.text-center .title-area .sub-title.style2 + img {
    display: block;
    margin: 0 auto 18px auto;
    max-width: 270px;
    width: 100%;
    height: auto;
}

/* Rasm's .sub-title carries margin-bottom:8px, which is meant for a label
 * sitting directly above the heading. With the ornament between them the
 * label needs less, or the group reads as three loose lines. */
.title-area.text-center .sub-title.style2,
.text-center .title-area .sub-title.style2 {
    margin-bottom: 4px;
}

.title-area.text-center .sec-title:last-child,
.text-center .title-area .sec-title:last-child {
    margin-bottom: 0;
}

/* Where an intro paragraph follows the heading inside the title area it
 * needs the gap back, and a readable measure so it does not run the full
 * container width. */
.title-area.text-center .sec-title + p,
.text-center .title-area .sec-title + p {
    max-width: 720px;
    margin: 16px auto 0 auto;
}

@media (max-width: 767px) {
    .title-area.text-center .sub-title.style2 + img,
    .text-center .title-area .sub-title.style2 + img {
        max-width: 210px;
        margin-bottom: 14px;
    }
}


@media (max-width: 991px) {
    /* Stacked, the heading block is taller, so the band grows a little to
     * keep the same relationship: colour behind the heading, white below. */
    .appointment-sec::before {
        height: 260px;
    }
}
/* ---- Appointment -> next section ---------------------------------------
 * .appointment-sec carries .space, so it adds 120px of its own padding
 * below the form card, and the section after it adds its top padding on
 * top of that. The green band stops at 310px, so all of that lands as one
 * long run of empty white between the form and the next heading.
 *
 * The form card is the real bottom edge of this section, so the section's
 * own bottom padding is cut right back and the following section keeps a
 * normal single gap rather than a doubled one.
 */
.appointment-sec.space {
    padding-bottom: 40px;
}

.appointment-sec + .space,
.appointment-sec + section.space {
    padding-top: 70px;
}

@media (max-width: 991px) {
    .appointment-sec.space {
        padding-bottom: 30px;
    }

    .appointment-sec + .space,
    .appointment-sec + section.space {
        padding-top: 50px;
    }
}

/* ---- Footer -------------------------------------------------------------
 * Rasm darkens its footer photo with .footer-layout2:before at opacity .92,
 * but that scrim is z-index:-1 inside a z-index:2 .footer-wrapper, so it
 * paints behind the element's own background and never covers it. With a
 * photographic background that leaves the artwork at full strength behind
 * the columns. The footer is given a solid dark ground here instead, so
 * there is nothing to scrim and every column sits on a flat colour.
 */
.footer-wrapper.footer-layout2 {
    background-color: #14231d;
    background-image: none;
}

.footer-wrapper.footer-layout2:before {
    display: none;
}

/* Rasm's --body-color of #BDBDBD is set for a scrimmed photo. On the flat
 * ground it reads thin, so body copy and the contact list are lifted. */
.footer-wrapper {
    --body-color: #D7D9D6;
}

.footer-wrapper .th-widget-about .about-text {
    color: #D7D9D6;
}

.footer-wrapper .th-widget-contact,
.footer-wrapper .th-widget-contact li {
    color: #D7D9D6;
}

/* The phone number and the Imbibe Tech credit were inheriting a link colour
 * that is near-invisible on this ground. */
.footer-wrapper .th-widget-contact a,
.footer-wrapper .copyright-text a {
    color: #FFFFFF;
    text-decoration: none;
}

.footer-wrapper .th-widget-contact a:hover,
.footer-wrapper .copyright-text a:hover {
    color: var(--theme-color2);
}

.footer-wrapper .copyright-text {
    color: #D7D9D6;
}

.footer-wrapper .th-widget-contact i {
    color: var(--theme-color2);
}

/* Height: Rasm pads the widget area 80px top and the copyright bar 22px,
 * which leaves a deep empty band under the social icons once the columns
 * end. Trimmed so the icons sit closer to the copyright rule. */
.footer-wrapper .widget-area {
    padding-top: 60px;
    padding-bottom: 10px;
}

.footer-wrapper .footer-widget {
    margin-bottom: 30px;
}

.footer-wrapper .th-widget-about .about-text {
    margin-bottom: 14px;
}

.footer-wrapper .th-social {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .footer-wrapper .widget-area {
        padding-top: 45px;
        padding-bottom: 5px;
    }

    .footer-wrapper .footer-widget {
        margin-bottom: 24px;
    }
}

/* Rasm's copyright bar is #53443D, a warm brown chosen for its own palette.
 * Against this green ground it reads as a mismatched band, so it is tuned
 * to a lighter step of the same colour instead and the divider does the
 * separating. */
.footer-wrapper.footer-layout2 .copyright-wrap {
    background-color: #1B2E26;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding: 18px 0;
}

.footer-wrapper .footer-links a {
    color: #D7D9D6;
}

.footer-wrapper .footer-links a:hover {
    color: #FFFFFF;
}

/* ---- Testimonials -------------------------------------------------------
 * Rasm's .testi-grid card expects an avatar, a "Customer" designation and
 * three decorative shapes. The real reviews have no photos and no job
 * titles, and .testi-quote / .testi-shape1 / .testi-shape2 carry no rules
 * at all in Rasm's stylesheet, so including them would drop unpositioned
 * artwork into the card. The card is used without them and the few things
 * that assumed an avatar are corrected here.
 *
 * .star-rating is a WooCommerce-style width-percentage widget that needs
 * its own inner markup, so the five stars are plain icons instead.
 */
.testi-stars {
    margin-bottom: 18px;
    line-height: 1;
}

.testi-stars i {
    color: #E8A33D;
    font-size: 15px;
    margin: 0 1px;
}

/* .testi-grid_profile is a flex row built to put an avatar beside the name.
 * With no avatar it would push the name off-centre in a centred card. */
.testi-grid .testi-grid_profile {
    display: block;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--smoke-color3);
}

.testi-grid .testi-grid_name {
    margin-bottom: 0;
    font-size: 18px;
}

.testi-grid .box-title {
    margin-bottom: 0;
}

.testi-grid {
    height: 100%;
    padding: 36px 30px;
}

@media (max-width: 767px) {
    .testi-grid {
        padding: 30px 22px;
    }

    .testi-grid .box-title {
        font-size: 17px;
        line-height: 27px;
    }
}

/* .testi-grid's own background is var(--smoke-color), which is the exact
 * colour .bg-smoke paints the section -- the cards would be invisible. They
 * take white on a smoke section so the card edges read. */
.bg-smoke .testi-grid {
    background-color: var(--white-color);
}

/* ---- Header top bar: Follow Us ------------------------------------------
 * Rasm's layout2 top bar is light (--theme-color is #F9F3F0 in its own
 * palette), so it colours the social icons with --title-color, near black.
 * This theme's --theme-color is the dark green #1a3128, which leaves those
 * icons at 1.4:1 against the bar -- effectively invisible. Both the icons
 * and the "Follow Us:" label are set light here, and the hover states that
 * also resolved to near-black are corrected with them. --smoke-color2 is
 * used for hover rather than --theme-color2, which only reaches 3.2:1 on
 * this ground; --smoke-color2 gives 9.2:1 and stays on-palette.
 */
.header-layout2 .social-links a {
    color: #FFFFFF;
}

.header-layout2 .social-links a:hover {
    color: var(--smoke-color2);
}

.header-layout2 .social-links .social-title {
    color: #D7D9D6;
    margin-right: 14px;
}

.header-layout2 .header-links li a:hover {
    color: var(--smoke-color2);
}

/* The icons sat tight against the label and each other. */
.header-layout2 .social-links a:not(:last-child) {
    margin-right: 16px;
}

.header-layout2 .social-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 991px) {
    .header-layout2 .social-links {
        justify-content: center;
    }
}

/* The last breadcrumb now carries the full post title, which can run to
 * 90+ characters and wrap the trail onto several lines on a phone. It is
 * truncated to a single line; the heading above already states the title
 * in full, so nothing is lost. */
.breadcumb-menu li:last-child {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 767px) {
    .breadcumb-menu li:last-child {
        max-width: 60vw;
    }
}

/* ---- Courses: Basic vs Advance -----------------------------------------
 * The two plan cards and their module lists. The accordions themselves are
 * Rasm's .accordion-card / .accordion-button / .accordion-body, so only the
 * card shell and the bullet lists are defined here. The featured card takes
 * the theme green to mark the Advance track, as the source site does.
 */
.course-plan {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--white-color);
    border: 1px solid var(--smoke-color2);
    border-radius: 8px;
    overflow: hidden;
}

.course-plan_head {
    position: relative;
    padding: 30px 30px 24px;
    border-bottom: 1px solid var(--smoke-color2);
}

.course-plan_title {
    font-size: 26px;
    margin-bottom: 6px;
}

.course-plan_tagline {
    margin-bottom: 14px;
    color: var(--body-color);
}

.course-plan_meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.course-plan_meta li {
    font-size: 15px;
    font-weight: 600;
    color: var(--title-color);
}

.course-badge {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 4px;
    background-color: var(--title-color);
    color: var(--white-color);
}

/* The Advance track is the fuller course, so its card leads. */
.course-plan--featured .course-plan_head {
    background-color: var(--theme-color);
    border-bottom-color: var(--theme-color);
}

.course-plan--featured .course-plan_title,
.course-plan--featured .course-plan_meta li {
    color: var(--white-color);
}

.course-plan--featured .course-plan_tagline {
    color: rgba(255, 255, 255, 0.82);
}

.course-plan--featured .course-badge {
    background-color: var(--white-color);
    color: var(--title-color);
}

.course-plan .accordion-area {
    flex: 1 1 auto;
    border: 0;
}

.course-plan_foot {
    padding: 24px 30px 30px;
}

.course-plan_foot .th-btn {
    width: 100%;
    text-align: center;
}

/* Module bullet lists inside each accordion. */
.course-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.5;
}

.course-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--theme-color2);
}

.course-list li:last-child {
    margin-bottom: 0;
}

/* A sub-heading inside a module ("Different Nail Systems"). */
.course-list li.course-sub {
    padding-left: 0;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--title-color);
}

.course-list li.course-sub:before {
    display: none;
}

@media (max-width: 575px) {
    .course-plan_head,
    .course-plan_foot {
        padding-left: 20px;
        padding-right: 20px;
    }

    .course-badge {
        position: static;
        display: inline-block;
        margin-bottom: 12px;
    }

    .course-plan_title {
        font-size: 22px;
    }
}
/* ---- Equal-height service cards ----------------------------------------
 * Rasm's .service-box has no height, so each card shrinks to its own copy
 * and a row ends up ragged -- the "Gel Polish Removal" card is shorter than
 * "Dry Manicure/Pedicure" purely because its text is shorter. A Bootstrap
 * column is already a flex item, so height:100% makes every card fill the
 * tallest in its row. The content is then laid out as a column so the
 * descriptions can take the slack rather than leaving a gap under the text.
 */
.service-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-box .service-box_content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.service-box .service-box_text {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* The icon must not stretch with the card. */
.service-box .service-box_icon {
    flex: 0 0 auto;
}

/* An inline image inside a post body. <figure> carries a browser default
 * margin of 1em 40px, which would indent the image out of line with the
 * paragraphs around it. */
.blog-content .blog-figure {
    margin: 0 0 24px 0;
}

.blog-content .blog-figure img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0;
}

/* ---- Sidebar: Recent Posts ---------------------------------------------
 * Rasm gives .recent-post .media-img a min-width of 85px and the image
 * width:100% -- but no height. Its demo thumbnails are pre-cropped square;
 * these are 930x620 landscape, so without a height each one renders at its
 * own aspect and the rows come out ragged. .recent-post-meta has no rules
 * at all, so the date needs sizing too.
 */
.recent-post .media-img {
    min-width: 85px;
    width: 85px;
}

.recent-post .media-img img {
    width: 85px;
    height: 85px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
}

/* Rasm already sets margin-bottom:20px on every .recent-post, including
 * the last one. The divider and the trailing gap are moved onto the
 * non-last items so the widget does not end with a dangling space. */
.recent-post {
    margin-bottom: 0;
}

.recent-post:not(:last-child) {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--smoke-color2);
}

.recent-post-meta {
    margin-bottom: 6px;
    line-height: 1;
}

.recent-post-meta a {
    font-size: 13px;
    color: var(--body-color);
    text-decoration: none;
}

.recent-post-meta a i {
    margin-right: 6px;
    color: var(--theme-color2);
}

/* Rasm's .post-title is 20px/30px, sized for a wider column. In this
 * sidebar it wraps to four or five lines against an 85px thumbnail. */
.recent-post .post-title {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
}

.recent-post .post-title a:hover {
    color: var(--theme-color);
}

/* Rasm pads .blog-box_content by (--space-y + 166px) to clear the image,
 * which overlaps upward via margin-bottom:-166px on .blog-img. With the
 * shorter image the whole card can come in: the overlap and the matching
 * pad are reduced together, so the image still sits over the panel by the
 * same proportion. */
.blog-box {
    --space-y: 24px;
}

.blog-box .blog-img {
    margin-bottom: -130px;
}

.blog-box .blog-box_content {
    padding-top: calc(var(--space-y) + 130px);
    padding-bottom: 24px;
}

.blog-box .blog-text {
    margin-bottom: 14px;
}

@media (max-width: 1199px) {
    .blog-box {
        --space-y: 18px;
    }

    .blog-box .blog-img {
        margin-bottom: -112px;
    }

    .blog-box .blog-box_content {
        padding-top: calc(var(--space-y) + 112px);
        padding-bottom: 18px;
    }
}

/* ---- Footer: Our Services (non-clickable list) --------------------------
 * Rasm hangs all of this column's item styling off the <a> -- the arrow
 * bullet is an a:before, and the size, left padding and spacing are on the
 * anchor too. These items are plain text by design (a service list, not
 * navigation), so the same treatment is restated for the bare <li> and the
 * arrow is reattached. Without this the column loses its arrows and sits
 * out of line with Quick Links beside it.
 */
.footer-widget.widget_nav_menu .menu-plain li {
    position: relative;
    font-size: 16px;
    font-weight: 400;
    padding: 0 0 0 20px;
    margin-bottom: 16px;
    color: var(--body-color);
}

.footer-widget.widget_nav_menu .menu-plain li:before {
    content: "\f30b";
    position: absolute;
    left: 0;
    top: 2px;
    font-weight: 600;
    font-family: var(--icon-font);
    font-size: 0.9em;
    color: inherit;
}

.footer-widget.widget_nav_menu .menu-plain li:last-child {
    margin-bottom: 0;
}