/*
==================================================
Rumos Answer

Filename : hero.css
File Path: /wp-content/themes/rumos-answer/assets/css/hero.css

Build    : 004-020
Author   : Rumos
==================================================
*/

/* ==========================================
   Hero
========================================== */

.ra-hero{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:calc(100vh - 80px);

    background:#ffffff;

}

.ra-hero-inner{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

/* ==========================================
   Title
========================================== */

.ra-title{

    margin:0;

    line-height:1.08;

    letter-spacing:-2px;

}

.ra-title-dark,
.ra-title-gradient{

    display:block;

    font-size:4.75rem;

    font-weight:800;

}

.ra-title-dark{

    color:#111827;

}

.ra-title-gradient{

    margin-top:10px;

    background:linear-gradient(
        90deg,
        #5B5CF0 0%,
        #6C82FF 50%,
        #53C3FF 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

}

/* ==========================================
   Subtitle
========================================== */

.ra-subtitle{

    max-width:720px;

    margin:34px auto 0;

    color:#6B7280;

    font-size:1.15rem;

    line-height:1.8;

}

/* ==========================================
   Search
========================================== */

.ra-search-form{

    margin-top:50px;

}

/* ==========================================
   Responsive
========================================== */

@media (max-width:992px){

    .ra-title-dark,
    .ra-title-gradient{

        font-size:3.8rem;

    }

}

@media (max-width:768px){

    .ra-hero{

        min-height:auto;

        padding:80px 0;

    }

    .ra-title-dark,
    .ra-title-gradient{

        font-size:2.8rem;

        letter-spacing:-1px;

    }

    .ra-subtitle{

        font-size:1rem;

    }

}