/* ==========================================================
   GARUDA HOME
   Alpha 0.2

   cards.css
==========================================================*/

/*=========================================================
 SECCIÓN
=========================================================*/

.features{

    padding:110px 25px;

    background:linear-gradient(
        180deg,
        #0b1220 0%,
        #10192d 100%
    );

}

.features .section-title{

    text-align:center;

    margin-bottom:70px;

}

.features .section-title span{

    color:var(--color-gold);

}

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

.features-grid{

    width:min(1200px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}

/*=========================================================
 TARJETAS
=========================================================*/

.feature-card{

    position:relative;

    overflow:hidden;

    padding:45px 35px;

    border-radius:18px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.01)
        );

    border:1px solid rgba(212,175,55,.08);

    transition:.35s;

    box-shadow:

        0 12px 35px rgba(0,0,0,.22);

}

/* Línea superior */

.feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--color-gold),
            transparent
        );

    opacity:.25;

}

/* Glow */

.feature-card::after{

    content:"";

    position:absolute;

    inset:-120px;

    background:

        radial-gradient(circle,
            rgba(212,175,55,.10),
            transparent 65%);

    opacity:0;

    transition:.40s;

}

/* Hover */

.feature-card:hover{

    transform:translateY(-10px);

    border-color:

        rgba(212,175,55,.30);

    box-shadow:

        0 22px 55px rgba(0,0,0,.35);

}

.feature-card:hover::after{

    opacity:1;

}

/*=========================================================
 ICONO
=========================================================*/

.feature-icon{

    font-size:54px;

    margin-bottom:30px;

    filter:

        drop-shadow(
            0 0 12px rgba(212,175,55,.25)
        );

}

/*=========================================================
 TITULO
=========================================================*/

.feature-card h3{

    margin-bottom:20px;

    color:white;

    font-size:1.35rem;

    font-weight:600;

    letter-spacing:1px;

}

/*=========================================================
 TEXTO
=========================================================*/

.feature-card p{

    color:var(--color-muted);

    line-height:1.8;

    font-size:.98rem;

}

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

@media(max-width:900px){

.features{

    padding:90px 20px;

}

.features-grid{

    gap:25px;

}

}

@media(max-width:650px){

.feature-card{

    padding:35px 25px;

}

.feature-icon{

    font-size:44px;

}

.feature-card h3{

    font-size:1.2rem;

}

}