/*=========================================
GRACELAND FOUNDATION WEBSITE
MAIN STYLE SHEET
=========================================*/


/*=========================================
GLOBAL RESET
=========================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}



body{

    font-family:'Poppins',sans-serif;

    color:#333;

    background:#ffffff;

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

}



ul{

    list-style:none;

}





/*=========================================
BRAND COLOURS
=========================================*/


:root{


    /* Logo Blue */

    --primary:#0756A8;


    /* Orange */

    --orange:#F47B20;


    /* Purple */

    --purple:#68459B;


    /* Teal Green */

    --green:#16A085;


    /* Light Background */

    --light:#F5F7FA;


    /* Dark Text */

    --dark:#222;


    /* Grey */

    --gray:#666;


    /* White */

    --white:#ffffff;


}





/*=========================================
GENERAL SECTIONS
=========================================*/


section{

    padding:80px 0;

}



.container{

    max-width:1200px;

}





/*=========================================
HEADINGS
=========================================*/


section h6{

    color:var(--orange);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;

}



section h2{

    color:var(--primary);

    font-size:2.5rem;

    font-weight:800;

    margin-bottom:20px;

}



section p{

    line-height:1.8;

    color:var(--gray);

}



.lead{

    font-size:1.1rem;

}






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


.btn{

    padding:12px 30px;

    border-radius:30px;

    font-weight:600;

    transition:.3s;

}



.btn-success{

    background:var(--green);

    border:none;

    color:white;

}



.btn-success:hover{

    background:var(--primary);

}



.btn-warning{

    background:var(--orange);

    border:none;

    color:white;

}



.btn-warning:hover{

    background:var(--purple);

}
/*=========================================
HEADER
=========================================*/


header{

    background:white;

    padding:30px 15px;

    text-align:center;

}



.logo{

    width:130px;

    margin:0 auto 15px;

}



.foundation-title{

    color:var(--primary);

    font-size:2.8rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}



.tagline{

    color:var(--orange);

    font-size:1rem;

    font-weight:500;

}



.foundation-title::after{

    content:"";

    display:block;

    width:120px;

    height:4px;

    background:var(--orange);

    margin:15px auto;

    border-radius:20px;

}






/*=========================================
NAVIGATION BAR
=========================================*/


.navbar{

    background:var(--primary)!important;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

}



.navbar-brand{

    font-weight:700;

    color:white!important;

}



.navbar-nav{

    align-items:center;

}



.nav-link{

    color:white!important;

    font-weight:600;

    padding:18px 20px!important;

    position:relative;

    transition:.3s;

}



.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:8px;

    width:0;

    height:3px;

    background:var(--orange);

    transform:translateX(-50%);

    transition:.3s;

}



.nav-link:hover{

    color:var(--orange)!important;

}



.nav-link:hover::after{

    width:70%;

}



.nav-link.active{

    color:var(--orange)!important;

}



.nav-link.active::after{

    width:70%;

}





/* MOBILE NAVIGATION */


.navbar-toggler{

    border:2px solid white;

}



.navbar-toggler:focus{

    box-shadow:none;

}



@media(max-width:768px){


.foundation-title{

    font-size:1.8rem;

}


.logo{

    width:95px;

}


.nav-link{

    text-align:center;

    padding:15px!important;

}


}
/*=========================================
HERO IMAGE SLIDER
=========================================*/


.hero-slider{

    position:relative;

    overflow:hidden;

}



.carousel-item{

    position:relative;

}



.carousel-item img{

    width:100%;

    height:700px;

    object-fit:cover;

}





/* DARK COLOUR OVER IMAGE */

.slider-overlay{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;


    background:

    linear-gradient(

    rgba(7,86,168,.75),

    rgba(22,160,133,.65)

    );


}





/* HERO TEXT */


.carousel-caption{

    position:absolute;

    z-index:5;

    bottom:25%;

    left:10%;

    right:10%;

}



.carousel-caption h1{

    color:white;

    font-size:3.8rem;

    font-weight:800;

    line-height:1.2;

    text-transform:uppercase;

    animation:slideText 1s ease;

}



.carousel-caption p{

    color:white;

    font-size:1.2rem;

    max-width:850px;

    margin:20px auto;

    animation:fadeText 1.5s ease;

}



