/*
|--------------------------------------------------------------------------
| About Hero
|--------------------------------------------------------------------------
*/

.about-hero{

    padding:70px 0;

    background:#F8FAFC;

}

.about-hero-card{

    background:linear-gradient(135deg,#16213E,#0F3460);

    border-radius:30px;

    padding:70px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}

/* ---------- Force White Heading ---------- */

.about-hero-card h1{

    color:#FFFFFF !important;

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    margin:25px auto;

    max-width:900px;

}

/* ---------- Force White Paragraph ---------- */

.about-hero-card p{

    color:rgba(255,255,255,.90) !important;

    max-width:800px;

    margin:0 auto 40px;

    font-size:18px;

    line-height:1.9;

}

/* ---------- Highlights ---------- */

.about-highlights{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.about-highlights span{

    display:flex;

    align-items:center;

    gap:10px;

    background:#FFFFFF;

    color:#1D2A4D;

    border-radius:50px;

    padding:14px 22px;

    font-weight:600;

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

}

.about-highlights i{

    color:#FF7A00;

    margin:0;

}

/* ---------- Buttons ---------- */

.about-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:10px;

}

/* Register Button */

.about-buttons .btn-theme{

    background:#FF7A00;

    color:#FFFFFF !important;

    border:2px solid #FF7A00;

}

.about-buttons .btn-theme:hover{

    background:#FF8F1F;

    color:#FFFFFF !important;

}

/* Find Tutors Button */

.about-buttons .btn-outline-theme{

    background:#FFFFFF;

    color:#16213E !important;

    border:2px solid #FFFFFF;

}

.about-buttons .btn-outline-theme:hover{

    background:#F5F5F5;

    color:#16213E !important;

}

/* ---------- Mobile ---------- */

@media(max-width:768px){

    .about-hero{

        padding:40px 0;

    }

    .about-hero-card{

        padding:40px 25px;

    }

    .about-hero-card h1{

        font-size:34px;

    }

}
/* ==========================================================
   Override Global Heading Colors
========================================================== */

.about-hero-card h1{
    color:#FFFFFF !important;
}

.about-hero-card p{
    color:rgba(255,255,255,.90) !important;
}

.about-hero-card .about-highlights span{
    color:#1D2A4D !important;
}

.about-hero-card .btn-outline-theme{
    background:#FFFFFF;
    border-color:#FFFFFF;
    color:#16213E !important;
}

.about-hero-card .btn-outline-theme:hover{
    background:#F5F5F5;
    color:#16213E !important;
}
/* =========================================
   Dark Cards
========================================= */

.htm-dark-card h1,
.htm-dark-card h2,
.htm-dark-card h3,
.htm-dark-card h4,
.htm-dark-card h5,
.htm-dark-card h6{

    color:#FFFFFF;

}

.htm-dark-card p{

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

}