/*==================================================
SERVICES PREVIEW
==================================================*/

.services-preview{

    padding:110px 0;

    background:#fcfbff;

}

.services-preview .container{

    max-width:1200px;

    margin:auto;

    padding:0 20px;

}

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

.section-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-heading .section-tag{

    display:inline-block;

    padding:8px 22px;

    border-radius:40px;

    background:#f3efff;

    color:#6d28d9;

    font-weight:700;

    font-size:.95rem;

    margin-bottom:22px;

}

.section-heading h2{

    font-size:2.7rem;

    color:#241c44;

    line-height:1.2;

    margin-bottom:22px;

}

.section-heading p{

    color:#666;

    font-size:1.08rem;

    line-height:1.95;

}

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

.services-preview-grid{

    display:grid;

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

    gap:35px;

    align-items:stretch;

}

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

.service-preview-card{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    position:relative;

    z-index:1;

    height:100%;

    background:#fff;

    border:1px solid rgba(109,40,217,.08);

    border-radius:28px;

    padding:45px;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

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

    position:relative;

    overflow:hidden;

}

/*==================================================
ACCENT COLORS
==================================================*/

.service-preview-card.love{

    border-top:5px solid #f3a4c5;

}

.service-preview-card.finance{

    border-top:5px solid #d8b14b;

}

.service-preview-card.protection{

    border-top:5px solid #8b92ff;

}

.service-preview-card.guidance{

    border-top:5px solid #b48cff;

}

/*==================================================
PREMIUM GLOW
==================================================*/

.service-preview-card::before{

    content:"";

    position:absolute;

    top:-110px;

    right:-110px;

    width:240px;

    height:240px;

    border-radius:50%;

    filter:blur(75px);

    opacity:.35;

    transition:.45s ease;

    pointer-events:none;

    z-index:-1;

}

/* Love */

.service-preview-card.love::before{

    background:#f8b7d2;

}

/* Finance */

.service-preview-card.finance::before{

    background:#f2d27a;

}

/* Protection */

.service-preview-card.protection::before{

    background:#a7b0ff;

}

/* Guidance */

.service-preview-card.guidance::before{

    background:#ccb3ff;

}

.service-preview-card:hover::before{

    opacity:.60;

    transform:scale(1.25);

}

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

.service-preview-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 55px rgba(0,0,0,.10);

}

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

.service-icon{

    width:78px;

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:2rem;

    margin-bottom:28px;

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

}

/*==================================================
PREMIUM ICON COLORS
==================================================*/

.love .service-icon{

    background:linear-gradient(180deg,#ffffff,#fde7f1);

    box-shadow:
        0 10px 25px rgba(236,72,153,.15),
        inset 0 1px 2px rgba(255,255,255,.9);

}

.finance .service-icon{

    background:linear-gradient(180deg,#ffffff,#fff3d5);

    box-shadow:
        0 10px 25px rgba(245,158,11,.15),
        inset 0 1px 2px rgba(255,255,255,.9);

}

.protection .service-icon{

    background:linear-gradient(180deg,#ffffff,#edf0ff);

    box-shadow:
        0 10px 25px rgba(99,102,241,.15),
        inset 0 1px 2px rgba(255,255,255,.9);

}

.guidance .service-icon{

    background:linear-gradient(180deg,#ffffff,#f3ecff);

    box-shadow:
        0 10px 25px rgba(139,92,246,.15),
        inset 0 1px 2px rgba(255,255,255,.9);

}

.service-preview-card:hover .service-icon{

    transform:translateY(-5px) scale(1.08) rotate(-4deg);

}

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

.service-preview-card h3{

    color:#241c44;

    font-size:1.40rem;

    font-weight:700;

    line-height:1.3;

    margin-bottom:18px;

}

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

.service-preview-card p{

    color:#666;

    font-size:1.03rem;

    line-height:1.95;

    margin-bottom:0;

}

/*==================================================
WHATSAPP LINK
==================================================*/

.service-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:auto;

    padding-top:30px;

    color:#6d28d9;

    text-decoration:none;

    font-weight:700;

    transition:.3s ease;

}

.service-link:hover{

    color:#4f46e5;

    transform:translateX(6px);

}

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

.section-button{

    margin-top:75px;

    text-align:center;

}

.section-button .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 38px;

    border-radius:40px;

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;

}

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

@media(max-width:992px){

.services-preview{

    padding:90px 0;

}

.services-preview-grid{

    gap:28px;

}

.service-preview-card{

    padding:36px;

}

.section-heading h2{

    font-size:2.3rem;

}

}

@media(max-width:768px){

.services-preview{

    padding:80px 0;

}

.section-heading{

    margin-bottom:45px;

}

.section-heading h2{

    font-size:2rem;

}

.section-heading p{

    font-size:1rem;

}

.services-preview-grid{

    grid-template-columns:1fr;

}

.service-preview-card{

    align-items:center;

    text-align:center;

}

.service-icon{

    margin:0 auto 28px;

}

.service-link{

    justify-content:center;

}

}

@media(max-width:480px){

.services-preview{

    padding:70px 0;

}

.service-preview-card{

    padding:28px 22px;

}

.section-heading h2{

    font-size:1.75rem;

}

}