/*  
 *  FingoHub Main Stylesheet
 *  November, 2025
 *  All rights reserved.
 *
 *  
 *  Index:
 *   - Definition: Body;
 *   - Definition: Color classes;
 *   - Definition: Estructure;
 *   - Definition: Typography;
 *   - Definition: Buttons;
 *
 *   - Section: Home;
 *   - Section: Testimonials;
 *   - Section: About us;
 *   - Section: Packages & Benefits;
 *   - Section: FAQ's;
 *   - Section: Contact;
*/

:root {
    --purple-10: #F0E6F9;
    --purple-20: #F0E3FE;
    --purple-30: #E0C5FC;
    --purple-60: #6D25B5;
    --purple-80: #3A165F;

    --white: #FFFFFF;
    --black: #000000;
    --gray-10: #F7F7F8;
    --gray-20: #EFEFF0;
    --gray-30: #D8D8DB;
    --gray-60: #73737C;
    --error: #a9020b;

    --bg-form: rgba(247,247,248, 0.75);
    --gradient-gray: linear-gradient(to bottom, #ffffff 40%, #A9A9AF 100%);
    --gradient-vertical: linear-gradient(to bottom, rgba(109,37,181,0.1) 0%, rgba(255,255,255,0.1) 100%);
    --gradient-horizontal: linear-gradient(to right, rgba(109,37,181,0.2) 0%, rgba(109,37,181,1) 100%);
    --focus: 0px 0px 8px var(--purple-30);
    --dropdown-menu: 0px 0px 8px var(--gray-30);
}

/* "Kids, you tried your best and you failed miserably. The lesson is, never try."
    - Homer Simpson
 */


/* ==========================================
 * Definition: Body;
 * ========================================== */
html {
    position: relative;
    min-height: 100%;
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: default;
    color: var(--black);
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    background-color: var(--white);
}
main {
    flex: 1;
}
.container { padding: 0 24px; }


/* ==========================================
 * Definition: Color classes;
 * ========================================== */
/* ---- Text color ---- */
.text-purple { color: var(--purple-60); }
.text-gradient {
    background: var(--gradient-gray);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- Background color ---- */
.bg-gray { background-color: var(--gray-10); }
.bg-gray-20 { background-color: var(--gray-20)!important; }
.bg-black-opacity { background-color: var(--bg-black-light); } /* form  */
.bg-gradient-light { background: var(--gradient-vertical); }
.bg-box {
    background-color: var(--gray-10);
    border: 1px solid var(--purple-60);
    border-radius: 16px!important;
}

/* ---- Background image ---- */
.bg-img-purple {
    background-image: url(https://9034113.fs1.hubspotusercontent-na1.net/hubfs/9034113/FingoHub/bg-gradient.png);
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* ==========================================
 * Definition: Estructure;
 * ========================================== */
/* ---- CUSTOM: TAGS ---- */
.tag {
    display: block;
    margin: 0 auto;
    padding: 8px 16px;
    width: fit-content;
    color: var(--purple-60);
    background-color: var(--purple-20);
    border: 1px solid var(--purple-60);
    border-radius: 24px;
}

/* ---- BOOTSTRAP: PADDING ---- */
.pt-10 { padding-top: 6rem !important; }
.pb-10 { padding-bottom: 6rem !important; }
.py-10 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.py-8 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
@media (max-width: 991px) {
    .pt-10 { padding-top: 4.5rem !important; }
    .pb-10 { padding-bottom: 4.5rem !important; }
    .py-10 {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }
}


/* ==========================================
 * Definition: Typography;
 * ========================================== */
h1 {
    margin: 0;
    font-size: 56px;
    line-height: 64px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}
@media all and (max-width: 767px) {
    h1 { font-size: 40px; line-height: 48px; }
}
h2 {
    margin: 0;
    font-size: 40px;
    line-height: 48px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}
@media all and (max-width: 767px) {
    h2 { font-size: 32px; line-height: 40px; }
}
h3 {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}
@media all and (max-width: 767px) {
    h3 { font-size: 28px; line-height: 32px; }
}
h4 {
    margin: 0;
    font-size: 28px;
    line-height: 32px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}
@media all and (max-width: 767px) {
    h4 { font-size: 24px; line-height: 28px; }
}
h5 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}
@media all and (max-width: 767px) {
    h5 { font-size: 18px; line-height: 24px; }
}
h6 {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}
p, ul { margin: 0; padding: 0; }
p, ul li {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}
.text-small {
    font-size: 14px!important;
    line-height: 18px!important;
}
.material-symbols-rounded {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

ul.simple-list { list-style-type: none; }
ul.simple-list li { position: relative; padding-left: 24px; }
ul.simple-list li:not(:last-child) { margin-bottom: 8px; }
ul.simple-list li::before {
    content: 'arrow_right_alt';
    font-family: 'Material Symbols Rounded';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--purple-60);
    font-size: 20px;
}


/* ==========================================
 * Definition: Buttons;
 * ========================================== */
/* ---- GROUP: ANCHORS; ---- */
a:not(.button),
a:not(.button):visited {
    display: inline-block;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    transition: 0.3s;
}
a.disabled { opacity: .5; cursor: not-allowed; }
a:focus,
a:focus-visible {
    outline: var(--purple-30) auto 1px !important;
    box-shadow: var(--focus); !important;
}

/* ---- Main ---- */
a:not(.button).link-main,
a:not(.button).link-main:visited {
    color: var(--black);
    text-decoration: none;
}
a:not(.button).link-main:not(.disabled):active,
a:not(.button).link-main:not(.disabled):hover {
    color: var(--purple-60);
    text-decoration: underline;
}

/* ---- Secondary ---- */
a:not(.button).link-secondary,
a:not(.button).link-secondary:visited {
    color: var(--purple-60)!important;
    text-decoration: underline;
}
a:not(.button).link-secondary:not(.disabled):active,
a:not(.button).link-secondary:not(.disabled):hover {
    color: var(--purple-80)!important;
    text-decoration: underline;
}

/* ---- GROUP: BUTTONS; ---- */
.button, .hs-button {
    position: relative;
    display: inline-block;
    margin: 0;
    min-width: 120px;
    padding: 8px 16px;

    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    text-decoration: none;

    border: none;
    border-radius: 32px;
    transition: 0.3s;
}
.button:hover,
.hs-button:hover { text-decoration: none!important; }
.button:disabled,
.hs-button:disabled { opacity: .4; cursor: not-allowed; }
.button:focus,
.button:focus-visible,
.hs-button:focus,
.hs-button:focus-visible {
    outline: var(--purple-30) auto 1px !important;
    box-shadow: var(--focus); !important;
}

/* ---- Filled ---- */
.button.button-primary,
.hs-button { color: var(--white); background-color: var(--purple-60); }
.button.button-primary:hover,
.hs-button:hover { color: var(--white); background-color: var(--purple-80); }


/* ==========================================
 * Section: Home;
 * ========================================== */
#index .brand { width: 80%; max-width: 240px; }
#thanks img { width: 100%; max-width: 360px; }
@media (max-width: 991px) {
    #thanks img { margin-bottom: 24px; max-width: 200px; }
}


/* ==========================================
 * Section: Testimonials;
 * ========================================== */
/* ---- GROUP: CAROUSEL ---- */
.list-clients div.slick-slide { text-align: center; }
.list-clients .img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 16px;
    padding: 8px 16px;
    height: 100px;
}
.list-clients .img-container:not(:last-child) { margin-bottom: 24px; }
.list-clients img {
    display: inline-block;
    width: auto;
    max-width: 160px;
    max-height: 60px;
}

@media (max-width: 991px) {
    .list-clients img { width: 100%!important; max-width: 100%!importan; }
}
@media (max-width: 767px) {
    .list-clients .img-container { margin: 0 8px; }
}


/* ==========================================
 * Section: About us;
 * ========================================== */
.list-attributes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 24px;
    row-gap: 56px;
    list-style-type: none;
}
.list-attributes li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-gap: 16px;
    width: 280px;
    text-align: left;
}
.list-attributes li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 2px 0;
    text-align: center;
    background-color: var(--purple-60);
    border-radius: 40px;
}
.list-attributes li .icon img { widht: auto; max-width: 24px; max-height: 24px; }

