/*======================================*
        FACILITIES V11
        ISOLATED MODULE
*======================================*/

/*======================================*
        FACILITIES SECTION
*======================================*/

.facilities{
    position:relative;
    width:100%;
    padding:120px 0;
    overflow:hidden;
}


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

.facilities-grid{

    width:100%;
    max-width:1200px;

    margin:0 auto;

    display:grid;

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

    gap:30px;

    align-items:stretch;

}


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

.facility-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    min-height:280px;

    padding:38px 30px;

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

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

    border-radius:24px;

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 18px 45px rgba(0,0,0,.25);

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

}


/*======================================*
        CARD TOP GOLD LINE
*======================================*/

.facility-card::before{

    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:0;
    height:3px;

    border-radius:20px;

    background:#D4AF37;

    transform:translateX(-50%);

    transition:.4s ease;

}

.facility-card:hover::before{

    width:55%;

}


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

.facility-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.40);

    box-shadow:
        0 25px 55px rgba(0,0,0,.38);

}


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

.facility-icon{

    width:72px;
    height:72px;

    display:flex;

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

    margin-bottom:22px;

    border-radius:50%;

    color:#D4AF37;

    background:rgba(212,175,55,.08);

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

    transition:.4s ease;

}


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

.facility-icon i{

    font-size:28px;

    transition:.4s ease;

}


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

.facility-card:hover .facility-icon{

    background:#D4AF37;

    color:#111;

    transform:translateY(-3px);

    box-shadow:
        0 12px 28px rgba(212,175,55,.25);

}

.facility-card:hover .facility-icon i{

    transform:scale(1.08);

}


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

.facility-card h3{

    font-family:"Cinzel",serif;

    font-size:23px;

    font-weight:600;

    line-height:1.3;

    color:#ffffff;

    margin-bottom:14px;

}


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

.facility-card p{

    max-width:290px;

    color:#CFCFCF;

    font-size:15px;

    font-weight:300;

    line-height:1.8;

    margin:0 auto;

}


/*======================================*
        TABLET
*======================================*/

@media (max-width:992px){

    .facilities{

        padding:100px 0;

    }

    .facilities-grid{

        max-width:720px;

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

        gap:25px;

    }

    .facility-card{

        min-height:270px;

        padding:34px 25px;

    }

}


/*======================================*
        MOBILE
*======================================*/

@media (max-width:768px){

    .facilities{

        padding:80px 0;

    }

    .facilities-grid{

        width:calc(100% - 40px);

        grid-template-columns:1fr;

        gap:22px;

    }

    .facility-card{

        min-height:auto;

        padding:32px 24px;

    }

    .facility-card h3{

        font-size:21px;

    }

    .facility-card p{

        max-width:320px;

        font-size:14px;

    }

}


/*======================================*
        SMALL MOBILE
*======================================*/

@media (max-width:480px){

    .facilities{

        padding:70px 0;

    }

    .facilities-grid{

        width:calc(100% - 30px);

        gap:18px;

    }

    .facility-card{

        padding:28px 20px;

    }

    .facility-icon{

        width:64px;
        height:64px;

        margin-bottom:18px;

    }

    .facility-icon i{

        font-size:25px;

    }

}