.carousel-caption .btn{

    margin:8px;

}




/* SLIDER BUTTONS */


.carousel-control-prev,
.carousel-control-next{

    width:60px;

}





.carousel-indicators button{

    width:12px;

    height:12px;

    border-radius:50%;

}






/* ANIMATIONS */


@keyframes slideText{


from{

    transform:translateY(40px);

    opacity:0;

}


to{

    transform:translateY(0);

    opacity:1;

}


}




@keyframes fadeText{


from{

    opacity:0;

}


to{

    opacity:1;

}


}






/* MOBILE HERO */


@media(max-width:768px){


.carousel-item img{

    height:500px;

}



.carousel-caption{

    bottom:15%;

    left:5%;

    right:5%;

}



.carousel-caption h1{

    font-size:2rem;

}



.carousel-caption p{

    font-size:.95rem;

}



.carousel-caption .btn{

    padding:10px 20px;

    font-size:.9rem;

}


}
/*=========================================
ABOUT SECTION
=========================================*/


.about img{

    border-radius:20px;

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

}



.about h2{

    color:var(--primary);

}



.about h6{

    color:var(--orange);

}





/*=========================================
PROGRAMME CARDS
=========================================*/


.card{

    border:none;

    border-radius:20px;

    overflow:hidden;

    background:white;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.4s;

    height:100%;

}



.card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}



.card img{

    height:240px;

    object-fit:cover;

}



.card-body{

    padding:30px;

}



.card h4{

    color:var(--primary);

    font-weight:700;

    margin-bottom:15px;

}



.card p{

    color:var(--gray);

}





.card .btn{

    margin-top:15px;

}







/*=========================================
IMPACT STATISTICS
=========================================*/


.stats{

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--green)

    );

    color:white;

}



.stats h6{

    color:var(--orange);

}



.stats h2{

    color:white;

}



.stat-box{

    background:white;

    padding:35px 20px;

    border-radius:20px;

    transition:.3s;

}



.stat-box:hover{

    transform:translateY(-8px);

}



.stat-box h2{

    color:var(--primary);

    font-size:3rem;

    font-weight:800;

}



.stat-box p{

    color:var(--gray);

    font-weight:600;

}






/*=========================================
NEWS CARDS
=========================================*/


.news-card{

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.1);

    transition:.3s;

}



.news-card:hover{

    transform:translateY(-8px);

}



.news-card img{

    height:230px;

    object-fit:cover;

}



.news-card h4{

    color:var(--primary);

}




/*=========================================
SECTION BACKGROUND
=========================================*/


.bg-light{

    background:var(--light)!important;

}
/*=========================================
GALLERY SECTION
=========================================*/


.gallery-card{

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}



.gallery-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    cursor:pointer;

    transition:.5s;

}



.gallery-card:hover img{

    transform:scale(1.08);

}






/*=========================================
LIGHTBOX
=========================================*/


.lightbox{

    display:none;

    position:fixed;

    z-index:9999;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.9);

    align-items:center;

    justify-content:center;

}



.lightbox img{

    max-width:90%;

    max-height:85%;

    border-radius:15px;

}



.lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    color:white;

    font-size:45px;

    cursor:pointer;

}







/*=========================================
CALL TO ACTION
=========================================*/


.impact-section{

    background:

    linear-gradient(

    135deg,

    var(--purple),

    var(--primary)

    );

    padding:80px 0;

}



.impact-section h2{

    color:white;

    font-size:2.8rem;

}



.impact-section p{

    color:white;

    max-width:800px;

    margin:20px auto;

}







/*=========================================
FOOTER
=========================================*/


.footer{

    background:#111827;

    color:white;

    padding:70px 0 20px;

}



.footer-logo{

    width:100px;

    margin-bottom:20px;

}



.footer h4{

    color:var(--orange);

    margin-bottom:25px;

    font-weight:700;

}



.footer p{

    color:#ddd;

}



.footer ul li{

    margin-bottom:12px;

}



.footer ul li a{

    color:#ddd;

    transition:.3s;

}



.footer ul li a:hover{

    color:var(--orange);

}



