/* =====================================================================
   Site visual fixes — CSS only. No markup, text, links or meta change.
   ===================================================================== */

/* Packages grid (packages page + home page section):
   4 packages fit one row on wide screens instead of 3 + 1 orphan,
   cards share the same height and the buttons line up at the bottom. */
@media (min-width: 1200px) {
    .app-price-box > .row > .col-xl-4 { flex: 0 0 25%; max-width: 25%; }
    .app-price-box .crp-price-item { padding: 36px 22px; }
}
/* package name + "recommended" badge: natural width, no broken words */
.app-price-box .crp-price-head > .row { row-gap: 8px; }
.app-price-box .crp-price-head > .row > .col-6 { flex: 0 0 auto; width: auto; max-width: 100%; }
.app-price-box .crp-price-head > .row span { white-space: nowrap; }
.app-price-box > .row > [class*="col-"] { display: flex; }
.app-price-box .crp-price-item { display: flex; flex-direction: column; width: 100%; }
.app-price-box .crp-price-list { flex: 1 1 auto; }
.app-price-box .app-price-btn-box { margin-top: auto; }

/* "Try our AI" floating button sat in the middle of the screen and covered
   content and footer links; keep it, but in the free bottom-left corner
   (WhatsApp uses the bottom-right one). */
.ai-float-btn { left: 20px !important; right: auto !important; bottom: 24px !important; }
@media (max-width: 575.98px) {
    .ai-float-btn { left: 12px !important; bottom: 16px !important; padding: 11px 18px !important; font-size: 14px !important; }
}

/* ---------------------------------------------------------------------
   Images: never stretch. Boxes keep their size (no layout shift);
   photos fill the box (cover), designs / logos are shown whole (contain).
   --------------------------------------------------------------------- */
.tp-portfolio-inner-thumb > a[href*="/blogs/"] > img { object-fit: cover; }      /* blog cards (photos) */
.tp-portfolio-inner-thumb > a[href*="design-templates"] > img { object-fit: cover; object-position: center bottom; } /* design categories: the label is drawn at the bottom of the image */
.tp-portfolio-inner-thumb > a[href*="design-preview"] > img { object-fit: contain; background: #f6f7fb; }           /* template designs: show the whole card */
.tp-portfolio-inner-thumb > a > img[src*="logo/logo.png"] { object-fit: contain; background: #fff; }  /* listing without photo */
.tp-portfolio-inner-thumb > img { object-fit: contain; }                          /* product page main design */
img.product-image { object-fit: contain; background: #f6f7fb; }                   /* store cards: invitation designs */
.tp-header-10-logo img { object-fit: contain; }                                   /* header logo */

/* ---------------------------------------------------------------------
   Type scale: section titles and the long feature sentences were sized
   like hero text (70px / 44px, and 50px / 38px on phones).
   Same elements and text — only font-size / line-height.
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .tp-section-title-phudu.fs-70 { font-size: 56px !important; line-height: 1.2; }
    .app-stack-title { font-size: 34px; line-height: 1.35; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .tp-section-title-phudu.fs-70 { font-size: 44px !important; line-height: 1.25; }
    .app-stack-title { font-size: 28px; line-height: 1.4; }
}
@media (max-width: 767.98px) {
    .tp-section-title-phudu.fs-70 { font-size: 32px !important; line-height: 1.3; }
    .app-stack-title { font-size: 22px; line-height: 1.5; }
    .app-stack-number { font-size: 110px; }
}

/* Listing cards: many uploads are logos/badges, cropping them looked broken —
   show the whole image on white (blog cards stay "cover", they are photos). */
.tp-portfolio-inner-thumb > a[href*="/listing/"] > img { object-fit: contain; background: #fff; }

/* Inner-page title sat partly under the fixed header (header ends ~185px
   desktop / ~202px phone, the title started at ~179px). Same element and text. */
.tp-breadcrumb-ptb { padding-top: 215px; }
.tp-breadcrumb-title { font-size: 60px; line-height: 1.2; }
@media (max-width: 767.98px) {
    .tp-breadcrumb-ptb { padding-top: 235px; }
    .tp-breadcrumb-title { font-size: 34px; }
}

/* Blog / listing card titles: 30px read like page headings */
.tp-portfolio-inner-title, .tp-portfolio-inner-title.fs-30 { font-size: 22px !important; line-height: 1.45; }
@media (max-width: 767.98px) { .tp-portfolio-inner-title, .tp-portfolio-inner-title.fs-30 { font-size: 20px !important; } }

/* Article sidebar "related posts": inline height:200px squeezed square photos on phones */
.rc-post-thumb img { object-fit: cover; }