/* =========================================================
   HYRO TECHNOLOGIES FZE
   PRICING PREVIEW

   File:
   /assets/css/pricing.css
========================================================= */

.pricing-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0 105px;

    background:
        radial-gradient(circle at 5% 15%, rgba(229,43,135,.07), transparent 28%),
        radial-gradient(circle at 95% 85%, rgba(132,87,232,.08), transparent 30%),
        #faf9fd;
}

.pricing-section::before {
    content: "";

    position: absolute;
    top: -150px;
    right: -130px;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        rgba(229,43,135,.07),
        rgba(132,87,232,.11)
    );

    pointer-events: none;
}

.pricing-section .container {
    position: relative;
    z-index: 2;
}

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

.pricing-heading {
    max-width: 800px;
    margin: 0 auto 48px;
    text-align: center;
}

.pricing-heading .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;

    color: #d62f83;

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

    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.pricing-heading .eyebrow::before,
.pricing-heading .eyebrow::after {
    content: "";

    width: 24px;
    height: 2px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #e52b87,
        #8b63f5
    );
}

.pricing-heading h2 {
    margin: 0;

    color: #182033;

    font-size: clamp(36px, 4.3vw, 52px);
    line-height: 1.14;

    letter-spacing: -1.7px;
}

.pricing-heading h2 span {
    color: transparent;

    background: linear-gradient(
        100deg,
        #df2b83,
        #8b60eb
    );

    -webkit-background-clip: text;
    background-clip: text;
}

.pricing-heading p {
    max-width: 700px;

    margin: 18px auto 0;

    color: #667085;

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

/* =========================================================
   PRODUCT SWITCH
========================================================= */

.pricing-product-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;

    margin-bottom: 36px;
}

.pricing-product-tab {
    min-height: 46px;
    padding: 0 22px;

    border: 1px solid #dddfea;
    border-radius: 999px;

    background: #ffffff;
    color: #263247;

    font: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.pricing-product-tab.active {
    color: #ffffff;
    border-color: transparent;

    background: linear-gradient(
        135deg,
        #e52b87,
        #855fea
    );

    box-shadow:
        0 10px 25px rgba(194,54,169,.20);
}

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

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));

    gap: 20px;
}

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

.pricing-card {
    position: relative;
    overflow: hidden;

    min-height: 410px;

    padding: 30px 26px;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e5e5ee;
    border-radius: 24px;

    box-shadow:
        0 15px 42px rgba(31,40,70,.06);

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

.pricing-card::after {
    content: "";

    position: absolute;

    right: -55px;
    bottom: -60px;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        rgba(229,43,135,.04),
        rgba(132,87,232,.10)
    );
}

.pricing-card:hover {
    transform: translateY(-8px);

    border-color: rgba(211,51,153,.25);

    box-shadow:
        0 25px 58px rgba(70,45,108,.12);
}

.pricing-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 10px;

    color: #182033;

    font-size: 23px;
}

.pricing-card > p {
    position: relative;
    z-index: 2;

    min-height: 72px;

    margin: 0 0 20px;

    color: #667085;

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

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

.pricing-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

    margin-bottom: 22px;

    display: grid;
    place-items: center;

    color: #ffffff;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #e52b87,
        #855fea
    );

    box-shadow:
        0 12px 26px rgba(194,54,169,.20);

    font-size: 23px;
}

/* =========================================================
   FEATURES
========================================================= */

.pricing-features {
    position: relative;
    z-index: 2;

    margin: 0 0 25px;
    padding: 0;

    list-style: none;
}

.pricing-features li {
    position: relative;

    margin: 11px 0;

    padding-left: 26px;

    color: #4f5d73;

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

.pricing-features li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #e52b87,
        #855fea
    );

    border-radius: 50%;

    font-size: 10px;
}

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

.pricing-card-action {
    position: relative;
    z-index: 2;

    margin-top: auto;
}

.pricing-card-action .btn {
    width: 100%;
}

/* =========================================================
   BUSINESS HIGHLIGHT
========================================================= */

.pricing-card.business {
    border-color: rgba(214,47,131,.34);

    background: linear-gradient(
        145deg,
        #fffafd,
        #f7efff
    );

    box-shadow:
        0 20px 50px rgba(194,54,169,.12);
}

.pricing-badge {
    position: absolute;
    top: 18px;
    right: 18px;

    z-index: 3;

    padding: 6px 10px;

    color: #d62f83;
    background: #ffffff;

    border: 1px solid rgba(214,47,131,.18);
    border-radius: 999px;

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

    text-transform: uppercase;
}

/* =========================================================
   PROFESSIONAL GREEN
========================================================= */

.pricing-card.professional {
    background: linear-gradient(
        145deg,
        #effcf4,
        #e2f9ea
    );

    border-color: rgba(32,179,88,.25);
}

.pricing-card.professional .pricing-icon,
.pricing-card.professional .pricing-features li::before {
    background: linear-gradient(
        135deg,
        #20b358,
        #78cf6a
    );
}

/* =========================================================
   CUSTOM CARD
========================================================= */

.pricing-card.custom {
    background: linear-gradient(
        145deg,
        #f5f3ff,
        #ece7ff
    );

    border-color: rgba(132,87,232,.24);
}

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

.pricing-note {
    margin-top: 38px;

    text-align: center;

    color: #667085;

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

.pricing-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;
}

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

@media (max-width: 980px) {

    .pricing-section {
        padding: 84px 0 90px;
    }

    .pricing-cards {
        grid-template-columns: repeat(2,1fr);
    }
}

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

@media (max-width: 640px) {

    .pricing-section {
        padding: 68px 0 74px;
    }

    .pricing-heading h2 {
        font-size: 35px;
        letter-spacing: -.9px;
    }

    .pricing-product-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pricing-product-tab {
        width: 100%;
    }

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

    .pricing-card {
        min-height: auto;
    }

    .pricing-actions {
        flex-direction: column;
    }

    .pricing-actions .btn {
        width: 100%;
    }
}



/* =========================================================
   PRODUCT PRICING COLOR MODES
========================================================= */

/* GYM */

.pricing-section.pricing-gym
.pricing-product-tab.active {

    background: linear-gradient(
        135deg,
        #748be8,
        #9a64e8
    );

}


/* SPA */

.pricing-section.pricing-spa
.pricing-product-tab.active {

    background: linear-gradient(
        135deg,
        #e52b87,
        #a95ee8
    );

}


/* ACCOUNTING */

.pricing-section.pricing-accounting
.pricing-product-tab.active {

    background: linear-gradient(
        135deg,
        #20b358,
        #73cc6e
    );

}