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

.services-section{
    position:relative;
    padding:120px 0;
    overflow:hidden;
    background:
    linear-gradient(
        180deg,
        #FCFAF7 0%,
        #F8F6F2 100%
    );
}

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

.services-section::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    left:-250px;
    top:-150px;

    border-radius:50%;

    background:rgba(205,224,236,.25);

    filter:blur(90px);

}

.services-section::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-180px;
    bottom:-180px;

    border-radius:50%;

    background:rgba(201,169,106,.10);

    filter:blur(90px);

}

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

.section-heading{

    max-width:720px;

    margin:0 auto 70px;

}

.section-heading .section-title{

    margin:15px 0 20px;

}

.section-heading .section-description{

    max-width:620px;

    margin:auto;

}

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

.services-section .row{
    align-items:stretch;
}

.service-card{

    position:relative;

    height:100%;

    min-height:100%;

    padding:40px 32px 32px;

    border-radius:28px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(201,169,106,.12);

    box-shadow:0 16px 40px rgba(55,75,95,.06);

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

    overflow:hidden;

    display:flex;

    flex-direction:column;

}

/* Smoky Highlight */

.service-card::before{

    content:"";

    position:absolute;

    top:-60px;

    right:-60px;

    width:160px;

    height:160px;

    border-radius:50%;

    background:rgba(197,221,236,.28);

    filter:blur(30px);

    transition:transform .45s ease, opacity .45s ease;

    pointer-events:none;

}

.service-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:var(--gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .4s ease;

}

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

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 55px rgba(55,75,95,.12);

    border-color:rgba(201,169,106,.35);

}

.service-card:hover::before{

    transform:scale(1.25);

    opacity:.85;

}

.service-card:hover::after{

    transform:scaleX(1);

}

/*=========================================
FEATURED CARD — same height as others
=========================================*/

.featured-card{

    background:rgba(255,255,255,.85);

    border:1px solid rgba(201,169,106,.22);

    transform:none;

}

.featured-card:hover{

    transform:translateY(-10px);

}

/*=========================================
BADGE
=========================================*/

.service-badge{

    position:absolute;

    top:18px;

    right:18px;

    z-index:2;

    padding:6px 14px;

    border-radius:50px;

    background:#fff;

    color:var(--gold);

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    box-shadow:0 6px 16px rgba(0,0,0,.06);

}

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

.service-icon{

    width:88px;

    height:88px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 22px;

    border-radius:50%;

    background:#fff;

    border:1px solid rgba(201,169,106,.12);

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

    transition:transform .4s ease;

    flex-shrink:0;

}

.service-icon img{

    width:46px;

    height:46px;

    object-fit:contain;

    transition:transform .4s ease;

}

.service-card:hover .service-icon{

    transform:translateY(-4px);

}

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

    transform:scale(1.08);

}

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

.service-card h4{

    margin-bottom:12px;

    font-size:26px;

    line-height:1.25;

    color:#2D392B;

    text-align:center;

    min-height:2.5em;

    display:flex;

    align-items:center;

    justify-content:center;

}

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

.service-card p{

    margin-bottom:0;

    color:var(--text);

    min-height:4.8em;

    line-height:1.7;

    text-align:center;

    font-size:15px;

    flex-grow:1;

}

/*=========================================
PRICE
=========================================*/

.service-price{

    margin:0 auto 14px;

    color:var(--gold);

    font-size:30px;

    font-family:'Cormorant Garamond',serif;

    font-weight:700;

    text-align:center;

    line-height:1.2;

    min-height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    flex-wrap:wrap;

}

.service-price span,
.service-price .service-price-label{

    font-size:14px;

    color:var(--text);

    font-family:'Manrope',sans-serif;

    font-weight:500;

}

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

.service-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:14px;

    border-radius:60px;

    background:var(--gold);

    color:#fff;

    font-weight:600;

    transition:.35s;

    text-decoration:none;

}

.service-btn:hover{

    background:var(--gold-dark);

    color:#fff;

    transform:translateY(-2px);

}

/*=========================================
CARD ACTIONS (Learn More + Book)
=========================================*/

.service-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:22px;
    width:100%;
}

.service-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--gold);
    font-weight:600;
    font-size:14px;
    transition:.3s;
    text-decoration:none;
}

.service-link:hover{
    color:var(--gold-dark);
    gap:12px;
}

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

@media(max-width:1199px){

.service-card{

    padding:35px 28px;

}

.service-card h4{

    font-size:26px;

}

}

@media(max-width:991px){

.services-section{

    padding:90px 0;

}

.featured-card{

    transform:none;

}

.featured-card:hover{

    transform:translateY(-12px);

}

}

@media(max-width:767px){

.section-heading{

    margin-bottom:50px;

}

.service-card{

    padding:30px 25px;

}

.service-card h4{

    font-size:24px;

}

.service-card p{

    min-height:auto;

}

.service-icon{

    width:75px;

    height:75px;

}

.service-icon img{

    width:38px;

}

}


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

.service-card{

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

}

.service-card:hover{

    background:rgba(226,236,244,.32);

}

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

.service-icon{

    transition:.45s ease;

}

.service-card:hover .service-icon{

    transform:rotate(8deg) scale(1.08);

    background:#ffffff;

}

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

.service-card h4{

    transition:.35s;

}

.service-card:hover h4{

    color:var(--gold);

}

/*=========================================
PRICE
=========================================*/

.service-price{

    transition:.35s;

}

.service-card:hover .service-price{

    letter-spacing:1px;

}

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

.service-btn{

    position:relative;

    overflow:hidden;

}

.service-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:rgba(255,255,255,.25);

    transform:skewX(-30deg);

    transition:.6s;

}

.service-btn:hover::before{

    left:130%;

}

/*=========================================
BORDER GLOW
=========================================*/

.service-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    border:1px solid transparent;

    transition:.35s;

    pointer-events:none;

}

.service-card:hover::after{

    border-color:rgba(201,169,106,.30);

}

/*=========================================
ENTRANCE ANIMATION
=========================================*/

.service-card{

    animation:fadeUp .8s ease both;

}

.service-card:nth-child(2){

    animation-delay:.1s;

}

.service-card:nth-child(3){

    animation-delay:.2s;

}

.service-card:nth-child(4){

    animation-delay:.3s;

}

.service-card:nth-child(5){

    animation-delay:.4s;

}

.service-card:nth-child(6){

    animation-delay:.5s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:991px){

.service-card{

    min-height:auto;

}

.service-icon{

    width:80px;

    height:80px;

}

.service-icon img{

    width:40px;

}

}

@media(max-width:767px){

.services-section{

    padding:80px 0;

}

.section-heading{

    margin-bottom:45px;

}

.service-card{

    text-align:center;

}

.service-icon{

    margin-inline:auto;

}

.service-price{

    font-size:28px;

}

}

@media(max-width:576px){

.service-card{

    padding:28px 22px;

    border-radius:24px;

}

.service-card h4{

    font-size:22px;

}

.service-btn{

    width:100%;

}

}