/* =========================================================
   WEB TECH RANKINGS
   Main Stylesheet
========================================================= */


/* =========================================================
   GLOBAL VARIABLES
========================================================= */

:root {

    /* Brand */
    --fas-pink: #e82b83;
    --fas-pink-dark: #d51f72;
    --fas-pink-light: #fff0f7;

    --fas-purple: #241b63;
    --fas-purple-dark: #17143f;
    --fas-purple-light: #f4f0ff;

    /* Text */
    --fas-heading: #17153d;
    --fas-text: #000000;
    --fas-text-light: #333333;

    /* Background */
    --fas-white: #ffffff;
    --fas-lavender: #faf8ff;
    --fas-soft-pink: #fff8fb;

    /* Borders */
    --fas-border: rgba(36, 30, 82, 0.08);
    --fas-border-dark: rgba(36, 30, 82, 0.14);

    /* Shadows */
    --fas-shadow-sm: 0 5px 20px rgba(37, 27, 83, 0.06);
    --fas-shadow-md: 0 12px 35px rgba(37, 27, 83, 0.09);
    --fas-shadow-lg: 0 20px 55px rgba(37, 27, 83, 0.12);

    /* Radius */
    --fas-radius-sm: 10px;
    --fas-radius-md: 16px;
    --fas-radius-lg: 24px;
    --fas-radius-xl: 32px;

    /* Transition */
    --fas-transition: 0.25s ease;

    /* Container */
    --fas-container: 1200px;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: var(--fas-white);
    color: var(--fas-heading);

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

ul,
ol {
    list-style: none;
}

strong.strong-color {
    color: #7641DD;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    color: var(--fas-heading);

    font-family: "Manrope", sans-serif;
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: -0.035em;
}

p {
    margin: 0;

    color: var(--fas-text);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.fas-container {
    width: min(
        var(--fas-container),
        calc(100% - 48px)
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HEADER
========================================================= */

.fas-header {
    position: relative;

    width: 100%;

    background: rgba(255, 255, 255, 0.96);

    border-bottom: 1px solid var(--fas-border);

    z-index: 999;
}

.fas-header-container {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   LOGO
========================================================= */

.fas-logo {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    flex-shrink: 0;

    color: var(--fas-heading);

    font-size: 20px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.5px;

    white-space: nowrap;
}

.fas-logo strong {
    color: var(--fas-pink);

    font-weight: 800;
}

.fas-logo img {
    display: block;
    width: 170px;
    object-fit: contain;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.fas-nav {
    display: flex;
    align-items: center;

    gap: 34px;

    margin-left: auto;
}

.fas-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 82px;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    transition:
        color var(--fas-transition);
}

.fas-nav-link:hover {
    color: var(--fas-pink);
}

.fas-nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 20px;

    width: 0;
    height: 2px;

    background: var(--fas-pink);

    border-radius: 10px;

    transform: translateX(-50%);

    transition:
        width var(--fas-transition);
}

.fas-nav-link:hover::after,
.fas-nav-link.fas-active::after {
    width: 20px;
}

.fas-nav-link.fas-active {
    color: var(--fas-pink);

    font-weight: 700;
}


/* =========================================================
   HEADER CTA
========================================================= */

.fas-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding: 0 21px;

    flex-shrink: 0;

    color: #ffffff;

    background: var(--fas-pink);

    border: 1px solid var(--fas-pink);

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    box-shadow:
        0 8px 20px rgba(232, 43, 131, 0.18);

    transition:
        background var(--fas-transition),
        border-color var(--fas-transition),
        transform var(--fas-transition),
        box-shadow var(--fas-transition);
}

.fas-header-btn:hover {
    color: #ffffff;

    background: var(--fas-pink-dark);
    border-color: var(--fas-pink-dark);

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(232, 43, 131, 0.25);
}

.fas-btn-arrow {
    font-size: 17px;
    line-height: 1;

    transition:
        transform var(--fas-transition);
}

.fas-header-btn:hover .fas-btn-arrow {
    transform: translateX(3px);
}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.fas-menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 9px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    background: #ffffff;

    border: 1px solid var(--fas-border-dark);

    border-radius: 10px;

    cursor: pointer;
}

.fas-menu-toggle span {
    display: block;

    width: 19px;
    height: 2px;

    background: var(--fas-heading);

    border-radius: 10px;

    transition:
        transform var(--fas-transition),
        opacity var(--fas-transition);
}


/* =========================================================
   MOBILE MENU
========================================================= */

.fas-mobile-menu {
    display: none;

    width: min(
        var(--fas-container),
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding: 10px 0 24px;
}

.fas-mobile-nav {
    display: flex;
    flex-direction: column;
}

.fas-mobile-nav a {
    display: block;

    padding: 14px 4px;

    color: #000000;

    border-bottom: 1px solid var(--fas-border);

    font-size: 15px;
    font-weight: 600;

    transition:
        color var(--fas-transition);
}

.fas-mobile-nav a:hover {
    color: var(--fas-pink);
}

.fas-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 46px;

    margin-top: 18px;

    color: #ffffff;

    background: var(--fas-pink);

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
}

.fas-mobile-cta span:last-child {
    font-size: 17px;
}


/* =========================================================
   MOBILE MENU ACTIVE STATE
========================================================= */

.fas-menu-toggle.fas-menu-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.fas-menu-toggle.fas-menu-active span:nth-child(2) {
    opacity: 0;
}

.fas-menu-toggle.fas-menu-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.fas-mobile-menu.fas-menu-open {
    display: block;
}


/* =========================================================
   HEADER — TABLET
========================================================= */

@media (max-width: 1000px) {

    .fas-header-container {
        min-height: 76px;
    }

    .fas-nav {
        gap: 22px;
    }

    .fas-nav-link {
        height: 76px;

        font-size: 13px;
    }

    .fas-nav-link::after {
        bottom: 18px;
    }

    .fas-header-btn {
        padding: 0 17px;

        font-size: 12px;
    }
}


/* =========================================================
   HEADER — MOBILE
========================================================= */

@media (max-width: 767px) {

    .fas-container {
        width: calc(100% - 32px);
    }

    .fas-header-container {
        min-height: 70px;
    }

    .fas-logo {
        font-size: 18px;
    }

    .fas-nav,
    .fas-header-btn {
        display: none;
    }

    .fas-menu-toggle {
        display: flex;
    }

    .fas-mobile-menu {
        width: calc(100% - 32px);
    }
}


/* =========================================================
   HERO SECTION
========================================================= */

.fas-hero {
    position: relative;

    width: 100%;
    min-height: 610px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(232, 43, 131, 0.08) 0,
            rgba(232, 43, 131, 0) 34%
        ),
        radial-gradient(
            circle at 92% 15%,
            rgba(104, 76, 205, 0.08) 0,
            rgba(104, 76, 205, 0) 28%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffafd 48%,
            #f8f5ff 100%
        );

        background : url(../images/fas-how-bg.png);
        background-repeat: no-repeat;
        background-size: cover;
}


/* =========================================================
   HERO DECORATIVE SHAPES
========================================================= */

.fas-hero-bg-shape {
    position: absolute;

    pointer-events: none;

    border-radius: 50%;
}

.fas-hero-bg-shape-one {
    top: 70px;
    right: -100px;

    width: 300px;
    height: 300px;

    background: rgba(232, 43, 131, 0.045);
}

.fas-hero-bg-shape-two {
    bottom: -140px;
    left: 35%;

    width: 350px;
    height: 350px;

    background: rgba(88, 63, 190, 0.045);
}


/* =========================================================
   HERO CONTAINER
========================================================= */

.fas-hero-container {
    position: relative;

    min-height: 610px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    align-items: center;

    gap: 15px;

    padding-top: 15px;
    padding-bottom: 15px;

    z-index: 2;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.fas-hero-content {
    position: relative;

    max-width: 650px;

    z-index: 3;
}


/* =========================================================
   HERO EYEBROW
========================================================= */

.fas-hero-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 18px;

    color: var(--fas-pink);

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.fas-hero-eyebrow::before {
    content: "";

    width: 21px;
    height: 2px;

    margin-right: 9px;

    background: var(--fas-pink);

    border-radius: 20px;
}


/* =========================================================
   HERO HEADING
========================================================= */

.fas-hero-title {
    max-width: 650px;
    margin: 0;
    color: var(--fas-heading);
    font-family: "Manrope", sans-serif;
    font-size: clamp(52px, 4.0vw, 60px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.fas-hero-title span {
    display: inline-block;

    color: var(--fas-pink);
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.fas-hero-description {
    max-width: 590px;

    margin-top: 18px;

    color: var(--fas-text);

    font-size: 17px;
    font-weight: 500;

    line-height: 1.7;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.fas-hero-actions {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 20px;
}


/* =========================================================
   PRIMARY CTA
========================================================= */

.fas-hero-actions .fas-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 25px;

    gap: 10px;

    color: #ffffff !important;

    background: var(--fas-pink) !important;

    border: 1px solid var(--fas-pink) !important;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(232, 43, 131, 0.22);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.fas-hero-actions .fas-btn-primary:hover {
    color: #ffffff !important;

    background: var(--fas-pink-dark) !important;

    border-color: var(--fas-pink-dark) !important;

    transform: translateY(-3px);

    box-shadow:
        0 15px 32px rgba(232, 43, 131, 0.28);
}


/* =========================================================
   PRIMARY CTA ARROW
========================================================= */

.fas-hero-actions .fas-btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: 500;

    line-height: 1;

    transition:
        transform 0.25s ease;
}

.fas-hero-actions
.fas-btn-primary:hover
.fas-btn-arrow {
    transform: translateX(4px);
}


/* =========================================================
   SECONDARY CTA
========================================================= */

.fas-hero-actions .fas-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 25px;

    color: var(--fas-heading) !important;

    background: rgba(255, 255, 255, 0.8) !important;

    border: 1px solid rgba(36, 30, 82, 0.25) !important;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.fas-hero-actions .fas-btn-secondary:hover {
    color: var(--fas-pink) !important;

    background: #ffffff !important;

    border-color: var(--fas-pink) !important;

    transform: translateY(-3px);
}


/* =========================================================
   TECHNOLOGY TRUST
========================================================= */

.fas-hero-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 22px;

    margin-top: 22px;
}

.fas-trust-item {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #000000;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   TRUST ICON
========================================================= */

.fas-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex-shrink: 0;

    background: transparent;
}

.fas-trust-icon img {
    display: block;

    width: 25px;
    height: 25px;

    object-fit: contain;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.fas-hero-visual {
    position: relative;

    min-width: 0;
    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   HERO GLOW
========================================================= */

.fas-hero-glow {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 450px;
    height: 450px;

    background:
        radial-gradient(
            circle,
            rgba(232, 43, 131, 0.15) 0%,
            rgba(117, 73, 206, 0.09) 40%,
            rgba(255, 255, 255, 0) 72%
        );

    transform: translate(-50%, -50%);

    filter: blur(8px);

    pointer-events: none;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.fas-hero-image-wrap {
    position: relative;

    width: 720px;
    max-width: 125%;

    transform: translateX(20px);

    z-index: 2;

    animation:
        fasHeroFloat 6s ease-in-out infinite;
}

.fas-hero-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 25px 40px rgba(55, 30, 100, 0.12)
        );
}


/* =========================================================
   FLOATING ANIMATION
========================================================= */

@keyframes fasHeroFloat {

    0%,
    100% {
        transform: translate(20px, 0);
    }

    50% {
        transform: translate(20px, -8px);
    }
}


/* =========================================================
   HERO — TABLET
========================================================= */

@media (max-width: 1100px) {

    .fas-hero-container {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);
    }

    .fas-hero-title {
        font-size: clamp(46px, 5vw, 60px);
    }

    .fas-hero-description {
        font-size: 16px;
    }

    .fas-hero-image-wrap {
        width: 640px;
        max-width: 125%;

        transform: translateX(5px);
    }

    @keyframes fasHeroFloat {

        0%,
        100% {
            transform: translate(5px, 0);
        }

        50% {
            transform: translate(5px, -8px);
        }
    }

    .fas-hero-trust {
        gap: 16px;
    }

    .fas-trust-item {
        font-size: 11px;
    }

    .fas-trust-icon,
    .fas-trust-icon img {
        width: 23px;
        height: 23px;
    }
}


/* =========================================================
   HERO — TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .fas-hero {
        min-height: auto;
    }

    .fas-hero-container {
        min-height: auto;

        grid-template-columns: 1fr;

        padding-top: 75px;
        padding-bottom: 65px;
    }

    .fas-hero-content {
        max-width: 720px;
    }

    .fas-hero-title {
        max-width: 700px;

        font-size: clamp(46px, 6vw, 60px);
    }

    .fas-hero-description {
        max-width: 650px;

        font-size: 16px;
    }

    .fas-hero-visual {
        min-height: 440px;

        margin-top: 25px;
    }

    .fas-hero-image-wrap {
        width: 680px;
        max-width: 100%;

        transform: none;
    }

    @keyframes fasHeroFloat {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-8px);
        }
    }
}


/* =========================================================
   HERO — MOBILE
========================================================= */

@media (max-width: 767px) {

    .fas-hero-container {
        width: calc(100% - 32px);

        padding-top: 55px;
        padding-bottom: 45px;
    }

    .fas-hero-eyebrow {
        margin-bottom: 15px;

        font-size: 11px;
    }

    .fas-hero-title {
        font-size: clamp(38px, 10vw, 50px);

        line-height: 1.06;
    }

    .fas-hero-description {
        margin-top: 19px;

        font-size: 15px;
        line-height: 1.7;
    }

    .fas-hero-actions {
        align-items: stretch;
        flex-direction: column;

        max-width: 300px;

        margin-top: 27px;
    }

    .fas-hero-actions .fas-btn-primary,
    .fas-hero-actions .fas-btn-secondary {
        width: 100%;
    }

    .fas-hero-trust {
        gap: 14px 18px;

        margin-top: 30px;
    }

    .fas-trust-item {
        font-size: 11px;
    }

    .fas-trust-icon,
    .fas-trust-icon img {
        width: 22px;
        height: 22px;
    }

    .fas-hero-visual {
        min-height: auto;

        margin-top: 20px;
    }

    .fas-hero-image-wrap {
        width: 100%;
        max-width: 560px;
    }

    .fas-hero-glow {
        width: 300px;
        height: 300px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .fas-logo {
        font-size: 16px;
    }

    .fas-hero-title {
        font-size: 37px;
    }

    .fas-hero-description {
        font-size: 14px;
    }

    .fas-hero-trust {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 14px;
    }

    .fas-trust-item {
        white-space: normal;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================
   INTRO / TECHNOLOGY PARTNER
========================================= */

.fas-intro {
    position: relative;
    width: 100%;
    padding: 72px 0;
    background:
        radial-gradient(
            circle at 5% 50%,
            rgba(232, 43, 131, 0.035) 0,
            rgba(232, 43, 131, 0) 32%
        ),
        radial-gradient(
            circle at 95% 50%,
            rgba(101, 72, 190, 0.04) 0,
            rgba(101, 72, 190, 0) 32%
        ),
        #ffffff;

      background : url(../images/client-bg.png);
      background-repeat: no-repeat;
      /* background-size: cover; */
    overflow: hidden;
}


/* Main horizontal layout */

.fas-intro-container {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.8fr);
    align-items: center;
    gap: 45px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.fas-intro-content {
    max-width: 410px;
}

.fas-intro-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;

    color: var(--fas-pink);

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.fas-intro-title {
    margin: 0;
    color: var(--fas-heading);
    font-size: clamp(32px, 3vw, 30px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.045em;
}


.fas-intro-title span {
    display: block;
    color: var(--fas-pink);
}


.fas-intro-description {
    max-width: 405px;
    margin: 16px 0 0;
    color: var(--fas-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
}


/* =========================================
   CARDS WRAPPER
========================================= */

.fas-intro-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}


/* =========================================
   INDIVIDUAL CARD
========================================= */

.fas-intro-card {
    position: relative;

    min-height: 205px;
    padding: 19px 17px 18px;

    background: #ffffff;

    border: 1px solid rgba(36, 30, 82, 0.08);
    border-radius: 17px;

    box-shadow:
        0 6px 20px rgba(37, 27, 83, 0.045);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Small pink top accent */

.fas-intro-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 17px;

    width: 25px;
    height: 2px;

    background: var(--fas-pink);

    border-radius: 0 0 5px 5px;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}


/* Soft decorative circle */

.fas-intro-card::after {
    content: "";

    position: absolute;
    right: -38px;
    bottom: -45px;

    width: 105px;
    height: 105px;

    background: var(--fas-pink-light);

    border-radius: 50%;

    opacity: 0;

    transition: opacity 0.3s ease;
}


/* Hover */

.fas-intro-card:hover {
    transform: translateY(-5px);

    border-color: rgba(232, 43, 131, 0.16);

    box-shadow:
        0 14px 32px rgba(37, 27, 83, 0.09);
}


.fas-intro-card:hover::before {
    transform: scaleX(1);
}


.fas-intro-card:hover::after {
    opacity: 1;
}


/* =========================================
   CARD TOP
========================================= */

.fas-intro-card-top {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 25px;

    z-index: 2;
}


/* =========================================
   ICON
========================================= */

.fas-intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    /* background: #fff5fa;

    border: 1px solid rgba(232, 43, 131, 0.08);

    border-radius: 12px; */

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.fas-intro-icon img {
    display: block;

    /* width: 23px;
    height: 23px; */

    object-fit: contain;
}


.fas-intro-card:hover .fas-intro-icon {
    transform: translateY(-2px);

    background: #ffffff;

    box-shadow:
        0 7px 16px rgba(232, 43, 131, 0.10);
}


/* =========================================
   NUMBER
========================================= */

.fas-intro-number {
    color: #c9c6d5;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.08em;
}


/* =========================================
   CARD TYPOGRAPHY
========================================= */

.fas-intro-card h3 {
    position: relative;
    margin: 0 0 9px;
    color: var(--fas-heading);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;

    letter-spacing: -0.02em;

    z-index: 2;
}


.fas-intro-card p {
    position: relative;
    margin: 0;
    color: var(--fas-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;

    z-index: 2;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .fas-intro {
        padding: 65px 0;
    }

    .fas-intro-container {
        grid-template-columns: 0.75fr 1.65fr;
        gap: 30px;
    }

    .fas-intro-cards {
        gap: 10px;
    }

    .fas-intro-card {
        padding: 17px 15px;
        min-height: 195px;
    }

    .fas-intro-card h3 {
        font-size: 17px;
    }

    .fas-intro-card p {
        font-size: 13px;
    }

    .fas-intro-title {
        font-size: 34px;
    }
}


/* =========================================
   TABLET / SMALL LAPTOP
========================================= */

@media (max-width: 900px) {

    .fas-intro-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .fas-intro-content {
        max-width: 650px;
        text-align: center;
        margin: 0 auto;
    }

    .fas-intro-description {
        margin-left: auto;
        margin-right: auto;
    }

    .fas-intro-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .fas-intro {
        padding: 60px 0 65px;
    }

    .fas-intro-content {
        text-align: left;
        margin: 0;
    }

    .fas-intro-title {
        font-size: clamp(32px, 8vw, 40px);
    }

    .fas-intro-title span {
        display: inline;
    }

    .fas-intro-description {
        max-width: 100%;
        margin-top: 15px;

        font-size: 14px;
        line-height: 1.7;
    }

    .fas-intro-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .fas-intro-card {
        min-height: 190px;
        padding: 19px 17px;
    }

    .fas-intro-card-top {
        margin-bottom: 22px;
    }

    .fas-intro-card h3 {
        font-size: 17px;
    }

    .fas-intro-card p {
        font-size: 13px;
    }

    .fas-intro-icon {
        /* width: 43px;
        height: 43px; */
    }

    .fas-intro-icon img {
        /* width: 23px;
        height: 23px; */
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .fas-intro {
        padding: 50px 0 55px;
    }

    .fas-intro-title {
        font-size: 26px;
        line-height: 1.15;
    }

    .fas-intro-description {
        font-size: 13px;
    }

    .fas-intro-cards {
        grid-template-columns: 1fr;
    }

    .fas-intro-card {
        min-height: auto;
        padding: 20px;
    }

    .fas-intro-card p {
        max-width: 300px;
        font-size: 13px;
    }
}


/* =========================================
   SERVICES SECTION
========================================= */

.fas-services {
    position: relative;
    width: 100%;
    padding: 72px 0 78px;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(232, 43, 131, 0.035) 0,
            rgba(232, 43, 131, 0) 32%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(101, 72, 190, 0.045) 0,
            rgba(101, 72, 190, 0) 32%
        ),
        #faf9ff;

    overflow: hidden;
}


/* =========================================
   SERVICES HEADER
========================================= */

.fas-services-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
    margin-bottom: 30px;
}


.fas-services-heading {
    max-width: 900px;
}


/* =========================================
   SECTION LABEL
========================================= */

.fas-services-label {
    display: block;

    margin-bottom: 9px;

    color: var(--fas-pink);

    font-size: 13px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* =========================================
   MAIN HEADING
========================================= */

.fas-services-title {
    margin: 0;

    color: var(--fas-heading);

    font-size: clamp(32px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.1;

    letter-spacing: -0.045em;
}

.fas-inline-title span {
  display: inline-block !important;
}


/* =========================================
   VIEW ALL SERVICES
========================================= */

.fas-services-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    flex-shrink: 0;

    padding-bottom: 5px;

    color: var(--fas-pink);

    font-size: 14px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;

    transition:
        gap 0.25s ease,
        color 0.25s ease;
}


.fas-services-view-all:hover {
    gap: 12px;
    color: var(--fas-pink-dark);
}


.fas-services-arrow {
    font-size: 16px;
    line-height: 1;
}


/* =========================================
   SERVICES GRID
========================================= */

.fas-services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


/* =========================================
   SERVICE CARD
========================================= */

.fas-service-card {
    position: relative;

    display: flex;
    align-items: flex-start;

    min-height: 172px;

    padding: 20px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(36, 30, 82, 0.08);
    border-radius: 13px;

    box-shadow:
        0 6px 22px rgba(37, 27, 83, 0.05);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Hover */

.fas-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(232, 43, 131, 0.17);

    box-shadow:
        0 15px 35px rgba(37, 27, 83, 0.09);
}


/* =========================================
   TOP ACCENT
========================================= */

.fas-service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 20px;

    width: 32px;
    height: 3px;

    background: var(--fas-pink);

    border-radius: 0 0 6px 6px;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}


.fas-service-card:hover::before {
    transform: scaleX(1);
}


/* =========================================
   SOFT DECORATIVE CIRCLE
========================================= */

.fas-service-card::after {
    content: "";

    position: absolute;

    right: -45px;
    bottom: -50px;

    width: 120px;
    height: 120px;

    background: var(--fas-pink-light);

    border-radius: 50%;

    opacity: 0;

    transition: opacity 0.3s ease;
}


.fas-service-card:hover::after {
    opacity: 0.8;
}


/* =========================================
   SERVICE ICON
========================================= */

.fas-service-icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    margin-right: 16px;

    /* background:
        linear-gradient(
            145deg,
            #fff8fc 0%,
            #f7f2ff 100%
        );

    border: 1px solid rgba(232, 43, 131, 0.08);

    border-radius: 13px; */

    overflow: hidden;

    z-index: 2;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/* SVG */

.fas-service-icon img {
    display: block;

    /* width: 32px;
    height: 32px; */

    object-fit: contain;
}


/* Icon hover */

.fas-service-card:hover .fas-service-icon {
    transform: translateY(-2px);

    background: #ffffff;

    box-shadow:
        0 8px 18px rgba(232, 43, 131, 0.11);
}


/* =========================================
   SERVICE CONTENT
========================================= */

.fas-service-content {
    position: relative;

    min-width: 0;

    padding-top: 2px;

    z-index: 2;
}



/* =========================================
   SERVICE TITLE
========================================= */

.fas-service-content h3 {
    margin: 0 0 7px;

    color: var(--fas-heading);

    font-size: 18px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -0.025em;
}


/* =========================================
   SERVICE DESCRIPTION
========================================= */

.fas-service-content p {
    max-width: 245px;

    margin: 0;

    color: var(--fas-text);

    font-size: 14px;
    font-weight: 500;

    line-height: 1.6;
}


/* =========================================
   LEARN MORE
========================================= */

.fas-service-link {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin-top: 10px;

    color: var(--fas-pink);

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    transition:
        gap 0.25s ease,
        color 0.25s ease;
}


.fas-service-link span:last-child {
    font-size: 15px;
    line-height: 1;
}


.fas-service-link:hover {
    gap: 9px;
    color: var(--fas-pink-dark);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .fas-services {
        padding: 65px 0 70px;
    }

    .fas-services-grid {
        gap: 12px;
    }

    .fas-service-card {
        min-height: 165px;
        padding: 18px;
    }

    .fas-service-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;

        margin-right: 14px;
    }

    .fas-service-icon img {
        width: 30px;
        height: 30px;
    }

    .fas-service-content h3 {
        font-size: 18px;
    }

    .fas-service-content p {
        font-size: 14px;
    }
}


/* =========================================
   SMALL LAPTOP / TABLET
========================================= */

@media (max-width: 900px) {

    .fas-services-header {
        align-items: flex-start;
    }

    .fas-services-title {
        font-size: 34px;
    }

    .fas-services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .fas-service-card {
        min-height: 165px;
    }

    .fas-service-content h3 {
        font-size: 17px;
    }

    .fas-service-content p {
        font-size: 13px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .fas-services {
        padding: 60px 0 65px;
    }

    .fas-services-header {
        flex-direction: column;

        gap: 15px;

        margin-bottom: 26px;
    }

    .fas-services-title {
        font-size: clamp(30px, 8vw, 38px);
    }

    .fas-services-view-all {
        padding-bottom: 0;

        font-size: 12px;
    }

    .fas-services-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .fas-service-card {
        min-height: 150px;

        padding: 19px;
    }

    .fas-service-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        margin-right: 15px;
    }

    .fas-service-icon img {
        width: 31px;
        height: 31px;
    }

    .fas-service-content h3 {
        margin-bottom: 6px;

        font-size: 17px;
    }

    .fas-service-content p {
        max-width: 100%;

        font-size: 13px;
        line-height: 1.6;
    }

    .fas-service-link {
        margin-top: 9px;

        font-size: 12px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .fas-services {
        padding: 52px 0 58px;
    }

    .fas-services-title {
        font-size: 30px;
    }

    .fas-service-card {
        min-height: 145px;

        padding: 17px;
    }

    .fas-service-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        margin-right: 13px;
    }

    .fas-service-icon img {
        width: 29px;
        height: 29px;
    }

    .fas-service-content h3 {
        font-size: 16px;
    }

    .fas-service-content p {
        font-size: 13px;
    }
}


/* =========================================
   WHY CHOOSE US
========================================= */

.fas-why-choose {
    position: relative;
    width: 100%;

    padding: 58px 0 62px;
    background: url(../images/client-bg.png);
    background-repeat: no-repeat;
    /* background-size: cover; */
    overflow: hidden;
}


/* =========================================
   MAIN CONTAINER
========================================= */

.fas-why-choose-container {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    align-items: center;

    gap: 45px;
}


/* =========================================
   LEFT VISUAL
========================================= */

.fas-why-choose-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}


/* =========================================
   SOFT IMAGE GLOW
========================================= */

.fas-why-glow {
    position: absolute;

    width: 390px;
    height: 390px;

    background:
        radial-gradient(
            circle,
            rgba(232, 43, 131, 0.075) 0%,
            rgba(232, 43, 131, 0.035) 38%,
            rgba(232, 43, 131, 0) 72%
        );

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   IMAGE WRAPPER
========================================= */

.fas-why-image-wrap {
    position: relative;

    width: 100%;
    max-width: 590px;

    margin-left: -15px;

    z-index: 2;
}


/* =========================================
   IMAGE
========================================= */

.fas-why-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 28px rgba(37, 27, 83, 0.07)
        );

    animation:
        fasWhyFloat 6s ease-in-out infinite;
}


@keyframes fasWhyFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


/* =========================================
   RIGHT CONTENT
========================================= */

.fas-why-choose-content {
    max-width: 520px;

    padding-left: 0;
}


/* =========================================
   LABEL
========================================= */

.fas-why-label {
    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;

    color: var(--fas-pink);

    font-size: 11px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


/* =========================================
   TITLE
========================================= */

.fas-why-title {
    margin: 0;

    color: var(--fas-heading);

    font-size: clamp(32px, 3vw, 40px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.045em;
}


.fas-why-title span {
    display: block;

    color: var(--fas-pink);
}


/* =========================================
   DESCRIPTION
========================================= */

.fas-why-description {
    max-width: 500px;

    margin: 17px 0 0;

    color: var(--fas-text);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.65;
}


/* =========================================
   POINTS
========================================= */

.fas-why-points {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 35px;
    row-gap: 12px;

    margin-top: 23px;
}


/* =========================================
   SINGLE POINT
========================================= */

.fas-why-point {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 9px;

    cursor: default;
}


/* =========================================
   CHECK ICON
========================================= */

.fas-why-check {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    background: var(--fas-pink);

    border-radius: 50%;

    box-shadow:
        0 4px 10px rgba(232, 43, 131, 0.15);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.fas-why-check img {
    display: block;

    width: 20px;
    height: 20px;

    object-fit: contain;
}


/* =========================================
   POINT TEXT
========================================= */

.fas-why-point-text {
    color: var(--fas-heading);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.35;

    white-space: nowrap;
}


/* =========================================
   POINT HOVER
========================================= */

.fas-why-point:hover .fas-why-check {
    transform: scale(1.07);

    box-shadow:
        0 6px 14px rgba(232, 43, 131, 0.22);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .fas-why-choose {
        padding: 52px 0 58px;
    }

    .fas-why-choose-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.9fr);

        gap: 30px;
    }

    .fas-why-image-wrap {
        max-width: 540px;
        margin-left: -10px;
    }

    .fas-why-title {
        font-size: 35px;
    }

    .fas-why-description {
        font-size: 15px;
    }

    .fas-why-point-text {
        font-size: 12px;
    }
}


/* =========================================
   TABLET / SMALL LAPTOP
========================================= */

@media (max-width: 900px) {

    .fas-why-choose {
        padding: 60px 0 65px;
    }

    .fas-why-choose-container {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .fas-why-choose-visual {
        order: 1;
    }

    .fas-why-choose-content {
        order: 2;

        max-width: 680px;

        margin: 0 auto;
    }

    .fas-why-image-wrap {
        max-width: 600px;

        margin-left: 0;
    }

    .fas-why-choose-content {
        text-align: center;
    }

    .fas-why-description {
        margin-left: auto;
        margin-right: auto;
    }

    .fas-why-points {
        text-align: left;

        max-width: 600px;

        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .fas-why-choose {
        padding: 52px 0 58px;
    }

    .fas-why-choose-container {
        gap: 30px;
    }

    .fas-why-image-wrap {
        width: 100%;
        max-width: 100%;
    }

    .fas-why-glow {
        width: 320px;
        height: 320px;
    }

    .fas-why-choose-content {
        text-align: left;
    }

    .fas-why-title {
        font-size: clamp(31px, 8vw, 39px);
    }

    .fas-why-title span {
        display: inline;
    }

    .fas-why-description {
        margin-top: 15px;

        font-size: 14px;

        line-height: 1.65;
    }

    .fas-why-points {
        grid-template-columns: 1fr;

        row-gap: 12px;

        margin-top: 22px;
    }

    .fas-why-point-text {
        font-size: 13px;

        white-space: normal;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .fas-why-choose {
        padding: 45px 0 50px;
    }

    .fas-why-title {
        font-size: 30px;
    }

    .fas-why-description {
        font-size: 13px;
    }

    .fas-why-check {
        width: 26px;
        height: 26px;

        flex-basis: 26px;
    }

    .fas-why-check img {
        width: 15px;
        height: 15px;
    }

    .fas-why-point-text {
        font-size: 12px;
    }
}


/* =========================================
   OUR PROCESS / HOW WE WORK
========================================= */

.fas-process {
    position: relative;

    width: 100%;

    padding: 65px 0 72px;

    background:
        radial-gradient(
            circle at 8% 50%,
            rgba(232, 43, 131, 0.035) 0,
            rgba(232, 43, 131, 0) 30%
        ),
        radial-gradient(
            circle at 92% 50%,
            rgba(101, 72, 190, 0.035) 0,
            rgba(101, 72, 190, 0) 30%
        ),
        #ffffff;
      background : url(../images/bg-pink-3.png);
      background-repeat: no-repeat;
      background-size: cover;

    overflow: hidden;
}


/* =========================================
   SECTION HEADER
========================================= */

.fas-process-header {
    margin-bottom: 38px;
}


.fas-process-label {
    display: block;

    margin-bottom: 8px;

    color: var(--fas-pink);

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.fas-process-title {
    margin: 0;

    color: var(--fas-heading);

    font-size: clamp(32px, 3vw, 40px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.045em;
}


/* =========================================
   PROCESS LIST
========================================= */

.fas-process-list {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        70px
        minmax(0, 1fr)
        70px
        minmax(0, 1fr)
        70px
        minmax(0, 1fr);

    align-items: start;

    width: 100%;
}


/* =========================================
   PROCESS ITEM
========================================= */

.fas-process-item {
    position: relative;

    min-width: 0;
}


/* =========================================
   TOP ROW
========================================= */

/* =========================================
   PROCESS TOP ALIGNMENT
========================================= */

.fas-process-top {
    display: flex;
    align-items: flex-start;
    height: 56px;
}


/* Number sits slightly above the icon */

.fas-process-number {
    transform: translateY(-20px);
}


/* Icon remains slightly lower */

.fas-process-icon {
    transform: translateY(0);
}


/* Hover icon */

.fas-process-item:hover .fas-process-icon {
    transform: translateY(-3px);
}


/* Number hover should remain stable */

.fas-process-item:hover .fas-process-number {
    transform: translateY(-20px);
}


/* =========================================
   NUMBER
========================================= */

.fas-process-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    color: #ffffff;

    background: var(--fas-pink);

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;

    box-shadow:
        0 7px 16px rgba(232, 43, 131, 0.18);

    z-index: 3;
}


/* =========================================
   ICON BOX
========================================= */

.fas-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-left: 8px;

    background:
        linear-gradient(
            145deg,
            #fff6fb 0%,
            #f7f3ff 100%
        );

    border: 1px solid rgba(232, 43, 131, 0.08);

    border-radius: 13px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.fas-process-icon img {
    display: block;

    width: 27px;
    height: 27px;

    object-fit: contain;
}


/* Hover */

.fas-process-item:hover .fas-process-icon {
    transform: translateY(-3px);

    background: #ffffff;

    box-shadow:
        0 9px 20px rgba(37, 27, 83, 0.09);
}


/* =========================================
   PROCESS CONNECTOR
========================================= */

.fas-process-connector {
    position: relative;

    display: flex;
    align-items: center;

    height: 56px;

    padding: 0 7px;
}


/* Main line */

.fas-process-connector span {
    position: relative;

    display: block;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(232, 43, 131, 0.18),
            rgba(232, 43, 131, 0.45)
        );
}


/* Arrow */

.fas-process-connector span::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 7px;
    height: 7px;

    border-top: 1px solid var(--fas-pink);
    border-right: 1px solid var(--fas-pink);

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* =========================================
   CONTENT
========================================= */

.fas-process-content {
    padding-top: 14px;

    padding-left: 1px;
}


.fas-process-content h3 {
    margin: 0 0 7px;

    color: var(--fas-heading);

    font-size: 18px;
    font-weight: 800;

    line-height: 1.25;

    letter-spacing: -0.025em;
}


.fas-process-content p {
    max-width: 220px;

    margin: 0;

    color: var(--fas-text);

    font-size: 14px;
    font-weight: 500;

    line-height: 1.6;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .fas-process {
        padding: 58px 0 65px;
    }

    .fas-process-list {
        grid-template-columns:
            minmax(0, 1fr)
            45px
            minmax(0, 1fr)
            45px
            minmax(0, 1fr)
            45px
            minmax(0, 1fr);
    }

    .fas-process-connector {
        padding: 0 4px;
    }

    .fas-process-number {
        width: 36px;
        height: 36px;

        flex-basis: 36px;

        font-size: 11px;
    }

    .fas-process-icon {
        width: 45px;
        height: 45px;

        margin-left: 7px;
    }

    .fas-process-icon img {
        width: 25px;
        height: 25px;
    }

    .fas-process-content h3 {
        font-size: 18px;
    }

    .fas-process-content p {
        font-size: 14px;
    }
}


/* =========================================
   SMALL TABLET
========================================= */

@media (max-width: 900px) {

    .fas-process-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 35px 25px;
    }

    .fas-process-connector {
        display: none;
    }

    .fas-process-item {
        padding: 18px;

        background: #ffffff;

        border: 1px solid rgba(36, 30, 82, 0.07);

        border-radius: 14px;

        box-shadow:
            0 5px 18px rgba(37, 27, 83, 0.045);
    }

    .fas-process-content {
        padding-top: 12px;
    }

    .fas-process-content p {
        max-width: 100%;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .fas-process {
        padding: 55px 0 60px;
    }

    .fas-process-header {
        margin-bottom: 28px;
    }

    .fas-process-title {
        font-size: clamp(30px, 8vw, 38px);
    }

    .fas-process-list {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .fas-process-item {
        padding: 18px;

        min-height: 145px;
    }

    .fas-process-top {
        height: 50px;
    }

    .fas-process-number {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }

    .fas-process-icon {
        width: 45px;
        height: 45px;
    }

    .fas-process-content {
        padding-top: 12px;
    }

    .fas-process-content h3 {
        font-size: 16px;
    }

    .fas-process-content p {
        font-size: 13px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .fas-process {
        padding: 48px 0 54px;
    }

    .fas-process-item {
        min-height: 140px;

        padding: 17px;
    }

    .fas-process-content h3 {
        font-size: 15px;
    }

    .fas-process-content p {
        font-size: 12px;
    }

    .fas-process-icon {
        width: 43px;
        height: 43px;
    }

    .fas-process-icon img {
        width: 24px;
        height: 24px;
    }
}


/* =========================================
   PORTFOLIO / OUR RECENT WORK
========================================= */

.fas-portfolio {
    position: relative;

    width: 100%;

    padding: 68px 0 75px;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(232, 43, 131, 0.035) 0,
            rgba(232, 43, 131, 0) 32%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(101, 72, 190, 0.045) 0,
            rgba(101, 72, 190, 0) 32%
        ),
        #faf9ff;

    overflow: hidden;
}


/* =========================================
   HEADER
========================================= */

.fas-portfolio-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;
}


.fas-portfolio-label {
    display: block;

    margin-bottom: 8px;

    color: var(--fas-pink);

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.fas-portfolio-title {
    margin: 0;

    color: var(--fas-heading);

    font-size: clamp(32px, 3vw, 40px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.045em;
}


/* =========================================
   VIEW ALL
========================================= */

.fas-portfolio-view-all {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    padding-bottom: 5px;

    color: var(--fas-pink);

    font-size: 14px;
    font-weight: 800;

    line-height: 1;

    white-space: nowrap;

    transition:
        gap 0.25s ease,
        color 0.25s ease;
}


.fas-portfolio-view-all:hover {
    gap: 12px;

    color: var(--fas-pink-dark);
}


.fas-portfolio-view-all span:last-child {
    font-size: 16px;
}


/* =========================================
   PORTFOLIO GRID
========================================= */

.fas-portfolio-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


/* =========================================
   PORTFOLIO CARD
========================================= */

.fas-portfolio-card {
    position: relative;

    background: #ffffff;

    border: 1px solid rgba(36, 30, 82, 0.08);

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 6px 20px rgba(37, 27, 83, 0.05);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.fas-portfolio-card:hover {
    transform: translateY(-5px);

    border-color: rgba(232, 43, 131, 0.16);

    box-shadow:
        0 15px 35px rgba(37, 27, 83, 0.10);
}


/* =========================================
   PROJECT IMAGE
========================================= */

.fas-portfolio-image {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1.55 / 1;

    background: #f5f4fa;

    overflow: hidden;
}


.fas-portfolio-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.45s ease;
}


.fas-portfolio-card:hover
.fas-portfolio-image img {
    transform: scale(1.035);
}


/* =========================================
   IMAGE OVERLAY
========================================= */

.fas-portfolio-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(36, 27, 99, 0) 55%,
            rgba(36, 27, 99, 0.06) 100%
        );

    pointer-events: none;
}


/* =========================================
   PROJECT INFO
========================================= */

.fas-portfolio-info {
    padding: 14px 16px 16px;
}


.fas-portfolio-info h3 {
    margin: 0 0 4px;

    color: var(--fas-heading);

    font-size: 15px;

    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -0.02em;
}


.fas-portfolio-info span {
    display: block;

    color: #77748a;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.4;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .fas-portfolio {
        padding: 62px 0 68px;
    }

    .fas-portfolio-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }

    .fas-portfolio-info h3 {
        font-size: 16px;
    }

    .fas-portfolio-info span {
        font-size: 12px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .fas-portfolio {
        padding: 55px 0 60px;
    }

    .fas-portfolio-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        margin-bottom: 25px;
    }

    .fas-portfolio-title {
        font-size: clamp(30px, 8vw, 38px);
    }

    .fas-portfolio-view-all {
        padding-bottom: 0;
    }

    .fas-portfolio-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .fas-portfolio-info {
        padding: 14px 16px 17px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .fas-portfolio {
        padding: 48px 0 54px;
    }

    .fas-portfolio-title {
        font-size: 30px;
    }

    .fas-portfolio-info h3 {
        font-size: 15px;
    }

    .fas-portfolio-info span {
        font-size: 11px;
    }
}

/* =========================================
   LET'S WORK TOGETHER / CONTACT CTA
========================================= */

.fas-project-cta {
    position: relative;

    width: 100%;

    padding: 58px 0;

    background:
        linear-gradient(
            115deg,
            #21104b 0%,
            #32115f 48%,
            #24104f 100%
        );

    overflow: hidden;
}


/* =========================================
   BACKGROUND IMAGE
========================================= */

.fas-project-cta-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("../images/project-cta-bg.png");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0.72;

    pointer-events: none;
}


/* =========================================
   BACKGROUND OVERLAY
========================================= */

.fas-project-cta::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(24, 10, 58, 0.72) 0%,
            rgba(35, 12, 72, 0.48) 48%,
            rgba(32, 10, 65, 0.35) 100%
        );

    pointer-events: none;
}


/* =========================================
   CONTAINER
========================================= */

.fas-project-cta-container {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(440px, 1.12fr);

    align-items: center;

    gap: 55px;

    z-index: 2;
}


/* =========================================
   LEFT CONTENT
========================================= */

.fas-project-cta-content {
    position: relative;

    max-width: 570px;
}


/* =========================================
   LABEL
========================================= */

.fas-project-cta-label {
    display: block;

    margin-bottom: 10px;

    color: #ff69ae;

    font-size: 13px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


/* =========================================
   TITLE
========================================= */

.fas-project-cta-title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(34px, 3.3vw, 47px);

    font-weight: 800;

    line-height: 1.06;

    letter-spacing: -0.05em;
}


.fas-project-cta-title span {
    display: block;

    color: #ff3190;
}


/* =========================================
   DESCRIPTION
========================================= */

.fas-project-cta-description {
    max-width: 520px;

    margin: 17px 0 0;

    color: rgba(255, 255, 255, 0.80);

    font-size: 17px;

    font-weight: 500;

    line-height: 1.65;
}


/* =========================================
   ACTIONS
========================================= */

.fas-project-cta-actions {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 22px;
}


/* =========================================
   MAIN BUTTON
========================================= */

.fas-project-cta-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 45px;

    padding: 0 22px;

    color: #ffffff;

    background: var(--fas-pink);

    border-radius: 24px;

    font-size: 14px;

    font-weight: 800;

    line-height: 1;

    box-shadow:
        0 10px 25px rgba(232, 43, 131, 0.28);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.fas-project-cta-button:hover {
    transform: translateY(-2px);

    background: var(--fas-pink-dark);

    box-shadow:
        0 14px 30px rgba(232, 43, 131, 0.35);
}


.fas-project-cta-button span:last-child {
    font-size: 16px;
}


/* =========================================
   NOTE
========================================= */

.fas-project-cta-note {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.fas-project-cta-note strong {
    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.3;
}


.fas-project-cta-note span {
    color: rgba(255, 255, 255, 0.62);

    font-size: 11px;

    font-weight: 500;

    line-height: 1.3;
}


/* =========================================
   BENEFITS
========================================= */

.fas-project-cta-benefits {
    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 34px;
}


.fas-project-cta-benefit {
    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 12px;

    font-weight: 600;

    line-height: 1.35;
}


/* =========================================
   BENEFIT ICON
========================================= */

.fas-project-cta-benefit-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    background: rgba(232, 43, 131, 0.18);

    border: 1px solid rgba(255, 105, 174, 0.25);

    border-radius: 50%;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


.fas-project-cta-benefit-icon img {
    display: block;

    width: 18px;
    height: 18px;

    object-fit: contain;
}


.fas-project-cta-benefit:hover
.fas-project-cta-benefit-icon {
    transform: translateY(-2px);

    background: rgba(232, 43, 131, 0.28);

    border-color: rgba(255, 105, 174, 0.45);
}


/* =========================================
   CONTACT FORM WRAPPER
========================================= */

.fas-contact-form-wrap {
    position: relative;

    width: 100%;

    max-width: 570px;

    margin-left: auto;

    padding: 5px;
}


/* =========================================
   FORM
========================================= */

.fas-contact-form {
    position: relative;

    padding: 27px 29px 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(250, 247, 255, 0.97)
        );

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 20px;

    box-shadow:
        0 25px 60px rgba(10, 4, 35, 0.28);

    backdrop-filter: blur(12px);
}


/* =========================================
   FORM HEADER
========================================= */

.fas-contact-form-header {
    margin-bottom: 17px;
}


.fas-contact-form-accent {
    display: block;

    width: 38px;
    height: 4px;

    margin-bottom: 9px;

    background: var(--fas-pink);

    border-radius: 5px;
}


.fas-contact-form-header h3 {
    margin: 0;

    color: var(--fas-heading);

    font-size: 29px;

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.04em;
}


.fas-contact-form-header h3 span {
    color: var(--fas-pink);
}


.fas-contact-form-header p {
    margin: 7px 0 0;

    color: #000;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.5;
}


/* =========================================
   FORM ROW
========================================= */

.fas-contact-form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 11px;

    margin-bottom: 11px;
}


/* =========================================
   FIELD
========================================= */

.fas-contact-field {
    position: relative;

    min-width: 0;
}


.fas-contact-field label {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================
   INPUTS
========================================= */

.fas-contact-field input,
.fas-contact-field select,
.fas-contact-field textarea {
    display: block;

    width: 100%;

    color: var(--fas-heading);

    background: rgba(255, 255, 255, 0.76);

    border: 1px solid rgba(109, 83, 184, 0.15);

    border-radius: 10px;

    outline: none;

    font-family: inherit;

    font-size: 15px;

    font-weight: 500;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.fas-contact-field input,
.fas-contact-field select {
    height: 43px;

    padding: 0 14px;
}


.fas-contact-field textarea {
    min-height: 82px;

    padding: 12px 14px;

    resize: vertical;

    line-height: 1.5;
}


.fas-contact-field input::placeholder,
.fas-contact-field textarea::placeholder {
    color: #817d99;

    opacity: 1;
}


.fas-contact-field select {
    color: #817d99;

    cursor: pointer;

    appearance: auto;
}


.fas-contact-field input:focus,
.fas-contact-field select:focus,
.fas-contact-field textarea:focus {
    background: #ffffff;

    border-color: rgba(232, 43, 131, 0.45);

    box-shadow:
        0 0 0 3px rgba(232, 43, 131, 0.08);
}


/* =========================================
   MESSAGE
========================================= */

.fas-contact-message-field {
    margin-bottom: 11px;
}


/* =========================================
   SUBMIT BUTTON
========================================= */

.fas-contact-submit {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;

    height: 44px;

    padding: 0 20px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #e82b83,
            #f13291
        );

    border: 0;

    border-radius: 22px;

    font-family: inherit;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 9px 22px rgba(232, 43, 131, 0.23);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.fas-contact-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 13px 27px rgba(232, 43, 131, 0.32);
}


.fas-contact-submit span:last-child {
    font-size: 16px;
}


/* =========================================
   PRIVACY
========================================= */

.fas-contact-privacy {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    margin: 10px 0 0;

    color: #8a879b;

    font-size: 9px;

    font-weight: 500;

    line-height: 1.3;

    text-align: center;
}


.fas-contact-privacy span {
    font-size: 10px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .fas-project-cta {
        padding: 52px 0;
    }

    .fas-project-cta-container {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(390px, 1.1fr);

        gap: 35px;
    }

    .fas-project-cta-title {
        font-size: 38px;
    }

    .fas-project-cta-benefits {
        gap: 18px;
    }

    .fas-contact-form {
        padding: 25px;
    }
}


/* =========================================
   SMALL LAPTOP / TABLET
========================================= */

@media (max-width: 900px) {

    .fas-project-cta-container {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .fas-project-cta-content {
        max-width: 680px;
    }

    .fas-contact-form-wrap {
        max-width: 650px;

        margin: 0;
    }

    .fas-project-cta-benefits {
        margin-top: 27px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .fas-project-cta {
        padding: 48px 0 50px;
    }

    .fas-project-cta-container {
        gap: 30px;
    }

    .fas-project-cta-title {
        font-size: clamp(30px, 8vw, 39px);
    }

    .fas-project-cta-title span {
        display: inline;
    }

    .fas-project-cta-description {
        font-size: 14px;
    }

    .fas-project-cta-actions {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }

    .fas-project-cta-benefits {
        flex-wrap: wrap;

        gap: 17px 25px;

        margin-top: 27px;
    }

    .fas-contact-form {
        padding: 23px 19px 20px;

        border-radius: 17px;
    }

    .fas-contact-form-header h3 {
        font-size: 26px;
    }

    .fas-contact-form-row {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 10px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .fas-project-cta {
        padding: 42px 0 45px;
    }

    .fas-project-cta-title {
        font-size: 29px;
    }

    .fas-project-cta-description {
        font-size: 13px;
    }

    .fas-project-cta-benefit {
        font-size: 10px;
    }

    .fas-project-cta-benefit-icon {
        width: 31px;
        height: 31px;

        flex-basis: 31px;
    }

    .fas-project-cta-benefit-icon img {
        width: 16px;
        height: 16px;
    }

    .fas-contact-form {
        padding: 21px 16px 18px;
    }

    .fas-contact-form-header h3 {
        font-size: 24px;
    }

    .fas-contact-field input,
    .fas-contact-field select {
        height: 42px;

        font-size: 11px;
    }

    .fas-contact-field textarea {
        min-height: 78px;

        font-size: 11px;
    }

    .fas-contact-submit {
        height: 42px;

        font-size: 11px;
    }
}



/* =========================================
   TESTIMONIALS
========================================= */

.fas-testimonials {
    position: relative;

    width: 100%;

    padding: 55px 0 58px;

    background:
        radial-gradient(
            circle at 5% 50%,
            rgba(232, 43, 131, 0.025) 0,
            rgba(232, 43, 131, 0) 30%
        ),
        radial-gradient(
            circle at 95% 50%,
            rgba(101, 72, 190, 0.03) 0,
            rgba(101, 72, 190, 0) 30%
        ),
        #ffffff;
      background : url(../images/client-bg.png);
      background-repeat: no-repeat;
      background-size: cover;

    overflow: hidden;
}


/* =========================================
   HEADER
========================================= */

.fas-testimonials-header {
    margin-bottom: 26px;
}


.fas-testimonials-label {
    display: block;

    margin-bottom: 8px;

    color: var(--fas-pink);

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.fas-testimonials-heading-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.fas-testimonials-title {
    margin: 0;

    color: var(--fas-heading);

    font-size: clamp(30px, 3vw, 32px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.045em;
}


/* =========================================
   SLIDER CONTROLS
========================================= */

.fas-testimonials-controls {
    display: flex;

    align-items: center;

    gap: 7px;
}


.fas-testimonial-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    padding: 0;

    color: var(--fas-heading);

    background: #ffffff;

    border: 1px solid rgba(36, 30, 82, 0.10);

    border-radius: 50%;

    font-size: 14px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.fas-testimonial-arrow:hover:not(:disabled) {
    color: #ffffff;

    background: var(--fas-pink);

    border-color: var(--fas-pink);

    transform: translateY(-2px);
}


.fas-testimonial-arrow:disabled {
    opacity: 0.45;

    cursor: default;
}


/* =========================================
   SLIDER
========================================= */

.fas-testimonials-slider {
    width: 100%;

    overflow: hidden;
}


.fas-testimonials-track {
    display: flex;

    gap: 14px;

    transition:
        transform 0.5s ease;
}


/* =========================================
   TESTIMONIAL CARD
========================================= */

.fas-testimonial-card {
    position: relative;

    display: flex;
    flex-direction: column;

    flex: 0 0 calc(
        (100% - 28px) / 3
    );

    min-height: 172px;

    padding: 17px 18px 15px;

    background: #ffffff;

    border: 1px solid rgba(36, 30, 82, 0.075);

    border-radius: 11px;

    box-shadow:
        0 5px 18px rgba(37, 27, 83, 0.045);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.fas-testimonial-card:hover {
    transform: translateY(-4px);

    border-color: rgba(232, 43, 131, 0.14);

    box-shadow:
        0 12px 28px rgba(37, 27, 83, 0.08);
}


/* Pink top line */

.fas-testimonial-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 20px;

    width: 28px;
    height: 3px;

    background: var(--fas-pink);

    border-radius: 0 0 5px 5px;
}


/* =========================================
   MAIN TESTIMONIAL AREA
========================================= */

.fas-testimonial-main {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    flex: 1;
}


/* =========================================
   CLIENT IMAGE
========================================= */

.fas-testimonial-image {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    margin-top: 1px;

    border-radius: 50%;

    overflow: hidden;

    background: #f3f1f7;

    border: 2px solid #ffffff;

    box-shadow:
        0 3px 10px rgba(37, 27, 83, 0.10);
}


.fas-testimonial-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* =========================================
   QUOTE
========================================= */

.fas-testimonial-quote {
    flex: 1;

    min-width: 0;
}


.fas-testimonial-quote p {
    margin: 0;

    color: var(--fas-text);

    font-size: 15px;

    font-weight: 500;

    line-height: 1.58;
}


/* =========================================
   FOOTER
========================================= */

.fas-testimonial-footer {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-top: 14px;

    padding-left: 54px;
}


/* =========================================
   CLIENT DETAILS
========================================= */

.fas-testimonial-client-info {
    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.fas-testimonial-client-info strong {
    color: var(--fas-heading);

    font-size: 13px;

    font-weight: 800;

    line-height: 1.3;
}


.fas-testimonial-client-info span {
    color: #77748a;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.3;
}


/* =========================================
   STARS
========================================= */

.fas-testimonial-stars {
    display: flex;

    align-items: center;

    gap: 3px;

    flex-shrink: 0;
}


.fas-testimonial-stars img {
    display: block;

    width: 12px;
    height: 12px;

    max-width: 12px;

    object-fit: contain;
}


/* =========================================
   DOTS
========================================= */

.fas-testimonials-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 19px;
}


.fas-testimonial-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    background: #d8d5e1;

    border: 0;

    border-radius: 50%;

    cursor: pointer;

    transition:
        width 0.25s ease,
        background 0.25s ease;
}


.fas-testimonial-dot.fas-active {
    width: 22px;

    background: var(--fas-pink);

    border-radius: 10px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .fas-testimonial-card {
        flex-basis: calc(
            (100% - 14px) / 2
        );
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .fas-testimonials {
        padding: 48px 0 55px;
    }

    .fas-testimonials-header {
        margin-bottom: 22px;
    }

    .fas-testimonials-title {
        font-size: 28px;
    }

    .fas-testimonial-card {
        flex-basis: 100%;

        min-height: 175px;

        padding: 18px;
    }

    .fas-testimonial-main {
        gap: 12px;
    }

    .fas-testimonial-image {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }

    .fas-testimonial-quote p {
        font-size: 13px;
    }

    .fas-testimonial-footer {
        padding-left: 58px;
    }

    .fas-testimonial-client-info strong {
        font-size: 12px;
    }

    .fas-testimonial-client-info span {
        font-size: 10px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .fas-testimonials {
        padding: 44px 0 50px;
    }

    .fas-testimonials-heading-row {
        align-items: center;
    }

    .fas-testimonials-title {
        font-size: 26px;
    }

    .fas-testimonial-arrow {
        width: 33px;
        height: 33px;
    }

    .fas-testimonial-card {
        min-height: 170px;

        padding: 17px;
    }

    .fas-testimonial-quote p {
        font-size: 13px;
    }
}


/* =========================================
   FINAL CTA
========================================= */

.fas-final-cta {
    position: relative;

    width: 100%;

    min-height: 145px;

    display: flex;
    align-items: center;

    background: #fff7fc;

    overflow: hidden;
}


/* =========================================
   BACKGROUND IMAGE
========================================= */

.fas-final-cta-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("../images/final-cta-bg.png");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0.72;

    pointer-events: none;
}


/* =========================================
   CONTAINER
========================================= */

.fas-final-cta-container {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 40px;

    min-height: 145px;

    z-index: 2;
}


/* =========================================
   CONTENT
========================================= */

.fas-final-cta-content {
    position: relative;

    max-width: 650px;
}


/* =========================================
   LABEL
========================================= */

.fas-final-cta-label {
    display: block;

    margin-bottom: 6px;

    color: var(--fas-pink);

    font-size: 13px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


/* =========================================
   TITLE
========================================= */

.fas-final-cta-title {
    margin: 0;

    color: var(--fas-heading);

    font-size: clamp(28px, 3vw, 37px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.045em;
}


.fas-final-cta-title span {
    display: inline;

    color: var(--fas-pink);
}


/* =========================================
   DESCRIPTION
========================================= */

.fas-final-cta-description {
    margin: 7px 0 0;

    color: var(--fas-text);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.5;
}


/* =========================================
   BUTTON WRAPPER
========================================= */

.fas-final-cta-action {
    display: flex;

    align-items: center;
    justify-content: center;

    padding-right: 120px;
}


/* =========================================
   BUTTON
========================================= */

.fas-final-cta-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 145px;

    min-height: 43px;

    padding: 0 20px;

    color: #ffffff;

    background: var(--fas-pink);

    border-radius: 24px;

    font-size: 16px;

    font-weight: 800;

    line-height: 1;

    box-shadow:
        0 9px 22px rgba(232, 43, 131, 0.20);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.fas-final-cta-button:hover {
    transform: translateY(-2px);

    background: var(--fas-pink-dark);

    box-shadow:
        0 13px 27px rgba(232, 43, 131, 0.28);
}


/* =========================================
   ARROW
========================================= */

.fas-final-cta-arrow {
    font-size: 16px;

    line-height: 1;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .fas-final-cta-action {
        padding-right: 70px;
    }

}


/* =========================================
   SMALL LAPTOP / TABLET
========================================= */

@media (max-width: 900px) {

    .fas-final-cta {
        min-height: 135px;
    }

    .fas-final-cta-container {
        min-height: 135px;

        gap: 25px;
    }

    .fas-final-cta-action {
        padding-right: 40px;
    }

    .fas-final-cta-title {
        font-size: 32px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .fas-final-cta {
        padding: 35px 0;

        min-height: auto;
    }

    .fas-final-cta-container {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        min-height: auto;
    }

    .fas-final-cta-title {
        font-size: clamp(29px, 8vw, 36px);
    }

    .fas-final-cta-description {
        font-size: 14px;
    }

    .fas-final-cta-action {
        padding-right: 0;
    }

    .fas-final-cta-button {
        min-height: 42px;

        min-width: 140px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .fas-final-cta {
        padding: 32px 0;
    }

    .fas-final-cta-label {
        font-size: 10px;
    }

    .fas-final-cta-title {
        font-size: 28px;
    }

    .fas-final-cta-description {
        font-size: 12px;
    }

}

/* =========================================
   FOOTER
========================================= */

.fas-footer {
    position: relative;

    width: 100%;

    padding: 48px 0 22px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 75% 0%,
            rgba(101, 72, 190, 0.13) 0,
            rgba(101, 72, 190, 0) 28%
        ),
        linear-gradient(
            135deg,
            #11112f 0%,
            #15133a 55%,
            #10102d 100%
        );

    overflow: hidden;
}


/* =========================================
   FOOTER MAIN
========================================= */

.fas-footer-main {
    display: grid;

    grid-template-columns:
        1.65fr
        1fr
        0.85fr
        1.15fr;

    gap: 55px;

    padding-bottom: 35px;
}


/* =========================================
   BRAND
========================================= */

.fas-footer-brand {
    max-width: 300px;
}


.fas-footer-logo {
    display: inline-block;

    color: #ffffff;

    font-size: 25px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.035em;
}


.fas-footer-logo span {
    color: var(--fas-pink);
}


.fas-footer-description {
    max-width: 270px;

    margin: 14px 0 0;

    color: rgba(255, 255, 255, 0.63);

    font-size: 14px;

    font-weight: 500;

    line-height: 1.65;
}


/* =========================================
   SOCIAL ICONS
========================================= */

.fas-footer-socials {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 20px;
}


.fas-footer-social {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 50%;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.fas-footer-social:hover {
    background: var(--fas-pink);

    border-color: var(--fas-pink);

    transform: translateY(-2px);
}


.fas-footer-social img {
    display: block;

    width: 14px;
    height: 14px;

    object-fit: contain;

    filter: brightness(0) invert(1);
}


/* =========================================
   FOOTER COLUMNS
========================================= */

.fas-footer-column h3 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.2;
}


.fas-footer-column ul {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.fas-footer-column li {
    margin: 0;
    padding: 0;
}


.fas-footer-column li a {
    display: inline-flex;

    align-items: center;

    color: rgba(255, 255, 255, 0.58);

    font-size: 14px;

    font-weight: 500;

    line-height: 1.4;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.fas-footer-column li a:hover {
    color: #ffffff;

    transform: translateX(2px);
}


/* =========================================
   CONNECT
========================================= */

.fas-footer-connect ul {
    gap: 9px;
}


.fas-footer-connect li a {
    gap: 8px;
}


.fas-footer-contact-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    color: rgba(255, 255, 255, 0.70);

    font-size: 11px;
}


.fas-footer-contact-icon img {
    display: block;

    width: 13px;
    height: 13px;

    object-fit: contain;

    filter: brightness(0) invert(1);

    opacity: 0.72;
}


/* =========================================
   BOTTOM
========================================= */

.fas-footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.10);
}


.fas-footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.43);

    font-size: 14px;

    font-weight: 500;

    line-height: 1.4;
}


.fas-footer-made {
    display: flex;

    align-items: center;

    gap: 4px;
}


.fas-footer-made img {
    display: inline-block;

    width: 11px;
    height: 11px;

    object-fit: contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(32%)
        sepia(90%)
        saturate(3300%)
        hue-rotate(315deg)
        brightness(101%)
        contrast(101%);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .fas-footer-main {
        grid-template-columns:
            1.5fr
            1fr
            1fr
            1.2fr;

        gap: 30px;
    }

}


/* =========================================
   SMALL TABLET
========================================= */

@media (max-width: 767px) {

    .fas-footer {
        padding: 42px 0 20px;
    }

    .fas-footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 35px 25px;

        padding-bottom: 30px;
    }

    .fas-footer-brand {
        max-width: 100%;

        grid-column: 1 / -1;
    }

    .fas-footer-description {
        max-width: 330px;
    }

    .fas-footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

    .fas-footer {
        padding: 38px 0 18px;
    }

    .fas-footer-main {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .fas-footer-brand {
        grid-column: auto;
    }

    .fas-footer-logo {
        font-size: 16px;
    }

    .fas-footer-description {
        font-size: 11px;
    }

    .fas-footer-column h3 {
        margin-bottom: 12px;

        font-size: 12px;
    }

    .fas-footer-column ul {
        gap: 7px;
    }

    .fas-footer-column li a {
        font-size: 10px;
    }

    .fas-footer-bottom {
        padding-top: 16px;
    }

    .fas-footer-bottom p {
        font-size: 8px;
    }

}