.footer hr{

    border-color:rgba(255,255,255,.2);

}



.footer .text-center p{

    color:#aaa;

}







/*=========================================
SOCIAL ICONS
=========================================*/


.social-icons a{

    display:inline-flex;

    width:40px;

    height:40px;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:white;

    border-radius:50%;

    margin-right:10px;

    transition:.3s;

}



.social-icons a:hover{

    background:var(--orange);

    transform:translateY(-5px);

}







/*=========================================
WHATSAPP FLOAT BUTTON
=========================================*/


.whatsapp-btn{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    background:#25D366;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:30px;

    z-index:999;

    box-shadow:0 10px 25px rgba(0,0,0,.3);

}



.whatsapp-btn:hover{

    transform:scale(1.1);

    color:white;

}






/*=========================================
SCROLL TOP
=========================================*/


.scroll-top{

    position:fixed;

    right:25px;

    bottom:100px;

    width:45px;

    height:45px;

    background:var(--orange);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    cursor:pointer;

    opacity:0;

    transition:.3s;

}



.scroll-top.active{

    opacity:1;

}
/*=========================================
FINAL RESPONSIVE DESIGN
=========================================*/


/* TABLETS */

@media(max-width:992px){


section{

    padding:60px 0;

}



.foundation-title{

    font-size:2.2rem;

}



.carousel-caption h1{

    font-size:2.8rem;

}



.card img{

    height:220px;

}



.stat-box h2{

    font-size:2.5rem;

}



}





/* MOBILE PHONES */

@media(max-width:768px){



body{

    overflow-x:hidden;

}



/* HEADER */

header{

    padding:20px 10px;

}



.logo{

    width:90px;

}



.foundation-title{

    font-size:1.6rem;

    letter-spacing:1px;

}



.tagline{

    font-size:.85rem;

}





/* NAVIGATION */


.navbar-nav{

    text-align:center;

}



.nav-link{

    padding:12px!important;

}






/* HERO */


.carousel-item img{

    height:480px;

}



.carousel-caption{

    bottom:12%;

}



.carousel-caption h1{

    font-size:1.8rem;

}



.carousel-caption p{

    font-size:.9rem;

}



.carousel-caption .btn{

    display:block;

    width:80%;

    margin:10px auto;

}






/* SECTIONS */


section h2{

    font-size:2rem;

}



section p{

    font-size:.95rem;

}





/* CARDS */


.card{

    margin-bottom:20px;

}



.card-body{

    padding:20px;

}



.card img{

    height:200px;

}





/* STATISTICS */


.stat-box{

    margin-bottom:20px;

    padding:25px;

}



.stat-box h2{

    font-size:2.2rem;

}





/* GALLERY */


.gallery-card img{

    height:220px;

}






/* LIGHTBOX */


.lightbox img{

    max-width:95%;

    max-height:70%;

}



.lightbox-close{

    right:20px;

    top:15px;

    font-size:35px;

}






/* CTA */


.impact-section h2{

    font-size:2rem;

}







/* FOOTER */


.footer{

    text-align:center;

    padding:50px 15px 20px;

}



.footer h4{

    margin-top:25px;

}



.social-icons{

    justify-content:center;

}





/* FLOAT BUTTONS */


.whatsapp-btn{

    width:55px;

    height:55px;

    font-size:25px;

    right:15px;

    bottom:15px;

}



.scroll-top{

    right:15px;

    bottom:85px;

}



}






/* SMALL PHONES */

@media(max-width:480px){



.foundation-title{

    font-size:1.4rem;

}



.carousel-item img{

    height:430px;

}



.carousel-caption h1{

    font-size:1.5rem;

}



.carousel-caption p{

    display:none;

}



.btn{

    padding:10px 20px;

}



}







/*=========================================
PAGE TRANSITION
=========================================*/


body{

    animation:pageLoad .6s ease;

}



@keyframes pageLoad{


from{

opacity:0;

}


to{

opacity:1;

}


}





/*=========================================
UTILITY CLASSES
=========================================*/


.text-blue{

    color:var(--primary)!important;

}



.text-orange{

    color:var(--orange)!important;

}



.text-purple{

    color:var(--purple)!important;

}



.text-green{

    color:var(--green)!important;

}