/* ═══════════════════════════════════════════════════════════════════════════
   Home page — component styles ported from the marketing site

   Source: https://www.whatsserv.com/site/assets/css/main-rtl.css (theme section)
   Values are transcribed from those rules, and where the site's literal equals a
   brand token the token is used instead so the home page stays on the single
   token layer in tokens.css.

   Spacing note: the site's markup carries utility classes (pt-120, pb-80,
   pt-110, mb-50) that are NOT defined anywhere in its stylesheets — they are
   inert leftovers from the original theme. The real spacing was measured off the
   rendered page and is written explicitly below, so nothing here depends on a
   utility that does not exist.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Buttons ──────────────────────────────────────────────────────────────
   The site's own CTA primitive. Distinct from Bootstrap's .btn: it is larger,
   square-ish and gradient-filled.                                            */

.template-btn {
    display: inline-block;
    font-family: var(--ws-font-head);
    font-weight: 700;              /* site declares 600; Kufi has no 600 */
    border-radius: var(--ws-radius-btn);
    padding: 16px 32px;
    color: #fff;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease-in;
}

.template-btn:hover,
.template-btn:focus {
    color: #fff;
}

@media (max-width: 575.98px) {
    .template-btn {
        padding: 14px 30px;
        font-size: 15px;
    }
}

.primary-btn {
    background: var(--ws-gradient-btn);
    position: relative;
    z-index: 1;
}

/* The site cross-fades to the reversed gradient on hover rather than changing
   colour, which a gradient cannot transition directly. */
.primary-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 102%;
    height: 100%;
    background: linear-gradient(95.45deg, #008069 98.23%, #086f58 0.64%);
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease-in;
}

.primary-btn:hover::before {
    opacity: 1;
}

.outline-btn {
    border: 1px solid #fff;
    padding: 15px 32px;
    background-color: transparent;
}

.outline-btn:hover {
    background-color: var(--ws-primary);
    border-color: var(--ws-primary);
    color: #fff;
}

@media (max-width: 575.98px) {
    .outline-btn { padding: 13px 30px; }
}

/* ─── Decorative shape positioning ─────────────────────────────────────────
   The site layers absolutely-positioned PNG/SVG shapes behind each band.     */

.left-bottom   { left: 0;  bottom: 0; z-index: -1; }
.right-top     { top: 0;   right: 0;  z-index: -1; }
.right-bottom  { right: 0; bottom: 0; z-index: -1; }
.soft-light    { mix-blend-mode: soft-light; }

/* ─── Hero ─────────────────────────────────────────────────────────────────
   Measured on the live page: padding-top 110px, padding-bottom 60px, and the
   same 278.54deg gradient this app already tokenises.                        */

.hero-style-1 .hero-area {
    padding-top: 110px;
    padding-bottom: 60px;
    background: var(--ws-gradient-primary);
}

.hero-style-1 .hero-area .circle-shape {
    left: 100px;
    z-index: -1;
}

.hero-style-1 .hero-area .right-top { width: 280px; }

.hero-style-1 .hero-area .left-bottom-circle {
    bottom: 0;
    left: 0;
    mix-blend-mode: soft-light;
    width: 380px;
    z-index: -1;
}

.hero1-content-wrap h1,
.hero1-content-wrap p {
    color: #fff;
}

/* The highlighted word carries a hand-drawn underline. position:relative is set
   here rather than relying on the .position-relative utility in the copy — the
   copy comes from a translation value, so the underline must not depend on a
   class surviving translation. */
.hero1-content-wrap mark {
    background: transparent;
    color: #fff;
    padding: 0;
    position: relative;
}

.hero1-content-wrap mark::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 20px;
    background: url("../img/site/shapes/curve-line.svg") no-repeat;
}

/* The site renders the hero art at its natural width (702px), deliberately
   letting it spill past the grid column; it is only capped once the layout
   stacks below 992px. The element therefore carries no .img-fluid. */
.hero-right img {
    max-width: none;
    height: auto;
}

@media (max-width: 991.98px) {
    .hero-right { margin-top: 60px; }
    .hero-right img { max-width: 100%; }
}

@media (max-width: 575.98px) {
    .hero-btns a { margin-bottom: 15px; }
}

/* ─── Promo strip ──────────────────────────────────────────────────────────
   Three cards that ride up over the hero's lower edge.                       */

.promo-area {
    position: relative;
    z-index: 1;
    margin-top: -70px;
    background-color: var(--ws-bg-light);
}

.promo-item {
    padding: 25px 20px;
    position: relative;
    z-index: 10;
    height: 100%;
}

.promo-top img { width: 52px; height: 52px; object-fit: contain; }

/* ─── Feature band ─────────────────────────────────────────────────────────
   Background photo with a light wash over it so the copy stays readable.     */

.feature-area {
    padding-top: 120px;
    padding-bottom: 80px;
    background-image: url("../img/site/bg-shape-1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.feature-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(246, 246, 246, 0) -0.38%,
        #f6f6f6 12.57%, #f6f6f6 45.59%, #f6f6f6 77.09%,
        rgba(246, 246, 246, 0) 98.32%);
    z-index: -1;
}

.feature-left img { max-width: 100%; height: auto; }

.feature-right .feature-item {
    padding: 30px 30px 25px;
    transition: all 0.3s ease-in;
}

.feature-right .feature-item:hover {
    box-shadow: var(--ws-shadow-primary);
}

.feature-right .feature-item + .feature-item { margin-top: 20px; }

.feature-item .promo-top img { width: 60px; height: 60px; object-fit: contain; }

@media (max-width: 991.98px) {
    .feature-right { margin-top: 40px; }
}

/* ─── "Why us" band ────────────────────────────────────────────────────────  */

/* No desktop padding — the site lets the artwork set this band's height, and
   only introduces padding below 1200px. Measured: 503px tall at 1440. */
.migrate-hosting {
    background: var(--ws-gradient-primary);
    position: relative;
    z-index: 1;
}

.migrate-hosting .migrate-content h2,
.migrate-hosting .migrate-content p {
    color: #fff;
}

.migrate-hosting .migrate-frame {
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}

.migrate-hosting .line-wave {
    left: 50%;
    top: 100px;
    z-index: -1;
}

.migrate-feature-img img { max-width: 100%; height: auto; }

@media (max-width: 1199.98px) {
    .migrate-hosting { padding: 60px 0; }
}

/* ─── API / language band ──────────────────────────────────────────────────  */

.application-area {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: var(--ws-bg-light);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.app_list_item {
    padding: 20px 25px;
    height: 100%;
}

.app_list_item img { width: 44px; height: 44px; object-fit: contain; }

/* ─── Section heading ──────────────────────────────────────────────────────  */

.section-title h2 { margin-bottom: 0; }
.section-title p  { margin-top: 15px; margin-bottom: 0; }