@media (min-width: 1400px) {
    .list-attributes li { width: calc(90%/3); }
}
@media (max-width: 767px) {
    .list-attributes { row-gap: 32px; }
    .list-attributes li { width: 100%; }
}


/* ==========================================
 * Section: Packages & Benefits;
 * ========================================== */
.list-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    column-gap: 24px;
    row-gap: 16px;
}
#list-deals .bg-box { flex: 1; max-width: 400px; }
#list-benefits .bg-box { flex: 1; max-width: 200px; }
#list-benefits .bg-box img { height: 56px; }

@media (min-width: 576px) and (max-width: 767px) {
    #list-benefits .bg-box { flex: none; }
    #list-benefits .bg-box:first-child { width: 86%; max-width: 100%; }
}

@media (max-width: 575px) {
    .list-cards { flex-direction: column; }
    #list-deals .bg-box { flex: none; max-width: 100%; }
    #list-benefits .bg-box { width: 100%; max-width: 100%; }
}


/* ==========================================
 * Section: FAQ's;
 * ========================================== */
#faq {
    background-image: url(https://9034113.fs1.hubspotusercontent-na1.net/hubfs/9034113/FingoHub/bg-faq.png);
    background-position: bottom left;
    background-size: auto 700px;
    background-repeat: no-repeat;
}

