/*!
 * GamudaLand.net UI Framework
 * File: 12-home-hot-project.css
 * Version: 1.0.0
 * Author: Kai
 */

/* ===============================
   HOT PROJECT SECTION
================================*/

.hot-project,
.section-hot,
.home-hot-project{
    padding:90px 0;
    background:#F7F8FA;
}

.hot-project .section-title,
.section-hot .section-title{
    text-align:center;
    margin-bottom:50px;
}

.hot-project .section-title h2,
.section-hot .section-title h2{
    font-size:42px;
    font-weight:700;
    color:#1F2937;
}

/* Banner */

.hot-project img,
.section-hot img{
    width:100%;
    border-radius:28px;
    display:block;
    transition:transform .6s ease, box-shadow .35s ease;
    box-shadow:0 16px 40px rgba(0,0,0,.08);
}

.hot-project a:hover img,
.section-hot a:hover img{
    transform:scale(1.02);
    box-shadow:0 24px 55px rgba(0,0,0,.14);
}

/* Caption */

.hot-project .caption,
.section-hot .caption{
    position:absolute;
    left:50px;
    bottom:50px;
    color:#fff;
    max-width:520px;
}

.hot-project .caption h2,
.section-hot .caption h2{
    color:#fff;
    font-size:46px;
    line-height:1.15;
    margin-bottom:16px;
    text-shadow:0 4px 24px rgba(0,0,0,.3);
}

.hot-project .caption p,
.section-hot .caption p{
    color:rgba(255,255,255,.92);
    font-size:18px;
    line-height:1.7;
}

/* CTA */

.hot-project .button,
.section-hot .button{
    display:inline-block;
    margin-top:24px;
    background:#C62828;
    color:#fff;
    border-radius:999px;
    padding:14px 30px;
    font-weight:700;
    transition:.3s ease;
    box-shadow:0 12px 28px rgba(198,40,40,.22);
}

.hot-project .button:hover,
.section-hot .button:hover{
    background:#A91F24;
    transform:translateY(-3px);
}

/* Mobile */

@media(max-width:768px){

.hot-project,
.section-hot{
    padding:56px 0;
}

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

.hot-project img,
.section-hot img{
    border-radius:18px;
}

.hot-project .caption,
.section-hot .caption{
    left:24px;
    right:24px;
    bottom:24px;
}

.hot-project .caption h2,
.section-hot .caption h2{
    font-size:28px;
}

.hot-project .caption p,
.section-hot .caption p{
    font-size:15px;
}

}