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

.facilities{
    padding:100px 20px;
    background:#ffffff;
}

.facilities .container{
    max-width:1200px;
    margin:auto;
}


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

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    color:#6d1021;
    font-weight:700;
    letter-spacing:2px;
    font-size:14px;
}

.section-title h2{
    margin:15px 0;
    font-size:42px;
    color:#222;
}

.section-title p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.8;
}


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

.facility-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
}


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

.facility-card{
    background:#fff;
    padding:35px 25px;
    border-radius:20px;
    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

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

    border-top:4px solid transparent;

    /* IMPORTANT */
    cursor:pointer;

    /* Remove any text decoration */
    text-decoration:none !important;

    /* Prevent selection look */
    user-select:none;
}


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

.facility-card:hover{
    transform:translateY(-10px);
    border-top-color:#6d1021;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}


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

.facility-icon{
    width:80px;
    height:80px;

    margin:0 auto 20px;

    background:#6d1021;

    border-radius:50%;

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

    font-size:36px;

    text-decoration:none !important;
}


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

.facility-card h3{
    color:#6d1021;

    margin:0 0 12px;

    font-size:22px;

    text-decoration:none !important;
}


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

.facility-card p{
    color:#666;

    margin:0;

    line-height:1.8;

    font-size:15px;

    text-decoration:none !important;
}


/* ==========================
   REMOVE TEXT DECORATION
========================== */

.facility-card,
.facility-card h3,
.facility-card p,
.facility-card div{
    text-decoration:none !important;
}


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

@media(max-width:992px){

    .facility-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


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

@media(max-width:768px){

    .facilities{
        padding:70px 15px;
    }

    .section-title h2{
        font-size:30px;
    }

    .facility-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .facility-card{
        padding:30px 20px;
    }

}


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

@media(max-width:480px){

    .section-title h2{
        font-size:26px;
    }

    .section-title p{
        font-size:14px;
    }

    .facility-icon{
        width:70px;
        height:70px;
        font-size:30px;
    }

    .facility-card h3{
        font-size:20px;
    }

}