/* ---- GROUP: ACCORDION ---- */
#faq-accordion .accordion-item { border-top: 1px solid var(--purple-60); }
#faq-accordion .accordion-item:not(:last-child) { margin-bottom: 24px; }
#faq-accordion .accordion-button {
    color: var(--black);
    background-color: transparent;
    border-radius: 14px 14px 0 0;
    font-variation-settings:
    'FILL' 1,
    'wght' 700,
    'GRAD' 0,
    'opsz' 24;
    transition: 0s;
}
#faq-accordion .accordion-button:not(.collapsed) { box-shadow: none; }
#faq-accordion .accordion-button::after {
    content: 'add_circle';
    font-family: 'Material Symbols Rounded';
    position: absolute;
    right:16px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    color: var(--purple-60);
    font-size: 24px;
    background: none;
}
#faq-accordion .accordion-button:not(.collapsed)::after {
    content: 'do_not_disturb_on';
}
#faq-accordion .accordion-button:focus,
#faq-accordion .accordion-button:focus-visible {
    box-shadow: none; !important;
}
#faq-accordion .accordion-item:focus-within {
    box-shadow: var(--focus); !important;
}
#faq-accordion .accordion-body {
    padding-top: 0;
    color: var(--gray-60);
    text-align: left;
    border-radius: 0 0 14px 14px;
}

#faq-accordion .bg-box-active {
    background-color: var(--purple-60);
    transition: 0.25s;
}
#faq-accordion .bg-box-active .accordion-body,
#faq-accordion .bg-box-active .accordion-button,
#faq-accordion .bg-box-active .accordion-button::after { color: var(--white); }


/* ==========================================
 * Section: Contact;
 * ========================================== */
.bg-message {
    position: relative;
    padding: 40px 56px 40px 0;
    color: var(--white);
}
.bg-message > * { position: inherit; z-index: 2; }
.bg-message:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 200%;
    height: 100%;
    background: var(--gradient-horizontal);
    border-radius: 0 400px 400px 0;
    z-index: 1;
}