/*
==================================================
PORTAL EMAIL POLTESA V4
FILE : assets/css/home.css
KHUSUS LANDING PAGE
==================================================
*/



/* ==================================================
HERO
================================================== */

.hero{

    min-height:650px;

    padding:120px 0 80px;

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-image:
    linear-gradient(
        90deg,
        rgba(22,78,205,.88) 0%,
        rgba(37,99,235,.72) 45%,
        rgba(37,99,235,.35) 100%
    ),
    url("../img/logo/gedung.png");

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

}

.hero .container{

    position:relative;

    z-index:10;

}

/* ==================================================
TEXT
================================================== */

.hero-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

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

    color:#fff;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.hero h1{

    color:#fff;

    font-size:72px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:25px;

}

.hero p{

    color:rgba(255,255,255,.95);

    font-size:22px;

    line-height:1.9;

    max-width:650px;

    margin-bottom:40px;

}

/* ==================================================
BUTTON
================================================== */

.hero-button{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-button .btn{

    padding:16px 34px;

    border-radius:50px;

    font-weight:700;

    font-size:17px;

}

.hero-button .btn-primary{

    background:#fff;

    color:#2563eb;

    border:none;

}

.hero-button .btn-primary:hover{

    background:#f3f4f6;

}

.hero-button .btn-outline-light{

    border:2px solid #fff;

    color:#fff;

}

.hero-button .btn-outline-light:hover{

    background:#fff;

    color:#2563eb;

}

/* ==================================================
INFO
================================================== */

.hero-info{

    margin-top:45px;

    display:flex;

    gap:35px;

    flex-wrap:wrap;

}

.hero-info div{

    color:#fff;

    font-weight:600;

}

.hero-info span{

    display:block;

    font-size:15px;

    color:rgba(255,255,255,.80);

}

/* ==================================================
CARD USER
================================================== */

.user-section{

    padding:90px 0;

    background:#fff;

}

.user-card{

    border-radius:20px;

    background:#fff;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    padding:40px 30px;

    transition:.30s;

    text-align:center;

    height:100%;

}

.user-card:hover{

    transform:translateY(-10px);

}

.user-card img{

    width:85px;

    margin-bottom:20px;

}

.user-card h4{

    font-weight:700;

    margin-bottom:15px;

}

.user-card p{

    color:#64748b;

    min-height:70px;

}

/* ==================================================
FEATURE
================================================== */

.feature{

    background:#0f3fa8;

    color:#fff;

    padding:70px 0;

}

.feature-item{

    text-align:center;

}

.feature-item i{

    font-size:45px;

    margin-bottom:20px;

}

.feature-item h5{

    font-weight:700;

}

.feature-item p{

    opacity:.85;

}

/* ==================================================
CTA
================================================== */

.cta{

    padding:90px 0;

    background:#f8fafc;

}

.cta-box{

    background:#fff;

    border-radius:24px;

    padding:60px;

    box-shadow:0 20px 40px rgba(0,0,0,.08);

    text-align:center;

}

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

@media(max-width:992px){

.hero{

    min-height:auto;

    padding:140px 0 100px;

}

.hero h1{

    font-size:52px;

}

.hero p{

    font-size:18px;

}

}

@media(max-width:768px){

.hero{

    text-align:center;

}

.hero h1{

    font-size:40px;

}

.hero p{

    font-size:16px;

}

.hero-button{

    justify-content:center;

}

.hero-info{

    justify-content:center;

}

.cta-box{

    padding:35px;

}

}