/*==================================================
SERVICES HERO BUTTONS
==================================================*/

.hero-buttons{

    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;

    margin-top:38px;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

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

    min-height:58px;
    padding:0 34px;

    border-radius:999px;

    font-size:.96rem;
    font-weight:700;
    text-decoration:none;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease;

}

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

.hero-buttons .btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff !important;

    border:none;

    box-shadow:
        0 18px 40px rgba(47,102,243,.25);

}

.hero-buttons .btn-primary:hover{

    transform:translateY(-5px);

    color:#fff !important;

    box-shadow:
        0 26px 55px rgba(47,102,243,.35);

}

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

.hero-buttons .btn-secondary{

    background:#fff;

    color:var(--text) !important;

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

    box-shadow:var(--shadow-xs);

}

.hero-buttons .btn-secondary:hover{

    transform:translateY(-5px);

    color:var(--primary) !important;

    border-color:var(--primary);

    box-shadow:var(--shadow);

}

/*==========================================
ACTIVE
==========================================*/

.hero-buttons .btn-primary:active,
.hero-buttons .btn-secondary:active{

    transform:scale(.98);

}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:768px){

    .hero-buttons{

        flex-direction:column;
        width:100%;

    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary{

        width:100%;

    }

}
/*==================================================
SERVICE CARD BUTTON
==================================================*/

.service-link{

    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-top:auto;
    width:max-content;

    padding:14px 22px;

    border-radius:999px;

    background:rgba(47,102,243,.08);
    border:1px solid rgba(47,102,243,.12);

    color:var(--primary) !important;

    font-size:.92rem;
    font-weight:700;
    text-decoration:none;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.service-link svg{

    width:18px;
    height:18px;

    stroke:currentColor;

    transition:
        transform .35s ease;

}

.service-link:hover{

    transform:translateY(-4px);

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border-color:transparent;

    color:#fff !important;

    box-shadow:
        0 16px 36px rgba(47,102,243,.28);

}

.service-link:hover svg{

    transform:translateX(6px);

}

.service-link:active{

    transform:scale(.98);

}

@media(max-width:480px){

    .service-link{

        width:100%;
        justify-content:center;

    }

}
/*==================================================
SERVICES BOTTOM CTA BUTTON
==================================================*/

.services-bottom .btn-primary{

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

    flex-shrink:0;

    min-height:58px;
    padding:0 36px;

    border:none;
    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff !important;

    font-size:.95rem;
    font-weight:700;
    text-decoration:none;

    box-shadow:
        0 18px 42px rgba(47,102,243,.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;

}

.services-bottom .btn-primary:hover{

    transform:translateY(-5px);

    filter:brightness(1.05);

    color:#fff !important;

    box-shadow:
        0 26px 56px rgba(47,102,243,.35);

}

.services-bottom .btn-primary:active{

    transform:scale(.98);

}

@media(max-width:768px){

    .services-bottom .btn-primary{

        width:100%;

    }

}
/*==================================================
FAQ BUTTON
==================================================*/

.faq-question{

    width:100%;

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

    gap:20px;

    padding:24px 28px;

    background:transparent;

    border:none;
    outline:none;

    cursor:pointer;
    text-align:left;

    transition:
        background .35s ease,
        padding .35s ease;

}

.faq-question:hover{

    background:rgba(47,102,243,.04);

}

.faq-question span:first-child{

    color:var(--text);

    font-size:1rem;
    font-weight:600;

    transition:color .35s ease;

}

.faq-question:hover span:first-child{

    color:var(--primary);

}

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

.faq-icon{

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

    flex-shrink:0;

    width:42px;
    height:42px;

    border-radius:50%;

    background:rgba(47,102,243,.08);

    color:var(--primary);

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;

}

.faq-item:hover .faq-icon{

    transform:rotate(90deg);

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:480px){

    .faq-question{

        padding:20px;

    }

    .faq-icon{

        width:38px;
        height:38px;

    }

}
/*==================================================
GLOBAL SERVICES BUTTONS
==================================================*/

.btn-primary,
.btn-secondary{

    display:inline-flex;

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

    gap:12px;

    min-height:58px;

    padding:0 34px;

    border-radius:999px;

    font-size:.95rem;
    font-weight:700;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        filter .35s ease;

}

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

.btn-primary{

    border:none;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff !important;

    box-shadow:
        0 18px 42px rgba(47,102,243,.25);

}

.btn-primary:hover{

    transform:translateY(-5px);

    filter:brightness(1.05);

    color:#fff !important;

    box-shadow:
        0 28px 60px rgba(47,102,243,.35);

}

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

.btn-secondary{

    background:#fff;

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

    color:var(--text) !important;

    box-shadow:var(--shadow-xs);

}

.btn-secondary:hover{

    transform:translateY(-5px);

    border-color:var(--primary);

    background:rgba(47,102,243,.05);

    color:var(--primary) !important;

    box-shadow:var(--shadow);

}

/*==========================================
ACTIVE
==========================================*/

.btn-primary:active,
.btn-secondary:active{

    transform:scale(.98);

}

/*==========================================
FOCUS
==========================================*/

.btn-primary:focus-visible,
.btn-secondary:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(47,102,243,.18),
        0 18px 42px rgba(47,102,243,.22);

}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:768px){

    .btn-primary,
    .btn-secondary{

        width:100%;

    }

}