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

.luxury-features{

    padding:140px 8%;

    background:#0d0d0d;

    position:relative;

    overflow:hidden;

}

.luxury-features::before{

    content:"";

    position:absolute;

    left:-250px;

    top:-250px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:

            radial-gradient(

                    rgba(199,162,94,.14),

                    transparent 70%

            );

}

.luxury-features::after{

    content:"";

    position:absolute;

    right:-250px;

    bottom:-250px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

            radial-gradient(

                    rgba(199,162,94,.08),

                    transparent 70%

            );

}

.features-heading{

    text-align:center;

    margin-bottom:90px;

    position:relative;

    z-index:2;

}

.features-heading span{

    color:#c7a25e;

    letter-spacing:6px;

    font-size:14px;

}

.features-heading h2{

    color:#fff;

    font-size:60px;

    margin:20px 0;

}

.features-heading h2 span{

    color:#c7a25e;

}

.features-heading p{

    color:#aaa;

    font-size:18px;

    line-height:2;

}
/*=========================================
            FEATURE GRID
==========================================*/

.features-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

    position:relative;

    z-index:2;

}

/*==============================*/

.feature-card{

    position:relative;

    overflow:hidden;

    padding:55px 35px;

    border-radius:28px;

    text-align:center;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    transition:.45s;

    cursor:pointer;

}

/* نور طلایی داخل کارت */

.feature-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:radial-gradient(

            rgba(199,162,94,.18),

            transparent 70%

    );

    top:-180px;

    left:-180px;

    transition:.6s;

}

.feature-card:hover::before{

    top:-80px;

    left:-80px;

}

/* خط طلایی پایین کارت */

.feature-card::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    background:#C7A25E;

    transform:translateX(-50%);

    transition:.45s;

}

.feature-card:hover::after{

    width:100%;

}

/*==============================*/

.feature-card:hover{

    transform:translateY(-14px);

    border-color:#C7A25E;

    box-shadow:

            0 30px 70px rgba(0,0,0,.45),

            0 0 40px rgba(199,162,94,.15);

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

.feature-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

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

    border:1px solid rgba(199,162,94,.25);

    color:#C7A25E;

    margin-bottom:35px;

    transition:.5s;

}

.feature-card:hover .feature-icon{

    background:#C7A25E;

    color:#111;

    transform:rotateY(360deg) scale(1.08);

}

/*==============================*/

.feature-card h3{

    color:#fff;

    font-size:28px;

    margin-bottom:18px;

    transition:.35s;

}

.feature-card:hover h3{

    color:#C7A25E;

}

.feature-card p{

    color:#b8b8b8;

    line-height:2;

    font-size:16px;

}
/*=========================================
            SHINE
==========================================*/

.feature-card .shine{

    display:none;

}

.feature-card{

    isolation:isolate;

}

.feature-card span{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.feature-card span::before{

    content:"";

    position:absolute;

    width:90px;

    height:180%;

    top:-40%;

    left:-120px;

    background:

            rgba(255,255,255,.12);

    transform:rotate(25deg);

    transition:1s;

}

.feature-card:hover span::before{

    left:140%;

}
/*=========================================
        PREMIUM EFFECTS
==========================================*/

/* خط طلایی بالای هر کارت */

.feature-card .top-line{

    position:absolute;
    top:0;
    left:50%;
    width:0;
    height:2px;
    background:linear-gradient(to right,#8d6b32,#e4c78b,#8d6b32);
    transform:translateX(-50%);
    transition:.5s;

}

.feature-card:hover .top-line{

    width:100%;

}

/* دایره نور پشت آیکون */

.feature-icon::before{

    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    background:radial-gradient(rgba(199,162,94,.25),transparent 70%);
    opacity:0;
    transition:.5s;

}

.feature-card:hover .feature-icon::before{

    opacity:1;

}

/* متن کارت */

.feature-card h3{

    transition:.35s;

}

.feature-card p{

    transition:.35s;

}

.feature-card:hover p{

    color:#ececec;

}

/* انیمیشن شناور */

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

.feature-card{

    animation:floatCard 7s ease-in-out infinite;

}

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

    animation-delay:.4s;

}

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

    animation-delay:.8s;

}

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

    animation-delay:1.2s;

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

@media(max-width:1200px){

    .features-grid{

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

    }

}

@media(max-width:768px){

    .luxury-features{

        padding:90px 20px;

    }

    .features-heading h2{

        font-size:42px;

    }

    .features-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .feature-card{

        padding:40px 25px;

    }

    .feature-card h3{

        font-size:24px;

    }

    .feature-icon{

        width:75px;
        height:75px;
        font-size:30px;

    }

}

@media(max-width:480px){

    .features-heading h2{

        font-size:34px;

    }

    .features-heading p{

        font-size:15px;

    }

    .feature-card{

        padding:35px 20px;

    }

}