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

.hero{

    position:relative;

    width:100%;

    overflow:hidden;

    background:#fff;

}


/* Background Artwork */

.hero-bg{

    width:100%;

    height:auto;

    display:block;

}


/* Hero Content */

.hero-content{

    position:absolute;

    top:53%;

    left:8%;

    transform:translateY(-50%);

    max-width:480px;

}


/* Logo */

.hero-logo{

    width:100%;

    max-width:420px;

    display:block;

    margin-bottom:20px;

}


/* Verse */

.hero-verse{

    font-size:22px;

    font-style:italic;

    font-weight:500;

    color:#222;

    margin-bottom:18px;

}

.hero-verse span{

    margin-left:10px;

    font-size:14px;

    font-style:normal;

    font-weight:600;

}


/* Description */

.hero-description{

    font-size:18px;

    line-height:1.8;

    color:#333;

}

.hero-description strong{

    font-weight:700;

}
/* ==========================================================
   Tablet or Mobile
========================================================== */
@media (max-width:992px){

.hero-content{

    left:6%;

    max-width:420px;

}

.hero-logo{

    max-width:300px;

}

.hero-verse{

    font-size:18px;

}

.hero-description{

    font-size:15px;

}

}

@media (max-width:768px){

.hero{

    background:#ffffff;

}

.hero-bg{

    width:180%;

    margin-left:-40%;

}

.hero-content{

    left:7%;

    top:50%;

    max-width:300px;

}

.hero-logo{

    max-width:220px;

}

.hero-verse{

    font-size:16px;

}

.hero-description{

    font-size:13px;

}

}
/* ==========================================================
   CONTAINER
========================================================== */

.hero .container{

    max-width:1320px;

}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.hero-content{

    max-width:520px;

    padding-top:40px;

    padding-bottom:40px;

}


/* ==========================================================
   LOGO
========================================================== */

.hero-logo{

    width:100%;

    max-width:420px;

    height:auto;

    display:block;

    margin-bottom:18px;

}


/* ==========================================================
   BIBLE VERSE
========================================================== */

.hero-verse{

    margin-bottom:18px;

    font-size:20px;

    font-style:italic;

    font-weight:500;

    color:#222;

    line-height:1.5;

}


.hero-verse strong{

    font-weight:700;

}


.hero-verse span{

    margin-left:8px;

    font-size:14px;

    font-style:normal;

    font-weight:600;

    letter-spacing:1px;

    color:#555;

    text-transform:uppercase;

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.hero-description{

    font-size:18px;

    color:#333;

    line-height:1.8;

    margin-bottom:35px;

}


.hero-description strong{

    color:#111;

    font-weight:700;

}


/* ==========================================================
   BUTTONS
========================================================== */

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}


.hero-buttons .btn{

    padding:14px 32px;

    font-size:16px;

    font-weight:600;

    border-radius:40px;

    transition:.3s;

}


.hero-buttons .btn-success{

    background:#198754;

    border:none;

}


.hero-buttons .btn-success:hover{

    background:#157347;

}


.hero-buttons .btn-outline-success{

    border:2px solid #198754;

    color:#198754;

    background:#fff;

}


.hero-buttons .btn-outline-success:hover{

    background:#198754;

    color:#fff;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

.hero h1,
.hero h2,
.hero p{

    margin-top:0;

}


/* ==========================================================
   LINKS
========================================================== */

.hero a{

    text-decoration:none;

}


/* ==========================================================
   IMAGE
========================================================== */

.hero img{

    max-width:100%;

    height:auto;

}


/* ==========================================================
   REMOVE HORIZONTAL SCROLL
========================================================== */

html,
body{

    overflow-x:hidden;

}
/* ==========================================================
   HERO RESPONSIVE
   PART 2B
========================================================== */


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width:1600px){

.hero-content{

    max-width:500px;

}

.hero-logo{

    max-width:380px;

}

.hero-verse{

    font-size:19px;

}

.hero-description{

    font-size:17px;

}

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1366px){

.hero{

    background-position:center center;

}

.hero-content{

    max-width:470px;

}

.hero-logo{

    max-width:340px;

}

.hero-verse{

    font-size:18px;

}

.hero-description{

    font-size:16px;

    line-height:1.8;

}

.hero-buttons .btn{

    padding:13px 28px;

}

}


/* ==========================================================
   SMALL LAPTOP
========================================================== */

@media (max-width:1200px){

.hero-content{

    max-width:430px;

}

.hero-logo{

    max-width:300px;

}

.hero-description{

    font-size:15px;

}

}


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

@media (max-width:992px){

.hero{

    background-position:72% center;

}

.hero-overlay{

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

}

.hero-content{

    margin:auto;

    text-align:center;

    max-width:620px;

}

.hero-logo{

    margin:auto auto 25px;

    max-width:300px;

}

.hero-buttons{

    justify-content:center;

}

.hero-description{

    margin-left:auto;

    margin-right:auto;

}

}


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

@media (max-width:768px){

.hero{

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


    background-position:75% center;

}

.hero-overlay{

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

}

.hero-content{

    text-align:center;

    padding:30px 15px;

}

.hero-logo{

    max-width:250px;

}

.hero-verse{

    font-size:17px;

}

.hero-description{

    font-size:15px;

    line-height:1.8;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

    width:100%;

}

.hero-buttons .btn{

    width:260px;

}

}


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

@media (max-width:576px){

.hero{

    background-position:78% center;

}

.hero-logo{

    max-width:210px;

}

.hero-verse{

    font-size:16px;

}

.hero-verse span{

    display:block;

    margin-top:6px;

    margin-left:0;

}

.hero-description{

    font-size:14px;

}

.hero-buttons .btn{

    width:230px;

}

}


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

@media (max-width:480px){

.hero{

    background-position:80% center;

}

.hero-logo{

    max-width:180px;

}

.hero-verse{

    font-size:15px;

}

.hero-description{

    font-size:13.5px;

    line-height:1.7;

}

.hero-buttons .btn{

    width:210px;

    font-size:15px;

}

}


/* ==========================================================
   IMAGE OPTIMIZATION
========================================================== */

.hero img{

    max-width:100%;

    height:auto;

}


/* ==========================================================
   SMOOTH SCROLL
========================================================== */

html{

    scroll-behavior:smooth;

}

.diamond-links{

    position:absolute;

    inset:0;

}

.diamond-btn{

    position:absolute;

    color:#fff;

    font-weight:700;

    text-decoration:none;

    text-align:center;

    text-shadow:0 2px 6px rgba(0,0,0,.7);

    transition:.3s;

}

.diamond-btn:hover{

    transform:scale(1.08);

    color:#FFD700;

}

.disaster{

    top:10%;

    left:150%;

}

.homecare{

    top:53%;

    left:179%;

}

.leadership{

    top:80%;

    left:148%;

}

.health{

    top:90%;

    left:212%;

}
/* Remove gap between Hero and Welcome */

.hero{

    margin-bottom:0 !important;

    padding-bottom:0 !important;

}

.welcome-section{

    margin-top:0 !important;

    padding-top:55px;

}